/* ============================================================ Softgurl — light theme only. Palette is the official brand book. Contrast rules that shape everything below: Deep Femme #B01560 6.4:1 on Soft Blush -> the ink. Carries text. Lavender Muse#9F61FD 3.8:1 on white -> large/bold text only. Blush Pop #FF579D 2.96:1 -> DECORATIVE ONLY. Never text, never behind white. Soft Cloud #ABE3FF light tint -> dark ink only. CTA gradient is Deep Femme -> Lavender Muse: white passes on both. ============================================================ */ :root { color-scheme: light; /* Official brand book */ --blush-pop: #ff579d; --lavender-muse: #9f61fd; --soft-cloud: #abe3ff; --deep-femme: #b01560; --soft-blush: #fff7fb; /* Surfaces */ --bg: var(--soft-blush); --surface: #ffffff; --surface-2: #fdf2f8; --surface-cloud: #f2fafe; --line: rgba(43, 27, 52, 0.09); --line-strong: rgba(43, 27, 52, 0.15); --glass: rgba(255, 255, 255, 0.72); --glass-edge: rgba(255, 255, 255, 0.7); /* Themed surface set. Panels and cards are translucent, so every one of these has to flip with the theme — hence tokens rather than literals. */ --panel-1: rgba(255, 255, 255, 0.86); --panel-2: rgba(255, 255, 255, 0.7); --card-1: rgba(255, 255, 255, 0.97); --card-2: rgba(255, 255, 255, 0.85); --edge: rgba(255, 255, 255, 0.8); --edge-hi: rgba(255, 255, 255, 0.95); --surface-soft: rgba(255, 255, 255, 0.45); --surface-soft-strong: rgba(255, 255, 255, 0.86); --solid: rgba(255, 255, 255, 0.94); --grid-line: rgba(176, 21, 96, 0.07); --cloud-edge: rgba(171, 227, 255, 0.9); /* Ink */ --text: #241531; --muted: #5f4f6c; --accent-ink: var(--deep-femme); --price-ink: #6d28d9; --ring: #b01560; /* Gradients — text-safe vs decorative */ --grad-cta: linear-gradient(100deg, var(--deep-femme), var(--lavender-muse)); --grad-decor: linear-gradient(120deg, var(--blush-pop), var(--lavender-muse)); --grad-cloud: linear-gradient(120deg, var(--soft-cloud), var(--lavender-muse)); /* Type */ --display: "Lilita One", "Trebuchet MS", system-ui, sans-serif; /* Agrandir is the brand's secondary face but is a licensed Pangram Pangram font with no free web source. If you self-host it, the @font-face block at the bottom of this file is ready to uncomment and it takes over automatically. Outfit is the loaded stand-in. */ --body: "Agrandir", "Outfit", system-ui, -apple-system, Segoe UI, sans-serif; /* Shape */ --r-xl: 30px; --r-lg: 22px; --r-md: 14px; --r-sm: 10px; /* Depth ramp — layered, warm, never neutral black. This is what sells the "3D app" feel: each elevation adds a tighter contact shadow plus a wider, softer ambient one. */ --d1: 0 1px 2px rgba(88, 24, 69, 0.05), 0 3px 8px rgba(88, 24, 69, 0.04); --d2: 0 1px 2px rgba(88, 24, 69, 0.06), 0 8px 20px rgba(88, 24, 69, 0.07), 0 16px 40px rgba(88, 24, 69, 0.05); --d3: 0 2px 4px rgba(88, 24, 69, 0.07), 0 14px 32px rgba(88, 24, 69, 0.1), 0 32px 72px rgba(88, 24, 69, 0.08); --d4: 0 2px 6px rgba(88, 24, 69, 0.08), 0 24px 54px rgba(88, 24, 69, 0.13), 0 56px 120px rgba(88, 24, 69, 0.11); --header-space: 108px; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); } /* ── Dark theme ─────────────────────────────────────────────── Applied only when the user picks it — `data-theme="dark"` on . Light stays the default; there is deliberately no prefers-color-scheme rule, so the brand ships light unless asked. Every value below is contrast-checked against its own surface. One nice consequence of a dark ground: Blush Pop finally clears AA (5.6:1 on the card), so the signature colour can carry text here even though it never can on white. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #151020; --surface: #221936; --surface-2: #2b2142; --surface-cloud: #1c2740; --line: rgba(255, 255, 255, 0.1); --line-strong: rgba(255, 255, 255, 0.17); --text: #f4ecfa; /* 14.5:1 on card */ --muted: #c3b2d2; /* 8.4:1 on card */ --accent-ink: #ff8fbf; /* 7.9:1 on card */ --price-ink: #c7a6ff; /* 8.2:1 on card */ --ring: #ff8fbf; --glass: rgba(34, 25, 54, 0.72); --glass-edge: rgba(255, 255, 255, 0.1); --panel-1: rgba(34, 25, 54, 0.86); --panel-2: rgba(26, 19, 42, 0.72); --card-1: rgba(43, 33, 66, 0.95); --card-2: rgba(34, 25, 54, 0.86); --edge: rgba(255, 255, 255, 0.1); --edge-hi: rgba(255, 255, 255, 0.16); --surface-soft: rgba(255, 255, 255, 0.04); --surface-soft-strong: rgba(43, 33, 66, 0.9); --solid: rgba(34, 25, 54, 0.96); --grid-line: rgba(255, 255, 255, 0.05); --cloud-edge: rgba(171, 227, 255, 0.28); /* On dark, shadows go pure black and deepen — a warm-tinted shadow over a dark ground just reads as mud. */ --d1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.3); --d2: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.3); --d3: 0 2px 4px rgba(0, 0, 0, 0.5), 0 14px 32px rgba(0, 0, 0, 0.45), 0 32px 72px rgba(0, 0, 0, 0.35); --d4: 0 2px 6px rgba(0, 0, 0, 0.55), 0 24px 54px rgba(0, 0, 0, 0.5), 0 56px 120px rgba(0, 0, 0, 0.42); } /* The orbs glow rather than tint once the ground is dark. */ :root[data-theme="dark"] .orb-1 { opacity: 0.24; } :root[data-theme="dark"] .orb-2 { opacity: 0.22; } :root[data-theme="dark"] .orb-3 { opacity: 0.16; } :root[data-theme="dark"] .orb-4 { opacity: 0.18; } /* ── Base ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { /* Root perspective gives every scroll-driven transform real depth instead of a flat slide. */ scroll-padding-top: var(--header-space); } body { margin: 0; font-family: var(--body); font-weight: 400; line-height: 1.62; color: var(--text); background-color: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; } .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; } .skip-link { position: absolute; top: -100px; left: 12px; z-index: 100; padding: 12px 18px; border-radius: var(--r-md); background: var(--surface); color: var(--text); font-weight: 600; text-decoration: none; box-shadow: var(--d3); } .skip-link:focus-visible { top: 12px; } :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: var(--r-sm); } .anchor { display: block; scroll-margin-top: var(--header-space); } /* ── Parallax scene ─────────────────────────────────────────── Fixed, painted once, moved only via translate3d from a single rAF loop. No background-attachment (expensive on mobile). */ .scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .orb { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; } .orb-1 { width: 44vmax; height: 44vmax; top: -12vmax; left: -14vmax; background: var(--blush-pop); opacity: 0.19; } .orb-2 { width: 40vmax; height: 40vmax; top: 28vmax; right: -16vmax; background: var(--lavender-muse); opacity: 0.15; } .orb-3 { width: 36vmax; height: 36vmax; top: 74vmax; left: -10vmax; background: var(--soft-cloud); opacity: 0.34; } .orb-4 { width: 30vmax; height: 30vmax; top: 116vmax; right: -8vmax; background: var(--blush-pop); opacity: 0.13; } /* A fine grid that drifts slower than everything else. Reads as floor depth behind the floating cards. */ .grid-plane { position: absolute; inset: -20% -20% -20% -20%; background-image: linear-gradient( var(--grid-line) 1px, transparent 1px ), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient( ellipse 70% 55% at 50% 40%, #000 30%, transparent 75% ); mask-image: radial-gradient( ellipse 70% 55% at 50% 40%, #000 30%, transparent 75% ); will-change: transform; } /* ── Shell ────────────────────────────────────────────────── */ .site-header, main, .site-footer { width: min(1120px, 92vw); margin-inline: auto; } .site-header { position: sticky; top: 12px; z-index: 20; margin-top: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: var(--d2); display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; } .brand { display: block; line-height: 0; border-radius: var(--r-sm); } .brand-logo { width: 148px; height: auto; display: block; } .top-nav { display: flex; justify-content: center; gap: 4px; } .top-nav a { padding: 9px 13px; border-radius: 999px; text-decoration: none; color: var(--text); font-weight: 500; font-size: 0.9rem; white-space: nowrap; } .nav-toggle { display: none; } /* Hidden without JS — an inert control is worse than no control. */ .theme-toggle { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--solid); color: var(--text); cursor: pointer; } .js .theme-toggle { display: grid; } /* Show the action, not the state: a moon to go dark, a sun to come back. Every rule below is keyed on `.theme-toggle .icon-*` so they all share one specificity and the dark overrides simply win by being longer. A bare `.icon-sun` (0,1,0) loses to `.theme-toggle .icon` (0,2,0) and both icons render stacked. */ .theme-toggle .icon { display: none; width: 19px; height: 19px; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } .header-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0; color: #fff; font-family: inherit; font-size: 0.88rem; font-weight: 700; text-decoration: none; white-space: nowrap; gap: 0.3em; background-image: var(--grad-cta); box-shadow: var(--d2); } /* ── Sections ─────────────────────────────────────────────── */ main > section { margin: 56px 0 96px; scroll-margin-top: var(--header-space); } .hero, .problem, .shift, .plan, .order, .coverage, .vision, .contact { padding: clamp(24px, 4.4vw, 52px); border-radius: var(--r-xl); } /* Floating glass panels — the core of the "3D app" surface language. */ .hero, .problem, .shift, .plan, .order, .coverage, .vision, .contact { position: relative; border: 1px solid var(--edge); background: linear-gradient(160deg, var(--panel-1), var(--panel-2)); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--d3); } .hero { box-shadow: var(--d4); } /* A soft top highlight, like light catching the leading edge of a panel. */ .hero::before, .problem::before, .shift::before, .plan::before, .order::before, .coverage::before, .vision::before, .contact::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 160deg, var(--edge-hi), rgba(255, 255, 255, 0) 40% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } #packages { padding-inline: clamp(24px, 4.4vw, 52px); } /* ── Type ─────────────────────────────────────────────────── */ h1, h2, h3 { margin: 0; line-height: 1.12; text-wrap: balance; } h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0.2px; } h1 { margin-top: 14px; max-width: 17ch; font-size: clamp(2.2rem, 6.2vw, 4.2rem); } h2 { margin-top: 12px; font-size: clamp(1.75rem, 4vw, 2.9rem); } h3 { font-size: 1.03rem; font-weight: 600; letter-spacing: -0.005em; } p { margin: 0; } .eyebrow { display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem; font-weight: 700; color: var(--accent-ink); } .section-head { margin-bottom: 30px; } .section-lead { margin-top: 15px; max-width: 62ch; color: var(--muted); font-size: 1rem; } .hero-copy { margin-top: 18px; max-width: 56ch; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.12rem); } /* ── Buttons ──────────────────────────────────────────────── */ .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 14px 26px 15px; border-radius: 999px; font-family: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; } .btn-primary { position: relative; color: #fff; border: 1px solid transparent; background-image: var(--grad-cta); box-shadow: var(--d2), inset 0 1px 0 rgba(255, 255, 255, 0.28); } .btn-secondary { color: var(--text); border: 1px solid var(--line-strong); background: var(--surface-soft-strong); box-shadow: var(--d1); } .btn-block { display: flex; width: 100%; margin-top: 16px; } /* ── Hero trust row ───────────────────────────────────────── */ .trust-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 30px 0 0; padding: 0; color: var(--muted); font-size: 0.86rem; font-weight: 500; } .trust-row li { display: flex; align-items: center; gap: 9px; } .trust-row li::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 999px; background-image: var(--grad-decor); } /* ── Cards ────────────────────────────────────────────────── */ .problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .problem-card, .plan-card, .order-steps > li, .coverage-card, .contact-primary, .contact-social { padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--edge); background: linear-gradient(160deg, var(--card-1), var(--card-2)); box-shadow: var(--d1); } .problem-card h3, .plan-card h3 { margin-bottom: 9px; } .problem-card p, .plan-card p { color: var(--muted); font-size: 0.93rem; } .insight { position: relative; margin: 30px 0 0; padding: 28px 28px 28px 32px; border-radius: var(--r-lg); background: linear-gradient( 120deg, var(--surface-2), var(--surface-cloud) 120% ); overflow: hidden; } .insight::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background-image: var(--grad-decor); } .insight p { max-width: 60ch; font-size: clamp(1.04rem, 1.9vw, 1.28rem); line-height: 1.48; } .insight em { font-style: normal; font-weight: 700; color: var(--accent-ink); } .insight-tag { margin-top: 13px; font-weight: 700; color: var(--accent-ink); } /* ── The shift ────────────────────────────────────────────── */ .shift-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .flow { padding: 24px; border-radius: var(--r-lg); } .flow-old { border: 1px dashed var(--line-strong); background: var(--surface-soft); } .flow-new { position: relative; border: 1px solid transparent; background-image: linear-gradient( 160deg, var(--card-1), var(--card-2) ), var(--grad-decor); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: var(--d3); } .flow h3 { margin-bottom: 18px; } .flow-old h3 { color: var(--muted); } .flow-steps { list-style: none; counter-reset: flow; margin: 0; padding: 0; display: grid; gap: 11px; } .flow-steps li { counter-increment: flow; display: flex; align-items: center; gap: 13px; font-size: 0.95rem; font-weight: 500; } .flow-steps li::before { content: counter(flow); flex: none; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; } .flow-old .flow-steps li { color: var(--muted); } .flow-old .flow-steps li::before { border: 1px solid var(--line-strong); color: var(--muted); } .flow-new .flow-steps li::before { color: #fff; background-image: var(--grad-cta); box-shadow: var(--d1); } .flow-note { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); font-size: 0.86rem; font-weight: 600; color: var(--muted); } .flow-new .flow-note { color: var(--accent-ink); } /* ── Plan ─────────────────────────────────────────────────── */ .pill-live { padding: 4px 11px 5px; border-radius: 999px; color: #fff; background-image: var(--grad-cta); font-size: 0.66rem; letter-spacing: 0.08em; } .plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .plan-cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; } .plan-cta .btn { margin-top: 0; } .plan-cta-note { max-width: 40ch; color: var(--muted); font-size: 0.88rem; } /* ── Packages ─────────────────────────────────────────────── */ .package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .package-card { position: relative; display: flex; flex-direction: column; padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--edge); background: linear-gradient(160deg, var(--card-1), var(--card-2)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--d2); } .package-card.featured { border-color: transparent; background-image: linear-gradient( 160deg, var(--card-1), var(--card-2) ), var(--grad-decor); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: var(--d4); } .badge { position: absolute; top: -12px; left: 26px; padding: 5px 13px 6px; border-radius: 999px; color: #fff; background-image: var(--grad-cta); box-shadow: var(--d2); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .package-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .tier { font-size: 1.2rem; font-weight: 700; } .price { color: var(--price-ink); font-weight: 700; font-size: 1.12rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .package-note { margin-top: 11px; color: var(--muted); font-size: 0.93rem; } .item-count { margin-top: 13px; color: var(--accent-ink); font-weight: 700; font-size: 0.86rem; } .package-details { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); } .package-details summary { display: flex; align-items: center; gap: 9px; min-height: 40px; cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text); list-style: none; } .package-details summary::-webkit-details-marker { display: none; } .package-details summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: rotate(45deg) translate(-1px, -1px); } .package-details[open] summary::before { transform: rotate(-135deg) translate(-2px, -2px); } .package-items { margin: 6px 0 2px; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); font-size: 0.89rem; } .package-items li::marker { color: var(--blush-pop); } .package-card .btn-block { margin-top: auto; padding-top: 14px; } /* ── Build-your-own box ─────────────────────────────────────── A different KIND of offer, not a fourth tier — so it spans the grid and takes the Soft Cloud gradient rather than the pink one, which keeps it from competing with "Most popular". */ .custom-card { grid-column: 1 / -1; display: grid; grid-template-columns: 1.6fr 0.9fr; gap: 28px; align-items: center; border-color: transparent; background-image: linear-gradient(160deg, var(--card-1), var(--card-2)), var(--grad-cloud); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: var(--d3); } .badge-custom { background-image: none; background-color: var(--surface-cloud); border: 1px solid var(--cloud-edge); color: var(--text); } .custom-card .tier { max-width: 20ch; } .custom-card .package-note { max-width: 58ch; } .custom-tags { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .custom-tags li { padding: 7px 12px 8px; border-radius: 999px; border: 1px solid var(--cloud-edge); background: var(--surface-cloud); font-size: 0.82rem; font-weight: 600; } .custom-side { padding-left: 28px; border-left: 1px solid var(--line); } .price-custom { font-size: 1.02rem; } .custom-hint { margin-top: 8px; color: var(--muted); font-size: 0.87rem; } .custom-card .btn-block { margin-top: 16px; padding-top: 0; } /* ── Order steps ──────────────────────────────────────────── */ .order-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .step-num { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 999px; color: #fff; background-image: var(--grad-cta); box-shadow: var(--d2); font-weight: 700; font-size: 0.92rem; font-variant-numeric: tabular-nums; } .order-steps p:not(.step-num) { margin-top: 9px; color: var(--muted); font-size: 0.93rem; } /* ── Coverage ─────────────────────────────────────────────── */ .coverage-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 16px; } .coverage-card > p { margin-top: 10px; color: var(--muted); } .coverage-highlight { color: var(--accent-ink); font-weight: 700; } .coverage-tags { list-style: none; margin: 15px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; } /* Soft Cloud earns its place here — it breaks the pink and adds air. */ .coverage-tags li { padding: 8px 13px 9px; border-radius: 999px; border: 1px solid var(--cloud-edge); background: var(--surface-cloud); color: var(--text); font-size: 0.83rem; font-weight: 600; box-shadow: var(--d1); } .coverage-note { margin-top: 17px; color: var(--muted); font-size: 0.88rem; } /* ── Vision ───────────────────────────────────────────────── */ .vision-copy { display: grid; gap: 17px; max-width: 68ch; } .vision-copy > p:not(.vision-note) { color: var(--muted); font-size: 1rem; } .vision-note { padding-top: 17px; border-top: 1px solid var(--line); font-weight: 600; font-size: 0.9rem; color: var(--accent-ink); } /* ── Contact ──────────────────────────────────────────────── */ .contact-layout { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 16px; } .contact-primary > p { margin-top: 13px; max-width: 52ch; color: var(--muted); } .contact-social { display: grid; gap: 11px; align-content: start; } .contact-social a { display: grid; gap: 3px; min-height: 64px; align-content: center; padding: 15px 17px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-weight: 600; font-size: 0.95rem; text-decoration: none; } .contact-social a span { color: var(--muted); font-weight: 500; font-size: 0.88rem; } /* ── Footer ───────────────────────────────────────────────── */ .site-footer { margin-block: 20px 36px; padding-top: 30px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 26px; align-items: start; color: var(--muted); font-size: 0.88rem; } .footer-logo { width: 124px; height: auto; display: block; margin-bottom: 13px; } .footer-brand p { max-width: 30ch; } .footer-nav { display: grid; gap: 6px; justify-items: start; } .footer-nav a { display: inline-flex; align-items: center; min-height: 40px; min-width: 44px; /* short labels ("Boxes") were 37px wide */ color: var(--muted); text-decoration: none; font-weight: 500; } .footer-meta { display: grid; gap: 4px; } /* ── Motion ─────────────────────────────────────────────────── Everything below is opt-in: it needs BOTH the `js` class and motion-safe. No JS or reduced motion => a static, complete page. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } /* Sections rise out of depth rather than sliding flat. */ .js .reveal { opacity: 0; transform: perspective(1400px) translate3d(0, 44px, -80px) rotateX(5deg); transform-origin: 50% 100%; transition: opacity 520ms var(--ease-out-expo), transform 760ms var(--ease-out-expo); } .js .reveal.in-view { opacity: 1; transform: perspective(1400px) translate3d(0, 0, 0) rotateX(0deg); } /* Children stagger in behind their section — the depth cue that makes a page read as layered rather than painted. */ .js .reveal .stagger > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 460ms var(--ease-out-expo), transform 560ms var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 65ms); } .js .reveal.in-view .stagger > * { opacity: 1; transform: none; } .js .reveal .stagger > *:nth-child(1) { --i: 0; } .js .reveal .stagger > *:nth-child(2) { --i: 1; } .js .reveal .stagger > *:nth-child(3) { --i: 2; } .js .reveal .stagger > *:nth-child(4) { --i: 3; } .js .reveal .stagger > *:nth-child(5) { --i: 4; } .js .reveal .stagger > *:nth-child(6) { --i: 5; } .js .reveal .stagger > *:nth-child(7) { --i: 6; } .js .reveal .stagger > *:nth-child(8) { --i: 7; } .skip-link, .btn, .header-cta, .theme-toggle, .top-nav a, .footer-nav a, .contact-social a, .package-details summary::before, .nav-bar { transition: transform 150ms var(--ease-out-expo), box-shadow 200ms var(--ease-out-expo), background-color 120ms ease-out, color 120ms ease-out; } .tilt { transition: transform 420ms var(--ease-out-expo), box-shadow 420ms var(--ease-out-expo); } .top-nav { transition: opacity 180ms var(--ease-out-expo), transform 180ms var(--ease-out-expo), visibility 180ms; } } /* Pointer-tilt: cards lean toward the cursor. Desktop pointers only. */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .tilt-scene { perspective: 1100px; } .tilt { transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translate3d(0, var(--tilt-lift, 0), 0); transform-style: preserve-3d; } .tilt.is-tilting { box-shadow: var(--d4); } } @media (hover: hover) and (pointer: fine) { .top-nav a:hover { background: rgba(176, 21, 96, 0.07); color: var(--accent-ink); } .footer-nav a:hover { color: var(--accent-ink); } .btn-primary:hover, .header-cta:hover { transform: translateY(-2px); box-shadow: var(--d4), inset 0 1px 0 rgba(255, 255, 255, 0.28); } .theme-toggle:hover { border-color: var(--ring); color: var(--accent-ink); } .btn-secondary:hover { border-color: var(--ring); background: #fff; transform: translateY(-2px); box-shadow: var(--d2); } .contact-social a:hover { border-color: var(--ring); } .package-details summary:hover { color: var(--accent-ink); } } .btn:active, .header-cta:active, .contact-social a:active { transform: translateY(1px) scale(0.99); } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 1000px) { :root { --header-space: 92px; } main > section { margin: 40px 0 72px; } .site-header { grid-template-columns: 1fr auto auto auto; gap: 8px; padding: 8px 8px 8px 14px; } .brand { order: 1; } .theme-toggle { order: 2; } .brand-logo { width: 122px; } .top-nav { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 21; display: grid; grid-template-columns: 1fr; justify-content: stretch; gap: 2px; padding: 10px; border-radius: var(--r-lg); border: 1px solid var(--edge); background: var(--solid); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--d4); opacity: 0; visibility: hidden; transform: translateY(-8px); } .site-header.nav-open .top-nav { opacity: 1; visibility: visible; transform: none; } .top-nav a { padding: 14px; border-radius: var(--r-md); font-size: 0.98rem; font-weight: 600; } .nav-toggle { order: 4; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--solid); cursor: pointer; } .nav-toggle-box { display: grid; gap: 4px; width: 18px; } .nav-bar { display: block; height: 2px; border-radius: 2px; background: var(--text); transform-origin: center; } .site-header.nav-open .nav-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .site-header.nav-open .nav-bar:nth-child(2) { opacity: 0; } .site-header.nav-open .nav-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .header-cta { order: 3; } .problem-grid, .package-grid, .order-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .custom-card { grid-template-columns: 1fr; gap: 22px; } .custom-side { padding-left: 0; padding-top: 22px; border-left: 0; border-top: 1px solid var(--line); } .shift-layout, .coverage-layout, .contact-layout { grid-template-columns: 1fr; } .site-footer { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } /* Blur is the most expensive thing here; ease it off on phones. */ .orb { filter: blur(70px); } /* Eight full-width backdrop-filter panels is the heaviest cost on a mid-range Android and is barely visible at these opacities. Swap for a flat translucent fill. */ .hero, .problem, .shift, .plan, .order, .coverage, .vision, .contact, .package-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--solid); } .package-card.featured { background-image: linear-gradient( 160deg, var(--card-1), var(--card-2) ), var(--grad-decor); } } @media (max-width: 700px) { main > section { margin: 30px 0 56px; } .cta-long { display: none; } .problem-grid, .plan-grid, .package-grid, .order-steps { grid-template-columns: 1fr; } .plan-cta .btn, .hero .btn { width: 100%; } .plan-cta-note { max-width: none; } .site-footer { grid-template-columns: 1fr; gap: 22px; } .grid-plane { background-size: 44px 44px; } } @media (max-width: 380px) { .brand-logo { width: 104px; } } @media print { .site-header, .scene, .skip-link { display: none; } .reveal, .stagger > * { opacity: 1 !important; transform: none !important; } } /* ── Self-hosting Agrandir ───────────────────────────────────── Drop the licensed files into assets/fonts/ and uncomment. The --body stack already lists Agrandir first, so it takes over with no other change. @font-face { font-family: "Agrandir"; src: url("assets/fonts/Agrandir-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Agrandir"; src: url("assets/fonts/Agrandir-Medium.woff2") format("woff2"); font-weight: 500 600; font-display: swap; } @font-face { font-family: "Agrandir"; src: url("assets/fonts/Agrandir-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } */