/* ============================================================ GR8MD · The 180 — Pro Bento site layer (June 2026 redesign) Shared stylesheet for the secondary pages: about, privacy, terms, thankyou, 404. index.html carries its own page styles built on the same tokens, so the whole site reads as one. Themes: , set inline pre-paint. ============================================================ */ @font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2');} @font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2');} @font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2');} @font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('fonts/inter-latin-700-normal.woff2') format('woff2');} /* ---- Tokens (identical to index.html) ---- */ :root{ --f-circadian:#75D1D1; --f-circadian-ink:#1A5F5F; --f-hydration:#75B6D1; --f-hydration-ink:#1E5A75; --f-sleep:#8879D2; --f-sleep-ink:#35238F; --f-gut:#D19A75; --f-gut-ink:#824523; --f-protein:#D17875; --f-protein-ink:#8C2826; --f-movement:#D1B975; --f-movement-ink:#6B561C; --f-strength:#B375D1; --f-strength-ink:#6B2590; --f-oxygen:#75A3D1; --f-oxygen-ink:#235A90; --f-defense:#75D1A3; --f-defense-ink:#1A6340; --f-mind:#D175A6; --f-mind-ink:#8C265D; --him:#7E9BC2; --him-ink:#2B4A70; --her:#A57CA7; --her-ink:#5E3060; --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter','Helvetica Neue',Helvetica,Arial,sans-serif; } :root[data-theme="dark"]{ --bg:#000000; --cell:#161617; --cell-2:#1D1D1F; --fg:#F5F5F7; --body:#C9C9CE; --muted:#9B9BA1; --faint:#6E6E73; --line:#2C2C2E; --nav-bg:rgba(22,22,23,.8); --input-bg:#161617; --input-line:#3A3A3C; --accent:var(--him); --accent-strong:var(--him); --hero-grad:linear-gradient(105deg,#7E9BC2 0%,#9489BC 48%,#A57CA7 100%); --paths-grad:linear-gradient(135deg,#2B4A70 0%,#5E3060 100%); --shadow:0 10px 30px rgba(0,0,0,.45); color-scheme:dark; } :root[data-theme="light"]{ --bg:#FFFFFF; --cell:#F5F5F7; --cell-2:#EDEDF0; --fg:#1D1D1F; --body:#3A3A3C; --muted:#6E6E73; --faint:#86868B; --line:#D2D2D7; --nav-bg:rgba(251,251,253,.85); --input-bg:#FFFFFF; --input-line:#D2D2D7; --accent:var(--him-ink); --accent-strong:var(--him-ink); --hero-grad:linear-gradient(105deg,#2B4A70 0%,#46406A 50%,#5E3060 100%); --paths-grad:linear-gradient(135deg,#2B4A70 0%,#5E3060 100%); --shadow:0 10px 30px rgba(0,0,0,.08); color-scheme:light; } :root[data-theme="dark"][data-path="her"]{--accent:var(--her);--accent-strong:var(--her);} :root[data-theme="light"][data-path="her"]{--accent:var(--her-ink);--accent-strong:var(--her-ink);} /* ---- Base ---- */ *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{font-family:var(--font);background:var(--bg);color:var(--fg);font-size:17px;line-height:1.55; -webkit-font-smoothing:antialiased;transition:background .35s ease,color .35s ease;} a{color:inherit;text-decoration:none;} img{display:block;} [hidden]{display:none !important;} .wrap{max-width:1060px;margin:0 auto;padding:0 28px;} /* ---- Nav ---- */ .nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border-bottom:1px solid var(--line);} .nav-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:12px 28px;} .logo{display:flex;align-items:center;} .logo-stack{position:relative;display:inline-block;height:22px;} .logo-letters{height:22px;width:auto;} :root[data-theme="light"] .logo-dark{display:block;} :root[data-theme="light"] .logo-light{display:none;} :root[data-theme="dark"] .logo-dark{display:none;} :root[data-theme="dark"] .logo-light{display:block;} .logo-eight{position:absolute;left:-0.3%;top:-10.7%;width:100.3%;height:137%;background-color:var(--accent);transition:background-color .45s ease; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:center;mask-position:center;} .logo-word{font-family:var(--font);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--fg);display:inline-flex;align-items:center;line-height:1;transition:transform .28s cubic-bezier(.2,.7,.2,1);transform-origin:left center;} .logo:hover .logo-word{transform:scale(1.08);} .logo-helix{display:inline-flex;align-items:center;justify-content:center;width:.76em;height:1.4em;margin:0 .05em;} .logo-helix svg{width:100%;height:100%;color:var(--accent);transition:color .45s ease;} .nav-links{display:flex;gap:26px;font-size:13px;color:var(--muted);margin:0 auto;} .nav-links a:hover{color:var(--fg);} .nav .spacer{flex:1;} .icon-btn{width:34px;height:34px;border-radius:50%;border:0;background:var(--cell);color:var(--fg);cursor:pointer; display:inline-flex;align-items:center;justify-content:center;} .icon-btn svg{width:16px;height:16px;} .acct-btn{position:relative;} .acct-btn:hover{color:var(--accent);} .acct-btn .ic-her{display:none;} :root[data-path="her"] .acct-btn .ic-him{display:none;} :root[data-path="her"] .acct-btn .ic-her{display:block;} .acct-btn.has-acct::after{content:'';position:absolute;top:0;right:0;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);} @keyframes themePop{from{transform:rotate(-100deg) scale(.5);opacity:0;}} .icon-btn.flip svg{animation:themePop .5s cubic-bezier(.3,.9,.35,1.2);} /* theme toggle → accent knob with a single centred icon */ #themeToggle{position:relative;width:54px;height:28px;border-radius:999px;background:var(--cell);border:1px solid var(--line);padding:0;cursor:pointer;flex:none;display:block;transition:border-color .2s ease;} #themeToggle:hover{border-color:var(--muted);} #themeToggle::after{content:'';position:absolute;top:50%;left:3px;width:22px;height:22px;border-radius:50%;transform:translate(0,-50%);background:var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .32s cubic-bezier(.2,.7,.2,1),background .3s ease;z-index:0;} :root[data-theme="dark"] #themeToggle::after{transform:translate(26px,-50%);} #themeToggle svg{position:absolute;top:50%;left:14px;width:12px;height:12px;transform:translate(-50%,-50%);color:#fff;z-index:1;transition:left .32s cubic-bezier(.2,.7,.2,1);} :root[data-theme="dark"] #themeToggle svg{left:40px;} :root[data-theme="light"] #themeToggle #iconMoon{display:none;} :root[data-theme="dark"] #themeToggle #iconSun{display:none;} #themeToggle.flip svg{animation:none;} .btn{display:inline-block;font-family:var(--font);font-size:13px;font-weight:500;color:#fff;background:var(--accent); border:0;border-radius:999px;padding:8px 18px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .3s ease;} .btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 40%,transparent);} .btn-lg{font-size:16px;padding:13px 28px;} .btn-quiet{background:var(--cell);color:var(--fg);} .btn-glow{animation:btnGlow 2.6s ease-in-out infinite;} .btn-glow:hover{animation-play-state:paused;} @keyframes btnGlow{0%,100%{box-shadow:0 0 0 0 transparent;}50%{box-shadow:0 0 26px 2px color-mix(in srgb,var(--accent) 48%,transparent);}} /* inverted nav CTA: accent text on page bg, accent border + soft glow pulse */ .nav .btn{background:var(--bg);color:var(--accent);border:1.5px solid var(--accent);animation:navGlow 2.8s ease-in-out infinite;} .nav .btn:hover{background:var(--accent);color:#fff;transform:translateY(-1px);animation-play-state:paused;} @keyframes navGlow{0%,100%{box-shadow:0 0 9px 0 color-mix(in srgb,var(--accent) 26%,transparent);}50%{box-shadow:0 0 22px 2px color-mix(in srgb,var(--accent) 48%,transparent);}} .tlink{font-size:16px;color:var(--accent);font-weight:400;} .tlink:hover{text-decoration:underline;} /* ---- Page hero (smaller than the homepage's) ---- */ .page-hero{padding:84px 28px 56px;text-align:center;} .page-hero .eyebrow{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);} .page-hero h1{font-weight:700;font-size:clamp(36px,6.4vw,60px);letter-spacing:-.026em;line-height:1.04;margin-top:12px; background:var(--hero-grad);-webkit-background-clip:text;background-clip:text;color:transparent;} .page-hero .sub{font-size:clamp(16px,2.2vw,19px);line-height:1.55;color:var(--muted);max-width:52ch;margin:16px auto 0;text-wrap:pretty;} .page-hero .statement{font-size:15px;font-weight:600;color:var(--accent-strong);margin-top:14px;} :root[data-theme="dark"] .page-hero .statement{color:var(--accent);} .page-hero .cta-row{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:28px;flex-wrap:wrap;} /* ---- Cells (the bento grammar, reused) ---- */ .cells{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} .cell{background:var(--cell);border-radius:24px;padding:30px 32px;transition:transform .3s ease,box-shadow .3s ease;} @media (hover:hover){.cell:hover{transform:translateY(-3px);box-shadow:var(--shadow);}} .cell .k{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted);} .cell h3{font-weight:700;font-size:22px;letter-spacing:-.018em;margin-top:8px;} .cell p{font-size:15px;color:var(--body);line-height:1.55;margin-top:8px;} .cell .num{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center; justify-content:center;font-weight:700;font-size:15px;} /* ---- Statement band ---- */ .band{background:var(--cell);border-radius:28px;padding:56px 32px;text-align:center;} .band h2{font-weight:700;font-size:clamp(26px,4vw,34px);letter-spacing:-.02em;} .band .sub{font-size:16px;color:var(--muted);margin-top:8px;} .band .statement{font-size:17px;font-weight:600;color:var(--accent-strong);margin-top:14px;} :root[data-theme="dark"] .band .statement{color:var(--accent);} /* ---- Sections ---- */ .sec{padding:28px 0;} .sec-head{text-align:center;max-width:62ch;margin:0 auto 30px;} .sec-head h2{font-weight:700;font-size:clamp(26px,4vw,34px);letter-spacing:-.02em;line-height:1.12;} .sec-head p{font-size:16px;color:var(--muted);margin-top:10px;text-wrap:pretty;} /* ---- Prose (legal & long-form) ---- */ .prose{max-width:680px;margin:0 auto;padding:64px 28px 24px;} .prose .eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);} .prose .page-title{font-weight:700;font-size:clamp(30px,5vw,42px);letter-spacing:-.024em;line-height:1.06;margin-top:10px; background:var(--hero-grad);-webkit-background-clip:text;background-clip:text;color:transparent;} .prose .lede{font-size:15px;color:var(--muted);margin:12px 0 28px;} .prose h2{font-weight:650;font-size:21px;letter-spacing:-.015em;margin:34px 0 10px;} .prose p{font-size:16px;line-height:1.65;color:var(--body);margin:0 0 12px;} .prose ul{padding-left:20px;margin:0 0 12px;} .prose li{font-size:16px;line-height:1.65;color:var(--body);margin:6px 0;} .prose strong{color:var(--fg);font-weight:600;} /* ---- Callout ---- */ .callout{background:var(--cell);border-radius:16px;padding:20px 24px;margin:22px 0;} .callout .lab{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--accent-strong);} :root[data-theme="dark"] .callout .lab{color:var(--accent);} .callout .bd{font-size:14.5px;line-height:1.6;color:var(--body);margin-top:6px;} /* ---- "In the life" timeline (Morning / Day / Evening pages) ---- */ .life-switch{position:relative;display:flex;background:var(--cell);border-radius:999px;padding:4px; width:max-content;margin:6px auto 24px;} .life-switch a{position:relative;z-index:1;font-size:13px;font-weight:650;color:var(--muted);padding:9px 24px;border-radius:999px;transition:color .25s ease;} .life-switch a:hover{color:var(--fg);} .life-thumb{position:absolute;top:4px;left:0;height:calc(100% - 8px);width:0;border-radius:999px;background:var(--accent);z-index:0; box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .42s cubic-bezier(.2,.7,.2,1),width .42s cubic-bezier(.2,.7,.2,1),background .3s ease;} .life{max-width:680px;margin:0 auto;padding:0 28px 8px;} .life-row{display:grid;grid-template-columns:68px 20px 1fr;column-gap:16px;} .life-time{font-weight:700;font-size:14px;color:var(--accent-strong);text-align:right;padding-top:16px;font-variant-numeric:tabular-nums;} :root[data-theme="dark"] .life-time{color:var(--accent);} .life-rail{display:flex;flex-direction:column;align-items:center;} .life-dot{width:14px;height:14px;border-radius:50%;margin-top:19px;flex:none;border:3px solid var(--bg);background:var(--dotc,var(--accent));box-shadow:0 0 0 1px var(--line);} .life-line{width:2px;flex:1;background:var(--line);min-height:14px;} .life-card{background:var(--cell);border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin-bottom:16px; transition:transform .25s ease,box-shadow .25s ease;} @media (hover:hover){.life-card:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow);position:relative;z-index:2;}} .life-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;} .life-title{font-weight:650;font-size:16px;color:var(--fg);letter-spacing:-.01em;} .life-tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;border-radius:999px;padding:3px 10px;} .life-desc{font-size:14px;color:var(--body);line-height:1.55;margin-top:6px;} @media (max-width:520px){.life-row{grid-template-columns:54px 18px 1fr;column-gap:12px;}.life-time{font-size:13px;}} /* ---- Glow emphasis (key titles / words only) ---- */ .gw{animation:gwText 2.8s ease-in-out infinite;} @keyframes gwText{0%,100%{text-shadow:0 0 0 transparent;}50%{text-shadow:0 0 18px color-mix(in srgb,var(--accent) 80%,transparent);}} .glow{animation:gwFilter 3.4s ease-in-out infinite;} @keyframes gwFilter{0%,100%{filter:drop-shadow(0 0 1px color-mix(in srgb,var(--accent) 20%,transparent));} 50%{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 45%,transparent));}} /* ---- Time-of-day page themes (morning / day / evening) ---- */ body.tod-morning{--tod:#EFDC9C;--tod-ink:#6E5A18;} body.tod-day{--tod:#EFC394;--tod-ink:#7E5224;} body.tod-evening{--tod:#D98E5C;--tod-ink:#6E3A16;} body[class*="tod-"]::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(135% 78% at 50% -14%, color-mix(in srgb,var(--tod) 32%,transparent), transparent 62%), radial-gradient(70% 48% at 100% 2%, color-mix(in srgb,var(--tod) 18%,transparent), transparent 55%), radial-gradient(70% 48% at 0% 4%, color-mix(in srgb,var(--tod) 14%,transparent), transparent 55%);} body[class*="tod-"] .page-hero .eyebrow{color:var(--tod-ink);} :root[data-theme="dark"] body[class*="tod-"] .page-hero .eyebrow{color:var(--tod);} /* ---- Footer (identical to the homepage) ---- */ .footer{border-top:1px solid var(--line);margin-top:64px;padding:40px 0 28px;} .footer .statement{font-size:17px;font-weight:600;text-align:center;} .footer .links{display:flex;gap:10px 24px;flex-wrap:wrap;justify-content:center;margin:20px 0 14px;font-size:13px;color:var(--muted);} .footer .links a:hover,.footer button.linklike:hover{color:var(--fg);text-decoration:underline;} .footer button.linklike{background:none;border:0;color:var(--muted);font-family:var(--font);font-size:13px;padding:0;cursor:pointer;} .footer .legal{text-align:center;font-size:12px;color:var(--faint);line-height:1.6;max-width:62ch;margin:0 auto;} .footer .fine{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--faint);font-size:11.5px;margin-top:22px;} /* ---- Skip link & focus ---- */ .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--fg);color:var(--bg); padding:10px 16px;border-radius:0 0 10px 0;font-weight:600;font-size:13px;} .skip:focus{left:0;} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;} /* ---- Reduced motion ---- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .cell:hover,.btn:hover{transform:none;} .icon-btn.flip svg{animation:none;} } /* ---- Responsive ---- */ @media (max-width:920px){ .nav-links{display:none;} .cells{grid-template-columns:1fr;} } @media (max-width:640px){ .page-hero{padding:60px 20px 44px;} .nav-inner{flex-wrap:wrap;row-gap:8px;padding:10px 16px;} .prose{padding:48px 20px 16px;} }