/* ============================================================ critical.css (UPGRADED) Project: The Pieces of My Heart Purpose: - Critical above-the-fold styles (fast first paint) - Prevent layout shifts (CLS) - Safe defaults for accessibility + mobile - Global header/footer stability across ALL pages - Manual theme support (for your theme toggle) ============================================================ */ /* ----- Minimal reset ----- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; } li { margin: 0; } /* ----- Critical tokens (match main.css) ----- */ :root{ --bg: #f5f2eb; --surface: #ffffff; --text: #171717; --muted: #5a5a5a; --border: rgba(23,23,23,0.12); --accent: #8b7aa8; --accent-2: #6f5c95; --accent-soft: rgba(139,122,168,0.14); --shadow-sm: 0 1px 8px rgba(0,0,0,0.06); --shadow-md: 0 18px 50px rgba(0,0,0,0.12); --radius: 16px; --radius-sm: 12px; --container: 1100px; --pad: 16px; --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --leading: 1.55; --h1: clamp(28px, 4vw, 44px); --h2: clamp(22px, 3vw, 30px); --focus: 0 0 0 4px rgba(139,122,168,0.35); /* “glass” tokens (safe fallbacks below) */ --glass-bg: rgba(255,255,255,0.62); --glass-border: rgba(255,255,255,0.28); } /* ----- System Dark mode (default) ----- */ @media (prefers-color-scheme: dark) { :root{ --bg: #0f0f12; --surface: #17171c; --text: #f2f2f2; --muted: #c7c7c7; --border: rgba(242,242,242,0.14); --accent: #b9a7db; --accent-2: #d3c5f3; --accent-soft: rgba(185,167,219,0.16); --shadow-sm: 0 1px 10px rgba(0,0,0,0.35); --shadow-md: 0 22px 70px rgba(0,0,0,0.45); --glass-bg: rgba(20,20,26,0.62); --glass-border: rgba(255,255,255,0.12); } } /* ----- Manual theme override hooks (your toggle can set these) ----- */ /* If your theme toggle sets: or "light", this wins. */ html[data-theme="light"]{ color-scheme: light; --bg: #f5f2eb; --surface: #ffffff; --text: #171717; --muted: #5a5a5a; --border: rgba(23,23,23,0.12); --accent: #8b7aa8; --accent-2: #6f5c95; --accent-soft: rgba(139,122,168,0.14); --shadow-sm: 0 1px 8px rgba(0,0,0,0.06); --shadow-md: 0 18px 50px rgba(0,0,0,0.12); --glass-bg: rgba(255,255,255,0.62); --glass-border: rgba(255,255,255,0.28); } html[data-theme="dark"]{ color-scheme: dark; --bg: #0f0f12; --surface: #17171c; --text: #f2f2f2; --muted: #c7c7c7; --border: rgba(242,242,242,0.14); --accent: #b9a7db; --accent-2: #d3c5f3; --accent-soft: rgba(185,167,219,0.16); --shadow-sm: 0 1px 10px rgba(0,0,0,0.35); --shadow-md: 0 22px 70px rgba(0,0,0,0.45); --glass-bg: rgba(20,20,26,0.62); --glass-border: rgba(255,255,255,0.12); } /* ----- Base typography (critical) ----- */ body{ font-family: var(--font); line-height: var(--leading); background: var(--bg); color: var(--text); } p{ margin: 0 0 12px; color: var(--muted); } h1, h2{ margin: 0 0 10px; color: var(--text); letter-spacing: -0.01em; } h1{ font-size: var(--h1); line-height: 1.1; } h2{ font-size: var(--h2); line-height: 1.2; } ::selection{ background: var(--accent-soft); } /* ----- Focus ring (critical accessibility) ----- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: none; box-shadow: var(--focus); border-radius: 10px; } /* ----- Skip link (critical accessibility) ----- */ .skip-link{ position: absolute; left: -999px; top: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; z-index: 1000; } .skip-link:focus{ left: 12px; box-shadow: var(--shadow-sm); } /* ============================================================ HEADER (GLOBAL STABILITY + MOBILE FRIENDLY) ============================================================ */ .site-header{ position: sticky; top: 0; z-index: 999; border-bottom: 1px solid var(--border); /* safe fallback first */ background: rgba(0,0,0,0.20); background: var(--glass-bg); /* “glass” if supported (won’t break older browsers) */ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* If your existing CSS already sets header bg, this stays compatible */ .header-inner{ max-width: var(--container); margin: 0 auto; padding: 12px var(--pad); display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; min-height: 64px; /* helps reduce CLS */ } .brand a{ display: inline-flex; align-items: center; gap: 10px; min-height: 44px; } .brand-name{ font-weight: 800; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Nav list reset + stability */ .main-nav .nav-list{ list-style: none; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .main-nav a{ display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; min-height: 38px; line-height: 1; white-space: nowrap; } .main-nav a:hover{ border-color: color-mix(in oklab, var(--border) 70%, transparent); background: color-mix(in oklab, var(--surface) 65%, transparent); } .main-nav a[aria-current="page"]{ border-color: color-mix(in oklab, var(--accent) 55%, transparent); background: color-mix(in oklab, var(--accent-soft) 65%, transparent); } /* Actions (language/theme/whatsapp) */ .header-actions{ display: flex; gap: 10px; justify-content: flex-start; align-items: center; flex-wrap: wrap; } .language-toggle, .theme-toggle, .whatsapp-cta{ display: inline-flex; align-items: center; gap: 8px; } /* Make small pills look consistent if present */ .lang-option, .theme-btn, .whatsapp-link{ display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 70%, transparent); font-weight: 800; } .lang-option.is-active, .theme-btn.is-active{ border-color: color-mix(in oklab, var(--accent) 60%, transparent); background: color-mix(in oklab, var(--accent-soft) 65%, transparent); } /* Desktop header layout */ @media (min-width: 860px){ .header-inner{ grid-template-columns: 1.2fr 2fr 1.2fr; gap: 14px; } .main-nav{ justify-self: center; } .header-actions{ justify-self: end; justify-content: flex-end; } } /* Mobile: prevent ugly multi-row nav explosions */ @media (max-width: 859px){ .main-nav .nav-list{ gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .main-nav .nav-list::-webkit-scrollbar{ height: 6px; } } /* ============================================================ HERO + PAGE SECTIONS (CRITICAL) ============================================================ */ .page-hero{ padding: 28px 0 10px; } .page-hero-inner{ max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); } .page-hero-text{ max-width: 65ch; } /* “Panel” utility (safe if you use it; harmless if you don’t) */ .panel{ border-radius: var(--radius); border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 70%, transparent); box-shadow: var(--shadow-sm); } /* ============================================================ BUTTONS (CRITICAL) ============================================================ */ .button{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 80%, transparent); color: var(--text); font-weight: 900; text-decoration: none; min-height: 44px; line-height: 1; white-space: nowrap; } .button.primary{ background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: color-mix(in oklab, var(--accent) 60%, transparent); color: #0b0b0b; } .cta-actions, .quick-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } /* ============================================================ FORMS (CRITICAL SAFETY) Helps Request page stop looking broken on mobile. ============================================================ */ input, textarea, select, button{ font: inherit; } input, textarea, select{ width: 100%; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 85%, transparent); color: var(--text); padding: 10px 12px; min-height: 44px; } textarea{ min-height: 120px; resize: vertical; } /* ============================================================ NOTICE BOX (CRITICAL) ============================================================ */ .notice-box{ margin: 14px 0; padding: 14px; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--surface) 75%, transparent); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .notice-text{ margin: 0; color: var(--text); font-weight: 750; } /* ============================================================ FOOTER (GLOBAL STABILITY) ============================================================ */ .site-footer{ margin-top: 24px; border-top: 1px solid var(--border); background: var(--glass-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .footer-inner{ max-width: var(--container); margin: 0 auto; padding: 18px var(--pad); } .footer-links, .legal-links, .trust-list{ list-style: none; padding: 0; margin: 0; } .footer-links li, .legal-links li, .trust-list li{ margin: 6px 0; } /* Responsive padding */ @media (min-width: 560px){ :root{ --pad: 18px; } .page-hero{ padding: 34px 0 14px; } } @media (min-width: 980px){ :root{ --pad: 22px; } } /* End critical.css */