/* Aivonto.com shared styles. Linked by index.html and audit/index.html. */ /* Subset woff2, built from the .ttf sources in fonts/ with fontTools. Latin + Latin Extended-A/B, punctuation, currency and arrows: everything the site uses plus room for European names. All OpenType features are kept, because doc-sheet.css asks for tabular-nums and lining-nums. Rebuild command lives in fonts/README.md. */ @font-face{font-family:"Libre Caslon Display";src:url("fonts/LibreCaslonDisplay-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Inter";src:url("fonts/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;} @font-face{font-family:"Inter";src:url("fonts/Inter-Italic-Variable.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap;} @font-face{font-family:"Jost";src:url("fonts/Jost-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;} :root{ --brown:#131211; --gutter:clamp(20px,5vw,80px); --maxw:1200px; } *{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body{ background:var(--brown); color:#ECE6DD; font-family:"Inter",system-ui,sans-serif; line-height:1.7; overflow-x:hidden; } ::selection{ background:rgba(199,123,74,.32); color:#fff; } .font-display{ font-family:"Libre Caslon Display",Georgia,serif; letter-spacing:-.02em; } .font-label{ font-family:"Jost",system-ui,sans-serif; } .shell{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .eyebrow{ font-family:"Jost",system-ui,sans-serif; text-transform:uppercase; letter-spacing:.3em; font-size:clamp(10px,1.1vw,12px); font-weight:500; color:#C77B4A; } /* ---------- Buttons ---------- */ .btn-copper{ position:relative; display:inline-flex; align-items:center; gap:.6em; padding:1rem 1.9rem; border-radius:14px; font-family:"Inter",sans-serif; font-weight:600; font-size:.95rem; letter-spacing:.005em; color:#1b1410; text-decoration:none; cursor:pointer; border:0; background:linear-gradient(176deg,#E6A878 0%,#C77B4A 48%,#A85E2E 100%); box-shadow: inset 0 1px 0 rgba(255,244,235,.5), inset 0 -8px 16px rgba(120,60,24,.35), 0 22px 45px -20px rgba(199,123,74,.7), 0 2px 6px rgba(0,0,0,.35); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1), filter .35s ease; will-change:transform; } .btn-copper svg{ width:1.05em; height:1.05em; transition:transform .35s cubic-bezier(.2,.7,.2,1); } .btn-copper:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:inset 0 1px 0 rgba(255,244,235,.55), inset 0 -8px 16px rgba(120,60,24,.35), 0 30px 55px -20px rgba(199,123,74,.85), 0 3px 8px rgba(0,0,0,.4); } .btn-copper:hover svg{ transform:translateX(3px); } .btn-copper:active{ transform:translateY(0); filter:brightness(.98); } .btn-copper:focus-visible{ outline:2px solid #E6A878; outline-offset:3px; } .btn-ghost{ display:inline-flex; align-items:center; gap:.5em; font-family:"Inter",sans-serif; font-weight:500; font-size:.95rem; color:#ECE6DD; text-decoration:none; padding:.35rem .1rem; border-bottom:1px solid transparent; transition:color .3s ease, border-color .3s ease, gap .3s ease; } .btn-ghost svg{ width:1em; height:1em; color:#C77B4A; transition:transform .3s ease; } .btn-ghost:hover{ color:#fff; gap:.75em; } .btn-ghost:hover svg{ transform:translateY(2px); } .btn-ghost:focus-visible{ outline:2px solid #C77B4A; outline-offset:3px; border-radius:4px; } /* ---------- Navigation ---------- */ .nav{ position:fixed; inset:0 0 auto 0; z-index:50; background:rgba(19,18,17,.72); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); border-bottom:1px solid rgba(236,230,221,.08); transition:background-color .4s ease, border-color .4s ease; } .nav.scrolled{ background:rgba(19,18,17,.88); border-bottom-color:rgba(236,230,221,.12); } .nav-link{ position:relative; font-family:"Inter",sans-serif; font-size:.92rem; font-weight:450; color:#B7AFA4; text-decoration:none; padding:.4rem 0; transition:color .3s ease; } .nav-link::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:#C77B4A; transition:width .35s cubic-bezier(.2,.7,.2,1); } .nav-link:hover{ color:#ECE6DD; } .nav-link:hover::after{ width:100%; } .nav-link:focus-visible{ outline:2px solid #C77B4A; outline-offset:4px; border-radius:3px; } /* Current page. Declared after the hover rules so hovering it does not flip it back to white, and carrying the underline as well as the colour, so it is not signalled by hue alone. */ /* "true" rather than "page" marks the parent of the page you are on, which is how /audit/example/ keeps Audit lit without claiming to be that page. */ .nav-link[aria-current="page"], .nav-link[aria-current="true"]{ color:#C77B4A; } .nav-link[aria-current="page"]::after, .nav-link[aria-current="true"]::after{ width:100%; } .nav-link[aria-current="page"]:hover, .nav-link[aria-current="true"]:hover{ color:#E6A878; } .nav-inner{ max-width:1320px; margin-inline:auto; padding-inline:var(--gutter); display:flex; align-items:center; justify-content:space-between; height:84px; } .nav-desktop{ display:flex; align-items:center; } .nav-links{ gap:2.4rem; } .nav-cta{ padding:.7rem 1.35rem; font-size:.9rem; } .menu-btn{ display:none; background:none; border:0; color:#ECE6DD; padding:.5rem; cursor:pointer; } .menu-btn:focus-visible{ outline:2px solid #C77B4A; outline-offset:3px; border-radius:6px; } /* mobile menu panel */ .mobile-menu{ position:fixed; inset:84px 0 auto 0; z-index:49; display:none; background:rgba(19,18,17,.96); backdrop-filter:blur(16px); border-bottom:1px solid rgba(236,230,221,.1); padding:1.5rem var(--gutter) 2.2rem; } .mobile-menu.open{ display:block; } .mobile-menu a.m-link{ display:block; font-family:"Libre Caslon Display",serif; font-size:1.6rem; color:#ECE6DD; text-decoration:none; padding:.7rem 0; border-bottom:1px solid rgba(236,230,221,.07); transition:color .3s ease; } .mobile-menu a.m-link:hover{ color:#C77B4A; } .mobile-menu a.m-link[aria-current="page"], .mobile-menu a.m-link[aria-current="true"]{ color:#C77B4A; } .mobile-menu .btn-copper{ margin-top:1.6rem; width:100%; justify-content:center; } /* ---------- Hero ---------- */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; } .hero-bg{ position:absolute; inset:0; z-index:0; } /* WebGL hero background (homepage). Taller than the hero so the scroll parallax has somewhere to travel without exposing the canvas edge. Sits above .hero-bg, which stays as the fallback when WebGL is missing, and below .grain / .vignette / .hero-inner. */ .hero-canvas{ position:absolute; top:-15%; left:0; width:100%; height:130%; z-index:0; display:block; pointer-events:none; opacity:0; transition:opacity 1.4s cubic-bezier(.2,.7,.2,1); } .hero-canvas.is-ready{ opacity:1; } /* smoky, layered warm-brown atmosphere + low copper ember */ .hero-bg::before{ content:""; position:absolute; inset:-10%; background: radial-gradient(60% 55% at 22% 18%, rgba(58,48,40,.85) 0%, rgba(19,18,17,0) 60%), radial-gradient(50% 60% at 82% 30%, rgba(40,34,29,.7) 0%, rgba(19,18,17,0) 55%), radial-gradient(75% 60% at 50% 118%, rgba(199,123,74,.16) 0%, rgba(199,123,74,0) 55%), radial-gradient(120% 90% at 50% -10%, rgba(30,26,22,.9) 0%, rgba(19,18,17,0) 60%); filter:blur(6px); } /* diagonal smoke wisp */ .hero-bg::after{ content:""; position:absolute; inset:0; background: conic-gradient(from 200deg at 60% 40%, rgba(0,0,0,0) 0deg, rgba(60,52,44,.28) 60deg, rgba(0,0,0,0) 150deg, rgba(48,40,34,.22) 250deg, rgba(0,0,0,0) 330deg); opacity:.7; mix-blend-mode:screen; } .grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px; } .vignette{ position:absolute; inset:0; z-index:1; pointer-events:none; box-shadow:inset 0 -120px 160px -80px rgba(0,0,0,.75), inset 0 90px 120px -80px rgba(0,0,0,.55); } /* Hands the hero off to the page background. It matters on the homepage, where the shader canvas runs darker than #131211 and would otherwise end on a hard horizontal edge. As a pseudo-element it paints after .vignette, so it also covers that element's bottom inset shadow. Invisible on heroes with no canvas. */ .hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:26%; z-index:1; pointer-events:none; background:linear-gradient(to bottom, rgba(19,18,17,0) 0%, rgba(19,18,17,.72) 62%, #131211 100%); } .hero-inner{ position:relative; z-index:2; width:100%; text-align:center; padding-block:8rem 5rem; } .hero h1{ font-family:"Libre Caslon Display",Georgia,serif; font-weight:400; letter-spacing:-.03em; line-height:1.03; font-size:clamp(2.6rem,6.4vw,5.4rem); color:#F3EEE7; max-width:16ch; margin-inline:auto; } .hero h1 em{ font-style:italic; color:#C77B4A; } .hero-sub{ margin:1.9rem auto 0; max-width:44ch; color:#B7AFA4; font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.6; } .hero-actions{ margin-top:2.6rem; display:flex; gap:1.6rem; align-items:center; justify-content:center; flex-wrap:wrap; } .hero-spine{ margin-top:3.4rem; display:inline-flex; gap:1.1rem; align-items:center; flex-wrap:wrap; justify-content:center; font-family:"Jost",system-ui,sans-serif; text-transform:uppercase; letter-spacing:.24em; font-size:clamp(10px,1.1vw,12px); color:#948C81; font-weight:500; } .hero-spine span{ color:#ECE6DD; } .hero-spine .sep{ color:#C77B4A; font-size:1.1em; } .scroll-cue{ position:absolute; left:50%; bottom:2rem; transform:translateX(-50%); z-index:2; font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.25em; font-size:10px; color:#7d766c; display:flex; flex-direction:column; align-items:center; gap:.6rem; } .scroll-cue .line{ width:1px; height:34px; background:linear-gradient(#C77B4A,transparent); } /* ---------- Shared sections ---------- */ .section{ position:relative; padding-block:clamp(5rem,10vw,9rem); } .section-head{ max-width:56ch; } .section-head.center{ margin-inline:auto; text-align:center; } .section-title{ font-family:"Libre Caslon Display",Georgia,serif; letter-spacing:-.03em; font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.05; color:#F3EEE7; margin-top:1rem; } .section-title em{ font-style:italic; color:#C77B4A; } .section-intro{ color:#B7AFA4; margin-top:1.2rem; font-size:clamp(1rem,1.3vw,1.12rem); } .divider-node{ display:flex; align-items:center; justify-content:center; gap:.9rem; } .divider-node .bar{ height:1px; width:56px; background:linear-gradient(90deg,transparent,#C77B4A); } .divider-node .bar.r{ background:linear-gradient(90deg,#C77B4A,transparent); } .divider-node .dot{ width:5px; height:5px; border-radius:50%; background:#C77B4A; } /* ---------- Story / Why ---------- */ .story-grid{ display:grid; grid-template-columns:.82fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; } /* The panel is a figure, not a monogram: the four workflows from the example Audit, each bar scaled to the hours it costs a week, the copper part what a system can take over. Same reading as the ledger on page 5 of the document, so the homepage and the Audit speak one visual language. It held a giant "A" before, which said nothing the signoff two columns over was not already saying. Bars share one scale, so 26.5h is visibly three times 9h. */ /* Height comes from the figure, not a fixed ratio: a 4/5 box left a void between the last bar and the legend. */ .story-panel{ position:relative; border-radius:22px; overflow:hidden; border:1px solid rgba(236,230,221,.09); background:radial-gradient(130% 120% at 28% 18%, #2c241d 0%, #191512 62%, #141210 100%); display:flex; flex-direction:column; gap:clamp(1.5rem,3.2vw,2.1rem); padding:clamp(1.5rem,3.4vw,2.1rem); margin:0; box-shadow:0 50px 90px -60px rgba(0,0,0,.9); } .story-panel > *:not(.grain){ position:relative; z-index:1; } .story-panel .panel-label{ flex:none; } .story-panel .grain{ opacity:.06; z-index:0; } .ledger{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(1rem,2.4vw,1.45rem); } .ledger__row{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.4rem .8rem; } .ledger__name{ font-size:clamp(.82rem,1.5vw,.95rem); color:#ECE6DD; line-height:1.3; } .ledger__hrs{ font-family:"Jost",sans-serif; font-size:clamp(.72rem,1.3vw,.82rem); letter-spacing:.08em; color:#8b8378; font-variant-numeric:tabular-nums; } .ledger__bar{ grid-column:1/-1; height:6px; border-radius:3px; width:var(--w); /* One element, one hard stop: copper is removable, the rest stays with a person. */ background:linear-gradient(90deg, #C77B4A 0 var(--take), rgba(236,230,221,.12) var(--take) 100%); box-shadow:0 1px 9px -3px rgba(199,123,74,.55); transform-origin:left center; } .panel-foot{ flex:none; display:flex; flex-direction:column; gap:.75rem; border-top:1px solid rgba(236,230,221,.09); padding-top:1rem; } .ledger__key{ display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:10px; color:#8b8378; } .ledger__key > span{ display:inline-flex; align-items:center; gap:.5rem; } .ledger__sw{ width:14px; height:4px; border-radius:2px; flex:none; } .ledger__sw--take{ background:#C77B4A; } .ledger__sw--stay{ background:rgba(236,230,221,.16); } .ledger__src{ font-size:.76rem; line-height:1.55; color:#7A7167; } .ledger__src a{ color:#B7AFA4; text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(199,123,74,.5); transition:color .3s ease, text-decoration-color .3s ease; } .ledger__src a:hover{ color:#E6A878; text-decoration-color:#C77B4A; } .ledger__src a:focus-visible{ outline:2px solid #C77B4A; outline-offset:3px; border-radius:2px; } /* The real logo, not a drawn "A" in a box. The hairline between the two keeps the wordmark from reading as the first word of the sentence after it. */ .signoff{ margin-top:2.2rem; display:flex; align-items:center; gap:.95rem; flex-wrap:wrap; } .signoff__logo{ height:28px; width:auto; flex:none; display:block; } .signoff .who{ font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; color:#ECE6DD; position:relative; padding-left:.95rem; } .signoff .who::before{ content:""; position:absolute; left:0; top:50%; width:1px; height:1.05em; transform:translateY(-50%); background:rgba(199,123,74,.45); } /* Below this the line cannot hold logo, rule and text, and the rule would be left stranded at the head of the wrapped line. Stack instead, no rule. */ @media (max-width:600px){ .signoff{ flex-direction:column; align-items:flex-start; gap:.8rem; } .signoff .who{ padding-left:0; } .signoff .who::before{ content:none; } } .story-body p{ color:#B7AFA4; margin-top:1.2rem; max-width:54ch; } /* ---------- Services 2x2 ---------- */ .cards-2x2{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:3.6rem; } .card-svc{ position:relative; border:1px solid rgba(236,230,221,.09); border-radius:20px; padding:2.5rem 2.3rem 2.6rem; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.008)); transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s ease, background .45s ease; } .card-svc::before{ content:""; position:absolute; top:0; left:2.3rem; width:34px; height:2px; background:#C77B4A; opacity:.9; } .card-svc:hover{ transform:translateY(-5px); border-color:rgba(199,123,74,.34); background:linear-gradient(180deg, rgba(199,123,74,.06), rgba(255,255,255,.01)); } .card-svc .icon{ width:44px; height:44px; color:#C77B4A; margin-bottom:1.5rem; } .card-svc h3{ font-family:"Libre Caslon Display",serif; font-size:1.6rem; color:#F3EEE7; letter-spacing:-.01em; } .card-svc p{ color:#B7AFA4; margin-top:.7rem; font-size:.98rem; line-height:1.65; } .card-svc--cta{ background:linear-gradient(180deg, rgba(199,123,74,.16), rgba(199,123,74,.03)); border-color:rgba(199,123,74,.32); display:flex; flex-direction:column; justify-content:space-between; } .card-svc--cta:hover{ background:linear-gradient(180deg, rgba(199,123,74,.22), rgba(199,123,74,.05)); } .card-svc--cta .kicker{ font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.22em; font-size:11px; color:#C77B4A; } /* ---------- Process bento ---------- */ .proc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:3.6rem; } /* 4-step variant (audit page). Media queries below reduce it to 2 then 1 column. */ .proc-grid--4{ grid-template-columns:repeat(4,1fr); } .proc-card{ position:relative; border:1px solid rgba(236,230,221,.09); border-radius:18px; padding:2rem 1.9rem 2.1rem; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006)); transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s ease; } .proc-card:hover{ transform:translateY(-4px); border-color:rgba(199,123,74,.3); } .proc-top{ display:flex; align-items:baseline; justify-content:space-between; } .proc-num{ font-family:"Libre Caslon Display",serif; font-size:2.5rem; line-height:1; background:linear-gradient(160deg,#E6C6A6,#C77B4A 60%,#9a5730); -webkit-background-clip:text; background-clip:text; color:transparent; } .proc-phase{ font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.2em; font-size:10px; color:#8b8378; } .proc-card h3{ font-family:"Inter",sans-serif; font-weight:600; font-size:1.1rem; color:#F3EEE7; margin-top:1.1rem; } .proc-card p{ color:#B7AFA4; font-size:.93rem; margin-top:.5rem; line-height:1.62; } /* ---------- Commercial model ledger ---------- */ .pay-ledger{ margin-top:3.6rem; border-top:1px solid rgba(236,230,221,.09); } .pay-row{ display:grid; grid-template-columns:.82fr 150px 1.3fr; gap:clamp(1rem,3vw,2.8rem); align-items:start; padding-block:clamp(1.7rem,3.2vw,2.3rem); border-bottom:1px solid rgba(236,230,221,.09); } .pay-name{ font-family:"Inter",sans-serif; font-weight:600; letter-spacing:-.01em; color:#F3EEE7; font-size:clamp(1.12rem,1.9vw,1.42rem); line-height:1.25; } .pay-amount{ display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; } .pay-figure{ display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; } .pay-vat{ font-family:"Inter",sans-serif; font-size:11px; color:#6f685f; line-height:1.3; } .pay-price{ font-family:"Libre Caslon Display",Georgia,serif; letter-spacing:-.02em; font-size:clamp(1.9rem,3vw,2.35rem); line-height:1; background:linear-gradient(160deg,#E6C6A6,#C77B4A 60%,#9a5730); -webkit-background-clip:text; background-clip:text; color:transparent; } .pay-quoted{ font-family:"Inter",sans-serif; font-weight:500; font-size:1rem; color:#8b8378; line-height:1.4; padding-block:.42rem; } .pay-cadence{ display:inline-flex; align-items:center; gap:.55rem; font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.18em; font-size:10px; color:#8b8378; border:1px solid rgba(236,230,221,.12); border-radius:999px; padding:.4rem .78rem; } .pay-cadence .node{ width:4px; height:4px; border-radius:50%; background:#8b8378; flex:none; } .pay-cadence.is-recurring{ color:#C77B4A; border-color:rgba(199,123,74,.34); } .pay-cadence.is-recurring .node{ background:#C77B4A; } .pay-row p{ color:#B7AFA4; line-height:1.7; font-size:clamp(.95rem,1.15vw,1.02rem); } .pay-gate{ display:grid; grid-template-columns:.82fr 150px 1.3fr; gap:clamp(1rem,3vw,2.8rem); border-bottom:1px solid rgba(236,230,221,.09); } .pay-gate-inner{ grid-column:2 / -1; border-left:2px solid #C77B4A; padding:1.15rem 0 1.15rem 1.35rem; margin-block:clamp(1.4rem,2.6vw,1.9rem); background:linear-gradient(90deg, rgba(199,123,74,.10), rgba(199,123,74,0) 96%); } .pay-gate-label{ font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.24em; font-size:10px; color:#C77B4A; } .pay-gate-text{ color:#ECE6DD; margin-top:.6rem; line-height:1.66; max-width:46ch; font-size:clamp(.95rem,1.15vw,1.02rem); } .pay-foot{ display:flex; align-items:flex-start; gap:.7rem; margin-top:1.8rem; color:#8b8378; font-size:.9rem; } .pay-foot .node{ width:5px; height:5px; border-radius:50%; background:#C77B4A; flex:none; margin-top:.62rem; } /* ---------- Why bento ---------- */ .why-bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:3.6rem; } .why-tile{ position:relative; border:1px solid rgba(236,230,221,.09); border-radius:18px; padding:2rem 1.9rem; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006)); transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s ease; } .why-tile:hover{ transform:translateY(-4px); border-color:rgba(199,123,74,.3); } .why-tile.lg{ grid-column:span 2; display:flex; flex-direction:column; justify-content:space-between; min-height:230px; background:radial-gradient(130% 150% at 12% 8%, rgba(199,123,74,.16), rgba(255,255,255,.01) 58%); border-color:rgba(199,123,74,.22); } .why-tile .wt-icon{ width:34px; height:34px; color:#C77B4A; margin-bottom:1.1rem; } .why-tile .wt-title{ font-family:"Libre Caslon Display",serif; font-size:1.4rem; color:#F3EEE7; letter-spacing:-.01em; } .why-tile.lg .wt-title{ font-size:clamp(1.7rem,2.4vw,2.2rem); line-height:1.12; max-width:24ch; } .why-tile p{ color:#B7AFA4; font-size:.95rem; margin-top:.7rem; line-height:1.62; } .why-tile.lg p{ font-size:1.02rem; max-width:46ch; } /* ---------- CTA band ---------- */ .cta-band{ position:relative; overflow:hidden; border-radius:28px; text-align:center; padding:clamp(3.5rem,8vw,6.5rem) 1.5rem; border:1px solid rgba(236,230,221,.08); background: radial-gradient(90% 150% at 50% 125%, rgba(199,123,74,.2), rgba(19,18,17,0) 60%), linear-gradient(180deg,#1c1815,#141210); } .cta-band .grain{ opacity:.05; } .cta-band h2{ position:relative; z-index:2; font-family:"Libre Caslon Display",serif; letter-spacing:-.03em; font-size:clamp(2rem,4.8vw,3.5rem); line-height:1.06; color:#F3EEE7; max-width:20ch; margin-inline:auto; } .cta-band h2 em{ font-style:italic; color:#C77B4A; } .cta-band p{ position:relative; z-index:2; color:#B7AFA4; margin:1.3rem auto 0; max-width:50ch; } .cta-band .btn-copper{ position:relative; z-index:2; margin-top:2.3rem; } /* Paired with a second link, the row supplies that spacing instead. Leaving the button's own top margin on knocks it 2.3rem out of line with the ghost link beside it and inflates the row. */ .cta-band .hero-actions{ margin-top:2.3rem; } .cta-band .hero-actions .btn-copper{ margin-top:0; } /* ---------- FAQ ---------- */ .faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; margin-top:3.4rem; } .faq-item{ border:1px solid rgba(236,230,221,.09); border-radius:16px; padding:1.9rem 1.9rem; background:linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.005)); } .faq-item h3{ font-family:"Libre Caslon Display",serif; font-size:1.28rem; color:#F3EEE7; line-height:1.25; display:flex; gap:.6rem; align-items:baseline; } .faq-item h3 .q{ color:#C77B4A; font-style:italic; } .faq-item p{ color:#B7AFA4; margin-top:.8rem; font-size:.96rem; line-height:1.65; } /* ---------- Contact ---------- */ .contact{ position:relative; overflow:hidden; } .contact .hero-bg{ opacity:.7; } .contact-inner{ position:relative; z-index:2; text-align:center; max-width:660px; margin-inline:auto; } .contact-actions{ margin-top:2.4rem; display:flex; gap:1.6rem; align-items:center; justify-content:center; flex-wrap:wrap; } .contact-detail{ margin-top:2.2rem; font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:#8b8378; } .contact-detail a{ color:#ECE6DD; text-decoration:none; border-bottom:1px solid rgba(199,123,74,.5); transition:color .3s; } .contact-detail a:hover{ color:#C77B4A; } /* ---------- Footer ---------- */ .footer{ border-top:1px solid rgba(236,230,221,.08); padding-block:3.6rem 2.4rem; } .footer-top{ display:flex; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; } .footer-brand{ max-width:34ch; } .footer-brand img{ height:26px; width:auto; } .footer-brand p{ color:#948C81; font-size:.9rem; margin-top:1.1rem; line-height:1.6; } .footer-cols{ display:flex; gap:4rem; flex-wrap:wrap; } .footer-social{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-top:1.1rem; margin-left:-8px; border-radius:11px; color:#B7AFA4; transition:color .3s ease, transform .35s cubic-bezier(.22,1,.36,1); } .footer-social svg{ width:24px; height:24px; display:block; } .footer-social:hover{ color:#C77B4A; transform:translateY(-2px); } .footer-social:active{ transform:translateY(0); } .footer-social:focus-visible{ outline:2px solid #C77B4A; outline-offset:2px; } .footer h4{ font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.2em; font-size:11px; color:#8b8378; margin-bottom:1rem; } .footer-col a{ display:block; color:#B7AFA4; text-decoration:none; font-size:.92rem; padding:.28rem 0; transition:color .3s ease; width:max-content; } .footer-col a:hover{ color:#ECE6DD; } .footer-col a:focus-visible{ outline:2px solid #C77B4A; outline-offset:3px; border-radius:3px; } .footer-bottom{ margin-top:3.2rem; padding-top:1.6rem; border-top:1px solid rgba(236,230,221,.07); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:#7d766c; } /* ---------- Contact form ---------- */ .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; text-align:left; } .contact-copy{ max-width:46ch; } .contact-copy .section-title{ margin-top:1rem; } .contact-reassure{ margin-top:2rem; display:grid; gap:.9rem; } .contact-reassure li{ display:flex; gap:.7rem; align-items:flex-start; color:#B7AFA4; font-size:.95rem; list-style:none; } .contact-reassure svg{ width:18px; height:18px; color:#C77B4A; flex:none; margin-top:.2rem; } .contact-copy .contact-detail{ text-align:left; } .form-card{ border:1px solid rgba(236,230,221,.1); border-radius:20px; padding:clamp(1.6rem,3vw,2.3rem); background:linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.008)); box-shadow:0 45px 85px -55px rgba(0,0,0,.9); } .field{ margin-bottom:1.05rem; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .field label{ display:block; font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:#948C81; margin-bottom:.5rem; } .field label .req{ color:#C77B4A; } .field input, .field select, .field textarea{ width:100%; background:rgba(19,18,17,.55); border:1px solid rgba(236,230,221,.12); border-radius:12px; padding:.85rem 1rem; color:#ECE6DD; font-family:"Inter",sans-serif; font-size:.95rem; transition:border-color .3s ease, box-shadow .3s ease; } .field textarea{ min-height:120px; resize:vertical; } .field input::placeholder, .field textarea::placeholder{ color:#6f685f; } .field select{ appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23948C81' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.4rem; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:rgba(199,123,74,.6); box-shadow:0 0 0 3px rgba(199,123,74,.15); } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:none; } .honeypot{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .form-consent{ font-size:.8rem; color:#8b8378; margin-top:.1rem; line-height:1.55; } .form-submit{ width:100%; justify-content:center; margin-top:1.3rem; } .form-status{ margin-top:1rem; font-size:.92rem; line-height:1.5; display:none; } .form-status.show{ display:block; } .form-status.ok{ color:#AEC6A9; } .form-status.err{ color:#E0997A; } /* ---------- Example audit download (audit page) ---------- */ .dl-card{ margin-top:3.4rem; max-width:1040px; margin-inline:auto; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(1.6rem,4vw,3.2rem); border:1px solid rgba(199,123,74,.24); border-radius:22px; padding:clamp(1.8rem,4vw,2.8rem); background: radial-gradient(120% 150% at 10% 0%, rgba(199,123,74,.13) 0%, rgba(199,123,74,0) 60%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); box-shadow:0 50px 90px -60px rgba(0,0,0,.9); } /* Page one of the example Audit, rendered by make-audit-cover.mjs. A4, not the 3/4 this was when it held a mocked-up page of bars, so the cover is not squashed. The gradient is a fallback for the moment before the image lands. */ .dl-doc{ width:152px; aspect-ratio:210/297; border-radius:11px; flex:none; overflow:hidden; border:1px solid rgba(236,230,221,.12); background:linear-gradient(165deg,#251e18,#16130f); box-shadow:0 26px 44px -30px rgba(0,0,0,.95); } .dl-doc img{ display:block; width:100%; height:100%; object-fit:cover; } .dl-body h3{ font-family:"Libre Caslon Display",Georgia,serif; letter-spacing:-.02em; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.15; color:#F3EEE7; } .dl-body p{ color:#B7AFA4; margin-top:.9rem; max-width:56ch; line-height:1.7; } .dl-meta{ display:flex; align-items:center; gap:1rem; margin-top:1.7rem; flex-wrap:wrap; } .dl-file{ font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.18em; font-size:10px; color:#8b8378; } .dl-soon{ display:inline-flex; align-items:center; gap:.65rem; border-radius:999px; border:1px dashed rgba(199,123,74,.45); color:#C77B4A; padding:.85rem 1.45rem; font-weight:500; font-size:.95rem; } .dl-soon .node{ width:6px; height:6px; border-radius:50%; background:#C77B4A; flex:none; } /* ---------- About page ---------- */ .about-narrow{ max-width:62ch; margin-inline:auto; margin-top:3.2rem; } .about-list{ display:grid; gap:1.15rem; } .about-list li{ display:flex; gap:.85rem; align-items:flex-start; color:#B7AFA4; font-size:clamp(.95rem,1.15vw,1.02rem); line-height:1.7; list-style:none; } .about-list svg{ width:19px; height:19px; color:#C77B4A; flex:none; margin-top:.42rem; } .about-list strong{ color:#ECE6DD; font-weight:600; } .section-more{ display:flex; justify-content:center; margin-top:3rem; } /* ---------- Engagement flow (how it works page) ---------- One rail down the page: every stage is a row against it, and the copper fill tracks scroll position. Gate rows interrupt the sequence where continuing is the client's decision rather than ours. */ .flow{ --flow-col:168px; position:relative; margin-top:3.8rem; max-width:920px; margin-inline:auto; } .flow-list{ list-style:none; margin:0; padding:0; } .flow-rail, .flow-fill{ position:absolute; left:var(--flow-col); top:.5rem; bottom:0; width:1px; margin-left:-.5px; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%); } .flow-rail{ background:rgba(236,230,221,.13); } /* The mask travels with the fill, so its leading edge softens as it advances. */ .flow-fill{ background:linear-gradient(180deg,#C77B4A,rgba(199,123,74,.45)); transform-origin:top; will-change:transform; } .flow-step, .flow-gate{ position:relative; display:grid; grid-template-columns:var(--flow-col) 1fr; } .flow-step::before, .flow-gate::before{ content:""; position:absolute; left:var(--flow-col); top:.45rem; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:#C77B4A; box-shadow:0 0 0 6px #131211; z-index:1; } .flow-aside{ text-align:right; padding-right:clamp(1.4rem,2.6vw,2.2rem); } .flow-num{ display:block; font-family:"Libre Caslon Display",Georgia,serif; font-size:2.4rem; line-height:1; letter-spacing:-.02em; color:#C77B4A; } .flow-tag{ display:block; font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.2em; font-size:10px; color:#8b8378; line-height:1.8; margin-top:.6rem; } .flow-main{ padding-left:clamp(1.5rem,2.8vw,2.4rem); padding-bottom:clamp(2.8rem,5vw,3.6rem); } .flow-step:last-of-type .flow-main{ padding-bottom:clamp(1.4rem,3vw,2rem); } .flow-title{ font-family:"Libre Caslon Display",Georgia,serif; letter-spacing:-.01em; font-size:clamp(1.4rem,2.2vw,1.75rem); line-height:1.2; color:#F3EEE7; } .flow-lede{ color:#B7AFA4; margin-top:.85rem; max-width:58ch; font-size:clamp(.95rem,1.15vw,1.02rem); line-height:1.7; } .flow-facts{ margin-top:1.6rem; display:grid; grid-template-columns:1fr 1fr; gap:1.2rem clamp(1.4rem,3vw,2.4rem); padding-top:1.3rem; border-top:1px solid rgba(236,230,221,.08); } .flow-facts dt{ font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.2em; font-size:10px; color:#C77B4A; } .flow-facts dd{ margin:.5rem 0 0; color:#B7AFA4; font-size:.93rem; line-height:1.62; } .flow-gate::before{ width:13px; height:13px; margin-left:-6.5px; top:.3rem; background:#131211; border:1.5px solid #C77B4A; } .flow-gate .flow-tag{ margin-top:0; color:#C77B4A; } .flow-gate-inner{ border-radius:16px; padding:1.15rem 1.45rem; border:1px solid rgba(199,123,74,.26); background:linear-gradient(180deg,rgba(199,123,74,.1),rgba(199,123,74,.02)); } .flow-gate-label{ font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.24em; font-size:10px; color:#C77B4A; } .flow-gate-text{ color:#ECE6DD; margin-top:.55rem; max-width:54ch; font-size:.97rem; line-height:1.66; } /* ---------- Compact hero (legal pages, 404) ---------- Full-height heroes belong on pages that sell. These pages don't. */ .hero--compact{ min-height:auto; } .hero--compact .hero-inner{ padding-block:11rem 4rem; } .hero--compact h1{ font-size:clamp(2.2rem,5vw,3.6rem); } /* ---------- Long-form legal copy ---------- */ .legal{ max-width:72ch; margin-inline:auto; } .legal-meta{ font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.2em; font-size:10px; color:#8b8378; padding-bottom:1.4rem; border-bottom:1px solid rgba(236,230,221,.08); } .legal h2{ font-family:"Libre Caslon Display",Georgia,serif; letter-spacing:-.02em; font-size:clamp(1.45rem,2.4vw,1.9rem); line-height:1.2; color:#F3EEE7; margin-top:clamp(2.8rem,5vw,3.6rem); scroll-margin-top:7rem; } .legal h3{ font-family:"Inter",sans-serif; font-weight:600; font-size:1.02rem; color:#ECE6DD; margin-top:2rem; } .legal p{ color:#B7AFA4; margin-top:1.05rem; line-height:1.8; font-size:clamp(.95rem,1.15vw,1.02rem); } .legal ul{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.85rem; } .legal li{ position:relative; padding-left:1.5rem; color:#B7AFA4; line-height:1.75; font-size:clamp(.95rem,1.15vw,1.02rem); } .legal li::before{ content:""; position:absolute; left:.2rem; top:.72em; width:5px; height:5px; border-radius:50%; background:#C77B4A; } .legal strong{ color:#ECE6DD; font-weight:600; } .legal a{ color:#C77B4A; text-decoration:none; border-bottom:1px solid rgba(199,123,74,.35); transition:color .3s ease; } .legal a:hover{ color:#E6A878; } .legal a:focus-visible{ outline:2px solid #C77B4A; outline-offset:3px; border-radius:3px; } /* Index of sections: quieter than body copy, and no bullet, because the numbering in the link text already does that job. */ .legal-toc{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.55rem; } .legal-toc li{ padding-left:0; } .legal-toc li::before{ display:none; } .legal-toc a{ color:#B7AFA4; font-size:.95rem; border-bottom:1px solid transparent; } .legal-toc a:hover{ color:#C77B4A; border-bottom-color:rgba(199,123,74,.35); } /* Values the business still has to supply. Deliberately loud. */ .legal-todo{ color:#C77B4A; border-bottom:1px dashed rgba(199,123,74,.6); font-style:normal; } .legal-details{ margin-top:1.6rem; border:1px solid rgba(236,230,221,.1); border-radius:18px; padding:clamp(1.4rem,3vw,1.9rem); background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.007)); } .legal-details div{ display:grid; grid-template-columns:190px 1fr; gap:1rem; padding:.72rem 0; border-top:1px solid rgba(236,230,221,.07); } .legal-details div:first-child{ border-top:0; padding-top:0; } .legal-details dt{ font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.2em; font-size:10px; color:#8b8378; padding-top:.3em; } .legal-details dd{ margin:0; color:#ECE6DD; font-size:.97rem; } /* ---------- 404 ---------- */ .lost-mark{ font-family:"Libre Caslon Display",Georgia,serif; letter-spacing:-.04em; font-size:clamp(5rem,15vw,10.5rem); line-height:.85; color:#C77B4A; text-shadow:0 40px 80px rgba(199,123,74,.22); } .lost-links{ list-style:none; margin:2.8rem auto 0; padding:0; max-width:420px; border-top:1px solid rgba(236,230,221,.09); } .lost-links li{ border-bottom:1px solid rgba(236,230,221,.09); } .lost-links a{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.95rem .3rem; color:#ECE6DD; text-decoration:none; font-size:.98rem; transition:color .3s ease, padding .35s cubic-bezier(.2,.7,.2,1); } .lost-links a .what{ color:#8b8378; font-size:.85rem; } .lost-links a svg{ width:1em; height:1em; color:#C77B4A; flex:none; transition:transform .35s cubic-bezier(.2,.7,.2,1); } .lost-links a:hover{ color:#C77B4A; padding-left:.8rem; } .lost-links a:hover svg{ transform:translateX(4px); } .lost-links a:focus-visible{ outline:2px solid #C77B4A; outline-offset:2px; border-radius:6px; } /* ---------- Card particle field ---------- Injected by card-particles.js into the top-right of every card. The canvas sits at z-index 0 and the card's own children are lifted above it, so the points always stay behind the content. */ .has-particles{ position:relative; } .has-particles > *:not(.card-particles){ position:relative; z-index:1; } .card-particles{ position:absolute; top:0; right:0; z-index:0; display:block; width:62%; height:66%; max-width:340px; max-height:240px; pointer-events:none; } /* ---------- Page transition ---------- Hidden unless JS enables it (html.has-fade), so a JS failure can never leave the page covered. Never intercepts clicks. */ .page-fade{ position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0; visibility:hidden; background: radial-gradient(78% 62% at 50% 64%, rgba(199,123,74,.13), rgba(19,18,17,0) 72%), #131211; } html.has-fade .page-fade{ visibility:visible; transition:opacity .46s cubic-bezier(.2,.7,.2,1); } html.has-fade.is-covered .page-fade{ opacity:1; } /* Covering on the way out is slightly quicker than clearing on the way in. */ html.has-fade.is-leaving .page-fade{ transition-duration:.3s; } /* ---------- Reveal (JS-driven) ---------- */ [data-reveal]{ opacity:0; transform:translateY(42px); } /* Set by app.js when GSAP did not load. Without this the page stays blank, because nothing else ever clears the state above. */ html.no-gsap [data-reveal]{ opacity:1 !important; transform:none !important; } html.no-gsap .w{ opacity:1 !important; transform:none !important; } .reveal-ready [data-reveal]{ will-change:opacity,transform; } /* Word-level heading reveal (JS-driven) */ .w{ display:inline-block; will-change:transform,opacity; } /* Parallax layers */ .hero-bg,.hero-canvas,.hero-inner,.scroll-cue,.ledger__bar,.contact .hero-bg{ will-change:transform; } @media (max-width:860px){ .nav-desktop{ display:none; } .menu-btn{ display:inline-flex; } .hero-inner{ padding-block:7rem 4rem; } .story-grid{ grid-template-columns:1fr; gap:2.4rem; } /* Auto height: the ledger sets its own, and a 16/10 box would crop it. */ .story-panel{ aspect-ratio:auto; max-height:none; } .cards-2x2{ grid-template-columns:1fr; } .proc-grid{ grid-template-columns:1fr; } .pay-row, .pay-gate{ grid-template-columns:1fr; gap:.9rem; } .pay-gate-inner{ grid-column:1; } .dl-card{ grid-template-columns:1fr; } .dl-doc{ width:124px; } .why-bento{ grid-template-columns:1fr; } .why-tile.lg{ grid-column:span 1; min-height:0; } .faq-grid{ grid-template-columns:1fr; } .contact-grid{ grid-template-columns:1fr; } .field-row{ grid-template-columns:1fr; } .flow{ --flow-col:0px; max-width:none; } .flow-step, .flow-gate{ grid-template-columns:1fr; } .flow-aside{ display:flex; align-items:baseline; gap:.9rem; text-align:left; padding-right:0; padding-left:1.5rem; margin-bottom:.75rem; } .flow-num{ font-size:1.9rem; } .flow-tag{ margin-top:0; } .flow-main{ padding-left:1.5rem; } .flow-facts{ grid-template-columns:1fr; gap:1rem; } .hero--compact .hero-inner{ padding-block:9rem 3rem; } .legal-details div{ grid-template-columns:1fr; gap:.3rem; } } @media (min-width:861px) and (max-width:1080px){ .proc-grid{ grid-template-columns:repeat(2,1fr); } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } [data-reveal]{ opacity:1 !important; transform:none !important; } .w{ opacity:1 !important; transform:none !important; } .btn-copper, .btn-copper svg, .btn-ghost, .nav-link::after{ transition:none !important; } .lost-links a, .lost-links a svg{ transition:none !important; } .footer-social{ transition:none !important; } .footer-social:hover{ transform:none !important; } .hero-canvas{ transition:none !important; } } /* Visible to screen readers only. */ .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; } /* The example Audit's own paper design lives in /doc-sheet.css, scoped under .doc so it cannot leak in here. See that file before changing it. */ /* ============================================================ AMBIENT DEPTH SYSTEM ------------------------------------------------------------ The page used to be a single flat field: #131211 behind every section, with cards as the only raised surface. This gives it three planes behind the content instead. Plane 0 body::before / body::after A fixed atmosphere. Because it does not scroll, the page travels THROUGH the light rather than carrying it along, which is what reads as depth. Plane 1 .section::before Per-section glow, alternating side, scrolling with content. Plane 2 .section::after A copper thread that stitches each section to the next, sitting in the gap where the page was emptiest. Promoted from .flow-rail on /how-it-works, so the vocabulary is already the site's. All of it is CSS, so it survives no-JS and reduced motion; JS only scrubs the seam's draw-on. The homepage hero is deliberately untouched. It keeps its own WebGL field, and because
sits above the atmosphere with an opaque canvas, nothing below reaches it. ============================================================ */ /* --- Plane 0: fixed atmosphere ----------------------------- */ /* Content is lifted to z-index 1 so both layers stay behind it. .nav (50), .mobile-menu (49) and .page-fade (9999) still win. */ main, .footer{ position:relative; z-index:1; } body::before{ content:""; position:fixed; inset:-12% 0; z-index:0; pointer-events:none; background: radial-gradient(42% 30% at 78% 6%, rgba(199,123,74,.075), rgba(199,123,74,0) 68%), radial-gradient(46% 34% at 12% 36%, rgba(124,100,78,.115), rgba(124,100,78,0) 66%), radial-gradient(52% 34% at 86% 64%, rgba(199,123,74,.055), rgba(199,123,74,0) 70%), radial-gradient(48% 32% at 18% 94%, rgba(124,100,78,.095), rgba(124,100,78,0) 68%); transform:translate3d(0,var(--atmos-y,0px),0); will-change:transform; } /* Grain on the ground only, never over the text. Normal blend, not the hero's soft-light: over a near-black field soft-light lifts almost nothing, so it would have been invisible here. */ body::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px; } /* --- Plane 1: per-section glow and seam -------------------- */ .section > .shell{ position:relative; z-index:1; } .section::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(40% 46% at 12% 22%, rgba(199,123,74,.06), rgba(199,123,74,0) 70%); } /* Alternating the side gives the scroll a slow left-right rhythm. */ .section:nth-of-type(even)::before{ background:radial-gradient(40% 46% at 88% 22%, rgba(199,123,74,.06), rgba(199,123,74,0) 70%); } /* The seam: a copper thread that stitches one section to the next. It lives only in the gap between sections, which is exactly where the page was emptiest. A continuous full-height rail was tried first and rejected: the cards are translucent (rgba(255,255,255,.03)), so it ghosted straight through them and read as a stray gutter divider. The seam used to cross a vertical thread through the hairline; that read as a row of small crosses down the page, so only the horizontal rule and its node remain. */ .section::after{ content:""; position:absolute; left:50%; bottom:0; transform:translate(-50%,50%); width:min(760px,72vw); height:clamp(150px,19vw,260px); z-index:0; pointer-events:none; background: /* node */ radial-gradient(circle at 50% 50%, rgba(199,123,74,.85) 0 2px, rgba(199,123,74,0) 2.6px) center/100% 100% no-repeat, /* hairline */ linear-gradient(90deg, rgba(236,230,221,0) 0%, rgba(236,230,221,.085) 22%, rgba(199,123,74,.30) 50%, rgba(236,230,221,.085) 78%, rgba(236,230,221,0) 100%) center/100% 1px no-repeat; /* Drawn outward from the node as it scrolls in; --seam-draw is scrubbed by app.js and defaults to 1, so with no JS the seam is simply complete. The wipe runs along the rule's own axis: with the vertical thread gone a top-down mask had nothing to travel through and popped the line in whole the moment it passed the halfway mark. */ -webkit-mask-image:linear-gradient(90deg, transparent 0 calc(50% - var(--seam-draw,1) * 50%), #000 calc(50% - var(--seam-draw,1) * 50%) calc(50% + var(--seam-draw,1) * 50%), transparent calc(50% + var(--seam-draw,1) * 50%)); mask-image:linear-gradient(90deg, transparent 0 calc(50% - var(--seam-draw,1) * 50%), #000 calc(50% - var(--seam-draw,1) * 50%) calc(50% + var(--seam-draw,1) * 50%), transparent calc(50% + var(--seam-draw,1) * 50%)); } /* Sections that already carry their own light get neither: .contact has a .hero-bg, and a .cta-band is a lit panel with its own radial. The CTA sections are also only ~2rem tall, so a seam would collide with the band. */ .contact::before, .section:has(.cta-band)::before, .contact::after, .section:has(.cta-band)::after, .section:last-of-type::after{ content:none; } /* --seam-draw is typed so GSAP interpolates it rather than swapping strings. inherits:true is load-bearing: GSAP can only animate the property on the section, and an unregistered or non-inheriting property never reaches ::after, which would leave every seam permanently drawn. */ @property --seam-draw{ syntax:""; inherits:true; initial-value:1; } @media (prefers-reduced-motion: reduce){ body::before{ transform:none !important; } .section::after{ --seam-draw:1 !important; } } /* ---------- Base reset ---------- Tailwind v3 Preflight, inlined verbatim (MIT). The site used to load the whole Tailwind CDN runtime, ~120KB of JS behind a redirect, purely for this reset: not one Tailwind utility class was ever used in the markup. These are the exact rules that runtime injected, read back off the live page. The html font-family came from the old tailwind.config and is kept so the cascade is unchanged. IT HAS TO STAY AT THE BOTTOM OF THIS FILE. The CDN appended its