/* ============================================================= snapstack — dark premium theme (home page only) Applied via . Overrides surfaces & text for a modern black/white feel; nav & footer already dark. ============================================================= */ .theme-dark { background: #0c0b0a; color: rgba(245,243,239,.88); } /* type colours */ .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4 { color: #F7F5F1; } .theme-dark .muted { color: rgba(245,243,239,.56); } .theme-dark .eyebrow { color: rgba(245,243,239,.5); } .theme-dark .lede { color: rgba(245,243,239,.8); } .theme-dark .hero__sub { color: rgba(245,243,239,.7); } .theme-dark .accent-text { color: #fff; font-style: italic; } /* atmosphere — swap pastel washes for a subtle top light */ .theme-dark .atmos { background: radial-gradient(60% 50% at 50% -8%, rgba(255,255,255,.10), transparent 62%), radial-gradient(40% 40% at 85% 0%, rgba(120,140,255,.06), transparent 60%); } .theme-dark .grain { opacity: .22; } /* badge */ .theme-dark .pill-badge { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #F7F5F1; } .theme-dark .pill-badge .dot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.12); } /* buttons — primary becomes white (premium), ghost a light outline */ .theme-dark .btn--primary { background: #fff; color: #14110f; border-color: #fff; } .theme-dark .btn--primary:hover { background: #e9e6df; border-color: #e9e6df; } .theme-dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.24); } .theme-dark .btn--ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.5); } .theme-dark .link-arrow { color: #fff; } /* cloud / trusted-by */ .theme-dark .cloud { background: #0c0b0a; border-color: rgba(255,255,255,.1); } .theme-dark .cloud__label { color: rgba(245,243,239,.5); } .theme-dark .cloud__label b { color: #fff; } /* cards (home service preview) */ .theme-dark .card { background: #151311; border-color: rgba(255,255,255,.1); } .theme-dark .card:hover { border-color: rgba(255,255,255,.22); box-shadow: 0 34px 70px -34px rgba(0,0,0,.85); } .theme-dark .service__icon { background: rgba(255,255,255,.07); color: #fff; } .theme-dark .service li { color: rgba(245,243,239,.58); } .theme-dark .service li::before { background: #fff; } /* sections that were light surfaces -> blend into the dark canvas */ .theme-dark .section--surface { background: #100e0d; } /* case / work cards */ .theme-dark .case { background: #151311; border-color: rgba(255,255,255,.1); } /* stats panel — keep dark, add a hairline so it reads as a surface */ .theme-dark .panel { background: #151311; border: 1px solid rgba(255,255,255,.1); } /* CTA panel — was pastel; make it a deep premium surface */ .theme-dark .panel--sky { background: radial-gradient(130% 150% at 0% 0%, #1d1a17, #0e0c0b 70%); border: 1px solid rgba(255,255,255,.12); color: #F7F5F1; } .theme-dark .panel--sky h2 { color: #fff; } .theme-dark .panel--sky .lede { color: rgba(245,243,239,.78); } /* testimonial */ .theme-dark .quote { color: #F7F5F1; } .theme-dark .quote__by b { color: #fff; } .theme-dark .quote__by span { color: rgba(245,243,239,.55); } /* dividers / hairlines */ .theme-dark .divider { background: rgba(255,255,255,.12); } /* snap-stack: keep frames light so photos read as a premium gallery on black */ .theme-dark .frame { box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); border-color: rgba(0,0,0,.06); } /* ============================================================= Interior pages (services / work / about / contact) ============================================================= */ .theme-dark .page-hero p { color: rgba(245,243,239,.72); } .theme-dark .atmos--soft { background: radial-gradient(50% 50% at 12% 0%, rgba(255,255,255,.08), transparent 60%), radial-gradient(45% 45% at 92% 4%, rgba(120,140,255,.06), transparent 60%); } .theme-dark .breadcrumbs { color: rgba(245,243,239,.5); } .theme-dark .breadcrumbs a:hover { color: #fff; } /* steps / process / FAQ */ .theme-dark .step { border-top-color: rgba(255,255,255,.12); } .theme-dark .step:last-child { border-bottom-color: rgba(255,255,255,.12); } .theme-dark .step p { color: rgba(245,243,239,.6); } /* tags */ .theme-dark .tag { border-color: rgba(255,255,255,.18); color: rgba(245,243,239,.72); } /* team photo placeholder bg */ .theme-dark .team-photo { background: #211e1a; } /* forms */ .theme-dark .input, .theme-dark textarea.input, .theme-dark select.input { background: #151311; border-color: rgba(255,255,255,.14); color: #f5f3ef; } .theme-dark .input::placeholder { color: rgba(245,243,239,.38); } .theme-dark .input:focus { border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.1); } .theme-dark .field label { color: #f5f3ef; } .theme-dark .chip span { border-color: rgba(255,255,255,.2); color: rgba(245,243,239,.82); } .theme-dark .chip input:checked + span { background: #fff; color: #14110f; border-color: #fff; } .theme-dark .chip input:focus-visible + span { outline-color: #fff; } .theme-dark .form-success { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; } .theme-dark .form__note { color: rgba(245,243,239,.5); } .theme-dark .form-success--error { background: rgba(224,72,61,.14); border-color: rgba(224,72,61,.5); color: #ffb4ad; }