/* ========================================================================= Midnight Moon Nails — public + admin styles. Mobile-first. Midnight palette: a deeper indigo-violet primary + champagne-gold accent on cool moon-mist, with a richer near-black midnight sky in the chrome + home hero. The primary swatch keeps its historical `--pink*` variable names so one repoint re-themes the whole site (public + admin + every component) at once. ========================================================================= */ :root{ color-scheme:light; /* the site is light-by-design (photos carry the page) — opt out of UA forced auto-darkening */ --pink:#574a94; --pink-dark:#43386f; --pink-soft:#eae7f5; /* names kept; values are deep indigo-violet */ --bg:#f1f0f8; --card:#ffffff; --ink:#211d31; --ink-2:#4b4661; --muted:#6a6480; --line:#e2def0; --line-2:#d4cee8; --gold:#b08d4b; --gold-ink:#7a5e22; --gold-bg:#f6eeda; /* champagne accent — moon & stars (unchanged) */ --night:#1b1a3a; --night-2:#12122b; /* deeper midnight-indigo night sky */ --serif:Georgia,"New York","Times New Roman",serif; --green:#2e7d52; --green-bg:#e6f4ec; --amber:#9a6a12; --amber-bg:#fdf1da; --blue:#2a5d8f; --blue-bg:#e4eefb; --red:#b23b3b; --red-bg:#fbe7e7; --gray:#5d5559; --gray-bg:#eceaf1; --purple:#6b4a9a;--purple-bg:#efe7fa; --teal:#1f7a78; --teal-bg:#dcf2f1; --radius:14px; --shadow:0 1px 3px rgba(40,34,66,.10),0 6px 18px rgba(40,34,66,.07); --maxw:1080px; /* Semantic tokens — components consume these by ROLE instead of reaching for the raw palette vars, so a theme can restyle one role (say, buttons) without moving every other purple on the page. The defaults below ARE the tuned Indigo roles (Indigo is the default theme, so its palette lives here rather than in an override block); every OTHER theme repoints these per-role the same way (Purple was first — Light Purple and Dark Purple now carry the same treatment). Hierarchy by value ladder: price + the CTA are the only saturated elements, headings/emphasis get a rich-but-neutral deep tier, legends/labels drop to the secondary --ink-2 tier, selected chips are a SOLID fill with white text (white = available, solid = chosen), and --focus-ring is a visible mid-value ring (the soft tint is invisible on a white field). All pairs AA-checked (≥4.5:1) against their theme's --bg / chip fill — see CLAUDE.md for the full ratio table. */ --heading-ink:#2a2352; /* deep aubergine-indigo — richer than --ink, not accent */ --price-ink:var(--pink-dark); /* card + PDP prices */ --link-ink:#392f60; /* darker than the price so links don't compete */ --legend-ink:var(--ink-2); /* fieldset legends + small form-group labels leave the accent tier */ --emph-ink:#2a2352; /* bold emphasis lines (PDP wear line, mm note, callout heading) join the heading tier */ --btn-bg:#463b7e; --btn-bg-hover:#372e66; --btn-ghost-ink:var(--pink-dark); --callout-bar:#7a6cb4; /* info-box left accent bar — quieter than the price */ --chip-selected-bg:var(--pink); --chip-selected-ink:#fff; --chip-selected-note-ink:#e3e0f2; --focus-ring:#7a6cb4; /* input/summary focus outlines */ --success-ink:#27704a; /* "✓ Free shipping" line — default --green is 4.45:1 here, just under AA */ } /* Owner-selectable site themes (admin -> Settings, settings.site_theme) — each block REPOINTS the same --pink, --bg, --ink, --line, --night etc variables above (see the "--pink* trap" note up top and in CLAUDE.md); --card, --gold*, the status-badge pairs, --radius/--shadow/--maxw/--serif stay identical across themes on purpose. layout.php/admin_layout.php put the matching `theme-*` class on (inherited by nearly everything) AND on — is body's ANCESTOR, not a descendant, so it can't inherit body's local custom property values and needs its own copy for the `html{background:var(--night-2)}` rule just below to repaint too. Four themes: Indigo (default, no override block — the :root values above ARE Indigo), Light Purple, Purple, Dark Purple. All four now carry the same semantic-token treatment (Purple was first) — each block repoints --heading-ink/--price-ink/--link-ink/--legend-ink/ --emph-ink/--btn-bg(-hover)/--btn-ghost-ink/--callout-bar/--chip-selected-*/ --focus-ring/--success-ink for its own field, all AA-checked (≥4.5:1) against that theme's --bg / chip fill — see CLAUDE.md for the ratio table. */ body.theme-light-purple,html.theme-light-purple{ --pink:#7c5fb8; --pink-dark:#5f4699; --pink-soft:#f0e9fb; --bg:#f5effc; --ink:#251d3a; --ink-2:#4e4370; --muted:#71659a; --line:#e6dbf5; --line-2:#d6c7ec; --night:#2b2355; --night-2:#1e1840; --heading-ink:#322559; /* deep aubergine-indigo — richer than ink, not accent */ --emph-ink:#322559; /* wear line / callout heading join the heading tier */ --price-ink:#5f4699; --link-ink:#4a3880; /* darker than the price so links don't compete */ --legend-ink:var(--ink-2); /* form labels leave the accent tier */ --btn-bg:#563e91; --btn-bg-hover:#453175; /* deeper than --pink: pops by value, not hue */ --btn-ghost-ink:#5f4699; --callout-bar:#9c82d3; /* quieter than the price */ --focus-ring:#9c82d3; /* pink-soft ring is invisible on this field */ --chip-selected-bg:var(--pink); /* #7c5fb8 — white text is 5.0:1, passes */ --chip-selected-ink:#fff; --chip-selected-note-ink:#f6f2fd; /* LIGHTENED, not darkened, from the Purple-tier tint (#ece4f9 was only 4.07:1 against this lighter chip fill) — this field's --pink sits on the dark side of the black/white contrast crossover, so pushing the note text toward black tops out at ~4.19:1; only pushing it further toward white clears 4.5:1. */ --success-ink:#27704a; /* default --green is under AA here too */ } body.theme-purple,html.theme-purple{ /* Keeps the saturated lavender --bg on purpose (it's this theme's identity), and compensates through the semantic tokens: on a field this saturated everything purple reads equal, so saturation is spent on exactly two roles (price + CTA), darkness does structure (headings/labels), and near-white does surfaces. Neutrals: --muted is a near-gray so de-emphasized text doesn't read as a second accent; --pink-soft is lifted toward white so soft-filled panels/callouts separate from the saturated page. All values AA-checked against #eadef7. */ --pink:#6b3fae; --pink-dark:#53308a; --pink-soft:#f7f2fd; --bg:#eadef7; --ink:#241833; --ink-2:#4a3a66; --muted:#615a77; --line:#ddcbf1; --line-2:#ccb4e7; --night:#251345; --night-2:#170b30; --heading-ink:#2e1c52; /* deep aubergine — richer than ink, not accent */ --link-ink:#4a2f85; /* darker than the price so links don't compete */ --legend-ink:var(--ink-2); /* form labels leave the accent tier */ --emph-ink:#2e1c52; /* wear line / callout heading join the heading tier */ --btn-bg:#4b2e8f; --btn-bg-hover:#3b2373; /* deeper than --pink: pops by value, not hue */ --callout-bar:#8a63c9; /* quieter than the price */ --chip-selected-bg:var(--pink); /* SOLID mid-violet (the shop filter-chip pattern): white = available, solid = chosen — on this saturated field a tinted fill reads as the emptier chip. One value LIGHTER than --btn-bg so the CTA still outranks a selected chip by darkness + size. */ --chip-selected-ink:#fff; --chip-selected-note-ink:#e8dcf8; --focus-ring:#8a63c9; /* pink-soft ring is invisible on this field */ --success-ink:#27704a; /* default --green is 3.9:1 here — just under AA */ } body.theme-dark-purple,html.theme-dark-purple{ /* This theme's problem is compressed tiers — --pink-dark already sits near-black, so the old passthrough tokens (price/legend/etc riding --pink-dark) left everything reading the same near-black ink. The treatment restores chroma hierarchy the same way Purple does: price borrows --pink itself (still dark, but with real hue left in it) while headings/emphasis get their own deep tier. */ --pink:#4b2e75; --pink-dark:#38215a; --pink-soft:#ebe3f6; --bg:#ede8f4; --ink:#201831; --ink-2:#463a60; --muted:#685e82; --line:#dcd1eb; --line-2:#c9bbdf; --night:#150f30; --night-2:#0d0820; --heading-ink:#2b1d4e; /* deep aubergine-indigo — richer than ink, not accent */ --emph-ink:#2b1d4e; /* wear line / callout heading join the heading tier */ --price-ink:#4b2e75; /* the --pink value — gives price chroma the near-black --pink-dark lacks */ --link-ink:#38215a; /* darker than the price so links don't compete */ --legend-ink:var(--ink-2); /* form labels leave the accent tier */ --btn-bg:#31205c; --btn-bg-hover:#241542; /* deeper than --pink: pops by value, not hue */ --btn-ghost-ink:#38215a; --callout-bar:#7d63ad; /* quieter than the price */ --focus-ring:#7d63ad; /* pink-soft ring is invisible on this field */ --chip-selected-bg:#4b2e75; --chip-selected-ink:#fff; --chip-selected-note-ink:#e7def4; --success-ink:#27704a; /* default --green is under AA here too */ } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background:var(--night-2)} body{margin:0;background:var(--bg);color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.55;font-size:16px} img{max-width:100%;display:block} a{color:var(--link-ink)} .container{max-width:var(--maxw);margin:0 auto;padding:0 18px} .muted{color:var(--muted)} .req{color:var(--red)} h1,h2,h3{line-height:1.25;color:var(--heading-ink)} /* Celestial-elegant display face for public headings + wordmark (system serif, ships no font files). Admin headings stay sans for a utilitarian feel. */ body:not(.admin) h1,body:not(.admin) h2,.brand{font-family:var(--serif);letter-spacing:.2px} .page{padding:24px 18px 56px} /* The page's own top padding is the ONLY gap under the header — a first child's margin must not stack on top of it (margins don't collapse through padding). Without this the gap depended on whatever element a page happened to open with: 24px for a .prose or .hero, but 40px on product.php (a

), 45px on shop.php (an

) and 58px on order-status.php (a .section). The second selector covers one level of nesting: `.section` has margin but no padding, so its own first child's margin COLLAPSES THROUGH it and escapes — zeroing only the section itself left order-status.php at 44px. Harmless for the other openers: `.prose` already zeroes its first heading, `.hero`'s first child is absolutely positioned, and an

