/* =================================================================== MindSpring — shared base stylesheet Chrome used by every page: design tokens, reset, typography, buttons, nav (with mobile drawer), footer, and motion helpers. Page-specific styling lives inline in each page. =================================================================== */ :root{ --ink:#16241e; --ink-soft:#3c4c44; --paper:#ecEAE0; --paper-2:#e4e1d4; --card:#fbfaf4; --evergreen:#173629; --evergreen-2:#0f261c; --spring:#3e9c6c; --spring-deep:#2f7c54; --honey:#dda04c; --sage:#c7d1c1; --line:rgba(22,36,30,.12); --line-strong:rgba(22,36,30,.22); --line-dark:rgba(255,255,255,.14); --shadow-sm:0 1px 2px rgba(15,38,28,.06); --shadow-md:0 18px 40px -22px rgba(15,38,28,.45); --shadow-lg:0 40px 80px -40px rgba(15,38,28,.55); --r-lg:22px; --r-md:14px; --r-sm:9px; --maxw:1180px; } /* ---------- Dark theme ---------- Applied by setting data-theme="dark" on (a tiny inline head script on every page reads the saved preference before first paint, so there's no flash). Only the design tokens flip; the whole site is built on these vars, so components follow automatically. A few chrome pieces that hard-code a light value (nav glass, primary button) get explicit dark overrides below. */ html[data-theme="dark"]{ --ink:#e7ede9; --ink-soft:#9fb1a7; --paper:#0e1712; --paper-2:#132019; --card:#17241d; --evergreen:#173629; --evergreen-2:#0c1d15; --spring:#4fb27e; --spring-deep:#6fc79a; --honey:#e0a95a; --sage:#26362d; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20); --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 18px 40px -22px rgba(0,0,0,.7); --shadow-lg:0 40px 80px -40px rgba(0,0,0,.85); } /* Primary button: in dark, fill with the bright spring green and use the deep evergreen for the label so it stays vivid and high-contrast on a dark page. */ html[data-theme="dark"] .btn-primary{background:var(--spring);color:var(--evergreen-2);} html[data-theme="dark"] .btn-primary:hover{background:var(--spring-deep);} /* Nav glass tint tracks the dark paper instead of the cream one. */ html[data-theme="dark"] .nav{background:rgba(14,23,18,.82);} html[data-theme="dark"] .nav.scrolled{background:rgba(14,23,18,.94);} *{box-sizing:border-box;} /* The `hidden` attribute must always win. Component rules like `.btn{display:...}` are author styles that override the UA `[hidden]{display:none}`, which would otherwise leak hidden elements (e.g. the admin-only button) into view. */ [hidden]{display:none !important;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Inter",system-ui,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4{ font-family:"Bricolage Grotesque","Inter",sans-serif; font-weight:700; line-height:1.04; letter-spacing:-.02em; margin:0; } p{margin:0;} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} ::selection{background:var(--honey);color:var(--evergreen-2);} :focus-visible{outline:2px solid var(--spring);outline-offset:2px;border-radius:4px;} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;} .mono{font-family:"IBM Plex Mono",monospace;} .eyebrow{ font-family:"IBM Plex Mono",monospace; font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase; color:var(--spring-deep);display:inline-flex;align-items:center;gap:9px; } .eyebrow::before{content:"";width:22px;height:1px;background:var(--spring-deep);opacity:.6;} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:"Inter",sans-serif;font-weight:600;font-size:15px; padding:13px 22px;border-radius:100px;border:1px solid transparent; cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease; white-space:nowrap; } .btn svg{width:17px;height:17px;transition:transform .18s ease;} .btn:hover svg{transform:translateX(2px);} .btn-primary{background:var(--evergreen);color:#f4f2e8;box-shadow:var(--shadow-sm);} .btn-primary:hover{background:var(--evergreen-2);transform:translateY(-1px);} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);} .btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px);} .btn-light{background:#f4f2e8;color:var(--evergreen);} .btn-light:hover{background:#fff;transform:translateY(-1px);} .btn-block{width:100%;} /* ---------- Nav ---------- */ .nav{position:sticky;top:0;z-index:60;background:rgba(236,234,224,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease,background .25s ease;} .nav.scrolled{box-shadow:0 10px 30px -24px rgba(15,38,28,.5);background:rgba(236,234,224,.92);} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px;} .brand{display:flex;align-items:center;gap:11px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--ink);} .brand .mark{width:34px;height:34px;border-radius:10px;background:var(--evergreen);display:grid;place-items:center;box-shadow:var(--shadow-sm);} .brand .mark svg{width:20px;height:20px;} .nav-links{display:flex;align-items:center;gap:34px;} .nav-links a{font-size:15px;color:var(--ink-soft);font-weight:500;transition:color .15s ease;position:relative;} .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--spring);border-radius:2px;transform:scaleX(0);transform-origin:left center;transition:transform .24s cubic-bezier(.22,.61,.36,1);} .nav-links a:hover{color:var(--ink);} .nav-links a:hover::after{transform:scaleX(1);} .nav-links a.active{color:var(--ink);} .nav-links a.active::after{transform:scaleX(1);} .nav-cta{display:flex;align-items:center;gap:14px;} .nav-toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:9px;width:42px;height:42px;place-items:center;cursor:pointer;color:var(--ink);} .nav-toggle svg{width:20px;height:20px;} /* signed-in account menu (desktop) — a name chip that drops a small popover */ .nav-menu{position:relative;} .nav-menu-btn{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line-strong);border-radius:100px;padding:6px 12px 6px 6px;cursor:pointer;color:var(--ink);font-family:inherit;font-size:14px;font-weight:600;transition:border-color .15s ease,box-shadow .15s ease;} .nav-menu-btn:hover{border-color:var(--ink);} .nav-menu-btn .nav-ava{width:28px;height:28px;border-radius:50%;background:var(--evergreen);color:#f4f2e8;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none;} html[data-theme="dark"] .nav-menu-btn .nav-ava{background:var(--spring);color:var(--evergreen-2);} .nav-menu-btn .nav-chev{width:15px;height:15px;transition:transform .2s ease;opacity:.6;} .nav-menu[data-open="1"] .nav-menu-btn .nav-chev{transform:rotate(180deg);} .nav-menu-pop{position:absolute;top:calc(100% + 10px);right:0;min-width:210px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:7px;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:80;} .nav-menu[data-open="1"] .nav-menu-pop{opacity:1;transform:none;pointer-events:auto;} .nav-menu-head{padding:9px 11px 10px;border-bottom:1px solid var(--line);margin-bottom:6px;} .nav-menu-head .nm-name{font-weight:700;font-size:14px;color:var(--ink);} .nav-menu-head .nm-mail{font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;} .nav-menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:9px;padding:10px 11px;font-family:inherit;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;transition:background .13s ease;} .nav-menu-item:hover{background:var(--paper);} .nav-menu-item svg{width:16px;height:16px;opacity:.7;flex:none;} .nav-menu-item.is-out{color:#c0492f;} html[data-theme="dark"] .nav-menu-item.is-out{color:#ec7a5f;} .nav-menu-sep{height:1px;background:var(--line);margin:6px 4px;} /* notifications bell (injected by notifications.js, sibling of .nav-cta) */ .nav-notif{position:relative;display:flex;align-items:center;} .nn-btn{position:relative;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-strong);background:var(--card);border-radius:50%;cursor:pointer;color:var(--ink);transition:border-color .15s ease,background .15s ease;} .nn-btn:hover{border-color:var(--ink);} .nn-btn svg{width:19px;height:19px;} .nn-btn.has-unread{border-color:var(--spring);} .nn-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:100px;background:var(--honey);color:var(--evergreen);font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700;line-height:1;display:grid;place-items:center;border:2px solid var(--paper);} html[data-theme="dark"] .nn-badge{border-color:var(--paper);} .nn-pop{position:absolute;top:calc(100% + 10px);right:0;width:340px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);z-index:80;overflow:hidden;animation:nnPop .16s ease;} @keyframes nnPop{from{opacity:0;transform:translateY(-6px) scale(.98);}to{opacity:1;transform:none;}} .nn-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--line);font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:15px;color:var(--ink);} .nn-list{max-height:min(420px,60vh);overflow-y:auto;} .nn-empty{padding:28px 18px;text-align:center;color:var(--ink-soft);font-size:13.5px;line-height:1.5;} .nn-item{display:flex;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line);} .nn-item:last-child{border-bottom:0;} .nn-item.is-unread{background:rgba(62,156,108,.07);} .nn-dot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:5px;background:var(--sage);} .nn-item.is-unread .nn-dot{background:var(--spring);} .nn-item.t-referral .nn-dot,.nn-item.t-credits .nn-dot,.nn-item.t-promo .nn-dot{background:var(--honey);} .nn-main{min-width:0;flex:1;} .nn-title{font-weight:600;font-size:14px;color:var(--ink);line-height:1.3;} .nn-body{margin-top:3px;font-size:13px;color:var(--ink-soft);line-height:1.45;} .nn-when{margin-top:5px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.03em;color:var(--ink-soft);opacity:.85;} /* mobile drawer */ .nav-drawer{ display:none;position:fixed;inset:0 0 0 auto;z-index:70;width:min(340px,86vw); background:var(--card);border-left:1px solid var(--line);box-shadow:var(--shadow-lg); padding:22px;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1); flex-direction:column;gap:6px; } .nav-scrim{display:none;position:fixed;inset:0;z-index:65;background:rgba(15,38,28,.34);opacity:0;transition:opacity .28s ease;} .nav-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;} .nav-drawer a.d-link{display:block;padding:13px 12px;border-radius:10px;font-size:16px;font-weight:500;color:var(--ink);transition:background .15s ease;} .nav-drawer a.d-link:hover{background:var(--paper);} .nav-drawer .d-divider{height:1px;background:var(--line);margin:12px 0;} .nav-drawer .btn{margin-top:6px;} body.menu-open{overflow:hidden;} body.menu-open .nav-drawer{display:flex;transform:translateX(0);} body.menu-open .nav-scrim{display:block;opacity:1;} /* ---------- Footer ---------- */ .site-footer{padding:64px 0 40px;border-top:1px solid var(--line);} .foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;} .foot-brand{max-width:300px;} .foot-brand p{margin-top:14px;font-size:14px;color:var(--ink-soft);line-height:1.6;} .foot-cols{display:flex;gap:64px;flex-wrap:wrap;} .foot-col h5{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px;font-weight:600;} .foot-col a{display:block;font-size:15px;color:var(--ink-soft);margin-bottom:10px;transition:color .15s ease;} .foot-col a:hover{color:var(--ink);} .foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-soft);} .foot-bottom .mono{font-size:12px;} /* ---------- Motion helpers ---------- */ .reveal{opacity:0;transform:translateY(18px);} .reveal.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);} .reveal.d1{transition-delay:.07s;} .reveal.d2{transition-delay:.14s;} .reveal.d3{transition-delay:.21s;} /* ---------- Page-load entrance (above-the-fold hero) ---------- Pure-CSS so it fires even before app.js runs — no flash of hidden content if the script is slow. `--seq` sets each element's place in the stagger; the deck gets its own softer scale-in. */ @keyframes ms-rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}} @keyframes ms-deck-in{from{opacity:0;transform:translateY(26px) scale(.985);}to{opacity:1;transform:none;}} .load-rise{opacity:0;animation:ms-rise .66s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--seq,0) * 90ms + 80ms);} .load-deck{opacity:0;animation:ms-deck-in .8s cubic-bezier(.22,.61,.36,1) both;animation-delay:.24s;} /* ---------- Branded loader + tag badges ---------- */ /* A small evergreen spinner ring for boot / "loading your …" states, plus a row that pairs it with a label. Uses brand tokens (no purple glow). */ @keyframes ms-spin{to{transform:rotate(360deg);}} .ms-loader{ display:inline-block;width:18px;height:18px;border-radius:50%; border:2.5px solid var(--line-strong);border-top-color:var(--spring-deep); animation:ms-spin .7s linear infinite;vertical-align:middle; } .ms-loading-row{display:inline-flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:15px;} /* Earned/derived profile tag (OWNER, SUPPORTER). Mono uppercase pill in the same family as .p-badge / .promo-badge — distinct, non-purple accents. */ .tag-badge{ display:inline-flex;align-items:center;gap:5px; font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600; letter-spacing:.12em;text-transform:uppercase; padding:3px 9px;border-radius:100px;line-height:1;vertical-align:middle; border:1px solid transparent; } .tag-badge[data-tag="OWNER"]{background:var(--evergreen);color:var(--honey);border-color:var(--evergreen);} .tag-badge[data-tag="SUPPORTER"]{background:var(--sage);color:var(--evergreen);border-color:var(--line-strong);} html[data-theme="dark"] .tag-badge[data-tag="SUPPORTER"]{color:var(--spring-deep);} /* ---------- Shared responsive (chrome) ---------- */ @media(max-width:940px){ .nav-links,.nav-cta{display:none;} /* keep the bell pinned to the right, just left of the menu button */ .nav-notif{margin-left:auto;margin-right:10px;} .nav-toggle{display:grid;} } @media(max-width:560px){ body{font-size:16px;} .wrap{padding:0 18px;} .nav-inner{height:64px;} .foot-cols{gap:36px;} } @media(prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;scroll-behavior:auto;} /* animations are off — make sure nothing is left invisible */ .reveal,.load-rise,.load-deck{opacity:1!important;transform:none!important;} /* the spinner is functional feedback — keep it turning even here */ .ms-loader{animation:ms-spin .7s linear infinite!important;} }