/* ============================================================================ * site.css -- The Experiencer Team marketing site (apex) * * WP-1.6.5 R1.3b deliverable. Visual tokens follow the v2 mockup's "Network * direction" (Q8 / II.3): navy primary, teal secondary, four accents (coral, * green, purple, gold), Merriweather serif for body+display, Lato sans for * chrome. Fonts are NOT @font-face'd in the apex's beta build -- system * fonts (Georgia / system-ui) are the fallback per the v2 mockup's * PREVIEW-ONLY CAVEAT #1. When full WP-1.7 lights up self-hosted woff2 at * /static/shared/fonts/, the @font-face declarations can be added without * any CSS-rule change here. * * Structural patterns (nav-collapse / hamburger / nav-utils / search-overlay * / auth-modal / reading-progress / back-to-top) are derived from the * uploaded index.html + nav.html + footer.html reference files. * * Theme convention: [data-theme="light"|"dark"] on . Default light. * ============================================================================ */ /* ============================================================================ * RESET + BASE * ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Offset in-page anchor landings (and scrollIntoView) below the fixed nav so linked-to sections aren't tucked under the bar. */ html { scroll-padding-top: calc(var(--nav-height) + 16px); } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } :root { /* --- Primary: navy (v2 mockup Q8 correction) --- */ --navy: #1d2d40; --navy-deep: #14202f; --navy-soft: #d4dae2; --navy-pale: #eef1f5; --text-on-navy: #ffffff; --text-on-navy-soft: rgba(255, 255, 255, 0.85); /* --- Secondary: teal --- */ --teal: #2a8a8a; --teal-deep: #1f6e6e; --teal-soft: #d8ebec; --teal-pale: #f0f7f7; /* --- Four accents (Aspen stat-bubble palette) --- */ --coral: #d96a4a; --coral-soft: #fbe2d8; --green: #6ba068; --green-deep: #4f8a4d; --green-soft: #e0eedd; --purple: #8a7cb6; --purple-soft: #ebe7f3; --gold: #d99838; --gold-soft: #f6e6cd; /* --- Surfaces and ink --- */ --bg: #faf8f3; --bg-card: #ffffff; --bg-strip: #fdfbf5; --text: #1d2b35; --text-soft: #4a5664; --text-faint: #8c97a3; --rule: #e6e8ea; --rule-soft: #f1f3f4; --card-border: #d0d6dc; --shadow-sm: 0 1px 3px rgba(20, 30, 40, 0.10); --shadow-md: 0 2px 10px rgba(20, 30, 40, 0.06); --shadow-lg: 0 12px 32px rgba(20, 30, 40, 0.08); /* --- Typography --- */ --font-display: 'Merriweather', Georgia, 'Times New Roman', serif; --font-body: 'Merriweather', Georgia, 'Times New Roman', serif; --font-chrome: 'Lato', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 44px; --text-4xl: 64px; --line-tight: 1.25; --line-normal: 1.55; --line-loose: 1.75; --weight-light: 300; --weight-normal: 400; --weight-bold: 700; --weight-black: 900; --fs-scale: 1; /* --- Z-index --- */ --z-progress: 1500; --z-nav: 1000; --z-modal: 2000; /* --- Layout --- */ --max-width: 1200px; --nav-height: 64px; } [data-theme="dark"] { --navy: #5a7da0; --navy-deep: #3e5a78; --navy-soft: #2a3a4d; --navy-pale: #1d2a3a; --text-on-navy: #ffffff; --text-on-navy-soft: rgba(255, 255, 255, 0.78); --teal: #5cb8b8; --teal-deep: #4ba0a0; --teal-soft: #1a3a3a; --teal-pale: #112424; --coral: #e89878; --coral-soft: #3a2a22; --green: #8fb98c; --green-deep: #6fa46c; --green-soft: #1f2e1c; --purple: #a899d4; --purple-soft: #2a253a; --gold: #e8b15a; --gold-soft: #2e2418; --bg: #0e1318; --bg-card: #161d24; --bg-strip: #131a20; --text: #e8edf0; --text-soft: #b8c2cc; --text-faint: #7a8590; --rule: #232b33; --rule-soft: #1c232b; --card-border: #232b33; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); } html { font-size: calc(16px * var(--fs-scale)); } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--line-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 200ms ease, color 200ms ease; overflow-x: hidden; } a { color: var(--teal-deep); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--coral); } img { max-width: 100%; display: block; } em { font-style: italic; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } input, textarea, select, button { font-family: var(--font-chrome); } /* ============================================================================ * SKIP LINK + READING PROGRESS * ============================================================================ */ .skip-link { position: fixed; top: -100%; left: 50%; transform: translateX(-50%); background: var(--navy); color: var(--text-on-navy); padding: .6em 1.5em; border-radius: 0 0 8px 8px; z-index: var(--z-modal); font-family: var(--font-chrome); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; transition: top .2s ease; } .skip-link:focus { top: 0; } .reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: var(--z-progress); background: transparent; pointer-events: none; } .reading-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--teal), var(--coral)); transition: width 50ms linear; } /* ============================================================================ * MAIN NAV -- sticky; transparent over hero, solid navy after scroll * ============================================================================ */ .main-nav { position: fixed; top: 3px; left: 0; right: 0; z-index: var(--z-nav); background: transparent; border-bottom: 1px solid transparent; transition: background .4s ease, box-shadow .4s ease, border-color .4s ease, backdrop-filter .4s ease; } .main-nav.scrolled { background: var(--navy); border-bottom-color: var(--navy-deep); box-shadow: 0 2px 24px rgba(0,0,0,.18); backdrop-filter: blur(8px); } .nav-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; height: var(--nav-height); } /* Brand */ .nav-brand { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; color: var(--text-on-navy); transition: color .3s ease; } .nav-brand:hover { color: var(--text-on-navy); } .brand-icon { color: var(--coral); font-size: 1.25em; transition: color .3s ease; } .brand-logo { height: 32px; width: 32px; flex-shrink: 0; /* Subtle warm halo so the cream figures lift off the navy nav bg. */ filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); transition: transform .3s ease, filter .3s ease; } .nav-brand:hover .brand-logo { transform: rotate(8deg); filter: drop-shadow(0 2px 6px rgba(255,200,120,0.35)); } @media (max-width: 480px) { .brand-logo { height: 28px; width: 28px; } } .main-nav:not(.scrolled) .nav-brand, .main-nav:not(.scrolled) .nav-links > li > a, .main-nav:not(.scrolled) .nav-util-btn, .main-nav:not(.scrolled) .lang-label, .main-nav:not(.scrolled) .hamburger-bar { color: var(--text-on-navy); } .main-nav:not(.scrolled) .hamburger-bar { background: var(--text-on-navy); } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 6px; z-index: calc(var(--z-nav) + 1); } .hamburger-bar { width: 22px; height: 2px; background: var(--text-on-navy); border-radius: 2px; transition: transform .3s ease, opacity .3s ease, background .3s ease; } .nav-hamburger.open .hamburger-bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav-hamburger.open .hamburger-bar:nth-child(2) { opacity: 0; } .nav-hamburger.open .hamburger-bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Collapsible nav area */ .nav-collapse { display: flex; align-items: center; gap: .75rem; flex: 1; justify-content: flex-end; } /* Nav links */ .nav-links { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; } .nav-links > li > a { display: block; padding: .5rem .85rem; font-family: var(--font-chrome); font-size: .875rem; font-weight: 500; letter-spacing: .02em; color: var(--text-on-navy); transition: color .2s ease, background .2s ease; border-radius: 4px; } .nav-links > li > a:hover { color: var(--text-on-navy); background: rgba(255,255,255,.08); } .nav-links > li > a.active { font-weight: 700; box-shadow: inset 0 -3px 0 var(--coral); } /* Section dropdowns: hybrid nav items. The top link navigates to the hub; the submenu reveals on hover (desktop) or when the caret toggles .is-open (keyboard/touch). The forum inlines this same nav, so keep it self-contained. */ .nav-item { position: relative; display: flex; align-items: center; } .nav-caret { background: none; border: 0; cursor: pointer; color: var(--text-on-navy); padding: .5rem .35rem; display: inline-flex; align-items: center; line-height: 1; } .nav-caret::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .75; transition: transform .15s ease; } .nav-item.is-open .nav-caret::after { transform: rotate(180deg); } .nav-submenu { position: absolute; top: 100%; left: 0; margin: 0; padding: 6px; min-width: 212px; list-style: none; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 10px 28px rgba(20,30,40,.18); display: none; z-index: var(--z-nav); } .nav-item:hover .nav-submenu, .nav-item.is-open .nav-submenu { display: block; } .nav-submenu li { width: 100%; } .nav-submenu a { display: block; padding: 8px 12px; border-radius: 7px; white-space: nowrap; font-family: var(--font-chrome); font-size: .85rem; color: var(--navy); text-decoration: none; } .nav-submenu a:hover { background: var(--bg-strip); } .nav-submenu .nav-submenu-highlight { font-weight: 700; color: var(--coral); } /* .auth-required: hidden by default (et_authed=1 parent-domain cookie wiring * lands in a later WP). Beta UX: items remain hidden until logged in. * Per WP-1.6.5 R1.3b decision (operator option b). */ .auth-required { display: none; } /* Nav utilities cluster */ .nav-utils { display: flex; align-items: center; gap: .25rem; margin-left: .5rem; padding-left: .75rem; border-left: 1px solid rgba(255,255,255,.15); } .nav-util-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 4px; color: var(--text-on-navy); transition: background .2s ease, color .2s ease; } .nav-util-btn:hover { background: rgba(255,255,255,.08); } .font-controls { display: inline-flex; align-items: center; border-radius: 4px; overflow: hidden; } .font-controls .font-btn { width: 30px; height: 30px; font-family: var(--font-chrome); font-weight: 600; font-size: 11px; letter-spacing: .04em; } .font-controls .font-btn-active { background: rgba(255,255,255,.12); } #theme-toggle .icon-moon { display: none; } [data-theme="dark"] #theme-toggle .icon-sun { display: none; } [data-theme="dark"] #theme-toggle .icon-moon { display: inline; } .lang-dropdown-wrap { position: relative; } .lang-trigger { display: inline-flex; align-items: center; gap: 4px; width: auto; padding: 0 .5rem; } .lang-label { font-family: var(--font-chrome); font-size: 12px; font-weight: 600; letter-spacing: .04em; } .lang-dropdown { position: absolute; top: 100%; right: 0; margin-top: 6px; background: var(--bg-card); color: var(--text); border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow-md); list-style: none; padding: .5rem 0; margin: 6px 0 0; min-width: 200px; font-family: var(--font-chrome); font-size: 13px; display: none; z-index: var(--z-modal); } .lang-dropdown.open { display: block; } .lang-dropdown li { padding: .45rem 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .lang-dropdown li:hover { background: var(--bg-strip); } .lang-dropdown li.lang-active { font-weight: 700; color: var(--navy); } .lang-dropdown li.lang-soon { color: var(--text-faint); cursor: default; } .lang-dropdown li.lang-soon:hover { background: transparent; } /* ============================================================================ * SEARCH OVERLAY MODAL * ============================================================================ */ .search-overlay { position: fixed; inset: 0; background: rgba(20, 30, 40, .82); z-index: var(--z-modal); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1.5rem 0; backdrop-filter: blur(8px); } .search-overlay[hidden] { display: none; } .search-overlay-inner { width: 100%; max-width: 640px; background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 1.5rem 1.25rem 1.25rem; position: relative; } .search-close { position: absolute; top: .5rem; right: .75rem; font-size: 28px; font-weight: 300; color: var(--text-soft); line-height: 1; } .search-box { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border: 1px solid var(--rule); border-radius: 8px; } .search-box-icon { color: var(--text-faint); flex-shrink: 0; } .search-input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--font-chrome); font-size: 16px; color: var(--text); } .search-kbd { font-family: var(--font-chrome); font-size: 11px; background: var(--bg-strip); color: var(--text-faint); padding: 2px 6px; border-radius: 3px; } .search-hint { margin-top: 1rem; font-family: var(--font-chrome); font-size: 13px; color: var(--text-faint); } /* ============================================================================ * AUTH MODAL -- Login (functional) + Join (beta = invitation-only message) * ============================================================================ */ .auth-modal-overlay { position: fixed; inset: 0; background: rgba(20, 30, 40, .72); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 1.5rem; backdrop-filter: blur(6px); } .auth-modal-overlay[hidden] { display: none; } .auth-modal { width: 100%; max-width: 460px; background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 2rem 1.75rem 1.5rem; position: relative; } .auth-modal-close { position: absolute; top: .5rem; right: .75rem; font-size: 26px; font-weight: 300; color: var(--text-soft); line-height: 1; } .auth-tabs { display: flex; gap: .5rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.25rem; } .auth-tab { padding: .75rem 1.25rem; font-family: var(--font-chrome); font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--text-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; } .auth-tab-active { color: var(--navy); border-bottom-color: var(--coral); } .auth-panel h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); margin: 0 0 .25rem; color: var(--text); } .auth-subtitle { font-family: var(--font-chrome); color: var(--text-soft); font-size: 14px; margin: 0 0 1.25rem; } .auth-field { margin-bottom: 1rem; } .auth-field label { display: block; font-family: var(--font-chrome); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); margin-bottom: .35rem; } .auth-field input { width: 100%; padding: .65rem .8rem; font-size: 15px; border: 1px solid var(--rule); border-radius: 6px; background: var(--bg); color: var(--text); } .auth-field input:focus { outline: 2px solid var(--teal); outline-offset: -1px; border-color: var(--teal); } .auth-submit { display: block; width: 100%; padding: .8rem; font-family: var(--font-chrome); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; background: var(--coral); color: #fff; border-radius: 6px; margin-top: .5rem; transition: background .2s ease; } .auth-submit:hover { background: #c25a3c; } .auth-footnote { font-family: var(--font-chrome); font-size: 12px; color: var(--text-faint); margin-top: 1rem; text-align: center; } .auth-invite-notice { font-family: var(--font-chrome); color: var(--text-soft); font-size: 14px; line-height: 1.6; } .auth-invite-notice strong { display: block; color: var(--text); font-size: 15px; margin-bottom: .5rem; } .auth-invite-notice a { color: var(--coral); font-weight: 700; } /* ============================================================================ * HERO CAROUSEL -- 4-photo II.7 carousel * ============================================================================ */ .hero-carousel { position: relative; height: 80vh; min-height: 480px; overflow: hidden; background: var(--navy-deep); isolation: isolate; } .hero-track { position: relative; width: 100%; height: 100%; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 800ms ease; display: flex; align-items: center; justify-content: center; } .hero-slide.active { opacity: 1; } .hero-slide img.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 30, 40, .45) 0%, rgba(20, 30, 40, .65) 70%, rgba(20, 30, 40, .85) 100%); z-index: 0; } .hero-slide-content { position: relative; z-index: 1; max-width: 880px; padding: 0 1.5rem; text-align: center; color: var(--text-on-navy); } .hero-eyebrow { font-family: var(--font-chrome); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); margin-bottom: 1rem; } .hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.15; margin: 0 0 1rem; color: var(--text-on-navy); } .hero-subtitle { font-family: var(--font-body); font-size: clamp(1rem, 1.8vw, var(--text-md)); line-height: 1.6; color: var(--text-on-navy-soft); margin: 0 0 1.75rem; max-width: 640px; margin-left: auto; margin-right: auto; } .hero-cta { display: inline-block; font-family: var(--font-chrome); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; padding: .85rem 1.6rem; background: var(--coral); color: #fff; border-radius: 4px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .hero-cta:hover { transform: translateY(-2px); background: #c25a3c; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.3); } .hero-controls { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; z-index: 2; } .hero-arrow { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.15); color: var(--text-on-navy); font-size: 20px; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease; } .hero-arrow:hover { background: rgba(255,255,255,.28); } .hero-dots { display: flex; gap: 8px; } .hero-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .2s ease, transform .2s ease; } .hero-dot:hover { background: rgba(255,255,255,.7); } .hero-dot.active { background: var(--coral); transform: scale(1.2); } @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } } /* ============================================================================ * CONTENT SECTIONS * ============================================================================ */ .page-wrap { /* Sits beneath the fixed nav; hero is full-bleed so we don't pad-top here. */ } .section { padding: clamp(3rem, 8vw, 5rem) 1.5rem; max-width: var(--max-width); margin: 0 auto; } .section-narrow { max-width: 820px; } .section-label { font-family: var(--font-chrome); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin: 0 0 .75rem; } .section-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 3.5vw, var(--text-2xl)); line-height: 1.2; color: var(--text); margin: 0 0 1rem; } .section-title em { font-style: italic; color: var(--teal-deep); } .section-sub { font-family: var(--font-body); font-size: var(--text-md); line-height: 1.7; color: var(--text-soft); margin: 0 0 1.5rem; max-width: 720px; } .section-body p { font-family: var(--font-body); font-size: var(--text-md); line-height: 1.8; color: var(--text); margin: 0 0 1.25rem; } .section-body p:last-child { margin-bottom: 0; } .section-body strong { color: var(--navy); } .section-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--rule), transparent); max-width: var(--max-width); margin: 0 auto; } .pull-quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 2.5vw, var(--text-xl)); line-height: 1.4; color: var(--navy); border-left: 3px solid var(--coral); padding: .25rem 0 .25rem 1.25rem; margin: 2rem 0 2rem; max-width: 720px; } .pull-quote-attribution { display: block; margin-top: .75rem; font-family: var(--font-chrome); font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: .03em; color: var(--text-soft); } .cta-section { background: var(--bg-strip); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center; } .cta-section .section-title { text-align: center; } .cta-section .section-sub { margin-left: auto; margin-right: auto; text-align: center; } .cta-button { display: inline-block; font-family: var(--font-chrome); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; padding: .9rem 2rem; background: var(--coral); color: #fff; border-radius: 4px; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .cta-button:hover { transform: translateY(-2px); background: #c25a3c; color: #fff; box-shadow: 0 8px 24px rgba(217,106,74,.35); } /* Coming-soon stub pages */ .coming-soon-page { max-width: 640px; margin: 0 auto; padding: clamp(4rem, 10vh, 7rem) 1.5rem; text-align: center; } .coming-soon-page .section-label { color: var(--coral); } .coming-soon-page .section-title { font-size: clamp(2rem, 4vw, var(--text-3xl)); } .coming-soon-page p { font-family: var(--font-body); font-size: var(--text-md); color: var(--text-soft); line-height: 1.7; } /* ============================================================================ * FOOTER -- 4-column grid: brand / navigation / resources / connect * ============================================================================ */ .site-footer { background: var(--navy-deep); color: var(--text-on-navy); padding: 3rem 1.5rem 1.5rem; margin-top: 0; } .footer-inner { max-width: var(--max-width); margin: 0 auto; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 2.5rem; align-items: start; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.12); } .footer-brand { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--text-on-navy); margin-bottom: .75rem; } .footer-tagline { font-family: var(--font-body); font-style: italic; font-size: 14px; line-height: 1.6; color: var(--text-on-navy-soft); margin: 0 0 1rem; max-width: 320px; } .footer-social { display: flex; gap: .5rem; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgba(255,255,255,.08); border-radius: 50%; color: var(--text-on-navy); transition: background .2s ease; } .social-link:hover { background: rgba(255,255,255,.16); color: var(--text-on-navy); } /* Share button -- sits in the footer social cluster. Matches the on-navy social-link surface, but is a labelled pill (it fires the Web Share API / clipboard copy, so it carries a visible "Share" label, not just an icon). */ .share-button { display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .85rem; background: rgba(255,255,255,.08); border: 0; border-radius: 16px; color: var(--text-on-navy); font-family: var(--font-chrome); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .2s ease; } .share-button:hover { background: rgba(255,255,255,.16); } .share-button svg { flex: none; } /* Confirmation toast for the clipboard fallback. Uses the card surface + text pair, which stays legible in both light and dark themes. */ .share-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px); max-width: calc(100vw - 32px); background: var(--bg-card); color: var(--text); border: 1px solid var(--rule); border-radius: 8px; padding: .65rem 1.1rem; font-family: var(--font-chrome); font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.22); opacity: 0; pointer-events: none; z-index: 1000; transition: opacity .25s ease, transform .25s ease; } .share-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce) { .share-toast { transition: opacity .01s ease; } .share-button { transition: none; } } .footer-heading { font-family: var(--font-chrome); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); margin: 0 0 .85rem; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: .5rem; } .footer-links a { font-family: var(--font-chrome); font-size: 14px; color: var(--text-on-navy-soft); } .footer-links a:hover { color: var(--text-on-navy); } .footer-connect-text { font-family: var(--font-chrome); font-size: 14px; line-height: 1.6; color: var(--text-on-navy-soft); margin: 0 0 .75rem; } .footer-connect-form { display: flex; gap: .5rem; } .footer-connect-form input { flex: 1; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--text-on-navy); border-radius: 4px; font-family: var(--font-chrome); font-size: 13px; } .footer-connect-form input::placeholder { color: rgba(255,255,255,.5); } .footer-connect-form button { padding: .55rem 1rem; background: var(--coral); color: #fff; font-family: var(--font-chrome); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; } /* Subscribe form stacks vertically (email -> "Request an account" -> Subscribe) so the checkbox line fits the narrow footer column on phones, and the label uses the on-navy text colour for contrast on the dark footer. */ .footer-connect-form { flex-direction: column; align-items: stretch; gap: .6rem; } .footer-connect-form button { width: 100%; } .footer-connect-form .req-account-check { color: var(--text-on-navy-soft); font-size: 13px; } .footer-bottom { padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-family: var(--font-chrome); font-size: 12px; color: var(--text-on-navy-soft); } .footer-bottom-links { display: flex; gap: 1.25rem; } .footer-bottom-links a { color: var(--text-on-navy-soft); } .footer-bottom-links a:hover { color: var(--text-on-navy); } /* ============================================================================ * BACK-TO-TOP * ============================================================================ */ .back-to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 44px; height: 44px; background: var(--navy); color: var(--text-on-navy); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease, background .2s ease; z-index: calc(var(--z-nav) - 1); box-shadow: var(--shadow-md); } .back-to-top.visible { opacity: 1; pointer-events: auto; } .back-to-top:hover { background: var(--navy-deep); transform: translateY(-2px); } /* ============================================================================ * RESPONSIVE -- mobile breakpoint at ~860px * ============================================================================ */ @media (max-width: 1024px) { /* Hamburger appears + pushed to the right edge of the nav bar */ .nav-hamburger { display: flex; margin-left: auto; } /* Drawer is fully removed from layout when closed (display:none) so it can never leak icons into the top strip even if max-height clipping misbehaves on some mobile browsers. */ .nav-collapse { display: none; } .nav-collapse.open { display: flex; position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--navy); flex-direction: column; align-items: stretch; padding: 1rem 1.5rem 2rem; max-height: calc(100vh - var(--nav-height)); overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.3); border-top: 1px solid rgba(255,255,255,.12); z-index: var(--z-nav); } .nav-links { flex-direction: column; align-items: flex-start; gap: .25rem; margin-bottom: 1rem; } .nav-links > li { width: 100%; } .nav-links > li > a { display: block; width: 100%; padding: .75rem 0; } /* Section dropdowns become accordions inside the navy drawer (no hover). */ .nav-item { flex-wrap: wrap; align-items: center; } .nav-item > a.nav-link { width: auto; flex: 1 1 auto; } .nav-caret { flex: 0 0 auto; color: var(--text-on-navy); padding: .75rem .5rem; } .nav-submenu { flex-basis: 100%; position: static; min-width: 0; margin: 0; background: transparent; border: 0; box-shadow: none; padding: 0 0 .5rem 1rem; } .nav-item:hover .nav-submenu { display: none; } .nav-item.is-open .nav-submenu { display: block; } .nav-submenu a { color: var(--text-on-navy); padding: .5rem 0; font-size: .9rem; } .nav-submenu a:hover { background: transparent; } .nav-utils { margin-left: 0; padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.15); padding-top: .75rem; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; } .nav-utils .font-controls { flex-shrink: 0; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } } @media (max-width: 520px) { .hero-carousel { height: 70vh; min-height: 420px; } .section { padding-left: 1.25rem; padding-right: 1.25rem; } .footer-bottom { flex-direction: column; align-items: flex-start; } } /* ============================================================================ * Index-body enhancements (May 2026) -- visual interest between the prose * sections without changing the editorial copy. * ========================================================================== */ /* Tinted section variant. Pale teal wash, full-bleed; the existing .section-narrow constrains the inner content width. */ .section-tinted { position: relative; background: color-mix(in srgb, var(--teal-pale, #f0f7f7) 70%, var(--bg)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); max-width: none; padding-left: clamp(1.5rem, 6vw, 4rem); padding-right: clamp(1.5rem, 6vw, 4rem); } .section-tinted > * { /* Match the text column of the non-tinted sections: those are an 820px border-box with 1.5rem inner padding (inner text width 820 - 3rem), so the centered tinted children must be 3rem narrower to share the same left/right edges. Without this, tinted bands sit 1.5rem left of the rest of the page. */ max-width: calc(820px - 3rem); margin-left: auto; margin-right: auto; } /* When two adjacent sections are both tinted, or a divider sits between a plain and a tinted section, hide the divider -- the tint already provides the visual break. */ .section-tinted + .section-divider, .section-divider + .section-tinted { display: none; } /* Members-pills (section 2). Soft chip styling, breaks the wall of prose. */ .members-pills { list-style: none; padding: 0; margin: 2rem auto 0; display: flex; flex-wrap: wrap; gap: 8px; } .members-pills li { font-family: var(--font-chrome); font-size: 13px; font-weight: 600; letter-spacing: .02em; padding: 7px 14px; border-radius: 999px; background: var(--bg-card); color: var(--navy); border: 1px solid var(--teal); box-shadow: var(--shadow-sm); } [data-theme="dark"] .members-pills li { color: var(--teal); } /* Stats grid (section 3). 4 across at desktop, 2 at tablet, 1 at phone. */ .stats-grid { list-style: none; padding: 0; margin: 0 0 2rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .stat-card { background: var(--bg-card); border: 1px solid var(--rule); border-top: 3px solid var(--coral); border-radius: 6px; padding: 16px 18px; box-shadow: var(--shadow-sm); } .stat-card .stat-figure { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.7rem); font-weight: 700; color: var(--navy); margin-bottom: 6px; line-height: 1.15; } .stat-card .stat-label { font-family: var(--font-chrome); font-size: 13px; line-height: 1.45; color: var(--text-soft); } [data-theme="dark"] .stat-card .stat-figure { color: var(--teal); } @media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .stats-grid { grid-template-columns: 1fr; } .stat-card { text-align: center; } } /* Atmospheric strip between sections 3 and 4. Thin image band that pulls the reader's eye out of the prose for a second. */ .atmosphere-strip { position: relative; width: 100%; height: clamp(140px, 18vw, 220px); overflow: hidden; margin: 0; } .atmosphere-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; display: block; } .atmosphere-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, color-mix(in srgb, var(--bg) 60%, transparent), transparent 25%, transparent 75%, color-mix(in srgb, var(--bg) 60%, transparent) ); pointer-events: none; } /* Principles grid (section 4). 3 numbered callouts. */ .principles-grid { list-style: none; padding: 0; margin: 2rem auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .principle { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 6px; padding: 16px 18px; box-shadow: var(--shadow-sm); } .principle .principle-num { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--coral); line-height: 1; min-width: 1.8em; } .principle .principle-body { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--text); } .principle .principle-body strong { display: block; color: var(--navy); margin-bottom: 4px; } [data-theme="dark"] .principle .principle-body strong { color: var(--teal); } @media (max-width: 860px) { .principles-grid { grid-template-columns: 1fr; } } /* ============================================================================ * v2a ADDITIONS (May 2026) -- status tags, "Get help now" control, crisis * banner, feature lists. All built on existing tokens; no new colors. * ============================================================================ */ /* --- Feature status tags: [Live] / [Underway] (.status-building) / [Planned] ----------------- */ .status-tag { display: inline-block; font-family: var(--font-chrome); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; vertical-align: middle; line-height: 1.5; border: 1px solid transparent; } .status-live { background: var(--green-soft); color: var(--green-deep); border-color: var(--green); } .status-building { background: var(--gold-soft); color: var(--gold); border-color: var(--gold); } .status-planned { background: var(--navy-pale); color: var(--text-soft); border-color: var(--navy-soft); } [data-theme="dark"] .status-live { color: var(--green); } [data-theme="dark"] .status-building { color: var(--gold); } .status-legend { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin: 0 0 2rem; font-family: var(--font-chrome); font-size: 13px; color: var(--text-soft); align-items: center; } .status-legend .status-tag { margin-right: .4rem; } /* --- "Get help now" persistent crisis control (nav utility row) ----------- */ .nav-help { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-chrome); font-weight: 700; font-size: .8rem; letter-spacing: .03em; padding: .45rem .9rem; background: var(--coral); color: #fff; border-radius: 999px; white-space: nowrap; transition: background .2s ease, transform .2s ease; } .nav-help:hover { background: #c25a3c; color: #fff; transform: translateY(-1px); } .nav-help::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; } /* On mobile drawer the help button stretches full width for thumb reach. */ @media (max-width: 1024px) { .nav-help { width: 100%; justify-content: center; padding: .75rem; font-size: .9rem; } } /* --- Crisis banner (top of support/crisis pages) -------------------------- */ .crisis-banner { background: var(--coral-soft); border: 1px solid var(--coral); border-left-width: 4px; border-radius: 8px; padding: 1.25rem 1.5rem; margin: 0 0 2rem; } .crisis-banner h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--navy); margin: 0 0 .5rem; } .crisis-banner p { font-family: var(--font-body); color: var(--text); margin: 0 0 .75rem; line-height: 1.6; } .crisis-banner .crisis-number { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--coral); } [data-theme="dark"] .crisis-banner h2 { color: var(--text); } /* --- Feature list (Get Support / Advocacy / Share section items) ---------- */ .feature-list { list-style: none; padding: 0; margin: 1.5rem auto 0; display: grid; gap: 14px; } .feature-item { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 8px; padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); } .feature-item h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--text); margin: 0 0 .4rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .feature-item p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--text-soft); margin: 0; } .feature-item p + p { margin-top: .6rem; } /* Lead paragraph under a section title. */ .section-lead { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.6; color: var(--text-soft); margin: 0 0 1.5rem; max-width: 760px; } /* Policy pages: tighter measure, clear headings. */ .policy-body h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--navy); margin: 2rem 0 .5rem; } [data-theme="dark"] .policy-body h3 { color: var(--teal); } .policy-body p, .policy-body li { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7; color: var(--text); } .policy-body ul { padding-left: 1.25rem; margin: 0 0 1rem; } .policy-body li { margin-bottom: .4rem; } .policy-lead { font-style: italic; color: var(--text-soft); border-left: 3px solid var(--teal); padding-left: 1rem; margin: 0 0 1.5rem; } /* Content pages (no hero): offset main below the fixed nav. */ .content-page { padding-top: calc(var(--nav-height) + 3px); } .page-intro { max-width: 820px; margin: 0 auto; padding: clamp(2rem,5vw,3rem) 1.5rem 0; } .page-intro .section-label { color: var(--coral); } /* Headings and lists inside .section-body (content pages). */ .section-body h3, h3.policy-h { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--navy); margin: 0 0 .5rem; } [data-theme="dark"] .section-body h3, [data-theme="dark"] h3.policy-h { color: var(--teal); } .section-body ul { padding-left: 1.25rem; margin: 0 0 1.25rem; } .section-body li { font-family: var(--font-body); font-size: var(--text-md); line-height: 1.7; color: var(--text); margin-bottom: .4rem; } /* Content pages: a .section right after the .page-intro should not stack a full section's top padding under the intro. Tightens the gap on every page-intro page at once (apex-only; the forum has no .page-intro). */ .page-intro + .section { padding-top: 1rem; } /* "Request an account" opt-in checkbox, shared across the capture forms (newsletter, solidarity, peer-training, share). */ .req-account-check { display: flex; gap: .45rem; align-items: flex-start; font-size: .85rem; line-height: 1.45; text-align: left; margin: .15rem 0; color: var(--text-soft); } .req-account-check input { margin-top: .2rem; flex: none; } /* Research page: "request an investigation" form (reuses .auth-field/.auth-submit). */ .request-form { max-width: 640px; margin-top: 1.5rem; } .request-form .auth-field { margin-bottom: 1rem; } .auth-field textarea, .auth-field select { width: 100%; padding: .65rem .8rem; font-size: 15px; border: 1px solid var(--rule); border-radius: 6px; background: var(--bg); color: var(--text); font-family: var(--font-chrome); } .auth-field textarea { min-height: 120px; resize: vertical; line-height: 1.5; } .auth-field textarea:focus, .auth-field select:focus { outline: 2px solid var(--teal); outline-offset: -1px; border-color: var(--teal); } .request-form .auth-submit { width: auto; display: inline-block; padding: .8rem 1.6rem; margin-top: .25rem; } /* Research library: compact reference lists. */ .lib-list { list-style: none; padding: 0; margin: 1rem 0 0; } .lib-list li { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--text); padding: .6rem 0; border-top: 1px solid var(--rule-soft); } .lib-list li:first-child { border-top: 0; } .lib-list .lib-title { font-weight: 700; } .lib-list .lib-note { color: var(--text-soft); } .lib-tag { display: inline-block; font-family: var(--font-chrome); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; vertical-align: middle; background: var(--navy-pale); color: var(--text-soft); border: 1px solid var(--navy-soft); } .lib-tag.lib-official { background: var(--teal-pale); color: var(--teal-deep); border-color: var(--teal); } .lib-tag.lib-peer { background: var(--green-soft); color: var(--green-deep); border-color: var(--green); } .lib-tag.lib-debated { background: var(--gold-soft); color: var(--gold); border-color: var(--gold); } [data-theme="dark"] .lib-tag.lib-peer { color: var(--green); } [data-theme="dark"] .lib-tag.lib-debated { color: var(--gold); } /* Research page: jump-link TOC + heading anchor offset for the long directory. */ .res-toc { display:flex; flex-wrap:wrap; gap:8px; margin:1.25rem auto 0; padding:0; list-style:none; } .res-toc a { display:inline-block; padding:5px 12px; border-radius:999px; background:var(--bg-strip); color:var(--navy); border:1px solid var(--rule); font-family:var(--font-chrome); font-size:13px; font-weight:600; } .res-toc a:hover { background:var(--teal); color:#fff; border-color:var(--teal); } [data-theme="dark"] .res-toc a { color:var(--teal); } .section-body h3[id] { scroll-margin-top: 84px; } /* Research page: box around the "Request an investigation" form to set it apart. */ .request-box { background: var(--bg-card); border: 1px solid var(--rule); border-left: 4px solid var(--coral); border-radius: 10px; padding: 1.5rem 1.75rem; box-shadow: var(--shadow-md); margin-top: .5rem; } .request-box > .section-body:first-child h3, .request-box h3 { margin-top: 0; } .request-box .request-form { margin-top: 1rem; } /* =========================================================================== Practitioner directory (support.html) -- live search UI backed by /directory/api. Reuses the apex token set (navy/teal/coral, rules, cards). =========================================================================== */ /* Search panel: sets the live-search tool apart from the prose and the directory list around it. Pale teal surface on a card, mirrors section-tinted. */ .pd-panel { background: color-mix(in srgb, var(--teal-pale, #f0f7f7) 55%, var(--bg-card)); border: 1px solid var(--rule); border-radius: 12px; padding: 1.5rem 1.75rem; margin-top: 1.5rem; box-shadow: var(--shadow-sm); } .pd-panel-title { margin-top: 0; } .pd-search { margin: 1rem 0 1.25rem; } .pd-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .pd-field { display: flex; flex-direction: column; gap: 4px; } .pd-field label { font-family: var(--font-chrome); font-size: 12px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .03em; } [data-theme="dark"] .pd-field label { color: var(--teal); } .pd-field-q { flex: 1 1 16rem; } .pd-input, .pd-select { font: inherit; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg-card); color: var(--ink); min-height: 42px; } .pd-input:focus, .pd-select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); } .pd-check { display: flex; align-items: center; gap: 7px; min-height: 42px; } .pd-check input { width: 17px; height: 17px; accent-color: var(--teal); } .pd-check label { font-family: var(--font-chrome); font-size: 14px; color: var(--ink); } .pd-meta { margin: .85rem 0 .25rem; font-family: var(--font-chrome); font-size: 14px; color: var(--ink-soft); font-style: italic; } .pd-results { display: grid; gap: 14px; margin-top: .25rem; } .pd-card { background: var(--bg-card); border: 1px solid var(--rule); border-left: 4px solid var(--teal); border-radius: 10px; padding: 1rem 1.15rem; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08)); } .pd-name { margin: 0 0 .35rem; font-size: 1.08rem; color: var(--navy); } [data-theme="dark"] .pd-name { color: #fff; } .pd-cred { font-weight: 600; color: var(--ink-soft); font-size: .92em; } .pd-card p { margin: .25rem 0; font-size: .95rem; line-height: 1.5; } .pd-role { font-weight: 600; } .pd-loc { color: var(--ink-soft); } .pd-label { font-weight: 700; color: var(--navy); } [data-theme="dark"] .pd-label { color: var(--teal); } .pd-bio { color: var(--ink-soft); } .pd-foot { margin-top: .5rem; font-family: var(--font-chrome); font-size: 13px; color: var(--ink-soft); } .pd-dot { margin: 0 .5rem; opacity: .5; } .pd-link { color: var(--teal); font-weight: 600; } .pd-source { color: var(--ink-soft); } .pd-tag { display: inline-block; font-family: var(--font-chrome); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; text-transform: uppercase; letter-spacing: .03em; } .pd-tag-tele { background: var(--bg-strip); color: var(--navy); border: 1px solid var(--rule); } .pd-tag-verified { background: var(--teal); color: #fff; } .pd-tag-unverified { background: var(--bg-strip); color: var(--ink-soft); border: 1px solid var(--rule); } .pd-more { margin-top: 1rem; font: inherit; font-family: var(--font-chrome); font-weight: 600; padding: 9px 18px; border-radius: 999px; cursor: pointer; background: var(--navy); color: #fff; border: 1px solid var(--navy); } .pd-more:hover { background: var(--teal); border-color: var(--teal); } .pd-note { font-size: .9rem; color: var(--ink-soft); margin: .25rem 0 0; } @media (max-width: 560px) { .pd-controls { flex-direction: column; align-items: stretch; } .pd-field, .pd-field-q { flex: 1 1 auto; } } /* ========================================================================== Library & Media (library.html browse + /library/item hub + /library/read) Apex Library WP. Tokens reused from :root; sibling of the .pd-* directory UI. ========================================================================== */ /* --- browse controls --- */ .lib-search { margin: 1.25rem 0 1.5rem; } .lib-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; /* Make the search + filters read as a distinct tool, not page text. */ background: color-mix(in srgb, var(--teal, #2a7d7b) 8%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--teal, #2a7d7b) 32%, var(--rule)); border-radius: 12px; padding: 1rem 1.1rem 1.1rem; box-shadow: var(--shadow-sm); } .lib-field { display: flex; flex-direction: column; gap: 4px; } .lib-field label { font-family: var(--font-chrome); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--navy); } [data-theme="dark"] .lib-field label { color: var(--teal); } .lib-field-q { flex: 1 1 18rem; } .lib-input, .lib-select { font: inherit; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg-card); color: var(--ink); min-height: 42px; } .lib-input:focus, .lib-select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); } .lib-meta { margin: .85rem 0 .5rem; font-family: var(--font-chrome); font-size: 14px; color: var(--ink-soft); font-style: italic; } /* --- result grid + cards --- */ .lib-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); } .lib-card { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08)); } .lib-card-media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--navy-deep); } .lib-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .lib-play { position: absolute; inset: 0; margin: auto; width: 3rem; height: 3rem; display: grid; place-items: center; color: #fff; font-size: 1.1rem; background: rgba(20,30,40,.55); border-radius: 999px; } .lib-card-body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem 1.15rem; } .lib-card-kicker { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; } .lib-format-tag { font-family: var(--font-chrome); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--teal-deep); background: var(--teal-pale); border-radius: 999px; padding: 2px 9px; } .lib-cat { font-family: var(--font-chrome); font-size: 13px; color: var(--ink-soft); } .lib-card-title { margin: 0; font-size: 1.12rem; line-height: 1.3; color: var(--navy); } .lib-card-title a { color: inherit; text-decoration: none; } .lib-card-title a:hover { color: var(--teal-deep); } [data-theme="dark"] .lib-card-title { color: #fff; } .lib-card-byline { margin: 0; font-family: var(--font-chrome); font-size: 13px; color: var(--ink-soft); } .lib-card-desc { margin: .15rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .lib-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .65rem 0 0; } .lib-more { display: block; margin: 1.25rem auto 0; font: inherit; font-family: var(--font-chrome); font-weight: 700; padding: 9px 22px; border-radius: 999px; cursor: pointer; background: var(--bg-strip); color: var(--navy); border: 1px solid var(--rule); } .lib-more:hover { border-color: var(--teal); color: var(--teal-deep); } /* --- buttons (shared by cards, hub, reader) --- */ .lib-btn { display: inline-block; font-family: var(--font-chrome); font-weight: 700; font-size: 14px; padding: 8px 18px; border-radius: 999px; cursor: pointer; text-decoration: none; border: 1px solid transparent; line-height: 1.4; } .lib-btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); } .lib-btn-primary:hover { background: var(--teal); border-color: var(--teal); color: #fff; } .lib-btn-ghost { background: transparent; color: var(--navy); border-color: var(--rule); } .lib-btn-ghost:hover { border-color: var(--teal); color: var(--teal-deep); } [data-theme="dark"] .lib-btn-ghost { color: #fff; } .lib-btn-discuss { background: var(--teal); color: #fff; border-color: var(--teal); } .lib-btn-discuss:hover { background: var(--teal-deep); border-color: var(--teal-deep); } /* --- hub page (/library/item/) --- */ .lib-hub { max-width: 44rem; margin: 0 auto; } .lib-crumb { font-family: var(--font-chrome); font-size: 14px; margin: 0 0 1rem; } .lib-crumb a { color: var(--teal-deep); text-decoration: none; } .lib-crumb a:hover { text-decoration: underline; } .lib-hub-head { margin-bottom: 1.1rem; } .lib-kicker { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 .5rem; } .lib-hub-title { font-size: clamp(1.7rem, 4vw, var(--text-2xl)); line-height: 1.2; margin: 0; color: var(--navy); } [data-theme="dark"] .lib-hub-title { color: #fff; } .lib-byline { font-family: var(--font-chrome); font-size: 15px; color: var(--ink-soft); margin: .35rem 0 0; } .lib-access { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 .35rem; } .lib-access-note, .lib-access-alt { font-family: var(--font-chrome); font-size: 13px; color: var(--ink-soft); margin: .25rem 0 0; } .lib-access-alt a { color: var(--teal-deep); } .lib-desc { font-size: var(--text-md); line-height: 1.7; margin: 1rem 0; } .lib-section { margin: 1.5rem 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); } .lib-section h2 { font-size: 1.2rem; color: var(--navy); margin: 0 0 .6rem; } [data-theme="dark"] .lib-section h2 { color: var(--teal); } .lib-prompts ul { margin: 0; padding-left: 1.2rem; } .lib-prompts li { font-size: var(--text-md); line-height: 1.6; margin-bottom: .55rem; } .lib-discuss { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; } .lib-prov { font-family: var(--font-chrome); font-size: 12px; color: var(--text-faint); margin-top: 1.5rem; } /* --- video embed (hub) --- */ .media-embed { aspect-ratio: 16 / 9; margin: 1.1rem 0 .35rem; border-radius: 12px; overflow: hidden; background: var(--navy-deep); } .media-embed iframe { width: 100%; height: 100%; border: 0; display: block; } /* --- reader (/library/read/) --- */ .lib-reader { max-width: 60rem; margin: 0 auto; } .lib-reader-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; justify-content: space-between; margin-bottom: 1rem; } .lib-reader-frame { width: 100%; height: 80vh; min-height: 30rem; border: 1px solid var(--rule); border-radius: 10px; background: #fff; } .lib-reader-pending { max-width: 40rem; } @media (max-width: 600px) { .lib-controls { gap: 8px; } .lib-field-q { flex-basis: 100%; } } /* ============================================================================ * Card definition fix (2026-05-25). In light mode --bg-card (#fff) is nearly * --bg (#faf8f3) and --rule (#e6e8ea) is near-white, so plain boxed cards lost * their edge. --card-border gives the plain card family a visible edge (dark * left unchanged); --shadow-sm was also lifted in light mode. Accent cards * (.pd-card, .request-box, .stat-card) already read via their colored edge and * are intentionally excluded so their accent is not overwritten. Placed last so * it wins source order over each card's own border shorthand. * ============================================================================ */ .feature-item, .principle, .lib-card, .pd-panel { border-color: var(--card-border); } /* ========================================================================== Library tabs + research additions (3-tab browse, Propose-research button) ========================================================================== */ .lib-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 1.1rem; border-bottom: 2px solid var(--rule); } .lib-tab { font: inherit; font-family: var(--font-chrome); font-weight: 700; font-size: 15px; padding: 9px 20px; cursor: pointer; background: transparent; color: var(--ink-soft); border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; } .lib-tab:hover { color: var(--navy); } .lib-tab.is-active { color: var(--navy); border-bottom-color: var(--coral); } [data-theme="dark"] .lib-tab:hover, [data-theme="dark"] .lib-tab.is-active { color: #fff; } /* hub engagement row: Discuss + Propose research side by side */ .lib-engage-actions { display: flex; flex-wrap: wrap; gap: .6rem; } .lib-btn-propose { background: var(--gold); color: var(--navy); border-color: var(--gold); } .lib-btn-propose:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--navy); } /* Google Books embedded preview viewer (preview-tier hub items) */ .lib-gbook { width: 100%; height: 520px; margin: 1.1rem 0 .6rem; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--bg-strip); } @media (max-width: 600px) { .lib-gbook { height: 400px; } } /* ============================================================================ * 2026-05-28 polish pass. * Site-wide form focus consistency + subtle card hover so the motion * language matches .cta-button. Page-scoped form styles (.share-form, * .sol-form, .sign-form, .survey-q, .auth-field) keep their own focus * styles where they define them; this rule covers the rest. * ============================================================================ */ input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="password"]:focus, select:focus, textarea:focus { outline: 2px solid var(--teal); outline-offset: -1px; border-color: var(--teal); } /* Subtle hover lift on feature cards (matches .cta-button motion). */ .feature-item { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .feature-item:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(20, 30, 40, .08); border-color: color-mix(in srgb, var(--teal) 35%, var(--card-border)); } [data-theme="dark"] .feature-item:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .35); } /* Centered CTA row utility (for paragraphs that contain only a primary cta-button at the end of a content section). Opt-in; existing inline margin-top patterns continue to work as before. */ .cta-row { text-align: center; margin-top: 1.75rem; } .cta-row .cta-button { margin: 0 auto; } /* ============================================================================ * Admin nav link (apex). The .nav-link-admin anchor is appended at runtime by * site.js#revealAdminLink() when /directory/whoami reports the session is on * the admin allowlist. Gold accent so it is recognizably the admin entry * without being loud; matches the existing .status-building gold token family. * ============================================================================ */ /* The #main-nav id prefix gives these rules enough specificity to beat the * earlier .main-nav:not(.scrolled) .nav-links > li > a color rule. */ #main-nav .nav-item-admin { margin-left: .35rem; } #main-nav .nav-link-admin { color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); border-radius: 4px; padding: .4rem .75rem; } #main-nav .nav-link-admin:hover { color: var(--gold); background: color-mix(in srgb, var(--gold) 22%, transparent); border-color: var(--gold); } /* In the mobile drawer the link goes full width with the other hubs, keeping * the gold text but dropping the pill chrome. */ @media (max-width: 1024px) { #main-nav .nav-item-admin { margin-left: 0; } #main-nav .nav-link-admin { width: 100%; padding: .75rem 0; border-radius: 0; background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.15); margin-top: .25rem; } } /* ============================================================================ Grounding card -- prominent, calming step-by-step (shared: Get Support + crisis). Built on existing tokens; teal accent signals steadiness without urgency. Moved here from inline