/

has no element children. Same rule at the bottom so a trailing margin doesn't add to the 56px. */ .page > :first-child, .page > :first-child > :first-child{margin-top:0} .page > :last-child{margin-bottom:0} /* ---------- Header / nav ---------- */ /* Persistent night-sky header — the moon/stars live in the chrome on EVERY page, so the content below can stay light and let the product photos shine. */ .site-header{position:sticky;top:0;z-index:30;overflow:hidden;color:#fff;border-bottom:1px solid #2a2856; /* Faint champagne-gold hairline laid over the dark border-bottom, fading out at the edges — a whisper of gold echoing .section__head::after. Renders on the bottom edge only because the other three border sides have 0 width. */ border-image:linear-gradient(90deg,transparent,rgba(176,141,75,.55),transparent) 1; background:linear-gradient(180deg,var(--night),var(--night-2))} .site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap;padding-top:12px;padding-bottom:12px} .brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:20px; color:#fff;text-decoration:none;letter-spacing:.2px} .brand__mark{width:26px;height:26px;flex:none} .brand__mark .moon{fill:currentColor} /* crescent glows white on the night header */ .brand__mark .spark{fill:var(--gold)} /* champagne sparkle pops on dark */ .nav{display:flex;flex-wrap:wrap;gap:4px} /* The overlay-only brand lockup is hidden everywhere except the mobile overlay; the links wrapper collapses (display:contents) so links stay direct flex children of the inline desktop/no-JS nav. Both are re-styled inside the max-width:699px overlay block. */ .nav__brand{display:none} .nav__links{display:contents} .nav__link{position:relative;padding:7px 11px;border-radius:8px;text-decoration:none;color:#e7e2f2;font-size:14px} /* Animated gold underline on hover/active — a thin bar that scales in from the center. Reduced motion still shows the underline, just without the animation. */ .nav__link::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:1.5px; background:var(--gold);transform:scaleX(0);transform-origin:center;pointer-events:none} .nav__link:hover{background:rgba(255,255,255,.08)} .nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)} @media (prefers-reduced-motion:no-preference){ .nav__link::after{transition:transform .25s ease} } .nav__link.is-active{background:rgba(255,255,255,.16);color:#fff;font-weight:600} /* ---------- Mobile nav: hamburger + full-screen night overlay (<700px, JS only) ---------- Desktop (>=700px) and the no-JS path are UNCHANGED: the hamburger stays hidden and .nav renders inline exactly as it does today (the overlay rules below are scoped under html.js + the 699px media query). One