/* ============================================================================ Diamonds of Tomorrow — Claude Design skin (cream / bronze editorial) Shared override layer for the legacy content pages so they visually belong to the same system as the approved inventory + stone-detail + homepage. Loaded LAST in ; uses !important to win over the pages' legacy navy/gold styles, the FAQ/Process semantic vars, Tailwind utilities, and inline styles — WITHOUT touching markup, content, or functionality. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Hebrew:wght@300;400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@300;400;500&display=swap'); :root{ /* canonical tokens (match inventory.html / index.html) */ --bg:#f4edda; --surface:#f9f1dd; --surface-2:#fdf6e2; --ink:#1a1c20; --ink-80:rgba(26,28,32,0.80); --ink-70:rgba(26,28,32,0.68); --ink-60:rgba(26,28,32,0.56); --ink-50:rgba(26,28,32,0.48); --ink-40:rgba(26,28,32,0.38); --ink-20:rgba(26,28,32,0.18); --ink-15:rgba(26,28,32,0.14); --ink-10:rgba(26,28,32,0.10); --bronze:#9c7740; --bronze-mid:#7c6135; --bronze-pale:#b89265; --bronze-deep:#5e472a; --bronze-tint:rgba(156,119,64,0.08); --bronze-soft:rgba(156,119,64,0.18); --shadow-card:0 1px 3px rgba(26,28,32,0.04),0 18px 44px -28px rgba(94,71,42,0.22); --shadow-soft:0 1px 2px rgba(26,28,32,0.03),0 10px 30px -22px rgba(94,71,42,0.20); --radius:14px; --font-body:'IBM Plex Sans Hebrew','IBM Plex Sans','Heebo',Arial,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace; /* redefine the FAQ/Process semantic vars so var()-based rules flip to cream */ --navy:var(--surface); --navy-2:var(--surface-2); --gold:var(--bronze); --white:var(--ink); --text:var(--ink); --muted:var(--ink-80); --gray:var(--ink-60); } /* ---- base ------------------------------------------------------------ */ html,body{background:var(--bg)!important;color:var(--ink)!important} body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} ::selection{background:var(--bronze-soft)} ::-webkit-scrollbar{width:8px} ::-webkit-scrollbar-track{background:var(--surface)} ::-webkit-scrollbar-thumb{background:var(--bronze);border-radius:4px} /* fonts — element selectors (specificity > the legacy `*{font-family:Heebo!important}`) icon fonts are re-protected below so Material Symbols keep rendering */ h1,h2,h3,h4,h5,h6,p,a,span,div,li,ul,ol,td,th,dt,dd,label,input,select,textarea, button,blockquote,strong,b,em,i,small,figcaption,summary,details,section,article, header,footer,nav,main,aside,form{font-family:var(--font-body)!important} .material-symbols-outlined,[class*="material-symbols"],.material-icons, [class*="material-icons"]{font-family:'Material Symbols Outlined','Material Icons'!important;color:var(--bronze)} /* ---- typography hierarchy ------------------------------------------- */ h1{font-weight:600;letter-spacing:-0.022em;line-height:1.04;color:var(--ink)!important} h2{font-weight:600;letter-spacing:-0.018em;line-height:1.1;color:var(--ink)!important} h3,h4{font-weight:600;letter-spacing:-0.01em;color:var(--ink)!important} p,li{color:var(--ink-70)!important;line-height:1.75} a{color:inherit} strong,b{color:var(--ink)!important} /* ---- legacy Tailwind navy/gold vocabulary (about, why-buy, b2b, contact) */ .bg-navy,[class*="bg-navy"]{background:var(--bg)!important} .bg-navy-light{background:var(--surface)!important} .bg-slate-900,[class*="bg-slate-9"],.bg-\[\#0d0d1a\],.bg-\[\#0b1020\], .bg-\[\#08080f\],.bg-\[\#080d1f\]{background:var(--surface)!important} .bg-gold,[class*="bg-gold"]{background:var(--bronze)!important;color:#fff!important} .bg-gold *{color:#fff!important} .text-off-white,.text-white,.text-navy{color:var(--ink)!important} .text-off-white *{color:inherit!important} .text-gold,.text-gold *,.text-amber-300,.text-amber-400,.text-amber-200, [class*="text-amber"]{color:var(--bronze)!important} .text-silver,.text-slate-300,.text-slate-200{color:var(--ink-70)!important} .text-silver\/60,.text-slate-400,.text-slate-500{color:var(--ink-50)!important} .border-white\/5,.border-white\/10,.border-white\/20,[class*="border-white"], .border-slate-700,.border-slate-800,[class*="border-slate"]{border-color:var(--bronze-soft)!important} /* ---- FAQ / Process semantic classes (hardcoded darks → cream) -------- */ .container{width:min(1100px,92%);margin:auto} .section h2,.lead,.sub,.note{color:var(--ink-70)!important} h1,.section h2{color:var(--ink)!important} .badge{border:1px solid var(--bronze-soft)!important;background:var(--bronze-tint)!important; color:var(--bronze)!important;font-family:var(--font-mono)!important;font-weight:500!important; letter-spacing:.06em} .card{background:var(--surface-2)!important;border:1px solid var(--bronze-soft)!important; border-radius:var(--radius)!important;box-shadow:var(--shadow-card)!important} .card:hover{border-color:var(--bronze)!important;transform:translateY(-3px)} .card h3{color:var(--bronze-deep)!important} .card p{color:var(--ink-70)!important} .faq-item{border-bottom:1px solid var(--bronze-soft)!important} .faq-item h3{color:var(--ink)!important} .faq-item p{color:var(--ink-70)!important} .step-num{background:var(--bronze-tint)!important;color:var(--bronze)!important; border:1px solid var(--bronze-soft)!important} .placeholder{background:linear-gradient(135deg,var(--surface),var(--surface-2))!important; border:1px solid var(--bronze-soft)!important} .trustbar{background:var(--surface-2)!important;border:1px solid var(--bronze-soft)!important; color:var(--ink-70)!important} .footer p,.footer a{color:var(--ink-60)!important} /* ---- CTAs / buttons (gold gradients → solid bronze) ------------------ */ .cta,.btn,.btn-gold,.bg-gold,a[href*="wa.me"]{ background:var(--bronze)!important;background-image:none!important;color:#fff!important; border:0!important;border-radius:9px!important;box-shadow:var(--shadow-soft)!important; font-weight:600!important} .cta:hover,.btn:hover,.btn-gold:hover,a[href*="wa.me"]:hover{ background:var(--bronze-mid)!important;box-shadow:var(--shadow-card)!important} .cta *,.btn *,.btn-gold *,a[href*="wa.me"] *{color:#fff!important} /* ---- forms (FAQ inline form + Contact) ------------------------------- */ input,select,textarea,.form-input,.float-input{ background:var(--surface-2)!important;color:var(--ink)!important; border:1px solid var(--bronze-soft)!important;border-radius:10px!important; font-family:var(--font-body)!important} input:not(.float-input)::placeholder,textarea:not(.float-input)::placeholder{color:var(--ink-50)!important} .float-input::placeholder{color:transparent!important} input:focus,select:focus,textarea:focus,.form-input:focus,.float-input:focus{ border-color:var(--bronze)!important;outline:none!important; box-shadow:0 0 0 3px var(--bronze-tint)!important} label,.float-label{color:var(--ink-70)!important} option{color:var(--ink);background:var(--surface-2)} /* ---- Contact: neutralize inline dark panels & light inline text ------ */ [style*="background:#080d1f"],[style*="background:#0b1020"], [style*="background:#0d0d1a"],[style*="background: #080d1f"]{background:var(--surface)!important} [style*="background:rgba(255,255,255,0.06)"], [style*="background:rgba(255,255,255,0.05)"]{background:var(--surface-2)!important} [style*="background:#f0c24b"],[style*="background: #f0c24b"], [style*="background:rgba(240,194,75"]{background:var(--bronze-tint)!important} [style*="color:rgba(255,255,255"],[style*="color:#fff"],[style*="color: #fff"], [style*="color:white"]{color:var(--ink-70)!important} /* …but keep button text white */ .cta [style*="color"],.btn [style*="color"],.btn-gold [style*="color"], a[href*="wa.me"] [style*="color"]{color:#fff!important} /* ---- Contact: icon circles + gold borders ---- */ .icon-circle{background:var(--bronze-tint)!important;color:var(--bronze)!important; border:1px solid var(--bronze-soft)!important} .border-gold{border-color:var(--bronze)!important} /* ---- editorial eyebrow polish (keeps existing cs-* from migrated stubs) */ .cs-eyebrow,.inv-eyebrow{font-family:var(--font-mono)!important;color:var(--bronze)!important} /* ---- Mobile-only readability: enlarge + thicken the smallest text (text-xs) on the older dark pages that load this stylesheet. Size+weight only. */ @media (max-width:600px){ .text-xs{font-size:1rem!important;font-weight:500!important;line-height:1.5!important} }