/* ========================================================================== Apex Automations — consulting site stylesheet Source of truth: DESIGN-SPEC.md (sections 2–3). Plain CSS, no build step. Breakpoints: 880px and 560px. Progressive-enhancement contract: script.js adds class "js" to . Every animation hidden-state below is scoped under .js — if JS never runs, all content is visible and static. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Theme tokens (spec §2) -------------------------------------------------------------------------- */ :root { --bg: #FAFAF8; /* page surface — warm white */ --ink: #131313; /* primary text + dark surfaces */ --ink-soft: #3c3c40; /* secondary text on light */ --muted: #77777e; /* tertiary text */ --hairline: rgba(19, 19, 19, .10); --card: #F2F2EF; /* card fill */ --accent: #6680A3; /* Apex steel blue */ --accent-deep: #4A6485; --accent-soft: #DCE6F2; /* pale blue for iso art fills */ --dark: #131316; /* footer / dark sections */ --dark-text: #EDEDF0; --radius: 18px; --font-head: 'Satoshi', sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'Roboto Mono', monospace; /* internal helpers */ --hairline-dark: rgba(255, 255, 255, .12); --ease-out: cubic-bezier(.22, 1, .36, 1); } /* -------------------------------------------------------------------------- 2. Base / reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } img, svg { display: block; max-width: 100%; } ::selection { background: var(--accent-soft); } /* Anchored sections clear the sticky nav */ [id] { scroll-margin-top: 92px; } /* Mobile drawer scroll lock (class set by script.js) */ body.nav-locked { overflow: hidden; } /* Visible focus states everywhere; lighter outline on dark surfaces */ :focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; } .footer :focus-visible, .cta-bar--solid:focus-visible, .btn:focus-visible { outline-color: var(--accent); } /* Screen-reader-only text (used by JS text splitting) */ .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 — off-screen until keyboard-focused */ .skip-link { position: absolute; left: 16px; top: -64px; z-index: 200; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font: 500 14px/1 var(--font-body); } .skip-link:focus { top: 16px; } /* -------------------------------------------------------------------------- 3. Layout helpers -------------------------------------------------------------------------- */ .wrap { max-width: 1280px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); } .section { padding-block: clamp(72px, 9vw, 120px); } .section--tight { padding-block: clamp(28px, 4vw, 64px); } /* -------------------------------------------------------------------------- 4. Type scale (spec §2) -------------------------------------------------------------------------- */ .display { font-family: var(--font-head); font-weight: 700; font-size: clamp(44px, 7vw, 92px); line-height: 1.0; letter-spacing: -.04em; } .display--sm { font-size: clamp(40px, 6vw, 64px); } /* legal page H1 */ .h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(34px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -.03em; } .h3 { font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.25; } .h4 { font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.3; } .lead { font-size: clamp(18px, 2vw, 20px); line-height: 1.6; color: var(--ink-soft); } .mono-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); } /* -------------------------------------------------------------------------- 5. Eyebrow (spec §3.1) -------------------------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px; } .eyebrow-mark { width: 10px; height: 10px; border: 1px solid var(--accent); flex: none; } /* -------------------------------------------------------------------------- 6. Split section header (spec §3.2) -------------------------------------------------------------------------- */ .split-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); } /* -------------------------------------------------------------------------- 7. CTA bars (spec §3.3) -------------------------------------------------------------------------- */ .cta-bars { display: grid; gap: 12px; } .cta-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 15px 15px 15px 22px; border-radius: 14px; background: #fff; border: 1px solid var(--hairline); color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 17px; transition: transform .25s var(--ease-out); } .cta-bar:hover { transform: translateX(2px); } .cta-arrow { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--hairline); font-size: 17px; line-height: 1; transition: background .25s ease, color .25s ease, border-color .25s ease; } .cta-bar:hover .cta-arrow { background: var(--accent); border-color: var(--accent); color: #fff; } .cta-bar--solid { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); border-color: transparent; color: #fff; } .cta-bar--solid .cta-arrow { border-color: rgba(255, 255, 255, .35); } .cta-bar--solid:hover .cta-arrow { background: #fff; border-color: #fff; color: var(--accent-deep); } /* -------------------------------------------------------------------------- 8. Pill buttons (spec §3.4) -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; border-radius: 999px; padding: 13px 26px; font: 500 15px/1.2 var(--font-body); white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(74, 100, 133, .38); } .btn:active { transform: translateY(0); } .btn--light { background: #fff; color: var(--ink); } .btn--light:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .3); } /* -------------------------------------------------------------------------- 9. Cards + card grids (spec §3.5) -------------------------------------------------------------------------- */ .card { background: var(--card); border-radius: var(--radius); padding: 28px; transition: transform .3s ease, box-shadow .3s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(19, 19, 19, .08); } .card-art { min-height: 150px; display: grid; place-items: center; margin-bottom: 20px; } .card .h3, .card .h4 { margin-bottom: 10px; } .card p { color: var(--ink-soft); font-size: 15px; } .card-grid { display: grid; gap: 18px; } .card-grid + .card-grid { margin-top: 18px; } .card-grid--2 { grid-template-columns: repeat(2, 1fr); } .card-grid--3 { grid-template-columns: repeat(3, 1fr); } .card-grid--4 { grid-template-columns: repeat(4, 1fr); } /* -------------------------------------------------------------------------- 10. Iso art — pure CSS isometric plates (spec §3.6) The element itself is the top (gradient) plate; ::before/::after are the two outlined plates stacked beneath via translateZ in the rotated frame. -------------------------------------------------------------------------- */ .iso { --plate: linear-gradient(135deg, var(--accent-soft), var(--accent)); position: relative; width: 96px; height: 96px; margin-bottom: 22px; /* optically recenters the downward-stacked plates */ background: var(--plate); transform: rotateX(60deg) rotateZ(45deg); transform-style: preserve-3d; } .iso::before, .iso::after { content: ""; position: absolute; inset: 0; } .iso::before { border: 1px solid var(--accent); opacity: .4; transform: translateZ(-14px); } .iso::after { border: 1px solid var(--accent-soft); opacity: .9; transform: translateZ(-28px); } .iso--lg { width: 140px; height: 140px; } /* Variant top plates — abstract, blueprint-like */ .iso--rows { /* 3 thin stacked bars */ background: var(--plate), var(--plate), var(--plate); background-size: 100% 22%; background-position: 0 0, 0 50%, 0 100%; background-repeat: no-repeat; } .iso--grid { /* 2×2 mini grid */ background: var(--plate), var(--plate), var(--plate), var(--plate); background-size: 44% 44%; background-position: 0 0, 100% 0, 0 100%, 100% 100%; background-repeat: no-repeat; } .iso--cols { /* 2 vertical columns */ background: var(--plate), var(--plate); background-size: 44% 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; } .iso--ring { /* outlined plate, small filled core */ background: var(--plate); background-size: 36% 36%; background-position: 50% 50%; background-repeat: no-repeat; border: 2px solid var(--accent); } /* -------------------------------------------------------------------------- 11. Marquees (spec §3.7) JS duplicates track content (even number of identical sets) and adds .is-dup — only then does the animation start, so a no-JS page shows a static, visible row. -------------------------------------------------------------------------- */ .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: inline-flex; align-items: center; white-space: nowrap; padding-block: 4px; will-change: transform; } /* Spacing lives on items (not flex gap) so the -50% loop point is seamless */ .marquee-track > * { flex: none; margin-right: 16px; } .marquee-track.is-dup { animation: marquee-scroll 40s linear infinite; } .marquee--reverse .marquee-track { animation-direction: reverse; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Mono list items for the hero marquee — separator dot auto-appended */ .marquee-item { font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); } .marquee-track > .marquee-item { margin-right: 0; } .marquee-item::after { content: "·"; color: var(--accent); margin: 0 26px; } /* Chip marquee row (pain section) */ .marquee--chips { padding-block: 6px; } /* -------------------------------------------------------------------------- 12. Pain chips (spec §3.8) The "!" square icon is generated — author just writes text in the chip. -------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--hairline); border-radius: 999px; padding: 9px 20px 9px 9px; font-family: var(--font-mono); font-size: 14px; color: var(--ink-soft); white-space: nowrap; } .chip::before { content: "!"; width: 24px; height: 24px; flex: none; display: grid; place-items: center; background: var(--accent); color: #fff; border-radius: 7px; font-size: 12px; font-weight: 500; } /* -------------------------------------------------------------------------- 14. Nav (spec §3.11) Sticky (so the top strip scrolls away naturally); transparent until scrolled 40px, then script.js adds .is-scrolled. -------------------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 100; background: transparent; transition: background .3s ease, box-shadow .3s ease; } .nav.is-scrolled { background: rgba(250, 250, 248, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--hairline); } .nav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; } .nav-brand { display: inline-flex; align-items: baseline; gap: 10px; } .nav-wordmark { font-family: var(--font-head); font-weight: 900; font-size: 20px; letter-spacing: -.02em; color: var(--ink); } .nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 28px; } .nav-link { font-size: 14px; font-weight: 500; color: var(--ink-soft); transition: color .2s ease; } .nav-link:hover { color: var(--ink); } /* Hamburger — two bars that form an X via [aria-expanded] */ .nav-toggle { display: none; flex-direction: column; gap: 6px; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--hairline); border-radius: 10px; } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform .3s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); } /* Full-screen mobile drawer */ .nav-drawer { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: 100px clamp(20px, 6vw, 48px) 48px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; } .nav-drawer.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .35s ease; } .drawer-links { display: flex; flex-direction: column; gap: 10px; } .drawer-link { font-family: var(--font-head); font-weight: 700; font-size: clamp(32px, 9vw, 44px); letter-spacing: -.02em; line-height: 1.15; color: var(--ink); transition: color .2s ease; } .drawer-link:hover { color: var(--accent-deep); } @media (min-width: 881px) { .nav-drawer { display: none; } } /* -------------------------------------------------------------------------- 15. Hero helpers -------------------------------------------------------------------------- */ .hero { padding-top: clamp(40px, 7vw, 90px); } .hero .display { max-width: 1100px; } .hero .lead { max-width: 560px; } .hero-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 5vw, 80px); margin-top: clamp(28px, 4vw, 48px); } /* Hero vignettes — two illustrative product cards on a blueprint backdrop: the text-back exchange and the 30-day report (shapes, no numbers) */ .hero-vignette { display: grid; gap: 16px; padding: clamp(20px, 2.5vw, 34px); border: 1px solid var(--hairline); border-radius: var(--radius); background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px); background-size: 24px 24px; } .vig { background: #fff; border: 1px solid var(--hairline); border-radius: 14px; padding: 18px; width: min(360px, 100%); box-shadow: 0 14px 34px rgba(19, 19, 19, .07); } .vig--chat { justify-self: start; transform: rotate(-1deg); } .vig--report { justify-self: end; transform: rotate(1deg); margin-top: -6px; } .vig-title { display: block; margin-bottom: 12px; color: var(--accent-deep); } .vig-bubble { width: fit-content; max-width: 92%; background: var(--card); color: var(--ink-soft); border-radius: 11px; border-bottom-left-radius: 4px; padding: 9px 13px; font-size: 13.5px; line-height: 1.45; margin-top: 8px; } .vig-bubble--out { background: var(--ink); color: #fff; margin-left: auto; border-radius: 11px; border-bottom-right-radius: 4px; } .vig-row { display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 14px; margin-top: 12px; font-size: 12.5px; color: var(--muted); } .vig-bars { display: grid; gap: 4px; } .vig-bars i { display: block; height: 8px; border-radius: 4px; } .vig-bars i:first-child { background: rgba(19, 19, 19, .12); } .vig-bars i:last-child { background: linear-gradient(90deg, var(--accent), var(--accent-deep)); } .vig-key { display: block; margin-top: 16px; } /* -------------------------------------------------------------------------- 16. Pain rows — two tight opposing chip marquees under the section head -------------------------------------------------------------------------- */ .pain-rows { display: grid; gap: 14px; } /* -------------------------------------------------------------------------- 17. Sticky process (spec §3.9) Left rail pins for the whole section; script.js rebuilds the static ".process-counter" text (author "/01") into a rolling digit column. -------------------------------------------------------------------------- */ .process { position: relative; } .process-layout { display: grid; grid-template-columns: 220px 1fr; gap: clamp(32px, 5vw, 72px); } .process-rail { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; } .process-counter { display: flex; font-family: var(--font-head); font-weight: 700; font-size: 56px; line-height: 1; color: #C9C9CE; } /* JS-generated roll structure */ .counter-roll { display: block; height: 1em; overflow: hidden; } .counter-roll-inner { display: flex; flex-direction: column; transition: transform .6s var(--ease-out); } .counter-roll-inner span { display: block; height: 1em; line-height: 1; } .process-step { /* Just enough scroll per step for the counter to roll — anything taller reads as dead space between steps */ min-height: 50vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 4vw, 56px); padding-block: 12px; } /* Blueprint backdrop behind each step's iso art — fills the column instead of floating in open space (echoes the hero vignette panel) */ .process-art { display: grid; place-items: center; width: 100%; min-height: 260px; border: 1px solid var(--hairline); border-radius: var(--radius); background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px); background-size: 24px 24px; } .process-copy { max-width: 480px; } .process-copy .h3 { margin-bottom: 12px; } .process-copy p { color: var(--ink-soft); } /* Inline per-step counter — mobile only (rail hidden there) */ .step-num { display: none; } /* The build stack — ONE structure assembled across the four steps. Same isometric frame every step; plates accumulate and dashed wireframes become filled layers as the process advances. */ .stack { position: relative; width: 168px; height: 168px; margin-bottom: 40px; /* plates rise upward — recenters optically */ transform: rotateX(57deg) rotateZ(45deg); transform-style: preserve-3d; } .plate { position: absolute; inset: 0; border-radius: 10px; } .plate.p1 { transform: translateZ(0); border: 1.5px solid var(--accent); } .plate.p2 { transform: translateZ(30px); } .plate.p3 { transform: translateZ(60px); } .plate.p4 { transform: translateZ(90px); } /* /01 Consult — survey: dashed ground, one small marker where the leak is */ .stack--s1 .p1 { border-style: dashed; } .stack--s1 .p2 { transform: translateZ(22px) scale(.3); background: linear-gradient(135deg, var(--accent-soft), var(--accent)); } .stack--s1 .p3, .stack--s1 .p4 { display: none; } /* /02 Blueprint — the plan drawn: wireframe layers above a solid base */ .stack--s2 .p2 { border: 1.5px dashed var(--accent); } .stack--s2 .p3 { border: 1.5px dashed var(--accent); opacity: .5; } .stack--s2 .p4 { display: none; } /* /03 Build — layers fill in; the next one is being placed */ .stack--s3 .p2 { background: linear-gradient(135deg, var(--accent-soft), var(--accent)); } .stack--s3 .p3 { background: linear-gradient(135deg, var(--accent-soft), var(--accent)); } .stack--s3 .p4 { border: 1.5px dashed var(--accent); opacity: .5; } /* /04 Optimize — complete and running; top layer carries the signal */ .stack--s4 .p2, .stack--s4 .p3 { background: linear-gradient(135deg, var(--accent-soft), var(--accent)); } .stack--s4 .p4 { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); box-shadow: 0 14px 34px rgba(74, 100, 133, .4); } /* Plates assemble bottom-up when the step scrolls in */ .js [data-reveal]:not(.is-in) .plate { opacity: 0; } .js [data-reveal]:not(.is-done) .plate { transition: opacity .5s var(--ease-out); } .js [data-reveal].is-in .p1 { transition-delay: .05s; } .js [data-reveal].is-in .p2 { transition-delay: .2s; } .js [data-reveal].is-in .p3 { transition-delay: .35s; } .js [data-reveal].is-in .p4 { transition-delay: .5s; } /* -------------------------------------------------------------------------- 18. Works-with list — one quiet mono row instead of a logo wall (reuses .marquee-item styling for the dot separators) -------------------------------------------------------------------------- */ .tech-list { display: flex; flex-wrap: wrap; align-items: center; row-gap: 16px; } /* -------------------------------------------------------------------------- 19. About -------------------------------------------------------------------------- */ .about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; } /* -------------------------------------------------------------------------- 20. FAQ — styled
accordion -------------------------------------------------------------------------- */ .faq-list { border-top: 1px solid var(--hairline); } .faq-item { border-bottom: 1px solid var(--hairline); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 18px; list-style: none; } .faq-q::-webkit-details-marker { display: none; } .faq-q::marker { content: ""; } .faq-q::after { content: "+"; flex: none; font-family: var(--font-mono); font-size: 22px; font-weight: 400; line-height: 1; color: var(--accent-deep); transition: transform .3s ease; } .faq-item[open] .faq-q::after { transform: rotate(45deg); } .faq-a { padding: 0 0 24px; max-width: 720px; color: var(--ink-soft); } .faq-item[open] .faq-a { animation: faq-in .35s var(--ease-out); } @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } } /* -------------------------------------------------------------------------- 21. Legal pages (terms.html / privacy.html) -------------------------------------------------------------------------- */ .legal-header { padding-top: clamp(40px, 6vw, 72px); } .legal-header .mono-label { display: block; margin-top: 18px; } .legal-header .mono-label + .mono-label { margin-top: 8px; } .legal-backlink { color: var(--accent-deep); } .legal-backlink:hover { color: var(--ink); } .legal-content { max-width: 760px; padding-bottom: clamp(72px, 9vw, 120px); } .legal-content > .lead { margin-top: 24px; } .legal-section { margin-top: 48px; border-top: 1px solid var(--hairline); padding-top: 32px; } .legal-section .h3 { margin-bottom: 14px; } .legal-section p { margin: 12px 0; color: var(--ink-soft); } /* Accent square list markers */ .legal-section ul { list-style: none; padding: 0; margin: 14px 0; } .legal-section li { position: relative; padding-left: 24px; margin: 10px 0; color: var(--ink-soft); } .legal-section li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--accent); } /* Subsection headings inside a legal section (e.g. privacy §1, §4) */ .legal-section .h4 { margin: 22px 0 6px; } /* Inline links in legal copy (contact blocks, mailto) */ .legal-section a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; } .legal-section a:hover { color: var(--ink); } /* The date-line rule above also matches the eyebrow's label — restore its alignment inside the eyebrow row */ .legal-header .eyebrow .mono-label { margin-top: 0; } /* -------------------------------------------------------------------------- 22. Dark footer (spec §3.12) -------------------------------------------------------------------------- */ .footer { background: var(--dark); color: var(--dark-text); } .footer-top { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(72px, 9vw, 110px) 0 56px; border-bottom: 1px solid var(--hairline-dark); } .footer-top .h2 { max-width: 640px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0 64px; } .footer-col p { color: rgba(237, 237, 240, .78); font-size: 15px; margin: 14px 0; } .footer-col .mono-label { display: block; margin-bottom: 14px; } .footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .footer-link { color: var(--dark-text); opacity: .85; transition: color .2s ease, opacity .2s ease; } .footer-link:hover { color: var(--accent-soft); opacity: 1; } .footer-bottom { border-top: 1px solid var(--hairline-dark); padding: 26px 0 10px; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: rgba(237, 237, 240, .55); } .footer-egg { text-align: center; font-style: italic; font-size: 12.5px; color: rgba(237, 237, 240, .45); padding: 14px 0 30px; } /* -------------------------------------------------------------------------- 23. Reveal animations (spec §3.10) Hidden states only under html.js. ".is-in" = revealed (end state); ".is-done" (added by JS after the transition settles) releases the transition override so component hovers (cards, bars) run at full speed. -------------------------------------------------------------------------- */ /* Fade-up */ .js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); filter: blur(6px); } .js [data-reveal]:not(.is-done) { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out); } .js [data-reveal].is-in { opacity: 1; transform: none; filter: none; } /* Optional 80ms delay steps */ .js [data-reveal][data-delay="1"]:not(.is-done) { transition-delay: 80ms; } .js [data-reveal][data-delay="2"]:not(.is-done) { transition-delay: 160ms; } .js [data-reveal][data-delay="3"]:not(.is-done) { transition-delay: 240ms; } .js [data-reveal][data-delay="4"]:not(.is-done) { transition-delay: 320ms; } .js [data-reveal][data-delay="5"]:not(.is-done) { transition-delay: 400ms; } .js [data-reveal][data-delay="6"]:not(.is-done) { transition-delay: 480ms; } /* Letter reveal (hero H1) — spans are JS-generated, so no-JS = plain text */ .js [data-reveal-letters] .rv-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; /* keep descenders unclipped */ } .rv-letter { display: inline-block; } .js [data-reveal-letters]:not(.is-in) .rv-letter { transform: translateY(110%); } .js [data-reveal-letters]:not(.is-done) .rv-letter { transition: transform .7s var(--ease-out); } .js [data-reveal-letters].is-in .rv-letter { transform: translateY(0); } /* Word reveal (lead paragraphs) */ .rv-w { display: inline-block; } .js [data-reveal-words]:not(.is-in) .rv-w { opacity: .15; } .js [data-reveal-words]:not(.is-done) .rv-w { transition: opacity .55s ease; } .js [data-reveal-words].is-in .rv-w { opacity: 1; } /* Stagger — direct children rise in sequence (delays set inline by JS) */ .js [data-stagger]:not(.is-in) > * { opacity: 0; transform: translateY(24px); } .js [data-stagger]:not(.is-done) > * { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .js [data-stagger].is-in > * { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 24. Responsive — 880px -------------------------------------------------------------------------- */ @media (max-width: 880px) { .nav-links, .nav-cta { display: none; } .nav-toggle { display: inline-flex; } .nav-inner { min-height: 64px; } .split-head { grid-template-columns: 1fr; gap: 18px; align-items: start; } .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); } .hero-row { grid-template-columns: 1fr; } .hero-vignette { display: none; } .about-grid { grid-template-columns: 1fr; } /* Process panels stack; counter goes inline per step */ .process-layout { grid-template-columns: 1fr; } .process-rail { display: none; } .process-step { grid-template-columns: 1fr; min-height: 0; align-items: start; gap: 24px; padding: 40px 0; } .step-num { display: inline-flex; margin-bottom: 14px; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-top { flex-direction: column; align-items: flex-start; gap: 28px; } } /* -------------------------------------------------------------------------- 25. Responsive — 560px -------------------------------------------------------------------------- */ @media (max-width: 560px) { .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; } .cta-bar { padding: 14px 12px 14px 18px; font-size: 16px; } .chip { font-size: 13px; } .faq-q { font-size: 17px; } .footer-grid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 26. Reduced motion — kill all animation, force everything visible (script.js also bails out of its animation wiring) -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; } .marquee-track.is-dup { animation: none !important; } .js [data-reveal], .js [data-stagger] > *, .js [data-reveal-letters] .rv-letter, .js [data-reveal-words] .rv-w { opacity: 1 !important; transform: none !important; filter: none !important; } /* Stack plates keep their 3D transforms (transform:none would flatten the isometric frame) — just never hide them */ .js [data-reveal] .plate { opacity: 1 !important; } } /* -------------------------------------------------------------------------- 27. Method / stats / who / promise — patterns added with the measurement positioning (baseline → build → 30-day report) -------------------------------------------------------------------------- */ /* Small mono note under the hero CTA bars */ .cta-note { display: block; margin-top: 16px; } /* Mono step number / tag pinned at the top of a card */ .card-num, .card-tag { display: block; margin-bottom: 14px; } .card-num { color: var(--accent-deep); } .card-tag { color: var(--accent-deep); letter-spacing: .18em; } /* "The out" callout — hairline box with an accent edge */ .callout { max-width: 760px; margin-top: clamp(28px, 4vw, 44px); padding: 22px 26px; border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: #fff; color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; } .callout strong { color: var(--ink); font-weight: 600; } /* Stat row — big Satoshi numbers over mono labels, hairline-separated */ .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: clamp(48px, 7vw, 80px); border-top: 1px solid var(--hairline); padding-top: clamp(32px, 5vw, 48px); } .stat { display: grid; gap: 12px; align-content: start; } .stat-num { font-family: var(--font-head); font-weight: 700; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.03em; color: var(--ink); } .stat-label { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 260px; } .stat-foot { display: block; margin-top: clamp(28px, 4vw, 40px); } /* Who it's for — centered head + wrapping chip rows */ .who-head { text-align: center; max-width: 760px; margin-inline: auto; } .who-head .eyebrow { justify-content: center; } .who-head .h2 { margin-bottom: 18px; } .who-head .lead { margin-inline: auto; } .chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(32px, 5vw, 48px); } /* Plain chips (no "!" icon) — neutral accent square instead */ .chip--plain { padding: 9px 20px 9px 16px; } .chip--plain::before { content: ""; width: 8px; height: 8px; border-radius: 0; background: var(--accent); } /* The deal — dark statement card */ .promise-card { background: var(--dark); color: var(--dark-text); border-radius: 24px; padding: clamp(48px, 7vw, 88px) clamp(28px, 6vw, 88px); text-align: center; } .promise-card .h2 { color: #fff; max-width: 640px; margin: 0 auto 22px; } .promise-card > p { max-width: 620px; margin-inline: auto; color: rgba(237, 237, 240, .78); } .promise-proof { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hairline-dark); } .promise-proof .mono-label { display: block; margin-bottom: 10px; color: rgba(237, 237, 240, .5); } @media (max-width: 880px) { .stat-row { grid-template-columns: repeat(3, 1fr); gap: 20px; } } @media (max-width: 560px) { .stat-row { grid-template-columns: 1fr; gap: 28px; } .stat-label { max-width: none; } .chip-row { gap: 9px; } } /* -------------------------------------------------------------------------- 23. Subpages — /book + /free-audit -------------------------------------------------------------------------- */ .subpage-main { padding-bottom: clamp(72px, 9vw, 120px); } .subpage-lead { max-width: 720px; margin-top: 24px; } /* Booking page */ .booking-meta { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 26px; } /* cancel the .legal-header .mono-label block/margin rules inside the meta row */ .booking-meta .mono-label { color: var(--accent-deep); margin-top: 0; } .booking-meta .mono-label + .mono-label { margin-top: 0; } .booking-panel { margin-top: clamp(32px, 5vw, 56px); background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; } .booking-frame { display: block; width: 100%; height: 940px; border: 0; } .booking-aside { margin-top: 22px; font-size: 15px; color: var(--ink-soft); } .booking-aside a { color: var(--accent-deep); } .booking-aside a:hover { color: var(--ink); } /* Free site scan page */ .audit-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 80px); align-items: start; } /* The form column starts level with the headline column */ .audit-layout .form-card { margin-top: clamp(40px, 6vw, 72px); } .audit-subhead { margin-top: 44px; } .check-list { list-style: none; padding: 0; margin: 20px 0 0; } .check-list li { position: relative; padding-left: 32px; margin: 12px 0; color: var(--ink-soft); font-size: 15px; } .check-list li::before { content: "\2713"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; display: grid; place-items: center; background: var(--accent); color: #fff; border-radius: 6px; font-size: 11px; font-weight: 700; } .scan-note { display: inline-flex; align-items: baseline; gap: 14px; margin-top: 30px; background: #fff; border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 18px; font-size: 14px; color: var(--ink-soft); } .scan-note .mono-label { color: var(--accent-deep); } /* Lead form */ .form-card { background: var(--card); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); } .form-sub { font-size: 14px; color: var(--muted); margin: 6px 0 24px; } .field { margin-bottom: 16px; } .field label { display: block; margin-bottom: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); } .field .req { color: var(--accent-deep); } .field .opt { color: var(--muted); } .field input, .field textarea { width: 100%; background: #fff; border: 1px solid var(--hairline); border-radius: 10px; padding: 12px 14px; font: 400 15px/1.4 var(--font-body); color: var(--ink); transition: border-color .2s ease; } .field input::placeholder, .field textarea::placeholder { color: var(--muted); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); } .field textarea { resize: vertical; min-height: 96px; } .btn--block { width: 100%; } .btn[disabled] { opacity: .6; cursor: progress; transform: none; box-shadow: none; } .form-error { display: none; margin: 0 0 14px; font-size: 14px; color: #B23B22; } .form-error.is-visible { display: block; } .form-success { outline: none; } .success-mark { width: 44px; height: 44px; display: grid; place-items: center; background: var(--accent); color: #fff; border-radius: 12px; font-size: 18px; margin-bottom: 18px; } .form-success .h3 { margin-bottom: 8px; } .form-success p { color: var(--ink-soft); font-size: 15px; } @media (max-width: 880px) { .audit-layout { grid-template-columns: 1fr; } .audit-layout .form-card { margin-top: 0; } .booking-frame { height: 1050px; } }