/* ============================================================ * WISESEED HEALTH SOLUTIONS — MAIN STYLESHEET * ============================================================ * FILE: style.css * AUTHOR: Angus * PURPOSE: Single, canonical stylesheet for the PWA * NAMING: Low-specificity, single-class where possible; BEM-ish optional * THEME: swaps tokens only; components inherit * BREAKPOINTS: Mobile-first (sm/md/lg/xl), grouped in Section 11 * ============================================================ * * TABLE OF CONTENTS * * 0) Conventions & Editor Notes * - How we name things; specificity rules; fold markers; linting tips * * 1) Font Declarations (optional) * - @font-face blocks if self-hosting; otherwise link in HTML * * 2) Design Tokens (CSS Variables) * 2.1 Color system (light) * 2.2 Typography scale & font stacks * 2.3 Spacing scale, radii, shadows * 2.4 Z-index map, durations, easings, breakpoints * 2.5 Theme: html[data-theme="dark"] token overrides ONLY * * 3) Base Reset & Global Elements * - Box-sizing, html/body defaults, images/media, lists, tables, links * * 4) Accessibility & Preferences * - .visually-hidden; prefers-reduced-motion; focus visibility patterns * * 5) Layout Primitives (Composables) * - .container, .stack, .cluster, .grid, .sidebar, .cover, gutters * * 6) Component Library * 6.1 Header & Navigation (desktop + mobile/hamburger) * - .site-header, .navbar, .main-nav, .nav-links, href="../css/master_style.css", .nav-close * - “current” state styling * 6.2 Buttons * - .btn base + variants (.btn--primary, .btn--ghost) and sizes * 6.3 Forms (incl. Search) * - .field, .input/.select/.textarea, validation states * - .search (form wrapper), .search__input, .search__button * 6.4 Cards * - .card base + optional variants * 6.5 Media Player (UNIFIED: audio & video) * - .player (wrapper), [data-kind="audio|video"] * - .player__media, .player__controls, .player__progress, .player__time, * .player__volume, .player__speed, .player__fullscreen (video only) * 6.6 Feedback (optional) * - .toast, .modal, .badge/.chip if used * * 7) Page Patterns (Thin, layout-only glue) * 7.1 Home * 7.2 About * 7.3 Content Pages (Mind / Body / Soul) * 7.4 Article * 7.5 Search * 7.6 Signup * 7.7 Audio/Video Pages (layout-only; styling lives in 6.5) * * 8) Utilities (Keep Minimal) * - Spacing helpers, alignment, text truncation, display toggles * * 9) State & Interaction Helpers * - Unified hover/focus/active patterns reusable across components * * 10) Theme Overrides — Component-Specific (Dark/Ink) * - Only when tokens aren’t enough (e.g., translucent surfaces, borders) * - Nav panel, buttons, forms, media controls: override sparingly * * 11) Media Queries (Grouped; Mobile-First) * - sm (>=480px), md (>=768px), lg (>=1024px), xl (>=1280px) * - Mirror Sections 5–10 order inside each breakpoint for easy scanning * * 12) Print Styles (Optional) * - Simplify layout, colors, hide non-print UI * * 13) Debug Helpers (Optional; Remove for production) * - .debug-outline, .debug-grid * * ============================================================ * SECTION BANNERS (use these when you implement each section): * ============================================================ * == 01 FONT DECLARATIONS ==================================== * == 02 DESIGN TOKENS ======================================== * == 03 BASE & GLOBAL ======================================== * == 04 ACCESSIBILITY ======================================== * == 05 LAYOUT PRIMITIVES ==================================== * == 06 COMPONENTS =========================================== * == 06.5 MEDIA PLAYER ======================================= * == 07 PAGE PATTERNS ======================================== * == 08 UTILITIES ============================================ * == 09 STATE & INTERACTION ================================== * == 10 THEME OVERRIDES (DARK) =============================== * == 11 MEDIA QUERIES ======================================== * ============================================================ */ /* =========================================================== 1. FONT DECLARATION ======================================================== */ @font-face { font-family: "TC Jimmy Serif PRO"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/TCJimmySerifPro-Regular.otf") format("opentype"); } @font-face { font-family: "TC Jimmy Serif PRO"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/TCJimmySerifPro-Bold.otf") format("opentype"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/Inter-Regular.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/Inter-Italic.woff2") format("woff2"); } /* @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2"); } */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/Inter-Bold.woff2") format("woff2"); } /* ============================================================ MASTER STYLE - THEME ENGINE ============================================================ */ /* 1. GLOBAL DEFAULTS (Shared Geometry, Scales & Motion) These apply to ALL sites (WiseSeed, Misfit, Wild School) */ :root { /* --- Typography: Families --- */ --font-brand: "TC Jimmy Serif PRO", Georgia, serif; --font-heading: "TC Jimmy Serif PRO", Georgia, serif; --font-body: "Inter", system-ui, sans-serif; /* --- Typography: Scale --- */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-md: 1.1875rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; --font-size-2xl: 1.875rem; --font-size-3xl: 2.25rem; --font-size-4xl: 3rem; --font-size-5xl: 3.75rem; /* --- Typography: Fluid Hero --- */ --font-size-hero-h1: clamp(2.5rem, 4vw + 1rem, 4.5rem); --font-size-hero-h2: clamp(1.25rem, 2vw + 0.5rem, 2rem); /* --- Spacing Scale --- */ --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* --- Layout & Geometry --- */ --container-max: 800px; --header-height: 70px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 50%; /* --- Motion Physics --- */ --transition-speed: 250ms; --easing-standard: cubic-bezier(0.2, 0.8, 0.4, 1); } /* 2. WISESEED THEME (Light Mode / "Parchment") */ :root[data-site="wiseseed"] { /* Core Colors */ --bg: #e4e4c9; /* parchment */ --surface: #ededd8; /* lighter parchment */ --text: #2b3322; /* forest */ --muted: #859670; /* desaturated green */ --brand: #87a96b; /* unity green */ --accent: #bf223e; /* crimson */ --link: #bf223e; /* crimson */ --border: #c7c7a8; /* muted parchment */ /* Header / Footer */ --header-bg: #1d2316; --header-text: #e4e4c9; --footer-bg: #1d2316; --footer-text: #e4e4c9; --nav-hover-bg: rgba(135, 169, 107, 0.14); /* Shadows (Warm tinted with forest-green base) */ --shadow-xs: 0 1px 2px rgba(29, 35, 22, 0.05); --shadow-sm: 0 2px 4px rgba(29, 35, 22, 0.1); --shadow-md: 0 4px 6px rgba(29, 35, 22, 0.1); --shadow-lg: 0 10px 15px rgba(29, 35, 22, 0.1); --shadow-xl: 0 20px 25px rgba(29, 35, 22, 0.15); } /* 3. DARK MODE (Universal - applies to Misfit Unity or any site with data-theme="dark") */ :root[data-site="misfit"], :root[data-theme="dark"] { /* Core Colors */ --bg: #1e2618; /* Darker Olive */ --surface: #1a2014; /* Darker surface */ --text: #e4e4c9; /* Parchment White */ --muted: #859670; /* Desaturated green */ --brand: #87a96b; /* Unity Green */ --accent: #bf223e; /* Misfit Red */ --link: #bf223e; /* Links use accent color */ --border: #3a4430; /* Lighter olive */ /* Header / Footer */ --header-bg: #141a0f; --header-text: #e4e4c9; --footer-bg: #141a0f; --footer-text: #e4e4c9; --nav-hover-bg: rgba(135, 169, 107, 0.15); /* Unity Green transparent */ /* Shadows (Standard Black for Dark Themes) */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6); /* Component Overrides for Dark Context */ --placeholder: #6b7a55; } /* ===================================================== 3. BASE RESET & GLOBAL ELEMENTS ================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + env(safe-area-inset-top)); } body { font-family: var(--font-body); font-size: var(--font-size-base); line-height: 1.6; color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } /* Fix to keep bullets hanging but visible */ ul, ol { list-style-position: outside; padding-left: 1.5em; margin-left: 0; } /* --- MODERN TABLE STYLING --- */ table { border-collapse: collapse; margin: 25px 0; font-size: 0.95em; min-width: 100%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); overflow: hidden; border-radius: 8px 8px 0 0; } thead tr { background-color: var(--header-bg); color: var(--brand); text-align: left; font-weight: bold; } th, td { padding: 12px 15px; } tbody tr:nth-of-type(even) { background-color: var(--surface); } tbody tr { border-bottom: 0.25px solid var(--text); } tbody tr:last-of-type { border-bottom: 1px solid var(--text); } tbody tr:hover { background-color: var(--nav-hover-bg); cursor: default; } thead th p { color: inherit !important; margin: 0; } /* ====================================================== 4. ACCESSIBILITY =================================================== */ /* Visibility Hidden */ .visually-hidden { /* to do!!! */ } /* Disable animations for users who prefer less motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Visible focus outlines for keyboard navigation only */ :focus-visible { outline: 2px solid var(--accent); /* Your accent color */ outline-offset: 2px; } /* ============================================================ * 5. LAYOUT PRIMITIVES (CONSOLIDATED) * ============================================================ */ /* Container pattern: max-width + gutters */ .container { width: 100%; max-width: var(--container-max); /* Using the 800px token */ margin: 0 auto; padding: 0 var(--space-md); } /* For wider containers (like on home page) */ .container--wide { max-width: 1200px; } /* Main content area */ .page-main { flex: 1; padding: var(--space-xl) 0; } .page-main .container { text-align: center; /* Default center alignment */ } /* === Grid Patterns === */ .grid { display: grid; gap: var(--space-lg); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* ===================================================== 6. COMPONENTS =================================================== */ /* ============================================================ * 6.1 Typography * ============================================================ */ /* Wordmark theming */ .site-title { color: var(--text); } .site-title .brand-text { color: var(--brand); } /* "WiseSeed" only */ /* Global Headings */ h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--text); font-weight: 400; /* Overridden by specific h-tags below */ /* Improve spacing and rendering */ letter-spacing: 0.005em; /* Subtle spacing improvement */ text-rendering: optimizeLegibility; font-feature-settings: "kern" 1; } h1 { font-size: var(--font-size-4xl); margin-bottom: var(--space-lg); line-height: 1.2; } h2 { font-size: var(--font-size-2xl); margin-bottom: var(--space-md); line-height: 1.3; } h3 { font-size: var(--font-size-xl); margin-bottom: var(--space-sm); line-height: 1.4; } h4 { font-size: var(--font-size-lg); margin-bottom: var(--space-sm); line-height: 1.4; } /* Global Paragraphs */ p { font-family: var(--font-body); font-size: var(--font-size-md); line-height: 1.7; margin-bottom: var(--space-md); } p .quote { font-family: var(--font-brand); font-size: var(--font-size-md); line-height: 1.7; margin-bottom: var(--space-md); } /* Lists */ ul { font-family: var(--font-body); font-size: var(--font-size-md); line-height: 1.7; margin-bottom: var(--space-md); } ol { font-family: var(--font-body); font-size: var(--font-size-md); line-height: 1.7; margin-bottom: var(--space-md); } /* Text Utility Classes */ .text-muted { color: var(--muted); } .text-primary { color: var(--brand); } /* ============================================================ * 6.2 Button System * ============================================================ */ /* Base button styles */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-lg); font: 500 var(--font-size-base) var(--font-body); border-radius: var(--radius-md); border: none; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Focus visibility for accessibility */ .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Primary button variant */ .btn-primary { background: var(--brand); color: var(--text); border: 1px solid var(--text); } .btn-primary:hover { background: var(--accent); color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* Outline button variant */ .btn-outline { background: var(--surface); color: var(--text); border: 1px solid color-mix(in oklab, var(--header-bg), white 80%); box-shadow: var(--shadow-sm); } .btn-outline:hover { border-color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* Other button components, like the 'return to top' */ .return-btn { position: fixed; bottom: 2rem; right: 2rem; width: 50px; height: 50px; border-radius: var(--radius-full); background-color: transparent; color: var(--brand); border: 3px solid var(--brand); cursor: pointer; transition: all var(--transition-speed) var(--easing-standard); z-index: 999; opacity: 0; visibility: hidden; display: flex; align-items: center; justify-content: center; } .return-btn.show { opacity: 1; visibility: visible; } .return-btn:hover { border: 3px solid var(--accent); background-color: var(--accent); color: var(--text); transform: translateY(-2px); } /* iOS Install Banner */ .ios-install-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background-color: var(--surface); border-top: 1px solid var(--border); padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); display: flex; align-items: flex-start; gap: 0.875rem; box-shadow: 0 -4px 24px rgba(0,0,0,0.4); transform: translateY(100%); transition: transform var(--transition-speed) var(--easing-standard); } .ios-install-banner.ios-banner-visible { transform: translateY(0); } .ios-install-banner__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; } .ios-install-banner__icon img { width: 100%; height: 100%; object-fit: cover; } .ios-install-banner__body { flex: 1; min-width: 0; } .ios-install-banner__title { font-size: 0.875rem; font-weight: 600; color: var(--text); margin: 0 0 0.25rem; } .ios-install-banner__instructions { font-size: 0.8rem; color: var(--muted); margin: 0; line-height: 1.4; } .ios-install-banner__instructions svg { display: inline; vertical-align: middle; margin: 0 1px; } .ios-install-banner__dismiss { flex-shrink: 0; background: none; border: none; color: var(--muted); cursor: pointer; padding: 0.25rem; line-height: 1; font-size: 1.25rem; transition: color var(--transition-speed); } .ios-install-banner__dismiss:hover { color: var(--text); } .theme-toggle { margin-top: var(--space-xl); margin-bottom: var(--space-2xl); } /* PWA Install Button */ .pwa_install_btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; margin-top: 2rem; margin-bottom: 4rem; background-color: transparent; color: var(--brand); border: 1px solid var(--brand); border-radius: 8px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .pwa_install_btn:hover { background-color: var(--accent); color: var(--header-bg); border-color: var(--accent); transform: translateY(-2px); } /* ============================================================ * 6.3 Card System (CONSOLIDATED) * ============================================================ */ /* === Base Card === */ .content-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); /* padding-top: var(--space-md); */ /* margin-top: var(--space-xl); */ margin-bottom: var(--space-lg); transition: all var(--transition-speed) ease; overflow: hidden; cursor: pointer; } .content-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--text); } /* === Card Components === */ .card-image { width: 100%; height: 200px; overflow: hidden; position: relative; } .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-speed) ease; display: block; /* Remove any default spacing */ } .content-card:hover .card-image img { transform: scale(1.05); } .content-card .category-link:hover { color: var(--accent); text-decoration: none; } .content-card .category-link:hover .category-title { transform: scale(1.05); } .card-content { padding: var(--space-lg); } .card-title { font-family: var(--font-heading); font-size: var(--font-size-xl); color: var(--text); margin-bottom: var(--space-sm); line-height: 1.3; } .card-excerpt { font-size: var(--font-size-base); color: var(--text); opacity: 0.9; margin-bottom: var(--space-lg); } .card-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); font-size: var(--font-size-sm); color: var(--muted); } .card-actions .card-cta { display: inline-block; transition: transform var(--transition-speed) ease; } .card-actions .card-cta:hover { transform: scale(1.2); color: var(--brand); } /* === Card Variants === */ /* Compact variant for lists/search results */ .content-card--compact .card-image { display: none; } .content-card--compact .card-content { padding: var(--space-md); } .content-card--compact .card-title { font-size: var(--font-size-lg); margin-bottom: var(--space-xs); transition: transform var(--transition-speed) ease; } .content-card--compact .card-excerpt { margin-bottom: var(--space-sm); opacity: 0.85; } .content-card--compact .card-meta { margin-bottom: 0; gap: var(--space-sm); } /* Feature variant for homepage */ .content-card--feature .card-image { height: 260px; } .content-card--feature .card-title { font-size: clamp(1.25rem, 1.1rem + 1.2vw, 1.75rem); transition: transform var(--transition-speed) ease; } .content-card--feature .card-excerpt { font-size: var(--font-size-md); } .category-tag { color: var(--brand); font-weight: 500; } .reading-time { color: var(--muted); font-size: var(--font-size-xs); } /* Card variants for about page reference links */ /* Add to Section 6.3 Card System */ .content-card--publication { margin-bottom: var(--space-md); /* Tighter spacing than regular cards */ } .content-card--publication .card-content { padding: var(--space-md); } .content-card--publication .card-title { font-size: var(--font-size-lg); margin-bottom: var(--space-xs); color: var(--text); transition: transform var(--transition-speed) ease; } .content-card--publication .publication-journal { font-style: italic; color: var(--muted); font-size: var(--font-size-sm); margin-bottom: var(--space-xs); } .content-card--publication .publication-description { font-size: var(--font-size-sm); line-height: 1.5; margin-bottom: 0; } .content-card--publication:hover { border-color: var(--text); transform: translateY(-2px); } .content-card--publication .card-title:hover { transform: scale(1.02); /* text-decoration: underline; */ color: var(--accent); } /* ============================================================ * 6.4 Navigation System (CONSOLIDATED) * ============================================================ */ /* ==== Brand Logo ==== */ .brand { display: inline-flex; align-items: baseline; gap: 0.25rem; text-decoration: none; color: var(--header-text); font-family: var(--font-brand); font-size: var(--font-size-2xl); font-weight: 600; transition: all var(--transition-speed) var(--easing-standard); } .brand:hover { transform: scale(1.05); color: var(--accent); } .brand:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius-sm); } /* === Desktop Navigation === */ .desktop-nav { display: none; /* Hidden on mobile */ align-items: center; gap: 2rem; } /* Show desktop nav on larger screens */ @media (min-width: 768px) { .desktop-nav { display: flex; } .menu-toggle { display: none; /* Hide hamburger on desktop */ } } /* Imperative Navigation - Primary Links (Bold, Uppercase) */ .imperative-nav { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; } .imperative-nav a { color: var(--brand); font-size: 1.2rem; font-weight: 700; font-family: var(--font-brand); letter-spacing: 0.08em; text-decoration: none; transition: all var(--transition-speed) var(--easing-standard); display: inline-block; /* Required for transform to work */ } .imperative-nav a:hover { color: var(--accent); transform: scale(1.05); } /* Utility Navigation - Secondary Links (Regular, Lowercase) */ .utility-nav { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; margin-left: auto; /* Push to right side */ } .utility-nav a { color: var(--brand); font-size: 0.95rem; font-weight: 400; text-transform: lowercase; text-decoration: none; opacity: 0.8; transition: all var(--transition-speed) var(--easing-standard); display: inline-block; /* Required for transform to work */ } .utility-nav a:hover { color: var(--accent); transform: scale(1.05); opacity: 1; } /* Separator between utility links */ .utility-nav li:not(:last-child)::after { content: "|"; margin-left: 1rem; opacity: 0.4; /* Added: makes the separator subtle */ } /* Subscriber footer navigation */ .subscriber-nav { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; justify-content: center; } .subscriber-nav a { color: var(--brand); font-size: 0.95rem; font-weight: 400; text-transform: lowercase; text-decoration: none; opacity: 0.8; transition: all var(--transition-speed) var(--easing-standard); display: inline-block; } .subscriber-nav a:hover { color: var(--accent); transform: scale(1.05); opacity: 1; } .subscriber-nav li:not(:last-child)::after { content: "|"; margin-left: 1rem; opacity: 0.4; } /* === Mobile Navigation === */ .menu-toggle { display: inline-block; background: none; border: none; cursor: pointer; display: flex; width: 44px; height: 44px; border-radius: var(--radius-sm); align-items: center; /* Add these two lines for a smoother transition */ will-change: transform; transform: translateZ(0); transition: transform var(--transition-speed) var(--easing-standard); } .menu-toggle:hover { transform: scale(1.1) translateZ(0); /* Apply the scale and hardware acceleration */ color: var(--accent); } /* Hamburger icon */ .menu-icon, .menu-icon::before, .menu-icon::after { content: ""; display: inline-block; position: relative; width: 24px; height: 2px; background-color: var(--brand); border-radius: 1px; transition: all var(--transition-speed) var(--easing-standard); } .menu-icon::before { position: absolute; top: -8px; } .menu-icon::after { position: absolute; bottom: -8px; height: 1px; } /* Need to adjust height to match others: jangle effect */ .menu-toggle:hover .menu-icon, .menu-toggle:hover .menu-icon::before, .menu-toggle:hover .menu-icon::after { background-color: var(--accent); } /* Mobile nav panel */ .main-nav { position: fixed; inset: 0; background: var(--bg); z-index: 1000; display: flex; align-items: center; justify-content: center; transform: translateX(-100%); transition: transform 0.4s var(--easing-standard); } .main-nav.active { transform: translateX(0); } /* Remove duplicate definitions - consolidate .nav-links styles here once */ .nav-links { list-style: none; text-align: center; } .nav-links li { margin-bottom: var(--space-xl); } .nav-links a { font-family: var(--font-heading); color: var(--text); font-size: var(--font-size-3xl); display: inline-block; transform: translateY(0); transition: transform var(--transition-speed) var(--easing-standard), color var(--transition-speed) var(--easing-standard); } .nav-links a:hover { color: var(--accent); transform: scale(1.1); } /* Close button */ .nav-close { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text); transition: all var(--transition-speed) var(--easing-standard); width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; } .nav-close:hover { color: var(--accent); transform: scale(1.5); } /* ================================================================= 6.5 Media Player ================================================================= */ /* 1. Base Player Container */ .media-player { max-width: 600px; margin-inline: auto; /* centers horizontally */ margin-block: var(--space-lg) var(--space-2xl); /* top | bottom */ background-color: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: var(--space-lg); box-shadow: var(--shadow-md); /* The player itself should be flexible */ display: flex; flex-direction: column; } /* 2. Controls Layout (General) */ .media-controls { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); } /* 3. Progress Section Layout */ .progress-section { display: flex; align-items: center; gap: var(--space-md); } /* 4. Progress Container and Fill */ .progress-container { flex-grow: 1; /* Occupy all available space */ height: 8px; background-color: var(--muted); border-radius: 4px; cursor: pointer; position: relative; } .progress-fill { height: 100%; width: 0%; /* Will be controlled by JavaScript */ background-color: var(--header-bg); border-radius: 4px; } /* 5. Time Display */ .current-time, .total-time { font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--text); min-width: 45px; /* Prevents layout shift */ flex-shrink: 0; } .current-time { text-align: right; /* Right-align current time */ } .total-time { text-align: left; color: var(--muted); /* Slightly dimmer for hierarchy */ } /* 6. Button Controls */ .button-controls { display: flex; align-items: center; gap: var(--space-md); } /* 7. Play/Pause Button (Unified) */ .play-pause-btn { width: 60px; height: 60px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: 50px; font-size: 1.2rem; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .play-pause-btn:hover { border-color: var(--header-bg); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* 8. Other Buttons (Volume, Speed, Fullscreen) */ .volume-btn, .speed-btn, .fullscreen-btn { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: var(--space-xs) var(--space-sm); border-radius: 4px; cursor: pointer; font-size: 1rem; transition: all 0.2s ease; flex-shrink: 0; } .volume-btn:hover, .speed-btn:hover, .fullscreen-btn:hover { background: transparent; color: var(--header-bg); border-color: var(--header-bg); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* 9. Volume Control */ .volume-control { display: flex; align-items: center; gap: var(--space-xs); } /* VOLUME SLIDER - Cross-browser styling */ .volume-slider { width: 80px; height: 6px; cursor: pointer; appearance: none; /* Remove default styling */ background: var(--muted); border-radius: 3px; outline: none; transition: all 0.2s ease; } /* Webkit browsers (Chrome, Safari, Edge) */ .volume-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: var(--header-bg); border-radius: 50%; cursor: pointer; transition: all 0.2s ease; } .volume-slider::-webkit-slider-thumb:hover { background: var(--header-bg); transform: scale(1.3); } /* Firefox */ .volume-slider::-moz-range-thumb { width: 16px; height: 16px; background: var(--muted); border-radius: 50%; border: none; cursor: pointer; transition: all 0.2s ease; } .volume-slider::-moz-range-thumb:hover { background: var(--header-bg); transform: scale(1.1); } .volume-slider::-moz-range-track { height: 6px; background: var(--muted); border-radius: 3px; border: none; } /* 10. Video-Specific Styles (for the .is-video modifier) */ .media-player.is-video { /* No special styles here, as the video container handles everything. */ } .is-video .video-container { position: relative; overflow: hidden; } .is-video .video-container video { width: 100%; height: auto; display: block; } /* ========================================================== 6.6 SEARCH (canonical component) ======================================================== */ .search-interface { /* container */ max-width: 600px; margin: 0 auto var(--space-2xl); margin-block-start: var( --space-xl ); /* or var(--space-2xl) if you want more */ } .search-bar { /* input + button row */ display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; } .search-input { /* subdued surface box */ flex: 1; height: 48px; /* Set a fixed height */ min-width: 260px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); text-align: center; /* centered placeholder */ transition: transform 0.2s ease, box-shadow 0.2s ease; } .search-interface .search-input:hover, .search-interface .search-input:focus { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--text); background: var(--surface); color: var(--text); } .search-interface .search-input:focus-visible { outline: none; /* Gets rid of the accessibility focus r */ } .search-input:focus, .search-input:not(:placeholder-shown) { text-align: left; } /* left-align while typing */ .search-input::-webkit-search-cancel-button { -webkit-appearance: none; height: 16px; width: 16px; /* The SVG is filled with --text's light mode color (#2a251f) */ background-image: url('data:image/svg+xml;utf8,'); background-size: 16px 16px; background-repeat: no-repeat; cursor: pointer; } .search-input::-moz-search-clear-button { color: var(--text); /* Optional: Adjust size and opacity */ } .search-btn { /* make button match input’s elevation/ring */ height: 48px; /* Make it the same height as the input */ width: 48px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .search-btn:hover, .search-btn:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--text); background: var(--surface); color: var(--text); } /* Temporary alias: if search.html still uses .result-item, make it render like a compact card */ .result-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: transform var(--transition-speed) var(--easing-standard), box-shadow var(--transition-speed) var(--easing-standard), border-color var(--transition-speed) var(--easing-standard); } .result-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--header-bg); } .search-results { max-width: 800px; margin: var(--space-xl) auto var(--space-2xl); display: grid; gap: var(--space-lg); } /* ============================================================ * 6.7 Call-to-Action Component * ============================================================ */ .section-cta { margin-top: var(--space-2xl); text-align: center; } .section-cta p { margin-bottom: var(--space-md); font-weight: 600; } /* ============================================================================= 6.8 GENERIC IMAGE STYLING ============================================================================= */ /* Image Text Container */ .image-text-container { display: flex; flex-direction: column; /* This stacks them vertically */ gap: var(--space-xl); align-items: center; margin-bottom: var(--space-2xl); } /* Reset any inherited margins for images inside this container */ .image-text-container .image-container { /* ← Fixed selector */ flex-shrink: 0; max-width: 300px; margin: 0; /* ← Reset all margins - self-contained */ } /* Ensure text content flows naturally */ .image-text-container .content-section { width: 100%; margin-bottom: 0; /* Reset bottom margin to avoid double spacing */ } /* Base image container */ .image-container { width: 100%; margin-bottom: var(--space-lg); overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } /* Hero images (large, prominent) */ .hero-image { width: 100%; height: auto; min-height: 300px; /* max-height: 500px; */ object-fit: cover; transition: transform var(--transition-speed) ease; } /* Infographic images (preserve aspect ratio) */ .infographic-image { width: 100%; height: auto; object-fit: contain; /* Don't crop infographics */ background: var(--surface); /* Background for letterboxing */ } /* Ensure picture element takes full width */ .image-container picture { display: block; width: 100%; } /* mission page image container */ .mission-hero { width: 100%; max-height: 60vh; overflow: hidden; margin-bottom: 5rem; } .mission-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ============================================================ * 7. PAGE LAYOUT * ============================================================ */ /* ============================================================ 7.1 Common Page Elements (Body, Header, Footer) ========================================================== */ /* Core Layout Structure & Global Styles */ body { display: flex; flex-direction: column; min-height: 100svh; font-family: var(--font-body); font-size: var(--font-size-base); line-height: 1.6; color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Main Content Area */ .page-main { flex: 1; padding: var(--space-xl) 0; } .page-main .container { text-align: center; } /* ============================================================ 7.1 HEADER & FOOTER (CONSOLIDATED) ========================================================== */ /* === HEADER === */ .site-header { min-height: var(--header-height); background-color: var(--header-bg); color: var(--header-text); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-md); position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow-sm); padding-top: env(safe-area-inset-top); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); } /* === FOOTER === */ .site-footer { background-color: var(--footer-bg); color: var(--brand); padding: var(--space-2xl) 0; text-align: center; } .site-footer .container { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); } /* Ensure all footer text elements are lime */ .site-footer h2, .site-footer p { color: var(--brand); } /* === FOOTER COMPONENTS === */ .email-signup { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); margin-bottom: var(--space-2xl); } .footer-head { font-family: var(--font-heading); } .signup-form { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; max-width: 400px; width: 100%; } .email-input { background: var(--brand); color: var(--header-bg); border: 1px solid var(--brand); box-shadow: var(--shadow-xs); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); text-align: center; transition: all var(--transition-speed) var(--easing-standard); } .email-input::placeholder { color: var(--header-bg); } .email-input:hover, .email-input:focus { outline: none; border-color: var(--accent); background: var(--accent); color: var(--header-bg); transform: translateY(-2px); } .email-input:hover::placeholder, .email-input:focus::placeholder { color: var(--header-bg); } .email-input:focus, .email-input:not(:placeholder-shown) { text-align: left; } /* footer button variant (to avoid css conflicts in dark mode */ .btn-footer { /* Base Structure */ display: inline-flex; align-items: center; justify-content: center; padding: var(--space-sm) var(--space-lg); font: 500 var(--font-size-base) var(--font-body); border-radius: var(--radius-md); cursor: pointer; transition: transform 0.2s ease, background-color 0.2s ease; /* Grounded Branding (Ignore Global Theme) */ background-color: var(--brand); color: var(--header-bg); border: none; box-shadow: var(--shadow-sm); } .btn-footer:hover { background-color: var(--accent); transform: translateY(-2px); /* The shift up */ box-shadow: var(--shadow-lg); } .media-links { font-size: var(--font-size-md); margin-bottom: var(--space-2xl); color: var(--brand); } .media-links h2 { color: var(--brand); } .media-group { display: flex; gap: var(--space-md); justify-content: center; margin-bottom: var(--space-sm); flex-wrap: wrap; } .media-group a { color: var(--brand); transition: all var(--transition-speed) var(--easing-standard); } .media-group a:hover { color: var(--accent); transform: scale(1.05); text-decoration: underline; } .contact-section h3 { color: var(--brand); } .contact-section a { color: var(--brand); transition: all var(--transition-speed) var(--easing-standard); display: inline-block; margin-bottom: var(--space-md); } .contact-section a:hover { color: var(--accent); transform: scale(1.05); } .creator { display: inline-block; font-size: var(--font-size-xs); } .creator p { font-size: var(--font-size-xs); margin-bottom: 0; color: var(--brand); } /* ===================================================== 7.2 HOME PAGE ================================================== */ .page-main-index { flex: 1; padding: var(--space-xl) 0; min-height: 80vh; background: var(--bg); /* Default fallback */ background-position: center; background-size: cover; background-repeat: no-repeat; display: flex; align-items: center; position: relative; /* Setup for overlays if needed */ } html[data-site="misfit"] .page-main-index { background-image: url("/assets/images/main/woman_and_cyborg.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } html[data-site="misfit"] .page-main-index::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(30, 38, 24, 0.4), rgba(30, 38, 24, 0.85) ); z-index: 0; } html[data-site="misfit"] .page-main-index .container { position: relative; z-index: 1; } .page-main-index .container { text-align: center; } .approach-categories { display: grid; gap: var(--space-xl); margin-top: var(--space-2xl); grid-template-columns: 1fr; } /* Spacing */ .about-hero { margin-top: 0; } /* .about-mission, */ .about-approach, .about-philosophy, .about-community { margin-top: var(--space-2xl); /* 4rem spacing between sections */ } /* ================================================ 7.3 Content Pages ============================================== */ /* Content Grid for Three categorys */ .content-grid { display: grid; gap: var(--space-xl); margin-top: var(--space-2xl); grid-template-columns: 1fr; } /* ============================== 7.4 SIGNUP PAGE =========================== */ /* Enhanced FAQ hover effects */ .faq-item summary { transition: all var(--transition-speed); } .faq-item summary:hover { transition: scale(1.1); } .faq-item[open] summary { background: var(--header-bg) !important; color: var(--header-text); } .email-input-light { /* Match button sizing and display */ display: inline-flex; align-items: center; padding: var(--space-sm) var(--space-lg); /* Same as .btn */ /* Bigger, darker font to match button */ font: 500 var(--font-size-base) var(--font-body); /* Same as .btn */ color: var(--text); /* Dark text instead of footer-bg */ /* Enhanced visual presence */ background: var(--surface); border: 1px solid color-mix(in oklab, var(--header-bg), white 80%); border-radius: var(--radius-md); box-shadow: var(--shadow-md); /* Stronger shadow */ /* Behavior */ text-align: center; transition: all var(--transition-speed) var(--easing-standard); /* Ensure it takes up appropriate width */ min-width: 250px; flex: 1; /* If in a flex container */ } .email-input-light:hover, .email-input-light:focus { outline: none; border: solid 1px var(--header-bg); color: var(--text); box-shadow: var(--shadow-lg); transform: translateY(-2px); } /* Make sure placeholder is visible */ .email-input-light::placeholder { color: var(--muted); opacity: 1; } /* ============================================================================= 7.5 ABOUT PAGE LAYOUT ============================================================================= */ /* Page-level container and alignment */ .about-gus { text-align: center; max-width: var(--container-max); margin: 0 auto; } .about-gus h2 { text-align: center; margin-bottom: var(--space-xl); color: var(--text); } /* Reusable section container */ .content-section { margin-bottom: var(--space-2xl); } /* Sub-headings within content sections */ .content-section h3 { color: var(--text); margin-top: var(--space-xl); margin-bottom: var(--space-md); font-size: var(--font-size-xl); } /* Image + text container */ .image-text-container { display: flex; gap: var(--space-xl); align-items: center; margin-bottom: var(--space-2xl); } .image-container { flex-shrink: 0; max-width: 300px; } .photo { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } .personal-intro { flex: 1; margin-bottom: 0; } .bio-list { list-style: none; /* Removes the bullets */ padding-left: 0; /* Removes the default indentation */ margin-bottom: var(--space-lg); } /* Community CTA buttons (retains existing responsive code) */ .community-cta { text-align: center; margin-top: var(--space-2xl); display: flex; flex-direction: column; align-items: center; gap: var(--space-md); } /* grid layout for publications */ .publications-grid { display: grid; gap: var(--space-md); /* Tighter than main content cards */ margin-top: var(--space-lg); grid-template-columns: 1fr; /* Single column on mobile */ } /* ============================================================================= 7.6 ARTICLE PAGE LAYOUT & STYLING ============================================================================= */ /* Page-level container for articles */ .article-content { max-width: 800px; margin: 0 auto; padding: 0 var(--space-md); } .article-content p { text-align: left; } /* Hero image and caption */ .article-hero { margin-block: var(--space-xl) var(--space-2xl); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); } .hero-image { width: 100%; height: auto; object-fit: cover; transition: transform var(--transition-speed) ease; } .article-hero--dimmed { position: relative; } .article-hero--dimmed::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(30, 38, 24, 0.3), rgba(30, 38, 24, 0.5) ); border-radius: var(--radius-lg); } .hero-caption { padding: var(--space-md) var(--space-lg); font-style: italic; font-size: var(--font-size-sm); color: var(--muted); } /* Article metadata (date, reading time) */ .article-meta { display: flex; justify-content: center; gap: var(--space-lg); color: var(--muted); font-size: var(--font-size-sm); margin-bottom: var(--space-md); } /* Thematic sections within the article */ .article-section { margin-bottom: var(--space-2xl); text-align: left; } .article-section h2, h3, h4 { color: var(--brand); } /* Table of Contents */ .TOC { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); margin-block: var(--space-2xl); box-shadow: var(--shadow-sm); text-align: center; } .TOC h3 { color: var(--brand); font-weight: 700; margin-bottom: var(--space-sm); } .TOC ul { list-style-type: none; padding: 0; margin: 0; } .TOC li a { display: inline-block; padding: var(--space-xs) 0; color: var(--text); font-family: var(--font-body); font-size: var(--font-size-md); transform: all var(--transition-speed) ease; } .TOC li a:hover { text-decoration: underline; transform: scale(1.02); color: var(--accent); } .TOC h4 { color: var(--brand); margin: 0; } /* Related articles section */ .related-articles-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); margin-top: var(--space-3xl); margin-bottom: var(--space-2xl); } .related-articles-title { color: var(--brand); font-size: var(--font-size-xl); font-weight: 700; text-align: center; margin-bottom: var(--space-md); } .related-articles-list { list-style-type: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .related-articles-list a { display: block; font-size: var(--font-size-md); color: var(--text); text-decoration: underline; } .article-quote { /* Center the entire quote block */ margin: 2rem auto; max-width: 600px; text-align: center; /* Visual distinction */ font-style: italic; font-size: 1.1em; line-height: 1.6; /* Subtle visual separation */ border-left: 3px solid var(--accent-color); padding-left: 1.5rem; color: #c7a378; } .article-quote p, .article-content .article-quote p { margin-bottom: 0.5rem; font-weight: 300; /* Lighter weight for elegance */ text-align: center; color: #c7a378 !important; } .article-quote cite { display: block; font-style: normal; font-weight: 700; font-size: 0.9em; color: #c7a378 !important; margin-top: 0.5rem; text-align: center; } /* === Inline Prose Links === */ .article-content p a, article p a { color: var(--brand); text-decoration: none; transition: color var(--transition-speed) var(--easing-standard); } .article-content p a:hover, article p a:hover { color: var(--accent); text-decoration: underline; } /* reference links */ .reference-links a { display: block; font-size: var(--font-size-md); color: var(--brand); transition: transform var(--transition-speed) var(--easing-standard), color var(--transition-speed) var(--easing-standard); } .reference-links a:hover { color: var(--brand); text-decoration: underline; transform: scale(1.01); } /* ============================================================ 12. LANDING PAGE SPECIFIC STYLES ============================================================ */ /* 1. Hero Section: The "Magazine Cover" */ .hero-landing { position: relative; background-color: var(--header-bg); background-image: url("../assets/images/kettlebell_image_1.webp"); background-size: cover; background-position: center; min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 1rem; margin-bottom: 3rem; border-radius: 0 0 16px 16px; overflow: hidden; } h3.main { font-size: var(--font-size-xl); margin-bottom: 0; line-height: 1.4; color: var(--text); } .authority-banner { text-align: center; padding: 2rem 2rem 0.5rem 2rem; margin-bottom: 0; border: none; } .theme-toggle { margin-top: 0.5rem !important; } /* Theme toggle button - darker text for readability */ html[data-site="wiseseed"] .theme-toggle { color: var(--text); border-color: var(--text); } html[data-site="wiseseed"] .theme-toggle:hover { color: var(--brand); border-color: var(--brand); } /* Dark Overlay so text pops against the image */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(29, 35, 22, 0.3), rgba(29, 35, 22, 0.8) ); z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: 800px; color: var(--text); } .hero-title { font-family: "TC Jimmy Serif PRO", Georgia, serif; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.1; margin-bottom: 1rem; text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); } .hero-subtitle { font-family: "Inter", sans-serif; font-size: clamp(1.1rem, 2vw, 1.5rem); margin-bottom: 2.5rem; opacity: 0.9; font-weight: 300; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } /* 2. Value Props Grid (The Pillars) */ .pillars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-bottom: 4rem; text-align: left; } .pillar-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: transform 0.2s ease; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0; overflow: hidden; } .pillar-image { width: 100%; height: 220px; object-fit: cover; margin: 0; border-radius: 0; display: block; } .pillar-card > *:not(.pillar-image) { padding-left: 1.5rem; padding-right: 1.5rem; } .pillar-head { margin-top: 1.5rem; font-family: "TC Jimmy Serif PRO", serif; font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--text); } .pillar-card p { margin-bottom: 1.5rem; } .pillar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--text); } .pillar-icon { font-size: 2rem; margin-bottom: 1rem; display: block; } .explore { color: var(--text); font-weight: regular; text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; display: inline-block; cursor: pointer; margin-bottom: 1.5rem; } .explore:hover { transform: scale(1.2); color: var(--brand); } /* 3. Scientific Authority Section */ .authority-text { font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.9rem; color: var(--muted); } /* =========================================== MEDIA QUERIES (CONSOLIDATED) ======================================== */ /* === BASE LAYOUT & CONTAINERS === */ @media (min-width: 768px) { .container { padding: 0 var(--space-lg); } .page-main { padding: var(--space-2xl) 0; } } @media (min-width: 1024px) { .container { padding: 0 var(--space-xl); } } /* === NAVIGATION === */ @media (min-width: 768px) { .desktop-nav { display: flex; } .menu-toggle { display: none; } } @media (max-width: 767px) { .menu-toggle { display: flex; } .desktop-nav { display: none; } } @media (min-width: 768px) { .nav-links a { font-size: var(--font-size-4xl); } } @media (min-width: 1024px) { .category-nav { gap: var(--space-xl); } } /* === CONTENT GRIDS === */ @media (min-width: 768px) { .content-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .content-grid { grid-template-columns: repeat(3, 1fr); } } /* === IMAGE CONTAINER === */ /* Responsive behavior */ .image-container { width: 100%; /* Ensures the container takes up the full width of its parent */ max-width: 800px; /* Optional: you can set a max-width to match your article container */ margin-left: auto; margin-right: auto; /* This centers the block-level element */ } .hero-image { display: block; width: 100%; /* Ensures the image fills the container's width */ height: auto; /* Maintains the image's aspect ratio */ } /* === HOMEPAGE === */ @media (min-width: 768px) { .approach-categories { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .approach-categories { grid-template-columns: repeat(3, 1fr); } } /* === SEARCH PAGE === */ .search-input { min-width: 0; } @media (max-width: 480px) { .container { padding-inline: clamp(16px, 6vw, 32px); } .search-interface { margin-block-start: var(--space-xl); padding-inline: var(--space-md); } .search-bar { flex-direction: column; align-items: stretch; gap: var(--space-sm); } .search-input, .search-btn { width: 100%; } .content-card--compact .card-content { padding: var(--space-md); } .content-card--compact .card-title { font-size: var(--font-size-lg); } .content-card--compact .card-excerpt { font-size: var(--font-size-base); } } @media (min-width: 481px) and (max-width: 767px) { .search-bar { flex-direction: row; align-items: center; gap: var(--space-sm); } .search-btn, .search-input { padding-block: calc(var(--space-sm) + 2px); } } /* === ABOUT PAGE === */ @media (min-width: 768px) { .publications-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } } @media (min-width: 1024px) { .publications-grid { grid-template-columns: 1fr; } } @media (min-width: 769px) { .community-cta { flex-direction: row; justify-content: center; gap: var(--space-lg); } } @media (max-width: 768px) { .image-text-container { flex-direction: column; text-align: center; gap: var(--space-lg); } .about-gus { text-align: left; padding: 0 var(--space-md); } .cta-buttons { flex-direction: column; align-items: center; } .cta-buttons .btn { width: 100%; max-width: 300px; } } @media (max-width: 480px) { .community-cta .btn { width: 100%; max-width: 280px; padding: var(--space-md) var(--space-lg); } } /* === ARTICLE PAGE === */ @media (max-width: 768px) { .article-hero { margin: 1.5rem 0 2rem 0; border-radius: 6px; } .hero-image { max-height: 250px; } .hero-caption { padding: 0.8rem 1rem; font-size: 0.85rem; } .article-content { flex-direction: column; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-lg); } } @media (min-width: 1200px) { .article-hero { max-width: 800px; margin-left: auto; margin-right: auto; } } /* === FOOTER === */ @media (max-width: 768px) { .footer-bottom-row { flex-direction: column; gap: var(--space-lg); } } /* === ACCESSIBILITY === */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ============================================================ 8. MISFIT / WILD SCHOOL COMPATIBILITY UTILITIES ============================================================ */ /* 1. Hero Typography (Restores the massive impact text) */ .hero h1 { font-size: var(--font-size-hero-h1); line-height: 1.1; margin-bottom: var(--space-sm); /* color: var(--brand); */ } .hero h2 { font-size: var(--font-size-hero-h2); font-weight: 400; color: var(--header-text); /* Unity Green for the tagline */ margin-bottom: var(--space-md); line-height: 1.3; color: var(--header-text); } /* 2. Back Link (Restores the navigation styling) */ .back-link { display: inline-block; font-family: var(--font-heading); font-size: var(--font-size-lg); color: var(--brand); text-decoration: none; margin-bottom: var(--space-lg); transition: transform var(--transition-speed) ease; } .back-link:hover { transform: translateX(-4px); color: var(--accent); text-decoration: none; } /* 3. Brand Compatibility */ .brand-unity { color: var(--brand); /* Ensures 'unity' is green */ } /* 4. Brand Identity Override */ /* Base text is Crimson, with brand-unity span being green */ html[data-site="misfit"] .brand, html[data-site="wiseseed"] .brand { color: var(--accent); } /* ============================================================ UNIFIED BUTTON OVERRIDES (The "Glowing Ghost" Style) ============================================================ */ /* 1. Standard & Primary Buttons */ html[data-site="misfit"] .btn, html[data-site="misfit"] .btn-primary, html[data-site="wiseseed"] .btn, html[data-site="wiseseed"] .btn-primary, html[data-theme="dark"] .btn, html[data-theme="dark"] .btn-primary { /* Typography: Reinstating the "Misfit" Font Stack */ font-family: var(--font-heading); font-weight: 400; text-transform: lowercase; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem); letter-spacing: 0.02em; /* Colors: Dark background, subtle border */ background-color: var(--bg); color: var(--brand); /* Unity Green text */ border: 1px solid var(--border); /* Subtle olive border initially */ border-radius: 6px; /* Specific Misfit radius */ /* Physics */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; } /* Hover State: The Green Glow */ html[data-site="misfit"] .btn:hover, html[data-site="misfit"] .btn-primary:hover, html[data-site="wiseseed"] .btn:hover, html[data-site="wiseseed"] .btn-primary:hover, html[data-theme="dark"] .btn:hover, html[data-theme="dark"] .btn-primary:hover { background-color: var(--bg); /* Keep dark background */ border-color: var(--brand); color: var(--brand); /* The Misfit Glow Effect */ box-shadow: 0 0 8px color-mix(in oklab, var(--brand) 35%, transparent 65%); transform: translateY(-2px); } /* Active State: The Push */ html[data-site="misfit"] .btn:active, html[data-site="misfit"] .btn-primary:active, html[data-site="wiseseed"] .btn:active, html[data-site="wiseseed"] .btn-primary:active, html[data-theme="dark"] .btn:active, html[data-theme="dark"] .btn-primary:active { transform: translateY(-1px); } /* Focus State: Accessibility */ html[data-site="misfit"] .btn:focus-visible, html[data-site="misfit"] .btn-primary:focus-visible, html[data-site="wiseseed"] .btn:focus-visible, html[data-site="wiseseed"] .btn-primary:focus-visible, html[data-theme="dark"] .btn:focus-visible, html[data-theme="dark"] .btn-primary:focus-visible { outline: 2px solid color-mix(in oklab, var(--brand) 60%, white 10%); outline-offset: 2px; } /* 2. Return to Top Button (Floating Action Button) */ html[data-site="misfit"] .return-btn, html[data-site="wiseseed"] .return-btn, html[data-theme="dark"] .return-btn { background-color: var(--bg); color: var(--brand); border: 1px solid var(--border); border-radius: 50%; /* Circular for FAB */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } html[data-site="misfit"] .return-btn:hover, html[data-site="wiseseed"] .return-btn:hover, html[data-theme="dark"] .return-btn:hover { border-color: var(--brand); color: var(--brand); background-color: var(--bg); box-shadow: 0 0 8px color-mix(in oklab, var(--brand) 35%, transparent 65%); transform: translateY(-2px); } /* Global Headings */ html[data-site="misfit"] h1, html[data-site="misfit"] h2, html[data-site="misfit"] h3, html[data-site="misfit"] h4, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: var(--brand); } /* ============================================================ DARK MODE CARD OVERRIDES (The "Data Terminal" Style) ============================================================ */ /* 1. Base Card Styling */ html[data-site="misfit"] .content-card, html[data-theme="dark"] .content-card { /* Match the Button Aesthetic */ background-color: var(--bg); /* Dark Olive background */ border: 1px solid var(--border); /* Subtle olive border */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; /* Reset generic card styles if needed */ color: var(--text); } /* 2. Hover State (The Green Glow) */ html[data-site="misfit"] .content-card:hover, html[data-theme="dark"] .content-card:hover { background-color: var(--bg); /* Ensure it stays dark */ border-color: var(--brand); /* Bright Green Border */ /* The Misfit Glow (Matches buttons exactly) */ box-shadow: 0 0 15px color-mix(in oklab, var(--brand) 25%, transparent 75%); transform: translateY(-2px); } /* 3. Text & Content Specifics */ html[data-site="misfit"] .content-card .card-title, html[data-theme="dark"] .content-card .card-title { color: var(--brand); /* Make the Title Green */ transition: color 0.2s ease; } html[data-site="misfit"] .content-card .publication-journal, html[data-theme="dark"] .content-card .publication-journal { color: var(--muted); /* Keep metadata subtle */ } html[data-site="misfit"] .card-title:hover, html[data-theme="dark"] .card-title:hover { color: var(--accent); text-decoration: none; } /* 4. Pillar Cards (Landing Page) */ html[data-site="misfit"] .pillar-card, html[data-theme="dark"] .pillar-card { background-color: var(--bg); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; } html[data-site="misfit"] .pillar-card:hover, html[data-theme="dark"] .pillar-card:hover { background-color: var(--bg); border-color: var(--brand); box-shadow: 0 0 15px color-mix(in oklab, var(--brand) 25%, transparent 75%); transform: translateY(-4px); } html[data-site="misfit"] .pillar-head, html[data-theme="dark"] .pillar-head { color: var(--brand); } html[data-site="misfit"] .explore, html[data-theme="dark"] .explore { color: var(--brand); } html[data-site="misfit"] .explore:hover, html[data-theme="dark"] .explore:hover { color: var(--accent); } /* 5. PWA Install Button */ html[data-site="misfit"] .pwa_install_btn, html[data-theme="dark"] .pwa_install_btn { background-color: var(--bg); color: var(--brand); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; } html[data-site="misfit"] .pwa_install_btn:hover, html[data-theme="dark"] .pwa_install_btn:hover { background-color: var(--bg); border-color: var(--brand); color: var(--brand); box-shadow: 0 0 8px color-mix(in oklab, var(--brand) 35%, transparent 65%); transform: translateY(-2px); } /* 6. Dark Button Variant (for dark-background contexts like hero/footer) */ .btn-dark { background-color: var(--header-bg) !important; color: var(--brand) !important; border: 1px solid #3a4430 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; } .btn-dark:hover { background-color: var(--header-bg) !important; border-color: var(--brand) !important; color: var(--brand) !important; box-shadow: 0 0 8px color-mix(in oklab, var(--brand) 35%, transparent 65%); transform: translateY(-2px); } /* Search Bar */ html[data-site="misfit"] .search-input, html[data-theme="dark"] .search-input { background-color: var(--bg); /* Dark Olive background */ border: 1px solid var(--border); /* Subtle olive border */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; color: var(--text); } html[data-site="misfit"] .search-input::placeholder, html[data-theme="dark"] .search-input::placeholder { color: var(--text); /* Sets it to Gold/Sand (#C7A378) */ opacity: 1; /* IMPORTANT: Forces full visibility (browsers often dim placeholders) */ } html[data-site="misfit"] .search-input:hover, html[data-theme="dark"] .search-input:hover { background-color: var(--bg); /* Ensure it stays dark */ border-color: var(--brand); /* Bright Green Border */ /* The Misfit Glow (Matches buttons exactly) */ box-shadow: 0 0 15px color-mix(in oklab, var(--brand) 25%, transparent 75%); transform: translateY(-2px); } html[data-site="misfit"] .search-btn, html[data-theme="dark"] .search-btn { background-color: var(--bg); /* Dark Olive background */ border: 1px solid var(--border); /* Subtle olive border */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; } html[data-site="misfit"] .search-btn:hover, html[data-theme="dark"] .search-btn:hover { background-color: var(--bg); /* Ensure it stays dark */ border-color: var(--brand); /* Bright Green Border */ /* The Misfit Glow (Matches buttons exactly) */ box-shadow: 0 0 15px color-mix(in oklab, var(--brand) 25%, transparent 75%); transform: translateY(-2px); } /* Hamburger Menu Icon */ html[data-site="misfit"] .menu-icon, html[data-site="misfit"] .menu-icon::before, html[data-site="misfit"] .menu-icon::after, html[data-theme="dark"] .menu-icon, html[data-theme="dark"] .menu-icon::before, html[data-theme="dark"] .menu-icon::after { background-color: var(--brand) !important; /* Unity Green - force override */ } html[data-site="misfit"] .menu-toggle:hover .menu-icon, html[data-site="misfit"] .menu-toggle:hover .menu-icon::before, html[data-site="misfit"] .menu-toggle:hover .menu-icon::after, html[data-theme="dark"] .menu-toggle:hover .menu-icon, html[data-theme="dark"] .menu-toggle:hover .menu-icon::before, html[data-theme="dark"] .menu-toggle:hover .menu-icon::after { background-color: var(--accent) !important; /* Stay green on hover */ } /* Nav menu settings */ html[data-site="misfit"] .nav-close, html[data-theme="dark"] .nav-close { color: var(--brand); /* CHANGE TO var(--brand) */ } html[data-site="misfit"] .nav-close:hover, html[data-theme="dark"] .nav-close:hover { color: var(--accent); } html[data-theme="dark"] .nav-links a { color: var(--brand); } html[data-site="misfit"] .nav-links a:hover, html[data-theme="dark"] .nav-links a:hover { color: var(--accent); text-decoration: none; }