/* ========================================================================== LooneyTech — design tokens Values sampled directly from the Webflow build at https://looneytech-co-uk.webflow.io on 2026-08-27. Variable names below mirror Webflow's own variable names so the two stay comparable. ========================================================================== */ /* Fonts are linked from , NOT imported here. An @import is only discovered once this file has downloaded and parsed, so the font request could not start until tokens.css finished — measured live at 336ms to 631ms for this file, with the font CSS starting at 632ms and first paint at 768ms. The font files then arrived after first paint, so text rendered in a fallback and reflowed when they swapped in. That reflow was the site's Cumulative Layout Shift. Never move this back into CSS. */ :root { color-scheme: light; /* ---- Brand core ---- */ --dark: #050038; /* headings, buttons, primary ink */ --red: #f24e1e; /* brand orange — Manage badge, keyword highlight */ --primary-blue: #a259ff; /* brand purple — Discover badge */ --lemon-green: #7d9426; /* Flex badge — deepened from #a6c03d so white text clears large-text AA (3.42). The original was 2.05 against white, which is why it previously needed navy text. */ --lemon-green-deep: #5f7415; /* Flex buttons — white text, 5.26 */ --yellow-green: #7d9426; /* number badge "3" — was #bad15c (2.5, unreadable) */ --playful-yellow: #ffd02f; --slate-blue: #3f53d8; /* ---- Tints ---- */ --light-orange: #f24e1ef2; --light-purple: #a259ff66; --plum: #cea7ff; --light-salmon: #ffc1ae; --light-steel-blue: #bbc7ff; /* ---- Neutrals ---- */ --white: #ffffff; --white-f7f7f7: #f7f7f7; /* card surface */ --white-smoke: #e9e9e9; --gainsboro: #e5e5e5; --light-grey: #cacaca; --grey: #757575; --para-coor: rgba(5, 0, 56, 0.85); /* body copy */ --text-light: rgba(0, 0, 0, 0.6); /* ---- Semantic aliases (use these in components) ---- */ --ground: var(--white); --surface: var(--white-f7f7f7); --ink: var(--dark); --ink-body: var(--para-coor); --ink-muted: var(--grey); --border: var(--gainsboro); /* ---- Page accent ------------------------------------------------------- Each service page carries its badge colour through the whole page rather than defaulting to orange everywhere. Four tokens, because the brand hues are bright: at display sizes white sits on them fine, but at 15px button text most of them fail WCAG AA (4.5:1). Measured against white: purple #a259ff 3.88 · orange #f24e1e 3.57 · green #a6c03d 2.05 So display and button surfaces are separate tokens, and green keeps its exact brand value with NAVY text (9.62) rather than being darkened. --------------------------------------------------------------------- */ --accent: var(--red); /* SURFACES + large text: highlight, badges, dots */ --on-accent: #ffffff; /* text on --accent (large sizes only) */ /* Small orange TEXT on a light background needs more contrast than the brand hue gives (#f24e1e on white is 3.57, below the 4.5 body-text threshold). This darker hue is for that case ONLY — as thin text the difference is imperceptible, whereas as a filled surface it reads as the wrong orange. Never use it for a background. */ --accent-ink: #c63d10; /* ---- Status (RAG) -------------------------------------------------------- Scores carry meaning, so they use semantic colour, not the page accent. An 83% rendered in brand orange reads as a warning when the label says "Ahead of most". These are deliberately kept clear of the brand palette (>=15 OKLab dE from orange, purple and slate) so a status colour is never mistaken for a service colour, and all clear 4.5:1 on white for the small percentage figures. Warning sits 13.5 dE from the Flex olive, which is tighter than ideal — acceptable only because the two never appear on the same page: olive is Flex-only, RAG is assessment-only. If you ever put a score on the Flex page, re-check that pair. ------------------------------------------------------------------------ */ --rag-critical: #a4161a; /* 7.75 on white */ --rag-warning: #8f6200; /* 5.36 on white */ --rag-good: #047857; /* 5.48 on white */ /* ---- Type ---- */ --font-display: "Poppins", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --h1-size: 64px; --h1-weight: 700; --h1-lh: 1.18; --h2-size: 49px; --h2-weight: 600; --h2-lh: 1.25; --h3-size: 24px; --h3-weight: 600; --h3-lh: 1.46; --lede-size: 26px; --lede-lh: 1.2; --body-size: 17px; --body-lh: 1.65; --small-size: 16px; --small-lh: 1.75; --tracking: 0.1px; /* applied globally in the Webflow build */ /* ---- Radii ---- */ --r-card: 20px; --r-button: 13px; --r-badge: 11px; --r-num: 10px; --r-highlight: 15px; --r-pill: 100px; /* ---- Spacing ---- */ --card-pad: 40px 30px; --button-pad: 20px 25px; --section-gap: 96px; /* stepped down on small screens — see below */ --container: 1180px; } /* -------------------------------------------------------------------------- LIGHT ONLY — deliberately. The brand is a light identity: white ground, navy ink, orange accent. A derived dark theme meant anyone whose phone was set to dark saw a different site from the one in every screenshot, mockup and PDF. `color-scheme: light` below also stops the browser darkening form controls and scrollbars. Do not reintroduce a prefers-color-scheme block without redoing the whole palette; a partial one is what produces unreadable pages. -------------------------------------------------------------------------- */ /* ========================================================================== Base ========================================================================== */ /* ========================================================================== Page themes — set on . Contrast ratios against their own text colour are noted; all clear WCAG AA for the size they are used at. ========================================================================== */ body.theme-audit { /* Discover */ --accent: var(--primary-blue); /* #a259ff + white 3.88 — display only */ --on-accent: #ffffff; --accent-ink: #6f2bd4; /* small text on light: 7.07 vs white */ } body.theme-care { /* Manage — the site default */ --accent: var(--red); /* #f24e1e + white 3.57 — display only */ --on-accent: #ffffff; --accent-ink: #c63d10; /* small text on light: 5.15 vs white */ } body.theme-flex { /* Transform */ --accent: #7d9426; /* + white 3.42 — display only */ --on-accent: #ffffff; --accent-ink: #5f7415; /* small text on light: 5.26 vs white */ } body.theme-agents { /* Automate */ --accent: var(--slate-blue); /* #3f53d8 + white 6.10 */ --on-accent: #ffffff; --accent-ink: #2f3fa8; /* small text on light: 8.76 vs white */ } /* 96px of padding top AND bottom is 192px between sections — fine on a desktop, but over a fifth of the viewport on a 430px phone, which reads as the page having fallen apart rather than as breathing room. */ @media (max-width: 900px) { :root { --section-gap: 68px; } } @media (max-width: 640px) { :root { --section-gap: 52px; } } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--ground); color: var(--ink-body); font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-lh); letter-spacing: var(--tracking); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); letter-spacing: var(--tracking); text-wrap: balance; margin: 0; } h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-lh); } h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-lh); } h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-lh); } p { margin: 0; } /* height:auto is REQUIRED, not cosmetic. Every image carries width/height attributes so the browser can reserve space and avoid layout shift. Those attributes also act as a presentational hint: if CSS constrains width but leaves height unset, the attribute height wins and the image is stretched. The mascots rendered 300x660 instead of 300x366 until this was added. */ img { max-width: 100%; height: auto; display: block; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ========================================================================== Components ========================================================================== */ /* Keyword highlight — the orange box around "Google" in the hero. box-decoration-break keeps each wrapped line its own rounded box rather than one tall slab; works best on a single word or short phrase. */ /* Keyword highlight — the orange box around a word in a heading. Must be inline-block: on a plain inline element the painted background is the FONT content box (~1.47em in Poppins), not the line-height, so at the brand's 118% heading leading the box grows taller than the line spacing and the previous line's descenders end up sitting inside the orange box. inline-block makes line-height govern the box, and the heading gets extra leading so the boxes never touch. Single words / short phrases only. */ .highlight { display: inline-block; background: var(--accent); color: var(--on-accent); border-radius: var(--r-highlight); line-height: 1.06; padding: 2px 12px 6px; } :is(h1, h2, h3):has(.highlight) { line-height: 1.34; } /* Verb badge — Manage / Discover / Transform */ .badge { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.4; color: #fff; border-radius: var(--r-badge); padding: 5px 12px; } .badge--manage { background: var(--red); } .badge--discover { background: var(--primary-blue); } .badge--transform{ background: var(--lemon-green); } /* Number chip — the 1 2 3 in "IT's Easy as 1 2 3" */ /* Poppins sets figures proportionally, so a bare "1" is ~10px narrower than a "2" or "3" and its chip visibly shrinks. tabular-nums equalises the glyph advance where the font supports it; min-width guarantees identical chips either way. Both are needed — do not drop one. */ .num { display: inline-block; font-family: var(--font-display); font-weight: 600; color: #fff; border-radius: var(--r-num); padding: 5px 10px; min-width: 1.1em; text-align: center; font-variant-numeric: tabular-nums; } /* The chips act as a legend for the three service cards directly beneath them, so each number carries its service's colour. If the card order ever changes, these must change with it — mismatched colours are worse than no colour. */ .num--1 { background: var(--primary-blue); } /* 1 = Workspace Audit · Discover */ .num--2 { background: var(--red); } /* 2 = Workspace Care · Manage */ .num--3 { background: var(--lemon-green); } /* 3 = Workspace Flex · Transform */ /* Buttons */ .btn { display: inline-block; /* Buttons stretch to full width whenever they sit in a stretched flex or grid column, which is most of the mobile layout. Without this the label falls to the left edge of a full-width button and looks unfinished — inline-block shrink-wraps on desktop so the fault only shows on phones. */ text-align: center; font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.2; text-decoration: none; border: none; border-radius: var(--r-button); padding: var(--button-pad); cursor: pointer; transition: opacity 0.16s ease, background 0.16s ease; } .btn--primary { background: var(--dark); color: #fff; } /* Commerce button. White on brand orange is 3.57, which fails for body text but PASSES the large-text threshold, so the button is sized to qualify: 19px at weight 600 is >=18.66px bold. That keeps the exact brand orange with white text rather than darkening the orange or using dark text on it. If you shrink this button below 19px/600 the contrast becomes non-compliant. */ .btn--accent { background: var(--red); color: #fff; font-size: 19px; font-weight: 600; } .btn:hover { opacity: 0.88; } .btn:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 3px; } /* Card */ .card { background: var(--surface); border-radius: var(--r-card); padding: var(--card-pad); } /* Responsive type — the Webflow desktop scale is large; step it down */ @media (max-width: 900px) { :root { --h1-size: 44px; --h2-size: 34px; --h3-size: 21px; --lede-size: 20px; } } @media (max-width: 560px) { :root { --h1-size: 34px; --h2-size: 27px; --card-pad: 30px 22px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }