/* ============================================================================ THE TRIBE — THE HEARTH IDENTITY · "Daylight Hearth" design-token + component layer ---------------------------------------------------------------------------- The Hearth = the warm, sunlit room you walk into where you're expected and welcome. Warmth comes from LIGHT + MATERIAL (bright warm-paper canvas, crisp TRUE-WHITE cards, soft real shadows, ONE luminous ember accent, ONE deep teal "trust" reserved for money/verified) — never from darkness. LIGHT ("Daylight") is the explicit default. DARK ("Evening") is a deliberately cozy chosen room, never a cave — reached only via the header sun/moon toggle (see /theme.js, which sets data-theme on BEFORE first paint, no flash). Anti-cult law is enforced by these tokens + TRIBE_DESIGN_LAW.md: accent ~10% of any screen; money speaks in calm teal; the exit is as loud as the entrance; focus ring is ALWAYS visible (the founder is low-vision). Canonical tokens: --bg --bg-2 --surface --surface-2 --text --muted --faint --accent --accent-hover --accent-ink --accent-wash --secondary --trust --line --line-strong --focus-ring + shadow/radius/space scales. Legacy aliases (--ink --ember --growth …) mapped at the bottom so older pages keep working unchanged. ========================================================================== */ /* --------------------------------------------------------------------------- SELF-HOSTED FONTS (OFL, subset WOFF2, font-display:swap — no runtime CDN) Fraunces = display ONLY (hero + section titles). Fallback Georgia, serif. Atkinson Hyperlegible Next = body/UI (built by the Braille Institute for low vision → serves the dyslexia/low-vision mandate). Fallback Inter/system-ui. Both are variable fonts; one file per subset covers the full weight range. --------------------------------------------------------------------------- */ @font-face{ font-family:"Fraunces";font-style:normal;font-weight:400 600;font-display:swap; src:url("/fonts/fraunces-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Fraunces";font-style:normal;font-weight:400 600;font-display:swap; src:url("/fonts/fraunces-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400 700;font-display:swap; src:url("/fonts/atkinson-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400 700;font-display:swap; src:url("/fonts/atkinson-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* =========================================================================== 1) COLOR — LIGHT ("Daylight") is the DEFAULT (even on a dark-mode OS). Dark is opt-in only via [data-theme="dark"]. No prefers-color-scheme auto-dark here: if JS is disabled, the page still opens bright (the owner's core ask). =========================================================================== */ :root,:root[data-theme="light"]{ /* --- surfaces: true-white cards on warm near-white paper so things separate */ --bg:#FBFAF7; /* the warm room you walked into — page base */ --bg-2:#F3EEE4; /* a quieter alcove — banded/inset sections */ --surface:#FFFFFF; /* a card set on the table — TRUE white, raised */ --surface-2:#FCFAF7; /* a second, softer card layer */ /* --- text */ --text:#1C1714; /* the person speaking to you — primary reading colour */ --muted:#574E43; /* a calm aside — secondary/help text (AA on --bg, ~7:1) */ --faint:#776C5C; /* a whisper — captions, meta (nudged darker from spec #8A7F70 to clear AA 4.5:1 on paper) */ /* --- the ember (the ONE hero accent) */ --accent:#D2571F; /* the fire in the hearth — CTA fills, logo mark */ --accent-hover:#B8481A;/* the ember catching — hover/active + gradient dark stop */ --accent-ink:#A8490A; /* accent as TEXT on light (links/eyebrows) — nudged from spec #B5520A to clear AA on banded --bg-2 too */ --accent-wash:rgba(210,87,31,.08); /* warmth on the wall — faint accent fill */ --secondary:#D9A441; /* warm gold — sparingly, secondary highlights */ --secondary-wash:rgba(217,164,65,.12); /* --- the trust colour (money / verified / vetting ONLY) */ --trust:#167A5F; /* a steady handshake — deep teal-green */ --trust-wash:rgba(22,122,95,.10); --success:#2E9E6B; --warning:#C77A0A; /* --- structure */ --line:rgba(28,23,20,.10); /* where one thing ends and the next begins */ --line-strong:rgba(28,23,20,.16); /* a firmer edge — inputs, active borders */ --line-2:rgba(28,23,20,.07); /* the faintest seam */ /* --- focus (ALWAYS visible; never remove) */ --focus-ring:#A63F04; /* --- ambient */ --hero-glow:radial-gradient(70% 60% at 30% 20%,var(--accent-wash),transparent 60%); --glow:rgba(210,87,31,.14); /* --- warm shadow scale (brown, not gray) */ --shadow-sm:0 1px 2px rgba(28,20,14,.06),0 1px 3px rgba(28,20,14,.09); --shadow-md:0 4px 12px -2px rgba(28,20,14,.10),0 2px 6px -2px rgba(28,20,14,.08); --shadow-lg:0 16px 40px -12px rgba(28,20,14,.18),0 6px 16px -6px rgba(28,20,14,.10); --shadow:var(--shadow-md); /* legacy alias */ --raise-highlight:none; /* inner top highlight only used on dark */ /* --- radius scale */ --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px; /* --- spacing (4px base) */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px; /* --- type */ --display:"Fraunces",Georgia,"Times New Roman",serif; /* hero + section titles ONLY */ --body:"Atkinson Hyperlegible Next",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; /* everything else */ --maxw:1120px; --readw:38rem; } /* DARK — "Evening": lifted off the void, warm charcoal, stepped surfaces. */ :root[data-theme="dark"]{ --bg:#1E1915; --bg-2:#262019; --surface:#2A231D; --surface-2:#332A22; --text:#F5EEE3; --muted:#C4B7A3; --faint:#93856F; --accent:#F2894E; --accent-hover:#F5A742; --accent-ink:#F5A742; --accent-wash:rgba(242,137,78,.14); --secondary:#E8A13C; --secondary-wash:rgba(232,161,60,.16); --trust:#57C0A0; --trust-wash:rgba(87,192,160,.16); --success:#4FB596; --warning:#E8A13C; --line:rgba(245,238,227,.12); --line-strong:rgba(245,238,227,.20); --line-2:rgba(245,238,227,.07); --focus-ring:#F7B27A; /* ONE soft warm glow behind hero only — no full-page vignette */ --hero-glow:radial-gradient(ellipse at 50% 0%,rgba(242,137,78,.10),transparent 60%); --glow:rgba(242,137,78,.20); /* depth via stepped surfaces + inner top highlight, not black shadows */ --shadow-sm:0 1px 2px rgba(0,0,0,.30); --shadow-md:0 6px 18px -6px rgba(0,0,0,.45); --shadow-lg:0 24px 60px -18px rgba(0,0,0,.55); --shadow:var(--shadow-md); --raise-highlight:inset 0 1px 0 rgba(255,255,255,.04); } /* --------------------------------------------------------------------------- LEGACY ALIASES — pages built before "Daylight Hearth" used --ink/--ember/ --growth inline. Map them so any page that drops its own :root inherits the correct new Hearth colours. Map: ink→text, ember→accent, growth→trust. --------------------------------------------------------------------------- */ :root{ --ink:var(--text); --ink-soft:var(--muted); --ink-faint:var(--faint); --ember:var(--accent); --ember-2:var(--accent-hover); --growth:var(--trust); } /* =========================================================================== 2) BASE =========================================================================== */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--body);font-size:1.0625rem;line-height:1.65; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; font-synthesis-weight:none; } a{color:var(--accent-ink)} :root[data-theme="dark"] a{color:var(--accent-ink)} /* @mention links inside posts/threads — clearly a person, not underlined-by-default */ a.mention{color:var(--accent-ink);font-weight:600;text-decoration:none} a.mention:hover,a.mention:focus-visible{text-decoration:underline} a.hashtag{color:var(--accent-ink);font-weight:600;text-decoration:none} a.hashtag:hover,a.hashtag:focus-visible{text-decoration:underline} h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08; letter-spacing:-.01em;text-wrap:balance;margin:0;font-optical-sizing:auto} p{margin:0} img,svg{max-width:100%} :where(input,button,select,textarea){font:inherit} .tabnum{font-variant-numeric:tabular-nums} /* Triber number — the belonging primitive: every Triber's immutable member number shown as a small pill next to their name wherever they appear. Only ever rendered for a real, positive member_number (never #0/#null/invented). Uses accent-wash fill + accent-ink text (AA in both light & dark) + a --line edge so it never relies on colour alone; tabular-nums keeps digits tidy. */ .tribernum{display:inline-block;vertical-align:baseline;margin-left:.35rem; padding:.05em .45em;border-radius:var(--r-pill,999px); background:var(--accent-wash);color:var(--accent-ink); border:1px solid var(--line);font-size:.72em;font-weight:700;line-height:1.4; font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap} /* --------------------------------------------------------------------------- ALWAYS-VISIBLE FOCUS RING (accessibility, non-negotiable). --------------------------------------------------------------------------- */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px; } /* =========================================================================== 3) COMPONENT LAYER (classes referenced by every page) =========================================================================== */ /* ---- Buttons -------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--body);font-size:1rem;font-weight:600;line-height:1.1; min-height:48px;padding:.75rem 1.4rem;border-radius:var(--r-md); border:1.5px solid transparent;cursor:pointer;text-decoration:none; transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease,color .15s ease; } .btn-primary{ background:linear-gradient(180deg,var(--accent-hover),var(--accent)); color:#fff;box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.18); } :root[data-theme="dark"] .btn-primary{color:#241203} .btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.18)} .btn-secondary{background:var(--surface);color:var(--text);border-color:var(--line-strong);box-shadow:var(--shadow-sm)} .btn-secondary:hover{transform:translateY(-1px);border-color:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-md)} .btn-ghost{background:transparent;color:var(--text);border-color:transparent} .btn-ghost:hover{color:var(--accent-ink);background:var(--accent-wash)} .btn:active{transform:translateY(0)} .btn-lg{font-size:1.0625rem;min-height:54px;padding:.9rem 1.7rem} .btn-block{width:100%} /* ---- Cards ---------------------------------------------------------------- */ .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--shadow-md,var(--shadow)); } :root[data-theme="dark"] .card{box-shadow:var(--shadow-md),var(--raise-highlight)} .card-interactive{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease} .card-interactive:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)} /* ---- Eyebrow / badge ------------------------------------------------------ */ .eyebrow{display:inline-block;font-family:var(--body);font-size:.8125rem;font-weight:700; letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)} :root[data-theme="dark"] .eyebrow{color:var(--accent)} .badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600; padding:.28rem .7rem;border-radius:var(--r-pill);background:var(--trust-wash); color:var(--trust);border:1px solid color-mix(in srgb,var(--trust) 30%,transparent)} /* ---- Fields: style EVERY native control (kills the #1 "unfinished" tell) --- */ .field{display:block;margin-bottom:1rem} .field>label,.field-label{display:block;font-size:.9rem;font-weight:600;color:var(--text); margin-bottom:.4rem;letter-spacing:.01em} .field .hint{display:block;font-size:.82rem;color:var(--faint);margin-top:.35rem} .field input,.field select,.field textarea, input[type=text],input[type=email],input[type=tel],input[type=number], input[type=password],input[type=search],input[type=url],input[type=date],select,textarea{ width:100%;min-height:48px;padding:.7rem .9rem; background:var(--surface);color:var(--text); border:1.5px solid var(--line-strong);border-radius:var(--r-md); font:inherit;line-height:1.4;transition:border-color .15s ease,box-shadow .15s ease; -webkit-appearance:none;appearance:none; } textarea{min-height:110px;resize:vertical;padding-top:.7rem} .field input::placeholder,textarea::placeholder{color:var(--faint)} .field input:focus,.field select:focus,.field textarea:focus, input:focus,select:focus,textarea:focus{ border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);outline:none; } /* custom