/* ============================================================ theme-dark.css, PREMIUM DARK skin for the TradieBuddy AI redesign. Obsidian + amber (docs/BRAND_DESIGN_SYSTEM.md, hex values from website/styles.css :root). Zubaz geometry stays in base.css; this file supplies every colour, shadow and ornament. Restraint rules: ONE loud accent (amber), hairline rgba borders, glass cards, glows only where attention converts. ============================================================ */ :root[data-theme="dark"]{ color-scheme:dark; /* brand helpers (internal to this file) */ --amber:#ff8a3d; --amber-2:#ffc24d; --molten:linear-gradient(105deg,#ff6a1a,#ffb43a); /* ---- THEME CONTRACT ---- */ --canvas:#05070f; --canvas-alt:#080b16; --ink:#f2f5ff; --body-ink:#c3cbdf; --muted:#9aa5c4; --muted-2:#7d87a6; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.17); --accent:#ff8a3d; --accent-ink:#180a02; --btn-bg:var(--molten); --btn-fg:#180a02; --btn-hover-bg:#ffc24d; --btn-hover-fg:#180a02; --link-hover:#ffc24d; --nav-bg:rgba(6,9,20,.82); --band-bg:#080c19; --band-fg:#f2f5ff; --band-muted:#9aa5c4; --band-line:rgba(255,255,255,.1); --card-bg:rgba(255,255,255,.03); --card-line:rgba(255,255,255,.09); --card-line-hover:rgba(255,138,61,.5); --acc-bg:rgba(255,255,255,.03); --acc-open-bg:rgba(255,138,61,.07); --acc-open-head:#ffc24d; --acc-open-body:#c3cbdf; --price-feat-bg:#10162b; --price-feat-fg:#f2f5ff; --price-feat-muted:#9aa5c4; --badge-bg:rgba(255,138,61,.16); --badge-fg:#ffc24d; --input-bg:rgba(255,255,255,.04); --input-line:rgba(255,255,255,.15); --input-focus:#ff8a3d; --focus-ring:rgba(255,138,61,.16); --err:#ff7a7a; --ok:#3ddc8a; --term-bg:#070b18; --term-bar-bg:rgba(255,255,255,.03); --shadow-card:0 30px 80px -30px rgba(0,0,0,.85); --shadow-nav:0 12px 44px -20px rgba(0,0,0,.85); --sel-bg:rgba(255,138,61,.32); } /* ---------- atmosphere: obsidian canvas + top aurora glows ---------- */ [data-theme="dark"] body{ background: radial-gradient(1100px 560px at 50% -180px,rgba(255,122,44,.08),transparent 62%), radial-gradient(900px 520px at 88% 10%,rgba(139,123,255,.05),transparent 60%), var(--canvas); } /* ---------- nav: frosted glass on scroll ---------- */ [data-theme="dark"] .nav.sticky-menu, [data-theme="dark"] .nav-menu{ -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); } [data-theme="dark"] .nav.sticky-menu{border-bottom:1px solid var(--line)} /* ---------- glass panels: faint top sheen on every card ---------- */ [data-theme="dark"] .iconbox, [data-theme="dark"] .svc-row, [data-theme="dark"] .trade-card, [data-theme="dark"] .pcard, [data-theme="dark"] .book-form{ background-image:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 34%); } /* ---------- hero atmosphere: slow amber aurora drifting under the grid ---------- */ [data-theme="dark"] .hero-bg::before{ width:min(860px,96vw);height:min(600px,88vw);left:50%;top:-140px;transform:translateX(-58%); background:radial-gradient(closest-side,rgba(255,122,44,.17),rgba(255,106,26,.05) 55%,transparent 74%); animation:blobA 26s ease-in-out infinite alternate} [data-theme="dark"] .hero-bg::after{ width:min(620px,84vw);height:min(480px,70vw);right:-10%;top:110px; background:radial-gradient(closest-side,rgba(139,123,255,.09),transparent 70%); animation:blobB 34s ease-in-out infinite alternate} @keyframes blobA{to{transform:translateX(-42%) translateY(46px) scale(1.07)}} @keyframes blobB{to{transform:translate(-70px,56px) scale(1.12)}} /* ---------- the brain demo: the glowing centerpiece ---------- */ [data-theme="dark"] .phone{ box-shadow: 0 0 0 1px rgba(255,138,61,.14), 0 40px 90px -35px rgba(0,0,0,.9), 0 0 130px -28px rgba(255,138,61,.3); } [data-theme="dark"] .hero-shot{position:relative} [data-theme="dark"] .hero-shot::before{ content:"";position:absolute;inset:-10% -16%;z-index:0;pointer-events:none; background:radial-gradient(closest-side,rgba(255,138,61,.14),rgba(255,106,26,.04) 55%,transparent 78%); animation:heroGlow 8s ease-in-out 2.4s infinite alternate; } @keyframes heroGlow{to{opacity:.6;transform:scale(1.06)}} [data-theme="dark"] .hero-shot .phone{z-index:1} [data-theme="dark"] .term-bar .live{box-shadow:0 0 22px -6px rgba(255,138,61,.55)} /* ---------- dark bands sit slightly proud of the canvas ---------- */ [data-theme="dark"] .band{ background:linear-gradient(180deg,#0a0e1d,#070a16); border-top:1px solid var(--band-line); border-bottom:1px solid var(--band-line); } [data-theme="dark"] .count-v .suf{color:var(--amber-2)} [data-theme="dark"] .eyebrow{color:var(--amber-2)} [data-theme="dark"] .mq-name{opacity:.6} /* ---------- primary CTAs: molten amber, soft bloom ---------- */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-pill{ box-shadow:0 0 0 1px rgba(255,138,61,.3),0 22px 50px -18px rgba(255,106,26,.55); } [data-theme="dark"] .btn-ghost{background:rgba(255,255,255,.04)} /* ---------- featured pricing card: amber-ringed panel ---------- */ [data-theme="dark"] .pcard.feat{ border-color:rgba(255,138,61,.5); background-image:radial-gradient(560px 300px at 50% -90px,rgba(255,138,61,.1),transparent 70%); box-shadow: 0 0 0 1px rgba(255,138,61,.14), 0 30px 80px -30px rgba(0,0,0,.85), 0 0 90px -30px rgba(255,138,61,.2); } /* ---------- open accordion: amber-tinted lift, amber hairline ---------- */ [data-theme="dark"] .acc-item.open{border-color:rgba(255,138,61,.35)} /* ---------- CTA band: deep glow panel, molten button carries the heat ---------- (base paints this with --btn-bg + --btn-fg; on obsidian the premium move is a dark radial-glow card with ONE molten primary, so re-skin it here) */ [data-theme="dark"] .cta-band{ background: radial-gradient(900px 440px at 50% -160px,rgba(255,122,44,.22),transparent 62%), #0a0f1f; border:1px solid var(--line); color:var(--ink); } [data-theme="dark"] .cta-band h2{color:var(--ink)} [data-theme="dark"] .cta-band p{color:var(--muted);opacity:1} [data-theme="dark"] .cta-band .btn-primary{background:var(--btn-bg);color:var(--btn-fg)} [data-theme="dark"] .cta-band .btn-primary:hover{color:var(--btn-hover-fg)} /* ---------- pain-point cards + pills: same glass sheen as the card family ---------- */ [data-theme="dark"] .pain-card{background-image:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 34%)} [data-theme="dark"] .car-btn{background:#0a0f1f} /* ---------- forms: focus halo now lives in base.css via --focus-ring ---------- */ [data-theme="dark"] .field select option{background:#0a0f1f;color:var(--body-ink)} [data-theme="dark"] .logo .mark{box-shadow:0 8px 22px -6px rgba(255,138,61,.7)} [data-theme="dark"] .bf-consent input{accent-color:var(--accent)}