/* Prime Immigration Office — full stylesheet Pure CSS, no Tailwind. All BEM-style classes from generated HTML. Fonts: Spectral (display), Public Sans (loaded in ), Spline Sans Mono. Brand: Teal v1 — source of truth prime-brand/tokens.json. */ /* Metric-matched fallback: Georgia sized to Spectral's advance width so the display font swap does not change wrap points / line count (kills CLS). */ @font-face { font-family: 'Spectral-fallback'; /* impeccable-disable-line design-system-font -- metric-matched swap fallback for Spectral, not a brand font */ src: local('Georgia'), local('Times New Roman'); size-adjust: 88.3%; } /* ================================================================= Tokens ================================================================= */ :root { --prime-blue: #0C5C55; --prime-blue-700: #12897E; --prime-blue-800: #0C1A18; --prime-blue-900: #081415; --prime-amber: #C4623F; --prime-amber-soft: color-mix(in srgb, #C4623F 55%, white 45%); --prime-amber-deep: color-mix(in srgb, #C4623F 75%, black 25%); --mint-300: #2FC3B4; --mint-100: color-mix(in srgb, #2FC3B4 25%, white 75%); --ink-900: #171717; --ink-700: #404040; --ink-500: #737373; --ink-400: #A3A3A3; --ink-300: #D4D4D4; --ink-200: #E5E5E5; --ink-100: #F5F5F5; --ink-50: #FAFAFA; --bg-canvas: #FBF9F3; --bg-soft: #F4F1EA; --bg-tint: #F4F1EA; --border: rgba(12, 92, 85, 0.10); --border-strong: rgba(12, 92, 85, 0.18); --shadow-sm: 0 1px 2px rgba(8, 20, 21, 0.06); --shadow-md: 0 4px 16px rgba(8, 20, 21, 0.08); --shadow-lg: 0 12px 40px rgba(8, 20, 21, 0.10); --shadow-xl: 0 24px 60px rgba(8, 20, 21, 0.14); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Spectral', 'Spectral-fallback', Georgia, serif; --font-mono: 'Spline Sans Mono', 'SF Mono', Menlo, Consolas, monospace; --container-max: 1180px; --container-narrow: 820px; --easing: cubic-bezier(0.2, 0.7, 0.2, 1); } /* ================================================================= Reset / base ================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--ink-900); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--prime-blue); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } button { font: inherit; cursor: pointer; } ul, ol { padding: 0; margin: 0; list-style: none; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-serif); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } p { margin: 0; } .font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .skip-link { position: absolute; top: -40px; left: 12px; background: var(--prime-blue); color: #fff; padding: 8px 14px; border-radius: 6px; z-index: 100; transition: top 0.2s var(--easing); } .skip-link:focus { top: 12px; outline: none; } :focus-visible { outline: 2px solid var(--prime-amber); outline-offset: 3px; border-radius: 4px; } /* ================================================================= Layout ================================================================= */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } .container--narrow { max-width: var(--container-narrow); } @media (max-width: 640px) { .container { padding: 0 16px; } } .section { padding: 88px 0; position: relative; } .section--alt { background: var(--bg-tint); } .section--dark { background: var(--prime-blue-900); color: #fff; background-image: radial-gradient(800px 400px at 20% 0%, rgba(196, 98, 63, 0.08), transparent 60%), radial-gradient(600px 300px at 80% 100%, rgba(18, 137, 126, 0.4), transparent 60%); } .section--dark .lede { color: rgba(255,255,255,0.75); } .section--dark .h-section { color: #fff; } .section--dark .eyebrow { color: var(--mint-300); } .section__head { text-align: center; max-width: 720px; margin: 0 auto 56px; } .section__head--left { text-align: left; margin-left: 0; } @media (max-width: 768px) { .section { padding: 64px 0; } .section__head { margin-bottom: 40px; } } /* ================================================================= Typography ================================================================= */ .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--prime-blue); margin-bottom: 14px; } .eyebrow-mint { color: var(--mint-300); } .h-display { font-size: clamp(36px, 5.2vw, 64px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--ink-900); text-wrap: balance; } .h-display--legal { font-size: clamp(32px, 4.4vw, 52px); } .h-section { font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink-900); text-wrap: balance; } .h-section--sm { font-size: clamp(22px, 2.6vw, 28px); } .lede { font-size: 18px; line-height: 1.55; color: var(--ink-700); max-width: 640px; margin: 16px auto 0; text-wrap: pretty; } .section__head--left .lede { margin-left: 0; } .lede--lg { font-size: 20px; } @media (min-width: 768px) { .lede { font-size: 19px; } .lede--lg { font-size: 22px; } } .microcopy { font-size: 13px; color: var(--ink-700); margin-top: 16px; line-height: 1.5; } .stack-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--prime-blue); background: rgba(12, 92, 85, 0.06); padding: 6px 12px; border-radius: var(--radius-pill); margin-bottom: 20px; } .stack-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--prime-amber); box-shadow: 0 0 0 3px rgba(196, 98, 63, 0.18); } /* ================================================================= Buttons ================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; font-size: 15px; font-weight: 500; border-radius: var(--radius-md); border: 1px solid transparent; transition: transform 0.15s var(--easing), background 0.15s var(--easing), box-shadow 0.15s var(--easing), color 0.15s var(--easing); cursor: pointer; white-space: nowrap; text-decoration: none; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-sm { padding: 9px 16px; font-size: 14px; gap: 6px; } .btn-block { width: 100%; } .btn-primary { background: var(--prime-blue); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--prime-blue-700); box-shadow: var(--shadow-md); color: #fff; } .btn-amber { background: var(--prime-amber); color: var(--prime-blue-900); font-weight: 600; box-shadow: 0 4px 14px rgba(196, 98, 63, 0.35); } .btn-amber:hover { background: var(--prime-amber-deep); color: #fff; } .btn-ghost { background: transparent; color: var(--prime-blue); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--ink-100); color: var(--prime-blue); } .btn-ghost-light { background: transparent; color: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.25); } .btn-ghost-light:hover { background: rgba(255,255,255,0.08); color: #fff; } .btn-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--prime-blue); text-decoration: none; padding: 8px 0; } .btn-link:hover { gap: 10px; text-decoration: underline; text-underline-offset: 4px; } .btn-link--small { font-size: 13px; color: var(--ink-500); } /* ================================================================= Header ================================================================= */ .prime-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: background 0.2s var(--easing), border-color 0.2s var(--easing), box-shadow 0.2s var(--easing); } .prime-header[data-scrolled="true"] { background: rgba(255,255,255,0.95); border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .prime-header__bar { display: flex; align-items: center; gap: 24px; max-width: var(--container-max); margin: 0 auto; padding: 14px 24px; } @media (max-width: 640px) { .prime-header__bar { padding: 12px 16px; gap: 12px; } } .prime-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--prime-blue); text-decoration: none; } .prime-logo:hover { text-decoration: none; } .prime-logo__words { display: flex; flex-direction: column; line-height: 1.05; } .prime-logo__name { font-family: var(--font-serif); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; color: var(--prime-blue); } .prime-logo__sub { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-500); } .prime-nav { display: flex; align-items: center; gap: 4px; margin-left: 24px; } .prime-nav a { display: inline-block; padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--ink-700); border-radius: var(--radius-sm); text-decoration: none; transition: color 0.15s, background 0.15s; } .prime-nav a:hover { color: var(--prime-blue); background: rgba(12, 92, 85, 0.05); } .prime-nav a[aria-current="page"] { color: var(--prime-blue); background: rgba(12, 92, 85, 0.08); } @media (max-width: 880px) { .prime-nav { display: none; } } .prime-header__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; } .lang-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; background: #fff; } .lang-toggle a { padding: 6px 12px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); text-decoration: none; letter-spacing: 0.06em; } .lang-toggle a.active { background: var(--prime-blue); color: #fff; } .prime-header__menu-btn { display: none; width: 40px; height: 40px; border: 1px solid var(--border); background: #fff; border-radius: var(--radius-md); align-items: center; justify-content: center; color: var(--prime-blue); } @media (max-width: 880px) { .prime-header__menu-btn { display: inline-flex; } } /* Mobile menu */ .prime-mobile-menu { position: fixed; inset: 0; background: #fff; z-index: 60; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; display: flex; flex-direction: column; } .prime-mobile-menu[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); } .prime-mobile-menu__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); } .prime-mobile-menu__header button { width: 36px; height: 36px; border: 1px solid var(--border); background: #fff; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; } .prime-mobile-menu nav { display: flex; flex-direction: column; padding: 24px 16px; gap: 4px; } .prime-mobile-menu nav a { padding: 14px 16px; font-size: 17px; font-weight: 500; color: var(--ink-900); border-radius: var(--radius-md); text-decoration: none; } .prime-mobile-menu nav a:hover { background: var(--ink-100); } .prime-mobile-menu__cta { margin-top: 16px; background: var(--prime-blue) !important; color: #fff !important; display: inline-flex !important; align-items: center; gap: 8px; justify-content: center; } /* ================================================================= Hero (split layout — homepage) ================================================================= */ .hero-split { position: relative; padding: 96px 0 88px; overflow: hidden; } .hero-ambient { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 400px at 12% 20%, rgba(196, 98, 63, 0.08), transparent 60%), radial-gradient(700px 500px at 88% 0%, rgba(12, 92, 85, 0.06), transparent 60%); z-index: 0; } .hero-split__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; align-items: center; position: relative; z-index: 1; } .hero-split__copy { position: relative; } .hero-split__copy .h-display { margin-top: 6px; } .hero-split__copy .lede { margin-left: 0; margin-top: 22px; max-width: 540px; } .hero-split__ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; } @media (max-width: 980px) { .hero-split { padding: 64px 0 56px; } .hero-split__grid { grid-template-columns: 1fr; gap: 40px; } .hero-split__visual { order: -1; } } /* Hero typo (services/about/contact/legal) */ .hero-typo { position: relative; padding: 96px 0 64px; overflow: hidden; border-bottom: 1px solid var(--border); } .hero-typo--legal { padding-bottom: 40px; } .hero-typo .container, .hero-typo .container--narrow { position: relative; z-index: 1; } .hero-typo .lede { margin-left: 0; margin-top: 18px; max-width: 720px; } .breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-500); margin-bottom: 28px; } .breadcrumb a { color: var(--ink-500); text-decoration: none; } .breadcrumb a:hover { color: var(--prime-blue); text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--ink-900); } /* ================================================================= Hero mock (Docketwise visual) ================================================================= */ .hero-mock { position: relative; width: 100%; max-width: 540px; margin-left: auto; aspect-ratio: 1 / 0.92; } .hero-mock__back { position: absolute; top: 0; right: 0; width: 78%; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-md); transform: rotate(2deg); } .hero-mock__back-row { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); margin-bottom: 16px; letter-spacing: 0.04em; } .hero-mock__pct { color: var(--prime-amber-deep); font-weight: 600; } .hero-mock__doc { display: flex; gap: 14px; } .hero-mock__doc-img { width: 90px; height: 110px; flex-shrink: 0; border-radius: var(--radius-sm); background: linear-gradient(140deg, #12897E 0%, #0C5C55 50%, #081415 100%); position: relative; box-shadow: inset 0 0 0 4px rgba(196, 98, 63, 0.12); } .hero-mock__doc-img::after { content: ''; position: absolute; inset: 12px 12px auto 12px; height: 14px; background: rgba(196, 98, 63, 0.4); border-radius: 3px; } .hero-mock__doc-fields { flex: 1; display: flex; flex-direction: column; gap: 10px; } .hero-mock__field { height: 12px; border-radius: 4px; background: var(--ink-100); position: relative; } .hero-mock__field--w52 { width: 52%; } .hero-mock__field--w60 { width: 60%; } .hero-mock__field--w70 { width: 70%; } .hero-mock__field--w90 { width: 90%; } .hero-mock__field--amber { background: rgba(196, 98, 63, 0.18); border: 1px dashed rgba(196, 98, 63, 0.5); height: 16px; } .hero-mock__field--amber span { position: absolute; top: -8px; right: -4px; font-family: var(--font-mono); font-size: 9px; background: var(--prime-amber); color: #fff; padding: 2px 5px; border-radius: 3px; letter-spacing: 0.08em; } .hero-mock__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ink-100); } .hero-mock__meta-k { font-family: var(--font-mono); font-size: 10px; color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; } .hero-mock__meta-v { font-family: var(--font-mono); font-size: 13px; color: var(--ink-900); font-weight: 500; } .hero-mock__front { position: absolute; bottom: 0; left: 0; width: 84%; background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .hero-mock__chrome { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ink-100); background: var(--ink-50); } .hero-mock__dots { display: inline-flex; gap: 6px; } .hero-mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-300); } .hero-mock__title { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); letter-spacing: 0.04em; flex: 1; } .hero-mock__chrome .stack-badge { margin: 0; padding: 3px 8px; font-size: 10px; } .hero-mock__case { padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ink-100); } .hero-mock__case-name { font-weight: 600; font-size: 14px; color: var(--ink-900); } .hero-mock__case-form { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); margin-top: 4px; letter-spacing: 0.03em; } .hero-mock__conf-k { font-family: var(--font-mono); font-size: 10px; color: var(--ink-500); letter-spacing: 0.08em; text-transform: uppercase; text-align: right; } .hero-mock__conf-v { font-family: var(--font-mono); font-weight: 600; font-size: 18px; color: var(--prime-blue); text-align: right; } .hero-mock__checks { padding: 10px 18px; display: flex; flex-direction: column; gap: 4px; } .hero-mock__check { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; } .hero-mock__check-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } .hero-mock__check--ok .hero-mock__check-icon { background: rgba(47, 195, 180, 0.2); color: #047857; } .hero-mock__check--flag .hero-mock__check-icon { background: rgba(196, 98, 63, 0.18); color: var(--prime-amber-deep); } .hero-mock__check--pending .hero-mock__check-icon { background: var(--ink-100); color: var(--ink-500); } .hero-mock__check-label { flex: 1; color: var(--ink-700); } .hero-mock__check-tag { font-family: var(--font-mono); font-size: 10px; color: var(--ink-500); letter-spacing: 0.06em; text-transform: uppercase; } .hero-mock__paralegal { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--prime-blue-900); color: #fff; } .hero-mock__paralegal-icon { width: 32px; height: 32px; background: var(--prime-amber); color: var(--prime-blue-900); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .hero-mock__paralegal-title { font-size: 13px; font-weight: 500; line-height: 1.3; } .hero-mock__paralegal-eta { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.55); margin-top: 2px; letter-spacing: 0.04em; } .hero-mock__paralegal > svg:last-child { color: var(--prime-amber); margin-left: auto; } .hero-mock__pill { position: absolute; bottom: 12px; right: -6px; display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 7px 12px; font-size: 11px; font-weight: 500; box-shadow: var(--shadow-md); } .hero-mock__pill-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); } @media (max-width: 540px) { .hero-mock { max-width: 100%; } .hero-mock__pill { right: 0; } } /* ================================================================= Trust strip ================================================================= */ .trust { background: var(--prime-blue-900); color: #fff; padding: 32px 0; } .trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .trust__item { text-align: left; } .trust__k { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--prime-amber-soft); letter-spacing: -0.01em; } .trust__v { font-size: 13px; color: rgba(255,255,255,0.65); margin-top: 4px; text-transform: lowercase; } @media (max-width: 720px) { .trust__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } /* ================================================================= Cards ================================================================= */ .card-grid { display: grid; gap: 24px; } .card-grid--3 { grid-template-columns: repeat(3, 1fr); } .card-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; } } .card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; position: relative; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .card-hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); } .card__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(12, 92, 85, 0.08); color: var(--prime-blue); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; } .card__title { font-size: 19px; font-weight: 600; color: var(--ink-900); margin-bottom: 6px; } .card__forms { font-family: var(--font-mono); font-size: 12px; color: var(--prime-amber-deep); letter-spacing: 0.03em; margin-bottom: 12px; } .card__body { font-size: 15px; line-height: 1.55; color: var(--ink-700); margin-bottom: 16px; } .card .btn-link { margin-top: 4px; } /* ================================================================= Process timeline ================================================================= */ .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; counter-reset: step; } .timeline-track::before { content: ''; position: absolute; top: 22px; left: 5%; right: 5%; height: 1px; background: linear-gradient(to right, var(--border) 0%, var(--prime-amber) 50%, var(--border) 100%); } .timeline__step { position: relative; padding-top: 60px; } .timeline-node { position: absolute; top: 0; left: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border); border-radius: 50%; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--prime-blue); z-index: 1; } .timeline__step h3 { font-size: 17px; font-weight: 600; color: var(--ink-900); margin-bottom: 8px; } .timeline__step p { font-size: 14px; color: var(--ink-700); line-height: 1.55; } @media (max-width: 880px) { .timeline { grid-template-columns: 1fr 1fr; } .timeline-track::before { display: none; } } @media (max-width: 540px) { .timeline { grid-template-columns: 1fr; } } /* ================================================================= FAQ accordion ================================================================= */ .faq { display: flex; flex-direction: column; gap: 8px; } .faq-item { border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; overflow: hidden; } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-size: 16px; font-weight: 500; color: var(--ink-900); cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { background: var(--ink-50); } .faq-chevron { width: 28px; height: 28px; border-radius: 50%; background: var(--ink-100); display: inline-flex; align-items: center; justify-content: center; color: var(--prime-blue); transition: transform 0.2s, background 0.2s; flex-shrink: 0; } .faq-item[open] .faq-chevron { transform: rotate(45deg); background: var(--prime-blue); color: #fff; } .faq__a { padding: 0 20px 20px; color: var(--ink-700); line-height: 1.6; } .faq__a p { margin: 0; } /* ================================================================= CTA dark block ================================================================= */ .cta-dark { text-align: center; } .cta-dark .h-section { color: #fff; } .cta-dark .lede { color: rgba(255,255,255,0.78); margin-top: 16px; } .cta-dark__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; } .embed-placeholder { margin-top: 32px; padding: 16px 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); background: rgba(12, 92, 85, 0.02); letter-spacing: 0.04em; } .embed-placeholder--dark { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.04); } .embed-placeholder--lg { display: flex; padding: 28px; font-size: 13px; gap: 12px; } /* ================================================================= Services page — combo grid ================================================================= */ .jump-list { background: var(--bg-tint); border-bottom: 1px solid var(--border); padding: 18px 0; position: sticky; top: 64px; z-index: 20; backdrop-filter: blur(10px); } .jump-list .container { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .jump-list .eyebrow { margin: 0; } .jump-list ul { display: flex; gap: 4px; flex-wrap: wrap; } .jump-list li a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--ink-700); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill); text-decoration: none; transition: border-color 0.15s, color 0.15s; } .jump-list li a:hover { border-color: var(--prime-blue); color: var(--prime-blue); } .jump-list__count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); background: var(--ink-100); padding: 1px 6px; border-radius: var(--radius-pill); } .combo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 880px) { .combo-grid { grid-template-columns: 1fr; } } .combo-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 14px; transition: border-color 0.2s, box-shadow 0.2s; scroll-margin-top: 140px; } .combo-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .combo-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .combo-card__codes { display: flex; gap: 6px; flex-wrap: wrap; } .combo-card__code { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; background: rgba(12, 92, 85, 0.08); color: var(--prime-blue); padding: 4px 8px; border-radius: var(--radius-sm); } .combo-card__badge { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; background: var(--prime-amber); color: var(--prime-blue-900); padding: 4px 8px; border-radius: var(--radius-sm); } .combo-card__title { font-size: 20px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.01em; } .combo-card__lede { font-size: 14px; line-height: 1.6; color: var(--ink-700); } .combo-card__meta { margin: 0; padding: 12px 14px; background: var(--bg-tint); border-radius: var(--radius-md); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; } .combo-card__meta dt { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); letter-spacing: 0.06em; text-transform: uppercase; } .combo-card__meta dd { margin: 0; color: var(--ink-700); } .combo-card__scope h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 8px; } .combo-card__scope ul { display: flex; flex-direction: column; gap: 6px; } .combo-card__scope li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-700); } .combo-card__scope li svg { flex-shrink: 0; margin-top: 3px; color: #047857; } .combo-card__scope--out li svg { color: #b91c1c; } .combo-card__fees { font-size: 12px; color: var(--ink-500); padding: 10px 12px; background: rgba(196, 98, 63, 0.06); border-left: 3px solid var(--prime-amber); border-radius: var(--radius-sm); display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; } .combo-card__fees svg { flex-shrink: 0; margin-top: 2px; color: var(--prime-amber-deep); } .combo-card__actions { margin-top: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 8px; } /* ================================================================= About page ================================================================= */ .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 720px) { .compare-grid { grid-template-columns: 1fr; } } .compare-grid__col { border-radius: var(--radius-lg); padding: 28px; border: 1px solid var(--border); background: #fff; } .compare-grid__col h3 { font-size: 17px; font-weight: 600; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .compare-grid__col ul { display: flex; flex-direction: column; gap: 10px; } .compare-grid__col li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-700); line-height: 1.55; } .compare-grid__col li svg { flex-shrink: 0; margin-top: 3px; } .compare-grid__col--neg { background: rgba(185, 28, 28, 0.03); border-color: rgba(185, 28, 28, 0.15); } .compare-grid__col--neg li svg { color: #b91c1c; } .compare-grid__col--neg h3 { color: #991b1b; } .compare-grid__col--pos { background: rgba(4, 120, 87, 0.03); border-color: rgba(4, 120, 87, 0.18); } .compare-grid__col--pos li svg { color: #047857; } .compare-grid__col--pos h3 { color: #064e3b; } .layer-card { padding-top: 36px; } .layer-card__num { position: absolute; top: 18px; right: 22px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); letter-spacing: 0.1em; } .layer-card__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(196, 98, 63, 0.12); color: var(--prime-amber-deep); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; } .prose { font-size: 16px; line-height: 1.7; color: var(--ink-700); } .prose p { margin-bottom: 18px; } .prose p:last-child { margin-bottom: 0; } .prose strong { color: var(--ink-900); font-weight: 600; } .bullet-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 24px; } .bullet-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-700); line-height: 1.55; } .bullet-list li svg { flex-shrink: 0; margin-top: 4px; color: var(--prime-amber-deep); } .bullet-list li strong { color: var(--ink-900); } /* ================================================================= Contact page ================================================================= */ .path-card { display: flex; flex-direction: column; } .path-card .btn { margin-top: auto; } .path-card__sla { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; letter-spacing: 0.04em; } .path-card--featured { background: linear-gradient(160deg, #fff 0%, rgba(196, 98, 63, 0.06) 100%); border-color: rgba(196, 98, 63, 0.3); } .path-card--featured .card__icon { background: rgba(196, 98, 63, 0.15); color: var(--prime-amber-deep); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } @media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } } .hours-list { display: flex; flex-direction: column; margin: 18px 0 12px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .hours-list li { display: flex; justify-content: space-between; padding: 10px 16px; font-size: 14px; border-bottom: 1px solid var(--ink-100); } .hours-list li:last-child { border-bottom: none; } .hours-list li.is-closed { color: var(--ink-500); background: var(--ink-50); } .address-block { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: var(--bg-tint); border-radius: var(--radius-md); border: 1px solid var(--border); font-style: normal; font-size: 14px; line-height: 1.6; margin: 18px 0 16px; } .address-block__icon { color: var(--prime-blue); flex-shrink: 0; margin-top: 2px; } .address-block strong { color: var(--ink-900); } .contact-meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .contact-meta li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-700); } .contact-meta li svg { color: var(--prime-blue); flex-shrink: 0; } .contact-meta li span { color: var(--ink-500); } .map-placeholder { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 56px 32px; text-align: center; background: var(--bg-tint); } .map-placeholder__icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(12, 92, 85, 0.08); color: var(--prime-blue); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 18px; } .map-placeholder h3 { font-size: 19px; margin-bottom: 8px; } .map-placeholder p { color: var(--ink-700); max-width: 480px; margin: 0 auto 8px; } .calendar-mock { text-align: center; padding: 40px; } .calendar-mock .card__icon { margin: 0 auto 18px; } .calendar-mock .embed-placeholder--lg { margin: 24px auto 0; max-width: 480px; } /* ================================================================= Legal pages ================================================================= */ .legal-section { padding: 56px 0; } .legal-section + .legal-section { padding-top: 0; } .last-updated { display: inline-block; font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); margin-top: 18px; letter-spacing: 0.04em; } .legal-flag { background: var(--bg-tint); border-left: 4px solid var(--prime-amber); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 14px; line-height: 1.5; color: var(--ink-700); margin-top: 20px; } .legal-flag strong { color: var(--ink-900); } .upl-callout { display: flex; gap: 20px; padding: 28px 32px; background: rgba(196, 98, 63, 0.06); border-left: 4px solid var(--prime-amber); border-radius: var(--radius-md); } .upl-callout__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: rgba(196, 98, 63, 0.18); color: var(--prime-amber-deep); display: inline-flex; align-items: center; justify-content: center; } .upl-callout p { margin-top: 12px; color: var(--ink-700); line-height: 1.6; } .upl-callout p:first-of-type { margin-top: 16px; } /* ================================================================= Footer ================================================================= */ .prime-footer { background: var(--prime-blue-900); color: rgba(255,255,255,0.75); padding: 64px 0 28px; font-size: 14px; } .prime-footer__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } .prime-footer .prime-logo { color: #fff; } .prime-footer .prime-logo__name { color: #fff; } .prime-footer .prime-logo__sub { color: rgba(255,255,255,0.55); } .prime-footer .eyebrow { color: var(--prime-amber-soft); } .prime-footer__top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); } @media (max-width: 720px) { .prime-footer__top { grid-template-columns: 1fr; } } .prime-footer__tagline { margin-top: 16px; max-width: 360px; color: rgba(255,255,255,0.6); line-height: 1.55; } .prime-footer__social { display: flex; gap: 8px; margin-top: 18px; } .prime-footer__social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s; } .prime-footer__social a:hover { background: rgba(255,255,255,0.14); text-decoration: none; } .prime-footer__newsletter p { margin-top: 10px; line-height: 1.55; max-width: 380px; } .prime-footer__newsletter .embed-placeholder { margin-top: 16px; border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.04); } .prime-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 40px 0; } .prime-footer__cols ul { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .prime-footer__cols a { color: rgba(255,255,255,0.7); text-decoration: none; } .prime-footer__cols a:hover { color: #fff; text-decoration: underline; } .prime-footer__cols span { color: rgba(255,255,255,0.7); } @media (max-width: 720px) { .prime-footer__cols { grid-template-columns: 1fr 1fr; } } .prime-footer__legal { display: flex; gap: 14px; align-items: flex-start; padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.55; } .prime-footer__legal > div { color: var(--prime-amber-soft); flex-shrink: 0; margin-top: 1px; } .prime-footer__legal strong { color: rgba(255,255,255,0.85); } .prime-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px; color: rgba(255,255,255,0.65); flex-wrap: wrap; gap: 8px; } .prime-footer__bottom .font-mono { color: rgba(255,255,255,0.65); } /* ================================================================= Animations & utilities ================================================================= */ .fade-up { /* no entrance animation — keep content visible by default */ } @keyframes fade-up { 0% { opacity: 1; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ================================================================= SVG v1 (feat/stunning-svg-v1 — additive layer) Dark hero + self-drawing arch · arch dividers · antigolpe · document journey · micro-interactions · lead quiz · arch photo clip. Motion honours the global prefers-reduced-motion killswitch above; explicit static fallbacks are added where jump-to-end would hide content (marquee, journey, reveals). Only documented color/radius tokens are used (no new design-system values). ================================================================= */ /* ---- Scope 1 · Dark hero -------------------------------------- */ .hero-split--dark { background: var(--prime-blue-900); color: #fff; isolation: isolate; } .hero-split--dark .hero-ambient { background: radial-gradient(680px 420px at 14% 24%, rgba(47,195,180,0.10), transparent 62%), radial-gradient(620px 460px at 92% 6%, rgba(18,137,126,0.24), transparent 60%), radial-gradient(520px 340px at 80% 98%, rgba(196,98,63,0.10), transparent 60%); z-index: 0; } .hero-split--dark .h-display { color: #fff; font-size: clamp(40px, 5.6vw, 72px); letter-spacing: -0.03em; line-height: 1.02; } .hero-split--dark .hero-hl { color: var(--mint-300); font-style: italic; } .hero-split--dark .lede { color: rgba(255,255,255,0.76); } .hero-split--dark .microcopy { color: rgba(255,255,255,0.55); } .hero-split--dark .stack-badge { color: var(--mint-300); background: rgba(47,195,180,0.10); } .hero-split--dark .btn-ghost { color: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.25); } .hero-split--dark .btn-ghost:hover { background: rgba(255,255,255,0.08); color: #fff; } /* Zero-size, out-of-flow so the reset's svg{height:auto} can't inflate it (CLS). */ .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* Grain: a pre-rasterized feTurbulence tile (computed once on a 200px tile, then repeated) instead of a full-viewport runtime filter. */ .hero-split--dark::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; opacity: 0.06; mix-blend-mode: soft-light; } .hero-arch { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: min(640px, 74%); height: auto; aspect-ratio: 12 / 13; z-index: 0; pointer-events: none; overflow: visible; } @media (max-width: 980px) { .hero-arch { top: 30%; width: min(440px, 82%); opacity: 0.7; } } .hero-arch__stroke { fill: none; stroke: rgba(47,195,180,0.26); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 210; stroke-dashoffset: 210; animation: hero-arch-draw 1.2s var(--easing) 0.15s forwards; } .hero-arch__key { fill: var(--prime-amber); opacity: 0; transform-box: fill-box; transform-origin: center; animation: hero-key-settle 0.5s var(--easing) 1.15s forwards; } @keyframes hero-arch-draw { to { stroke-dashoffset: 0; } } @keyframes hero-key-settle { 0% { opacity: 0; transform: scale(0.4) translateY(-6px); } 60% { opacity: 1; transform: scale(1.08) translateY(0); } 100% { opacity: 1; transform: scale(1); } } /* ---- Scope 7 · arch photo clip (shared, used from Scope 3 on) --- */ .arch-photo { position: relative; overflow: hidden; width: 100%; } .arch-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; clip-path: url(#archClip); border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* graceful fallback if clip-path unsupported */ } /* ---- Scope 2 · giant hollow arch backdrop (dark sections) ------ */ .arch-backdrop { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } .arch-backdrop svg { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 150vw; height: auto; } @media (max-width: 640px) { .arch-backdrop svg { width: 250vw; } } .arch-backdrop__path { fill: none; stroke: rgba(47,195,180,0.16); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .arch-backdrop__key { fill: var(--prime-amber); opacity: 0.55; } /* ---- Scope 3 · Antigolpe (dark) ------------------------------- */ .section--antigolpe { background: var(--prime-blue-900); color: #fff; position: relative; overflow: hidden; } .section--antigolpe > .container { position: relative; z-index: 1; } .antigolpe__grid { display: grid; grid-template-columns: 0.82fr 1fr; gap: 56px; align-items: center; } @media (max-width: 860px) { .antigolpe__grid { grid-template-columns: 1fr; gap: 36px; } } .antigolpe__media { margin: 0; } .antigolpe__media .arch-photo { max-width: 360px; aspect-ratio: 3 / 4; margin-inline: auto; } .antigolpe__eyebrow { color: var(--prime-amber-soft); } .section--antigolpe .h-section { color: #fff; } .section--antigolpe .lede { color: rgba(255,255,255,0.76); margin-left: 0; } .pain-lines { display: flex; flex-direction: column; gap: 0; margin: 28px 0; } .pain-lines li { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.01em; color: rgba(255,255,255,0.84); padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,0.08); } .antigolpe__disclaimer { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.5); border-top: 1px solid rgba(255,255,255,0.12); padding-top: 16px; margin-top: 8px; } /* ---- Shared reveal-on-scroll (arm-then-reveal; no-JS = visible) - */ .reveal-armed[data-reveal-stagger] > * { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--easing), transform 0.5s var(--easing); transition-delay: calc(var(--stagger, 0) * 70ms); } .reveal-armed.is-in[data-reveal-stagger] > * { opacity: 1; transform: none; } .reveal-armed[data-reveal]:not([data-reveal-stagger]) { opacity: 0; transform: translateY(12px); transition: opacity 0.55s var(--easing), transform 0.55s var(--easing); } .reveal-armed.is-in[data-reveal]:not([data-reveal-stagger]) { opacity: 1; transform: none; } /* ---- Scope 4 · Document journey ------------------------------- */ .journey-figure { margin: 8px auto 0; max-width: 920px; } .journey-svg { width: 100%; height: auto; overflow: visible; } .journey-route { stroke: var(--border-strong); stroke-width: 2.5; stroke-dasharray: 2 10; stroke-linecap: round; } .journey-portal { stroke: var(--prime-blue); stroke-width: 2.5; fill: none; stroke-linecap: round; opacity: 0.45; } .journey-station circle { fill: #fff; stroke: var(--prime-blue); stroke-width: 2.5; } .journey-label { font-family: var(--font-mono); font-size: 15px; fill: var(--ink-700); letter-spacing: 0.01em; } .journey-check-bg { fill: rgba(12,92,85,0.12); } .journey-check { stroke: var(--prime-blue); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; } .journey-doc { offset-path: path("M60,150 L740,150 C812,150 812,92 872,92 L940,92"); offset-rotate: 0deg; offset-distance: 0%; filter: drop-shadow(0 2px 4px rgba(8,20,21,0.12)); } @keyframes journey-move { from { offset-distance: 0%; } to { offset-distance: 100%; } } @supports (animation-timeline: view()) { .journey-figure { view-timeline-name: --journeytl; view-timeline-axis: block; } .journey-doc { animation: journey-move linear both; animation-timeline: --journeytl; animation-range: entry 25% cover 55%; } } @supports not (animation-timeline: view()) { .journey-figure.is-in .journey-doc { animation: journey-move 2.4s var(--easing) 0.15s both; } } @media (prefers-reduced-motion: reduce) { .journey-doc { animation: none !important; offset-distance: 100% !important; } } /* ---- Scope 5 · Micro-interactions ----------------------------- */ /* Card hover: terracotta keystone accent (hover-only → scarcity-safe) */ .card-hover::before { content: ''; position: absolute; top: 16px; right: 18px; width: 11px; height: 11px; background: var(--prime-amber); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); opacity: 0; transform: scale(0.4) translateY(-4px); transition: opacity 0.2s var(--easing), transform 0.2s var(--easing); } .card-hover:hover::before { opacity: 1; transform: scale(1) translateY(0); } /* Teal → terracotta fill (hero CTA only) */ .btn-fill { position: relative; overflow: hidden; z-index: 0; } .btn-fill::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--prime-amber); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--easing); } .btn-fill:hover { color: var(--prime-blue-900); } .btn-fill:hover::before { transform: scaleX(1); } /* Trilingual marquee */ .marquee { overflow: hidden; background: var(--prime-blue-900); border-block: 1px solid rgba(255,255,255,0.06); } .marquee__track { display: flex; width: max-content; animation: marquee-scroll 42s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { display: inline-flex; align-items: center; white-space: nowrap; padding: 16px 0; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.62); } .marquee__sep { display: inline-block; width: 8px; height: 8px; margin: 0 28px; background: var(--prime-amber); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); opacity: 0.85; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; transform: none; } } /* ---- Scope 6 · Lead quiz -------------------------------------- */ .quiz-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px; max-width: 620px; margin: 0 auto; position: relative; } .quiz-progress { height: 4px; background: var(--ink-100); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 28px; } .quiz-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--prime-blue); transition: transform 0.4s var(--easing); } .quiz-step { display: none; } .quiz-step.is-active { display: block; animation: quiz-in 0.35s var(--easing); } @keyframes quiz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .quiz-q { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--ink-900); margin-bottom: 20px; letter-spacing: -0.01em; } .quiz-options { display: flex; flex-direction: column; gap: 10px; } .quiz-options--row { flex-direction: row; flex-wrap: wrap; } .quiz-opt { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; width: 100%; padding: 15px 18px; background: var(--bg-canvas); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--ink-900); font-size: 15px; font-weight: 500; transition: border-color 0.15s, background 0.15s, transform 0.1s; } .quiz-options--row .quiz-opt { width: auto; flex: 1 1 auto; justify-content: center; } .quiz-opt:hover { border-color: var(--prime-blue); background: #fff; } .quiz-opt:active { transform: translateY(1px); } .quiz-opt__code { font-family: var(--font-mono); font-size: 11px; color: var(--prime-amber-deep); letter-spacing: 0.03em; } .quiz-result { text-align: center; } .quiz-result__mark { width: 76px; margin: 0 auto 12px; } .quiz-result__lede { font-size: 15px; color: var(--ink-700); max-width: 420px; margin: 0 auto 24px; line-height: 1.55; } .quiz-result__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .quiz-restart { margin-top: 18px; background: none; border: none; font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 3px; } .quiz-restart:hover { color: var(--prime-blue); } /* ---- Scope 7 · Bastidores diptych (arch-clipped photos) ------- */ .bastidores__diptych { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 780px; margin: 0 auto; } @media (max-width: 640px) { .bastidores__diptych { grid-template-columns: 1fr; gap: 24px; max-width: 340px; } } .bastidores__item { margin: 0; } .bastidores__item .arch-photo { aspect-ratio: 3 / 4; } .bastidores__item--payoff .arch-photo img { object-position: center 52%; } .bastidores__item figcaption { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-500); margin-top: 14px; text-transform: uppercase; text-align: center; }