/* ========================================================================== Universalvani — shared site design system Nav, footer, and reusable components used across every page. Palette/typography match the standing brand system: warm maroon/gold, serif typography, timeless (not trend-driven) — see universalvani-design and universalvani-landing-page skills. ========================================================================== */ :root{ --maroon:#6b1f2a; --maroon-deep:#3d1015; --gold:#c9973f; --gold-light:#e8bd6f; --cream:#fdf8ef; --ink:#2a1810; --ink-soft:#6b4a3a; --line:#ecdfc7; --panel:#fffaf1; --green:#1f6b3a; --maxw:1080px; } /* Sitewide alternate theme — Clarity Blue + Compassion Sage, from the Visual Brand Manual (UV-VLB-001). Applied via a data-theme attribute on , set by assets/js/theme.js (admin default + visitor override). Overrides only the two structural brand colors — neutrals (cream/ink/ line/panel/green) stay shared between both themes, per UV-DEC-001. Decided as a real, visitor-selectable theme via UV-FTR-001. */ [data-theme="sage-blue"]{ --maroon:#526F86; --maroon-deep:#2B3B47; --gold:#6F7D68; --gold-light:#96A48D; } /* ---------- Skip link (accessibility) ---------- */ .skip-link{ position:absolute; left:-999px; top:0; z-index:9999; background:var(--maroon); color:#fff; padding:12px 20px; border-radius:0 0 6px 0; font-family:Georgia,'Times New Roman',serif; text-decoration:none; font-size:14px; } .skip-link:focus{ left:0; } /* ---------- Site header / nav ---------- */ .site-header{ background:var(--maroon-deep); border-bottom:1px solid #5a1620; position:sticky; top:0; z-index:500; } .site-header .nav-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; height:64px; } .site-header .brand-link{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; /* lets this flex child actually shrink instead of the browser's default min-width:auto forcing it to keep its full content width — a prerequisite for the .brand-word-wrap ellipsis safety net below to ever kick in, rather than the text silently overflowing into the search icon next to it on narrow screens. */ } .site-header .brand-link img{ width:34px; height:34px; display:block; flex:none; } .site-header .brand-link span{ font-family:Georgia,'Times New Roman',serif; font-weight:bold; letter-spacing:1px; font-size:15px; } .site-header .brand-link .brand-word{ color:var(--cream); } .site-header .brand-link .brand-word-accent{ color:#FF7722; } .site-header .brand-link .brand-word-wrap{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; /* Safety net: "UniversalVani" is one unbroken word (no space), so on a narrow phone where the header's icon row (search/cart/login/hamburger) doesn't leave enough room, the browser cannot wrap it onto a second line — without this it silently overflows and paints over the search icon instead. This makes that impossible: worst case it truncates with an ellipsis, never overlaps a sibling. The @media rules below keep this from ever actually triggering on real phone widths. */ } .site-nav{ display:flex; align-items:center; gap:4px; } .site-nav a, .site-nav .nav-dropdown > button{ font-family:Georgia,'Times New Roman',serif; font-size:14.5px; color:#f0ddc8; text-decoration:none; padding:10px 12px; border-radius:5px; background:none; border:none; cursor:pointer; display:inline-block; } .site-nav a:hover, .site-nav .nav-dropdown > button:hover{ color:var(--gold-light); background:rgba(255,255,255,0.05); } .site-nav .nav-cta{ background:var(--gold); color:#2a1305; font-weight:bold; margin-left:6px; padding:9px 16px; border-radius:5px; } .site-nav .nav-cta:hover{ background:var(--gold-light); color:#2a1305; } .nav-dropdown{ position:relative; } .nav-dropdown-menu{ display:none; position:absolute; top:100%; left:0; min-width:200px; background:var(--cream); border:1px solid var(--line); border-radius:6px; box-shadow:0 12px 30px rgba(0,0,0,0.25); padding:6px; margin-top:6px; z-index:50; /* defensive: guarantee this sits above page content (e.g. the checkout page's "Back to Universalvani" link, which sits close beneath the topbar) rather than relying on paint-order alone across every page this partial is dropped into. */ } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu{ display:block; } .nav-dropdown-menu a{ display:block; padding:9px 12px; color:var(--ink); font-size:14px; border-radius:4px; } .nav-dropdown-menu a:hover{ background:var(--panel); color:var(--maroon); } .nav-search-btn{ background:none; border:none; color:#f0ddc8; cursor:pointer; padding:9px; border-radius:5px; display:flex; align-items:center; } .nav-search-btn:hover{ color:var(--gold-light); background:rgba(255,255,255,0.05); } .uv-auth-slot{ display:flex; align-items:center; margin-left:4px; } .uv-auth-link{ font-family:Georgia,'Times New Roman',serif; font-size:13.5px; font-weight:bold; color:var(--gold-light); text-decoration:none; padding:8px 14px; border:1px solid rgba(232,189,111,0.4); border-radius:5px; white-space:nowrap; background:none; cursor:pointer; } .uv-auth-link:hover{ background:rgba(255,255,255,0.08); } .uv-auth-dropdown{ position:relative; } .uv-auth-dropdown .nav-dropdown-menu{ left:auto; right:0; } /* Account menu is click-only, not hover — hovering toward it from the avatar used to open it via the shared .nav-dropdown:hover rule, then close again mid-way through the gap between button and menu before a click could land. Cancel the hover trigger here; .open (JS-toggled on click) is the only thing that shows this specific menu. */ .uv-auth-dropdown:hover .nav-dropdown-menu{ display:none; } .uv-auth-dropdown.open .nav-dropdown-menu{ display:block; } .uv-avatar{ width:56px; height:56px; border-radius:50%; flex:none; overflow:hidden; background:var(--gold); color:#2a1305; border:1px solid rgba(255,255,255,0.25); font-family:Georgia,'Times New Roman',serif; font-size:22px; font-weight:bold; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; line-height:1; } .uv-avatar img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; } .uv-avatar:hover{ background:var(--gold-light); } .uv-auth-menu{ min-width:220px; } /* Light-background variant — checkout/success pages have a cream header, not the dark maroon nav bar, so the default gold-on-transparent "Log in" link (designed for the dark nav) would be low-contrast there. The avatar circle itself already works fine on either background. */ .uv-auth-slot.on-light .uv-auth-link{ color:var(--maroon); border-color:rgba(107,31,42,0.35); } .uv-auth-slot.on-light .uv-auth-link:hover{ background:rgba(107,31,42,0.06); } .uv-auth-menu-id{ font-family:Georgia,'Times New Roman',serif; font-size:12px; color:var(--ink-soft); padding:6px 12px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; word-break:break-all; } /* Only ever rendered for the one allowlisted admin email (see auth-nav.js) — a subtle top divider + gold color sets it apart from the ordinary account links above it, without looking like a warning. */ .uv-auth-admin-link{ border-top:1px solid var(--line); margin-top:4px; padding-top:10px !important; color:var(--gold) !important; font-weight:bold; } /* ---------- Cart icon + mini-cart (Feature 2) ---------- */ .uv-cart-slot{ display:flex; align-items:center; } .uv-cart-dropdown{ position:relative; } .uv-cart-btn{ position:relative; background:none; border:none; color:#f0ddc8; cursor:pointer; padding:9px; border-radius:5px; display:flex; align-items:center; } .uv-cart-btn:hover{ color:var(--gold-light); background:rgba(255,255,255,0.05); } .uv-cart-badge{ position:absolute; top:3px; right:1px; min-width:16px; height:16px; padding:0 4px; background:var(--gold); color:#2a1305; border-radius:999px; font-size:10px; font-weight:bold; display:flex; align-items:center; justify-content:center; line-height:1; font-family:Georgia,'Times New Roman',serif; } /* Click-only, matching .uv-auth-dropdown's own override just above. */ .uv-cart-dropdown:hover .nav-dropdown-menu{ display:none; } .uv-cart-dropdown.open .nav-dropdown-menu{ display:block; } .uv-cart-menu{ min-width:280px; max-width:320px; left:auto; right:0; padding:8px; } .uv-cart-item{ display:flex; gap:8px; padding:8px 4px; border-bottom:1px solid var(--line); align-items:center; } .uv-cart-item:last-of-type{ border-bottom:none; } .uv-cart-item img{ width:32px; height:44px; object-fit:cover; border-radius:2px; flex:none; background:var(--line); } .uv-cart-item-info{ flex:1; min-width:0; } .uv-cart-item-title{ font-size:12.5px; color:var(--ink); font-weight:bold; line-height:1.3; } .uv-cart-item-meta{ font-size:11px; color:var(--ink-soft); margin-top:2px; } .uv-cart-item-remove{ background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:13px; padding:2px 6px; flex:none; } .uv-cart-item-remove:hover{ color:#b5471f; } .uv-cart-empty{ padding:16px 10px; text-align:center; font-size:12.5px; color:var(--ink-soft); } .uv-cart-subtotal{ display:flex; justify-content:space-between; padding:10px 6px 2px; font-size:13px; font-weight:bold; color:var(--ink); border-top:1px solid var(--line); margin-top:2px; } .uv-cart-view-btn{ display:block; text-align:center; margin:8px 4px 4px; background:var(--maroon); color:#fff; padding:9px; border-radius:6px; font-size:13px; font-weight:bold; text-decoration:none; } .uv-cart-view-btn:hover{ background:#4d151c; } .nav-toggle{ display:none; background:none; border:1px solid rgba(255,255,255,0.3); border-radius:5px; color:#f0ddc8; width:40px; height:36px; cursor:pointer; font-size:18px; } @media (max-width:860px){ .site-nav{ display:none; position:absolute; top:64px; left:0; right:0; background:var(--maroon-deep); flex-direction:column; align-items:stretch; border-top:1px solid #5a1620; padding:10px; } .site-nav.open{ display:flex; } .site-nav a, .site-nav .nav-dropdown{ width:100%; } .site-nav .nav-dropdown > button{ width:100%; text-align:left; } .nav-dropdown-menu{ position:static; box-shadow:none; margin-top:2px; display:none; } .nav-dropdown.open .nav-dropdown-menu{ display:block; } .nav-toggle{ display:block; } .nav-cta{ margin-left:0; margin-top:6px; text-align:center; } } /* Narrow-phone header tightening (real bug: on ~360-420px-wide phones, logo + wordmark + search + cart + Log-in/avatar + hamburger genuinely don't all fit at their default sizes — the wordmark used to silently overflow into the search icon as a result. Shrinking each piece a little here is the real fix; the .brand-word-wrap ellipsis above is just the last-resort safety net if a piece is still too tight. */ @media (max-width:480px){ .site-header .nav-wrap{ padding:0 12px; } .site-header .brand-link{ gap:7px; } .site-header .brand-link img{ width:28px; height:28px; } .site-header .brand-link span{ font-size:12.5px; letter-spacing:0.3px; } .nav-search-btn, .uv-cart-btn{ padding:7px; } .uv-auth-slot{ margin-left:2px; } .uv-auth-link{ padding:7px 10px; font-size:12px; } .nav-toggle{ width:34px; height:32px; font-size:16px; } } /* ---------- Site search overlay ---------- */ .search-overlay{ display:none; position:fixed; inset:0; background:rgba(61,16,21,0.92); z-index:900; padding:80px 20px; } .search-overlay.open{ display:block; } .search-overlay .search-box{ max-width:640px; margin:0 auto; background:var(--cream); border-radius:10px; padding:26px; } .search-overlay input[type="search"]{ width:100%; padding:14px 16px; font-size:17px; font-family:Georgia,serif; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); } .search-overlay .search-close{ display:block; margin:0 auto 16px; background:none; border:none; color:#f0ddc8; font-family:Georgia,serif; cursor:pointer; text-align:right; width:100%; font-size:14px; } .search-results{ margin-top:16px; max-height:50vh; overflow-y:auto; } .search-results a{ display:flex; gap:12px; align-items:center; padding:10px; border-radius:6px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line); } .search-results a:hover{ background:var(--panel); } .search-results img{ width:40px; border-radius:3px; flex:none; } .search-results .r-title{ font-weight:bold; font-size:14.5px; } .search-results .r-desc{ font-size:12.5px; color:var(--ink-soft); } .search-empty{ font-size:13.5px; color:var(--ink-soft); text-align:center; padding:14px 0; } /* ---------- Breadcrumbs ---------- */ .breadcrumbs{ max-width:var(--maxw); margin:0 auto; padding:14px 20px 0; font-size:12.5px; color:var(--ink-soft); } .breadcrumbs a{ color:var(--maroon); text-decoration:none; } .breadcrumbs a:hover{ text-decoration:underline; } .breadcrumbs .sep{ margin:0 6px; color:#c9b79a; } /* ---------- Language badges (script-based, not flags) ---------- */ .lang-badges-band{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; } .lang-badges-inner{ max-width:var(--maxw); margin:0 auto; padding:0 20px; text-align:center; } .lang-badges-kicker{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:12px; font-family:Georgia,serif; } .lang-badges-row{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; } .lang-badge{ display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--line); border-radius:30px; padding:10px 20px; text-decoration:none; color:var(--ink); font-family:Georgia,serif; font-size:15px; transition:border-color .15s, transform .15s; } .lang-badge:hover{ border-color:var(--gold); transform:translateY(-1px); } .lang-badge.current{ background:var(--maroon); border-color:var(--maroon); color:var(--gold-light); font-weight:bold; } .lang-badge .script{ font-size:16px; } .lang-badge .native-name{ font-weight:bold; } .lang-badge .eng-name{ font-size:11.5px; color:var(--ink-soft); } .lang-badge.current .eng-name{ color:#e3c9ad; } /* Language dropdown — replaces the button-row above once a book has more than a handful of editions; scales cleanly past 10+ languages, where a row of buttons would wrap awkwardly. English is always listed first and is the standing default for any book that hasn't set a language yet; the option for the page currently being viewed is marked `selected`. */ .lang-select-wrap{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; } .lang-select-label{ font-family:Georgia,serif; font-size:14px; color:var(--ink); } .lang-select{ font-family:Georgia,serif; font-size:15px; color:var(--ink); background-color:#fff; border:1.5px solid var(--line); border-radius:8px; padding:10px 36px 10px 16px; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%236b1f2a' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:14px; min-width:220px; transition:border-color .15s; } .lang-select:hover, .lang-select:focus{ border-color:var(--gold); outline:none; } /* ---------- Wishlist / share / utility row ---------- */ .util-row{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px; } .util-btn{ display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); border-radius:6px; padding:9px 14px; font-family:Georgia,serif; font-size:13.5px; color:var(--ink); cursor:pointer; text-decoration:none; } .util-btn:hover{ border-color:var(--gold); color:var(--maroon); } .util-btn.active{ background:var(--maroon); color:#fff; border-color:var(--maroon); } .util-btn svg{ width:15px; height:15px; } /* ---------- Accordion FAQ ---------- */ .acc-item{ border-bottom:1px solid var(--line); } .acc-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:16px 4px; display:flex; justify-content:space-between; align-items:center; font-family:Georgia,serif; font-size:15px; color:var(--maroon); font-weight:bold; } .acc-q .plus{ font-size:20px; color:var(--gold); transition:transform .2s; flex:none; margin-left:12px; } .acc-item.open .acc-q .plus{ transform:rotate(45deg); } .acc-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; } .acc-a-inner{ padding:0 4px 16px; font-size:14.5px; color:var(--ink-soft); } .acc-item.open .acc-a{ max-height:400px; } /* ---------- Related / recently viewed strips ---------- */ .book-strip{ display:flex; gap:16px; overflow-x:auto; padding:4px 2px 10px; } .book-strip-card{ flex:none; width:150px; text-decoration:none; color:var(--ink); } .book-strip-card img{ width:100%; border-radius:5px; box-shadow:0 8px 20px rgba(0,0,0,0.15); margin-bottom:8px; } .book-strip-card .st-title{ font-family:Georgia,serif; font-size:13px; font-weight:bold; color:var(--maroon); } .book-strip-empty{ font-size:13.5px; color:var(--ink-soft); font-style:italic; padding:14px 0; } /* ---------- Illustrative reader-reaction cards ---------- */ .illustrative-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); font-style:italic; max-width:520px; margin:0 auto 20px; } /* ---------- Footer ---------- */ .site-footer{ background:var(--maroon-deep); color:#e3c9ad; padding:48px 0 0; margin-top:40px; } .footer-inner{ max-width:var(--maxw); margin:0 auto; padding:0 20px; } .footer-grid{ display:flex; flex-wrap:wrap; gap:36px; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,0.12); } .footer-col{ flex:1; min-width:160px; } .footer-col h4{ color:var(--gold-light); font-family:Georgia,serif; font-size:14px; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:14px; } .footer-col ul{ list-style:none; padding:0; margin:0; } .footer-col li{ margin-bottom:9px; } .footer-col a{ color:#e3c9ad; text-decoration:none; font-size:13.5px; } .footer-col a:hover{ color:var(--gold-light); text-decoration:underline; } .footer-col p{ font-size:13.5px; line-height:1.7; color:#dcc3a5; } .footer-newsletter input[type="email"]{ width:100%; padding:10px 12px; border-radius:5px; border:1px solid rgba(255,255,255,0.25); background:rgba(255,255,255,0.06); color:#fff; font-family:Georgia,serif; font-size:13.5px; margin-bottom:8px; } .footer-newsletter button{ width:100%; padding:10px; background:var(--gold); color:#2a1305; border:none; border-radius:5px; font-family:Georgia,serif; font-weight:bold; cursor:pointer; font-size:13.5px; } .footer-newsletter button:hover{ background:var(--gold-light); } .footer-newsletter .fn-note{ font-size:11.5px; color:#c9a888; margin-top:6px; } .footer-social{ display:flex; gap:10px; margin-top:6px; } .footer-social a{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; color:#e3c9ad; text-decoration:none; } .footer-social a:hover{ background:var(--gold); color:#2a1305; } .footer-lang-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; } .footer-lang-row a{ font-size:12.5px; border:1px solid rgba(255,255,255,0.2); border-radius:20px; padding:5px 12px; } .footer-lang-row a.current{ background:var(--gold); color:#2a1305; border-color:var(--gold); font-weight:bold; } /* Dropdown, not a pill row — added 2026-07-16, same scalability reasoning as the book-page and catalog-card language selectors. Dark-theme variant (footer background is --maroon-deep) reusing the newsletter input's translucent-white styling family rather than the light-cream select used elsewhere on the site. */ .footer-lang-select-wrap{ margin-top:4px; } .footer-lang-select{ width:100%; max-width:220px; font-family:Georgia,serif; font-size:13px; color:#fff; background-color:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.25); border-radius:6px; padding:8px 30px 8px 12px; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23e8bd6f' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:12px; } .footer-lang-select:hover, .footer-lang-select:focus{ border-color:var(--gold); outline:none; } /* The native option-list panel can't inherit the dark footer theme cross-browser — force readable dark-on-light text there specifically. */ .footer-lang-select option{ color:#1a1005; background:#fff; } .footer-theme-toggle{ display:flex; gap:6px; margin-top:4px; } .footer-theme-toggle button{ flex:1; padding:7px 8px; font-family:Georgia,serif; font-size:12.5px; color:#e3c9ad; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.25); border-radius:6px; cursor:pointer; transition:background .15s, color .15s; } .footer-theme-toggle button:hover{ border-color:var(--gold); } .footer-theme-toggle button[aria-pressed="true"]{ background:var(--gold); color:#2a1305; border-color:var(--gold); font-weight:bold; } .footer-bottom{ max-width:var(--maxw); margin:0 auto; padding:18px 20px 26px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:12px; color:#c9a888; } .footer-bottom a{ color:#c9a888; text-decoration:none; } .footer-bottom a:hover{ color:var(--gold-light); text-decoration:underline; } .footer-legal-links{ display:flex; flex-wrap:wrap; gap:14px; } /* ---------- Generic page shell (for About/Contact/FAQ/Legal pages) ---------- */ body.page-shell{ font-family:Georgia,'Times New Roman',serif; color:var(--ink); background:var(--cream); margin:0; line-height:1.7; } .page-hero{ background:radial-gradient(ellipse at 50% 0%, var(--maroon) 0%, var(--maroon-deep) 75%); color:var(--cream); padding:44px 0 40px; text-align:center; } .page-hero h1{ color:var(--gold-light); font-weight:normal; font-size:30px; margin:0 0 10px; } .page-hero p{ color:#f0ddc8; max-width:560px; margin:0 auto; font-size:15.5px; } .page-content{ max-width:760px; margin:0 auto; padding:40px 20px 60px; } .page-content h2{ color:var(--maroon); font-size:21px; margin:32px 0 12px; } .page-content h2:first-child{ margin-top:0; } .page-content h3{ color:var(--maroon); font-size:16.5px; margin:20px 0 8px; } .page-content p{ font-size:15px; margin-bottom:14px; } .page-content ul, .page-content ol{ font-size:15px; margin-bottom:14px; padding-left:22px; } .page-content li{ margin-bottom:6px; } .page-content .updated-line{ font-size:12.5px; color:var(--ink-soft); font-style:italic; margin-bottom:24px; } .page-content a{ color:var(--maroon); } /* Contact form */ .contact-form{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:26px; } .contact-form label{ display:block; font-size:13px; font-weight:bold; margin:14px 0 6px; } .contact-form label:first-child{ margin-top:0; } .contact-form input, .contact-form select, .contact-form textarea{ width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:6px; font-family:inherit; font-size:14.5px; background:#fff; box-sizing:border-box; } .contact-form textarea{ min-height:120px; resize:vertical; } .contact-form button{ margin-top:18px; background:var(--maroon); color:var(--gold-light); border:none; padding:13px 26px; border-radius:6px; font-family:inherit; font-weight:bold; cursor:pointer; font-size:15px; } .contact-form button:hover{ background:#4d151c; } .contact-info-grid{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:26px; } .contact-info-card{ flex:1; min-width:200px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px; } .contact-info-card h4{ color:var(--maroon); font-size:14px; margin:0 0 6px; } .contact-info-card p, .contact-info-card a{ font-size:13.5px; color:var(--ink-soft); text-decoration:none; } /* Language chips for languages.html hub page */ .lang-hub-grid{ display:flex; gap:16px; flex-wrap:wrap; } .lang-hub-card{ flex:1; min-width:220px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px; } .lang-hub-card h3{ margin:0 0 4px; color:var(--maroon); } .lang-hub-card .count{ font-size:12.5px; color:var(--gold); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px; } .lang-hub-card ul{ list-style:none; margin:0; padding:0; } .lang-hub-card li{ margin-bottom:8px; } .lang-hub-card a{ text-decoration:none; color:var(--ink); font-size:14px; } .lang-hub-card a:hover{ color:var(--maroon); text-decoration:underline; } /* Leadership / founder cards (About page) */ .person-grid{ display:flex; gap:20px; flex-wrap:wrap; margin:18px 0 10px; } .person-card{ flex:1; min-width:250px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:22px 22px 20px; box-shadow:0 4px 16px rgba(107,31,42,0.05); } .person-card .person-name{ color:var(--maroon); font-size:17px; font-weight:bold; margin-bottom:3px; } .person-card .person-title{ color:var(--gold); font-size:12.5px; text-transform:uppercase; letter-spacing:0.6px; font-weight:bold; margin-bottom:10px; } .person-card .person-focus{ font-size:13px; color:var(--ink-soft); font-style:italic; line-height:1.6; } /* Vision/Mission pillar cards */ .pillar-grid{ display:flex; gap:18px; flex-wrap:wrap; margin:18px 0 10px; } .pillar-card{ flex:1; min-width:210px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px; } .pillar-card h3{ margin:0 0 8px; color:var(--maroon); font-size:15.5px; } .pillar-card p{ font-size:13.5px; color:var(--ink-soft); margin:0; } /* Principles table (Our Foundation page) */ .principles-table{ width:100%; border-collapse:collapse; margin:14px 0 20px; font-size:14px; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; } .principles-table th{ background:var(--panel); color:var(--maroon); text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:0.5px; padding:11px 16px; border-bottom:1px solid var(--line); } .principles-table td{ padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top; } .principles-table tr:last-child td{ border-bottom:none; } .principles-table td:first-child{ color:var(--maroon); font-weight:bold; white-space:nowrap; width:150px; } .principles-table td:last-child{ color:var(--ink-soft); } @media (max-width:600px){ .principles-table, .principles-table thead, .principles-table tbody, .principles-table th, .principles-table td, .principles-table tr{ display:block; } .principles-table thead{ display:none; } .principles-table tr{ border-bottom:1px solid var(--line); padding:10px 16px; } .principles-table tr:last-child{ border-bottom:none; } .principles-table td{ border-bottom:none; padding:2px 0; width:auto; } .principles-table td:first-child{ padding-top:6px; } } /* Social impact commitment callout (Mission page) */ .impact-callout{ background:radial-gradient(ellipse at 50% 0%, var(--maroon) 0%, var(--maroon-deep) 75%); color:var(--cream); border-radius:12px; padding:30px 26px; text-align:center; margin:22px 0 28px; } .impact-callout .impact-figure{ font-size:44px; color:var(--gold-light); font-weight:bold; line-height:1; margin-bottom:6px; } .impact-callout .impact-label{ font-size:13.5px; color:#f0ddc8; max-width:480px; margin:0 auto; } .initiative-grid{ display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 10px; padding:0; list-style:none; } .initiative-grid li{ flex:1 1 220px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px 14px; font-size:13.5px; margin:0; display:flex; align-items:center; gap:10px; } .initiative-grid li::before{ content:"✓"; flex:none; color:var(--green,#1f6b3a); font-weight:bold; } .impact-action-grid{ display:flex; gap:16px; flex-wrap:wrap; margin:18px 0 10px; } .impact-action-card{ flex:1; min-width:200px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px 18px; } .impact-action-card h4{ color:var(--maroon); font-size:14px; margin:0 0 6px; } .impact-action-card p{ font-size:13px; color:var(--ink-soft); margin:0; } .impact-action-card .status-tag{ display:inline-block; margin-top:8px; font-size:10.5px; text-transform:uppercase; letter-spacing:0.5px; color:var(--gold); border:1px solid var(--gold); border-radius:3px; padding:2px 7px; } @media (max-width:600px){ .page-hero h1{ font-size:24px; } .footer-grid{ gap:24px; } } /* ---------- Minimal trust footer (checkout / success pages only) ---------- */ .checkout-trust-footer{ margin-top:22px; padding-top:16px; border-top:1px solid rgba(0,0,0,0.08); display:flex; flex-wrap:wrap; justify-content:center; gap:14px; font-family:Georgia,serif; font-size:11.5px; color:#9a8567; } .checkout-trust-footer a{ color:#9a8567; text-decoration:none; } .checkout-trust-footer a:hover{ color:var(--maroon); text-decoration:underline; } /* ---------- Feedback / testimonial-submission form ---------- */ .star-rating{ display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; } .star-rating input{ position:absolute; opacity:0; width:0; height:0; } .star-rating label{ font-size:30px; line-height:1; color:var(--line); cursor:pointer; transition:color .15s; } .star-rating input:checked ~ label, .star-rating label:hover, .star-rating label:hover ~ label{ color:var(--gold); } .star-rating-required{ font-size:12px; color:var(--ink-soft); margin-top:4px; } .consent-row{ display:flex; align-items:flex-start; gap:9px; margin-top:16px; } .consent-row input[type="checkbox"]{ margin-top:3px; flex:none; width:16px; height:16px; } .consent-row label{ font-size:13px; color:var(--ink-soft); font-weight:normal; margin:0; } .feedback-cta-link{ display:inline-block; margin-top:14px; font-family:Georgia,serif; font-size:13.5px; color:var(--maroon); font-weight:bold; text-decoration:none; } .feedback-cta-link:hover{ text-decoration:underline; } /* ---------- Deliverable 4b — compact free-sample audio player ---------- */ .uv-sample-player{ max-width:480px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 20px; } .uv-sp-title{ font-family:Georgia,serif; font-size:12.5px; font-weight:bold; letter-spacing:0.4px; text-transform:uppercase; color:var(--maroon); margin-bottom:10px; } .uv-sp-voice-toggle{ display:flex; gap:6px; margin-bottom:12px; } .uv-sp-voice-btn{ font-family:Georgia,serif; font-size:12px; font-weight:bold; color:var(--ink-soft); background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:4px 14px; cursor:pointer; } .uv-sp-voice-btn.active{ background:var(--maroon); color:#fff; border-color:var(--maroon); } .uv-sp-row{ display:flex; align-items:center; gap:12px; } .uv-sp-play{ flex:none; width:38px; height:38px; border-radius:50%; border:none; background:var(--maroon); color:#fff; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .uv-sp-play:hover{ background:#4d151c; } .uv-sp-bar{ flex:1; height:6px; border-radius:3px; background:var(--line); position:relative; cursor:pointer; } .uv-sp-fill{ position:absolute; left:0; top:0; height:100%; border-radius:3px; background:var(--gold); width:0%; } .uv-sp-time{ flex:none; font-family:Georgia,serif; font-size:11.5px; color:var(--ink-soft); min-width:36px; text-align:right; } .uv-sp-time-elapsed{ text-align:left; } /* sits before the bar (counts up); .uv-sp-time-remaining after it keeps the base right-aligned countdown style */ .uv-sp-state{ font-family:Georgia,serif; font-size:11.5px; color:var(--ink-soft); margin-top:6px; min-height:14px; } /* "Full Audiobook" link + entitlement-aware upsell — added 2026-07-19 */ .uv-sp-fullbook-row{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); text-align:center; } .uv-sp-fullbook-link{ font-family:Georgia,serif; font-size:13px; font-weight:bold; color:var(--maroon); text-decoration:none; cursor:pointer; } .uv-sp-fullbook-link:hover{ text-decoration:underline; } .uv-sp-upsell{ margin-top:10px; padding:12px 14px; background:var(--panel); border:1px solid var(--gold); border-radius:10px; font-family:Georgia,serif; font-size:12.5px; line-height:1.6; color:var(--ink-soft); text-align:center; } .uv-sp-upsell-btn{ display:inline-block; margin-top:8px; font-family:Georgia,serif; font-size:12px; font-weight:bold; color:#fff; background:var(--maroon); border-radius:14px; padding:6px 14px; text-decoration:none; } .uv-sp-upsell-btn:hover{ background:#4d151c; } .uv-sp-upsell-btn-alt{ background:var(--gold); color:var(--ink); } .uv-sp-upsell-btn-alt:hover{ background:var(--gold-light); }