/* ============================================================ thentic labs — website Built on the thentic labs brand guide v5.0 Space Grotesk + JetBrains Mono · ink / bone / stone · one volt signal Light + dark themes via [data-theme] on . ============================================================ */ /* Fonts loaded via in HTML (avoids render-blocking @import). */ @font-face{ font-family:'Space Grotesk Fallback'; src:local('Arial'); size-adjust:105%; ascent-override:92%; descent-override:24%; line-gap-override:0%; } @font-face{ font-family:'JetBrains Mono Fallback'; src:local('Menlo'), local('Consolas'), local('monospace'); size-adjust:96%; ascent-override:77%; descent-override:22%; line-gap-override:0%; } /* ---------- brand constants (theme-independent) ---------- */ :root{ --volt: #BBF724; --volt-2: #9AD400; --volt-ink: #4E6B00; /* legible olive for green text on light */ --ink: #030000; --ink-2: #06201C; --ink-3: #0C332C; --bone: #F3F1E9; --paper: #FBFAF6; --stone: #E6E2D6; --graphite: #2C4A47; --slate: #5E7470; --mist: #B7C9C5; --forest: #0E4A3C; --display: 'Space Grotesk', 'Space Grotesk Fallback', system-ui, sans-serif; --mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; --maxw: 1240px; --pad: clamp(20px, 5vw, 56px); --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px; --rk: 1; /* radius multiplier (tweakable) */ --ease: cubic-bezier(.22,.61,.36,1); /* accent is tweakable; defaults to volt */ --accent: #BBF724; --accent-2: #9AD400; --accent-ink: #4E6B00; /* legible accent for text on LIGHT */ --on-accent: #030000; } /* ---------- LIGHT theme (default) ---------- */ :root, [data-theme="light"]{ --bg: var(--bone); --surface: var(--paper); --surface-2: #FFFFFF; --text: var(--ink); --text-2: var(--graphite); --text-3: var(--slate); --border: rgba(6,32,31,.12); --border-2: rgba(6,32,31,.22); --hair: rgba(6,32,31,.08); --mark: var(--ink); --acc-text: var(--accent-ink); /* green text role */ --logo-acc: var(--forest); /* crisp brand green for the wordmark on bone */ --slash: 14,74,60; /* forest slash motif on light surfaces */ --nav-bg: rgba(243,241,233,.78); --shadow-sm: 0 1px 2px rgba(6,32,31,.06), 0 2px 10px rgba(6,32,31,.05); --shadow-md: 0 6px 18px rgba(6,32,31,.09), 0 18px 44px rgba(6,32,31,.08); /* band = inverted ink block */ --band-bg: var(--ink); --band-card: rgba(255,255,255,.045); --band-card-2: rgba(255,255,255,.07); --band-text: var(--bone); --band-text-2: var(--mist); --band-text-3: #8AA39E; --band-border: rgba(255,255,255,.11); } /* ---------- DARK theme ---------- */ [data-theme="dark"]{ --bg: var(--ink); --surface: var(--ink-2); --surface-2: var(--ink-3); --text: var(--bone); --text-2: var(--mist); --text-3: #8AA39E; --border: rgba(255,255,255,.11); --border-2: rgba(255,255,255,.20); --hair: rgba(255,255,255,.07); --mark: var(--accent); --acc-text: var(--accent); /* volt reads fine on dark */ --logo-acc: var(--accent); /* signal green for the wordmark on ink */ --slash: 187,247,36; /* volt slash motif on ink surfaces */ --nav-bg: rgba(3,0,0,.72); --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.28); --shadow-md: 0 8px 22px rgba(0,0,0,.42), 0 22px 50px rgba(0,0,0,.4); /* band = slightly raised deep-green */ --band-bg: var(--ink-2); --band-card: rgba(255,255,255,.04); --band-card-2: rgba(255,255,255,.065); --band-text: var(--bone); --band-text-2: var(--mist); --band-text-3: #8AA39E; --band-border: rgba(255,255,255,.10); } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background:var(--bg); color:var(--text); font-family:var(--display); font-weight:400; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } a{ color:inherit; text-decoration:none; } img,svg{ display:block; } ::selection{ background:var(--volt); color:var(--ink); } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); } /* ---------- mark ---------- */ .mk{ display:inline-block; vertical-align:middle; color:var(--mark); } .mk svg{ width:100%; height:100%; display:block; overflow:visible; } /* ---------- type roles ---------- */ h1,h2,h3,h4{ font-weight:500; letter-spacing:-.025em; line-height:1.02; } .eyebrow{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--acc-text); display:inline-flex; gap:11px; align-items:center; margin-bottom:22px; white-space:nowrap; } .eyebrow .nm{ color:var(--text-3); } .slash{ display:inline-block; width:14px; height:14px; flex:none; } .slash svg{ width:100%; height:100%; } .mono{ font-family:var(--mono); } .lede{ font-size:clamp(19px,1.7vw,24px); color:var(--text-2); line-height:1.45; max-width:52ch; } .lede strong{ color:var(--text); font-weight:600; } .lede .ac{ color:var(--acc-text); font-weight:600; } /* ---------- buttons ---------- */ .btn-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; } .btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13.5px; letter-spacing:.02em; height:48px; padding:0 26px; border-radius:var(--r-pill); white-space:nowrap; cursor:pointer; transition:all .25s var(--ease); border:1px solid transparent; } .btn .arr{ transition:transform .25s var(--ease); } .btn:hover .arr{ transform:translateX(4px); } .btn-primary{ background:var(--accent); color:var(--on-accent); font-weight:500; } .btn-primary:hover{ box-shadow:0 10px 28px -8px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent); transform:translateY(-2px); } .btn-ghost{ border-color:var(--border-2); color:var(--text); } .btn-ghost:hover{ border-color:var(--text); } .band .btn-ghost{ color:var(--band-text); border-color:var(--band-border); } .band .btn-ghost:hover{ border-color:var(--band-text); } /* ---------- nav ---------- */ header.nav{ position:sticky; top:0; z-index:50; background:transparent; border-bottom:1px solid transparent; transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease); } header.nav.scrolled{ background:rgba(6,32,28,.82); backdrop-filter:blur(14px) saturate(1.1); border-bottom:1px solid rgba(255,255,255,.09); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; } .brand{ display:flex; align-items:center; gap:11px; } .brand .mk{ width:30px; height:30px; } .brand b{ font-weight:600; font-size:19px; letter-spacing:-.02em; } .brand b span{ color:var(--logo-acc); } .nav-links{ display:flex; align-items:center; gap:30px; margin-left:auto; } .nav-links a{ position:relative; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--text-2); transition:color .2s var(--ease); } .nav-links a:hover{ color:var(--text); } .nav-links a.is-active{ color:var(--text); } .nav-links a.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:2px; background:var(--accent); } .nav-tools{ display:flex; align-items:center; gap:14px; } .theme-switch{ background:none; border:none; padding:0; cursor:pointer; line-height:0; } .ts-track{ position:relative; display:block; width:54px; height:30px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--border-2); transition:background .25s var(--ease), border-color .25s var(--ease); } .theme-switch:hover .ts-track{ border-color:var(--text-3); } .ts-knob{ position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--accent); box-shadow:var(--shadow-sm); display:grid; place-items:center; transition:transform .3s var(--ease); } [data-theme="dark"] .ts-knob{ transform:translateX(24px); } .ts-knob svg{ width:13px; height:13px; color:var(--on-accent); } .ts-moon{ display:none; } [data-theme="dark"] .ts-sun{ display:none; } [data-theme="dark"] .ts-moon{ display:block; } .nav-cta{ font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; height:40px; padding:0 18px; display:inline-flex; align-items:center; border:1px solid var(--border-2); border-radius:var(--r-pill); color:var(--text); transition:all .25s var(--ease); } .nav-cta:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); } /* ---------- section shell ---------- */ section{ padding:clamp(72px,9vw,116px) 0; position:relative; } .section-head{ max-width:780px; margin-bottom:clamp(40px,5vw,60px); } .section-head h2{ font-size:clamp(30px,4.2vw,52px); margin-bottom:20px; } .section-head p{ color:var(--text-2); font-size:clamp(17px,1.5vw,19px); line-height:1.55; max-width:62ch; } .band .section-head p{ color:var(--band-text-2); } /* dark context — shared by the fixed-dark hero, nav, and section bands */ .band, .hero, header.nav{ --surface:var(--band-card); --surface-2:var(--band-card-2); --text:var(--band-text); --text-2:var(--band-text-2); --text-3:var(--band-text-3); --border:var(--band-border); --border-2:rgba(255,255,255,.2); --hair:rgba(255,255,255,.08); --acc-text:var(--accent); --mark:var(--accent); --logo-acc:var(--accent); --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 10px 30px rgba(0,0,0,.4); } /* band — inverted rhythm block */ .band{ background:var(--band-bg); color:var(--band-text); --bg:var(--band-bg); } /* deep-green variant — alternates with ink down the page */ .band--green{ background:var(--ink-2); --bg:var(--ink-2); } .hero{ background:var(--ink); --bg:var(--ink); color:var(--band-text); } header.nav{ color:var(--band-text); } .band .eyebrow .nm{ color:var(--band-text-3); } /* ---------- hero ---------- */ .hero{ position:relative; overflow:hidden; display:flex; align-items:center; min-height:min(86vh,840px); margin-top:-72px; padding:calc(72px + clamp(34px,5vh,72px)) 0 clamp(64px,10vh,120px); } .hero::before{ content:""; position:absolute; top:-30%; right:-10%; width:760px; height:760px; pointer-events:none; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); filter:blur(10px); opacity:.7; z-index:0; } [data-theme="light"] .hero::before{ opacity:.5; } .hero-grid{ display:block; width:100%; position:relative; z-index:1; } .hero-grid > div{ max-width:1000px; } .hero-mark{ display:inline-block; width:92px; height:92px; color:var(--mark); margin-bottom:36px; contain:layout style; } .hero-mark svg{ width:100%; height:100%; overflow:visible; } .hero h1{ font-size:clamp(48px,8.5vw,112px); font-weight:500; line-height:.92; letter-spacing:-.045em; margin:0 0 28px; contain:layout style; } .hero h1 .lab{ color:var(--logo-acc); } .hl{ display:inline-block; background:var(--accent); color:var(--on-accent); padding:0 .14em; border-radius:calc(6px * var(--rk)); } .pipeline{ display:flex; gap:12px; align-items:center; margin-top:40px; font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); } .pipeline b{ color:var(--text); font-weight:500; } .pipeline .sep{ color:var(--accent); font-weight:600; } [data-theme="light"] .pipeline .sep{ color:var(--volt-2); } /* hero diagram — fragmented inputs -> thentic core -> automated execution */ .core{ position:relative; width:100%; max-width:600px; margin:0 auto; } .core svg{ width:100%; height:auto; overflow:visible; } .dg-cap{ font-family:var(--mono); font-size:8.5px; letter-spacing:.13em; fill:var(--text-3); } .dg-cap-acc{ fill:var(--acc-text); } .dg-chip{ fill:var(--surface); stroke:var(--border-2); stroke-width:1; stroke-dasharray:4 4; } .dg-lab{ font-family:var(--mono); font-size:9px; fill:var(--text-3); letter-spacing:.02em; } .dg-out{ fill:var(--surface); stroke:var(--border-2); stroke-width:1; } .dg-out-lab{ font-family:var(--mono); font-size:9px; fill:var(--text); letter-spacing:.06em; } .dg-link{ fill:none; stroke:var(--border-2); stroke-width:1.3; } .dg-flow{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-dasharray:2 7; } .dg-core{ fill:var(--core-fill); stroke:var(--core-stroke); stroke-width:1; } .dg-core-cap{ font-family:var(--mono); font-size:7.5px; letter-spacing:.1em; fill:var(--volt); } .dg-core-lab{ font-family:var(--mono); font-size:9.5px; fill:var(--bone); } .dg-dot{ fill:var(--volt); } .dg-mk{ color:var(--on-accent); } .dg-badge{ fill:var(--volt); } .dg-tick{ fill:none; stroke:var(--volt); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } :root, [data-theme="light"]{ --core-fill:#06201C; --core-stroke:#06201C; } [data-theme="dark"]{ --core-fill:#0C332C; --core-stroke:rgba(255,255,255,.16); } @media (prefers-reduced-motion: no-preference){ .dg-flow{ animation:dgFlow 1.3s linear infinite; } @keyframes dgFlow{ to{ stroke-dashoffset:-18; } } } /* ---------- cards / grids ---------- */ .divider{ height:1px; background:var(--hair); } .pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .pillar{ background:var(--surface); border:1px solid var(--border); border-radius:calc(var(--r-lg) * var(--rk)); padding:32px 28px; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), border-color .3s var(--ease); } .pillar:hover{ transform:translateY(-4px); border-color:var(--border-2); } .pillar .pnum{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--acc-text); margin-bottom:20px; } .pillar h3{ font-size:22px; margin-bottom:11px; } .pillar p{ color:var(--text-2); font-size:15.5px; line-height:1.55; } /* ---------- engine loop ---------- */ .loop{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; position:relative; } .stage{ background:var(--surface); border:1px solid var(--border); border-radius:calc(var(--r-md) * var(--rk)); padding:28px 24px; position:relative; transition:transform .3s var(--ease), border-color .3s var(--ease); } .stage:hover{ transform:translateY(-5px); border-color:var(--accent); } .stage:not(:last-child)::after{ content:""; position:absolute; top:50%; right:-12px; width:18px; height:18px; transform:translateY(-50%); z-index:2; background:var(--accent); -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E"); } .stage .snum{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--text-3); margin-bottom:16px; } .stage h3{ font-size:24px; color:var(--acc-text); margin-bottom:11px; } .stage > p{ color:var(--text-2); font-size:14.5px; line-height:1.5; margin-bottom:18px; } .stage .powered{ font-family:var(--mono); font-size:10.5px; line-height:1.7; letter-spacing:.03em; text-transform:uppercase; color:var(--text-3); border-top:1px solid var(--hair); padding-top:14px; } .stage .powered b{ color:var(--text); font-weight:500; } .loop-note{ margin-top:30px; text-align:center; font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); } .loop-note span{ color:var(--accent); font-size:15px; } /* ---------- matrix ---------- */ .matrix-card{ background:var(--surface); border:1px solid var(--border); border-radius:calc(var(--r-lg) * var(--rk)); padding:clamp(20px,3vw,34px); margin-bottom:46px; overflow-x:auto; box-shadow:var(--shadow-sm); } table.matrix{ border-collapse:collapse; width:100%; min-width:580px; } table.matrix th, table.matrix td{ padding:15px 12px; text-align:center; } table.matrix thead th{ font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); font-weight:500; vertical-align:bottom; border-bottom:1px solid var(--border); line-height:1.4; } table.matrix tbody th{ text-align:left; font-family:var(--display); font-weight:600; font-size:16px; color:var(--text); white-space:nowrap; padding-right:24px; } table.matrix tbody td{ border-top:1px solid var(--hair); } table.matrix .corner{ font-family:var(--mono); font-size:9.5px; color:var(--text-3); text-align:left; letter-spacing:.08em; text-transform:uppercase; line-height:1.4; } table.matrix tbody tr:hover td{ background:color-mix(in srgb, var(--accent) 7%, transparent); } .dot{ width:13px; height:13px; border-radius:50%; background:var(--accent); display:inline-block; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,52px); } .col-label{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:22px; display:flex; align-items:center; gap:12px; } .col-label::before{ content:""; width:24px; height:2px; background:var(--accent); } .stack{ display:flex; flex-direction:column; gap:14px; } .item{ background:var(--surface); border:1px solid var(--border); border-radius:calc(var(--r-md) * var(--rk)); padding:24px; transition:transform .26s var(--ease), border-color .26s var(--ease); } .item:hover{ border-color:var(--accent); transform:translateX(5px); } .item .ihead{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:9px; } .item h3{ font-size:19px; } .item .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--text-3); text-transform:uppercase; white-space:nowrap; } .item p{ color:var(--text-2); font-size:14.5px; line-height:1.55; } /* ---------- build/brand/scale steps ---------- */ .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .step{ background:var(--surface); border:1px solid var(--border); border-radius:calc(var(--r-lg) * var(--rk)); padding:34px 30px; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); } .step::after{ content:""; position:absolute; top:0; left:0; height:3px; width:100%; background:linear-gradient(90deg, var(--accent), transparent 80%); } .step .snum{ font-family:var(--display); font-weight:600; font-size:42px; line-height:1; color:var(--acc-text); margin-bottom:20px; letter-spacing:-.04em; } .step h3{ font-size:24px; margin-bottom:12px; } .step p{ color:var(--text-2); font-size:15.5px; line-height:1.55; } /* ---------- partners ---------- */ .partners{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:840px; } .partner{ background:var(--surface); border:1px solid var(--border); border-radius:calc(var(--r-lg) * var(--rk)); padding:32px 30px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), border-color .3s var(--ease); } .partner:hover{ transform:translateY(-4px); border-color:var(--border-2); } .plogo{ font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.02em; margin-bottom:16px; } .plogo .ac{ color:var(--acc-text); } .partner p{ color:var(--text-2); font-size:15px; line-height:1.55; flex:1; margin-bottom:22px; } .plink{ font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; color:var(--acc-text); display:inline-flex; align-items:center; gap:9px; } .plink .arr{ transition:transform .25s var(--ease); } .partner:hover .plink .arr{ transform:translateX(4px); } /* ---------- contact ---------- */ .contact-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,76px); align-items:center; } .contact-inner h2{ font-size:clamp(32px,4.6vw,56px); margin-bottom:20px; line-height:1.0; } .contact-inner > div > p{ color:var(--band-text-2); font-size:18px; max-width:30em; margin-bottom:32px; line-height:1.5; } .contact-card{ background:var(--surface-2); border:1px solid var(--border); border-radius:calc(var(--r-xl) * var(--rk)); padding:36px 34px; } .contact-card .clab{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:7px; } .contact-card .cval{ font-size:18px; margin-bottom:26px; } .contact-card .cval:last-child{ margin-bottom:0; } .contact-card .cval a:hover{ color:var(--accent); } /* ---------- footer ---------- */ footer.foot{ background:var(--ink); color:var(--mist); padding:54px 0 40px; } .foot-top{ display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.09); } .foot-brand .mk{ width:34px; height:34px; color:var(--volt); margin-bottom:14px; } .foot-brand b{ font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--bone); } .foot-brand b span{ color:var(--volt); } .foot-brand p{ font-family:var(--mono); font-size:12px; line-height:1.8; color:#8AA39E; margin-top:12px; } .foot-cols{ display:flex; gap:54px; flex-wrap:wrap; } .foot-col-title{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#8AA39E; margin:0 0 14px; font-weight:500; } .foot-col a{ display:block; font-size:14px; color:var(--mist); margin-bottom:10px; transition:color .2s var(--ease); } .foot-col a:hover{ color:var(--volt); } .foot-bottom{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:26px; font-family:var(--mono); font-size:11.5px; color:#6F8883; letter-spacing:.03em; } .foot-motif{ display:flex; gap:7px; } /* ---------- slash field on bone content sections (themed: forest on light, volt on dark) ---------- */ #about > .wrap, #model > .wrap, #partners > .wrap{ position:relative; z-index:1; } #about::after, #model::after, #partners::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='66' height='66' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%230E4A3C' stroke-width='5.5' stroke-linecap='round'%3E%3Cline x1='16' y1='44' x2='33' y2='22'/%3E%3Cline x1='31' y1='44' x2='48' y2='22'/%3E%3C/g%3E%3C/svg%3E"); background-size:62px 62px; opacity:.09; -webkit-mask-image:radial-gradient(82% 64% at 100% 0%, #000, transparent 64%); mask-image:radial-gradient(82% 64% at 100% 0%, #000, transparent 64%); } [data-theme="dark"] #about::after, [data-theme="dark"] #model::after, [data-theme="dark"] #partners::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='66' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23BBF724' stroke-width='5.5' stroke-linecap='round'%3E%3Cline x1='16' y1='44' x2='33' y2='22'/%3E%3Cline x1='31' y1='44' x2='48' y2='22'/%3E%3C/g%3E%3C/svg%3E"); opacity:.05; } /* ---------- motif toggle ---------- */ [data-motif="off"] .hero::before{ display:none; } [data-motif="off"] .foot-motif{ display:none; } [data-motif="off"] .band::before{ display:none; } [data-motif="off"] #about::after, [data-motif="off"] #model::after, [data-motif="off"] #partners::after{ display:none; } /* ---------- slash-field texture on ink bands (sanctioned: quiet slash field on ink) ---------- */ .band > .wrap{ position:relative; z-index:1; } .band::before{ 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='66' height='66' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23BBF724' stroke-width='5.5' stroke-linecap='round' stroke-opacity='0.6'%3E%3Cline x1='16' y1='44' x2='33' y2='22'/%3E%3Cline x1='31' y1='44' x2='48' y2='22'/%3E%3C/g%3E%3C/svg%3E"); background-size:66px 66px; opacity:.05; -webkit-mask-image:radial-gradient(120% 82% at 100% 0%, #000, transparent 68%); mask-image:radial-gradient(120% 82% at 100% 0%, #000, transparent 68%); } /* ---------- hero glow drift ---------- */ @media (prefers-reduced-motion: no-preference){ .hero::before{ animation:tlDrift 26s var(--ease) infinite alternate; } @keyframes tlDrift{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-6%,4%) scale(1.14); } } } /* ---------- reveal + entrance ---------- */ .reveal-on .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--reveal-delay,0ms); will-change:opacity, transform; } .reveal-on .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion: no-preference){ /* hero entrance — transform-only so a frozen/inactive tab still shows content (never blank) */ .hero .hero-mark,.hero h1,.hero .lede,.hero .btn-row,.hero .pipeline{ transition:transform .7s var(--ease); will-change:transform; } .hero .hero-mark{ transition-delay:.05s; } .hero h1{ transition-delay:.12s; } .hero .lede{ transition-delay:.22s; } .hero .btn-row{ transition-delay:.3s; } .hero .pipeline{ transition-delay:.38s; } .hero .core{ transition:transform 1s var(--ease) .3s; } .tl-anim:not(.tl-loaded) .hero .hero-mark, .tl-anim:not(.tl-loaded) .hero h1, .tl-anim:not(.tl-loaded) .hero .lede, .tl-anim:not(.tl-loaded) .hero .btn-row, .tl-anim:not(.tl-loaded) .hero .pipeline{ transform:translateY(16px); } .tl-anim:not(.tl-loaded) .hero .core{ transform:scale(.97); } .tl-loaded .hero .hero-mark, .tl-loaded .hero h1, .tl-loaded .hero .lede, .tl-loaded .hero .btn-row, .tl-loaded .hero .pipeline{ will-change:auto; } } @media (prefers-reduced-motion: reduce){ .reveal-on .reveal{ opacity:1; transform:none; transition:none; } } @media print{ .reveal-on .reveal, .tl-anim .core, .tl-anim .hero *{ opacity:1 !important; transform:none !important; } } /* ---------- responsive ---------- */ @media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } .core{ max-width:440px; order:-1; } .pillars, .steps{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } .loop{ grid-template-columns:1fr 1fr; } .stage:not(:last-child)::after{ display:none; } .contact-inner{ grid-template-columns:1fr; } .nav-links{ display:none; } } @media (max-width:600px){ body{ font-size:16px; } .partners{ grid-template-columns:1fr; } .loop{ grid-template-columns:1fr; } .pipeline{ flex-wrap:wrap; } .foot-top{ flex-direction:column; } }