/* Hadithi web platform — theme tokens matching packages/theme/lib/src/ tokens/*.dart exactly, so the public website can switch between the same three rooms (Jua/Pulse/Karatasi) as the Flutter apps instead of being locked to one. Karatasi ("paper") stays the default/fallback — see docs/PROGRESS.md for the history of why the site started single-themed and what changed. Every rule elsewhere in this file reads colors through these custom properties, so a theme switch is just swapping the block below via [data-theme] on — see initThemeSwitcher() in web.js and the data-theme read server-side in layout.blade.php (avoids a flash of the wrong theme on navigation). */ :root, :root[data-theme="karatasi"] { --background: #FBF6EC; --background-rgb: 251, 246, 236; --surface: #F3EBDB; --surface-strong: #ECE0C9; --text: #241F19; --text-muted: #8A7F6E; --hairline: #DCCFAF; --accent: #7A2E2A; --accent-rgb: 122, 46, 42; --accent-strong: #5E2320; --on-accent: #FBF6EC; --radius-card: 6px; --radius-sm: 4px; --radius-pill: 999px; /* Fraunces (Bunny Fonts, loaded in layout.blade.php — same privacy- friendly Google Fonts mirror the Filament admin already uses): a warm, slightly literary display serif that gives Karatasi an actual typographic signature instead of falling back to whatever serif the visitor's OS ships. Georgia stays as the fallback chain. */ --font-title: 'Fraunces', Georgia, 'Times New Roman', serif; --shadow-sm: 0 1px 3px rgba(36, 31, 25, 0.07); --shadow-md: 0 8px 24px -4px rgba(36, 31, 25, 0.14); --shadow-lg: 0 24px 48px -12px rgba(36, 31, 25, 0.22); --hero-glow: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.09), transparent); } /* Jua ("sun") — the fireside room. Warm, oral, unhurried. Values match packages/theme/lib/src/tokens/jua.dart. */ :root[data-theme="jua"] { --background: #241812; --background-rgb: 36, 24, 18; --surface: #2E2016; --surface-strong: #3A2A1B; --text: #F3E7D6; --text-muted: #B29B80; --hairline: #453424; --accent: #E0762F; --accent-rgb: 224, 118, 47; --accent-strong: #B85A1F; --on-accent: #241209; --radius-card: 16px; --radius-sm: 12px; --radius-pill: 999px; --font-title: 'Fraunces', Georgia, 'Times New Roman', serif; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28); --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.5); --hero-glow: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.2), transparent); } /* Pulse — the platform room. Familiar, fast, confident. Built on Roote Technologies' own logo gradient (purple -> blue -> teal). Values match packages/theme/lib/src/tokens/pulse.dart. */ :root[data-theme="pulse"] { --background: #0B0E1A; --background-rgb: 11, 14, 26; --surface: #131A2E; --surface-strong: #182140; --text: #EDEFF7; --text-muted: #7C86A6; --hairline: #232C48; --accent: #7C6CF0; --accent-rgb: 124, 108, 240; --accent-strong: #5D50C7; --on-accent: #FFFFFF; --radius-card: 10px; --radius-sm: 8px; --radius-pill: 999px; /* Pulse's titleFontFamily is null in the Dart token (system sans, no serif) — reuses --font-body rather than Fraunces. */ --font-title: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.55); --hero-glow: radial-gradient(closest-side at 35% 30%, rgba(130, 84, 255, 0.22), transparent 70%), radial-gradient(closest-side at 65% 45%, rgba(13, 120, 226, 0.18), transparent 70%), radial-gradient(closest-side at 50% 65%, rgba(0, 194, 220, 0.14), transparent 70%); } :root { --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); --duration: 0.45s; } /* A theme switch recolors html/body instantly by default (CSS custom properties don't animate on their own) — this crossfades the two surfaces every page sits on so switching rooms reads as a deliberate transition rather than a hard snap. Per-component hover transitions elsewhere in this file are unaffected. */ html, body { transition: background-color 0.35s var(--ease), color 0.35s var(--ease); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--background); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.5; } /* A visitor's very first paint before web.js has run is only ever this one class — the loading bar below reads html.is-navigating, added on internal link clicks, purely a decorative "the site is alive" cue during the brief moment before the browser unloads the page. */ body::before { content: ''; position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--accent); z-index: 9999; transition: width 0.5s var(--ease); pointer-events: none; } html.is-navigating body::before { width: 72%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } /* Scroll-reveal — see public/js/web.js's IntersectionObserver. Falls back to fully visible with no JS (progressive enhancement, not a dependency the page requires to be usable). */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } .reveal-stagger > *.is-visible { opacity: 1; transform: none; } :root:has(html.no-js) .reveal, :root:has(html.no-js) .reveal-stagger > * { opacity: 1; transform: none; } /* Signature decorative motif — a minimal line+leaf flourish standing in for Karatasi's "tree-branch line art" (see docs/design's UI direction review), never actually built into the real site until now. Reused as a section divider wherever a hard rule would otherwise sit. */ .branch-divider { display: block; width: 130px; height: 15px; margin: 0 auto; color: var(--hairline); overflow: visible; } .branch-divider.accent { color: var(--accent); } .container { max-width: 1080px; margin: 0 auto; padding: 0 20px; } /* Nav */ .site-nav { border-bottom: 1px solid var(--hairline); background: var(--background); position: sticky; top: 0; z-index: 10; transition: box-shadow var(--duration) var(--ease), background-color var(--duration) var(--ease); } /* .is-scrolled toggled by web.js past an 8px scroll threshold — a plain sticky border reads fine at rest, but a hairline alone disappears against busy hero imagery once content scrolls under it. */ .site-nav.is-scrolled { box-shadow: var(--shadow-sm); background: rgba(var(--background-rgb), 0.92); backdrop-filter: blur(8px); } .site-nav .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; min-height: 64px; padding-top: 10px; padding-bottom: 10px; } .site-nav .logo { font-family: var(--font-title); font-size: 22px; font-weight: 400; letter-spacing: 0.5px; flex-shrink: 0; } .site-nav nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; justify-content: flex-end; } .site-nav nav a { font-size: 14px; color: var(--text-muted); white-space: nowrap; position: relative; transition: color var(--duration) var(--ease); } .site-nav nav a.active, .site-nav nav a:hover { color: var(--accent); text-decoration: none; } /* An animated underline instead of instant text-decoration — the kind of small polish that separates "styled" from "designed". */ .site-nav nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1.5px; background: var(--accent); transition: right var(--duration) var(--ease); } .site-nav nav a.active::after, .site-nav nav a:hover::after { right: 0; } .site-nav form { display: flex; flex: 1 1 160px; min-width: 0; max-width: 260px; } .site-nav .search-input { border: 1px solid var(--hairline); background: var(--surface); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 13px; color: var(--text); width: 100%; min-width: 0; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .site-nav .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Theme switcher — Jua/Pulse/Karatasi, the same three rooms as the Flutter apps' Settings > Appearance screen. See the token blocks at the top of this file and initThemeSwitcher() in web.js. */ .theme-switcher { position: relative; flex-shrink: 0; } .theme-switcher-toggle { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-muted); font-size: 13px; font-family: inherit; cursor: pointer; transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease); } .theme-switcher-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-swatch { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.1); } .theme-swatch--karatasi { background: linear-gradient(135deg, #7A2E2A 50%, #FBF6EC 50%); } .theme-swatch--jua { background: linear-gradient(135deg, #E0762F 50%, #241812 50%); } .theme-swatch--pulse { background: linear-gradient(135deg, #7C6CF0 50%, #0B0E1A 50%); } .theme-switcher-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: 6px; min-width: 190px; display: none; flex-direction: column; gap: 2px; z-index: 20; } .theme-switcher.is-open .theme-switcher-menu { display: flex; } .theme-switcher-option { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; font-family: inherit; cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: background-color var(--duration) var(--ease); } .theme-switcher-option:hover { background: var(--surface-strong); } .theme-switcher-option .name { flex: 1; } .theme-switcher-option .desc { display: block; color: var(--text-muted); font-size: 11px; margin-top: 1px; } .theme-switcher-option .check { opacity: 0; color: var(--accent); flex-shrink: 0; } .theme-switcher-option[aria-pressed="true"] .name { color: var(--accent); font-weight: 600; } .theme-switcher-option[aria-pressed="true"] .check { opacity: 1; } /* Hamburger toggle — hidden on desktop, shown once the nav links can no longer fit a single row comfortably (see the 768px query below). */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; flex-shrink: 0; transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease); } .nav-toggle:hover { border-color: var(--accent); color: var(--accent); } @media (max-width: 768px) { .nav-toggle { display: flex; } .site-nav .container { flex-wrap: wrap; justify-content: space-between; } .site-nav nav { display: none; flex-direction: column; align-items: stretch; width: 100%; flex-basis: 100%; gap: 2px; padding: 12px 0 16px; justify-content: flex-start; } .site-nav nav.is-open { display: flex; } .site-nav nav a { padding: 12px 4px; border-bottom: 1px solid var(--hairline); } .site-nav nav a::after { display: none; } .site-nav form { max-width: none; order: 0; margin-top: 6px; } .theme-switcher { width: 100%; order: 0; } .theme-switcher-toggle { width: 100%; justify-content: center; } .theme-switcher-menu { position: static; box-shadow: none; border: 1px solid var(--hairline); width: 100%; margin-top: 6px; transform: none; } } /* Hero */ .hero { padding: 88px 0 64px; text-align: center; border-bottom: 1px solid var(--hairline); position: relative; overflow: hidden; } /* A soft radial wash behind the headline — the only "imagery" the hero needs when there's no photography to lean on. --hero-glow is themed (see the token blocks at the top of this file): a plain accent wash for Karatasi/Jua, Pulse's own three-color gradient for Pulse. */ .hero::before { content: ''; position: absolute; top: -180px; left: 50%; transform: translateX(-50%); width: 720px; height: 420px; background: var(--hero-glow); pointer-events: none; } .hero .eyebrow { position: relative; text-transform: uppercase; font-size: 12px; letter-spacing: 2px; font-weight: 600; color: var(--accent); margin: 0 0 16px; } .hero h1 { position: relative; font-family: var(--font-title); font-size: 52px; font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 18px; } .hero h1 em { font-style: italic; color: var(--accent); } .hero p { position: relative; color: var(--text-muted); font-size: 17px; max-width: 500px; margin: 0 auto 32px; } .hero .cta-row { position: relative; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 40px; } .hero .branch-divider { margin-top: 8px; } @media (max-width: 640px) { .hero { padding: 64px 0 44px; } } /* Buttons */ .btn { display: inline-block; padding: 12px 26px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background-color var(--duration) var(--ease), border-color var(--duration) var(--ease); } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-strong); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .btn-secondary { background: transparent; border-color: var(--hairline); color: var(--text); } .btn-secondary:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn-secondary:active { transform: translateY(0); box-shadow: none; } /* Sections */ .section { padding: 48px 0; } .section-label { text-transform: uppercase; font-size: 12px; letter-spacing: 1px; font-weight: 600; color: var(--text-muted); margin: 0 0 18px; } /* Browse filters row — category chips + a country