/* ===================================================================== Daria Zemlinova — Parent Support Multi-theme design system (3 selectable variants) --------------------------------------------------------------------- The active design is controlled by . - Variant A — "Sage Serif" : cream / teal-green / purple, Fraunces serif, organic line-art - Variant B — "Clean Slate" : white / ink / sage, Manrope sans, minimal & geometric - Variant C — "Warm Plum" : linen / plum / apricot, Lora serif, soft & rounded When a design is chosen, keep one data-variant block and delete the others. ===================================================================== */ /* ---------- Base tokens (Variant A defaults) ---------- */ :root, :root[data-variant="a"] { --color-cream:#f7f3ea; --color-cream-soft:#fdfbf6; --color-cream-deep:#efe8d8; --color-teal:#1f4d46; --color-teal-deep:#163a34; --color-teal-soft:#2f6b61; --color-purple:#6b5ca5; --color-purple-soft:#efeaf7; --color-ink:#23312e; --color-ink-soft:#4f5f5a; --color-line:#e2dacb; --font-head:"Fraunces", Georgia, serif; --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --head-weight:500; --head-spacing:-0.01em; --eyebrow-spacing:0.14em; --radius:18px; --radius-sm:12px; --btn-radius:999px; --pill:999px; --guide-bg:linear-gradient(135deg,#6b5ca5 0%,#574a8c 100%); --header-bg:rgba(247,243,234,0.82); --header-blur:saturate(180%) blur(12px); --maxw:1120px; --maxw-narrow:760px; --gap:clamp(1.5rem,4vw,3rem); --section-y:clamp(3.5rem,8vw,6.5rem); --shadow:0 18px 50px -28px rgba(22,58,52,0.45); --shadow-sm:0 8px 24px -16px rgba(22,58,52,0.4); --transition:220ms cubic-bezier(0.4,0,0.2,1); } /* ---------- Variant B — Warm Editorial ---------- */ :root[data-variant="b"] { --color-cream:#f4f1ea; --color-cream-soft:#faf8f2; --color-cream-deep:#ebe5d8; --color-teal:#1c1714; --color-teal-deep:#0f0b09; --color-teal-soft:#3c332c; --color-purple:#bb4d2b; --color-purple-soft:#f3e2d8; --color-ink:#241f1b; --color-ink-soft:#5d554c; --color-line:#ddd4c5; --font-head:"Playfair Display", Georgia, "Times New Roman", serif; --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --head-weight:600; --head-spacing:-0.005em; --eyebrow-spacing:0.18em; --radius:6px; --radius-sm:4px; --btn-radius:4px; --pill:4px; --guide-bg:#1c1714; --header-bg:rgba(244,241,234,0.88); --header-blur:saturate(160%) blur(10px); --shadow:0 18px 44px -30px rgba(28,23,20,0.5); --shadow-sm:0 8px 20px -16px rgba(28,23,20,0.45); } /* ---------- Variant C — Warm Plum ---------- */ :root[data-variant="c"] { --color-cream:#f6f1e9; --color-cream-soft:#fffdf9; --color-cream-deep:#efe6da; --color-teal:#5b3a53; --color-teal-deep:#3f2840; --color-teal-soft:#7a5470; --color-purple:#c07d3a; --color-purple-soft:#f7ead8; --color-ink:#2c2640; --color-ink-soft:#6a6076; --color-line:#e6dccb; --font-head:"Lora", Georgia, serif; --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --head-weight:600; --head-spacing:-0.005em; --eyebrow-spacing:0.16em; --radius:24px; --radius-sm:16px; --btn-radius:999px; --pill:999px; --guide-bg:linear-gradient(135deg,#5b3a53 0%,#7a5470 100%); --header-bg:rgba(246,241,233,0.85); --header-blur:saturate(180%) blur(12px); --shadow:0 20px 55px -30px rgba(63,40,64,0.45); --shadow-sm:0 8px 22px -16px rgba(63,40,64,0.4); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.65; color: var(--color-ink); background: var(--color-cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: 84px; /* room for the design switcher bar */ transition: background var(--transition), color var(--transition); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--head-weight); line-height: 1.12; color: var(--color-teal-deep); letter-spacing: var(--head-spacing); } h1 { font-size: clamp(2rem,4vw,3rem); } h2 { font-size: clamp(1.6rem,3vw,2.3rem); } h3 { font-size: 1.3rem; font-weight: var(--head-weight); } :root[data-variant="b"] h3 { font-size: 1.3rem; } p { color: var(--color-ink-soft); } strong { color: var(--color-ink); font-weight: 600; } .eyebrow { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: var(--eyebrow-spacing); text-transform: uppercase; color: var(--color-purple); margin-bottom: 0.9rem; } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.2rem,4vw,2.5rem); } .narrow { max-width: var(--maxw-narrow); } .section { padding-block: var(--section-y); } .section--band { background: var(--color-cream-deep); } .section--teal { background: var(--color-teal); color: var(--color-cream); } .section--teal h2, .section--teal h3 { color: var(--color-cream); } .section--teal p { color: rgba(255,255,255,0.82); } .center { text-align: center; } .section-head { max-width: 640px; margin-bottom: clamp(2rem,4vw,3rem); } .section-head.center { margin-inline: auto; } .section-head p { font-size: clamp(1.1rem,1.6vw,1.32rem); margin-top: 0.6rem; } /* B (Warm Editorial): paper bands with hairline rules */ :root[data-variant="b"] .section--band { background: var(--color-cream-soft); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-body); font-weight: 600; font-size: 1rem; padding: 0.85rem 1.6rem; border-radius: var(--btn-radius); border: 1.5px solid transparent; cursor: pointer; transition: transform var(--transition), background var(--transition), box-shadow var(--transition), border-color var(--transition); white-space: nowrap; } .btn svg { width: 1.05em; height: 1.05em; } .btn--primary { background: var(--color-teal); color: var(--color-cream); box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--color-teal-soft); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--color-teal); border-color: var(--color-line); } .btn--ghost:hover { border-color: var(--color-teal); background: var(--color-cream-soft); } .btn--light { background: var(--color-cream); color: var(--color-teal-deep); } .btn--light:hover { background: #fff; transform: translateY(-2px); } .btn--block { width: 100%; justify-content: center; } /* B: minimal solid buttons, no lift */ :root[data-variant="b"] .btn--primary:hover { transform: none; background: var(--color-teal-soft); } .link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--color-teal); border-bottom: 1.5px solid transparent; transition: border-color var(--transition), gap var(--transition); } .link-arrow:hover { border-color: var(--color-teal); gap: 0.65rem; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: var(--header-blur); border-bottom: 1px solid var(--color-line); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 72px; } .brand { display: flex; align-items: center; gap: 0.6rem; } .brand .logo { display: none; width: 36px; height: 36px; flex: none; } :root[data-variant="a"] .logo--a { display: block; } :root[data-variant="b"] .logo--b { display: block; } :root[data-variant="c"] .logo--c { display: block; } .brand-text { line-height: 1.05; } .brand-name { font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: var(--color-teal-deep); } .brand-sub { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-purple); } .nav-links { display: flex; align-items: center; gap: 1.7rem; } .nav-links a { font-weight: 500; color: var(--color-ink-soft); transition: color var(--transition); position: relative; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-teal); } .nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--color-purple); border-radius: 2px; } /* B: uppercase compact nav */ :root[data-variant="b"] .nav-links a { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; font-weight: 600; } /* C: pill nav container */ :root[data-variant="c"] .nav-links { background: var(--color-cream-soft); border: 1px solid var(--color-line); padding: 0.45rem 1.1rem; border-radius: 999px; gap: 1.3rem; } :root[data-variant="c"] .nav-links a[aria-current="page"]::after { display: none; } :root[data-variant="c"] .nav-links a[aria-current="page"] { color: var(--color-teal); font-weight: 600; } .nav-cta { display: flex; align-items: center; gap: 0.8rem; } .nav-toggle { display: none; background: none; border: 1.5px solid var(--color-line); border-radius: 10px; width: 44px; height: 44px; cursor: pointer; padding: 0; align-items: center; justify-content: center; color: var(--color-teal); } .nav-toggle svg { width: 22px; height: 22px; } @media (max-width: 880px) { .nav-links, .nav-cta .btn { display: none; } .nav-toggle { display: inline-flex; } .site-nav-open .nav-links { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; position: absolute; left: 0; right: 0; top: 72px; background: var(--color-cream-soft); padding: 1.5rem clamp(1.2rem,4vw,2.5rem) 2rem; border-bottom: 1px solid var(--color-line); box-shadow: var(--shadow); } :root[data-variant="c"] .site-nav-open .nav-links { border-radius: 0; } .site-nav-open .nav-links a { font-size: 1.15rem; } } /* ---------- Art (theme-adaptive inline SVG) ---------- */ .art-wrap, .hero-art { color: var(--color-teal); } .art-wrap svg, .hero-art svg { width: 100%; height: auto; } .a-fill { fill: var(--color-cream-soft); } .a-soft1 { color: var(--color-purple-soft); } /* use with fill="currentColor" */ .a-soft2 { color: var(--color-teal-soft); } .a-acc-fill { fill: var(--color-purple); } .a-acc-stroke { stroke: var(--color-purple); } .a-soft1-fill { fill: var(--color-purple-soft); } .a-soft2-fill { fill: var(--color-cream-deep); } /* hero art swap per variant */ .hero-art .art { display: none; } :root[data-variant="a"] .art--a { display: block; } :root[data-variant="b"] .art--b { display: block; } :root[data-variant="c"] .art--c { display: block; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding-block: clamp(3rem,7vw,5.5rem); } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem,5vw,4rem); align-items: center; } .hero h1 { font-size: clamp(2.4rem,5vw,3.9rem); margin-bottom: 1.2rem; } .hero .lead { font-size: clamp(1.1rem,1.6vw,1.32rem); color: var(--color-ink-soft); margin-bottom: 1.8rem; max-width: 34ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; } .hero-art { position: relative; } .hero-note { margin-top: 1.6rem; font-size: 0.92rem; color: var(--color-ink-soft); display: flex; align-items: center; gap: 0.5rem; } .hero-note svg { width: 1.1rem; height: 1.1rem; color: var(--color-purple); flex: none; } /* B (Warm Editorial): large display headline */ :root[data-variant="b"] .hero-grid { gap: clamp(2rem,6vw,5rem); } :root[data-variant="b"] .hero h1 { font-size: clamp(2.8rem,6.5vw,5rem); letter-spacing: -0.005em; } :root[data-variant="b"] .hero-art { max-width: 380px; margin-left: auto; } /* C: centered hero */ :root[data-variant="c"] .hero-grid { grid-template-columns: 1fr; text-align: center; max-width: 760px; margin-inline: auto; } :root[data-variant="c"] .hero .lead { margin-inline: auto; } :root[data-variant="c"] .hero-actions { justify-content: center; } :root[data-variant="c"] .hero-note { justify-content: center; } :root[data-variant="c"] .hero-art { order: -1; max-width: 360px; margin: 0 auto 1rem; } @media (max-width: 840px) { .hero-grid { grid-template-columns: 1fr; } .hero-art { order: -1; max-width: 360px; margin-inline: auto; } } /* ---------- Cards / grids ---------- */ .grid { display: grid; gap: var(--gap); } .grid-2 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(3,1fr); } .grid-4 { grid-template-columns: repeat(4,1fr); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .card { background: var(--color-cream-soft); border: 1px solid var(--color-line); border-radius: var(--radius); padding: clamp(1.5rem,3vw,2.1rem); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .card h3 { margin-bottom: 0.6rem; } .card p { font-size: 1.05rem; } .card .icon { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 1.1rem; display: grid; place-items: center; background: var(--color-purple-soft); color: var(--color-purple); } .card .icon svg { width: 26px; height: 26px; } /* B (Warm Editorial): borderless cards with a top rule, line icons */ :root[data-variant="b"] .card { background: transparent; border: none; border-top: 2px solid var(--color-teal); border-radius: 0; box-shadow: none; padding-inline: 0; padding-top: 1.3rem; } :root[data-variant="b"] .card:hover { transform: none; box-shadow: none; } :root[data-variant="b"] .card .icon { background: none; color: var(--color-purple); width: auto; height: auto; border-radius: 0; margin-bottom: 0.6rem; } :root[data-variant="b"] .card .icon svg { width: 30px; height: 30px; } :root[data-variant="b"] .eyebrow { display: inline-flex; align-items: center; gap: 10px; } :root[data-variant="b"] .eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; } /* C: rounded cards with accent top edge */ :root[data-variant="c"] .card { border-top: 3px solid var(--color-purple); } :root[data-variant="c"] .card .icon { border-radius: 50%; } .num-badge { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; background: var(--color-teal); color: var(--color-cream); font-size: 1.05rem; } :root[data-variant="b"] .num-badge { background: none; color: var(--color-purple); border-radius: 0; width: auto; height: auto; font-size: 2rem; font-family: var(--font-head); } .ticks { display: grid; gap: 0.9rem; } .ticks li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--color-ink-soft); } .ticks li svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--color-purple); margin-top: 0.15rem; } .section--teal .ticks li { color: rgba(255,255,255,0.85); } .section--teal .ticks li svg { color: var(--color-cream); } /* ---------- Split ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; } .split--reverse .split-media { order: 2; } @media (max-width: 840px) { .split { grid-template-columns: 1fr; } .split--reverse .split-media { order: -1; } .split-media { max-width: 420px; margin-inline: auto; } } /* ---------- Free guide ---------- */ .guide { background: var(--guide-bg); color: #fff; border-radius: var(--radius); padding: clamp(2rem,5vw,3.2rem); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; } .guide h2 { color: #fff; } .guide p { color: rgba(255,255,255,0.88); } .guide .eyebrow { color: rgba(255,255,255,0.85); } .guide-form { display: flex; flex-direction: column; gap: 0.7rem; } .guide-form .field-row { display: flex; gap: 0.6rem; flex-wrap: wrap; } .guide-form input { flex: 1 1 200px; padding: 0.85rem 1.1rem; border-radius: var(--pill); border: none; font-family: var(--font-body); font-size: 1rem; background: rgba(255,255,255,0.95); color: var(--color-ink); } .guide-form input:focus { outline: 3px solid rgba(255,255,255,0.55); } .guide-form .fineprint { font-size: 0.82rem; color: rgba(255,255,255,0.78); } .guide-form .fineprint a { text-decoration: underline; } @media (max-width: 720px) { .guide { grid-template-columns: 1fr; } } /* ---------- Forms ---------- */ .form { display: grid; gap: 1.1rem; } .form .row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; } @media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } } .field { display: grid; gap: 0.4rem; } .field label { font-weight: 600; font-size: 0.92rem; color: var(--color-ink); } .field .req { color: var(--color-purple); } .field input, .field textarea, .field select { font-family: var(--font-body); font-size: 1rem; color: var(--color-ink); background: var(--color-cream-soft); border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); padding: 0.8rem 1rem; width: 100%; transition: border-color var(--transition), box-shadow var(--transition); } .field textarea { min-height: 150px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-teal); box-shadow: 0 0 0 3px var(--color-purple-soft); } .form-aside { background: var(--color-cream-soft); border: 1px solid var(--color-line); border-radius: var(--radius); padding: clamp(1.5rem,3vw,2.1rem); height: fit-content; } .form-aside h3 { margin-bottom: 1rem; } .contact-list { display: grid; gap: 1.1rem; } .contact-list li { display: flex; gap: 0.8rem; align-items: flex-start; } .contact-list .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--color-purple-soft); color: var(--color-purple); display: grid; place-items: center; flex: none; } .contact-list .ic svg { width: 20px; height: 20px; } .contact-list .label { font-size: 0.92rem; color: var(--color-ink-soft); } .contact-list .value { font-weight: 600; color: var(--color-ink); } .consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; color: var(--color-ink-soft); } .consent input { margin-top: 0.25rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--color-teal); } .consent a { color: var(--color-teal); text-decoration: underline; } .form-note { font-size: 0.92rem; color: var(--color-ink-soft); } .callout { border-left: 3px solid var(--color-purple); background: var(--color-purple-soft); padding: 1rem 1.2rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.92rem; color: var(--color-ink); } .callout code { background: rgba(0,0,0,0.06); padding: 0.1rem 0.35rem; border-radius: 5px; font-size: 0.85em; } /* ---------- CTA strip ---------- */ .cta-strip { text-align: center; } .cta-strip h2 { max-width: 18ch; margin-inline: auto; } .cta-strip p { font-size: clamp(1.1rem,1.6vw,1.32rem); max-width: 46ch; margin: 0.8rem auto 1.8rem; } .cta-actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; } /* ---------- Stats ---------- */ .stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem,5vw,3.5rem); } .stat .num { font-family: var(--font-head); font-size: 2.4rem; color: var(--color-teal); line-height: 1; } .stat .lbl { font-size: 0.92rem; color: var(--color-ink-soft); margin-top: 0.3rem; } /* ---------- Page hero ---------- */ .page-hero { padding-block: clamp(2.6rem,6vw,4.5rem); } .page-hero h1 { font-size: clamp(2rem,4vw,3rem); max-width: 18ch; } :root[data-variant="c"] .page-hero { text-align: center; } :root[data-variant="c"] .page-hero h1 { max-width: 20ch; margin-inline: auto; } :root[data-variant="c"] .page-hero p { margin-inline: auto; } :root[data-variant="c"] .page-hero .breadcrumb { text-align: center; } .page-hero p { font-size: clamp(1.1rem,1.6vw,1.32rem); max-width: 52ch; margin-top: 0.8rem; } .breadcrumb { font-size: 0.92rem; color: var(--color-ink-soft); margin-bottom: 1rem; } .breadcrumb a:hover { color: var(--color-teal); } /* ---------- Prose ---------- */ .prose h2 { font-size: 1.5rem; margin-top: 2.4rem; margin-bottom: 0.7rem; } .prose h3 { margin-top: 1.6rem; margin-bottom: 0.5rem; } .prose p, .prose li { color: var(--color-ink-soft); } .prose ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: 0.4rem; margin: 0.6rem 0; } .prose a { color: var(--color-teal); text-decoration: underline; } .prose .updated { font-size: 0.92rem; color: var(--color-ink-soft); } /* ---------- Footer ---------- */ .site-footer { background: var(--color-teal-deep); color: rgba(255,255,255,0.78); padding-block: clamp(2.5rem,5vw,3.5rem); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; } .site-footer .brand-name, .site-footer h4 { color: #fff; } .site-footer h4 { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; color: rgba(255,255,255,0.6); } .footer-links { display: grid; gap: 0.6rem; } .footer-links a { color: rgba(255,255,255,0.78); } .footer-links a:hover { color: #fff; } .footer-about { max-width: 34ch; font-size: 0.92rem; color: rgba(255,255,255,0.7); margin-top: 0.8rem; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.16); margin-top: 2.2rem; padding-top: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.92rem; color: rgba(255,255,255,0.6); } .footer-bottom a { text-decoration: underline; } .footer-disclaimer { font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-top: 0.8rem; max-width: 60ch; } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; } } /* ---------- Cookie banner ---------- */ .cookie { position: fixed; left: 1rem; right: 1rem; bottom: 92px; z-index: 80; max-width: 560px; margin-inline: auto; background: var(--color-teal-deep); color: #fff; border-radius: var(--radius); padding: 1.2rem 1.4rem; box-shadow: var(--shadow); display: none; gap: 1rem; align-items: center; flex-wrap: wrap; } .cookie.show { display: flex; } .cookie p { color: rgba(255,255,255,0.85); font-size: 0.92rem; flex: 1 1 240px; margin: 0; } .cookie p a { color: #fff; text-decoration: underline; } .cookie .cookie-actions { display: flex; gap: 0.6rem; } .cookie .btn { padding: 0.6rem 1.1rem; font-size: 0.9rem; } /* ===================================================================== Design switcher (preview only — remove when a design is chosen) ===================================================================== */ .switcher { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 0.5rem; background: #ffffff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 12px 40px -12px rgba(0,0,0,0.35); border-radius: 999px; padding: 0.4rem 0.5rem 0.4rem 0.9rem; font-family: "Inter", system-ui, sans-serif; max-width: calc(100% - 2rem); } .switcher__label { font-size: 0.78rem; font-weight: 600; color: #6b7280; letter-spacing: 0.02em; white-space: nowrap; } .switcher__opts { display: flex; gap: 0.25rem; } .switcher__btn { appearance: none; border: 1px solid transparent; cursor: pointer; background: #f3f4f6; color: #374151; font-weight: 600; font-size: 0.85rem; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-family: inherit; transition: all 160ms ease; } .switcher__btn:hover { background: #e5e7eb; } .switcher__btn[aria-pressed="true"] { background: #111827; color: #fff; } .switcher__use { appearance: none; border: none; cursor: pointer; font-family: inherit; background: #111827; color: #fff; font-weight: 600; font-size: 0.82rem; padding: 0.55rem 1rem; border-radius: 999px; white-space: nowrap; transition: background 160ms ease; } .switcher__use:hover { background: #000; } .switcher__sep { width: 1px; height: 24px; background: rgba(0,0,0,0.1); } @media (max-width: 560px) { .switcher__label { display: none; } .switcher { gap: 0.4rem; padding: 0.4rem; } } /* Selection toast */ .toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(20px); bottom: 70px; z-index: 95; background: #111827; color: #fff; padding: 0.85rem 1.3rem; border-radius: 12px; font-family: "Inter", system-ui, sans-serif; font-size: 0.92rem; box-shadow: 0 12px 40px -12px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 240ms ease, transform 240ms ease; max-width: 90%; text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .toast a { color: #a5b4fc; text-decoration: underline; } /* Client preview banner (home, dismissible) */ .preview-note { background: var(--color-purple-soft); border-bottom: 1px solid var(--color-line); font-family: "Inter", system-ui, sans-serif; } .preview-note .inner { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0; font-size: 0.9rem; color: var(--color-ink); } .preview-note strong { color: var(--color-teal-deep); } .preview-note button { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--color-ink-soft); padding: 0.3rem; border-radius: 6px; } .preview-note button:hover { background: rgba(0,0,0,0.06); } .preview-note.hidden { display: none; } /* ---------- Utilities ---------- */ .mt-1 { margin-top: 0.6rem; } .mt-2 { margin-top: 1.2rem; } .mt-3 { margin-top: 2rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--color-teal); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 8px 0; z-index: 100; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--color-purple); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }