/* ===== J&K Dreadlock Studio — "Midnight Salon" design system (dark · navy + gold + neon) ===== Rebuilt 2026-08-01. The light ivory theme never matched her world: the salon is black walls and gold, the product labels are navy/gold, the wall sign is pink neon script. This theme IS her studio at night. ⚠️ Token names are kept from the light theme so the 8 pages keep working — but several now mean the OPPOSITE surface: --paper is the dark page base, --navy is CREAM (pages used it as heading/text color on light cards, so flipping the value flips the theme). See DARK-THEME-SPEC.md. */ :root{ --paper:#0B1226; /* page base (deep midnight) */ --paper-2:#131E3C; /* card surface */ --sand:#0F1834; /* lifted section tint */ --sand-2:#111C3A; --ink:#EBE2CF; /* body text — warm cream */ --ink-soft:#A3ADC7; /* muted text */ --navy:#F3ECDA; /* ⚠️ heading color on dark (was the brand navy) */ --royal:#4F74C9; /* brighter blue accent */ --royal-soft:#3E62B0; --gold:#D9B15F; /* gold, readable on dark */ --gold-2:#C39A44; --gold-hi:#F0D48A; --pink:#E8558F; /* her neon sign — accent ONLY (script + tiny glows) */ --line:rgba(231,200,122,.14); --line-gold:rgba(231,200,122,.40); --grad-gold:linear-gradient(120deg,#F0D48A 0%,#C39A44 48%,#A9781F 100%); --grad-navy:linear-gradient(160deg,#182D60 0%,#0F1C42 58%,#0A122C 100%); --shadow:0 30px 70px -30px rgba(0,0,0,.75); --shadow-soft:0 16px 40px -20px rgba(0,0,0,.6); } *{margin:0;padding:0;box-sizing:border-box} /* ⚠️ overflow-x on is REQUIRED, not decorative. The reveal animations park unrevealed elements at translateX(42px) (.rise.r) — a transform still counts toward scrollable overflow, so every not-yet-scrolled-to element made the document 450px wide on a 390px phone. The page could be dragged sideways and iOS rendered it shifted. `clip` (not `hidden`) because hidden makes a scroll container and breaks the sticky nav. */ html{scroll-behavior:smooth;overflow-x:clip} @supports not (overflow-x:clip){html{overflow-x:hidden}} body{color:var(--ink); font-family:'Manrope',system-ui,sans-serif;font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden; background: radial-gradient(60% 22% at 88% 0%, rgba(231,200,122,.12), transparent 60%), radial-gradient(44% 18% at -8% 12%, rgba(63,98,176,.13), transparent 62%), radial-gradient(52% 20% at 50% 100%, rgba(232,85,143,.07), transparent 66%), linear-gradient(180deg,#0C142B 0%, #0A1124 55%, #080F22 100%)} /* hard safety net: if any background fails to paint, the page is still midnight, never white */ html{background:#0A1124} /* the parting-grid lattice — her sectioning pattern, site-wide at a whisper */ body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5; background: repeating-linear-gradient(45deg, rgba(231,200,122,.045) 0 1px, transparent 1px 34px), repeating-linear-gradient(-45deg, rgba(231,200,122,.045) 0 1px, transparent 1px 34px)} /* fine grain for depth — white noise blended over the dark */ body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' fill='%23ffffff' opacity='.05'/%3E%3C/svg%3E")} .wrap,section,nav,footer,.topbar,header{position:relative;z-index:1} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:1200px;margin:0 auto;padding:0 26px} h1,h2,h3,.serif{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--navy)} .ital{font-style:italic;font-weight:400} .gold-text{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent} /* the script = her neon sign. Pink, with the glow the real sign has. */ .script{font-family:'Ephesis',cursive;color:var(--pink);font-weight:400; text-shadow:0 0 18px rgba(232,85,143,.45),0 0 42px rgba(232,85,143,.22)} .eyebrow{font-family:'Manrope';font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:700} /* buttons */ .btn{display:inline-flex;align-items:center;gap:.5em;font-family:'Manrope';font-weight:600;font-size:.9rem; padding:.9em 1.5em;border-radius:999px;cursor:pointer;border:1px solid transparent; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .35s,color .35s,border-color .35s} .btn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px} /* primary = gold. (.btn-navy keeps its name; on midnight the primary action is gold.) */ .btn-navy{background:var(--grad-gold);color:#2a1c06;box-shadow:0 14px 30px -14px rgba(201,162,75,.55)} .btn-navy:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(201,162,75,.75)} .btn-gold{background:var(--grad-gold);color:#2a1c06;box-shadow:0 14px 30px -14px rgba(201,162,75,.55)} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(201,162,75,.75)} .btn-ghost{border-color:var(--line-gold);color:var(--ink);background:rgba(231,200,122,.05)} .btn-ghost:hover{border-color:var(--gold-hi);color:var(--gold-hi);transform:translateY(-2px)} .btn-light{background:var(--paper-2);color:var(--ink);border-color:var(--line-gold)} .btn-light:hover{transform:translateY(-2px);border-color:var(--gold-hi)} .btn.sm{padding:.6em 1.05em;font-size:.8rem} /* icons */ .ico{width:1.08em;height:1.08em;flex-shrink:0;stroke-width:1.8;vertical-align:-.15em} .btn .ico{margin-right:-.1em} /* announcement bar */ .topbar{background:#070D1E;color:#D9DFF0;font-size:.76rem;letter-spacing:.06em;padding:9px 16px; border-bottom:1px solid var(--line); overflow:hidden;white-space:nowrap;display:flex;justify-content:center;align-items:center;gap:28px} .topbar span{display:inline-flex;align-items:center;gap:6px} .topbar span + span::before{content:'';width:4px;height:4px;border-radius:50%; background:var(--gold-hi);opacity:.6;margin-right:22px} .topbar b{color:var(--gold-hi)} @media(max-width:760px){.topbar{gap:18px}.topbar span:nth-child(2){display:none}} @media(max-width:460px){.topbar span:nth-child(3){display:none}} .marquee{display:inline-flex;gap:0;animation:marquee 26s linear infinite;will-change:transform} .marquee:hover{animation-play-state:paused} .marquee .seg{display:inline-flex;align-items:center;gap:10px;padding:0 26px} .marquee .seg .d{width:4px;height:4px;border-radius:50%;background:var(--gold-hi);opacity:.7} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.marquee{animation:none}} /* full-width sliding service ribbon — density between sections */ .ribbon{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:rgba(231,200,122,.04);padding:13px 0;position:relative;z-index:1} .ribbon .marquee .seg{font-family:'Fraunces';font-style:italic;font-size:1.02rem;color:var(--gold);letter-spacing:.04em} /* nav — dark glass */ nav{position:sticky;top:0;z-index:60;background:rgba(9,15,32,.82);backdrop-filter:blur(14px); border-bottom:1px solid var(--line);transition:padding .3s} .nav-in{display:flex;align-items:center;justify-content:space-between;padding:12px 0} .logo-lockup{display:flex;align-items:center;gap:11px} .logo-lockup img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line-gold),0 6px 16px -6px rgba(0,0,0,.8)} .logo-lockup .lt{display:flex;flex-direction:column;line-height:1} .logo-lockup .lt b{font-family:'Fraunces';font-size:1.15rem;color:var(--navy);font-weight:600} .logo-lockup .lt span{font-size:.54rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-top:3px} .nav-links{display:flex;gap:26px;align-items:center} .nav-links a{font-size:.84rem;letter-spacing:.02em;color:var(--ink-soft);font-weight:500;position:relative;transition:color .3s} .nav-links a:hover,.nav-links a.active{color:var(--navy)} .nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--grad-gold);transition:width .3s;border-radius:2px} .nav-links a:hover::after,.nav-links a.active::after{width:100%} .nav-cta{display:flex;gap:10px;align-items:center} .hamb{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px} .hamb span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s} @media(max-width:940px){.nav-links{display:none}.nav-cta .btn-ghost{display:none}.hamb{display:flex}} /* mobile menu */ .mmenu{position:fixed;inset:0;z-index:70;background:#0A1124;transform:translateY(-100%);transition:transform .4s cubic-bezier(.2,.8,.2,1); display:flex;flex-direction:column;padding:80px 30px 40px} .mmenu.open{transform:none} .mmenu a{font-family:'Fraunces';font-size:1.6rem;color:var(--navy);padding:14px 0;border-bottom:1px solid var(--line)} .mmenu .close{position:absolute;top:22px;right:24px;background:none;border:none;font-size:2rem;color:var(--navy);cursor:pointer} /* section base — tighter than the light theme; the emptiness complaint was real */ section{padding:64px 0;position:relative} .tint{background:linear-gradient(180deg,var(--sand) 0%,var(--sand-2) 100%); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .sec-head{max-width:660px;margin-bottom:34px} .sec-head.center{margin-inline:auto;text-align:center} .sec-head h2{font-size:clamp(2rem,4.2vw,3.1rem);margin:14px 0 10px} .sec-head p{color:var(--ink-soft);font-size:1.02rem} /* footer — near black, gold hairline */ footer{background:#060B18;color:#C7CEE1;padding:60px 0 30px;border-top:1px solid var(--line)} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px} .foot-brand .logo-lockup .lt b{color:#fff} .foot-brand p{color:#8E99B5;font-size:.9rem;margin-top:16px;max-width:32ch} .foot-brand .tag{font-family:'Ephesis',cursive;color:var(--pink);font-size:1.5rem;margin-top:10px; text-shadow:0 0 16px rgba(232,85,143,.4)} .foot-col h4{font-family:'Manrope';font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:16px} .foot-col a{display:block;color:#A7B1CB;font-size:.9rem;padding:5px 0;transition:color .3s} .foot-col a:hover{color:#fff} .foot-bot{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px; color:#7E88A3;font-size:.78rem} @media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px}} @media(max-width:520px){.foot-grid{grid-template-columns:1fr}} /* section transitions & depth */ section.band-navy{background:var(--grad-navy);color:#EAEFFA;overflow:hidden; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} section.band-navy::before,section.band-navy::after{content:'';position:absolute;left:0;right:0;height:60px;z-index:2;pointer-events:none} section.band-navy::before{top:-1px;background:linear-gradient(180deg,var(--paper),transparent);opacity:.0} .soft-div{height:70px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.2));margin-top:-70px;pointer-events:none;position:relative;z-index:0} /* decorative glows inside sections */ .glow-tr::after{content:'';position:absolute;top:-40px;right:-60px;width:340px;height:340px;border-radius:50%; background:radial-gradient(closest-side,rgba(231,200,122,.14),transparent 70%);z-index:0;pointer-events:none} .glow-bl::before{content:'';position:absolute;bottom:-60px;left:-60px;width:320px;height:320px;border-radius:50%; background:radial-gradient(closest-side,rgba(232,85,143,.09),transparent 70%);z-index:0;pointer-events:none} /* reveal */ .rise{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)} .rise.in{opacity:1;transform:none} .rise.l{transform:translateX(-42px)}.rise.r{transform:translateX(42px)} /* on a phone a 42px sideways offset is most of the gutter — it reads as a broken layout on the way in, and it is what widened the document past the viewport. Reveal vertically instead. */ @media(max-width:700px){.rise.l,.rise.r{transform:translateY(30px)}} .rise.l.in,.rise.r.in{transform:none} .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .float{animation:floaty 6s ease-in-out infinite} @media(prefers-reduced-motion:reduce){.rise{opacity:1!important;transform:none!important}.float{animation:none}*{transition:none!important}}