/* ============================================================= PARASHARS.IN — Editorial design system (v2 re-theme) Light ivory content, deep navy nav/footer/hero, gold + sage accents. Same class names throughout as the previous dark theme, so every .php template keeps working unmodified. ============================================================= */ :root{ --navy: #0E1B2E; --navy-mid: #1A2D45; --navy-lt: #243B55; --ivory: #F5F0E8; --ivory-dk: #EAE4D8; --gold: #B8952A; --gold-lt: #D4AE45; --sage: #4A7C59; --sage-lt: #6AAF7E; --steel: #475569; --steel-lt: #5B6B82; --white: #FFFFFF; --text-ink: #2D3748; /* Nav/hero/footer are always a dark navy band regardless of theme, so their "dim" text needs a fixed light color — not one that swaps with the theme toggle (which only affects body content). */ --on-dark-dim: #9FB4BD; --on-dark-line: rgba(255,255,255,.12); /* Darker gold specifically for gold-colored TEXT sitting on a light card/body surface — the base --gold is tuned for buttons/borders/ accents and is too light (2.85:1) to use directly as body text. */ --gold-text: #76590D; --bg: var(--ivory); --bg-2: var(--ivory); --surface: var(--white); --surface-2: var(--ivory-dk); --line: rgba(14,27,46,0.10); --line-strong: rgba(14,27,46,0.18); --cyan: var(--sage); --brass: var(--gold); --teal: var(--sage); --text: var(--text-ink); --text-dim: var(--steel); --text-dimmer: var(--steel-lt); --radius: 6px; --max: 1180px; --font-display: "Playfair Display", Georgia, serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; --sc: 0 2px 16px rgba(14,27,46,.08); --sh: 0 8px 40px rgba(14,27,46,.16); } /* ---------- Dark theme override ---------- Overriding the same base tokens here is enough: every other rule in this file reads colors through --bg/--surface/--text/etc, which are themselves defined as var(--ivory)/var(--white)/var(--text-ink) at :root above, so they resolve to these dark values automatically wherever data-theme="dark" is set on . No other CSS needed. */ html[data-theme="dark"]{ --navy: #0A151F; --ivory: #0F222E; --ivory-dk: #16303F; --white: #16303F; --text-ink: #EAF1F3; --steel: #A9C0BC; --steel-lt: #93A9A6; --gold: #E3B04B; --gold-lt: #F0C868; --gold-text: #E3B04B; --sage: #6FB88F; --line: rgba(125,196,193,0.18); --line-strong: rgba(125,196,193,0.35); --sc: 0 2px 16px rgba(0,0,0,.25); --sh: 0 8px 40px rgba(0,0,0,.4); } html[data-theme="dark"] a{ color: var(--sage); } html[data-theme="dark"] .btn{ background: var(--white); color: var(--text-ink); } html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select{ background: var(--ivory-dk); } /* ---------- Theme toggle switch ---------- */ .theme-toggle{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background: transparent; color: var(--ivory); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; } .theme-toggle:hover{ border-color: var(--gold); color: var(--gold); } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--ivory); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.7; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } a{ color: var(--sage); text-decoration: none; } a:hover{ text-decoration: underline; color: var(--gold); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; } h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em; line-height: 1.2; margin: 0 0 .5em; color: var(--navy); } h1{ font-size: clamp(2rem, 4vw, 3.2rem); } h2{ font-size: clamp(1.4rem, 2.6vw, 2rem); } h3{ font-size: 1.15rem; } p{ margin: 0 0 1em; color: var(--text); } .dim{ color: var(--text-dim); } .mono{ font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; font-size: .7rem; color: var(--steel-lt); } .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; } .site-header{ position: sticky; top:0; z-index: 50; background: rgba(14,27,46,0.97); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(184,149,42,.2); } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:70px; gap: 20px; } .brand{ display:flex; align-items:center; gap:.5em; font-family: var(--font-display); font-weight:700; font-size:1.2rem; color: var(--ivory); } .brand .mark{ color: var(--gold); } .brand-mark{ height:30px; width:auto; display:block; } .brand small{ font-family: var(--font-mono); font-size:.58rem; letter-spacing:.14em; color: var(--gold); text-transform:uppercase; display:block; margin-top:2px; } .main-nav{ display:flex; align-items:center; gap: 2px; flex-wrap: wrap; } .main-nav a{ color: var(--on-dark-dim); font-family: var(--font-body); font-weight:500; font-size:.86rem; padding: 8px 12px; border-radius: var(--radius); } .main-nav a:hover, .main-nav a.active{ color: var(--ivory); background: rgba(255,255,255,.07); text-decoration:none; } .main-nav a.active{ color: var(--gold); } .header-actions{ display:flex; align-items:center; gap:10px; } .lang-switch{ display:flex; gap:2px; font-family: var(--font-mono); font-size:.72rem; } .lang-switch a{ padding:5px 9px; border:1px solid rgba(255,255,255,.25); color: var(--on-dark-dim); border-radius: var(--radius); } .lang-switch a.active{ background: var(--gold); color:var(--navy); border-color: var(--gold); } .btn{ display:inline-block; font-family: var(--font-body); font-weight:600; font-size:.86rem; padding: 10px 18px; border-radius: var(--radius); border: 1.5px solid var(--line-strong); color: var(--text); background: var(--white); cursor:pointer; } .btn:hover{ text-decoration:none; border-color: var(--gold); } .btn-primary{ background: linear-gradient(135deg, var(--gold-lt), var(--gold)); color:var(--navy); border-color: var(--gold); box-shadow: 0 8px 24px rgba(184,149,42,.25); } .btn-primary:hover{ filter: brightness(1.05); border-color: var(--gold); } .btn-sage{ background: var(--sage); color:#fff; border-color: var(--sage); } .btn-ghost{ background: transparent; } .btn-dark{ background: var(--navy); color: var(--ivory); border-color: var(--navy); } .btn-dark:hover{ border-color: var(--gold); } .btn-lg{ padding:14px 26px; font-size:1rem; } .btn-block{ display:block; width:100%; text-align:center; } .btn-sm{ padding: 6px 12px; font-size: .78rem; } .site-header .btn-ghost{ color: var(--ivory); border-color: rgba(255,255,255,.3); } .site-header .btn-ghost:hover{ border-color: var(--gold); color: var(--gold); } .nav-toggle{ display:none; } @media (max-width: 980px){ .main-nav{ display:none; } .main-nav.open{ display:flex; flex-direction:column; position:absolute; top:70px; left:0; right:0; background: var(--navy); border-bottom:1px solid rgba(184,149,42,.2); padding: 10px 24px 20px; gap:2px; z-index:60; } .nav-toggle{ display:inline-block; color: var(--ivory); border-color: rgba(255,255,255,.3); } } .hero{ padding: 72px 0 44px; background: var(--navy); color: var(--ivory); position:relative; overflow:hidden; } .hero::before{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 900px 480px at 15% -10%, rgba(184,149,42,0.14), transparent 60%), radial-gradient(ellipse 700px 420px at 100% 0%, rgba(74,124,89,0.16), transparent 60%); } .hero .wrap{ position:relative; z-index:1; } .hero h1, .hero h2{ color: var(--ivory); } .hero p.dim{ color: var(--on-dark-dim); } .hero-grid{ display:grid; grid-template-columns: 1.3fr .9fr; gap:40px; align-items:end; } @media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } } .eyebrow{ font-family: var(--font-mono); color: var(--gold-text); letter-spacing:.16em; text-transform:uppercase; font-size:.76rem; margin-bottom:14px; display:block; } .hero .eyebrow{ color: var(--gold); } /* hero is always a dark band, the lighter gold reads better there */ .hero-cta{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; } .title-block{ border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); font-family: var(--font-mono); font-size: .74rem; color: var(--steel-lt); } .title-block .row{ display:flex; border-bottom: 1px solid rgba(255,255,255,.1); } .title-block .row:last-child{ border-bottom:none; } .title-block .cell{ padding: 10px 12px; flex:1; border-right: 1px solid rgba(255,255,255,.1); } .title-block .cell:last-child{ border-right: none; } .title-block .cell .k{ display:block; color: var(--steel-lt); text-transform:uppercase; letter-spacing:.1em; font-size:.62rem; margin-bottom:4px; } .title-block .cell .v{ color: var(--ivory); font-size:.82rem; } .title-block .big{ padding: 16px 14px; font-family: var(--font-display); font-size:1rem; color: var(--gold); text-transform:none; letter-spacing:0; } .section{ padding: 60px 0; border-top: 1px solid var(--line); } .section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom: 28px; flex-wrap:wrap; } .grid{ display:grid; gap: 22px; } .grid-3{ grid-template-columns: repeat(3, 1fr); } .grid-2{ grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px){ .grid-3{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } } .card{ background: var(--white); border: 1px solid var(--ivory-dk); border-radius: var(--radius); padding: 24px; display:flex; flex-direction:column; gap:10px; box-shadow: var(--sc); } .card .tag{ font-family: var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-text); } .card h3{ margin:0; } .card .meta{ font-family: var(--font-mono); font-size:.7rem; color: var(--steel-lt); } .sheet-num{ font-family: var(--font-mono); font-size:.7rem; color: var(--steel-lt); } .focus-tile{ border:1px solid var(--ivory-dk); background: var(--white); padding: 20px; position:relative; border-radius: var(--radius); box-shadow: var(--sc); } .focus-tile .no{ font-family: var(--font-mono); font-size:.7rem; color: var(--steel-lt); position:absolute; top:16px; right:18px; } form .field{ margin-bottom: 16px; display:flex; flex-direction:column; gap:6px; } label{ font-family: var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--steel); } input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local], input[type=url], textarea, select{ background: var(--white); border: 1.5px solid var(--ivory-dk); color: var(--text); padding: 11px 12px; border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; } input:focus, textarea:focus, select:focus{ border-color: var(--gold); } textarea{ min-height: 140px; resize: vertical; font-family: var(--font-body); } .form-card{ background: var(--white); border:1px solid var(--ivory-dk); padding: 28px; max-width: 480px; border-radius: var(--radius); box-shadow: var(--sh); } .form-card.wide{ max-width: 720px; } .alert{ padding: 12px 16px; border-radius: var(--radius); font-family: var(--font-mono); font-size:.8rem; margin-bottom: 18px; border:1px solid; } .alert-success{ background: rgba(74,124,89,0.08); border-color: var(--sage); color: var(--sage); } .alert-error{ background: rgba(184,149,42,0.08); border-color: var(--gold); color: var(--gold-text); } .prose{ max-width: 720px; } .prose h2{ margin-top: 1.4em; } .prose p{ font-size: 1.06rem; } .tier{ position:relative; border:1px solid var(--ivory-dk); background: var(--white); padding: 26px; display:flex; flex-direction:column; gap:14px; border-radius: var(--radius); box-shadow: var(--sc); } .tier.featured{ border-color: var(--gold); box-shadow: var(--sh); } .tier .ribbon{ position:absolute; top:-1px; right:-1px; background: var(--gold); color:var(--navy); font-family: var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; padding:4px 10px; border-radius: 0 var(--radius) 0 var(--radius); } .tier .price{ font-family: var(--font-display); font-size:2rem; color:var(--navy); } .tier .price small{ font-family: var(--font-mono); font-size:.62rem; color: var(--steel-lt); text-transform:none; letter-spacing:0; display:block; } .tier ul{ margin:0; padding-left: 1.1em; color: var(--steel); font-size:.92rem; } .thread-row{ display:flex; justify-content:space-between; gap:16px; padding: 16px 0; border-bottom: 1px solid var(--line); } .thread-row .meta{ font-family: var(--font-mono); font-size:.7rem; color: var(--steel-lt); } .post{ border:1px solid var(--ivory-dk); background: var(--white); padding:18px; margin-bottom:14px; border-radius: var(--radius); } .post .meta{ font-family: var(--font-mono); font-size:.7rem; color: var(--steel-lt); margin-bottom:8px; } .site-footer{ background: var(--navy); color: var(--on-dark-dim); border-top: 1px solid rgba(184,149,42,.2); padding: 48px 0 32px; margin-top: 60px; } .site-footer .brand{ color: var(--ivory); } .site-footer h4{ color: var(--on-dark-dim); } .footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; } @media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } .footer-grid h4{ font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color: var(--on-dark-dim); } .footer-grid a{ display:block; color: var(--on-dark-dim); font-size:.9rem; padding: 4px 0; } .footer-grid a:hover{ color: var(--gold); } .footer-bottom{ margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-family: var(--font-mono); font-size:.72rem; color: var(--on-dark-dim); } .badge{ display:inline-block; font-family: var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; padding:3px 8px; border:1px solid var(--line-strong); color: var(--steel); border-radius: var(--radius); } .badge-premium{ border-color: var(--gold); color: var(--gold-text); background: rgba(184,149,42,.08); } .empty{ border:1px dashed var(--line-strong); padding: 40px; text-align:center; color: var(--steel); font-family: var(--font-mono); font-size:.85rem; } .divider{ border:none; border-top:1px solid var(--line); margin: 30px 0; } .stat-strip{ display:flex; gap:0; flex-wrap:wrap; margin-top:36px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius: var(--radius); } .stat-strip .stat{ flex:1; min-width:140px; padding: 18px 20px; border-right:1px solid rgba(255,255,255,.12); text-align:left; } .stat-strip .stat:last-child{ border-right:none; } .stat-strip .stat .num{ font-family: var(--font-display); font-size:1.7rem; color: var(--gold); font-weight:700; line-height:1.1; } .stat-strip .stat .lbl{ font-family: var(--font-mono); font-size:.66rem; color: var(--on-dark-dim); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; } .ticker-wrap{ overflow:hidden; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); padding: 14px 0; margin-top: 38px; background: rgba(255,255,255,.03); } .ticker{ display:flex; gap:34px; white-space:nowrap; width:max-content; animation: ticker-scroll 38s linear infinite; } .ticker span{ font-family: var(--font-mono); font-size:.78rem; color: var(--on-dark-dim); text-transform:uppercase; letter-spacing:.06em; } .ticker span::after{ content:'•'; margin-left:34px; color: var(--gold); } @keyframes ticker-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .ticker{ animation: none; } } .icon-strip{ display:grid; grid-template-columns: repeat(5,1fr); gap:16px; margin-top:30px; } @media (max-width:900px){ .icon-strip{ grid-template-columns: repeat(2,1fr); } } .icon-strip .item{ text-align:center; padding: 18px 10px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); border-radius: var(--radius); } .icon-strip .item .ic{ font-size:1.6rem; display:block; margin-bottom:8px; } .icon-strip .item .lb{ font-family: var(--font-mono); font-size:.66rem; color: var(--on-dark-dim); text-transform:uppercase; letter-spacing:.04em; } .chip-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; } .chip{ border:1px solid var(--ivory-dk); background: var(--white); color: var(--steel); padding:9px 16px; font-family: var(--font-body); font-weight:500; font-size:.86rem; border-radius: 999px; } .diff-card{ border:1px solid var(--ivory-dk); background: var(--white); padding:22px; border-radius: var(--radius); box-shadow: var(--sc); } .diff-card .ic{ font-size:1.4rem; color: var(--gold); margin-bottom:10px; display:block; } .domain-card{ border:1px solid var(--ivory-dk); background: var(--white); padding:20px; position:relative; border-radius: var(--radius); box-shadow: var(--sc); } .domain-card .no{ font-family: var(--font-mono); font-size:.68rem; color: var(--steel-lt); position:absolute; top:16px; right:16px; } .domain-card .subtags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; } .domain-card .subtags span{ font-family: var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; color: var(--sage); border:1px solid var(--sage); padding:3px 8px; border-radius: 999px; } .offer-card{ border:1px solid var(--ivory-dk); background: var(--white); padding:20px; display:flex; gap:14px; align-items:flex-start; border-radius: var(--radius); box-shadow: var(--sc); } .offer-card .ic{ font-size:1.5rem; flex-shrink:0; } .offer-card .price-badge{ margin-left:auto; } .account-menu{ position:relative; } .avatar-btn{ width:38px; height:38px; border-radius:50%; background: linear-gradient(135deg, var(--gold-lt), var(--sage)); color:var(--navy); font-family: var(--font-display); font-weight:700; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; font-size:.95rem; } .account-dropdown{ display:none; position:absolute; right:0; top:48px; background: var(--white); border:1px solid var(--ivory-dk); min-width:190px; z-index:70; box-shadow: var(--sh); border-radius: var(--radius); overflow:hidden; } .account-dropdown.open{ display:block; } .account-dropdown a{ display:block; padding:11px 16px; color: var(--steel); font-family: var(--font-body); font-size:.86rem; border-bottom:1px solid var(--ivory-dk); } .account-dropdown a:last-child{ border-bottom:none; color: var(--gold); } .account-dropdown a:hover{ background: var(--ivory); text-decoration:none; color: var(--navy); } .modal-overlay{ display:none; position:fixed; inset:0; background: rgba(14,27,46,0.72); z-index:200; align-items:center; justify-content:center; padding:20px; } .modal-overlay.open{ display:flex; } .modal-box{ background: var(--white); border:1px solid var(--ivory-dk); max-width:440px; width:100%; padding: 30px 28px; position:relative; max-height:90vh; overflow-y:auto; border-radius: var(--radius); box-shadow: var(--sh); } .modal-box.wide{ max-width:600px; } .modal-close{ position:absolute; top:14px; right:16px; background:none; border:none; color: var(--steel-lt); font-size:1.3rem; cursor:pointer; line-height:1; } .modal-tabs{ display:flex; gap:0; margin-bottom:20px; border-bottom:1px solid var(--ivory-dk); } .modal-tabs button{ flex:1; background:none; border:none; padding:10px; font-family: var(--font-body); font-weight:600; font-size:.9rem; color: var(--steel-lt); cursor:pointer; border-bottom:2px solid transparent; } .modal-tabs button.active{ color: var(--navy); border-bottom-color: var(--gold); } .modal-pane{ display:none; } .modal-pane.active{ display:block; } .newsletter-box{ border:1px solid var(--ivory-dk); background: var(--white); padding:26px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between; border-radius: var(--radius); box-shadow: var(--sc); } .newsletter-box form{ display:flex; gap:10px; flex-wrap:wrap; } .newsletter-box input[type=email]{ min-width:220px; } .social-links{ display:flex; gap:8px; margin-top:14px; } .social-links a{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size:.72rem; font-style:normal; color: var(--on-dark-dim); } .social-links a:hover{ background: rgba(255,255,255,.08); color: var(--gold); text-decoration:none; } .share-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin: 20px 0; } .share-row a{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--ivory-dk); padding:8px 14px; font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color: var(--steel); border-radius: 999px; } .share-row a:hover{ color: var(--navy); border-color: var(--gold); text-decoration:none; } .ad-slot{ border:1px dashed var(--line-strong); background: var(--white); padding:16px; text-align:center; font-family: var(--font-mono); font-size:.7rem; color: var(--steel-lt); text-transform:uppercase; letter-spacing:.06em; } .affiliate-card{ border:1px solid var(--ivory-dk); background: var(--white); padding:18px; display:flex; gap:14px; align-items:center; border-radius: var(--radius); box-shadow: var(--sc); } .affiliate-card img{ width:56px; height:56px; object-fit:contain; border-radius: var(--radius); background:#fff; } .affiliate-card .badge{ margin-left:auto; } .donate-box{ border:1px solid var(--gold); background: var(--white); padding:24px; text-align:center; border-radius: var(--radius); box-shadow: var(--sc); } [data-tip]{ position:relative; } [data-tip]::after{ content: attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background: var(--navy); color: var(--ivory); border:1px solid var(--gold); padding:6px 10px; font-family: var(--font-mono); font-size:.68rem; white-space:nowrap; border-radius: var(--radius); opacity:0; pointer-events:none; transition: opacity .15s ease; z-index:80; } [data-tip]:hover::after, [data-tip]:focus-visible::after{ opacity:1; } .progress{ background: var(--ivory-dk); border:1px solid var(--line); height:10px; border-radius:999px; overflow:hidden; } .progress-bar{ height:100%; background: linear-gradient(90deg, var(--sage), var(--gold)); border-radius:999px; transition: width .4s ease; } .progress-label{ display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:.7rem; color: var(--steel); margin-bottom:6px; } .checklist{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:8px; } .checklist li{ display:flex; align-items:flex-start; gap:8px; font-size:.9rem; color: var(--steel); } .checklist li::before{ content:'✓'; flex-shrink:0; width:18px; height:18px; border:1px solid var(--sage); color: var(--sage); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:.68rem; margin-top:1px; } @media (max-width: 640px){ body{ font-size:16px; } .hero{ padding: 44px 0 28px; } h1{ font-size: clamp(1.6rem, 8vw, 2.2rem); } .stat-strip .stat{ min-width: 45%; } .footer-grid{ grid-template-columns: 1fr; gap:22px; } .btn, .btn-sm{ padding: 12px 16px; } .main-nav.open a{ padding: 14px 6px; font-size:1rem; } .modal-box{ padding: 22px 18px; } .header-actions{ gap:6px; } .lang-switch a{ padding:8px 9px; } } @media (max-width: 400px){ .stat-strip .stat{ min-width: 100%; border-right:none; border-bottom:1px solid rgba(255,255,255,.12); } } /* Stat-strip / icon-strip items are now links — strip default link styling, keep the original look, add a subtle hover affordance */ .stat-strip a.stat, .icon-strip a.item{ color: inherit; text-decoration:none; transition: background .15s ease; } .stat-strip a.stat:hover, .icon-strip a.item:hover{ background: rgba(255,255,255,.06); text-decoration:none; color: inherit; } .icon-strip a.item:hover .lb{ color: var(--gold); } /* Quill rich text editor container, styled to match the form fields */ .rte-editor{ background: var(--white); border: 1.5px solid var(--ivory-dk); border-radius: var(--radius); min-height: 220px; font-family: var(--font-body); } .rte-editor .ql-editor{ min-height: 200px; font-size: 1rem; } /* Skip link — hidden until keyboard-focused */ .skip-link{ position:absolute; left:-9999px; top:auto; background: var(--gold); color: var(--navy); padding:12px 20px; z-index:999; font-family: var(--font-body); font-weight:600; border-radius: var(--radius); } .skip-link:focus{ left:16px; top:16px; }