/* ============================================================ Wincham Bookkeeping — Bookkeeping & Financial Control No build step, no runtime dependencies. THEMING ------- Every colour + font is a semantic token. The default theme lives in :root (Midnight Gold). Each alternative theme overrides the tokens via :root[data-theme="…"]. The theme switcher (bottom-right) sets data-theme on and remembers the choice. To ship a single locked theme, set the default in the inline script and delete the switcher — see README "Themes". ============================================================ */ /* ---------- Non-themed globals ---------- */ :root { --radius: 14px; --radius-lg: 22px; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 30px -12px rgba(0,0,0,.28); --shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px -8px rgba(0,0,0,.22); --container: 1140px; --gutter: clamp(20px, 5vw, 40px); } /* ---------- Theme tokens (default = Midnight Gold) ---------- */ :root { --bg: #0f1216; --surface: #191d24; --surface-2: #12161c; --text: #eceef1; --text-soft: #b9c0c9; --text-mute: #8b929c; --line: #2a2f38; --accent: #d3b06b; --accent-2: #e4c688; --accent-soft: #2a2417; --on-accent: #14171c; --panel: #0a0c10; --panel-2: #07090c; --panel-text: #c4cad2; --panel-heading: #ffffff; --panel-mute: #8b929c; --panel-line: rgba(255,255,255,.10); --panel-accent: #d9b972; --font-head: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Heritage Navy — classic, established firm */ :root[data-theme="heritage"] { --bg:#f7f4ee; --surface:#fffdf8; --surface-2:#eee8db; --text:#1e2536; --text-soft:#49546a; --text-mute:#7d8798; --line:#e2dac9; --accent:#8c2230; --accent-2:#701a26; --accent-soft:#f0dbd6; --on-accent:#ffffff; --panel:#1b2740; --panel-2:#141d31; --panel-text:#ccd4e4; --panel-heading:#ffffff; --panel-mute:#8f9cb5; --panel-line:rgba(255,255,255,.12); --panel-accent:#cf9f5c; --font-head:"Spectral", Georgia, "Times New Roman", serif; --font-body:"Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* Fresh Emerald — modern fintech / SaaS */ :root[data-theme="emerald"] { --bg:#f4faf7; --surface:#ffffff; --surface-2:#e6f2eb; --text:#0f1f1a; --text-soft:#425950; --text-mute:#75897f; --line:#d4e6dc; --accent:#0e9d68; --accent-2:#0a7a51; --accent-soft:#d3f0e2; --on-accent:#ffffff; --panel:#0b2b22; --panel-2:#071f19; --panel-text:#cde6db; --panel-heading:#ffffff; --panel-mute:#89afa1; --panel-line:rgba(255,255,255,.12); --panel-accent:#54d69f; --font-head:"Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* Cool Slate — corporate, crisp */ :root[data-theme="slate"] { --bg:#f2f6f9; --surface:#ffffff; --surface-2:#e4edf4; --text:#16212e; --text-soft:#455565; --text-mute:#77879a; --line:#d3dfe9; --accent:#2b86c5; --accent-2:#1e6699; --accent-soft:#d5e8f6; --on-accent:#ffffff; --panel:#1d2c3b; --panel-2:#16212c; --panel-text:#c9d6e1; --panel-heading:#ffffff; --panel-mute:#8698aa; --panel-line:rgba(255,255,255,.12); --panel-accent:#5fb0e6; --font-head:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* Bold Ink — editorial, high-contrast minimal */ :root[data-theme="ink"] { --bg:#ffffff; --surface:#ffffff; --surface-2:#f3f3f6; --text:#0d0d11; --text-soft:#44444d; --text-mute:#797984; --line:#e6e6ec; --accent:#4f46e5; --accent-2:#3a31cc; --accent-soft:#e7e5fb; --on-accent:#ffffff; --panel:#0d0d11; --panel-2:#050507; --panel-text:#c8c8d0; --panel-heading:#ffffff; --panel-mute:#83838f; --panel-line:rgba(255,255,255,.12); --panel-accent:#8b83ff; --font-head:"Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* Warm Sunset — human, approachable */ :root[data-theme="sunset"] { --bg:#fbf5f0; --surface:#fffaf6; --surface-2:#f6e6db; --text:#2b211d; --text-soft:#5b4d45; --text-mute:#8a7a6f; --line:#ecdccf; --accent:#e2643f; --accent-2:#c34d2b; --accent-soft:#f8ddce; --on-accent:#ffffff; --panel:#59284a; --panel-2:#461f3a; --panel-text:#e8d3e0; --panel-heading:#ffffff; --panel-mute:#b493ab; --panel-line:rgba(255,255,255,.14); --panel-accent:#f0a475; --font-head:"Fraunces", Georgia, "Times New Roman", serif; --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* ---------- Reset-ish ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .3s ease, color .3s ease; } img { max-width: 100%; display: block; } a { color: var(--accent-2); text-decoration: none; } a:hover { color: var(--accent); } h1, h2, h3 { font-family: var(--font-head); line-height: 1.12; font-weight: 600; letter-spacing: -.01em; color: var(--text); margin: 0 0 .5em; } h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); font-weight: 600; } h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); } h3 { font-size: 1.2rem; } p { margin: 0 0 1rem; } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding: clamp(64px, 9vw, 120px) 0; } .section-tint { background: var(--surface-2); } .section-dark { background: var(--panel); color: var(--panel-text); } .section-dark h2, .section-dark h3 { color: var(--panel-heading); } .eyebrow { font: 600 .78rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 .9rem; } .eyebrow-light { color: var(--panel-accent); } .section-head { max-width: 720px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; } .section-head .section-sub { color: var(--text-soft); font-size: 1.08rem; margin: 0; } .section-dark .section-head .section-sub { color: var(--panel-text); opacity: .85; } /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 1000; background: var(--panel); color: var(--panel-heading); padding: 10px 16px; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; color: var(--panel-heading); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: 600 .98rem/1 var(--font-body); padding: .85em 1.5em; border-radius: 999px; border: 1.5px solid transparent; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent), transparent 45%); } .btn:hover { transform: translateY(-2px); color: var(--on-accent); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent), transparent 45%); outline-offset: 2px; } .btn-primary { background: var(--accent); } .btn-primary:hover { background: var(--accent-2); } .btn-sm { padding: .62em 1.1em; font-size: .9rem; } .btn-block { width: 100%; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--line); box-shadow: none; } .btn-ghost:hover { background: var(--surface); color: var(--text); border-color: var(--accent); } .btn-ghost-light { color: var(--panel-heading); border-color: rgba(255,255,255,.4); } .btn-ghost-light:hover { background: rgba(255,255,255,.1); border-color: #fff; } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg), transparent 14%); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .site-header.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); } .nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; } .brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--text); font-weight: 700; } .brand:hover { color: var(--text); } .brand-mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--panel); color: var(--panel-accent); font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; } .brand-name { font-family: var(--font-head); font-size: 1.18rem; font-weight: 600; letter-spacing: -.01em; } .nav { display: flex; align-items: center; } .nav-menu { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; } .nav-menu a { color: var(--text-soft); font-weight: 500; font-size: .96rem; padding: .5rem .8rem; border-radius: 8px; } .nav-menu a:hover { color: var(--text); background: var(--surface-2); } /* CTA button in the nav needs the on-accent colour, not the muted link colour (.nav-menu a would otherwise win on specificity). */ .nav-menu .nav-cta a { color: var(--on-accent); } .nav-menu .nav-cta a:hover { color: var(--on-accent); background: var(--accent-2); } .nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; } .nav-toggle-bar { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Hero ---------- */ .hero { padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 88% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), radial-gradient(50% 50% at 5% 90%, color-mix(in srgb, var(--panel-accent) 14%, transparent), transparent 60%); } .hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .hero-copy .lead { font-size: 1.14rem; color: var(--text-soft); max-width: 40ch; margin-bottom: 1.8rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2rem; } .trust-row { display: flex; flex-wrap: wrap; gap: .5rem .5rem; list-style: none; padding: 0; margin: 0; } .trust-row li { font-size: .82rem; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .4em .9em; box-shadow: var(--shadow-sm); } .hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 18px; } .hero-card-inner { display: grid; gap: 16px; } .hero-photo, .about-photo { aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, var(--surface-2), var(--accent-soft)); display: grid; place-items: center; color: var(--accent-2); text-align: center; } .about-photo { aspect-ratio: 4/5; } .photo-placeholder { font-weight: 700; letter-spacing: .04em; font-size: 1rem; } .photo-placeholder small { font-weight: 500; color: var(--text-mute); } .hero-card-facts { padding: 4px 6px 8px; } .hero-card-name { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; margin: 0; } .hero-card-title { margin: .1rem 0 .2rem; font-weight: 600; color: var(--accent-2); font-size: .95rem; } .hero-card-meta { margin: 0; color: var(--text-mute); font-size: .86rem; } /* ---------- Stats band ---------- */ .stats { background: var(--panel); color: var(--panel-text); padding: clamp(36px, 5vw, 56px) 0; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .stat { display: flex; flex-direction: column; gap: .25rem; } .stat-num { font-family: var(--font-head); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 600; color: var(--panel-heading); line-height: 1; } .stat-label { font-size: .9rem; color: var(--panel-text); opacity: .82; } /* ---------- About ---------- */ .about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .about-media { position: relative; } .about-photo { box-shadow: var(--shadow); border: 1px solid var(--line); } .linkedin-chip { display: inline-flex; align-items: center; gap: .5rem; margin-top: 14px; font-weight: 600; font-size: .9rem; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .5em 1em; box-shadow: var(--shadow-sm); } .linkedin-chip:hover { color: var(--accent-2); border-color: var(--accent); } .about-copy p { color: var(--text-soft); } .ticks { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .6rem; } .ticks li { position: relative; padding-left: 2rem; font-weight: 500; color: var(--text); } .ticks li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-2); display: grid; place-items: center; font-size: .78rem; font-weight: 700; } /* ---------- Cards (services) ---------- */ .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); } .card h3 { margin-bottom: .4rem; } .card p { color: var(--text-soft); font-size: .95rem; margin: 0; } .card-icon { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent-2); } .card-icon svg { width: 24px; height: 24px; } .card-accent { background: var(--panel); border-color: var(--panel); color: var(--panel-text); } .card-accent h3 { color: var(--panel-heading); } .card-accent p { color: var(--panel-text); opacity: .88; } .card-accent .card-icon { background: rgba(255,255,255,.1); color: var(--panel-accent); } .card-link { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--accent); } .card-accent .card-link { color: var(--panel-accent); } .card-accent .card-link:hover { color: var(--panel-heading); } /* ---------- Industries ---------- */ .ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .ind { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-sm); text-align: left; transition: transform .18s ease, box-shadow .2s ease; } .ind:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .ind-emoji { font-size: 1.8rem; display: block; margin-bottom: 12px; } .ind h3 { margin-bottom: .35rem; } .ind p { color: var(--text-soft); font-size: .93rem; margin: 0; } /* ---------- Why (dark) ---------- */ .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .why-item { border-top: 2px solid rgba(255,255,255,.15); padding-top: 18px; } .why-num { font-family: var(--font-head); font-size: 1.2rem; color: var(--panel-accent); font-weight: 600; } .why-item h3 { margin: .4rem 0 .5rem; } .why-item p { color: var(--panel-text); opacity: .85; font-size: .95rem; margin: 0; } /* ---------- Process ---------- */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .step { position: relative; } .step-num { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; margin-bottom: 16px; border: 1.5px solid var(--accent); } .step h3 { margin-bottom: .35rem; } .step p { color: var(--text-soft); font-size: .95rem; margin: 0; } /* ---------- Testimonials ---------- */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow-sm); margin: 0; } .quote blockquote { margin: 0 0 18px; font-size: 1.05rem; color: var(--text); font-family: var(--font-head); line-height: 1.5; } .quote figcaption { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 14px; } .quote figcaption strong { color: var(--text); } .quote figcaption span { color: var(--text-mute); font-size: .88rem; } /* ---------- FAQ ---------- */ .faq-inner { max-width: 820px; } .faq-list { display: grid; gap: 12px; } .faq-list details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 22px; box-shadow: var(--shadow-sm); overflow: hidden; } .faq-list summary { cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative; font-weight: 600; color: var(--text); font-size: 1.02rem; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--accent-2); font-weight: 400; transition: transform .2s ease; } .faq-list details[open] summary::after { content: "–"; } .faq-list details p { color: var(--text-soft); margin: 0 0 18px; } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; } .contact-copy p { color: var(--panel-text); opacity: .9; max-width: 44ch; } .contact-list { list-style: none; padding: 0; margin: 1.6rem 0; display: grid; gap: .9rem; } .contact-list li { display: flex; align-items: center; gap: .8rem; } .contact-ico { font-size: 1.1rem; } .contact-list a { color: var(--panel-heading); font-weight: 600; } .contact-list a:hover { color: var(--panel-accent); } .contact-list span:not(.contact-ico) { color: var(--panel-text); opacity: .9; } .contact-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; } .contact-form-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow); color: var(--text); } .contact-form { display: grid; gap: 16px; } .field { display: grid; gap: 6px; } .field label { font-weight: 600; font-size: .9rem; color: var(--text); } .field .opt { color: var(--text-mute); font-weight: 400; } .field input, .field textarea { font: inherit; color: var(--text); background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 10px; padding: .7em .85em; width: 100%; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .field textarea { resize: vertical; min-height: 110px; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 74%); } .field input:user-invalid, .field textarea:user-invalid { border-color: #c0492f; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .form-status { margin: 0; font-size: .92rem; font-weight: 600; min-height: 1.2em; } .form-status.ok { color: #1f7a52; } .form-status.err { color: #c0492f; } .form-note { margin: 0; font-size: .85rem; color: var(--text-mute); } .form-note a { font-weight: 600; } /* ---------- Footer ---------- */ .site-footer { background: var(--panel-2); color: var(--panel-text); padding: clamp(48px, 6vw, 72px) 0 28px; } .footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--panel-line); } .footer-brand .brand { color: var(--panel-heading); } .footer-brand .brand-name { color: var(--panel-heading); } .footer-tag { margin: 14px 0 0; color: var(--panel-mute); font-size: .92rem; max-width: 42ch; } .footer-nav, .footer-contact { display: grid; gap: .6rem; align-content: start; } .footer-nav a, .footer-contact a { color: var(--panel-text); font-size: .92rem; } .footer-nav a:hover, .footer-contact a:hover { color: var(--panel-accent); } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 22px; } .footer-bottom p { margin: 0; font-size: .82rem; color: var(--panel-mute); } .footer-fine { max-width: 60ch; } /* ---------- Theme switcher ---------- */ .theme-switcher { position: fixed; right: 18px; bottom: 18px; z-index: 200; font-family: var(--font-body); } .theme-switcher-toggle { display: inline-flex; align-items: center; gap: .5rem; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: .6em 1em; box-shadow: var(--shadow); cursor: pointer; font-weight: 600; font-size: .9rem; } .theme-switcher-toggle svg { width: 18px; height: 18px; color: var(--accent); } .theme-switcher-panel { position: absolute; right: 0; bottom: calc(100% + 10px); width: 264px; max-width: calc(100vw - 36px); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; display: none; } .theme-switcher.open .theme-switcher-panel { display: block; } .theme-switcher-panel h4 { margin: 0 0 .15rem; font-family: var(--font-head); font-size: 1rem; color: var(--text); } .theme-switcher-note { margin: 0 0 12px; font-size: .78rem; color: var(--text-mute); } .theme-options { display: grid; gap: 8px; } .theme-option { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; color: var(--text); font: inherit; font-size: .9rem; font-weight: 500; transition: border-color .15s ease, background .15s ease; } .theme-option:hover { border-color: var(--accent); } .theme-option[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent), transparent 90%); font-weight: 600; } .theme-swatch { display: inline-flex; flex: none; width: 36px; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); } .theme-swatch i { display: block; height: 100%; flex: 1; } .theme-option-name { flex: 1; } .theme-option-check { color: var(--accent); font-weight: 700; opacity: 0; } .theme-option[aria-pressed="true"] .theme-option-check { opacity: 1; } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .btn, .card, .ind { transition: none; } } /* ============================================================ Responsive ============================================================ */ @media (max-width: 960px) { .cards, .ind-grid, .why-grid, .steps { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } .quotes { grid-template-columns: 1fr; } .hero-inner { grid-template-columns: 1fr; } .hero-card { max-width: 420px; } .about-grid { grid-template-columns: 1fr; } .about-media { max-width: 380px; } .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .nav-toggle { display: flex; } .nav-menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 20px; box-shadow: var(--shadow); display: none; } .nav-menu.open { display: flex; } .nav-menu a { padding: .7rem .6rem; font-size: 1rem; } .nav-cta { margin-top: 6px; } .nav-cta a { width: 100%; } } @media (max-width: 520px) { .cards, .ind-grid, .why-grid, .steps { grid-template-columns: 1fr; } .hero-actions .btn, .contact-actions .btn { width: 100%; } .theme-switcher { right: 12px; bottom: 12px; } }