/* fable5-store-chrome.css — Fable-5 "Circle" CHROME reskin for the SL education store (Kohana V8 theme). web-ops-head 2026-06-30, task tq-1782844083667-571b. UNLIKE the 2026-06-16 fable5-store.css (which was a card-only .fab5-* ADDITIVE layer that deliberately left chrome on purple.theme — the false-pass Karen rejected 06-22), THIS file OVERRIDES the real chrome selectors (#header, .top-header, .main-menu, .user-menu, .cart, .search-block, #footer, ...) to the locked Fable-5 design. Load LAST in (after style.css + purple.theme.css) so it wins the cascade. Markup/PHP unchanged — presentation only. */ :root{ --f5-cream:#F5F0EB; --f5-plum:#5B2E5A; --f5-midnight:#352040; --f5-mauve:#C4A9B5; --f5-ink:#2A1E2A; --f5-paper:#FFFFFF; --f5-line:#E6DBE2; --f5-muted:#6B5A66; --f5-gold:#F2C53D; --f5-footer:#241531; --f5-display:'Fraunces',Georgia,serif; --f5-ui:'Mazzard Soft M','Quicksand','Nunito',sans-serif; --f5-body:'Mazzard Soft M','Nunito',sans-serif; } /* ---- ground + type ---- */ body{background:var(--f5-cream)!important;color:var(--f5-ink)!important; font-family:var(--f5-body);-webkit-font-smoothing:antialiased} h1,h2,h3{font-family:var(--f5-display);font-weight:560;color:var(--f5-plum);letter-spacing:-.01em} /* ===================== HEADER CHROME ===================== */ #header{background:var(--f5-cream);border-bottom:1px solid var(--f5-line);box-shadow:none} .top-header{background:var(--f5-cream);padding:14px 0} .top-header .container{display:flex;align-items:center;gap:20px} #header .logo img{height:46px;width:auto} /* search → rounded pill on cream */ .search-block .input-group{border:1px solid var(--f5-line);border-radius:999px; background:var(--f5-paper);overflow:hidden} .search-block .input-group-text{background:transparent;border:none;color:var(--f5-muted); font-family:var(--f5-ui);font-weight:700} .search-block .form-control{border:none;box-shadow:none;font-family:var(--f5-body)} .search-block #search-button{color:var(--f5-plum);cursor:pointer} .search-block #search-button:hover{color:var(--f5-midnight)} /* lang + user links → plum UI type */ .lang-switcher .menu a,.user-menu a{font-family:var(--f5-ui);font-weight:700; font-size:14px;color:var(--f5-plum);text-decoration:none} .lang-switcher .menu a:hover,.user-menu a:hover{color:var(--f5-midnight)} .user-menu .username{font-family:var(--f5-ui);color:var(--f5-muted)} .user-menu .username span{color:var(--f5-midnight);font-weight:800} /* cart → gold Fable-5 pill (matches the locked .store-pill) */ .user-details .cart a{display:inline-flex;align-items:center;gap:8px; background:var(--f5-gold);color:var(--f5-midnight)!important; font-family:var(--f5-ui);font-weight:800;font-size:14px;letter-spacing:.04em; text-transform:uppercase;text-decoration:none;padding:9px 16px;border-radius:999px; transition:background .15s ease,transform .15s ease} .user-details .cart a:hover{background:#ffd84d;transform:translateY(-1px)} .user-details .cart .badge,#mobile-menu .badge{background:var(--f5-plum);color:#fff} /* ---- main nav / mega-menu ---- */ .main-menu{background:var(--f5-paper);border-bottom:1px solid var(--f5-line)} .main-menu .container{display:flex;align-items:center} .main-menu a,.main-menu .switch-menu-block,.main-menu .all-switch-menu-block{ font-family:var(--f5-ui);font-weight:600;font-size:15px;color:var(--f5-plum)} .main-menu a:hover{color:var(--f5-midnight);text-decoration:underline; text-underline-offset:5px;text-decoration-color:var(--f5-mauve);text-decoration-thickness:2px} .sub-menu-container,.all-sub-menu-container{background:var(--f5-paper); border:1px solid var(--f5-line);box-shadow:0 18px 44px -24px rgba(53,32,64,.45);border-radius:0 0 14px 14px} .sub-menu-block a,.all-sub-menu-block a{color:var(--f5-plum)} .sub-menu-block a:hover,.all-sub-menu-block a:hover{color:var(--f5-midnight)} /* mobile bars → plum */ #mobile-menu .bars .bar{background:var(--f5-plum)} #mobile-menu .menu a{color:var(--f5-plum)} /* ===================== FOOTER CHROME ===================== */ /* newsletter band → cream→plum brand thread */ .footer-newsletter{background:var(--f5-cream)!important;color:var(--f5-midnight)!important; border-top:1px solid var(--f5-line)} .footer-newsletter h3{font-family:var(--f5-display);color:var(--f5-plum)} .footer-newsletter a{background:var(--f5-midnight)!important;color:var(--f5-cream)!important; border-radius:999px!important;font-family:var(--f5-ui);font-weight:700} .footer-newsletter a:hover{background:var(--f5-plum)!important} #footer{background:var(--f5-footer);color:#cdbcc7;padding:52px 0 26px} #footer .column-title{color:#fff;font-family:var(--f5-ui);font-weight:800; font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px} #footer .footer-menu .menu a{color:var(--f5-mauve);font-family:var(--f5-body); font-size:14px;text-decoration:none} #footer .footer-menu .menu a:hover{color:#fff;text-decoration:underline} #footer .contacts address,#footer .contacts a{color:var(--f5-mauve)} #footer .powered_by{color:rgba(255,255,255,.72)} .footer-subsection{border-top:1px solid rgba(255,255,255,.14);margin-top:28px;padding-top:22px} .footer-subsection .privacy a{color:rgba(255,255,255,.8);font-family:var(--f5-ui);font-weight:700} .footer-subsection .copyright{color:rgba(255,255,255,.6);font-size:13px} /* AI-disclosure + BACB non-endorsement (external-page canon) */ .f5-disclosure{max-width:1180px;margin:18px auto 0;padding:0 24px; color:#9a8a96;font-size:11.5px;line-height:1.55;font-family:var(--f5-body)} .f5-disclosure .ai{color:var(--f5-mauve);font-size:12px;margin-bottom:6px;display:block} /* ===== SPECIFICITY-MATCHED HEADER OVERRIDES ===== purple.theme.css styles the WHOLE header interior with deep #header .top-header .container ... selectors (specificity 0,1,3-5,x). The shallow rules above lose to those regardless of load order. These re-state the chrome at purple.theme's EXACT depth so — loading last — they win. (NN#12 corrected model: match the legacy selector's specificity, not !important spam.) */ /* top utility bar: purple #6f3a68 -> cream; everything on it flips to plum/midnight ink */ #header .top-header{background-color:var(--f5-cream)} #header .top-header .container .logo>a{color:var(--f5-plum)} /* user menu (Login/Register/Account): was #fff on purple -> plum on cream */ #header .top-header .container .user-details .user-menu li a{color:var(--f5-plum)} #header .top-header .container .user-details .user-menu li a:hover{color:var(--f5-midnight)} #header .top-header .container .user-details .user-menu li.username{color:var(--f5-muted)} /* cart -> gold Fable-5 pill, midnight ink (override BOTH bg+color at matched depth) */ #header .top-header .container .user-details .cart a{ background:var(--f5-gold);color:var(--f5-midnight);border-radius:999px; padding:9px 16px;font-family:var(--f5-ui);font-weight:800;letter-spacing:.04em} #header .top-header .container .user-details .cart a:hover, #header .top-header .container .user-details .cart a:hover a{color:var(--f5-midnight)} #header .top-header .container .user-details .cart .badge{background-color:var(--f5-plum);border-color:var(--f5-plum);color:#fff} /* search affordances */ #header .top-header .container .search-block .input-group .input-group-text#search-button{ background-color:var(--f5-plum);border-color:var(--f5-plum)} #header .top-header .container .lang-switcher .menu-container .menu li a{color:var(--f5-plum)} #header .top-header .container .lang-switcher .menu-container .menu li a:hover{color:var(--f5-midnight);background-color:#fff} /* main nav: keep paper bar, flip link ink purple-era black/blue -> plum/midnight */ #header .main-menu{background-color:var(--f5-paper);border-bottom:1px solid var(--f5-line)} #header .main-menu .container .switchers li a.switch-menu-block{color:var(--f5-plum)} #header .main-menu .container .switchers li.active a, #header .main-menu .container .switchers li:hover a{color:var(--f5-midnight)} #header .main-menu .container .sub-menu-container .sub-menu-block .container .sub_header a{color:var(--f5-plum)} #header .main-menu .container .sub-menu-container .sub-menu-block .container .sub_header a:hover{color:var(--f5-midnight)} #header .main-menu .container .sub-menu-container .sub-menu-block .container .sub_header ul li a{color:var(--f5-ink)} #header .main-menu .container .sub-menu-container .sub-menu-block .container .sub_header ul li a:hover, #header .main-menu .container .sub-menu-container .sub-menu-block .left_panel li .all-switch-menu-block:hover{color:var(--f5-midnight)} #header .main-menu .container .sub-menu-container .sub-menu-block .left_panel li .all-switch-menu-block{color:var(--f5-plum)} /* mobile search bar: purple mauve -> cream + plum rule */ #header .mobile-search-block{background-color:var(--f5-cream);border-bottom:2px solid var(--f5-plum)} @media(max-width:1100px){.main-menu .container{flex-wrap:wrap}} @media(max-width:760px){#footer .footer-menu{flex-wrap:wrap}}