/* ============================================================ GR8MD / The 180 — design system One stylesheet for the website AND the PDFs (WeasyPrint). Fonts are self-hosted and referenced relatively, so the same file works on a web server and in a PDF render (set the PDF base_url to this folder). Print-only rules live in @media print. ============================================================ */ /* ---- Fonts (self-hosted, relative paths) ---- */ @font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2');} @font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2');} @font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2');} @font-face{font-family:'Inter';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/inter-latin-700-normal.woff2') format('woff2');} @font-face{font-family:'Newsreader';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/newsreader-latin-400-normal.woff2') format('woff2');} @font-face{font-family:'Newsreader';font-weight:500;font-style:normal;font-display:swap;src:url('fonts/newsreader-latin-500-normal.woff2') format('woff2');} @font-face{font-family:'Newsreader';font-weight:400;font-style:italic;font-display:swap;src:url('fonts/newsreader-latin-400-italic.woff2') format('woff2');} /* ---- Design tokens ---- */ :root{ /* neutrals */ --canvas:#1C1C1E; --surface:#2C2C2E; --page:#F5F5F7; --card:#FFFFFF; --ink:#1C1C1E; --secondary:#6E6E73; --secondary-dark:#AEAEB2; --hairline:#D1D1D6; --offwhite:#F5F5F7; --on-dark-soft:#E8E8EA; --on-dark-mute:#8E8E93; --card-line:#E5E5E8; /* the ten foundations: base (on-dark) + ink (on-light) */ --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; /* type */ --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif; --font-serif:'Newsreader',Georgia,'Times New Roman',serif; /* shape */ --r-card:16px; --r-tile:14px; --r-md:12px; --r-sm:10px; /* per-context accents (overridden by .f-* classes below) */ --ink-accent:var(--ink); --cover-accent:var(--secondary-dark); --f-bg:var(--surface); --f-ink:var(--offwhite); } /* ---- Foundation theme classes ---- Put on a tile/badge to colour it, or on /a section to tint a whole lesson. Each sets the tile bg/ink AND the lesson accent (headings, cover eyebrow). */ .f-circadian{--f-bg:var(--f-circadian);--f-ink:var(--f-circadian-ink);--ink-accent:var(--f-circadian-ink);--cover-accent:var(--f-circadian);} .f-hydration{--f-bg:var(--f-hydration);--f-ink:var(--f-hydration-ink);--ink-accent:var(--f-hydration-ink);--cover-accent:var(--f-hydration);} .f-sleep{--f-bg:var(--f-sleep);--f-ink:var(--f-sleep-ink);--ink-accent:var(--f-sleep-ink);--cover-accent:var(--f-sleep);} .f-gut{--f-bg:var(--f-gut);--f-ink:var(--f-gut-ink);--ink-accent:var(--f-gut-ink);--cover-accent:var(--f-gut);} .f-protein{--f-bg:var(--f-protein);--f-ink:var(--f-protein-ink);--ink-accent:var(--f-protein-ink);--cover-accent:var(--f-protein);} .f-movement{--f-bg:var(--f-movement);--f-ink:var(--f-movement-ink);--ink-accent:var(--f-movement-ink);--cover-accent:var(--f-movement);} .f-strength{--f-bg:var(--f-strength);--f-ink:var(--f-strength-ink);--ink-accent:var(--f-strength-ink);--cover-accent:var(--f-strength);} .f-oxygen{--f-bg:var(--f-oxygen);--f-ink:var(--f-oxygen-ink);--ink-accent:var(--f-oxygen-ink);--cover-accent:var(--f-oxygen);} .f-defense{--f-bg:var(--f-defense);--f-ink:var(--f-defense-ink);--ink-accent:var(--f-defense-ink);--cover-accent:var(--f-defense);} .f-mind{--f-bg:var(--f-mind);--f-ink:var(--f-mind-ink);--ink-accent:var(--f-mind-ink);--cover-accent:var(--f-mind);} /* ---- Base ---- */ *{box-sizing:border-box;margin:0;padding:0;} body{font-family:var(--font-sans);color:var(--ink);background:var(--page);line-height:1.5;font-size:13.5px;} .gr8-wrap{max-width:760px;margin:0 auto;padding:26px 20px;} /* ---- Prose ---- */ h1,h2,h3{letter-spacing:-.01em;} h2{color:var(--ink-accent);font-weight:700;font-size:19px;margin:16px 0 7px;} h3{color:var(--ink);font-weight:700;font-size:14px;margin:11px 0 4px;} p{margin:0 0 8px;} p.lead{color:#3A3A3C;} p.muted{color:var(--secondary);font-size:11.5px;line-height:1.45;margin-top:6px;} .lede{color:var(--secondary);font-size:14px;margin:2px 0 22px;} .quote{font-family:var(--font-serif);font-style:italic;font-weight:500;color:var(--ink-accent);font-size:17px;line-height:1.4;margin:6px 0 11px;} .bul{margin:5px 0;padding-left:17px;text-indent:-17px;line-height:1.45;} .bul .dt{font-size:15px;} .bul b{font-weight:700;} /* ---- Cover band (web: full-width dark section; print: full-bleed) ---- */ .cover{background:var(--canvas);padding:30px 24px;border-radius:var(--r-card);margin-bottom:18px;} .cover .rule{width:26px;height:4px;border-radius:2px;background:var(--cover-accent);margin-bottom:9px;} .cover .eyebrow{color:var(--cover-accent);font-weight:700;font-size:10.5px;letter-spacing:.04em;} .cover .title{color:var(--offwhite);font-weight:700;font-size:31px;letter-spacing:-.02em;line-height:1.04;margin-top:7px;} .cover .title.sm{font-size:26px;} .cover .subtitle{color:var(--secondary-dark);font-size:14px;margin-top:9px;max-width:84%;} /* ---- Iron callout (light) ---- */ .ironbox{background:#F0F0F2;border:.6px solid var(--hairline);border-left:2.4px solid var(--ink);border-radius:8px;padding:12px 15px;margin:11px 0;} .ironbox .lab{font-weight:700;font-size:11px;margin-bottom:3px;} .ironbox .bd{color:#3A3A3C;font-size:13px;line-height:1.45;} /* ============================================================ BOARDS — the dark-card grammar ============================================================ */ .board{background:var(--canvas);border-radius:var(--r-card);padding:30px 24px;color:var(--offwhite);margin:0 0 18px;} .board-h{font-weight:600;font-size:22px;letter-spacing:-.02em;} .board-sub{color:var(--secondary-dark);font-size:14px;margin:6px 0 20px;} .row2{display:flex;flex-wrap:wrap;justify-content:space-between;} .row2 .col{width:calc(50% - 7px);} /* colour tiles (foundations) + mini tiles (e.g. Reset map) */ .tiles{display:flex;flex-wrap:wrap;justify-content:space-between;} .tile{width:calc(50% - 6px);margin-bottom:12px;border-radius:var(--r-tile);padding:15px 16px;min-height:112px; display:flex;flex-direction:column;justify-content:space-between;background:var(--f-bg);color:var(--f-ink);} .tile.hero{width:100%;margin-bottom:0;min-height:96px;} .tile.mini{min-height:74px;} .tile .num{font-size:12px;font-weight:600;opacity:.45;} .tile .sys{font-weight:700;font-size:25px;letter-spacing:-.025em;line-height:1.02;} .tile .man{font-weight:500;font-size:13.5px;margin-top:5px;opacity:.82;line-height:1.25;} .tile .lab{font-size:11px;font-weight:600;opacity:.55;} .tile .nm{font-weight:700;font-size:18px;letter-spacing:-.02em;margin-top:6px;} .tile .tm{display:flex;gap:9px;margin-top:13px;} .tile .tm svg{width:18px;height:18px;} /* overlays */ .ovs{display:flex;flex-wrap:wrap;justify-content:space-between;} .ov{width:calc(50% - 6px);margin-bottom:12px;background:var(--surface);border-radius:var(--r-md);padding:18px;} .ov svg{width:24px;height:24px;color:var(--offwhite);} .ovn{color:var(--offwhite);font-weight:600;font-size:17px;margin-top:10px;letter-spacing:-.01em;} .ovg{color:var(--secondary-dark);font-size:13px;line-height:1.4;margin-top:4px;} .ovnote{color:var(--secondary);font-size:13px;line-height:1.5;margin-top:18px;} /* "tuned to ten" grid (overlay × foundations) */ .irh{display:flex;align-items:center;gap:12px;margin-bottom:6px;} .irc{width:42px;height:42px;border-radius:50%;border:1px solid #5A5A5E;display:flex;align-items:center;justify-content:center;flex:none;} .irc svg{width:22px;height:22px;color:var(--offwhite);} .irt{color:var(--offwhite);font-weight:600;font-size:22px;letter-spacing:-.02em;} .irs{color:var(--secondary-dark);font-size:14px;} .irlead{color:var(--secondary);font-size:13px;margin:14px 0 8px;} .ir{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:.5px solid var(--surface);} .ir.last{border-bottom:none;} .id{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px;background:var(--f-bg);} .ifn{color:var(--on-dark-mute);font-size:12px;width:74px;flex:none;margin-top:2px;} .itx{color:var(--on-dark-soft);font-size:14px;line-height:1.4;} /* generic dark rows (arcs, day zero) */ .r{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:.5px solid var(--surface);} .r.last{border-bottom:none;} .r .ix{color:var(--on-dark-mute);font-size:12px;font-weight:600;width:64px;flex:none;margin-top:2px;} .r .ic{width:26px;height:26px;border-radius:50%;background:var(--surface);color:var(--offwhite);flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;} .r .tx{color:var(--on-dark-soft);font-size:14px;line-height:1.4;} .r .tx b{color:var(--offwhite);font-weight:600;} .r .tx span{color:var(--on-dark-mute);} /* phases / rhythm cards */ .phase{background:var(--surface);border-radius:var(--r-md);padding:18px;width:31.8%;} .phase .pd{color:var(--secondary-dark);font-size:11px;font-weight:600;letter-spacing:.04em;} .phase .pn{font-weight:700;font-size:19px;margin:6px 0 2px;letter-spacing:-.02em;} .phase .pdesc{color:#C7C7CC;font-size:12.5px;line-height:1.45;margin-top:6px;} .rc{background:var(--surface);border-radius:var(--r-md);padding:18px;width:31.8%;} .rc svg{width:24px;height:24px;color:var(--offwhite);} .rc .tag{color:var(--secondary-dark);font-size:10.5px;font-weight:700;letter-spacing:.12em;margin-top:12px;} .rc .day{font-weight:700;font-size:17px;margin-top:4px;letter-spacing:-.01em;} .rc .mins{color:var(--on-dark-mute);font-size:11.5px;margin-top:1px;} .rc .ln{color:#C7C7CC;font-size:12.5px;line-height:1.45;margin-top:8px;} /* sub-paths */ .pcol-h{color:var(--secondary-dark);font-size:12px;font-weight:700;letter-spacing:.12em;margin:2px 0 8px;} .path{padding:8px 0;border-bottom:.5px solid var(--surface);} .path.last{border-bottom:none;} .path b{color:var(--offwhite);font-weight:600;font-size:14px;} .path span{display:block;color:var(--on-dark-mute);font-size:11.5px;margin-top:1px;} /* depth dial + legend */ .dial{display:flex;gap:3px;margin:4px 0 9px;} .dcell{flex:1;height:12px;border-radius:2px;background:#3A3A3C;} .dcell.lit{background:var(--offwhite);} .dialcap{color:var(--secondary-dark);font-size:13px;line-height:1.5;margin-top:14px;} .legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;} .legend div{color:#C7C7CC;font-size:12px;} .legend b{color:var(--offwhite);} /* badges */ .badges{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:4px;} .bw{width:calc(25% - 12px);text-align:center;} .badge{width:62px;height:62px;border-radius:50%;background:var(--surface);border:3px solid var(--f-bg); display:flex;align-items:center;justify-content:center;margin:0 auto;font-weight:700;font-size:15px;color:var(--offwhite);} .bw .bl{color:var(--secondary-dark);font-size:11px;margin-top:7px;line-height:1.25;} /* three-layer (depth/badge/rank) */ .three{margin-top:14px;} .three div{background:var(--surface);border-radius:var(--r-sm);padding:11px 15px;margin-bottom:8px;} .three .k{color:var(--offwhite);font-weight:600;font-size:13px;display:inline;} .three .v{color:var(--on-dark-mute);font-size:12.5px;display:inline;margin-left:7px;} /* timeline */ .tl{display:flex;justify-content:space-between;margin-top:8px;} .tl .n{flex:1;text-align:center;} .tl .dot{width:13px;height:13px;border-radius:50%;background:#5A5A5E;margin:0 auto 8px;} .tl .n.hot .dot{background:var(--offwhite);} .tl .d{color:var(--offwhite);font-weight:700;font-size:13px;} .tl .l{color:var(--on-dark-mute);font-size:10.5px;margin-top:2px;line-height:1.3;} .tl .n.hot .l{color:var(--secondary-dark);} /* stacks (dark cards) */ .stk{background:var(--canvas);border-radius:var(--r-tile);padding:17px 18px 11px;color:var(--offwhite);margin:0 0 10px;} .stk h4{font-weight:600;font-size:16px;margin-bottom:8px;letter-spacing:-.01em;} .sr{display:flex;gap:11px;align-items:flex-start;padding:6px 0;} .sr .itx{color:var(--on-dark-soft);font-size:13.5px;line-height:1.4;} .note{color:var(--secondary);font-size:12.5px;line-height:1.5;margin-top:16px;} /* footer / disclaimer (web: normal footer; print: repeats in page margin) */ .pagefoot{font-family:var(--font-sans);font-size:7.1pt;line-height:1.32;color:var(--secondary);text-align:center;margin-top:22px;} .pagefoot b{font-weight:700;} /* avoid awkward splits inside cards */ .board,.tile,.ironbox,.ov,.stk{break-inside:avoid;} /* ============================================================ PRINT — paged scaffolding for PDFs (ignored by browsers) ============================================================ */ @media print{ @page{ size:A4; margin:14mm 16mm 19mm 16mm; @bottom-center{ content:element(pagefoot); } } body{ background:#fff; font-size:13.5px; } .gr8-wrap{ max-width:none; margin:0; padding:0; } /* full-bleed cover band on page one */ .cover{ margin:-14mm -16mm 18px -16mm; padding:22mm 16mm 14mm 16mm; border-radius:0; } /* disclaimer repeats in the bottom margin of every page */ .pagefoot{ position:running(pagefoot); margin-top:0; } } /* ============================================================ SITE LAYER — gr8md.co.uk (screen only; everything below is built from the tokens above — no new colours, no new fonts). Themes: , set by a tiny inline script from the device preference or the user's saved choice. ============================================================ */ @media screen{ /* ---- Theme aliases (light is the base, mirrors the PDFs) ---- */ :root{ --bg:var(--page); --fg:var(--ink); --fg-soft:var(--secondary); --line:var(--hairline); --panel:var(--card); color-scheme:light; } :root[data-theme="dark"]{ --bg:var(--canvas); --fg:var(--offwhite); --fg-soft:var(--secondary-dark); --line:var(--surface); --panel:var(--surface); --ink-accent:var(--offwhite); color-scheme:dark; } /* re-point base prose at the aliases (identical in light mode) */ body{background:var(--bg);color:var(--fg);font-size:15px;} h3{color:var(--fg);} p.lead{color:var(--fg);} p.muted,.lede,.note,.pagefoot{color:var(--fg-soft);} /* dark-mode fixes for light-context components */ :root[data-theme="dark"] .board, :root[data-theme="dark"] .stk{border:1px solid var(--surface);} :root[data-theme="dark"] .ironbox{background:var(--surface);border-color:var(--surface);border-left-color:var(--offwhite);} :root[data-theme="dark"] .ironbox .bd{color:var(--on-dark-soft);} @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} } /* ---- Header ---- */ .site-header{position:sticky;top:0;z-index:50;background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);} .site-header-inner{max-width:760px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .site-header .spacer{flex:1;} .logo-stack{position:relative;display:inline-block;line-height:0;} .logo-letters{height:28px;width:auto;display:block;} :root[data-theme="dark"] .logo-dark{display:none;} :root:not([data-theme="dark"]) .logo-light{display:none;} /* mask-image is set inline on the element (relative URLs in custom properties resolve against this stylesheet, not the page) */ .logo-eight{position:absolute;left:-0.3%;top:-10.7%;width:100.3%;height:137%;background-color:var(--fg); -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;pointer-events:none;} /* ---- Segmented control (For him / For her) ---- */ .seg{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:999px;} .seg button{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; padding:6px 13px;border:0;border-radius:999px;background:transparent;color:var(--fg-soft);cursor:pointer;} .seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg);} /* ---- Buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans); font-size:13px;font-weight:600;letter-spacing:.01em;padding:11px 20px;border-radius:999px; border:1px solid var(--fg);background:var(--fg);color:var(--bg);cursor:pointer;text-decoration:none;} .btn:hover{opacity:.85;} .btn-ghost{background:transparent;color:var(--fg);} .btn-ghost:hover{opacity:1;background:var(--fg);color:var(--bg);} /* boards and covers are always dark, whatever the theme */ .board .btn,.cover .btn{border-color:var(--offwhite);background:var(--offwhite);color:var(--canvas);} .board .btn-ghost,.cover .btn-ghost{background:transparent;color:var(--offwhite);} .board .btn-ghost:hover,.cover .btn-ghost:hover{background:var(--offwhite);color:var(--canvas);} .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%; border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;} .icon-btn svg{width:18px;height:18px;} .icon-btn:hover{border-color:var(--fg);} [hidden]{display:none !important;} /* ---- Hero (a larger .cover) ---- */ .cover.hero{padding:46px 28px 40px;margin-top:18px;} .cover.hero .title{font-size:clamp(30px,5.4vw,44px);max-width:20ch;} .cover.hero .subtitle{font-size:15px;max-width:46ch;} .statement{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:17px;line-height:1.4;} .cover .statement{color:var(--on-dark-soft);margin-top:14px;} .cta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:22px;} .cover .finenote{color:var(--on-dark-mute);font-size:11.5px;margin-top:14px;} /* ---- Centred band format ---- */ .center{text-align:center;} .center .rule,.center .title,.center .subtitle,.center .board-sub{margin-left:auto;margin-right:auto;} .center .cta-row,.center .form-row{justify-content:center;} .center .field{flex:0 1 340px;text-align:left;} .head-c .board-h,.head-c .board-sub{text-align:center;margin-left:auto;margin-right:auto;} .hero-mark{position:relative;display:inline-block;line-height:0;margin-bottom:22px;} .hero-mark img{height:36px;width:auto;display:block;} .cover .logo-eight,.board .logo-eight{background-color:var(--offwhite);} h2.board-h.serif{font-family:var(--font-serif);font-weight:500;letter-spacing:0;font-size:clamp(24px,4vw,30px);line-height:1.18;} /* ---- Light band + routine cards (always light, the boards' mirror) ---- */ .band-light{background:var(--page);border-radius:var(--r-card);padding:34px 24px;margin:0 0 18px;color:var(--ink);break-inside:avoid;} :root[data-theme="light"] .band-light{background:var(--card);} .band-light .board-h{color:var(--ink);} .band-light .board-sub{color:var(--secondary);} .cards3{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-top:20px;} .lc{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-md);padding:24px 18px;width:31.8%;text-align:center;} :root[data-theme="light"] .lc{background:var(--page);border-color:var(--card-line);} .lc svg{width:22px;height:22px;color:var(--ink);} .lc .t{font-weight:700;font-size:16px;margin-top:10px;letter-spacing:-.01em;} .lc .d{color:var(--secondary);font-size:13px;line-height:1.5;margin-top:6px;} /* ---- Film frame ---- */ .film{position:relative;background:var(--canvas);border:1px solid var(--surface);border-radius:var(--r-md); aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;margin-top:22px;overflow:hidden;} .film .tc{position:absolute;top:14px;left:16px;color:var(--on-dark-mute);font-size:11px;letter-spacing:.08em;font-variant-numeric:tabular-nums;} .film .line{color:var(--offwhite);font-weight:700;font-size:clamp(22px,4.6vw,34px);letter-spacing:-.02em;text-align:center;padding:0 24px;transition:opacity .6s ease;} /* readable captions inside dark boards (token swap, both themes) */ .board .note,.board .ovnote,.board .irlead{color:var(--secondary-dark);} .board .input::placeholder{color:var(--secondary-dark);} .dialcap b{color:var(--offwhite);font-weight:600;} /* ============================================================ PALETTE EXTENSION — owner-approved (June 2026). Him/Her accents + time-of-day tints, defined as tokens like the foundations (base for dark, ink for light). The --accent alias follows the For him / For her choice via . ============================================================ */ :root{ --him:#7E9BC2; --him-ink:#2B4A70; /* dusty blue */ --her:#A57CA7; --her-ink:#5E3060; /* dusty plum */ --t-morning:#EFDC9C; --t-morning-ink:#6E5A18; /* light yellow */ --t-day:#EFC394; --t-day-ink:#7E5224; /* light orange */ --t-evening:#D98E5C; --t-evening-ink:#6E3A16; /* sunset orange */ --accent:var(--him); --accent-ink:var(--him-ink); } :root[data-path="her"]{--accent:var(--her);--accent-ink:var(--her-ink);} .logo-eight{background-color:var(--accent);transition:background-color .45s ease;} .cover .logo-eight,.board .logo-eight{background-color:var(--accent);} /* ---- Animated buttons ---- */ .btn,.icon-btn{transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease,opacity .25s ease;} .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.22);opacity:1;} .btn:active{transform:translateY(0) scale(.97);box-shadow:none;} .icon-btn:hover{transform:rotate(12deg);} @keyframes btnPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);}70%{box-shadow:0 0 0 11px transparent;}100%{box-shadow:0 0 0 0 transparent;}} .btn-pulse{animation:btnPulse 2.8s ease infinite;} .btn-pulse:hover{animation-play-state:paused;} /* ---- For him / For her: sliding toggle ---- */ .seg{position:relative;} .seg .thumb{position:absolute;top:3px;left:0;height:calc(100% - 6px);border-radius:999px;background:var(--accent); transition:transform .35s cubic-bezier(.2,.7,.2,1),width .35s cubic-bezier(.2,.7,.2,1),background .35s ease;z-index:0;} .seg button{position:relative;z-index:1;transition:color .3s ease;} .seg button[aria-pressed="true"]{background:transparent;color:var(--card);} /* ---- Foundation tiles: hover lifts (the "active" state), click flips ---- */ .tiles .tile{position:relative;padding:0;display:block;cursor:pointer;background:transparent;perspective:1200px; transition:transform .28s ease,box-shadow .28s ease;} .tile .flip{position:relative;height:100%;min-height:112px;transform-style:preserve-3d; transition:transform .7s cubic-bezier(.3,.9,.32,1);} .tile.flipped .flip{transform:rotateY(180deg);} .tile .face-f,.tile .face-b{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r-tile); padding:15px 16px;display:flex;flex-direction:column;justify-content:space-between;min-height:112px;} .tile .face-f{position:relative;height:100%;background:var(--f-bg);color:var(--f-ink);} .tile .face-b{position:absolute;inset:0;transform:rotateY(180deg);background:var(--f-bg);color:var(--f-ink);} .tile .face-b .bk{font-weight:500;font-size:13.5px;line-height:1.4;} .tile .face-b .num{font-size:11px;font-weight:600;opacity:.55;margin-top:10px;} @media (hover:hover){ .tiles .tile:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 14px 30px rgba(0,0,0,.3);} } .tiles .tile:focus-visible{transform:translateY(-5px) scale(1.02);box-shadow:0 14px 30px rgba(0,0,0,.3);} .tiles .tile:active{transform:translateY(-2px) scale(1.01);} /* ---- Routine cards: time-of-day tints + hover-active ---- */ .lc{position:relative;overflow:hidden;--t:var(--hairline);--t-ink:var(--ink); transition:transform .3s ease,box-shadow .3s ease,background .3s ease;} .lc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--t);} .lc-morning{--t:var(--t-morning);--t-ink:var(--t-morning-ink);} .lc-day{--t:var(--t-day);--t-ink:var(--t-day-ink);} .lc-evening{--t:var(--t-evening);--t-ink:var(--t-evening-ink);} .lc .ic{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--t) 32%,transparent);transition:transform .3s ease;} .lc svg{color:var(--t-ink);} .lc .t{color:var(--ink);} .lc:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.12); background:color-mix(in srgb,var(--t) 16%,var(--card));} .lc:hover .ic{transform:scale(1.12) rotate(-6deg);} /* ---- Accent links: him/her column headers, milestone, FAQ ---- */ .col-him .pcol-h{color:var(--him);} .col-her .pcol-h{color:var(--her);} :root[data-path="him"] .col-her{opacity:.35;} :root[data-path="her"] .col-him{opacity:.35;} :root[data-path="him"] .col-him{order:-1;} .tl .n.hot .dot{background:var(--accent);} .faq details[open] summary,.faq details[open] summary::after{color:var(--accent-ink);} :root[data-theme="dark"] .faq details[open] summary,:root[data-theme="dark"] .faq details[open] summary::after{color:var(--accent);} .faq summary::after{transition:transform .25s ease,color .25s ease;} /* ---- Hover lift for dark cards ---- */ .ov,.phase,.rc{transition:transform .3s ease,background .3s ease;} .ov:hover,.phase:hover,.rc:hover{transform:translateY(-3px);background:color-mix(in srgb,var(--surface) 86%,var(--offwhite));} /* ---- Scroll reveal + hero entrance + dial draw ---- */ .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;} .rv.in{opacity:1;transform:none;} #dialPath{stroke-dasharray:640;stroke-dashoffset:640;transition:stroke-dashoffset 1.6s ease .25s;} .in #dialPath{stroke-dashoffset:0;} @media (prefers-reduced-motion:no-preference){ .cover.hero > *{animation:rise .7s ease backwards;} .cover.hero > :nth-child(2){animation-delay:.07s;} .cover.hero > :nth-child(3){animation-delay:.14s;} .cover.hero > :nth-child(4){animation-delay:.21s;} .cover.hero > :nth-child(5){animation-delay:.28s;} .cover.hero > :nth-child(6){animation-delay:.35s;} @keyframes rise{from{opacity:0;transform:translateY(14px);}} } /* footer links: sliding underline */ .site-footer a,.site-footer button.linklike{background:linear-gradient(currentColor,currentColor) bottom left / 0 1px no-repeat; transition:background-size .3s ease,color .3s ease;padding-bottom:1px;} .site-footer a:hover,.site-footer button.linklike:hover{background-size:100% 1px;text-decoration:none;} /* ---- Accent wash across sections (owner-selected, June 2026) ---- The him/her accent threads through every monochrome section as a subtle tint; foundation colours stay reserved for tiles, the film lines and the dial gradient. ---- */ .cover.hero{position:relative;isolation:isolate;} .cover.hero::before{content:'';position:absolute;z-index:-1;top:-140px;left:50%;transform:translateX(-50%); width:540px;height:380px;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 30%,transparent),transparent 72%);} .phase,.rc{background:color-mix(in srgb,var(--accent) 12%,var(--surface)); border-top:3px solid color-mix(in srgb,var(--accent) 65%,transparent);} .phase:hover,.rc:hover{background:color-mix(in srgb,var(--accent) 20%,var(--surface));} .phase .pd,.rc .tag{color:color-mix(in srgb,var(--accent) 70%,var(--offwhite));} .rc svg{color:var(--accent);} .ov svg{color:var(--accent);transition:color .45s ease;} .ov:hover{background:color-mix(in srgb,var(--accent) 12%,var(--surface));} .tl .dot{background:color-mix(in srgb,var(--accent) 45%,var(--surface));transition:background .45s ease;} .board .r .ic{background:color-mix(in srgb,var(--accent) 28%,var(--surface));} .film .tc{color:color-mix(in srgb,var(--accent) 70%,var(--on-dark-mute));} #waitlistForm .btn{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--card);} #waitlistForm .btn:hover{box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 50%,transparent);} .board #waitlistForm .input:focus-visible{outline-color:var(--accent);} /* ============================================================ INTERACTION UPGRADE — owner feedback (June 2026): louder CTA, accent ghost button, grow-on-hover cards, centred mantra tiles, accent dial curves, overlay marquee, sub-path shade tiles, looping journey. ============================================================ */ /* louder waitlist pulse + accent ghost in the hero */ @keyframes btnPulseLoud{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 85%,transparent),0 0 20px 3px color-mix(in srgb,var(--accent) 45%,transparent);} 70%{box-shadow:0 0 0 16px transparent,0 0 30px 8px color-mix(in srgb,var(--accent) 28%,transparent);} 100%{box-shadow:0 0 0 0 transparent,0 0 20px 3px color-mix(in srgb,var(--accent) 45%,transparent);} } .btn-pulse{animation:btnPulseLoud 2.2s ease infinite;} .cover .btn-ghost{border-color:var(--accent);color:var(--accent);} .cover .btn-ghost:hover{background:var(--accent);border-color:var(--accent);color:var(--canvas);} /* cards grow on hover — the writing grows with them */ .lc,.phase,.rc{position:relative;} .lc:hover{transform:translateY(-3px) scale(1.06);z-index:2;} .phase:hover,.rc:hover{transform:translateY(-3px) scale(1.05);z-index:2;} /* foundation tiles: centred mantra, no number, name as a light bottom label */ .tile .face-f{align-items:center;justify-content:center;text-align:center;} .tile .face-f .num{display:none;} .tile .face-f .sys{position:absolute;left:0;right:0;bottom:10px;font-size:10.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;opacity:.4;line-height:1;} .tile .face-f .man{font-size:17px;font-weight:700;opacity:1;line-height:1.25;margin-top:0;letter-spacing:-.01em;} .tile .face-f .tm{justify-content:center;margin-top:10px;} @media (hover:hover){.tiles .tile:hover{transform:scale(1.06);z-index:2;}} .tiles .tile:focus-visible{transform:scale(1.06);z-index:2;} .tiles .tile:active{transform:scale(1.03);} /* depth dial: accent line + side curves */ #dialPath{stroke-dasharray:700;stroke-dashoffset:700;} .dial-alt{opacity:0;transition:opacity .9s ease .9s;} .in .dial-alt{opacity:1;} /* overlays: infinite marquee */ .ov-marquee{overflow:hidden;margin-top:6px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);} .ov-track{display:flex;width:max-content;animation:ovScroll 40s linear infinite;} .ov-marquee:hover .ov-track,.ov-marquee:focus-within .ov-track{animation-play-state:paused;} .ov-set{display:flex;gap:12px;padding-right:12px;flex:none;} .ov-set .ov{width:228px;flex:none;margin-bottom:0;} @keyframes ovScroll{to{transform:translateX(-50%);}} /* sub-paths: only the chosen cohort shows, as shade-ramped flip tiles */ :root[data-path="him"] .paths .col-her{display:none;} :root[data-path="her"] .paths .col-him{display:none;} .paths .col{width:100%;} .ptiles{display:flex;flex-wrap:wrap;gap:10px;} .ptile{position:relative;width:calc(33.33% - 7px);min-height:84px;border-radius:var(--r-tile);cursor:pointer; background:transparent;perspective:1000px;transition:transform .28s ease,box-shadow .28s ease;} .ptile .flip{position:relative;height:100%;min-height:84px;transform-style:preserve-3d; transition:transform .6s cubic-bezier(.3,.9,.32,1);} .ptile.flipped .flip{transform:rotateY(180deg);} .ptile .face-f,.ptile .face-b{backface-visibility:hidden;-webkit-backface-visibility:hidden; border-radius:var(--r-tile);display:flex;align-items:center;justify-content:center;text-align:center; padding:10px;min-height:84px;} .ptile .face-f{position:relative;height:100%;} .ptile .face-b{position:absolute;inset:0;transform:rotateY(180deg);font-size:12px;line-height:1.35;} .ptile .nm{font-weight:700;font-size:17px;letter-spacing:-.02em;} .ptile:hover,.ptile:focus-visible{transform:scale(1.05);box-shadow:0 10px 24px rgba(0,0,0,.3);z-index:2;} .col-her .pt-1 .face-f,.col-her .pt-1 .face-b{background:color-mix(in srgb,var(--her) 30%,var(--card));color:var(--her-ink);} .col-her .pt-2 .face-f,.col-her .pt-2 .face-b{background:color-mix(in srgb,var(--her) 50%,var(--card));color:var(--her-ink);} .col-her .pt-3 .face-f,.col-her .pt-3 .face-b{background:color-mix(in srgb,var(--her) 70%,var(--card));color:var(--her-ink);} .col-her .pt-4 .face-f,.col-her .pt-4 .face-b{background:var(--her);color:var(--her-ink);} .col-her .pt-5 .face-f,.col-her .pt-5 .face-b{background:color-mix(in srgb,var(--her) 72%,var(--her-ink));color:var(--card);} .col-her .pt-6 .face-f,.col-her .pt-6 .face-b{background:color-mix(in srgb,var(--her) 42%,var(--her-ink));color:var(--card);} .col-her .pt-7 .face-f,.col-her .pt-7 .face-b{background:var(--her-ink);color:var(--card);} .col-him .pt-1 .face-f,.col-him .pt-1 .face-b{background:color-mix(in srgb,var(--him) 35%,var(--card));color:var(--him-ink);} .col-him .pt-2 .face-f,.col-him .pt-2 .face-b{background:color-mix(in srgb,var(--him) 62%,var(--card));color:var(--him-ink);} .col-him .pt-3 .face-f,.col-him .pt-3 .face-b{background:var(--him);color:var(--him-ink);} .col-him .pt-4 .face-f,.col-him .pt-4 .face-b{background:color-mix(in srgb,var(--him) 55%,var(--him-ink));color:var(--card);} .col-him .pt-5 .face-f,.col-him .pt-5 .face-b{background:var(--him-ink);color:var(--card);} /* the journey: a light travels day 0 → 180, on a loop */ .tl .n:nth-child(1){--i:0;} .tl .n:nth-child(2){--i:1;} .tl .n:nth-child(3){--i:2;} .tl .n:nth-child(4){--i:3;} .tl .n:nth-child(5){--i:4;} .tl .n:nth-child(6){--i:5;} .tl .dot{animation:journeyDot 9.6s linear infinite;animation-delay:calc(var(--i) * 1.6s);} @keyframes journeyDot{ 0%,15%{background:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 65%,transparent);transform:scale(1.3);} 24%,100%{background:color-mix(in srgb,var(--accent) 40%,var(--surface));box-shadow:none;transform:scale(1);} } @media (max-width:680px){ .ptile{width:calc(50% - 5px);} } /* ---- Reduced motion: movement softens to fades — nothing jumps, nothing vanishes ---- */ @keyframes riseFade{from{opacity:0;}} @media (prefers-reduced-motion:reduce){ /* reveals and the hero entrance become pure fades */ .rv{transform:none;} .cover.hero > *{animation-name:riseFade;} /* hover states stop moving but keep the shadow/colour response */ .btn:hover,.lc:hover,.ov:hover,.phase:hover,.rc:hover, .tiles .tile:hover,.tiles .tile:focus-visible,.tiles .tile:active, .ptile:hover,.ptile:focus-visible{transform:none;} .lc:hover .ic{transform:none;} .icon-btn:hover{transform:none;} /* the card flip becomes a smooth crossfade between faces */ .tile .flip,.tile.flipped .flip,.ptile .flip,.ptile.flipped .flip{transform:none;transition:none;} .tile .face-f,.tile .face-b,.ptile .face-f,.ptile .face-b{backface-visibility:visible;-webkit-backface-visibility:visible;transition:opacity .45s ease;} .tile .face-b,.ptile .face-b{transform:none;opacity:0;} .tile.flipped .face-b,.ptile.flipped .face-b{opacity:1;} .tile.flipped .face-f,.ptile.flipped .face-f{opacity:0;} /* auto-playing motion parks itself */ .ov-marquee{-webkit-mask-image:none;mask-image:none;} .ov-track{animation:none;width:auto;flex-wrap:wrap;} .ov-set{flex-wrap:wrap;padding-right:0;} .ov-set[aria-hidden="true"]{display:none;} .ov-set .ov{width:calc(50% - 6px);flex:auto;} .tl .dot{animation:none;} } /* ---- Sections ---- */ .section{margin:30px 0;} /* board headings rendered as real

/

for the document outline / h2.board-h,h3.board-h{color:var(--offwhite);margin:0;font-size:22px;} .site-footer .statement{margin:22px 0 4px;font-size:16px;} .sec-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-soft);margin:0 0 10px;} / ---- Sub-path emphasis (driven by , set by the toggle) ---- / .paths .col{transition:opacity .25s ease;} / ---- Forms ---- / .field{display:flex;flex-direction:column;gap:6px;} .field label{font-size:12px;font-weight:600;color:var(--fg-soft);} .input{font-family:var(--font-sans);font-size:15px;padding:12px 14px;width:100%; border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);color:var(--fg);} .board .field label{color:var(--secondary-dark);} .board .input{background:var(--surface);border-color:var(--surface);color:var(--offwhite);} .board .input::placeholder{color:var(--on-dark-mute);} .form-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:14px;} .form-row .field{flex:1;min-width:220px;} :focus-visible{outline:2px solid var(--fg);outline-offset:2px;} .board :focus-visible,.cover :focus-visible{outline-color:var(--offwhite);} / ---- FAQ (calm accordion) ---- / .faq details{border-bottom:1px solid var(--line);} .faq summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--fg);padding:14px 0; list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:'+';font-size:19px;line-height:1;color:var(--fg-soft);flex:none;transition:transform .2s ease;} .faq details[open] summary::after{transform:rotate(45deg);} .faq .faq-a{color:var(--fg-soft);font-size:14px;line-height:1.55;padding:0 0 16px;max-width:62ch;} / ---- Skip link ---- / .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--fg);color:var(--bg); padding:10px 16px;border-radius:0 0 var(--r-sm) 0;text-decoration:none;font-weight:600;font-size:13px;} .skip:focus{left:0;} / ---- Footer ---- / .site-footer{border-top:1px solid var(--line);margin-top:44px;} .site-footer .links{display:flex;gap:8px 20px;flex-wrap:wrap;margin:20px 0 6px;font-size:12.5px;} .site-footer a,.site-footer button.linklike{color:var(--fg-soft);text-decoration:none;background:none;border:0; font-family:var(--font-sans);font-size:12.5px;padding:0;cursor:pointer;} .site-footer a:hover,.site-footer button.linklike:hover{color:var(--fg);text-decoration:underline;} .site-footer .fine{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap; color:var(--fg-soft);font-size:11px;margin:16px 0 4px;} / ---- Mobile sticky CTA ---- / .sticky-cta{display:none;} / ---- Legal / prose pages ---- / .page-title{font-weight:700;font-size:clamp(26px,5vw,34px);letter-spacing:-.02em;color:var(--fg);margin:6px 0 8px;} .prose ul{padding-left:18px;margin:0 0 10px;} .prose li{margin:4px 0;} .prose h2{margin-top:26px;} / ---- Responsive ---- / @media (max-width:680px){ .tile,.ov,.row2 .col{width:100%;} .phase,.rc{width:100%;margin-bottom:10px;} .tl{flex-wrap:wrap;row-gap:16px;} .tl .n{flex:1 1 33%;} .bw{width:calc(33.3% - 11px);} .cover.hero{padding:34px 22px 30px;} .cover .subtitle{max-width:100%;} .form-row .field{min-width:100%;} .form-row .btn{width:100%;} .site-header-inner{padding:10px 14px;row-gap:8px;} .seg{order:3;flex-basis:100%;justify-content:center;border:0;border-top:1px solid var(--line);border-radius:0;padding:8px 0 2px;} .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--bg);background:color-mix(in srgb,var(--bg) 92%,transparent); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);} .lc{width:100%;} .sticky-cta .btn{width:100%;} body.has-sticky-cta{padding-bottom:76px;} } }/ end @media screen */