/* ============================================================================================ JOY PUBLIC SITE — TYPE & SPACING CONFIG /var/www/joy/public/assets/css/site.config.css ============================================================================================ Every font, size, weight, line height and section spacing of the public website (home, service pages, global infrastructure, pricing, FAQ, landing pages, sign-in pages) is a value in this file. The stylesheet (site.css) only ever refers to these names, so changing a number here changes it everywhere it is used. No build step: this file is served as-is. HOW TO EDIT ON THE SERVER (keeps your changes across updates) 1. On the CORE server, copy this file once: sudo cp /var/www/joy/public/assets/css/site.config.css /var/www/joy/public/assets/css/site.config.local.css 2. Edit the copy (only the lines you want to change need to stay in it): sudo nano /var/www/joy/public/assets/css/site.config.local.css 3. Make the pages pick it up: sudo joycache and on each frontend node (they take the file from the core): sudo joyupdate The .local.css file loads after this one, so its values win. joyupdate never overwrites it; this file (site.config.css) IS replaced by every release — do not edit it directly. FONTS The site uses the typeface set in joy.css (Open Sans, self-hosted — "FONTS — CHANGE HERE" at the top of public/assets/css/joy.src.css). To use another font on the website only, put it first in --site-font below. A Google font needs the @import as the FIRST line of the .local.css file, e.g. @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&display=swap"); :root { --site-font: "IBM Plex Sans", "Open Sans", sans-serif; } SCALE (Carbon Design System, productive set — carbondesignsystem.com/elements/typography/type-sets) body-01 14/20 · body-compact-01 14/18 (buttons, links) · label-01 12/16 letter-spacing .32px (eyebrows, tags, field labels) · heading-02 16/24 · heading-03 20/28 · heading-04 28/36 · heading-05 32/40. Weights: Carbon uses 300 light, 400 regular and 600 semibold only — never 500 or 700. Links, buttons, tags and labels are 400. Semibold is for short headings, never for running text. SPACING (carbondesignsystem.com/elements/spacing) spacing-05 16 · 06 24 · 07 32 · 08 40 · 09 48 · 10 64 · 11 80 · 12 96. Sections below use 80 / 96, tiles 24 inside, section heads stand 40 clear of their content. ============================================================================================ */ :root { /* ---- typefaces ---- */ --site-font: var(--font); /* the website's typeface (defaults to the product font from joy.css) */ --site-mono: var(--mono); /* code, ASN, addresses, amounts */ /* ---- sizes (desktop, px) ---- */ --t-body: 14px; /* paragraphs Carbon body-01 */ --t-lead: 14px; /* the paragraph under a section title (16px = Carbon body-02, larger) */ --t-small: 13px; /* card text, helper lines, chips, footer links */ --t-label: 12px; /* eyebrows, tags, table heads, uppercase captions Carbon label-01 */ --t-h1: 30px; /* page titles (Carbon heading-05 = 32) */ --t-hero: 26px; /* the home-page headline (Carbon heading-04 = 28) */ --t-h2: 22px; /* section titles (Carbon heading-03 = 20, heading-04 = 28) */ --t-h3: 16px; /* card / tile / step titles Carbon heading-02 */ --t-h4: 15px; /* smaller titles (glance card, lists) */ --t-promise: 18px; /* the blue line under the home headline */ --t-number: 24px; /* the big figures in the numbers strip (99.99 %, ~90 s …) */ --t-number-lg: 28px; /* the very large figures (backbone Gb/s, uptime tiles) */ --t-button: 14px; /* buttons Carbon body-compact-01 */ --t-link: 14px; /* standalone links ("About CDN →") Carbon body-compact-01 */ --t-nav: 14px; /* header menu */ --t-tag: 12px; /* Live / Beta / Soon tags Carbon label-01 */ /* ---- sizes on phones and tablets (under 1057px) ---- */ --m-body: 16px; --m-lead: 16px; --m-small: 14px; --m-h1: 30px; --m-hero: 26px; --m-h2: 24px; --m-h3: 18px; --m-button: 15px; --m-tag: 13px; /* ---- weights: 300 light · 400 regular · 600 semibold (never 500 / 700) ---- */ --w-heading: 400; /* h1, h2, the hero headline */ --w-title: 400; /* card, tile, step and list titles (Carbon heading-02 would be 600 — 400 reads lighter) */ --w-strong: 600; /* "Joy Services," in the headline, inside a paragraph, prices */ --w-number: 400; /* the big figures */ --w-link: 400; /* links Carbon: regular */ --w-button: 400; /* buttons Carbon: regular */ --w-label: 400; /* eyebrows, tags, table heads Carbon label-01: regular */ --w-nav: 400; /* header menu, footer column titles */ /* ---- line heights and tracking ---- */ --lh-body: 1.6; /* paragraphs (Carbon body-01 is 20/14 = 1.43; marketing copy reads better a little looser) */ --lh-lead: 1.7; --lh-small: 1.6; --lh-heading: 1.2; /* h1 / h2 */ --lh-title: 1.3; /* h3 */ --ls-heading: -0.02em; /* tracking of h1 / h2 (Carbon: 0 at 20–32px; a touch tighter suits Open Sans) */ --ls-label: .08em; /* uppercase eyebrows (Carbon label-01: .32px on 12px ≈ .027em; uppercase needs more) */ /* ---- service icons (the pictogram on each service card and console-feature line) ---- */ --glyph-bg: transparent; /* Carbon: no box, just the pictogram. Coloured squares as before: --glyph-bg: var(--accent); --glyph-fg: #fff; --glyph-size: 36px; --glyph-icon: 18px; */ --glyph-fg: var(--accent); --glyph-size: 24px; /* the box */ --glyph-icon: 24px; /* the pictogram inside it */ /* ---- layout ---- */ --site-max: 1440px; /* the content column; the page is centred on wider screens (240px of margin each side at 1920) */ --site-gutter: 40px; /* page margin left / right on laptops and desktops; phones use --site-gutter-m */ --site-gutter-m: 16px; --sp-section: 80px; /* space above and below an ordinary section Carbon spacing-11 */ --sp-section-xl: 96px; /* the large sections (services, last-mile, capacity band) Carbon spacing-12 */ --sp-section-sm: 40px; /* thin strips (the numbers strip) Carbon spacing-08 */ --sp-head: 40px; /* between a section title block and its content */ --sp-hero: 72px; /* above and below the home-page hero */ --sp-tile: 24px; /* inside cards and tiles Carbon spacing-06 (tile default is 16) */ --sp-grid: 32px; /* between free-standing cards (steps) Carbon grid gutter */ }