/* ============================================================
LUNAPLE REDESIGN LAYER (Option A) — from the design handoff.
Self-contained: token overrides + chrome + bento + glass.
Link this AFTER common.css on a page to apply the new design.
common.css is NOT modified — removing this link fully reverts.
============================================================ */
/* ---- Token overrides (Mint Luxe — light) ---- */
:root {
--bg-primary: #BEDDC9;
--bg-surface-1: #FFFFFF;
--bg-surface-2: #E8F2EC;
--bg-surface-3: #DCEAE2;
--bg-glass: rgba(255, 255, 255, 0.20);
--glass-blur: 1px;
--bg-glass-solid: rgba(255, 255, 255, 0.92);
--bg-header: rgba(240, 247, 244, 0.55);
--color-primary: #B0892F;
--color-primary-dim: rgba(176, 137, 47, 0.10);
--color-secondary: #C9A24B;
--color-tertiary: #5E7E76;
--color-tarot: #B0892F; --color-dream: #B0892F; --color-astrology: #B0892F;
--text-primary: #1F3A34;
--text-secondary: #5E7E76;
--text-muted: #8AA39C;
--text-accent: #B0892F;
--border-glass: rgba(31, 58, 52, 0.10);
--border-hover: rgba(176, 137, 47, 0.35);
--gradient-cta: linear-gradient(140deg, #C9A24B, #AE842E);
--gradient-gold: linear-gradient(160deg, #E3C173, #9c7a35);
--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
--font-serif: 'EB Garamond', 'Georgia', serif;
--shadow-lg: 0 18px 40px -28px rgba(40, 80, 70, 0.30);
}
[data-theme="dark"] {
--bg-primary: #1A1016;
--bg-surface-1: #241820;
--bg-surface-2: rgba(216, 130, 92, 0.14);
--bg-surface-3: rgba(247, 240, 228, 0.06);
--bg-glass: rgba(36, 24, 32, 0.32);
--glass-blur: 6px;
--bg-glass-solid: #241820;
--bg-header: rgba(22, 13, 18, 0.72);
--color-primary: #E3C173;
--color-secondary: #E3C173;
--color-tarot: #E3C173; --color-dream: #E3C173; --color-astrology: #E3C173;
--text-primary: #F6ECDC;
--text-secondary: #C3B099;
--text-muted: #9C8C78;
--text-accent: #E3C173;
--border-glass: rgba(227, 193, 115, 0.40);
--border-hover: rgba(227, 193, 115, 0.40);
--gradient-cta: linear-gradient(150deg, #E3C173, #C99A45);
}
/* ---- Texture backgrounds ---- */
body {
background: url('/assets/redesign/bg-mint-tree-green.png') center center / cover no-repeat fixed, var(--bg-primary) !important;
}
[data-theme="dark"] body {
background: url('/assets/redesign/bg-darkstone.png') center center / cover no-repeat fixed, #1A1410 !important;
}
.bg-cosmos { display: none !important; }
/* --- Injected app shell (non-index pages keep their header as a slim topbar) --- */
.rd-app-sidebar { position: fixed !important; left: 0; top: 0; height: 100vh; z-index: 40; align-self: auto !important; }
body.rd-app { padding-left: 262px; }
body.rd-app .site-header { background: transparent !important; box-shadow: none !important; border-bottom: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.rd-app .header-nav-desktop > a { display: none !important; }
@media (min-width: 901px) { body.rd-app .header-logo, body.rd-app .header-menu-btn { display: none !important; } }
@media (max-width: 900px) { body.rd-app { padding-left: 0; padding-bottom: 82px; } }
/* Narrow phones (360dp Galaxy class): wordmark + Get Credits + lang pill can't
all fit — keep the moon icon, drop the wordmark text so nothing overlaps. */
@media (max-width: 384px) { .header-logo-text { display: none !important; } }
/* --- Glass on common card classes (all pages) --- */
.glass-card, .glass-card-static, .card, .service-card, .cta-card {
background: var(--bg-glass) !important;
-webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--border-glass) !important;
}
/* ---- Shell: sidebar + main ---- */
.rd-shell { display: flex; min-height: 100vh; align-items: flex-start; }
.rd-sidebar {
width: 262px; flex-shrink: 0; align-self: stretch; box-sizing: border-box;
background: var(--bg-glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
border-right: 1px solid var(--border-glass);
display: flex; flex-direction: column; padding: 28px 18px;
position: sticky; top: 0; height: 100vh;
}
.rd-logo { display: flex; align-items: center; gap: 10px; padding: 0 8px 4px; text-decoration: none; }
.rd-logo img { width: 30px; height: 30px; object-fit: contain; }
.rd-logo span { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--text-primary); }
.rd-nav { margin-top: 30px; display: flex; flex-direction: column; gap: 3px; }
.rd-nav a { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 13px; font-size: 14.5px; font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: color .2s, background .2s; }
.rd-nav a:hover { color: var(--text-primary); }
.rd-nav a.active { background: var(--bg-glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); color: var(--color-primary); box-shadow: var(--shadow-md); }
.rd-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.rd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rd-topbar { display: flex; align-items: center; justify-content: space-between; padding: 22px 40px 0; gap: 16px; }
.rd-topbar .rd-logo-mobile { display: none; }
.rd-greet-label { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--text-secondary); }
.rd-greet-h1 { font-family: var(--font-display); font-weight: 500; font-size: 38px; margin: 5px 0 0; color: var(--text-primary); }
.rd-greet-h1 em { font-style: italic; color: var(--color-primary); }
.rd-top-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.rd-icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-glass); background: var(--bg-glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-primary); flex-shrink: 0; }
.rd-scroll { flex: 1; min-width: 0; padding: 26px 40px 60px; }
/* ---- Bento ---- */
.rd-bento { max-width: 1120px; display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto auto auto; gap: 18px; }
.rd-card { background: var(--bg-glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border-glass); border-radius: 24px; padding: 24px; box-shadow: var(--shadow-lg); }
.rd-luna { grid-row: span 3; display: flex; flex-direction: column; }
.rd-luna-head { display: flex; align-items: center; gap: 12px; }
.rd-luna-head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border-glass); }
.rd-luna-name { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--text-primary); line-height: 1; }
.rd-online { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.rd-online .dot { width: 6px; height: 6px; border-radius: 50%; background: #5a9e7a; }
.rd-online span { font-size: 12px; color: var(--text-secondary); }
.rd-cotd { background: linear-gradient(150deg, #2A1A24, #3A2230); border-radius: 24px; padding: 22px; box-shadow: 0 22px 44px -26px rgba(60,30,40,.5); display: flex; gap: 18px; align-items: center; cursor: pointer; text-decoration: none; }
.rd-cotd-img { width: 90px; flex-shrink: 0; border-radius: 12px; padding: 4px; background: linear-gradient(160deg, #E3C173, #9c7a35); }
.rd-cotd-img img { width: 100%; display: block; border-radius: 9px; }
.rd-cotd-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; color: #E3C173; }
.rd-cotd-title { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: #F6ECDC; margin-top: 6px; }
.rd-cotd p { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.45; color: #C3B099; margin: 7px 0 0; }
.rd-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rd-tile { background: var(--bg-glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border-glass); border-radius: 22px; padding: 20px; box-shadow: var(--shadow-lg); text-decoration: none; display: block; }
.rd-tile .t { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--text-primary); margin-top: 10px; }
.rd-tile p { font-family: var(--font-serif); font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 6px 0 0; }
.rd-icon { color: var(--color-primary); flex-shrink: 0; }
.rd-jump { margin-top: 26px; max-width: 1120px; }
.rd-jump-head { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.rd-jump-head .lab { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--text-secondary); }
.rd-jump-head .rule { flex: 1; height: 1px; background: var(--border-glass); }
.rd-jump-head .all { font-size: 13px; font-weight: 600; color: var(--color-primary); }
.rd-jump-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rd-jump-card { display: flex; align-items: center; gap: 12px; background: var(--bg-glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border-glass); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-lg); text-decoration: none; }
.rd-jump-card span { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text-primary); }
/* ---- Luna chat (real widget) inside the bento card ---- */
.rd-luna .luna-chat-messages { flex: 1; margin-top: 18px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.rd-luna .luna-chat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rd-luna .chip { font-family: var(--font-body); font-size: 13px; padding: 9px 14px; border-radius: 100px; border: 1px solid var(--border-glass); background: var(--bg-glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); color: var(--text-secondary); cursor: pointer; }
.rd-luna .luna-chat-input { margin-top: 16px; display: flex; align-items: center; gap: 11px; background: var(--bg-glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border-glass); border-radius: 16px; padding: 8px 8px 8px 16px; }
.rd-luna .luna-chat-input input { flex: 1; border: none; background: transparent; font-family: var(--font-serif); font-size: 16px; color: var(--text-primary); outline: none; }
.rd-luna .luna-send-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--gradient-cta); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rd-luna .luna-send-btn svg { width: 16px; height: 16px; fill: currentColor; }
/* ---- Bottom nav (mobile) ---- */
.rd-bottomnav { display: none; }
.rd-bn { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: var(--text-muted); text-decoration: none; }
.rd-bn.active { color: var(--color-primary); }
.rd-bn-luna { margin-top: -14px; }
.rd-bn-luna img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--bg-surface-1); box-shadow: var(--shadow-md); object-fit: cover; }
@media (max-width: 900px) {
.rd-sidebar { display: none; }
.rd-topbar { padding: 14px 16px 0; }
.rd-topbar .rd-logo-mobile { display: flex; }
.rd-greet-h1 { font-size: 28px; }
.rd-scroll { padding: 18px 16px 96px; }
.rd-bento { grid-template-columns: 1fr; }
.rd-luna { grid-row: auto; }
.rd-jump-grid { grid-template-columns: 1fr 1fr; }
.rd-bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 74px; background: var(--bg-glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border-top: 1px solid var(--border-glass); align-items: center; justify-content: space-around; padding: 0 8px; z-index: 50; }
}
/* Narrow phones: logo + greeting + actions can't share one topbar row on the
index shell — wrap the greeting onto its own full-width line below. */
@media (max-width: 480px) {
.rd-topbar { flex-wrap: wrap; }
.rd-topbar > div:not(.rd-top-actions) { order: 3; flex-basis: 100%; margin-top: 6px; }
/* The index action row (Sign In · theme · lang · menu) has no room for the
injected top-up pill on narrow phones — it stays in the menu + all other pages. */
.rd-topbar .credit-topup-mobile { display: none !important; }
.rd-topbar .rd-top-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; gap: 8px; }
/* Compact the remaining controls so they share one row at 360dp. */
.rd-topbar .rd-top-actions .btn-sm { padding: 6px 12px; font-size: 12px; }
.rd-topbar .rd-icon-btn { width: 36px; height: 36px; }
.rd-topbar #lang-selector select { font-size: 11px !important; padding: 3px 6px !important; }
}
/* ---- Footer blends with the texture (no solid block; both modes) ---- */
.site-footer {
background: transparent !important;
box-shadow: none !important;
border-top: 1px solid var(--border-glass);
margin-top: 36px;
}
.site-footer .footer-logo {
color: var(--text-accent) !important;
-webkit-text-fill-color: var(--text-accent) !important;
background: none !important;
}
.site-footer .footer-tagline,
.site-footer .footer-links a,
.site-footer .footer-business,
.site-footer .footer-business a,
.site-footer .footer-copyright {
color: var(--text-secondary) !important;
}
/* ---- Dark-mode tarot card back ----
Light mode keeps the existing mint back; dark mode uses the new dark back.
Covers ![]()
backs (tarot spreads, rendered with the CARD_BACK src) and the
CSS background back on the Today pick cards. */
[data-theme="dark"] img[src*="card-back-mint"] {
content: url('/assets/tarot/card-back-dark.jpg');
}
[data-theme="dark"] .dc-pick-card {
background-image: url('/assets/tarot/card-back-dark.jpg');
}
/* ---- Remove the tarot title glow ----
.tarot-header::before paints a bright white ellipse (rgba(244,249,247,0.7))
behind the heading. It was tuned for the old flat background; on the textured
redesign background it reads as a harsh spotlight (worst in dark mode). The
new background has enough contrast, so drop the glow on both header states
(initial "Tarot Reading" and the "Choose Your Cards" pick screen reuse it). */
.tarot-header::before { display: none !important; }
/* Hide the legacy bottom tab-bar — the injected .rd-bottomnav replaces it.
~30 pages still ship