/* ===================================================================================================================== FONTS Bricolage Grotesque (H1, H2, H3, Stat) and Onest (everything else), both self-hosted, both SIL Open Font License 1.1. Bricolage is three static Google Fonts instances (about 22 KB each), each cut at the optical size it is used at: H1 = opsz 48 / 700 (the only one preloaded), H2 = opsz 36 / 700, H3 and Stat = opsz 24 / 600. Each file is its own family so two 700 files can coexist. Fallbacks are Arial Bold (Windows, macOS, iOS) and Roboto Bold (Android), scaled with size-adjust and the ascent/descent overrides so the swap does not shift the layout (capsize, from the real files). ===================================================================================================================== */ @font-face { font-family: "Onest"; src: url("/assets/fonts/onest-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Bricolage H1"; src: url("/assets/fonts/bricolage/bricolage-latin-opsz48-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bricolage H2"; src: url("/assets/fonts/bricolage/bricolage-latin-opsz36-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bricolage H3"; src: url("/assets/fonts/bricolage/bricolage-latin-opsz24-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Rupee sign (U+20B9): Onest does not contain it, and the three Bricolage files above are Latin only. This is Google Fonts' latin-ext subset of Bricolage Grotesque (opsz 24, weight axis), restricted to U+20B9, so it downloads only on pages that show a rupee sign. It follows the weight of the text around it (the Bricolage H3 face is declared at 600, exactly like the main face, so the browser treats them as one face). It is declared after the main Onest face, so it takes precedence for that one character. */ @font-face { font-family: "Onest"; src: url("/assets/fonts/bricolage/bricolage-latin-ext-opsz24-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+20B9; } @font-face { font-family: "Bricolage H3"; src: url("/assets/fonts/bricolage/bricolage-latin-ext-opsz24-wght.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+20B9; } @font-face { font-family: "Bricolage H1 Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; size-adjust: 97.5%; ascent-override: 95.4%; descent-override: 27.7%; line-gap-override: 0%; } @font-face { font-family: "Bricolage H2 Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700; size-adjust: 99.2%; ascent-override: 93.8%; descent-override: 27.2%; line-gap-override: 0%; } @font-face { font-family: "Bricolage H3 Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 99.4%; ascent-override: 93.6%; descent-override: 27.2%; line-gap-override: 0%; } @font-face { font-family: "Bricolage H1 Fallback Android"; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"), local("Roboto Medium"), local("Roboto-Medium"); font-weight: 700; size-adjust: 103.5%; ascent-override: 89.9%; descent-override: 26.1%; line-gap-override: 0%; } @font-face { font-family: "Bricolage H2 Fallback Android"; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"), local("Roboto Medium"), local("Roboto-Medium"); font-weight: 700; size-adjust: 105.3%; ascent-override: 88.3%; descent-override: 25.6%; line-gap-override: 0%; } @font-face { font-family: "Bricolage H3 Fallback Android"; src: local("Roboto Medium"), local("Roboto-Medium"), local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"); font-weight: 600; size-adjust: 106.3%; ascent-override: 87.5%; descent-override: 25.4%; line-gap-override: 0%; } /* ===================================================================================================================== TYPE SYSTEM: the single source of truth for font, size, weight, line height and letter spacing. To change a size, edit its token here (desktop = 1025px and up, tablet = 768 to 1024px, mobile = 767px and below). Nothing else sets these. Headings take their style from the tag (h1 to h6). Everything else takes it from a class or from the style map below. Colour is not part of this section. ===================================================================================================================== */ :root { --f-body: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif; --f-h1: "Bricolage H1", "Bricolage H1 Fallback", "Bricolage H1 Fallback Android", Arial, sans-serif; --f-h2: "Bricolage H2", "Bricolage H2 Fallback", "Bricolage H2 Fallback Android", Arial, sans-serif; --f-h3: "Bricolage H3", "Bricolage H3 Fallback", "Bricolage H3 Fallback Android", Arial, sans-serif; /* H3 and Stat */ /* Bricolage Grotesque size weight line height letter spacing */ --h1-size: 54px; --h1-weight: 700; --h1-lh: 1.05; --h1-ls: -0.03em; --h2-size: 40px; --h2-weight: 700; --h2-lh: 1.1; --h2-ls: -0.025em; --h3-size: 24px; --h3-weight: 600; --h3-lh: 1.2; --h3-ls: -0.015em; --stat-size: 28px; --stat-weight: 600; --stat-lh: 1; --stat-ls: -0.02em; /* Onest */ --h4-size: 20px; --h4-weight: 600; --h4-lh: 1.3; --h4-ls: -0.01em; --h5-size: 18px; --h5-weight: 600; --h5-lh: 1.35; --h5-ls: 0; --h6-size: 16px; --h6-weight: 600; --h6-lh: 1.4; --h6-ls: 0; --hero-size: 20px; --hero-weight: 400; --hero-lh: 1.65; --hero-ls: 0; /* hero intro paragraph */ --body-size: 18px; --body-weight: 400; --body-lh: 1.65; --body-ls: 0; --card-size: 16px; --card-weight: 400; --card-lh: 1.65; --card-ls: 0; /* descriptions and lists inside cards, form fields */ --small-size: 14px; --small-weight: 400; --small-lh: 1.5; --small-ls: 0; /* hints, footer, legal, captions */ --option-size: 16px; --option-weight: 500; --option-lh: 1.3; --option-ls: 0; /* calculator answer chips and cards */ --menutitle-size: 16px; --menutitle-weight: 600; --menutitle-lh: 1.3; /* dropdown item title */ --menudesc-size: 14px; --menudesc-weight: 400; --menudesc-lh: 1.45; /* dropdown item description */ --formlabel-size: 14px; --formlabel-weight: 600; --formlabel-lh: 1.5; --formlabel-ls: 0; /* form labels and legends */ --label-size: 12px; --label-weight: 600; --label-lh: 1.2; --label-ls: 0.06em; /* eyebrows, badges, table heads (uppercase) */ --btn-size: 16px; --btn-weight: 600; --btn-lh: 1; --btn-ls: 0; --nav-size: 15px; --nav-weight: 600; --nav-lh: 1; --nav-ls: 0; --nav-menu-size: 18px; /* nav links inside the mobile menu */ } @media (max-width: 1024px) { :root { --h1-size: 46px; --h2-size: 34px; --h3-size: 22px; --stat-size: 26px; --h4-size: 19px; --h5-size: 17px; --h6-size: 16px; --hero-size: 19px; --body-size: 17px; } } @media (max-width: 767px) { :root { --h1-size: 40px; --h2-size: 28px; --h3-size: 20px; --stat-size: 24px; --h4-size: 18px; --h5-size: 16px; --h6-size: 16px; --hero-size: 18px; --body-size: 16px; } } /* Tag styles */ body { font: var(--body-weight) var(--body-size)/var(--body-lh) var(--f-body); letter-spacing: var(--body-ls); } h1, h2, h3, h4, h5, h6 { font-synthesis: none; font-kerning: normal; } h1, .h1 { font: var(--h1-weight) var(--h1-size)/var(--h1-lh) var(--f-h1); letter-spacing: var(--h1-ls); } h2, .h2 { font: var(--h2-weight) var(--h2-size)/var(--h2-lh) var(--f-h2); letter-spacing: var(--h2-ls); } h3, .h3, .adcalc .tf-title { font: var(--h3-weight) var(--h3-size)/var(--h3-lh) var(--f-h3); letter-spacing: var(--h3-ls); } h4, .h4, .faq-q { font: var(--h4-weight) var(--h4-size)/var(--h4-lh) var(--f-body); letter-spacing: var(--h4-ls); text-wrap: balance; } h5, .h5 { font: var(--h5-weight) var(--h5-size)/var(--h5-lh) var(--f-body); letter-spacing: var(--h5-ls); } h6, .h6 { font: var(--h6-weight) var(--h6-size)/var(--h6-lh) var(--f-body); letter-spacing: var(--h6-ls); } /* Legal pages: the only page-level exception. Inside the legal document wrapper (.doc: privacy, terms, cookies) h2 uses the H3 style and h3 the H4 style. The semantic tags stay as they are. */ .doc h2 { font: var(--h3-weight) var(--h3-size)/var(--h3-lh) var(--f-h3); letter-spacing: var(--h3-ls); } .doc h3 { font: var(--h4-weight) var(--h4-size)/var(--h4-lh) var(--f-body); letter-spacing: var(--h4-ls); } /* The .h1 to .h6 classes give any element the look of that heading level, so the look can differ from the semantic tag (for example

). */ p { max-width: 68ch; } p, li { text-wrap: pretty; } /* Style map: the classes and components that use each non-tag style (no style is defined anywhere else) */ /* Card text */ .text-card, .type, .svc, .issue, .who-card, .principle, .step, .links li, .flow li, .cert, .way, .work, .method, .quote, .case blockquote, .case-body > p, .tools, .calc-card, .r-teaser, .rep-cta, .svc li, .support, .case blockquote p, .principle p, .quote p, .field input, .step p, .fit span, .field textarea, .phone select, .type p, .type li, .links p, .tools-group li, .tools-note, .flow p, .work p, .cert p, .way p, .who-card p, .method p { font: var(--card-weight) var(--card-size)/var(--card-lh) var(--f-body); letter-spacing: var(--card-ls); } /* Service card promise line: Body size, weight 500, so the H3 above it clearly leads */ .svc .promise { font: 500 var(--body-size)/var(--body-lh) var(--f-body); letter-spacing: var(--body-ls); } /* Body, for the calculator's money and number fields (never below 16px, so iOS does not zoom in on focus) */ .adcalc select, .adcalc input[type="number"], .money-in, .money-in .cur, .adcalc .money-in input, .rep-price-row .money-in input, .adcalc .money-in.big input, .adcalc .money-in.big .cur, .adcalc input.big-in, .adcalc .calc-cur select, .adcalc .tf-title .opt { font-family: var(--f-body); font-size: var(--body-size); line-height: var(--body-lh); letter-spacing: var(--body-ls); } /* Hero intro */ .text-hero, .hero .lede, .page-hero .lede, .feature p { font: var(--hero-weight) var(--hero-size)/var(--hero-lh) var(--f-body); letter-spacing: var(--hero-ls); } /* Small */ .text-small, .hero-cta small, .stat p, .metric span, .case cite, .who, .plan .fine, .plan .done, footer, .foot p, .legal, .foot address, .crumbs, .form-error, .plan-pick, .foot .hours, .shot-bar span, .cookie, .cookie-prefs label span, .toc, .doc table, .who-card .who-proof, .case-proof figcaption, .field-error, .peek-row, .peek-note, .rp-skip, .calc-hint, .r-range, .r-note, .r-change, .hbar, .r-save, .consent .check, .cat-desc, .r-gst, .r-honest, .vbar b, .opt-text span, .r-cur, .cur-panel > legend, .tool-link { font: var(--small-weight) var(--small-size)/var(--small-lh) var(--f-body); letter-spacing: var(--small-ls); } /* Stat */ .stat b, .metric b, .peek-row b, .hbar b, .r-card b { font: var(--stat-weight) var(--stat-size)/var(--stat-lh) var(--f-h3); letter-spacing: var(--stat-ls); } /* Form label: Small size, weight 600 */ .field label, .field legend, .rep-price label, .calc-cur label { font: var(--formlabel-weight) var(--formlabel-size)/var(--formlabel-lh) var(--f-body); letter-spacing: var(--formlabel-ls); } /* Option: the calculator's answer chips and cards (titles). The selected option only changes colours, never weight. */ .adcalc .opt-card, .adcalc .opt-card b, .adcalc .chips label { font: var(--option-weight) var(--option-size)/var(--option-lh) var(--f-body); letter-spacing: var(--option-ls); } /* Button */ .btn, .tf-link, .svc .more, .chips label, .links .more, .cookie-link, .cookie-btn { font: var(--btn-weight) var(--btn-size)/var(--btn-lh) var(--f-body); letter-spacing: var(--btn-ls); } /* Nav link */ .nav-links a, .sub-toggle { font: var(--nav-weight) var(--nav-size)/var(--nav-lh) var(--f-body); letter-spacing: var(--nav-ls); } @media (max-width: 860px) { .nav-links a, .sub-toggle { font-size: var(--nav-menu-size); } } /* Menu item title and description (the dropdown items, desktop and mobile menu; the label above them is Label) */ .sub b, .sub-all a { font: var(--menutitle-weight) var(--menutitle-size)/var(--menutitle-lh) var(--f-body); letter-spacing: 0; } .sub span { font: var(--menudesc-weight) var(--menudesc-size)/var(--menudesc-lh) var(--f-body); letter-spacing: 0; } @media (max-width: 860px) { .nav-links .sub-all a { font-size: var(--menutitle-size); line-height: var(--menutitle-lh); } } /* the mobile menu bumps top-level links to 18px; dropdown items keep the Menu item size */ /* Label (always uppercase) */ .label, .map-head, .scatter figcaption, .track::after, .about .since, .flow .when, .plans .badge, .legal-hero .updated, .doc thead th, .way-note, .peek-head, .tf-count, .sub-head, .issue .tag, .plan-tag, .r-k, .hb-k, .vbar span, .peek-row span { font: var(--label-weight) var(--label-size)/var(--label-lh) var(--f-body); letter-spacing: var(--label-ls); text-transform: uppercase; text-wrap: wrap; max-width: none; } /* labels use the full container width: no balance, no 68ch cap */ /* Layout concept: a schematic. Scattered parts in the problem section become one wired track in the services section; a live system map in the hero states the thesis. */ :root { color-scheme: light; /* Colour system: the single source of truth. Nothing else in this file holds a colour value. */ /* Brand */ --color-brand-primary: #0F2A2E; /* Deep Teal: dark panels, footer, nav, button borders */ --color-brand-primary-hover: #174047; /* hover on dark buttons and dark interactive surfaces */ --color-brand-primary-active: #092024; /* pressed dark buttons */ --color-brand-accent: #C3FDB8; /* Fresh Mint: primary button, highlight band, badges, accents on dark */ --color-brand-accent-hover: #A9EF9C; --color-brand-accent-active: #8FDF84; --color-brand-secondary: #285E60; /* eyebrows and labels on light, the stats band, diagram lines */ /* Surfaces */ --color-white: #FFFFFF; /* page background, cards */ --color-surface-alt: #F1F8F7; /* alternate section backgrounds */ --color-surface-muted: #F1F5F3; /* subtle fills: table heads, inactive chips, icon tiles */ /* Text */ --color-text-primary: #0F2A2E; /* headings, nav, strong text */ --color-text-body: #263534; /* paragraphs */ --color-text-secondary: #596864; /* captions, metadata, placeholders */ --color-text-disabled: #A8B6B1; /* disabled controls only, never readable content */ --color-text-on-dark: #FFFFFF; /* on Deep Teal and on the stats band */ --color-text-on-dark-secondary: #C1D9D8; --color-link: #285E60; /* text links on light backgrounds */ --color-link-hover: #0F2A2E; /* Lines */ --color-border: #E3EAE7; /* card borders and dividers */ --color-border-field: #7A8984; /* form input borders (3:1 or more) */ --color-border-dark: #285E60; /* borders on Deep Teal */ --color-border-on-secondary: rgba(255, 255, 255, 0.2); /* dividers inside the teal stats band */ /* Focus: 2px solid, 2px offset. Dark surfaces switch to the on-dark ring (see :focus-visible below). */ --color-focus: #285E60; --color-focus-on-dark: #C3FDB8; /* Feedback */ --color-error: #C94F4B; /* error borders and icons only */ --color-error-text: #8B2525; /* error message text */ --color-error-bg: #FDE9E8; /* Third party */ --color-whatsapp: #25D366; /* WhatsApp's own green, floating pill glyph only */ --gutter: clamp(16px, 4vw, 40px); --max: 1200px; --r: 14px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-white); color: var(--color-text-primary); -webkit-font-smoothing: antialiased; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } img { max-width: 100%; } a { color: inherit; } h1, h2, h3, h4, h5, h6 { margin: 0; text-wrap: balance; } p { margin: 0; } b, strong { font-weight: 600; } ::selection { background: var(--color-brand-accent); color: var(--color-text-primary); } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; } /* Dark surfaces (Deep Teal sections, footer, cookie banner) and the stats band switch the focus ring to mint and use the on-dark secondary button */ .plans-sec, .about, .contact, .cta-band, .cookie, footer, .map, .float, .rep-cta, .calc-peek, .proof { --color-focus: var(--color-focus-on-dark); } .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .label { color: var(--color-brand-secondary); } /* Buttons: four types, each with default, hover and pressed colours (README, Colour system). Colour-only transitions, 180ms; the arrow keeps its small slide. Primary (mint) is the default: on light surfaces it hovers to Deep Teal and presses to the darker teal; on dark surfaces it stays mint (hover and pressed shades). .ghost is the outline button; on dark surfaces it switches to mint. .dark is the Deep Teal button for light surfaces. */ .btn { --btn-bg: var(--color-brand-accent); --btn-fg: var(--color-text-primary); --btn-bd: var(--color-brand-primary); --btn-hbg: var(--color-brand-primary); --btn-hfg: var(--color-text-on-dark); --btn-abg: var(--color-brand-primary-active); --btn-abd: var(--color-brand-primary-active); display: inline-flex; align-items: center; gap: .6em; padding: calc(.95em - 1.5px) calc(1.4em - 1.5px); border-radius: 999px; text-decoration: none; border: 1.5px solid var(--btn-bd); cursor: pointer; background: var(--btn-bg); color: var(--btn-fg); transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .btn:hover { background: var(--btn-hbg); color: var(--btn-hfg); } .btn:active { background: var(--btn-abg); color: var(--btn-hfg); border-color: var(--btn-abd); } .btn svg { width: 1em; height: 1em; transition: transform .2s; } .btn:hover svg { transform: translateX(3px); } .btn.ghost { --btn-bg: transparent; --btn-fg: var(--color-text-primary); --btn-bd: var(--color-brand-primary); --btn-hbg: var(--color-surface-alt); --btn-abg: var(--color-surface-muted); --btn-hfg: var(--btn-fg); --btn-abd: var(--btn-bd); } .btn.dark { --btn-bg: var(--color-brand-primary); --btn-fg: var(--color-text-on-dark); --btn-bd: var(--color-brand-primary); --btn-hbg: var(--color-brand-primary-hover); --btn-abg: var(--color-brand-primary-active); --btn-hfg: var(--btn-fg); --btn-abd: var(--btn-bd); } /* Primary (mint) on dark surfaces: hover and pressed stay mint, since a dark hover would disappear there */ .plans-sec .btn:not(.ghost), .about .btn:not(.ghost), .contact .btn:not(.ghost), .cta-band .btn:not(.ghost), .rep-cta .btn:not(.ghost), .calc-peek .btn:not(.ghost), .map .btn:not(.ghost), .float .btn:not(.ghost), footer .btn:not(.ghost) { --btn-hbg: var(--color-brand-accent-hover); --btn-hfg: var(--color-text-primary); --btn-abg: var(--color-brand-accent-active); --btn-abd: var(--btn-bd); } /* Secondary on dark: mint text and border, mint wash on hover (10%) and pressed (18%) */ .plans-sec .btn.ghost, .about .btn.ghost, .cta-band .btn.ghost, .contact .btn.ghost, .rep-cta .btn.ghost { --btn-fg: var(--color-brand-accent); --btn-bd: var(--color-brand-accent); --btn-hbg: color-mix(in srgb, var(--color-brand-accent) 10%, transparent); --btn-abg: color-mix(in srgb, var(--color-brand-accent) 18%, transparent); } /* White surfaces inside dark sections (featured plan card, the contact form) use the light-surface rules */ .plans .type.featured, form.plan { --color-focus: var(--color-brand-secondary); } .plans .type.featured .btn.ghost, form.plan .btn.ghost { --btn-fg: var(--color-text-primary); --btn-bd: var(--color-brand-primary); --btn-hbg: var(--color-surface-alt); --btn-abg: var(--color-surface-muted); } .plans .type.featured .btn:not(.ghost), form.plan .btn:not(.ghost) { --btn-hbg: var(--color-brand-primary); --btn-hfg: var(--color-text-on-dark); --btn-abg: var(--color-brand-primary-active); --btn-abd: var(--color-brand-primary-active); } /* ---------- Nav ---------- */ .nav { position: sticky; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 50; width: min(var(--max), calc(100% - 32px)); margin: 12px auto 0; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 4px 20px color-mix(in srgb, var(--color-brand-primary) 6%, transparent); } @media (max-width: 767px) { .nav { border-radius: 14px; } } .nav .wrap { display: flex; align-items: center; gap: 2rem; height: 64px; max-width: none; padding-inline: clamp(16px, 2.5vw, 24px); } .logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; } .logo svg { width: 32px; height: 32px; } .nav-links { display: flex; gap: 2rem; margin-left: auto; list-style: none; padding: 0; margin-block: 0; } .nav-links a { text-decoration: none; color: var(--color-text-primary); position: relative; transition: color .18s ease; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--color-brand-secondary); transform: scaleX(0); transform-origin: left; transition: transform .25s; } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } .nav .btn { padding: .75em 1.2em; } .menu-btn { display: none; margin-left: auto; background: none; border: 0; padding: 9px; cursor: pointer; color: var(--color-text-primary); } .menu-btn svg { width: 26px; height: 26px; } @media (max-width: 860px) { .nav-links { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 4px 20px color-mix(in srgb, var(--color-brand-primary) 6%, transparent); padding: .5rem 1.25rem 1rem; } .nav-links.open { display: flex; } .nav-links a { display: block; padding: .8rem 0; font-size: var(--nav-menu-size); } .menu-btn { display: block; } .nav .btn { display: none; } } /* ---------- Hero ---------- */ .hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem); } .hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hero-copy { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; } /* "business." gets a mint highlighter band (Deep Teal text); it sweeps in left to right. The band is painted over the inline box, whose top is the font's ascent line. Bricolage Grotesque: ascent .93em, x-height .525em, so the baseline is .93em down. The band starts just above the x-height (.37em) and ends .08em below the baseline (1.01em); the full stop sits inside it. The fallback faces use the same vertical metrics, so it holds during the font swap. */ .hero h1 .wire { color: var(--color-text-primary); white-space: nowrap; background: linear-gradient(var(--color-brand-accent), var(--color-brand-accent)) 0 .37em / 100% .64em no-repeat; animation: draw 1.1s .3s cubic-bezier(.6,0,.2,1) both; } @keyframes draw { from { background-size: 0% .64em; } to { background-size: 100% .64em; } } .hero .lede { color: var(--color-text-body); max-width: 34ch; } .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; } .hero-cta small { color: var(--color-text-secondary); } .map { --u-label: 15px; --u-sub: 14.5px; /* SVG units: the diagrams render at about 0.86x on a phone, so these come out at 12px or more */ background: var(--color-brand-primary); border-radius: 22px; padding: clamp(1rem, 2.5vw, 1.6rem); position: relative; overflow: hidden; min-width: 0; background-image: linear-gradient(color-mix(in srgb, var(--color-white) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-white) 6%, transparent) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; } .map::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 50%, transparent 20%, var(--color-brand-primary) 80%); pointer-events: none; } .map-head { position: relative; display: flex; justify-content: space-between; align-items: center; color: var(--color-text-on-dark-secondary); } .live { display: inline-flex; align-items: center; gap: .5em; color: var(--color-brand-accent); } .live i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand-accent); box-shadow: 0 0 0 0 var(--color-brand-accent); animation: ping 2s infinite; } @keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-brand-accent) 60%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .map svg { position: relative; display: block; width: 100%; max-width: 380px; margin: .6rem auto 0; height: auto; } /* Home hero: the original converging layout from 1024px, the stacked rail layout below it */ .map .map-wide { display: none; } @media (min-width: 1024px) { .map .map-wide { display: block; } .map .map-stack { display: none; } } .map .wire-path { fill: none; stroke: var(--color-brand-accent); stroke-opacity: .35; stroke-width: 2; } .map .wire-live { fill: none; stroke: var(--color-brand-accent); stroke-width: 2; stroke-dasharray: 6 10; animation: flow 1.6s linear infinite; opacity: .85; } @keyframes flow { to { stroke-dashoffset: -32; } } .map .node rect { fill: var(--color-brand-primary-hover); stroke: var(--color-border-dark); } .map .node text { fill: var(--color-white); font: 600 var(--u-label) var(--f-body); } .map .node .sub { fill: var(--color-text-on-dark-secondary); font: 500 var(--u-sub) var(--f-body); letter-spacing: .06em; } .map .hub circle.outer { fill: none; stroke: var(--color-border-dark); stroke-dasharray: 3 6; } .map .hub circle.core { fill: var(--color-brand-secondary); stroke: var(--color-brand-accent); stroke-width: 1.5; } .map .hub text { fill: var(--color-white); font: 600 var(--u-label) var(--f-body); text-anchor: middle; } .map .hub .sub { fill: var(--color-white); font: 500 var(--u-sub) var(--f-body); letter-spacing: .06em; } .map .hub rect.core { fill: var(--color-brand-secondary); stroke: var(--color-brand-accent); stroke-width: 1.5; } .map .out rect { fill: var(--color-brand-accent); } .map .out text { fill: var(--color-brand-primary); font: 600 var(--u-label) var(--f-body); } .map .out .sub { fill: var(--color-brand-primary); font: 500 var(--u-sub) var(--f-body); letter-spacing: .06em; } .map .pulse { fill: var(--color-brand-accent); } .map .spin { transform-box: fill-box; transform-origin: center; animation: spin 24s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .map .wire-live, .map .spin, .live i, .hero h1 .wire { animation: none; } .map .pulse { display: none; } } @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } } /* ---------- Proof strip ---------- */ .proof { background: var(--color-brand-secondary); color: var(--color-text-on-dark); } .proof .wrap { display: grid; grid-template-columns: repeat(4, 1fr); } .proof .wrap:has(.stat:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } /* pages with three stats */ .stat { padding: 1.6rem 1.4rem 2.2rem 0; display: flex; flex-direction: column; gap: .35rem; min-width: 0; } .stat + .stat { border-left: 1px solid var(--color-border-on-secondary); padding-left: 1.4rem; } .stat b { font-variant-numeric: lining-nums proportional-nums; color: var(--color-text-on-dark); } /* 28px desktop, 24px mobile */ .stat .label { color: var(--color-text-on-dark); } .stat p { color: var(--color-text-on-dark-secondary); } @media (max-width: 820px) { .proof .wrap, .proof .wrap:has(.stat:nth-child(3):last-child) { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { border-left: 0; padding-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--color-border-on-secondary); } } .logos { padding-block: 2.2rem; } .logos .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.4rem; } .logos .label { color: var(--color-brand-secondary); flex-basis: 100%; } /* ---------- Section heads ---------- */ section { scroll-margin-top: 88px; } /* floating header: 12px inset + 58px bar when scrolled, plus a gap */ .sec { padding-block: clamp(4rem, 9vw, 7.5rem); } .head { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.5rem clamp(2rem, 5vw, 4.5rem); align-items: start; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .head .kicker { display: flex; flex-direction: column; gap: 1rem; } .head p { color: var(--color-text-body); max-width: 56ch; } @media (max-width: 820px) { .head { grid-template-columns: 1fr; } } /* ---------- Problem: scattered ---------- */ .problem, .cases { background: var(--color-surface-alt); } .problem-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .scatter { position: sticky; top: 110px; } .scatter svg { width: 100%; height: auto; display: block; } .scatter .frag rect { fill: var(--color-white); stroke: var(--color-border); } .scatter { --u-label: 16px; --u-sub: 15.5px; } /* SVG units: about 0.78x on a phone */ .scatter .frag text { fill: var(--color-text-secondary); font: 600 var(--u-label) var(--f-body); } .scatter .frag .sub { fill: var(--color-text-secondary); font: 500 var(--u-sub) var(--f-body); } .scatter .broken { fill: none; stroke: var(--color-text-secondary); stroke-width: 1.5; stroke-dasharray: 4 6; } .scatter .q { fill: var(--color-brand-secondary); font: 600 22px var(--f-body); } .scatter figcaption { text-align: center; margin-top: 1rem; color: var(--color-text-secondary); } .issues { display: flex; flex-direction: column; } .issue { padding-block: 2rem; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: .8rem; } .issue:last-child { border-bottom: 1px solid var(--color-border); } .issue .tag { color: var(--color-brand-secondary); } .issue p { color: var(--color-text-body); max-width: 60ch; } @media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; } .scatter { position: static; max-width: 460px; } } /* ---------- Services: connected track ---------- */ .track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .track::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--color-brand-primary); } .track::after { content: none; position: absolute; right: 0; top: -22px; color: var(--color-brand-secondary); } .svc { position: relative; padding: 3.2rem clamp(1rem, 2.5vw, 2rem) 0 0; display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .svc + .svc { padding-left: clamp(1rem, 2.5vw, 2rem); border-left: 1px solid var(--color-border); } .svc .dot { position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--color-white); border: 2px solid var(--color-brand-primary); display: grid; place-items: center; } .svc + .svc .dot { left: clamp(1rem, 2.5vw, 2rem); } .svc .dot::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--color-brand-accent); border: 1.5px solid var(--color-brand-primary); } .svc .promise { color: var(--color-text-primary); } .svc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; } .svc li { position: relative; padding-left: 1.6rem; color: var(--color-text-body); } .svc li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--color-brand-secondary); } .svc .more { margin-top: auto; align-self: flex-start; display: inline-flex; gap: .5rem; align-items: center; padding: calc(.75em - 1.5px) calc(1.15em - 1.5px); border-radius: 999px; border: 1.5px solid var(--color-brand-primary); background: transparent; color: var(--color-text-primary); text-decoration: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .svc .more:hover { background: var(--color-surface-alt); } .svc .more:active { background: var(--color-surface-muted); } .svc .more svg { transition: transform .2s; } .svc .more:hover svg { transform: translateX(3px); } .svc ul { margin-bottom: 1.2rem; } .support { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: 1.4rem 1.6rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r); display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; color: var(--color-text-body); } .support .label { color: var(--color-brand-secondary); } @media (max-width: 900px) { .track { grid-template-columns: 1fr; padding-left: 2.2rem; } .track::before { left: 11px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .track::after { display: none; } .svc, .svc + .svc { padding: 0 0 2.6rem 0; border-left: 0; } .svc .dot, .svc + .svc .dot { left: -2.2rem; top: .2rem; } } /* ---------- Case studies ---------- */ .case { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.5rem clamp(2rem, 5vw, 4.5rem); padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--color-border); } .case:last-child { border-bottom: 1px solid var(--color-border); } .case-id { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .case-body { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; } .case-body > p { color: var(--color-text-body); } .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .metric { padding-top: .9rem; border-top: 2px solid var(--color-brand-secondary); display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .metric b { font-variant-numeric: lining-nums proportional-nums; color: var(--color-text-primary); } /* 32px desktop, 28px mobile */ .metric span { color: var(--color-text-secondary); } .case blockquote { margin: 0; padding: 1.2rem 1.4rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r); display: flex; flex-direction: column; gap: .8rem; } .case blockquote p { color: var(--color-text-primary); } .case cite { font-style: normal; color: var(--color-text-secondary); } .case cite b { color: var(--color-text-primary); font-weight: 600; } @media (max-width: 900px) { .case { grid-template-columns: 1fr; } } @media (max-width: 520px) { .metrics { grid-template-columns: 1fr; gap: .4rem; } .metric { flex-direction: row; align-items: center; gap: .8rem; padding-block: .7rem; } .metric:last-child { padding-bottom: 0; } } /* ---------- About (dark) ---------- */ .about { background: var(--color-brand-primary); color: var(--color-text-on-dark); position: relative; overflow: hidden; } .about .label { color: var(--color-brand-accent); } .about .head h2 { color: var(--color-text-on-dark); } .about .head p { color: var(--color-text-on-dark); } .about-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-border-dark); } .principle { padding: 1.8rem 1.4rem 0 0; display: flex; flex-direction: column; gap: .7rem; min-width: 0; } .principle + .principle { padding-left: 1.4rem; border-left: 1px solid var(--color-border-dark); } .principle h3 { color: var(--color-text-on-dark); } .principle p { color: var(--color-text-on-dark-secondary); } .about .cta-row { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; } .about .since { color: var(--color-text-on-dark-secondary); } @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr 1fr; } .principle:nth-child(3) { padding-left: 0; border-left: 0; } .principle:nth-child(n+3) { margin-top: 1.8rem; border-top: 1px solid var(--color-border-dark); } } @media (max-width: 560px) { .about-grid { grid-template-columns: 1fr; } .principle, .principle + .principle { padding: 1.5rem 0 0; border-left: 0; } .principle + .principle { margin-top: 1.5rem; border-top: 1px solid var(--color-border-dark); } } /* ---------- Testimonials ---------- */ .voices { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .feature { display: flex; flex-direction: column; gap: 1.6rem; position: sticky; top: 110px; } .feature .mark { font: 600 52px/.6 var(--f-body); color: var(--color-brand-secondary); height: .5em; } /* fixed size, not tied to the fluid --size-h1 */ @media (max-width: 767px) { .feature .mark { font-size: 40px; } } .feature p { color: var(--color-text-primary); } .who { display: flex; flex-direction: column; gap: .15rem; color: var(--color-text-secondary); } .who b { color: var(--color-text-primary); font-weight: 600; } .quotes { display: flex; flex-direction: column; } .quote { padding-block: 1.6rem; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: .9rem; } .quote:last-child { border-bottom: 1px solid var(--color-border); } .quote p { color: var(--color-text-body); } @media (max-width: 900px) { .voices { grid-template-columns: 1fr; } .feature { position: static; } } /* ---------- Contact ---------- */ .contact { background: var(--color-brand-primary); color: var(--color-text-on-dark); } .contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .contact .label { color: var(--color-brand-accent); } .contact h2 { color: var(--color-text-on-dark); } .contact .intro { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; } .contact .intro p { max-width: 48ch; } .contact .wa { display: inline-flex; align-items: center; gap: .6rem; color: var(--color-text-on-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; transition: color .18s ease; } .contact .wa:hover { color: var(--color-brand-accent); } .contact .wa svg { width: 22px; height: 22px; } form.plan { background: var(--color-white); color: var(--color-text-primary); border-radius: 20px; padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: 1.1rem; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--color-brand-primary-active) 45%, transparent); min-width: 0; } .field { display: flex; flex-direction: column; gap: .4rem; } .field label, .field legend { color: var(--color-text-primary); padding: 0; } .field input { padding: .8rem .9rem; border: 1.5px solid var(--color-border-field); border-radius: 10px; background: var(--color-white); color: var(--color-text-primary); width: 100%; } .field input:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-brand-primary); } input::placeholder, textarea::placeholder { color: var(--color-text-secondary); opacity: 1; } fieldset.field { border: 0; margin: 0; padding: 0; } .chips { display: flex; flex-wrap: wrap; gap: .5rem; position: relative; } .chips input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .chips label { padding: .55rem 1rem; border-radius: 999px; border: 1.5px solid var(--color-brand-primary); background: transparent; color: var(--color-text-primary); cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .chips input:checked + label { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-brand-accent); } .chips input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; } .plan .btn { justify-content: center; margin-top: .3rem; } .plan .fine { color: var(--color-text-secondary); text-align: center; } .plan .done { padding: .9rem 1rem; border-radius: 10px; background: var(--color-surface-muted); color: var(--color-text-primary); } @media (max-width: 900px) { .contact .wrap { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ footer { background: var(--color-brand-primary); color: var(--color-text-on-dark-secondary); padding-block: 4rem 2rem; } .foot { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 2rem; } @media (max-width: 1100px) and (min-width: 821px) { .foot { grid-template-columns: repeat(3, 1fr); } .foot > div:first-child { grid-column: 1 / -1; } } .foot .logo { color: var(--color-text-on-dark); margin-bottom: 1rem; } .foot p { max-width: 32ch; } .foot .hours { max-width: none; } .foot h3 { color: var(--color-brand-accent); margin-bottom: 1.1rem; } .foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .foot ul:not(.social) a { position: relative; display: block; padding-block: .5rem; line-height: 1.3; } /* one 16px text-to-text gap at every width; wrapped lines stay at 1.3 */ .foot a { text-decoration: none; color: var(--color-text-on-dark-secondary); transition: color .18s ease; } .foot a:hover { color: var(--color-brand-accent); text-decoration: underline; text-underline-offset: 4px; } .legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border-dark); } .legal .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; } .legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.4rem; } .legal a { color: var(--color-text-on-dark-secondary); text-decoration: none; transition: color .18s ease; } .legal a:hover { color: var(--color-brand-accent); text-decoration: underline; } @media (max-width: 820px) { .foot { grid-template-columns: 1fr 1fr; } .foot > div:first-child, .foot > div:nth-child(4) { grid-column: 1 / -1; } } /* ---------- Floating WhatsApp ---------- */ .float { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: .7rem; padding: .55rem 1.1rem .55rem .55rem; border-radius: 999px; background: var(--color-brand-primary); color: var(--color-text-on-dark); text-decoration: none; border: 1.5px solid var(--color-brand-accent); } .float .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--color-whatsapp); display: grid; place-items: center; color: var(--color-text-on-dark); flex: none; } .float .ic svg { width: 20px; height: 20px; } .float span { display: flex; flex-direction: column; line-height: 1.2; } .float b { font-size: 14px; } .float small { font-size: 12px; color: var(--color-text-on-dark-secondary); } @media (max-width: 560px) { .float span { display: none; } .float { padding: .5rem; } } /* Hidden by site.js while the footer is in view, and on small screens while scrolling down or typing. Out of the tab order and unclickable while hidden. */ .float { transition: opacity .25s ease, transform .25s ease, visibility 0s; } .float.is-away { opacity: 0; transform: translateY(16px); visibility: hidden; pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; } @media (prefers-reduced-motion: reduce) { .float, .float.is-away { transition: none; } .float.is-away { transform: none; } } /* ---------- Working together ---------- */ .how { background: var(--color-surface-alt); } .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--color-brand-primary); } .step { padding: 1.6rem 1.6rem 0 0; display: flex; flex-direction: column; gap: .7rem; min-width: 0; } .step + .step { padding-left: 1.6rem; border-left: 1px solid var(--color-border); } .step p { color: var(--color-text-body); } .fit { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1.4rem 1.6rem; border-radius: var(--r); background: var(--color-brand-primary); color: var(--color-text-on-dark); } .fit strong { color: var(--color-text-on-dark); font-weight: 600; } .fit span { color: var(--color-text-on-dark-secondary); } @media (max-width: 820px) { .steps { grid-template-columns: 1fr; } .step, .step + .step { padding: 1.4rem 0; border-left: 0; border-bottom: 1px solid var(--color-border); } } .field textarea { padding: .8rem .9rem; border: 1.5px solid var(--color-border-field); border-radius: 10px; background: var(--color-white); color: var(--color-text-primary); width: 100%; resize: vertical; } .field textarea:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-brand-primary); } .field .opt { font-weight: 400; color: var(--color-text-secondary); } .foot address { font-style: normal; margin-top: 1rem; color: var(--color-text-on-dark); } /* Logo images */ .logo img { display: block; height: 36px; width: auto; } .foot .logo img { height: 40px; } .foot address a { color: var(--color-text-on-dark); text-decoration: underline; text-underline-offset: 3px; transition: color .18s ease; } .foot address a:hover { color: var(--color-brand-accent); } /* Contact details */ .reach { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .reach li { display: flex; gap: .8rem; align-items: baseline; } .reach .label { color: var(--color-brand-accent); min-width: 4.2rem; } .reach a { color: var(--color-text-on-dark); text-decoration: underline; text-underline-offset: 4px; transition: color .18s ease; } .reach a:hover { color: var(--color-brand-accent); } /* Align section descriptions with the heading's top edge, not the eyebrow */ @media (min-width: 821px) { .head > p { padding-top: 1.95rem; } } .head .kicker p { color: var(--color-text-body); max-width: 56ch; } /* Client logos */ /* Client logos: endless carousel */ .marquee { flex-basis: 100%; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-brand-primary) 8%, var(--color-brand-primary) 92%, transparent); mask-image: linear-gradient(90deg, transparent, var(--color-brand-primary) 8%, var(--color-brand-primary) 92%, transparent); } .logo-track { list-style: none; margin: 0; padding: 0 12px 0 0; display: flex; gap: 12px; flex: none; animation: logos 40s linear infinite; } .marquee:hover .logo-track { animation-play-state: paused; } .logo-track li { flex: none; width: 180px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 12px; display: grid; place-items: center; padding: .4rem; } .logo-track img { width: 100%; max-width: 170px; height: auto; display: block; } @keyframes logos { to { transform: translateX(-100%); } } @media (max-width: 560px) { .logo-track li { width: 140px; } .logo-track { animation-duration: 32s; } } @media (prefers-reduced-motion: reduce) { .marquee { -webkit-mask-image: none; mask-image: none; } .logo-track { animation: none; flex-wrap: wrap; flex: 1; justify-content: center; padding: 0; } .logo-track[aria-hidden] { display: none; } } /* Contact form: name row and WhatsApp with country code */ .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; } @media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } } .phone { display: flex; gap: .5rem; } .phone select { flex: 0 0 auto; max-width: 9.5rem; padding: .8rem .6rem; border: 1.5px solid var(--color-border-field); border-radius: 10px; background: var(--color-white); color: var(--color-text-primary); } .phone select:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-brand-primary); } .phone input { flex: 1 1 auto; min-width: 0; } /* ================= Service pages ================= */ .crumbs { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--color-text-secondary); } .crumbs a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; transition: color .18s ease; } .crumbs a:hover { color: var(--color-link-hover); } /* Browser diagram inside the dark map */ .map .browser .frame { fill: var(--color-brand-primary-hover); stroke: var(--color-border-dark); } .map .browser .bar { stroke: var(--color-border-dark); } .map .browser .dot { fill: var(--color-border-dark); } .map .browser .ln { fill: var(--color-border-dark); } .map .browser .ln.strong { fill: var(--color-text-on-dark-secondary); opacity: .55; } .map .browser .cta { fill: var(--color-brand-secondary); stroke: var(--color-brand-accent); stroke-width: 1.5; } .map .browser .cta-t { fill: var(--color-white); font: 600 var(--u-label) var(--f-body); text-anchor: middle; } .map .browser .field { fill: none; stroke: var(--color-text-on-dark-secondary); stroke-opacity: .5; } .map .browser .cap { fill: var(--color-text-on-dark-secondary); font: 500 var(--u-sub) var(--f-body); letter-spacing: .06em; } .map .browser .wa-dot { fill: var(--color-brand-accent); } /* Problem: three issues in a row */ .issue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1.5rem, 3vw, 2.5rem); } .issue-grid .issue { border-bottom: 0; } @media (max-width: 900px) { .issue-grid { grid-template-columns: 1fr; } .issue-grid .issue:last-child { border-bottom: 1px solid var(--color-border); } } /* Build types */ .types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .type { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r); padding: 1.6rem; display: flex; flex-direction: column; gap: .8rem; min-width: 0; } .type p { color: var(--color-text-body); } .type ul { list-style: none; margin: .4rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: .55rem; } .type li { position: relative; padding-left: 1.5rem; color: var(--color-text-body); } .type li::before { content: ""; position: absolute; left: 0; top: .65em; width: 11px; height: 2px; background: var(--color-brand-secondary); } .type.featured { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-text-on-dark); } .type.featured .label { color: var(--color-brand-accent); } .type.featured h3 { color: var(--color-text-on-dark); } .type.featured p, .type.featured li { color: var(--color-text-on-dark); } .type.featured ul { border-top-color: var(--color-border-dark); } .type.featured li::before { background: var(--color-brand-accent); } @media (max-width: 900px) { .types { grid-template-columns: 1fr; } } /* Connected: three linked stages */ .links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--color-brand-secondary); } .links li { position: relative; padding: 2rem 1.6rem 0 0; display: flex; flex-direction: column; gap: .7rem; min-width: 0; } .links li + li { padding-left: 1.6rem; border-left: 1px solid var(--color-border); } .links li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--color-brand-secondary); } .links li + li::before { left: 1.6rem; } .links p { color: var(--color-text-body); } .links .more { margin-top: .3rem; align-self: flex-start; display: inline-flex; gap: .5rem; align-items: center; padding: calc(.65em - 1.5px) calc(1.05em - 1.5px); border-radius: 999px; border: 1.5px solid var(--color-brand-primary); background: transparent; color: var(--color-text-primary); text-decoration: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .links .more:hover { background: var(--color-surface-alt); } .links .more:active { background: var(--color-surface-muted); } @media (max-width: 900px) { .links { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--color-brand-secondary); } .links li, .links li + li { padding: 0 0 2rem 1.6rem; border-left: 0; } .links li::before, .links li + li::before { top: .3rem; left: -7px; } } /* Four-step process */ .steps-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1000px) and (min-width: 821px) { .steps-4 { grid-template-columns: repeat(2, 1fr); } .steps-4 .step:nth-child(3) { padding-left: 0; border-left: 0; } } /* Single-column section head */ .head-single { grid-template-columns: 1fr; } .head-single .kicker { max-width: 46rem; } /* Testimonials in a row */ .quote-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1.5rem, 3vw, 2.5rem); } .quote-row .quote { border-bottom: 1px solid var(--color-border); } @media (max-width: 900px) { .quote-row { grid-template-columns: 1fr; } .quote-row .quote + .quote { border-top: 0; } } /* FAQ */ .faq-sec { background: var(--color-surface-alt); } .faq { border-top: 1px solid var(--color-border); } .faq details { border-bottom: 1px solid var(--color-border); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 0; color: var(--color-text-primary); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--color-brand-secondary); color: var(--color-brand-secondary); display: grid; place-items: center; font: 500 18px/1 var(--f-body); transition: transform .2s; } .faq details[open] summary::after { content: "−"; background: var(--color-brand-secondary); color: var(--color-text-on-dark); } .faq details p { padding: 0 0 1.4rem; color: var(--color-text-body); max-width: none; } /* Tools we work with */ .tools { margin-top: clamp(2rem, 4vw, 3rem); padding: 1.6rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r); display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2.5rem; } .tools-group { display: flex; flex-direction: column; gap: .8rem; min-width: 0; } .tools-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .tools-group li { padding: .5rem .95rem; border-radius: 999px; background: var(--color-surface-muted); border: 1px solid var(--color-border); font-weight: 600; color: var(--color-text-primary); } .tools-note { grid-column: 1 / -1; color: var(--color-text-body); padding-top: 1rem; border-top: 1px solid var(--color-border); } @media (max-width: 760px) { .tools { grid-template-columns: 1fr; } } /* Example flow timeline */ .flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); counter-reset: flow; } .flow li { position: relative; padding: 1.2rem 0 0 0; border-top: 2px solid var(--color-brand-secondary); display: flex; flex-direction: column; gap: .45rem; counter-increment: flow; min-width: 0; } .flow li::before { content: counter(flow); position: absolute; top: -15px; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--color-brand-secondary); color: var(--color-text-on-dark); display: grid; place-items: center; font: 600 14px/1 var(--f-body); font-variant-numeric: tabular-nums lining-nums; } .flow .when { color: var(--color-brand-secondary); padding-top: .4rem; } .flow p { color: var(--color-text-body); } @media (max-width: 900px) { .flow { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .flow { grid-template-columns: 1fr; } } /* What We Do dropdown */ .has-sub { position: relative; } .sub-toggle { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; color: var(--color-text-primary); transition: color .18s ease; } .sub-toggle svg { width: 12px; height: 12px; transition: transform .2s; } .sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .sub { list-style: none; margin: 0; padding: .5rem; position: absolute; top: calc(100% + 14px); left: -1rem; width: 300px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r); box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--color-brand-primary) 35%, transparent); display: none; z-index: 60; } .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } .has-sub.open .sub { display: block; } @media (hover: hover) and (min-width: 861px) { .has-sub:hover .sub, .has-sub:focus-within .sub { display: block; } } .sub a { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem; border-radius: 10px; } .sub a::after { display: none; } .sub a:hover, .sub a:focus-visible { background: var(--color-surface-alt); } .sub b { color: var(--color-text-primary); } .sub span { color: var(--color-text-secondary); } .sub-all { border-top: 1px solid var(--color-border); margin-top: .3rem; padding-top: .3rem; } .sub-all a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; } .sub-all a:hover { color: var(--color-link-hover); } @media (max-width: 860px) { .sub-toggle { width: 100%; justify-content: space-between; padding: .8rem 0; font-size: var(--nav-menu-size); } .sub { position: static; width: auto; box-shadow: none; border: 0; border-left: 2px solid var(--color-brand-secondary); border-radius: 0; padding: 0 0 .4rem .9rem; margin-left: .2rem; background: transparent; } .sub a { padding: .55rem 0; } .sub span { display: none; } /* the mobile menu shows dropdown titles only, as on the live site */ .sub a:hover { background: transparent; } } /* Form states */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .btn[disabled], .btn[disabled]:hover, .btn[disabled]:active { background: var(--color-surface-muted); color: var(--color-text-disabled); border-color: var(--color-text-disabled); cursor: not-allowed; } .plan .btn[disabled] { cursor: wait; } .form-error { padding: .9rem 1rem; border-radius: 10px; background: var(--color-error-bg); color: var(--color-error-text); } .form-error a { color: inherit; font-weight: 600; } /* Plans */ .plans .type { position: relative; } .plans .type ul { flex: 1; } .plans .btn { margin-top: .8rem; align-self: flex-start; } .plans .badge { position: absolute; top: 1.4rem; right: 1.4rem; padding: .35em .75em; border-radius: 999px; background: var(--color-brand-accent); color: var(--color-text-primary); } .plans-note { margin-top: 1.6rem; color: var(--color-text-body); } .plans-note a { color: var(--color-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: color .18s ease; } .plans-note a:hover { color: var(--color-link-hover); } .plan-pick { margin-top: -.5rem; padding: .6rem .9rem; border-radius: 10px; background: var(--color-surface-muted); color: var(--color-text-secondary); } .plan-pick b { color: var(--color-text-primary); } .faq-sec .head a { color: var(--color-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: color .18s ease; } .faq-sec .head a:hover { color: var(--color-link-hover); } /* Footer extras */ .foot .hours { margin-top: 1rem; color: var(--color-text-on-dark-secondary); } .foot .social { display: flex; flex-direction: row; gap: .6rem; margin-top: .9rem; } .foot .social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border-dark); color: var(--color-text-on-dark); transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .foot .social a:hover { background: var(--color-brand-accent); color: var(--color-text-primary); border-color: var(--color-brand-accent); } .foot .social svg { width: 18px; height: 18px; } .linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--color-text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color .18s ease; } .linkish:hover { color: var(--color-brand-secondary); } .plan-tag { margin-top: -.3rem; color: var(--color-brand-secondary); } .type.featured .plan-tag { color: var(--color-brand-accent); } /* Recent work: screenshots in a browser frame */ .work-sec { background: var(--color-surface-alt); } .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 2.8rem) clamp(1rem, 2.2vw, 1.6rem); } .work { display: flex; flex-direction: column; gap: .55rem; min-width: 0; } .work p { color: var(--color-text-body); max-width: 52ch; } .shot { margin-bottom: .7rem; border-radius: 12px; overflow: hidden; background: var(--color-white); border: 1px solid var(--color-border); } .shot-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border); } .shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); flex: none; } .shot-bar span { flex: 1; margin-left: 10px; max-width: 60%; padding: 3px 12px; border-radius: 999px; background: var(--color-white); border: 1px solid var(--color-border); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shot img { display: block; width: 100%; height: auto; transition: transform .5s ease; } .work:hover .shot img { transform: scale(1.015); } @media (max-width: 1000px) { .work-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .work-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .shot img { transition: none; } } /* Cookie banner */ .cookie { position: fixed; left: 16px; bottom: 16px; z-index: 80; width: min(380px, calc(100vw - 32px)); padding: 1.1rem 1.2rem 1rem; border-radius: 16px; background: var(--color-brand-primary); color: var(--color-text-on-dark); box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--color-brand-primary-active) 50%, transparent); opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s; } .cookie.show { opacity: 1; transform: none; } .cookie a { color: var(--color-text-on-dark); text-decoration: underline; text-underline-offset: 3px; transition: color .18s ease; } .cookie a:hover { color: var(--color-brand-accent); } .cookie-prefs { display: flex; flex-direction: column; gap: .55rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--color-border-dark); } .cookie-prefs label { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; font-weight: 600; color: var(--color-text-on-dark); cursor: pointer; } .cookie-prefs label span { grid-column: 2; font-weight: 400; color: var(--color-text-on-dark-secondary); } .cookie-prefs input { width: 18px; height: 18px; accent-color: var(--color-brand-accent); grid-row: span 2; } .cookie-btns { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; } .cookie-link { margin-right: auto; background: none; border: 0; padding: .4rem 0; color: var(--color-text-on-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color .18s ease; } .cookie-link:hover { color: var(--color-brand-accent); } .cookie-btn { padding: calc(.6em - 1.5px) calc(1.1em - 1.5px); border-radius: 999px; border: 1.5px solid var(--color-brand-accent); background: var(--color-brand-accent); color: var(--color-text-primary); cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .cookie-btn:hover { background: var(--color-brand-accent-hover); } .cookie-btn:active { background: var(--color-brand-accent-active); } .cookie-btn.ghost { background: transparent; color: var(--color-brand-accent); border-color: var(--color-brand-accent); } .cookie-btn.ghost:hover { background: color-mix(in srgb, var(--color-brand-accent) 10%, transparent); } .cookie-btn.ghost:active { background: color-mix(in srgb, var(--color-brand-accent) 18%, transparent); } @media (prefers-reduced-motion: reduce) { .cookie { transition: none; } } .foot-cookie { color: var(--color-text-on-dark-secondary); text-decoration: none; transition: color .18s ease; } .foot-cookie:hover { color: var(--color-brand-accent); text-decoration: underline; } /* Legal pages */ .legal-hero { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--color-border); } .legal-hero h1 { margin-top: 1.2rem; } .legal-hero .updated { margin-top: 1rem; color: var(--color-text-secondary); } .legal-doc { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem); } .legal-doc .wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .toc { position: sticky; top: 100px; display: flex; flex-direction: column; gap: .9rem; } .toc ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .5rem; color: var(--color-text-secondary); } .toc a { color: var(--color-link); text-decoration: none; transition: color .18s ease; } .toc a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 3px; } .btn.small { padding: .65em 1.1em; align-self: flex-start; } .doc { max-width: 76ch; color: var(--color-text-body); } .doc h2 { color: var(--color-text-primary); margin: 2.8rem 0 1rem; scroll-margin-top: 100px; } .doc h2:first-child { margin-top: 0; } .doc h3 { color: var(--color-text-primary); margin: 1.8rem 0 .6rem; } .doc p, .doc ul { margin: 0 0 1rem; } .doc ul { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .45rem; } .doc a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; transition: color .18s ease; } .doc a:hover { color: var(--color-link-hover); } .doc strong { color: var(--color-text-primary); } .doc .table { overflow-x: auto; margin: 0 0 1.2rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-white); } .doc table { width: 100%; border-collapse: collapse; } .doc th, .doc td { text-align: left; vertical-align: top; padding: .75rem 1rem; border-bottom: 1px solid var(--color-border); } .doc tr:last-child > * { border-bottom: 0; } .doc thead th { color: var(--color-brand-secondary); background: var(--color-surface-muted); } .doc th[scope=row] { width: 34%; font-weight: 600; color: var(--color-text-primary); } @media (max-width: 900px) { .legal-doc .wrap { grid-template-columns: minmax(0, 1fr); } .toc { position: static; padding: 1.2rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-white); } } @media (max-width: 560px) { .doc table { min-width: 520px; } .doc table:not(:has(thead)) { min-width: 0; } } .cookie-prefs[hidden], .cookie[hidden] { display: none; } /* About / Contact pages */ .page-hero .wrap { display: flex; flex-direction: column; gap: 1rem; } .page-hero h1 { max-width: 27ch; margin-top: .4rem; } .page-hero .lede { max-width: 60ch; color: var(--color-text-body); } .story { display: flex; flex-direction: column; gap: 1rem; color: var(--color-text-body); max-width: 60ch; } .certs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .cert { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.6rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r); } .cert-mark { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--color-brand-primary); color: var(--color-brand-accent); font: 600 18px/1 var(--f-body); } .cert h3 { margin-bottom: .45rem; } .cert p { color: var(--color-text-body); } @media (max-width: 760px) { .certs { grid-template-columns: 1fr; } } .reach-sec { padding-block: clamp(2rem, 4vw, 3rem); } .ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .way { display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r); min-width: 0; } .way-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--color-surface-muted); color: var(--color-brand-secondary); margin-bottom: .5rem; } .way-ic svg { width: 22px; height: 22px; } .way p { color: var(--color-text-body); } .way a { margin-top: auto; padding-top: .5rem; color: var(--color-text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; word-break: break-word; transition: color .18s ease; } .way a:hover { color: var(--color-link-hover); } .way-note { margin-top: auto; padding-top: .5rem; color: var(--color-text-secondary); } @media (max-width: 960px) { .ways { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .ways { grid-template-columns: 1fr; } } /* ---------- Look refresh: white base, clear section rhythm ---------- */ /* Hero: wider headline column on a faint schematic grid */ .hero { position: relative; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--color-brand-primary) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-brand-primary) 5%, transparent) 1px, transparent 1px); background-size: 48px 48px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, var(--color-brand-primary) 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, var(--color-brand-primary) 20%, transparent 75%); } .hero .wrap { grid-template-columns: 1.2fr 1fr; } .hero .lede { max-width: 44ch; } .hero-sub h1 { max-width: 22ch; } /* ch is the width of "0" in the H1 font (.636em for Bricolage Grotesque) */ @media (min-width: 901px) { .tool-hero .wrap { grid-template-columns: 1.5fr 1fr; } } /* tool pages have the longest H1; this keeps it on two lines at 54px */ @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } } /* Separate two white sections that sit next to each other */ .connected + #where-we-work { border-top: 1px solid var(--color-border); } #credentials { background: var(--color-surface-alt); } /* Plans: a dark band between the white services and case studies */ .plans-sec { background: var(--color-brand-primary); color: var(--color-text-on-dark); position: relative; overflow: hidden; } .plans-sec::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 50% 110%, color-mix(in srgb, var(--color-brand-secondary) 28%, transparent), transparent 70%); } .plans-sec .wrap { position: relative; } .plans-sec .label { color: var(--color-brand-accent); } .plans-sec .head h2 { color: var(--color-text-on-dark); } .plans-sec .head p { color: var(--color-text-on-dark); } .plans { align-items: stretch; } .plans .type { background: color-mix(in srgb, var(--color-white) 4%, transparent); border-color: var(--color-border-dark); color: var(--color-text-on-dark); } .plans .type h3 { color: var(--color-text-on-dark); } .plans .type p, .plans .type li { color: var(--color-text-on-dark); } .plans .type ul { border-top-color: var(--color-border-dark); } .plans .type li::before { background: var(--color-brand-accent); } .plans .plan-tag { color: var(--color-brand-accent); } .plans .type.featured { background: var(--color-white); border-color: var(--color-white); color: var(--color-text-primary); box-shadow: 0 30px 60px -25px color-mix(in srgb, var(--color-brand-primary-active) 60%, transparent); transform: translateY(-12px); } .plans .type.featured h3 { color: var(--color-text-primary); } .plans .type.featured p, .plans .type.featured li { color: var(--color-text-body); } .plans .type.featured ul { border-top-color: var(--color-border); } .plans .type.featured li::before { background: var(--color-brand-secondary); } .plans .type.featured .plan-tag { color: var(--color-brand-secondary); } .plans .badge { background: var(--color-brand-accent); color: var(--color-text-primary); } .plans-sec .plans-note { color: var(--color-text-on-dark-secondary); } .plans-sec .plans-note a { color: var(--color-text-on-dark); } .plans-sec .plans-note a:hover { color: var(--color-brand-accent); } @media (max-width: 900px) { .plans .type.featured { transform: none; } } /* Case studies: results read at a glance */ .metric { border-top-color: var(--color-brand-secondary); } /* Closing band on pages without a contact form */ .cta-band { background: var(--color-brand-primary); color: var(--color-text-on-dark); padding-block: clamp(3rem, 6vw, 4.5rem); } .cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; } .cta-band h2 { color: var(--color-text-on-dark); max-width: 25ch; } .cta-band p { margin-top: .8rem; max-width: 48ch; color: var(--color-text-on-dark); } .cta-band .acts { display: flex; flex-wrap: wrap; gap: .8rem; } /* ---------- Hero diagram assembles on load ---------- Inputs slide in, wires draw to the hub, the hub switches on, outputs appear, then leads start flowing. Pure CSS, no library. */ .map .node, .map .browser { animation: map-in .6s cubic-bezier(.2,.7,.2,1) both; } .map .node:nth-of-type(1), .map .browser { animation-delay: .45s; } .map .node:nth-of-type(2) { animation-delay: .57s; } .map .node:nth-of-type(3) { animation-delay: .69s; } @keyframes map-in { from { opacity: 0; transform: translateX(-16px); } } .map .wire-path { stroke-dasharray: 600; animation: wire-draw .8s .75s cubic-bezier(.6,0,.2,1) both; } .map use.wire-path[href="#p4"], .map use.wire-path[href="#c4"], .map use.wire-path[href="#q4"], .map use.wire-path[href^="#b"] { animation-delay: 1.45s; } @keyframes wire-draw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } } .map .wire-live { animation: flow 1.6s linear infinite, wire-on .5s 1.6s both; } @keyframes wire-on { from { opacity: 0; } to { opacity: .85; } } .map .hub { transform-box: fill-box; transform-origin: center; animation: hub-in .7s 1.15s cubic-bezier(.3,1.5,.5,1) both; } @keyframes hub-in { from { opacity: 0; transform: scale(.55); } } .map .hub circle.core, .map .hub rect.core { animation: hub-on 1s 1.3s ease-out both; } @keyframes hub-on { from { fill: var(--color-brand-primary-hover); stroke-opacity: .2; } 40% { fill: color-mix(in srgb, var(--color-brand-secondary) 70%, var(--color-white)); } to { fill: var(--color-brand-secondary); stroke-opacity: 1; } } .map .out { animation: out-in .6s 1.6s cubic-bezier(.2,.7,.2,1) both; } .map .out:nth-of-type(6) { animation-delay: 1.72s; } .map .out:nth-of-type(7) { animation-delay: 1.84s; } @keyframes out-in { from { opacity: 0; transform: translateX(16px); } } .map .pulse { animation: pulse-on .3s 1.9s both; } @keyframes pulse-on { from { opacity: 0; } to { opacity: 1; } } .map .live { animation: pulse-on .4s 1.9s both; } @media (prefers-reduced-motion: reduce) { .map .node, .map .browser, .map .wire-path, .map .hub, .map .hub circle.core, .map .hub rect.core, .map .out, .map .live { animation: none; } .map .wire-live { animation: none; opacity: .85; } } /* ---------- Page transitions (browsers that support cross-page View Transitions) ---------- */ @view-transition { navigation: auto; } .nav { view-transition-name: site-nav; } .float { view-transition-name: wa-float; } ::view-transition-old(root) { animation: page-out .22s ease-in both; } ::view-transition-new(root) { animation: page-in .45s cubic-bezier(.2,.7,.2,1) both; } @keyframes page-out { to { opacity: 0; transform: translateY(-6px); } } @keyframes page-in { from { opacity: 0; transform: translateY(14px); } } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ---------- Step 3: supporting motion and micro-interactions ---------- */ /* Scroll reveal (only when JS adds .js-motion, so content is never hidden without it) */ .js-motion .reveal { opacity: 0; translate: 0 22px; transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), translate .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); } .js-motion .reveal.in { opacity: 1; translate: none; } /* Services track: line draws, stops light up in turn */ .js-motion .track::before { transform: scaleX(0); transform-origin: left; transition: transform 1.3s cubic-bezier(.6,0,.2,1) .15s; } .js-motion .track.in::before { transform: none; } .js-motion .svc .dot::after { transform: scale(0); transition: transform .45s cubic-bezier(.3,1.6,.5,1); } .js-motion .track.in .svc:nth-child(1) .dot::after { transform: none; transition-delay: .35s; } .js-motion .track.in .svc:nth-child(2) .dot::after { transform: none; transition-delay: .85s; } .js-motion .track.in .svc:nth-child(3) .dot::after { transform: none; transition-delay: 1.35s; } @media (max-width: 900px) { .js-motion .track::before { transform: scaleY(0); transform-origin: top; } } .js-motion .links { border-top-color: transparent; position: relative; } .js-motion .links::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--color-brand-secondary); transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.6,0,.2,1) .1s; } .js-motion .links.in::after { transform: none; } @media (max-width: 900px) { .js-motion .links { border-top: 0; border-left-color: var(--color-brand-secondary); } .js-motion .links::after { display: none; } } /* Counting numbers keep their width steady: site.js puts the widest form of the final value (every digit as "0", the widest digit) into data-reserve, and this invisible zero-height line reserves that width, so proportional figures can count up without the layout moving. It follows font load and viewport size, unlike a pixel min-width. */ .stat b, .metric b { display: inline-block; } .stat b[data-reserve]::before, .metric b[data-reserve]::before { content: attr(data-reserve); display: block; height: 0; overflow: hidden; visibility: hidden; white-space: nowrap; } /* Plan cards: pointer spotlight, lift, badge shimmer */ .plans .type { transition: border-color .3s, box-shadow .3s, translate .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); overflow: hidden; } .plans .type::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--color-brand-accent) 16%, transparent), transparent 70%); } .plans .type.featured::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--color-brand-secondary) 9%, transparent), transparent 70%); } .plans .type:hover::after { opacity: 1; } .plans .type:not(.featured):hover { border-color: color-mix(in srgb, var(--color-brand-accent) 45%, transparent); } .plans .type > * { position: relative; z-index: 1; } .plans .badge { position: absolute; z-index: 2; background: linear-gradient(110deg, var(--color-brand-accent) 40%, color-mix(in srgb, var(--color-brand-accent) 40%, var(--color-white)) 50%, var(--color-brand-accent) 60%) 0 0 / 250% 100%; animation: shimmer 4.5s ease-in-out infinite; } @keyframes shimmer { 0%, 60% { background-position: 100% 0; } 100% { background-position: -50% 0; } } /* Navigation: compacts and gains a soft shadow once you scroll */ .nav .wrap { transition: height .25s ease; } .nav { transition: box-shadow .25s; } .nav.scrolled .wrap { height: 56px; } /* FAQ: answers open with a grid-rows slide plus a fade (no height or block-size animation); the plus turns into a close mark */ .faq details::details-content { display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; transition: grid-template-rows .35s ease, opacity .25s ease, content-visibility .35s allow-discrete; } .faq details[open]::details-content { grid-template-rows: 1fr; opacity: 1; } .faq details > p { min-height: 0; overflow: hidden; } .faq summary::after { transition: transform .3s ease, background .3s, color .3s; } .faq details[open] summary::after { content: "+"; transform: rotate(45deg); } .faq summary:hover { color: var(--color-brand-secondary); } /* FAQ, desktop (1025px and up): heading and intro on the left (40%, sticky below the floating header), the accordion on the right (60%). Tablet and mobile keep the stacked layout. */ @media (min-width: 1025px) { .faq-sec .wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .faq-sec .head { grid-template-columns: 1fr; margin-bottom: 0; position: sticky; top: calc(70px + 24px); } .faq-sec .head > p { padding-top: 0; } } /* Form: fields ease into focus; success gets an animated tick */ .field input, .field textarea, .phone select { transition: border-color .18s ease; } .plan .done { display: flex; gap: .8rem; align-items: center; } .plan .done::before { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--color-brand-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; animation: tick .5s cubic-bezier(.3,1.6,.5,1) both; } @keyframes tick { from { transform: scale(0); } } @media (prefers-reduced-motion: reduce) { .plans .badge { animation: none; } .faq details::details-content { transition: none; } .plan .done::before { animation: none; } } /* ---------- Light header with the Deep Teal logo ---------- */ .nav .logo img { display: block; height: 34px; width: auto; } .nav-links a:hover, .sub-toggle:hover { color: var(--color-brand-secondary); } .nav-links a.active, .nav-links a[aria-current="page"] { color: var(--color-text-primary); } .nav-links a.active::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); } .menu-btn { color: var(--color-text-primary); } .nav .sub a { color: var(--color-text-primary); } .foot .logo img { display: block; height: 40px; width: auto; } /* ---------- Scroll story: "The real issue" diagram ---------- */ .scatter .joined { fill: none; stroke: var(--color-brand-secondary); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; } .scatter .hub-new { opacity: 0; } .scatter .hub-new circle { fill: var(--color-brand-accent); stroke: var(--color-brand-primary); stroke-width: 2; } .scatter .hub-new text { fill: var(--color-brand-primary); font: 600 var(--u-sub) var(--f-body); text-anchor: middle; } .scatter .sub.good { opacity: 0; fill: var(--color-text-secondary); } .scatter .cap-good { display: none; } .scatter.story .joined { stroke-dashoffset: calc(160 * (1 - var(--p, 0))); } .scatter.story .broken { opacity: clamp(0, calc(1 - var(--p, 0) * 1.6), 1); } .scatter.story .q { opacity: clamp(0, calc(1 - var(--p, 0) * 2.2), 1); } .scatter.story .hub-new { opacity: clamp(0, calc((var(--p, 0) - .55) * 3), 1); transform-box: fill-box; transform-origin: center; transform: scale(calc(.6 + .4 * clamp(0, calc((var(--p, 0) - .55) * 2.3), 1))); } /* The card, its title and its sub-label change colour at the same instant (no fade): a fade or a half-faded label would pass through unreadable mid-tones (mint on a white card, secondary text on a Deep Teal card). White state: secondary text on white. Joined state: white and mint on Deep Teal. */ .scatter.joined-up .frag rect { fill: var(--color-brand-primary); stroke: var(--color-brand-primary); stroke-width: 1.5; } .scatter.joined-up .frag text { fill: var(--color-white); } .scatter.joined-up .frag .sub.bad { opacity: 0; } .scatter.joined-up .frag .sub.good { opacity: 1; fill: var(--color-brand-accent); } .scatter.joined-up .cap-bad { display: none; } .scatter.joined-up .cap-good { display: inline; color: var(--color-brand-secondary); } svg .sub { display: inline; } /* SVG labels share the .sub class name with the menu dropdown */ /* ---------- Fixes (Oct 2) ---------- */ /* The form hides its fields and button on success; their own display rules must not override the hidden attribute */ form.plan [hidden] { display: none; } .steps-4 .step { min-width: 0; } @media (max-width: 820px) { .steps-4 { grid-template-columns: 1fr; } } @media (max-width: 820px) { .metric { border-top: 1px solid color-mix(in srgb, var(--color-brand-secondary) 30%, transparent); } .foot > div:last-child { grid-column: 1 / -1; } } .legal ul { gap: .45rem 1.4rem; } .legal .wrap { gap: .7rem 1rem; } /* ---------- Who we help (Phase 2A) ---------- */ .who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .who-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r); padding: 1.6rem; display: flex; flex-direction: column; gap: .8rem; min-width: 0; } .who-card p { color: var(--color-text-body); } .who-card .who-proof { margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--color-border); color: var(--color-text-body); font-weight: 600; } .who-card .who-link { margin-top: auto; padding-top: .5rem; align-self: flex-start; color: var(--color-text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: color .18s ease; } .who-card .who-link:hover { color: var(--color-brand-secondary); } @media (max-width: 1000px) { .who-grid { grid-template-columns: repeat(2, 1fr); } .who-card:last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (max-width: 640px) { .who-grid { grid-template-columns: 1fr; } } /* About us: a wider column for the "Why we exist" heading so it holds to two lines on desktop */ @media (min-width: 821px) { #why-we-exist .head { grid-template-columns: 1.6fr 1fr; } } /* Card links land with the eyebrow label 24px below the floating header (bottom edge 70px when scrolled): 94px, less the block padding */ .case { scroll-margin-top: calc(94px - clamp(2.5rem, 5vw, 3.5rem)); } /* Case-study result screenshots: card border and radius, caption in the small body style */ /* Proof screenshots sit above the testimonials: two columns from 900px, stacked below */ .proof-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .proof-shots .case-proof { min-width: 0; } @media (max-width: 899px) { .proof-shots { grid-template-columns: 1fr; } } .case-proof { margin: 0; display: flex; flex-direction: column; gap: .7rem; } .case-proof a { display: block; border: 1px solid var(--color-border); border-radius: var(--r); overflow: hidden; background: var(--color-white); } .case-proof img { display: block; width: 100%; height: auto; } .case-proof figcaption { color: var(--color-text-secondary); } /* ---------- Layered sections ---------- */ /* Where the background colour changes, the upper section curves its bottom corners over the next one (tools/layers.py marks them with data-next). The corners show the next section's colour, so nothing overlaps, moves or clips. */ :root { --layer-r: 28px; } @media (min-width: 768px) { :root { --layer-r: 40px; } } @media (min-width: 1024px) { :root { --layer-r: 64px; } } [data-next] { position: relative; } [data-next]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--layer-r); pointer-events: none; background: radial-gradient(circle at 100% 0, transparent calc(var(--layer-r) - .5px), var(--wedge) var(--layer-r)) left top / var(--layer-r) var(--layer-r) no-repeat, radial-gradient(circle at 0 0, transparent calc(var(--layer-r) - .5px), var(--wedge) var(--layer-r)) right top / var(--layer-r) var(--layer-r) no-repeat; } [data-next="white"] { --wedge: var(--color-white); } [data-next="alt"] { --wedge: var(--color-surface-alt); } [data-next="primary"] { --wedge: var(--color-brand-primary); } [data-next="secondary"] { --wedge: var(--color-brand-secondary); } /* A legal-hero that hands over to the next section with a curve (About us) has no bottom rule: it showed as a pale line above the teal stats band */ .legal-hero[data-next] { border-bottom: 0; } footer { padding-bottom: 5rem; } /* clears the floating WhatsApp pill so it never covers the legal links */ /* About us: the heading column stays beside the long text while scrolling (desktop only), below the floating header */ @media (min-width: 900px) { #why-we-exist .head .kicker { position: sticky; top: calc(70px + 24px); align-self: start; } } /* Intro paragraphs under section headings and in the contact block use the lead size */ /* Mobile tap targets: footer and legal links are at least 44px tall (inline links in paragraphs are exempt) */ @media (max-width: 767px) { .foot ul:not(.social) a::after { content: ""; position: absolute; inset: -5px 0; } /* 44px hit area without changing the visible gap */ .foot-cookie, .legal a { display: flex; align-items: center; min-height: 44px; } .legal ul { gap: 0 1.4rem; } .foot .logo { min-height: 44px; } .foot .social a { width: 44px; height: 44px; } .foot .social { gap: .4rem; } } /* Form field errors: shown when the field loses focus, cleared as soon as it is edited */ .field-error { margin: 0; color: var(--color-error-text); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--color-error); } /* ---------- Free tools: ad cost calculator ---------- */ .calc-peek { background: var(--color-brand-primary); color: var(--color-text-on-dark); border-radius: 20px; padding: clamp(1.2rem, 3vw, 1.8rem); display: flex; flex-direction: column; gap: .9rem; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--color-brand-primary) 55%, transparent); } .peek-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--color-text-on-dark-secondary); } .peek-tag { color: var(--color-brand-accent); } .peek-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--color-border-dark); } .peek-hi b { color: var(--color-brand-accent); } .peek-bars { display: flex; flex-direction: column; gap: .4rem; } .peek-bars i { display: block; height: 10px; width: var(--w); border-radius: 999px; background: var(--color-brand-secondary); margin-inline: auto; } .peek-bars i:last-child { background: var(--color-brand-accent); } .peek-note { color: var(--color-text-on-dark-secondary); } .calc-sec { background: var(--color-surface-alt); } .adcalc { display: flex; flex-direction: column; gap: 1.5rem; } .calc-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 20px; padding: clamp(1.2rem, 3.5vw, 2.2rem); display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; } .calc-card:focus { outline: none; } form.plan.calc-form { background: var(--color-white); box-shadow: none; border: 1px solid var(--color-border); } .calc-step { display: flex; align-items: center; gap: .8rem; } .calc-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--color-brand-primary); color: var(--color-brand-accent); font: 600 14px/1 var(--f-body); } .calc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem clamp(1rem, 3vw, 2.5rem); align-items: start; } .calc-fields .span-2 { grid-column: 1 / -1; } @media (max-width: 760px) { .calc-fields { grid-template-columns: minmax(0, 1fr); } } .btn.btn-lg { padding: calc(1.1em - 1.5px) calc(1.7em - 1.5px); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--color-brand-primary) 55%, transparent); } .rep-price { padding: clamp(1.2rem, 3vw, 1.8rem); border: 2px solid var(--color-brand-primary); gap: .7rem; } .rep-price-row .money-in { flex: 1 1 260px; } .rep-rest { display: flex; flex-direction: column; gap: 1.2rem; } .vbars { max-width: 640px; } @media (max-width: 480px) { .rep-price-row .btn { width: 100%; justify-content: center; } } .adcalc select, .adcalc input[type="number"], .money-in { border: 1.5px solid var(--color-border-field); border-radius: 10px; background: var(--color-white); color: var(--color-text-primary); width: 100%; transition: border-color .18s ease; } .adcalc select, .adcalc input[type="number"] { padding: .8rem .9rem; } .adcalc select:focus, .adcalc input[type="number"]:focus, .money-in:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-brand-primary); } .money-in { display: flex; align-items: center; } .money-in .cur { padding-left: .9rem; color: var(--color-text-secondary); font-weight: 600; white-space: nowrap; } .adcalc .money-in input { border: 0; outline: 0; background: transparent; padding: .8rem .9rem .8rem .4rem; color: var(--color-text-primary); width: 100%; min-width: 0; } .adcalc input[type="range"] { width: 100%; accent-color: var(--color-brand-primary); margin-top: .3rem; } .calc-hint { color: var(--color-text-secondary); } .calc-inputs .btn, .calc-form .btn { align-self: flex-start; } .r-lead { color: var(--color-text-body); } .r-lead b { color: var(--color-text-primary); } .r-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; } @media (max-width: 640px) { .r-cards { grid-template-columns: 1fr; } } .r-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: .3rem; text-align: center; align-items: center; } .r-card b { font-variant-numeric: lining-nums; } .r-k { color: var(--color-text-secondary); } .r-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface-muted); color: var(--color-brand-secondary); } .r-icon svg { width: 20px; height: 20px; } .r-card.r-hi { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-text-on-dark); } .r-hi .r-k { color: var(--color-text-on-dark-secondary); } .r-hi b { color: var(--color-brand-accent); } .r-hi .r-icon { background: var(--color-brand-primary-hover); color: var(--color-brand-accent); } .r-range, .r-note, .r-change { color: var(--color-text-secondary); } .r-note { color: var(--color-text-body); padding: .8rem 1rem; border-radius: 10px; background: var(--color-white); border: 1px solid var(--color-border); } .r-note a { color: var(--color-link); font-weight: 600; } .r-funnel { display: flex; flex-direction: column; gap: .4rem; } .f-bar { height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding-inline: .8rem; font-size: 14px; font-weight: 600; margin-inline: auto; text-align: center; } .f-bar.f1 { width: 100%; background: color-mix(in srgb, var(--color-brand-secondary) 22%, var(--color-white)); color: var(--color-text-primary); } .f-bar.f2 { width: 64%; background: var(--color-brand-accent); color: var(--color-text-primary); } @media (max-width: 480px) { .f-bar.f2 { width: 86%; } } .r-teaser { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border); } .r-teaser p { flex: 1 1 220px; color: var(--color-text-body); } .r-teaser-icon { flex: none; width: 24px; height: 24px; color: var(--color-brand-secondary); } .rep-price { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border-radius: 14px; background: var(--color-white); border: 1px solid var(--color-border); } .rep-price-row { display: flex; gap: .8rem; flex-wrap: wrap; } .rep-price-row .money-in { flex: 1 1 200px; width: auto; } .rep-block { display: flex; flex-direction: column; gap: .8rem; padding-top: 1.2rem; border-top: 1px solid var(--color-border); } .rep-line { color: var(--color-text-body); } .rep-good { color: var(--color-brand-secondary); font-weight: 600; } .hbars { display: flex; flex-direction: column; gap: .6rem; } .hbar { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; } .hb-k { color: var(--color-text-secondary); } .hbar b { min-width: 6ch; text-align: right; } .hb-track { height: 18px; border-radius: 999px; background: var(--color-white); border: 1px solid var(--color-border); overflow: hidden; } .hb-track i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .6s ease; } .hb-spend { background: var(--color-border-field); } .hb-earn { background: var(--color-brand-secondary); } .share { height: 22px; border-radius: 999px; background: var(--color-brand-accent); border: 1px solid var(--color-brand-primary); overflow: hidden; } .share i { display: block; height: 100%; width: 0; background: var(--color-brand-primary); transition: width .6s ease; } .vbars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: end; height: 190px; padding-inline: .5rem; border-bottom: 1px solid var(--color-border); } .vbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .4rem; height: 100%; } .vbar i { display: block; width: min(72px, 100%); height: 0; border-radius: 8px 8px 0 0; background: var(--color-brand-secondary); transition: height .6s ease; } .vbar:last-child i { background: var(--color-brand-primary); } .vbar b { font-weight: 600; } /* Small size: the Stat style is too wide for three bars on a phone (decision pending) */ .vbar span { color: var(--color-text-secondary); margin-bottom: -1.6rem; } .vbars + .calc-hint { margin-top: 1.4rem; } .rep-verdict .verdict { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem; border-radius: 14px; background: var(--color-white); border: 1px solid var(--color-border); } .verdict-dot { flex: none; width: 14px; height: 14px; margin-top: .35rem; border-radius: 50%; background: var(--color-brand-secondary); } .verdict.starter .verdict-dot { background: var(--color-brand-accent); border: 2px solid var(--color-brand-primary); } .verdict p { color: var(--color-text-body); } .verdict b { color: var(--color-text-primary); } .rep-adv { color: var(--color-text-body); white-space: pre-line; } .rep-tips { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .5rem; color: var(--color-text-body); } .rep-cta { display: flex; flex-direction: column; gap: .9rem; padding: 1.2rem; border-radius: 14px; background: var(--color-brand-primary); color: var(--color-text-on-dark); } .rep-cta .acts { display: flex; flex-wrap: wrap; gap: .8rem; } .rep-cta .r-change, .rep-cta .linkish { color: var(--color-text-on-dark-secondary); } .r-save { padding: .8rem 1rem; border-radius: 10px; background: var(--color-white); border: 1px solid var(--color-border); color: var(--color-text-body); } .consent .check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; color: var(--color-text-body); cursor: pointer; } .consent .check input { width: 18px; height: 18px; margin-top: .15rem; flex: none; accent-color: var(--color-brand-primary); } .consent .check a { color: var(--color-link); font-weight: 600; } .dots { display: inline-flex; gap: 5px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand-secondary); animation: dot 1s infinite ease-in-out; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; } @keyframes dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .6; } .hb-track i, .share i, .vbar i { transition: none; } } .adcalc [hidden] { display: none !important; } /* While the estimate is being worked out, the working screen and the estimate (or the overseas note) share one grid cell. The estimate is already laid out but invisible (.is-pending), so the cell is as tall as the estimate and swapping the two moves nothing below. Outside that window the wrapper vanishes (display: contents), so the page lays out exactly as it did without it. */ .calc-stage { display: contents; } .calc-stage.is-staging { display: grid; grid-template-columns: minmax(0, 1fr); } .calc-stage.is-staging > .calc-card { grid-area: 1 / 1; } .adcalc .is-pending { visibility: hidden; } /* The working screen's card is as tall as the estimate that will replace it, so its content sticks just below the header while the visitor scrolls (sticky takes no space and moves nothing; it only matters on small screens where the card is taller than the window). */ .calc-loading .load-body { display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: 100px; } .calc-method .method-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } @media (max-width: 1060px) { .calc-method .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .calc-method .method-grid { grid-template-columns: minmax(0, 1fr); } } .method { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--r); padding: 1.4rem; display: flex; flex-direction: column; gap: .6rem; } .method p { color: var(--color-text-body); } .adcalc .calc-card { scroll-margin-top: 100px; } @media (max-width: 640px) { .r-card { flex-direction: row; text-align: left; justify-content: flex-start; gap: .8rem; padding: .8rem 1rem; } .r-card .r-k { flex: 1; } } .calc-report .rep-block, .calc-report .rep-rest { scroll-margin-top: 110px; } /* Calculator: business category cards, currency in the step header, honesty note */ .calc-step-row { flex-wrap: wrap; } .calc-cur { margin-left: auto; display: flex; align-items: center; gap: .6rem; } .calc-cur label { color: var(--color-text-secondary); white-space: nowrap; } .adcalc .calc-cur select { width: auto; padding: .55rem .8rem; } @media (max-width: 640px) { .calc-cur { margin-left: 0; width: 100%; } .adcalc .calc-cur select { flex: 1; } } .cat-desc { color: var(--color-text-secondary); margin-top: .7rem; min-height: 1.5em; } .cat-desc b { color: var(--color-text-primary); font-weight: 600; } /* Sub-type question: sits in the card grid, right under the tapped card's row, with a pointer up to it */ .r-gst { color: var(--color-text-secondary); margin-top: -.6rem; } .r-honest { color: var(--color-text-body); display: flex; flex-direction: column; gap: .4rem; } .r-honest summary { cursor: pointer; font-weight: 600; color: var(--color-text-primary); width: fit-content; } .r-honest summary:hover { color: var(--color-brand-secondary); } .r-honest ul { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem 1.5rem; } @media (max-width: 520px) { .r-honest ul { grid-template-columns: minmax(0, 1fr); } } /* Calculator: headings breathe above their options (legends do not take part in flex gaps) */ .adcalc .field { gap: .6rem; } .adcalc fieldset.field > legend { margin-bottom: .7rem; } /* Calculator: working-on-it step */ .load-bar { height: 8px; border-radius: 999px; background: var(--color-white); border: 1px solid var(--color-border); overflow: hidden; } .load-bar i { display: block; height: 100%; width: 0; background: var(--color-brand-secondary); border-radius: 999px; } .load-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; } .load-steps li { display: flex; align-items: center; gap: .7rem; color: var(--color-text-secondary); } .load-steps li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--color-border); box-sizing: border-box; } .load-steps li.now { color: var(--color-text-primary); font-weight: 600; } .load-steps li.now::before { border-color: var(--color-brand-secondary); border-top-color: transparent; animation: spin .8s linear infinite; } .load-steps li.done { color: var(--color-text-body); } .load-steps li.done::before { border: 0; background: var(--color-brand-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; } @media (prefers-reduced-motion: reduce) { .load-steps li.now::before { animation: none; border-top-color: var(--color-brand-secondary); } } /* Calculator: one question at a time */ .calc-inputs.tf { --tf-gap: 1.4rem; gap: var(--tf-gap); } /* no minimum height: the card fits its question */ .tf-top { display: flex; align-items: center; gap: 1rem; } .tf-count { color: var(--color-brand-secondary); white-space: nowrap; } .tf-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--color-white); border: 1px solid var(--color-border); overflow: hidden; } .tf-bar i { display: block; height: 100%; width: 0; background: var(--color-brand-secondary); border-radius: 999px; transition: width .35s ease; } .tf-q { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 1rem; animation: tfIn .3s ease both; } @keyframes tfIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .tf-q { animation: none; } .tf-bar i { transition: none; } } .adcalc .tf-title { float: left; width: 100%; padding: 0; margin: 0 0 1.1rem; color: var(--color-text-primary); } .adcalc .tf-title:focus { outline: none; } .tf-title + * { clear: both; } .adcalc .tf-q .field { gap: .9rem; } .adcalc .tf-title .opt { font-weight: 400; } .adcalc .money-in.big input { padding-block: .7rem; } .adcalc input.big-in { padding: .9rem 1rem; border: 1.5px solid var(--color-border-field); border-radius: 10px; background: var(--color-white); color: var(--color-text-primary); width: 100%; max-width: 420px; } .adcalc input.big-in:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-brand-primary); } .tf .field #c-budget-range { max-width: 420px; } .tf-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: calc(40px - var(--tf-gap)); } /* 40px from the options (or help text) to Back / OK, 32px on a phone */ @media (max-width: 767px) { .tf-nav { margin-top: calc(32px - var(--tf-gap)); } } .tf-nav .btn { margin-left: auto; } /* Calculator options: ONE component for every question (business, goal, mode, country, sub-type, currency). Markup: input[type=radio] + label.opt-card > .opt-slot (optional icon or currency symbol, 24px) + .opt-text > b (title, Option style) + span (optional description, Small style). Colours are the tokens in the Colour system table. */ .opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; position: relative; } @media (max-width: 960px) { .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .opts-cat { grid-template-columns: repeat(4, minmax(0, 1fr)); } .opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .opts-sub { grid-template-columns: repeat(2, minmax(0, 1fr)); } .opts-cur { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Desktop columns follow the number of options (opts-c2 / c3 / c4 is set in the markup): 2 options 2 columns, 3 options 3, 4 options 4, 5-6 options 3, 7-8 options 4, 9 options 3, 10 or more 4. No option sits alone on the last row when another count from this list avoids it. Tablet and phone rules below are unchanged. */ @media (min-width: 961px) { .opts-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .opts-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .opts-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1060px) { .opts-cat { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .opts-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); } .opts-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .opts-sub { grid-template-columns: minmax(0, 1fr); } .opts-cur { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .opts, .opts-cat, .opts-2, .opts-3, .opts-sub, .opts-cur, .opts-c2, .opts-c3, .opts-c4 { grid-template-columns: minmax(0, 1fr); } } /* one column on a phone */ .opts input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .adcalc .opt-card { display: flex; align-items: center; gap: .75rem; min-height: 72px; padding: .75rem 1rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface-muted); color: var(--color-text-primary); cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .opts-compact .opt-card { min-height: 56px; } /* the unlock form's yes/no and start-time options: the same card without the icon slot */ .opt-slot { flex: none; width: 24px; display: grid; place-items: center; color: var(--color-brand-secondary); transition: color .18s ease; } .opt-slot svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .opt-sym { font: 600 20px/1 var(--f-body); white-space: nowrap; } /* currency symbols, sized to sit like the 22px icons */ .opt-sym.sm { font-size: 14px; letter-spacing: -.02em; } .opt-sym.xs { font-size: 10.5px; letter-spacing: -.02em; } .opt-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; } .adcalc .opt-card b { color: var(--color-text-primary); transition: color .18s ease; } .opt-text span { color: var(--color-text-secondary); transition: color .18s ease; } .opts-cat .opt-text span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the category's description shows under the cards instead */ .adcalc .opt-card:hover { background: var(--color-white); border-color: var(--color-brand-secondary); } .opts input:checked + .opt-card { background: var(--color-brand-primary); border-color: var(--color-brand-primary); } .opts input:checked + .opt-card b { color: var(--color-text-on-dark); } .opts input:checked + .opt-card .opt-text span { color: var(--color-text-on-dark-secondary); } .opts input:checked + .opt-card .opt-slot { color: var(--color-brand-accent); } .opts input:focus-visible + .opt-card { outline: 2px solid var(--color-focus); outline-offset: 2px; } .money-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .money-row .money-in { flex: 1 1 240px; max-width: 420px; } .cur-panel { border: 0; margin: .9rem 0 0; padding: 0; min-width: 0; } .cur-panel > legend { padding: 0; margin-bottom: .6rem; color: var(--color-text-secondary); } .r-cur { margin: 0; color: var(--color-text-secondary); } .r-cur b { color: var(--color-text-primary); font-weight: 600; } /* tertiary text button: Back, Change, Change currency */ .tf-link { background: none; border: 0; padding: .4rem 0; color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: .5em; transition: color .18s ease; } .tf-link:hover { color: var(--color-link-hover); } .r-cur .tf-link { font-size: inherit; font-weight: 600; padding: 0; display: inline; } .tf-back-ic { flex: none; width: 1em; height: 1em; transform: scaleX(-1); transition: transform .2s; } /* the OK arrow, mirrored */ .tf-back:hover .tf-back-ic { transform: scaleX(-1) translateX(3px); } @media (prefers-reduced-motion: reduce) { .tf-back-ic { transition: none; } .tf-back:hover .tf-back-ic { transform: scaleX(-1); } } /* Menu: small heading inside a dropdown (Growth tools) */ .sub-head { padding: .5rem .8rem .2rem; color: var(--color-brand-secondary); } @media (max-width: 860px) { .sub-head { padding: .4rem 0 .1rem; } } /* Performance marketing: link to the free calculator */ .tool-link { color: var(--color-text-body); } .tool-link a { color: var(--color-text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: color .18s ease; } .tool-link a:hover { color: var(--color-brand-secondary); } /* Menu: keep every item on one line; tighten spacing on mid-size screens (six items since Growth tools) */ .nav-links a, .sub-toggle, .nav .btn { white-space: nowrap; } @media (min-width: 861px) and (max-width: 1180px) { .nav .wrap { gap: 1.1rem; } .nav-links { gap: 1.15rem; } .nav .btn { padding: .7em 1em; } } /* Dropdown entries wrap inside their panel (the nowrap above is for the top-level items only) */ .sub a, .sub b, .sub span { white-space: normal; } @media (min-width: 861px) { .sub { width: max-content; min-width: 340px; max-width: calc(100vw - 2rem); } } /* wide enough for "Facebook & Instagram Ads Cost Calculator" on one line */ @media (min-width: 861px) and (max-width: 960px) { .nav-links { gap: .9rem; } .nav .logo img { width: 104px; height: auto; } } /* Calculator: country and scope cards */ .country-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }