/* ============================================================ THE SHIFT — shared brand theme, ported onto RECLAIMED ------------------------------------------------------------ Retheme layer only: no markup or content changes. Loaded LAST in every so it overrides the per-page inline styles. Two levers do the work: 1) Remap the existing design tokens to THE SHIFT's dusty-rose / pink / cream palette (every component reads these via var()). 2) Re-apply THE SHIFT's signature "neo-brutalist" motif — hard ink borders + un-blurred offset drop shadows + rounded rects, with buttons that "press into" their shadow on hover. Fonts (Fraunces + Karla) are swapped in the page markup itself. ============================================================ */ :root{ /* ---- ink / neutrals ---- */ --ink:#141014; --stone:#6B5C62; --line:#EAD9DE; /* soft rose-tinted divider */ /* ---- backgrounds ---- */ --cream:#FBF9F7; --warm-cream:#FBF9F7; --sand:#FADEE7; /* soft pink band */ --mist:#F7EBEF; /* barely-there blush */ /* ---- primary (was green "plum/clay") -> deep rose ---- */ --plum:#A9636F; --plum-deep:#8A4E59; --clay:#A9636F; --clay-deep:#8A4E59; --green:#C5808F; --green-deep:#A9636F; /* ---- accents (was gold "rose") -> rose / pink ---- */ --rose:#C5808F; --rose-soft:#F2C3D3; --gold:#C5808F; --gold-light:#F2C3D3; /* ---- THE SHIFT native tokens (available for overrides) ---- */ --rose-deep:#A9636F; --pink:#F2C3D3; --pink-pale:#FADEE7; --coral:#E3695D; --white:#fff; --grey:#6B5C62; /* ---- signature offset shadow ---- */ --shadow:4px 4px 0 var(--ink); --shadow-lg:6px 6px 0 var(--ink); } /* ---------- Buttons: rounded-rect, hard border, press-in hover ---------- */ .btn,.btn-primary,.btn-ghost,.btn-soft{ border:2px solid var(--ink) !important; border-radius:14px !important; box-shadow:var(--shadow) !important; transition:transform .12s ease, box-shadow .12s ease, background .2s ease !important; } .btn:hover,.btn-primary:hover,.btn-soft:hover{ transform:translate(3px,3px) !important; box-shadow:1px 1px 0 var(--ink) !important; } /* ghost button: keep it quieter but still on-brand */ .btn-ghost{ background:var(--white) !important; color:var(--ink) !important; } .btn-ghost:hover{ transform:translate(3px,3px) !important; box-shadow:1px 1px 0 var(--ink) !important; border-bottom-color:var(--ink) !important; } /* ---------- Nav CTA: small pill -> bordered chip ---------- */ .nav-cta{ border:2px solid var(--ink) !important; border-radius:10px !important; box-shadow:3px 3px 0 var(--ink) !important; transition:transform .12s ease, box-shadow .12s ease !important; } .nav-cta:hover{ transform:translate(2px,2px) !important; box-shadow:1px 1px 0 var(--ink) !important; } /* ---------- Cards & tiles: hard border + offset shadow ---------- */ .card,.tier,.t-card,.res,.hub,.tile,.phase,.slide,.pain-card{ border:2px solid var(--ink) !important; box-shadow:var(--shadow-lg) !important; } .tier.featured{ border:2px solid var(--ink) !important; box-shadow:var(--shadow-lg) !important; } /* the "Most chosen" ribbon and pill accents pick up rose from tokens; give the ribbon the hard edge too */ .tier.featured::after{ border:2px solid var(--ink) !important; border-radius:8px !important; box-shadow:var(--shadow) !important; } /* ---------- FAQ / accordion cards ---------- */ details.card,details.faq,.faq-item{ border:2px solid var(--ink) !important; box-shadow:var(--shadow) !important; } /* ---------- Layout: photos removed ---------- */ /* pillar rows were text + image; with imagery gone, run text full-width */ .pillar{grid-template-columns:1fr !important;} /* ---------- Focus visibility (accessibility) ---------- */ a:focus-visible,button:focus-visible,.btn:focus-visible, summary:focus-visible,input:focus-visible,textarea:focus-visible{ outline:3px solid var(--rose-deep); outline-offset:2px; } /* ---------- Respect reduced-motion ---------- */ @media (prefers-reduced-motion:reduce){ .btn,.btn-primary,.btn-ghost,.btn-soft{transition:none !important;} .btn:hover,.btn-primary:hover,.btn-ghost:hover,.btn-soft:hover{ transform:none !important; } }