/* File: wp-content/themes/astra-child-club/assets/shell.css * ============================================================================= * DrPenClub shell — header/footer styles mirroring the Next.js frontend. * Token hex values copied from src/app/globals.css so colors match exactly. * This is the consolidated, cleaned build: all incremental !important patches * merged into the main rules, duplicates removed, overflow bug fixed. * Author: jiamadebai * ========================================================================== */ :root { --drpc-primary: #1b2a3a; --drpc-accent: #2d7fe0; --drpc-accent-hover: #1e6ac8; --drpc-accent-light: #eaf2fd; --drpc-error: #e0322b; --drpc-gray-500: #8a94a3; --drpc-gray-600: #69727f; --drpc-gray-800: #2c3a4a; --drpc-border-light: #e6eaef; --drpc-surface: #f5f7fa; --drpc-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif; } /* Reset + lock font against Astra (which forces serif on headings/logo) */ .drpc-header, .drpc-header *, .drpc-footer, .drpc-footer * { box-sizing: border-box; font-family: var(--drpc-font) !important; } /* ---- Page-wide font, matching the Next.js frontend ---------------------- Astra injects inline CSS setting Work Sans on body/buttons/inputs and DM Serif Display on every heading. shell.css is enqueued after the Astra stylesheets, so !important here wins. The selector list mirrors the ones Astra actually targets — checked against the rendered /cart/ markup on 2026-07-16 — so cart, checkout and my-account body text matches the React side rather than only the shell. Author: jiamadebai */ body, button, input, select, textarea, .ast-button, .ast-custom-button, h1, h2, h3, h4, h5, h6, .entry-content :where(h1, h2, h3, h4, h5, h6), .site-title, .site-title a, .wp-block-button__link, .wp-block-search .wp-block-search__button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, [class*="wc-block"] { font-family: var(--drpc-font) !important; } /* Prevent horizontal overflow without collapsing the centered container. NOTE: do NOT set max-width:100% on the inner wrappers — that removes the 1440/1200px centered layout and makes content span edge-to-edge. */ .drpc-header, .drpc-footer { overflow-x: hidden; } /* ---- Announcement bar ---------------------------------------------------- */ .drpc-announce { background: var(--drpc-primary); color: #fff; text-align: center; padding: 0.5rem 1rem; } .drpc-announce p { margin: 0; font-size: 12px; letter-spacing: 0.02em; } /* ---- Header -------------------------------------------------------------- */ .drpc-header { position: sticky; top: 0; z-index: 999; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--drpc-border-light); } .drpc-header-inner { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .drpc-logo { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--drpc-primary); text-decoration: none; white-space: nowrap; } .drpc-logo span { color: var(--drpc-accent); } /* ---- Primary nav (top-level only; dropdowns intentionally disabled) ------ */ .drpc-nav-list { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; } .drpc-nav-item { position: relative; list-style: none; } .drpc-nav-link { display: flex; align-items: center; gap: 0.25rem; font-size: 13px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--drpc-gray-600); text-decoration: none; padding: 1rem 0; transition: color 0.15s ease; white-space: nowrap; } .drpc-nav-item:hover > .drpc-nav-link { color: var(--drpc-primary); } .drpc-nav-item.drpc-nav-sale > .drpc-nav-link, .drpc-nav-item.drpc-sale > .drpc-nav-link { color: var(--drpc-error); } /* Dropdowns are fully disabled on the functional-page shell. The submenu markup still exists but is never shown; chevrons are hidden too. */ .drpc-submenu { display: none !important; } .drpc-nav-link .drpc-ico { display: none !important; } /* ---- Right actions ------------------------------------------------------- */ .drpc-actions { display: flex; align-items: center; gap: 0.5rem; } .drpc-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; color: var(--drpc-gray-500); background: none; border: none; border-radius: 0; box-shadow: none; cursor: pointer; text-decoration: none; transition: color 0.15s ease; } .drpc-icon-btn:hover, .drpc-icon-btn:focus, .drpc-icon-btn:active, .drpc-icon-btn:focus-visible { background: none; background-color: transparent; border: none; border-radius: 0; box-shadow: none; outline: none; } .drpc-icon-btn:hover { color: var(--drpc-primary); } .drpc-icon-btn:hover .drpc-ico { stroke: var(--drpc-primary); } .drpc-account.is-authed { color: var(--drpc-accent); } .drpc-header .drpc-ico { width: 18px; height: 18px; stroke: currentColor; fill: none; } .drpc-cart-count { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: 700; color: #fff; background: var(--drpc-accent); border-radius: 999px; display: flex; align-items: center; justify-content: center; line-height: 1; } .drpc-cart-count.is-empty { display: none; } .drpc-burger { display: none; } .drpc-burger-close { display: none; } .drpc-burger.is-open .drpc-burger-open { display: none; } .drpc-burger.is-open .drpc-burger-close { display: inline-flex; } /* ---- Search panel -------------------------------------------------------- */ .drpc-search-panel { border-top: 1px solid var(--drpc-border-light); background: #fff; } .drpc-search-panel[hidden] { display: none !important; } .drpc-search-form { max-width: 1440px; margin: 0 auto; padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 0.5rem; } .drpc-search-form .drpc-ico { display: inline-flex !important; color: var(--drpc-gray-500); flex: none; } .drpc-search-form input { flex: 1; border: none; outline: none; font-size: 15px; padding: 0.4rem 0; background: transparent; color: var(--drpc-primary); } .drpc-search-form button { border: none; background: var(--drpc-primary); color: #fff; font-size: 13px; padding: 0.5rem 1.1rem; border-radius: 999px; cursor: pointer; } /* ---- Mobile nav (top-level links only, no accordion) --------------------- */ .drpc-mobile-nav { border-top: 1px solid var(--drpc-border-light); background: #fff; padding: 0.5rem 1.5rem 2rem; } .drpc-mobile-nav[hidden] { display: none !important; } .drpc-mobile-list { list-style: none; margin: 0; padding: 0; } .drpc-mobile-list > li { border-bottom: 1px solid var(--drpc-border-light); list-style: none; } .drpc-mobile-link { display: block; padding: 0.85rem 0; font-size: 15px; color: var(--drpc-gray-800); text-decoration: none; } /* ---- Responsive toggles -------------------------------------------------- */ @media (max-width: 1023px) { .drpc-nav { display: none; } .drpc-burger { display: inline-flex; } } @media (min-width: 1024px) { .drpc-mobile-nav { display: none !important; } } @media (max-width: 640px) { .drpc-account { display: none; } } /* ---- Footer -------------------------------------------------------------- */ .drpc-footer { background: var(--drpc-primary); color: rgba(255, 255, 255, 0.8); } .drpc-footer-inner { max-width: 1200px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; } .drpc-footer-news { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .drpc-footer-news-inner { padding-top: 3rem; padding-bottom: 3rem; display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; } .drpc-footer-news h3 { color: #fff; font-size: 18px; font-weight: 600; margin: 0 0 0.25rem; } .drpc-footer-news p { font-size: 14px; color: rgba(255, 255, 255, 0.5); margin: 0; } .drpc-news-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .drpc-news-form input, .drpc-news-form input[type="email"] { flex: 1; min-width: 240px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.1); color: #fff; border-radius: 999px; padding: 0.75rem 1.25rem; font-size: 14px; outline: none; box-shadow: none; background-image: none; } .drpc-news-form input::placeholder { color: rgba(255, 255, 255, 0.4); } .drpc-news-form input[type="email"]:focus { border-color: var(--drpc-accent); } .drpc-news-form button { border: none; background: var(--drpc-accent); color: #fff; border-radius: 999px; padding: 0.75rem 1.5rem; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s ease; } .drpc-news-form button:hover { background: var(--drpc-accent-hover); } .drpc-news-msg { font-size: 12px; width: 100%; } .drpc-news-msg.is-error { color: #ffb4b0; } .drpc-news-msg.is-ok { color: #8fe3c0; } .drpc-footer-grid { padding-top: 3rem; padding-bottom: 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .drpc-footer-brand { grid-column: span 2; } .drpc-logo--light { color: #fff; } .drpc-footer-brand p { font-size: 12px; color: rgba(255, 255, 255, 0.4); line-height: 1.7; margin: 0.75rem 0 0; } .drpc-footer-col h4 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.6); margin: 0 0 1rem; } .drpc-footer-col ul { list-style: none; margin: 0; padding: 0; } .drpc-footer-col li { margin-bottom: 0.625rem; } .drpc-footer-col a { font-size: 14px; color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color 0.15s ease; } .drpc-footer-col a:hover { color: #fff; } .drpc-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); } .drpc-footer-bottom-inner { padding-top: 1.25rem; padding-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; } .drpc-disclaimer, .drpc-copy { font-size: 12px; color: rgba(255, 255, 255, 0.3); margin: 0 0 0.25rem; } .drpc-pay { display: flex; gap: 1rem; font-size: 12px; color: rgba(255, 255, 255, 0.3); } @media (min-width: 768px) { .drpc-footer-news-inner { flex-direction: row; align-items: center; justify-content: space-between; } .drpc-footer-grid { grid-template-columns: repeat(5, 1fr); } .drpc-footer-brand { grid-column: span 1; } .drpc-footer-bottom-inner { flex-direction: row; align-items: center; justify-content: space-between; } } @media (max-width: 640px) { .drpc-news-form { flex-wrap: wrap; } .drpc-news-form input, .drpc-news-form input[type="email"] { min-width: 0; width: 100%; } .drpc-news-form button { width: 100%; } } /* Logo image — mirrors Next.js Header (h-15 w-auto). Author: jiamadebai */ .drpc-logo-img { height: 57px !important; width: auto !important; max-width: 300px; object-fit: contain; display: block; } /* Footer logo — smaller than header. Author: jiamadebai */ .drpc-footer .drpc-logo-img { height: 24px !important; }