/* ============================================================ TIC Association — "The Deep" world kit One shared skin for every page. Tokens + reusable components. Page ROLE is set by . - experience : the hub home + the hidden layers (full descent, gauge, daemon in page JS) - reading : about / register / updates (calm single-column, dimmed ambient) - workbench : faq / product / trial / contact (fast, minimal motion, scannable) Constants everywhere: palette, the two fonts, hairlines, wordmark, footer, voice. Fonts (add to each page ): Fraunces (display) + Instrument Sans (body). ============================================================ */ :root{ --ink:#f0e6d3; --soft:#b9ab8f; --faint:#7d7157; --amber:#f0a838; --amber-deep:#c47d24; --amber-glow:rgba(240,168,56,.5); --deep-base:#0a0705; /* calm-page background (a still deep) */ --rule:rgba(240,230,211,.09); /* hairline divider */ --hair:rgba(240,230,211,.14); /* hairline border on controls */ --wrap:900px; --radius:4px; --serif:"Lora",Georgia,serif; --sans:"Instrument Sans",system-ui,sans-serif; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ color:var(--ink); font-family:var(--sans); font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; background:var(--deep-base); /* calm pages sit on a still deep */ overflow-x:hidden; } /* the descent gradient belongs to the experience tier only: sunlit surface -> total dark -> the other side */ body[data-tier="experience"]{ background:linear-gradient(180deg, #4a3418 0%, #3a2712 7%, #2a1b0e 19%, #1c120a 34%, #140d07 48%, #0b0705 60%, #070403 70%, #050302 77%, #0a0704 83%, #1a1108 89%, #33220e 95%, #4a3113 100%); background-attachment:fixed; } /* ---- ambient layers (the canvas is shared; rays/murk are descent-only) ---- */ #sea{position:fixed; inset:0; z-index:0; pointer-events:none;} .rays{position:fixed; inset:0 0 auto 0; height:78vh; z-index:1; pointer-events:none; opacity:calc(.55 * var(--raysK, 1)); background: linear-gradient(101deg, transparent 38%, rgba(240,178,70,.10) 45%, transparent 53%), linear-gradient(95deg, transparent 54%, rgba(240,178,70,.07) 60%, transparent 67%), linear-gradient(110deg, transparent 18%, rgba(240,178,70,.055) 25%, transparent 33%), linear-gradient(88deg, transparent 70%, rgba(240,178,70,.05) 76%, transparent 83%); mix-blend-mode:screen; animation:shimmer 14s ease-in-out infinite;} @keyframes shimmer{50%{transform:translateX(-14px) skewX(-1deg); opacity:.75;}} .murk{position:fixed; inset:0; z-index:3; pointer-events:none; background:radial-gradient(130% 90% at 50% 42%, transparent calc(26% - var(--murk,0)*16%), rgba(6,4,3, calc(.28 + var(--murk,0)*.5)) calc(72% - var(--murk,0)*20%), rgba(4,3,2, calc(.5 + var(--murk,0)*.45)) 100%);} .grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,");} /* ---- layout + links ---- */ .wrap{max-width:var(--wrap); margin:0 auto; padding:0 40px; position:relative; z-index:2;} a{color:var(--amber); text-decoration:none;} .lbl{font-size:11.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--amber-deep); font-weight:600;} .kick{font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--faint);} .rev{font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--amber);} .serif{font-family:var(--serif);} /* ---- depth gauge (experience tier) ---- */ .gauge{position:fixed; top:0; right:26px; height:100vh; z-index:5; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:10px; pointer-events:none; mix-blend-mode:screen;} .gauge .track{position:absolute; right:5px; top:12vh; bottom:12vh; width:1px; background:linear-gradient(180deg, transparent, rgba(240,168,56,.25), rgba(240,168,56,.5));} .gauge .bead{position:absolute; right:2px; width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 10px 2px var(--amber-glow);} .gauge .read{font-family:var(--serif); font-variant-numeric:tabular-nums; font-size:12px; letter-spacing:.06em; color:var(--soft); position:absolute; right:16px; text-align:right;} .gauge .read .z{display:block; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-deep); margin-top:3px;} .gauge .zone{position:absolute; right:16px; font-family:var(--serif); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); white-space:nowrap;} .gauge .tick{position:absolute; right:2px; width:5px; height:1px; background:rgba(240,168,56,.35);} /* ---- masthead (identical on every page) ---- */ header{position:fixed; top:0; left:0; right:0; z-index:6; display:flex; align-items:center; gap:14px; padding:20px 40px;} .mark{width:32px; height:32px; filter:drop-shadow(0 0 6px rgba(240,168,56,.45));} .hname{font-family:var(--serif); font-weight:500; font-size:17px; letter-spacing:.04em; color:var(--ink);} header .status{margin-left:auto; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:8px;} header .status .d{width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px 1px var(--amber-glow); animation:breathe 3.2s ease-in-out infinite;} @keyframes breathe{50%{opacity:.35;}} /* a simple text nav for calm pages */ header nav{margin-left:auto; display:flex; gap:26px; align-items:center;} header nav a{font-size:13px; letter-spacing:.04em; color:var(--soft);} header nav a:hover{color:var(--amber);} /* ---- sound toggle ---- */ .sound{margin-left:18px; width:30px; height:30px; border:1px solid rgba(240,230,211,.22); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--soft); background:transparent; transition:.2s; flex:none;} .sound:hover{border-color:var(--amber); color:var(--amber);} .sound.on{border-color:var(--amber); color:var(--amber);} .sound svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;} .sound .wv{opacity:0; transition:.2s;} .sound.on .wv{opacity:1;} /* ---- screens + reveal ---- */ .screen{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:120px 0;} .reveal{opacity:0; transform:translateY(30px); transition:opacity 1.1s ease, transform 1.1s ease;} .reveal.in{opacity:1; transform:none;} @media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none;}} /* calm tiers: sections flow naturally, not full-viewport, and reveal is gentler */ body[data-tier="reading"] .screen, body[data-tier="workbench"] .screen{min-height:auto; padding:70px 0;} body[data-tier="reading"] .reveal, body[data-tier="workbench"] .reveal{transform:translateY(18px); transition:opacity .8s ease, transform .8s ease;} /* ---- typography ---- */ .eyebrow{margin-bottom:26px;} h1{font-family:var(--serif); font-weight:300; font-size:clamp(48px,7.4vw,92px); line-height:1.0; letter-spacing:-.02em; margin-bottom:30px;} h1 em{font-style:italic; color:var(--amber);} .big-serif{font-family:var(--serif); font-weight:300; font-size:clamp(30px,4.4vw,52px); line-height:1.16; letter-spacing:-.01em;} .big-serif em{font-style:italic; color:var(--amber);} h2{font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.4vw,40px); line-height:1.2; letter-spacing:-.01em;} h2 em{font-style:italic; color:var(--amber);} .lede{font-size:20px; color:var(--soft); max-width:50ch; margin-top:8px;} .lede strong{color:var(--ink); font-weight:600;} .prose p{color:var(--soft); max-width:64ch; margin-top:18px;} .prose p strong{color:var(--ink); font-weight:600;} .quiet{color:var(--faint); font-size:15px; font-style:italic; font-family:var(--serif);} .cue{margin-top:54px; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:12px;} .cue .arw{animation:sink 2.6s ease-in-out infinite;} @keyframes sink{50%{transform:translateY(7px); opacity:.5;}} /* ---- the works, as lights in the deep (reusable list) ---- */ .works{display:flex; flex-direction:column; gap:2px;} .work{position:relative; padding:34px 30px 34px 0; border-top:1px solid var(--rule); display:grid; grid-template-columns:1fr 200px; gap:30px; align-items:center; transition:.4s;} .work:hover{padding-left:14px;} .work .ic{position:absolute; left:-38px; top:50%; transform:translateY(-50%); width:24px; height:24px; color:var(--amber); filter:drop-shadow(0 0 7px var(--amber-glow)); transition:.4s;} .work .ic svg{width:100%; height:100%; display:block; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;} .work:hover .ic{filter:drop-shadow(0 0 16px var(--amber-glow)); transform:translateY(-50%) scale(1.09);} .work h3{font-family:var(--serif); font-weight:400; font-size:30px; letter-spacing:-.01em; display:flex; align-items:baseline; gap:14px;} .work h3 .kind{font-size:15px; font-style:italic; color:var(--amber-deep); font-weight:400;} .work p{color:var(--soft); font-size:15.5px; margin-top:10px; max-width:52ch;} .work p b{color:var(--ink); font-weight:600;} .work .side{text-align:right;} .work .runs{font-family:var(--serif); font-style:italic; font-size:16px; color:var(--ink);} .work .runs small{display:block; color:var(--faint); font-style:normal; font-size:12px; letter-spacing:.04em; margin-top:2px;} .work .price{margin-top:14px; font-size:14px; color:var(--amber);} .work .go{display:inline-block; margin-top:8px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); border-bottom:1px solid rgba(240,168,56,.4); padding-bottom:2px;} .work:hover .go{color:var(--amber);} /* ---- FAQ accordion (workbench) ---- */ .faq{border-top:1px solid var(--rule);} .faq details{border-bottom:1px solid var(--rule);} .faq summary{list-style:none; cursor:pointer; padding:24px 40px 24px 0; position:relative; font-family:var(--serif); font-size:21px; color:var(--ink); transition:.2s;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+"; position:absolute; right:6px; top:22px; font-family:var(--sans); font-size:22px; color:var(--amber-deep); transition:.25s;} .faq details[open] summary::after{transform:rotate(45deg); color:var(--amber);} .faq summary:hover{color:var(--amber);} .faq .a{padding:0 40px 26px 0; color:var(--soft); max-width:70ch;} .faq .a a{border-bottom:1px solid rgba(240,168,56,.4);} /* ---- buttons + CTAs ---- */ .ctas{display:flex; gap:16px; margin-top:36px;} .btn{font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; padding:15px 28px; border:1px solid rgba(240,230,211,.24); color:var(--ink); border-radius:40px; transition:.18s; display:inline-block;} .btn:hover{border-color:var(--amber); color:var(--amber);} .btn.spot{background:var(--amber); color:#241603; border-color:var(--amber);} .btn.spot:hover{background:#ffc25e; border-color:#ffc25e; color:#241603;} .deeper{display:inline-block; margin-top:34px; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--faint); text-decoration:none; border-bottom:1px solid var(--hair); padding-bottom:6px; transition:.28s;} .deeper:hover{color:var(--amber); border-color:var(--amber); letter-spacing:.36em;} /* ---- footer + official channels (identical on every page) ---- */ .foot{padding:60px 0 70px; border-top:1px solid rgba(240,230,211,.08); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:12.5px; letter-spacing:.06em; color:var(--faint);} .channels{display:flex; gap:22px; align-items:center; justify-content:center; margin-top:14px;} .channels a{color:var(--soft); font-size:12.5px; letter-spacing:.06em; transition:.2s;} .channels a:hover{color:var(--amber);} .channels .sep{color:var(--faint);} /* ---- mobile ---- */ @media (max-width:720px){ body{font-size:16.5px;} .wrap{padding:0 24px;} header{padding:16px 24px;} header .status{display:none;} header nav{gap:16px;} .gauge{right:12px;} .gauge .read{font-size:10.5px; right:12px;} h1{font-size:clamp(40px,12vw,60px);} .work{grid-template-columns:1fr; gap:14px;} .work .side{text-align:left;} .work:hover{padding-left:0;} .work .ic{left:-30px; width:20px; height:20px;} .wrap{padding-left:40px;} .ctas{flex-wrap:wrap;} .foot{flex-direction:column; gap:6px;} .faq summary{font-size:19px;} }