/* ============================================================ PLINTH STUDIO - Light luxury theme Applied when is set. Warm off-white surfaces · deep ink accent. ============================================================ */ body.theme-light { /* Surfaces */ --bg-0: #f6f3ec; --bg-1: #fbf9f4; --bg-2: #ffffff; --bg-3: #f1ede4; --bg-inset: #ece8de; /* Foreground */ --fg-0: #14141a; --fg-1: #55555f; --fg-2: #8a8a92; --fg-3: #c4c0b6; /* Accent (deep ink on warm white) */ --accent: #14141a; --accent-hi: #2a2a36; --accent-lo: #000000; --accent-ink: #fbf9f4; --accent-soft: rgba(20, 20, 26, 0.08); --accent-glow: rgba(20, 20, 26, 0.28); /* Lines */ --line-0: rgba(20, 20, 26, 0.06); --line-1: rgba(20, 20, 26, 0.10); --line-2: rgba(20, 20, 26, 0.18); /* Shadows */ --sh-sm: 0 1px 2px rgba(20,20,26,0.05); --sh-md: 0 14px 38px -16px rgba(20,20,26,0.18); --sh-lg: 0 30px 70px -28px rgba(20,20,26,0.22); --sh-glow: 0 18px 60px -22px var(--accent-glow); background: var(--bg-1); color: var(--fg-1); } body.theme-light ::selection { background: var(--accent); color: #fff; } body.theme-light ::-webkit-scrollbar-track { background: var(--bg-1); } body.theme-light ::-webkit-scrollbar-thumb { background: #d2cdc1; border: 3px solid var(--bg-1); } /* ---- Nav ---- */ body.theme-light .nav.scrolled { background: #fbf9f4; backdrop-filter: none; border-bottom-color: var(--line-1); box-shadow: 0 1px 0 var(--line-0), 0 4px 16px -4px rgba(20,20,26,0.06); } body.theme-light .nav-link:hover { background: rgba(20,20,26,0.045); } body.theme-light .mobile-menu { background: var(--bg-1); } body.theme-light .boot { background: var(--bg-1); } /* ---- Hero (editorial) ---- */ body.theme-light .hero-editorial { background: var(--bg-1); } body.theme-light .hero-rows .hr-tile { background: linear-gradient(135deg, #efebe1 0%, #e6e1d4 100%); } body.theme-light .hero-rows::after { background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(20,20,26,0.10) 0%, transparent 70%); } body.theme-light .hero-card { background: var(--bg-2); box-shadow: 0 1px 0 rgba(20,20,26,0.04), 0 30px 80px -30px rgba(20,20,26,0.30); } /* ---- Section bg: unified - every section shares one surface, only Free Sample breaks the rhythm with its black band ---- */ body.theme-light .services { background: var(--bg-1); } body.theme-light .about { background: var(--bg-1); } body.theme-light .shotstyle { background: var(--bg-1); } body.theme-light .beforeafter { background: var(--bg-1); } body.theme-light .portfolio { background: var(--bg-1); } body.theme-light .howitworks { background: var(--bg-1); } body.theme-light .pricing { background: var(--bg-1); } body.theme-light .testimonials { background: var(--bg-1); } body.theme-light .faq { background: var(--bg-1); } body.theme-light .contact { background: var(--bg-1); } body.theme-light .footer { background: #0a0a0c; } body.theme-light .marquee { background: var(--bg-1); } /* ---- Cards (split per-selector to beat gradient backgrounds) ---- */ body.theme-light .svc-card { background-color: var(--bg-2) !important; background-image: none !important; border-color: var(--line-1); } body.theme-light .svc-card:hover { background-color: var(--bg-3) !important; border-color: var(--line-2); } body.theme-light .step { background-color: var(--bg-2) !important; border-color: var(--line-1); } body.theme-light .step:hover { border-color: var(--line-2); } body.theme-light .price-card { background-color: var(--bg-2) !important; background-image: none !important; border-color: var(--line-1); } body.theme-light .price-card:hover { border-color: var(--line-2); } body.theme-light .price-card.featured { background-color: var(--bg-2) !important; background-image: linear-gradient(180deg, rgba(20,20,26,0.05), var(--bg-2) 40%) !important; border-color: var(--accent); } body.theme-light .test-card { background-color: var(--bg-2) !important; border-color: var(--line-1); } body.theme-light .test-card:hover { border-color: var(--line-2); } body.theme-light .shot-opt { background-color: var(--bg-2) !important; border-color: var(--line-1); } body.theme-light .shot-opt:hover { border-color: var(--line-2); } body.theme-light .shot-opt.active { background-color: var(--accent-soft) !important; border-color: var(--accent); } body.theme-light .pkg-row { background-color: var(--bg-2) !important; border-color: var(--line-1); } body.theme-light .pkg-row:hover { border-color: var(--line-2); } body.theme-light .pkg-row.sel { background-color: var(--accent-soft) !important; border-color: var(--accent); } body.theme-light .opt-tile { background-color: var(--bg-2) !important; border-color: var(--line-1); } body.theme-light .opt-tile.sel { background-color: var(--accent-soft) !important; border-color: var(--accent); } body.theme-light .upload-row { background-color: var(--bg-2) !important; border-color: var(--line-1); } body.theme-light .contact-form { background-color: var(--bg-2) !important; border-color: var(--line-1); } body.theme-light .lightbox-card { background-color: var(--bg-2) !important; border-color: var(--line-1); } /* ---- Buttons ---- */ body.theme-light .btn-ghost { color: var(--fg-0); border-color: var(--line-2); } body.theme-light .btn-ghost:hover { background: rgba(20,20,26,0.04); border-color: var(--fg-2); } body.theme-light .btn-soft { background: var(--bg-3); color: var(--fg-0); border-color: var(--line-1); } body.theme-light .btn-light { background: var(--fg-0); color: var(--bg-1); } /* ---- Folio ---- */ body.theme-light .port-filter.active { background: var(--fg-0); color: var(--bg-1); border-color: var(--fg-0); } body.theme-light .port-item { background: var(--bg-2); border-color: var(--line-1); } body.theme-light .port-item .meta { background: linear-gradient(transparent, rgba(20,20,26,0.85)); } /* ---- Shot style preview ---- */ body.theme-light .shot-preview { background: var(--bg-inset); border-color: var(--line-1); } body.theme-light .shot-preview-meta .label { background: rgba(255,255,255,0.78); color: var(--fg-0); border-color: var(--line-1); } body.theme-light .shot-mood-bar .seg { background: var(--line-1); } /* ---- Before / After ---- */ body.theme-light .ba-stage { background: var(--bg-inset); border-color: var(--line-1); } body.theme-light .ba-tag { background: rgba(255,255,255,0.78); color: var(--fg-0); border-color: var(--line-1); } body.theme-light .ba-tag.after { color: var(--accent); border-color: var(--accent); } body.theme-light .ba-handle { background: var(--fg-0); box-shadow: 0 0 18px rgba(20,20,26,0.25); } body.theme-light .ba-knob { background: var(--fg-0); color: #fff; } /* ---- Lightbox ---- */ body.theme-light .lightbox { background: rgba(246,243,236,0.85); } body.theme-light .lightbox-visual { background: var(--bg-inset); } body.theme-light .lightbox-close { background: rgba(255,255,255,0.78); border-color: var(--line-1); color: var(--fg-0); } /* ---- Pricing toggle ---- */ body.theme-light .price-toggle { background: var(--bg-2); border-color: var(--line-1); } body.theme-light .price-toggle button.active { background: var(--fg-0); color: var(--bg-1); } /* ---- Order modal ---- */ body.theme-light .order-overlay { background: rgba(20,20,26,0.45); } body.theme-light .order-modal { background: var(--bg-1); border-color: var(--line-1); } body.theme-light .order-foot { background: var(--bg-0); } body.theme-light .order-close { background: var(--bg-2); color: var(--fg-1); border-color: var(--line-1); } body.theme-light .dropzone { background: var(--bg-2); border-color: var(--line-2); } body.theme-light .upload-row .thumb { background: var(--bg-3); } body.theme-light .order-summary-box { background: var(--bg-2); border-color: var(--line-1); } /* ---- Form fields ---- */ body.theme-light .field input, body.theme-light .field textarea, body.theme-light .field select { background: var(--bg-2); border-color: var(--line-2); color: var(--fg-0); } /* ---- FAQ ---- */ body.theme-light .faq-q:hover { color: var(--accent); } body.theme-light .faq-q .ic { border-color: var(--line-2); color: var(--fg-1); } /* ---- Contact CTA panel ---- */ body.theme-light .contact-card { background: radial-gradient(120% 130% at 85% 0%, rgba(20,20,26,0.06), transparent 55%), var(--bg-2); border-color: var(--line-1); } body.theme-light .contact-point .ic { background: var(--accent-soft); color: var(--accent); } /* ---- About ---- */ body.theme-light .about-stats { border-top-color: var(--line-1); } body.theme-light .about-slot-2 { border-color: var(--bg-1) !important; } /* ---- Footer ---- */ body.theme-light .footer-bottom { border-top-color: var(--line-0); } body.theme-light .footer-social a { border-color: var(--line-1); color: var(--fg-1); } body.theme-light .footer-social a:hover { color: var(--accent); border-color: var(--accent); } body.theme-light .footer-big { color: var(--fg-0); opacity: 0.05; } /* ---- Toast ---- */ body.theme-light .toast { background: var(--bg-2); border-color: var(--line-2); color: var(--fg-0); } /* ---- Grain calmer on light ---- */ body.theme-light .grain { opacity: 0.025; mix-blend-mode: multiply; }