/* ============================================================================ theme.css — Complete Wheel Restoration (CWR-GarageDark), Spark-native build. This site was designed in YOOtheme/UIkit (see HTML pages/ folder, the design source of truth) but ported to Lingo Spark with NO UIkit dependency. Every layout/component class below is hand-authored to reproduce the CWR-GarageDark look. The .lingo-* component library (signature bento hero, marquee, compare split, service blocks, review wall, timeline, FAQ, etc.) is carried over verbatim from the project's cwr-custom-css.css (the styling source of truth). REBRAND: edit site-config.php -> 'theme' (primary/neutral/bg). bootstrap.php injects those as --brand-* into ; the tokens below fall back to the baked CWR hexes if config is ever cleared. Brand: dark garage. Red (#AB3636) on near-black (#121212). Bebas Neue uppercase display, Inter body, JetBrains Mono accents. ============================================================================ */ :root { /* Brand seeds — overridden by bootstrap.php from site-config.php -> theme, with the CWR hexes as the safety-net fallback. */ --brand-primary: #AB3636; --brand-neutral: #D8D8D8; --brand-bg: #121212; --brand-on-primary: #FFFFFF; /* CWR palette (mirrors style.json / cwr-custom-css.css) */ --cwr-red: var(--brand-primary, #AB3636); --cwr-red-hot: #E04848; --cwr-ink: #0A0A0A; --cwr-panel: #1C1C1C; --cwr-line: #2E2E2E; --cwr-bg: var(--brand-bg, #121212); --cwr-text: var(--brand-neutral, #D8D8D8); --cwr-emphasis: #FFFFFF; --cwr-muted: #8A8F94; /* Section backgrounds (sampled from the live build) */ --section-default: var(--cwr-bg); --section-muted: #1C1C1C; --section-secondary: var(--cwr-red); /* Fonts — Google Fonts loaded in header.php; system fallbacks keep the page legible before/without the webfont. */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --font-display: 'Bebas Neue', 'Oswald', 'Antonio', 'Impact', 'Arial Narrow', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Layout scale */ --cwr-content-max: 1200px; --cwr-content-small: 880px; --cwr-gap: 30px; --nav-height: 112px; } @media (max-width: 959px) { :root { --nav-height: 88px; } } /* ============================================================================ Reset + base ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-height) + 16px); } body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--cwr-text); background: var(--cwr-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; } img, picture, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--cwr-red); color: #FFFFFF; } .skip-link { position: absolute; left: -9999px; background: var(--cwr-red); color: #FFFFFF; padding: 12px 16px; font-weight: 600; z-index: 200; } .skip-link:focus { left: 16px; top: 16px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============================================================================ Typography — Bebas Neue display (all-caps glyphs), Inter body ============================================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; line-height: 1.0; letter-spacing: 0.02em; color: var(--cwr-emphasis); } h1 { font-size: 72px; } h2 { font-size: 52px; } h3 { font-size: 36px; } h4 { font-size: 24px; } @media (max-width: 640px) { h1 { font-size: 52px; } h2 { font-size: 40px; } h3 { font-size: 30px; } } p { line-height: 1.65; } p + p { margin-top: 1rem; } a { color: var(--cwr-red-hot); text-decoration: none; text-underline-offset: 3px; transition: color 150ms ease; } a:hover { color: var(--cwr-emphasis); } a:focus-visible { outline: 2px solid var(--cwr-red-hot); outline-offset: 3px; } strong, b { color: var(--cwr-emphasis); font-weight: 700; } ul, ol { padding-left: 1.25rem; } li { margin-bottom: 6px; } :target { scroll-margin-top: calc(var(--nav-height) + 24px); } /* ============================================================================ Layout — sections + containers (replaces uk-section / uk-container) ============================================================================ */ main { display: block; min-height: 60vh; } .cwr-section { padding-block: clamp(48px, 8vw, 80px); position: relative; } .cwr-section--small { padding-block: clamp(28px, 4vw, 44px); } .cwr-section--large { padding-block: clamp(60px, 10vw, 120px); } .cwr-section--xlarge { padding-block: clamp(96px, 15vw, 220px); } .cwr-section--flush { padding-block: 0; } .cwr-section--default { background: var(--section-default); } .cwr-section--muted { background: var(--section-muted); } /* Red band: set white via inheritance so component classes (compare labels, etc.) keep their own explicit colors. Headings are already white globally. Eyebrows carry an explicit red, so flip them white on red — except inside the .lingo-callout (which sits on its own dark ink bg, keeping its red eyebrow). */ .cwr-section--secondary { background: var(--section-secondary); color: #FFFFFF; } .cwr-section--secondary .lingo-eyebrow { color: #FFFFFF; } .cwr-section--secondary .lingo-eyebrow::before { background: #FFFFFF; } .lingo-callout .lingo-eyebrow { color: var(--cwr-red); } .lingo-callout .lingo-eyebrow::before { background: var(--cwr-red); } .cwr-container { width: 100%; max-width: var(--cwr-content-max); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); } .cwr-container--small { max-width: var(--cwr-content-small); } .cwr-container--expand { max-width: 1600px; } /* Full-bleed cover (heroes): set background-image inline on the section */ .cwr-cover { background-size: cover; background-position: center center; background-repeat: no-repeat; isolation: isolate; } .cwr-overlay { position: absolute; inset: 0; z-index: 0; } .cwr-relative { position: relative; z-index: 1; } /* Desktop parallax — replaces uk-parallax (hero bg + about shop floor). */ @media (min-width: 960px) { .cwr-parallax { background-attachment: fixed; } } /* ============================================================================ Grid utilities (purpose-named, CSS Grid — replaces uk-grid + uk-width-*) ============================================================================ */ .cwr-flex { display: flex; } .cwr-flex-middle { align-items: center; } .cwr-flex-top { align-items: flex-start; } /* Heading row: big title left, supporting note right; bottom-aligned */ .cwr-leadrow { display: grid; grid-template-columns: 1fr; gap: var(--cwr-gap); align-items: end; } @media (min-width: 820px) { .cwr-leadrow { grid-template-columns: 2fr 1fr; } } /* Two-column story split (image + copy). 2fr/3fr like uk-width-2-5/3-5. */ .cwr-storysplit { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); align-items: flex-start; } @media (min-width: 960px) { .cwr-storysplit { grid-template-columns: 2fr 3fr; } } .cwr-storysplit--center { align-items: center; } /* flip so the visual sits on the right */ @media (min-width: 960px) { .cwr-storysplit--rev > :first-child { order: 2; } } .cwr-grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--cwr-gap); } @media (min-width: 700px) { .cwr-grid-3 { grid-template-columns: repeat(3, 1fr); } } .cwr-grid-4 { display: grid; grid-template-columns: 1fr; gap: var(--cwr-gap); } @media (min-width: 560px) { .cwr-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .cwr-grid-4 { grid-template-columns: repeat(4, 1fr); } } .cwr-grid-4--collapse { gap: 0; } .cwr-gallery { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 1040px; margin-inline: auto; } @media (min-width: 700px) { .cwr-gallery { grid-template-columns: repeat(2, 1fr); } } /* Stats line with hairline dividers (about page) */ .cwr-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; text-align: center; } @media (min-width: 700px) { .cwr-stats { grid-template-columns: repeat(4, 1fr); } } .cwr-stats > * { padding: 16px clamp(8px, 2vw, 24px); } .cwr-stats > *:not(:last-child) { border-right: 1px solid var(--cwr-line); } .cwr-stat__num { font-family: var(--font-display); font-size: clamp(54px, 6vw, 96px); color: #FFFFFF; line-height: 0.9; margin: 0; } .cwr-stat__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--cwr-red-hot); text-transform: uppercase; margin: 8px 0 0; } /* ============================================================================ Buttons (replaces uk-button / uk-button-primary / uk-button-default) ============================================================================ */ .cwr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 26px; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; border: 2px solid transparent; border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease; } .cwr-btn:hover { text-decoration: none; transform: translateY(-1px); } .cwr-btn--large { padding: 16px 36px; font-size: 14px; } .cwr-btn--primary { background-color: var(--cwr-red); border-color: var(--cwr-red); color: #FFFFFF; } .cwr-btn--primary:hover { background-color: var(--cwr-red-hot); border-color: var(--cwr-red-hot); color: #FFFFFF; } .cwr-btn--default { background-color: transparent; border-color: #FFFFFF; color: #FFFFFF; } .cwr-btn--default:hover { background-color: #FFFFFF; border-color: #FFFFFF; color: var(--cwr-ink); } /* On a centered red (secondary) CTA band, a red primary button would blend in — invert to white. Scoped to .cwr-text-center so hero/gallery (also secondary, but with buttons on dark tiles) keep their red primary button. */ .cwr-section--secondary.cwr-text-center .cwr-btn--primary { background-color: #FFFFFF; border-color: #FFFFFF; color: var(--cwr-red); } .cwr-section--secondary.cwr-text-center .cwr-btn--primary:hover { background-color: var(--cwr-ink); border-color: var(--cwr-ink); color: #FFFFFF; } /* Button row — replaces the uk-margin-small-right spacing between CTAs. */ .cwr-btns { display: flex; flex-wrap: wrap; gap: 12px; } .cwr-text-center .cwr-btns { justify-content: center; } /* ============================================================================ Cards (replaces uk-card / uk-card-default — why-us trust cards) ============================================================================ */ .cwr-card { background: var(--cwr-panel); color: var(--cwr-text); padding: clamp(24px, 3vw, 36px); height: 100%; box-shadow: 0 10px 30px 0 rgba(0,0,0,0.5); transition: transform 250ms ease, box-shadow 250ms ease; } .cwr-card h3 { color: #FFFFFF; margin: 12px 0 8px; } .cwr-card p { color: var(--cwr-text); margin: 0; } .cwr-card-hover:hover { transform: translateY(-4px); box-shadow: 0 16px 48px 0 rgba(171,54,54,0.35); } /* ============================================================================ Text + spacing utilities (replaces uk-text-* / uk-margin-*) ============================================================================ */ .cwr-lead { font-size: 18px; line-height: 1.6; color: #E8E8E8; } .cwr-text-center { text-align: center; } @media (min-width: 820px) { .cwr-text-right-m { text-align: right; } } .cwr-text-small { font-size: 14px; } .cwr-text-meta { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cwr-muted); } .cwr-muted { color: var(--cwr-muted); } /* Legal / long-form text pages */ .cwr-prose h2 { font-size: clamp(26px, 3vw, 36px); margin: 36px 0 12px; } .cwr-prose h2:first-child { margin-top: 0; } .cwr-prose p { margin-bottom: 16px; max-width: 70ch; } .cwr-prose ul { margin: 0 0 16px; padding-left: 22px; } .cwr-prose li { margin-bottom: 6px; } .cwr-mt-s { margin-top: 12px; } .cwr-mt-m { margin-top: 28px; } .cwr-mt-l { margin-top: 48px; } .cwr-mb-l { margin-bottom: 48px; } .cwr-mb-m { margin-bottom: 28px; } /* ============================================================================ Scroll reveal (replaces uk-scrollspy "uk-animation-fade") Elements tagged .cwr-reveal fade + rise when they enter the viewport. theme.js adds .is-in. Falls back to visible if JS is off. ============================================================================ */ /* Only hide reveal elements when JS is available (the inline script adds the .js class before paint), so no-JS users always see content — no flash. */ .js .cwr-reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms ease, transform 700ms ease; } .js .cwr-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .cwr-reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================================ Lightbox (replaces uk-lightbox — before/after gallery) ============================================================================ */ .cwr-lb { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.92); padding: 24px; } .cwr-lb.is-open { display: flex; } .cwr-lb img { max-width: 92vw; max-height: 82vh; width: auto; height: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.7); } .cwr-lb__cap { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: #FFFFFF; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; } .cwr-lb__close, .cwr-lb__nav { position: absolute; top: 20px; right: 24px; width: 48px; height: 48px; background: transparent; border: 1px solid rgba(255,255,255,0.4); color: #FFFFFF; font-size: 26px; line-height: 1; cursor: pointer; } .cwr-lb__nav { top: 50%; transform: translateY(-50%); border: none; font-size: 44px; opacity: 0.7; } .cwr-lb__nav:hover { opacity: 1; } .cwr-lb__prev { left: 16px; right: auto; } .cwr-lb__next { right: 16px; } /* ============================================================================ Header / nav chrome (dark garage bar) ============================================================================ */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--nav-height); background: #000000; box-shadow: 0 2px 0 0 var(--cwr-red); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--cwr-content-max); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .brand:hover { text-decoration: none; } .brand__mark { display: inline-flex; flex-shrink: 0; } .brand__name { font-family: var(--font-display); font-size: 26px; letter-spacing: 0.04em; color: #FFFFFF; line-height: 1; } .brand:hover .brand__name { color: var(--cwr-red-hot); } /* Logo image (transparent PNG: white wordmark + red swoosh, sits on the black bar) */ .brand__logo { height: 92px; width: auto; display: block; } @media (max-width: 959px) { .brand__logo { height: 62px; } } .nav-desktop { display: none; } @media (min-width: 960px) { .nav-desktop { display: flex; align-items: center; } } .nav-desktop ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 4px; } /* Kill the global `li { margin-bottom: 6px }` here — it pushed the nav links up off-center, making the phone button look low next to them. */ .nav-desktop li { margin-bottom: 0; } .nav-desktop a { display: block; font-family: var(--font-display); font-size: 20px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cwr-text); padding: 8px 16px; transition: color 150ms ease; } .nav-desktop a:hover { color: var(--cwr-red); text-decoration: none; } .nav-desktop a[aria-current="page"] { color: #FFFFFF; } /* Higher specificity (a.nav-desktop__phone) so it wins over `.nav-desktop a`. Asymmetric padding (less top, more bottom) optically centers Bebas Neue, whose glyphs sit low in the line box. */ .nav-desktop a.nav-desktop__phone { display: inline-flex; align-items: center; margin-left: 20px; padding: 9px 18px 7px; background: var(--cwr-red); color: #FFFFFF; font-family: var(--font-display); font-size: 20px; letter-spacing: 0.06em; line-height: 1; text-decoration: none; white-space: nowrap; transition: background 150ms ease; } .nav-desktop a.nav-desktop__phone:hover { background: var(--cwr-red-hot); color: #FFFFFF; text-decoration: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: transparent; border: 1px solid var(--cwr-line); color: #FFFFFF; cursor: pointer; } .nav-toggle:hover { border-color: var(--cwr-red); } .nav-toggle svg { width: 24px; height: 24px; } @media (min-width: 960px) { .nav-toggle { display: none; } } /* Mobile drawer (native popover, JS fallback in footer.php) */ .nav-mobile { position: fixed; inset: 0 0 0 auto; width: min(360px, 90vw); height: 100vh; margin: 0; border: none; padding: 80px 28px 28px; background: #000000; border-left: 1px solid var(--cwr-line); color: var(--cwr-text); /* Smooth slide-in from the right + fade, using native popover transitions (transition-behavior: allow-discrete animates display/overlay). */ transform: translateX(100%); opacity: 0; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease, overlay 300ms allow-discrete, display 300ms allow-discrete; } .nav-mobile:popover-open { transform: translateX(0); opacity: 1; } @starting-style { .nav-mobile:popover-open { transform: translateX(100%); opacity: 0; } } .nav-mobile::backdrop { background: rgba(0,0,0,0); transition: background 300ms ease, overlay 300ms allow-discrete, display 300ms allow-discrete; } .nav-mobile:popover-open::backdrop { background: rgba(0,0,0,0.6); } @starting-style { .nav-mobile:popover-open::backdrop { background: rgba(0,0,0,0); } } @media (prefers-reduced-motion: reduce) { .nav-mobile { transition: none; } @starting-style { .nav-mobile:popover-open { transform: none; opacity: 1; } } } .nav-mobile__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; background: transparent; border: 1px solid var(--cwr-line); color: #FFFFFF; font-size: 1.6rem; line-height: 1; cursor: pointer; } .nav-mobile__close:hover { border-color: var(--cwr-red); } .nav-mobile ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .nav-mobile a { display: block; padding: 14px 12px; font-family: var(--font-display); font-size: 24px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cwr-text); } .nav-mobile a:hover { color: var(--cwr-red); text-decoration: none; } .nav-mobile a[aria-current="page"] { color: #FFFFFF; } /* Phone CTA in the mobile drawer */ .nav-mobile__phone { display: flex; align-items: center; justify-content: center; margin-top: 24px; padding: 16px 18px; background: var(--cwr-red); color: #FFFFFF !important; font-family: var(--font-display); font-size: 26px; letter-spacing: 0.06em; line-height: 1; text-align: center; text-decoration: none; transition: background 150ms ease; } .nav-mobile__phone:hover { background: var(--cwr-red-hot); color: #FFFFFF !important; text-decoration: none; } /* Social icon row in the mobile drawer */ .nav-mobile__social { display: flex; gap: 14px; align-items: center; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--cwr-line); } .nav-mobile__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--cwr-line); color: #FFFFFF; transition: border-color 150ms ease, background 150ms ease; } .nav-mobile__social a:hover { border-color: var(--cwr-red); background: var(--cwr-red); } .nav-mobile__social svg { width: 20px; height: 20px; fill: currentColor; display: block; } /* ============================================================================ Form (contact) — dark inputs, red focus ============================================================================ */ .cwr-form { display: grid; gap: 18px; } .cwr-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: #000000; } .cwr-form input, .cwr-form select, .cwr-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #d0d0d0; background: #FFFFFF; color: #111111; border-radius: 0; } .cwr-form input:focus, .cwr-form select:focus, .cwr-form textarea:focus { outline: none; border-color: var(--cwr-red); box-shadow: 0 0 0 3px rgba(171,54,54,0.25); } .cwr-form textarea { min-height: 130px; resize: vertical; } .cwr-form .hp { position: absolute; left: -10000px; opacity: 0; pointer-events: none; } .cwr-form-status { padding: 12px 14px; display: none; font-size: 14px; } .cwr-form-status[data-state="ok"] { display: block; background: rgba(40,167,69,0.15); color: #1c7a36; border: 1px solid rgba(40,167,69,0.4); } .cwr-form-status[data-state="error"] { display: block; background: rgba(171,54,54,0.12); color: #862727; border: 1px solid rgba(171,54,54,0.4); } /* ============================================================================ Breadcrumbs (Spark helper) — kept off by default; styled in case enabled ============================================================================ */ .breadcrumbs { font-size: 13px; color: var(--cwr-muted); margin: 0; } .breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; } .breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--cwr-red); opacity: 0.7; } .breadcrumbs a { color: var(--cwr-muted); } .breadcrumbs a:hover { color: var(--cwr-red-hot); } .breadcrumbs [aria-current="page"] { color: #FFFFFF; } /* ============================================================================ ==== LINGO COMPONENT LIBRARY ==== Carried over from cwr-custom-css.css (the styling source of truth). uk-* selectors translated to Spark-native equivalents; visuals unchanged. ============================================================================ */ /* ---- Icon system ---- */ .lingo-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; line-height: 1; } .lingo-icon--service { width: 56px; height: 56px; } .lingo-icon--process { width: 64px; height: 64px; } .lingo-icon--trust { width: 48px; height: 48px; } .lingo-icon--footer { width: 20px; height: 20px; } .lingo-icon--inline { width: 20px; height: 20px; } /* ---- Eyebrow + rule primitives ---- */ .lingo-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cwr-red); margin: 0 0 16px; } .lingo-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--cwr-red); } .lingo-eyebrow--center { margin-left: auto; margin-right: auto; } .lingo-rule { display: block; width: 56px; height: 3px; background: var(--cwr-red); border: 0; margin: 24px 0; } .lingo-rule--center { margin-left: auto; margin-right: auto; } /* ---- Bento hero ---- */ #hero { padding-top: 16px; padding-bottom: 16px; } @media (min-width: 960px) { #hero { padding-top: 24px; padding-bottom: 24px; } } /* Hero bento goes near-full-width with side gutters that match the top gap (16px mobile / 24px desktop) instead of the 1600px cap, which left huge empty rails on wide screens. */ #hero > .cwr-container--expand { max-width: 100%; padding-inline: 16px; } @media (min-width: 960px) { #hero > .cwr-container--expand { padding-inline: 24px; } } .lingo-bento-hero { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 960px) { .lingo-bento-hero { grid-template-columns: 1.15fr 0.85fr; grid-template-rows: auto auto; grid-template-areas: "lead small-a" "lead small-b"; gap: 16px; min-height: 640px; } .lingo-bento-hero__lead { grid-area: lead; min-height: 640px; } .lingo-bento-hero__small-a { grid-area: small-a; } .lingo-bento-hero__small-b { grid-area: small-b; } } .lingo-bento-tile { position: relative; overflow: hidden; background: var(--cwr-ink); isolation: isolate; } .lingo-bento-tile img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; transition: transform 0.6s ease; } .lingo-bento-tile:hover img { transform: scale(1.04); } .lingo-bento-tile__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.85) 100%); z-index: 1; } .lingo-bento-tile__copy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(20px, 4vw, 56px); color: #FFFFFF; } .lingo-bento-tile__copy * { color: #FFFFFF; } .lingo-bento-tile__copy p { color: #E8E8E8; } .lingo-bento-tile__copy h1 { color: #FFFFFF; font-size: clamp(40px, 7vw, 96px); line-height: 0.95; margin: 0; } .lingo-bento-tile__tag { display: inline-block; background: var(--cwr-red); color: #FFFFFF; padding: 4px 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; align-self: flex-start; margin-bottom: 22px; } .lingo-bento-hero__lead .lingo-bento-tile__copy .cwr-lead { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; margin-top: 16px; max-width: 56ch; } @media (max-width: 959px) { .lingo-bento-tile { display: flex; flex-direction: column; } .lingo-bento-tile img { position: relative; min-height: 240px; height: auto; } .lingo-bento-tile__shade { display: none; } .lingo-bento-tile__copy { position: relative; inset: auto; background: var(--cwr-ink); padding: 20px 22px 28px; } .lingo-bento-hero__lead { min-height: 0; } .lingo-bento-tile__copy h1 { font-size: clamp(36px, 9vw, 56px); } } /* ---- Marquee ticker ---- */ #ticker { padding: 0; } .lingo-marquee { overflow: hidden; background: var(--cwr-ink); border-top: 1px solid var(--cwr-red); border-bottom: 1px solid var(--cwr-red); padding: 22px 0; margin: 0; } .lingo-marquee__track { display: flex; gap: 48px; width: max-content; animation: lingo-marquee-scroll 38s linear infinite; font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 48px); letter-spacing: 0.04em; color: #FFFFFF; text-transform: uppercase; white-space: nowrap; } .lingo-marquee__track > span { display: inline-flex; align-items: center; gap: 48px; } .lingo-marquee__sep { color: var(--cwr-red); font-family: var(--font-display); font-size: 1em; flex-shrink: 0; display: inline-block; } @keyframes lingo-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .lingo-marquee__track { animation: none; } } /* ---- Diagonal compare split ---- */ .lingo-compare { display: grid; grid-template-columns: 1fr; gap: 0; position: relative; background: var(--cwr-ink); } @media (min-width: 768px) { .lingo-compare { grid-template-columns: 1fr 1fr; } } .lingo-compare__pane { position: relative; overflow: hidden; min-height: 480px; isolation: isolate; } .lingo-compare__pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: grayscale(20%); } .lingo-compare__pane::after { content: ""; position: absolute; inset: 0; z-index: 1; } .lingo-compare__pane--bad::after { background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(20,20,20,0.85) 100%); } .lingo-compare__pane--good::after { background: linear-gradient(135deg, rgba(171,54,54,0.45) 0%, rgba(0,0,0,0.85) 100%); } .lingo-compare__pane > .lingo-compare__copy { position: relative; z-index: 2; padding: clamp(28px, 5vw, 64px); color: #FFFFFF; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; } .lingo-compare__label { display: inline-block; align-self: flex-start; font-family: var(--font-display); font-size: clamp(22px, 2.8vw, 38px); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; padding: 8px 18px 6px; margin: 0 0 20px; transform: rotate(-3deg); transform-origin: left center; box-shadow: 0 6px 18px rgba(0,0,0,0.35); } .lingo-compare__pane--bad .lingo-compare__label { color: #FFFFFF; background: transparent; border: 3px solid var(--cwr-red); } .lingo-compare__pane--good .lingo-compare__label { color: #FFFFFF; background: var(--cwr-red); border: 3px solid var(--cwr-red); } .lingo-compare__copy h3 { color: #FFFFFF; font-size: clamp(28px, 4.5vw, 56px); line-height: 1; margin: 0 0 16px; } .lingo-compare__copy p { color: #E8E8E8; } /* ---- Numeral display ---- */ .lingo-numeral { font-family: var(--font-display); font-size: clamp(140px, 22vw, 320px); line-height: 0.85; color: transparent; -webkit-text-stroke: 2px var(--cwr-red); letter-spacing: -0.02em; margin: 0; user-select: none; } .lingo-numeral--solid { color: var(--cwr-red); -webkit-text-stroke: 0; } .lingo-numeral--inline { font-size: clamp(80px, 12vw, 160px); } /* ---- Homepage service tile grid ---- */ .lingo-tilegrid { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 768px) { .lingo-tilegrid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 220px; } .lingo-tilegrid__feature { grid-column: span 3; grid-row: span 2; } .lingo-tilegrid__half { grid-column: span 3; } .lingo-tilegrid__third { grid-column: span 2; } } .lingo-tile { position: relative; display: block; overflow: hidden; isolation: isolate; background: var(--cwr-panel); min-height: 220px; text-decoration: none; color: #FFFFFF; transition: transform 0.3s ease; } .lingo-tile:hover { transform: translateY(-3px); } .lingo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.6s ease, filter 0.6s ease; filter: brightness(0.65) saturate(1.1); } .lingo-tile:hover img { transform: scale(1.06); filter: brightness(0.9) saturate(1.2); } .lingo-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 100%); } .lingo-tile__copy { position: absolute; inset: 0; z-index: 2; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; justify-content: space-between; color: #FFFFFF; } .lingo-tile__num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em; color: var(--cwr-red-hot); } .lingo-tile h3 { color: #FFFFFF; font-size: clamp(22px, 2.4vw, 32px); margin: 0 0 6px; line-height: 1; } .lingo-tile p { margin: 0; font-size: 14px; color: #C8CACE; max-width: 36ch; } /* ---- Vertical timeline (homepage process) ---- */ .lingo-timeline { list-style: none; margin: 0; padding: 0; position: relative; } .lingo-timeline::before { content: ""; position: absolute; left: 32px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, var(--cwr-red) 0%, var(--cwr-red) 60%, transparent 100%); } .lingo-timeline__step { position: relative; padding: 0 0 36px 88px; } .lingo-timeline__step:last-child { padding-bottom: 0; } .lingo-timeline__num { position: absolute; left: 0; top: 0; width: 64px; height: 64px; background: var(--cwr-ink); border: 2px solid var(--cwr-red); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 30px; color: #FFFFFF; } .lingo-timeline__step h3 { margin: 6px 0 6px; color: #FFFFFF; font-size: clamp(22px, 2.4vw, 30px); line-height: 1; } .lingo-timeline__step p { margin: 0; color: #B8BABF; } /* ---- Review wall ---- */ .lingo-reviews { display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 640px) { .lingo-reviews { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .lingo-reviews { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(120px, auto); } } .lingo-review { background: var(--cwr-panel); border-left: 3px solid var(--cwr-red); padding: clamp(20px, 2.4vw, 32px); position: relative; display: flex; flex-direction: column; justify-content: space-between; color: #D8D8D8; } .lingo-review__quote { font-family: var(--font-body); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55; margin: 0; color: #E8E8E8; } .lingo-review__quote::before { content: "\201C"; display: block; font-family: var(--font-display); font-size: 60px; line-height: 0.6; color: var(--cwr-red); margin-bottom: 8px; } .lingo-review__meta { margin-top: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; } .lingo-review__name { color: #FFFFFF; text-transform: uppercase; font-weight: 600; } .lingo-review__tag { color: var(--cwr-red-hot); margin-top: 4px; } @media (min-width: 1024px) { .lingo-review--lg { grid-column: span 6; grid-row: span 2; } .lingo-review--md { grid-column: span 4; grid-row: span 2; } .lingo-review--sm { grid-column: span 3; grid-row: span 2; } .lingo-review--wide { grid-column: span 8; } .lingo-review--narrow { grid-column: span 4; } .lingo-review--lg .lingo-review__quote { font-size: 22px; line-height: 1.4; } } /* ---- Service block (services page) ---- */ .lingo-service { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; grid-template-columns: 1fr; } @media (min-width: 960px) { .lingo-service { grid-template-columns: 1fr 1fr; } .lingo-service--right .lingo-service__media { order: 2; } } .lingo-service__media { position: relative; } .lingo-service__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; position: relative; z-index: 1; } .lingo-service__media .lingo-numeral { position: absolute; top: -42px; left: -22px; z-index: 3; pointer-events: none; -webkit-text-stroke: 3px var(--cwr-red); color: transparent; text-shadow: 0 6px 28px rgba(0,0,0,0.55); } .lingo-service--right .lingo-service__media .lingo-numeral { left: auto; right: -22px; } @media (max-width: 959px) { .lingo-service__media .lingo-numeral { top: -28px; left: 8px; -webkit-text-stroke-width: 2px; } .lingo-service--right .lingo-service__media .lingo-numeral { left: 8px; right: auto; } } .lingo-service__copy h2 { margin-top: 4px; font-size: clamp(32px, 4vw, 52px); line-height: 1; } .lingo-service__turnaround { margin: 14px 0 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #9a9da2; } .lingo-service__turnaround b { color: var(--cwr-red-hot); font-weight: 600; } .lingo-service__copy ul { list-style: none; margin: 24px 0 0; padding: 0; } .lingo-service__copy ul li { padding-left: 28px; position: relative; margin-bottom: 10px; color: #C8CACE; } .lingo-service__copy ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 14px; height: 2px; background: var(--cwr-red); } /* ---- Services page nav strip ---- */ .lingo-svc-nav { background: #000000; border-bottom: 1px solid var(--cwr-line); } .lingo-svc-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; } @media (min-width: 640px) { .lingo-svc-nav ul { grid-template-columns: repeat(5, 1fr); } } .lingo-svc-nav li { margin: 0; } .lingo-svc-nav a { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 22px 18px; color: #FFFFFF; text-decoration: none; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 1px solid var(--cwr-line); border-top: 3px solid transparent; transition: background 0.2s ease, border-top-color 0.2s ease; } @media (min-width: 640px) { .lingo-svc-nav li:not(:last-child) a { border-right: 1px solid var(--cwr-line); border-bottom: none; } } .lingo-svc-nav__num { font-family: var(--font-display); font-size: 28px; color: var(--cwr-red-hot); line-height: 1; } .lingo-svc-nav a:hover { background: rgba(171,54,54,0.12); border-top-color: var(--cwr-red); color: #FFFFFF; } .lingo-svc-nav a:hover .lingo-svc-nav__num { color: #FFFFFF; } /* Mobile = full-width bar spanning all columns, below the 01-05 row. Divider goes on the
  • so the 's 3px transparent top border (hover accent) survives. */ .lingo-svc-nav__full { grid-column: 1 / -1; } @media (min-width: 640px) { .lingo-svc-nav__full { border-top: 1px solid var(--cwr-line); } } /* ---- Shop fact cards (contact) ---- */ .lingo-fact { background: var(--cwr-panel); border-top: 2px solid var(--cwr-red); padding: clamp(20px, 2vw, 28px); display: flex; align-items: flex-start; gap: 16px; height: 100%; } .lingo-fact__icon { flex-shrink: 0; width: 32px; height: 32px; } .lingo-fact__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cwr-red-hot); margin: 0 0 6px; } .lingo-fact__value { margin: 0; color: #FFFFFF; font-size: 17px; line-height: 1.4; } .lingo-fact__value a { color: #FFFFFF; text-decoration: none; } .lingo-fact__value a:hover { color: var(--cwr-red-hot); } /* ---- Philosophy callout (about) ---- */ .lingo-callout { position: relative; isolation: isolate; padding: clamp(48px, 8vw, 120px) clamp(24px, 4vw, 80px); text-align: center; color: #FFFFFF; background: var(--cwr-ink); overflow: hidden; } .lingo-callout__quote { font-family: var(--font-display); font-size: clamp(36px, 6vw, 80px); line-height: 1; letter-spacing: 0.01em; margin: 0; color: #FFFFFF; } .lingo-callout__quote em { color: #FFFFFF; font-style: normal; } .lingo-callout p, .lingo-callout .cwr-lead { color: #FFFFFF; } /* ---- Form card (contact) ---- */ .lingo-form-card { background: #F4F4F4; border-top: 3px solid var(--cwr-red); padding: clamp(28px, 4vw, 48px); } .lingo-form-card h2, .lingo-form-card h3 { color: #000000; } .lingo-form-card p { color: #222222; } .lingo-form-card .lingo-eyebrow { color: var(--cwr-red); } .lingo-form-card .lingo-eyebrow::before { background: var(--cwr-red); } /* ---- Black content footer ---- */ .lingo-footer-black { background-color: #000000; } .lingo-footer-black, .lingo-footer-black p, .lingo-footer-black li, .lingo-footer-black span { color: #E8E8E8; } .lingo-footer-black h1, .lingo-footer-black h2, .lingo-footer-black h3, .lingo-footer-black h4 { color: #FFFFFF; } .lingo-footer-black a { color: #FFFFFF; text-decoration: none; } .lingo-footer-black a:hover { color: var(--cwr-red-hot); } .lingo-footer-black hr { border: 0; border-top: 1px solid rgba(255,255,255,0.18); } .lingo-footer-black .lingo-footer-list { list-style: none; padding: 0; margin: 0; } .lingo-footer-black .lingo-footer-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .lingo-footer-black p.lingo-agency, .lingo-footer-black p.lingo-agency * { color: #B8BABF; } .lingo-footer-black p.lingo-agency a { color: #FFFFFF; } .lingo-footer-black p.lingo-agency a:hover { color: var(--cwr-red-hot); } .lingo-footer-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); } @media (min-width: 560px) { .lingo-footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .lingo-footer-grid { grid-template-columns: repeat(4, 1fr); } } .lingo-footer-legal { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: center; } @media (min-width: 760px) { .lingo-footer-legal { grid-template-columns: 1fr 1fr; } } /* ---- FAQ accordion (services) — native
    ---- */ .lingo-faq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .lingo-faq__item { background: var(--cwr-panel); border-left: 3px solid var(--cwr-line); transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .lingo-faq__item:hover { border-left-color: var(--cwr-red); background: #222222; } .lingo-faq__item[open] { border-left-color: var(--cwr-red); background: #1F1F1F; } .lingo-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px clamp(20px, 3vw, 32px); margin: 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 22px); letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; } .lingo-faq__q::-webkit-details-marker { display: none; } .lingo-faq__q::after { content: ""; flex-shrink: 0; width: 36px; height: 36px; border: 2px solid var(--cwr-red); border-radius: 50%; background-image: linear-gradient(var(--cwr-red), var(--cwr-red)), linear-gradient(var(--cwr-red), var(--cwr-red)); background-size: 14px 2px, 2px 14px; background-position: center, center; background-repeat: no-repeat; transition: transform 0.3s ease, background-color 0.3s ease; } .lingo-faq__item[open] .lingo-faq__q::after { transform: rotate(135deg); background-color: var(--cwr-red); background-image: linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(#FFFFFF, #FFFFFF); } .lingo-faq__a { margin: 0; padding: 0 clamp(20px, 3vw, 32px) 24px; border-top: 1px solid var(--cwr-line); padding-top: 18px; } .lingo-faq__a p { margin: 0; color: #C8CACE; line-height: 1.6; font-size: 16px; } /* ---- Stacked image (reserved; about magazine overlap) ---- */ .lingo-stack { position: relative; padding: 0 0 56px 0; } .lingo-stack__back { width: 100%; display: block; } .lingo-stack__front { position: absolute; right: -8px; bottom: 0; width: 60%; border: 6px solid var(--cwr-ink); box-shadow: 0 16px 48px rgba(0,0,0,0.6); } .lingo-stack__year { position: absolute; top: -36px; left: -12px; font-family: var(--font-display); font-size: clamp(80px, 12vw, 200px); line-height: 0.8; color: var(--cwr-red); margin: 0; z-index: 0; } @media (max-width: 767px) { .lingo-stack__front { position: static; width: 80%; margin: -32px auto 0; display: block; } .lingo-stack__year { position: static; margin-bottom: 12px; font-size: 80px; } } /* Powered by Spark credit mark - mandatory. Fixed brand orange (#f15924); inline-aligned so the surrounding word spacing is preserved. */ .spark-mark { display: inline-block; width: 1.6em; height: 1.6em; margin-left: 0.15em; vertical-align: -0.5em; }