/* ============================================================ style.css — Iron Roots Supply Universal stylesheet with complete header functionality, background bleed, and toolkit compass rose system. Mobile optimized with space-saving corrections. ============================================================ */ /* ── Google Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;600;700&display=swap'); /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Design tokens ── */ :root { /* Parchment palette */ --p-lightest: #fdf6e0; --p-light: #f6ecce; --p-mid: #ecdaa4; --p-warm: #d4bc7e; --p-dark: #c9a96e; --p-deep: #a07840; --p-edge: #7a5c2a; --p-shadow: #5a3e1a; --p-ink: #2c1a06; /* Gold accent */ --gold: #b8860b; --gold-b: #d4a017; --gold-pale: #f0c878; --gold-deep: #8a6208; /* Cylinder cap width — scales with viewport */ --cap-w: clamp(20px, 3.4vw, 48px); /* Page background */ --page-bg: #1c1108; /* Header font sizes — scale smoothly */ --f-brand: clamp(14px, 2.2vw, 30px); --f-tagline: clamp(10px, 1vw, 13px); --f-nav: clamp(11px, 1.1vw, 14px); --f-ui: clamp(11px, 1vw, 14px); --f-icon: clamp(17px, 1.8vw, 22px); } /* ── Base body — Universal dark background for all pages ── */ body { font-family: 'Cinzel', serif; line-height: 1.6; color: var(--p-light); background: var(--page-bg) linear-gradient(135deg, #1c1108 0%, #2a1810 50%, #1c1108 100%); min-height: 100vh; display: flex; flex-direction: column; } /* Homepage background (b.jpg retired — flat page background) */ body.page-home { background: var(--page-bg) fixed; } /* Product pages get their own backgrounds. THREE DEAD RULES LIVED HERE, all pointing at images that do not exist: · body.page-salvme -> /salvme-bg.jpg an old misspelling of the product, worn by no page · body.page-bugmenot -> /bugmenot-bg.jpg Bug·Bane's former name, worn by no page · body.page-fireskull -> /fireskull-bg.jpg the image was deleted and the CLASS WAS DROPPED FROM THE HTML, so fireskull.html shipped with a bare . It fell through to the generic gradient while Salve·Me and Bug·Bane each carried a stone texture — the odd page out of the three, and not on purpose. The class is back on the page and the rule points at the dark stone Bug·Bane already uses: that file exists, and dark stone is the right ground for an ember palette. Salve·Me stays the light one. */ body.page-fireskull { background: var(--page-bg) url('/darkstonebackground.jpg') center / cover fixed; } body.page-bugbane { background: var(--page-bg) url('/darkstonebackground.jpg') center / cover fixed; } body.page-salveme { background: var(--page-bg) url('/lightstonebackground.jpg') center / cover fixed; } body.page-cart { background: var(--page-bg) linear-gradient(45deg, #2a1810 0%, #1c1108 50%, #2a1810 100%); } body.page-account { background: var(--page-bg) linear-gradient(135deg, #1c1108 0%, #0f0804 50%, #1c1108 100%); } /* ── Shared container ── */ .container { max-width: 1400px; margin: 0 auto; padding: 0 16px; } /* ══════════════════════════════════════════════════════════ UNIVERSAL SCROLL HEADER Semi-transparent parchment allows background bleed ══════════════════════════════════════════════════════════ */ .site-header { position: sticky; top: 0; z-index: 1000; width: 100%; filter: drop-shadow(0 7px 20px rgba(0, 0, 0, 0.72)); } .scroll-wrap { position: relative; width: 100%; } /* ── Cylinder end-caps ── */ .scroll-wrap::before, .scroll-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: var(--cap-w); z-index: 10; background: linear-gradient(90deg, rgba(32, 16, 2, 0) 0%, rgba(61, 30, 4, 0.53) 8%, rgba(122, 68, 14, 0.8) 20%, rgba(196, 138, 24, 0.93) 34%, rgba(238, 221, 168, 0.98) 46%, rgba(253, 246, 224, 1) 50%, rgba(238, 221, 168, 0.98) 54%, rgba(196, 138, 24, 0.93) 66%, rgba(122, 68, 14, 0.8) 80%, rgba(61, 30, 4, 0.53) 92%, rgba(32, 16, 2, 0) 100%); } .scroll-wrap::before { left: 0; border-radius: 50% 0 0 50% / 50% 0 0 50%; box-shadow: inset -6px 0 12px rgba(0, 0, 0, 0.30), 6px 0 16px rgba(0, 0, 0, 0.40); } .scroll-wrap::after { right: 0; border-radius: 0 50% 50% 0 / 0 50% 50% 0; box-shadow: inset 6px 0 12px rgba(0, 0, 0, 0.30), -6px 0 16px rgba(0, 0, 0, 0.40); } /* ── Semi-transparent parchment body for background bleed ── */ .scroll-parch { margin: 0 var(--cap-w); position: relative; overflow: hidden; border-top: 3px solid rgba(154, 112, 48, 0.7); border-bottom: 3px solid rgba(154, 112, 48, 0.7); background: repeating-linear-gradient(0deg, rgba(120, 80, 30, 0.04) 0px, rgba(120, 80, 30, 0.04) 1px, transparent 1px, transparent 26px), repeating-linear-gradient(90deg, rgba(90, 55, 15, 0.015) 0px, rgba(90, 55, 15, 0.015) 1px, transparent 1px, transparent 60px), linear-gradient(180deg, rgba(206, 186, 112, 0.75) 0%, rgba(232, 212, 150, 0.82) 5%, rgba(244, 230, 190, 0.88) 16%, rgba(249, 242, 218, 0.92) 50%, rgba(244, 230, 190, 0.88) 80%, rgba(230, 208, 144, 0.82) 92%, rgba(204, 188, 114, 0.75) 100%); box-shadow: inset 20px 0 28px rgba(80, 48, 10, 0.15), inset -20px 0 28px rgba(80, 48, 10, 0.15); } .scroll-parch::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(90deg, rgba(70, 42, 8, 0.18) 0%, transparent 8%, transparent 92%, rgba(70, 42, 8, 0.18) 100%), linear-gradient(180deg, rgba(50, 28, 4, 0.12) 0%, transparent 22%, transparent 78%, rgba(50, 28, 4, 0.14) 100%); } /* ── Ink filigree layer ── Sits BEHIND every header element (logo, brand, nav, toolkit) and ABOVE the parchment color/grain. pointer-events: none so it can never intercept a click. Faded at the cylinder ends via mask so the gold caps stay clean. mix-blend-mode: multiply makes the ink appear printed INTO the paper. Universal — appears on every page that uses .scroll-parch. */ .scroll-parch::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0.40; mix-blend-mode: multiply; /* background-image: url("data:image/svg+xml;..."); — ink filigree hidden, swap in new design */ background-repeat: repeat; background-size: 240px 90px; -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 9%, black 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, black 9%, black 91%, transparent 100%); } /* ══════════════════════════════════════════════════════════ HEADER — 3-column grid with universal functionality ══════════════════════════════════════════════════════════ */ .scroll-rule { display: flex; align-items: center; padding: 1px 16px; position: relative; z-index: 5; } .sr-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(122, 92, 42, 0.12), rgba(184, 134, 11, 0.6) 30%, rgba(184, 134, 11, 0.6) 70%, rgba(122, 92, 42, 0.12)); } .sr-gem { font-size: 9px; color: var(--gold); padding: 0 10px; letter-spacing: 5px; flex-shrink: 0; } /* ── Scroll foot rule — mirrors top rule, offset left by logo column width ── */ .scroll-foot-rule { position: relative; display: flex; align-items: center; /* left padding = logo zone width so the rule starts at brand-col */ padding: 1px 160px 2px clamp(64px, 9.8vw, 110px); z-index: 5; } /* The horizontal line spanning the available width */ .scroll-foot-rule::before { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(122, 92, 42, 0.12), rgba(184, 134, 11, 0.6) 20%, rgba(184, 134, 11, 0.6) 80%, rgba(122, 92, 42, 0.12)); } /* ✦ ✦ ✦ gem — centered over the line */ .scroll-foot-rule::after { content: '✦ ✦ ✦'; position: absolute; left: 50%; transform: translateX(-50%); font-size: 9px; color: var(--gold); letter-spacing: 5px; padding: 0 10px; z-index: 2; } /* Mobile — zero volume, no ornament */ @media (max-width: 480px) { .scroll-foot-rule { display: none; } } .header-inner { position: relative; z-index: 5; display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; } .header-logo-mobile { display: none; } /* ── Col 1: Logo ── */ .logo-zone { display: flex; align-items: center; justify-content: center; padding: 4px 6px 4px 4px; text-decoration: none; flex-shrink: 0; } .header-logo { height: clamp(52px, 8.5vw, 96px); width: auto; display: block; filter: drop-shadow(0 2px 10px rgba(40, 20, 4, 0.65)); transition: height 0.25s ease; } /* ── Col 2: Brand + Navigation ── */ .brand-col { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 3px 8px 0px 4px; gap: 0; min-width: 0; overflow: visible; } .brand-link { text-decoration: none; display: inline-block; } .brand-title { font-family: 'Cinzel Decorative', serif; font-weight: 700; font-size: var(--f-brand); color: var(--p-shadow); letter-spacing: 0.07em; line-height: 1.05; white-space: nowrap !important; text-shadow: 0 1px 0 rgba(255, 230, 140, 0.55), 0 -1px 0 rgba(50, 28, 4, 0.20); transition: color 0.2s; } .brand-link:hover .brand-title { color: var(--gold-deep); } .brand-tagline { font-family: 'IM Fell English', serif; font-style: italic; font-size: var(--f-tagline); color: var(--p-deep); letter-spacing: 0.18em; } .brand-rule { display: flex; align-items: center; gap: 5px; margin: 3px 0 2px; } .brl, .brr { flex: 1; height: 1px; } .brl { background: linear-gradient(90deg, rgba(122, 92, 42, 0.9), rgba(184, 134, 11, 0.38) 70%, transparent); } .brr { background: linear-gradient(90deg, transparent, rgba(184, 134, 11, 0.38) 30%, rgba(122, 92, 42, 0.9)); } .brg { font-size: 6.5px; color: var(--gold); letter-spacing: 3px; flex-shrink: 0; } .inventory-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .inventory-label { font-family: 'IM Fell English', serif; font-style: italic; font-size: var(--f-nav); color: var(--p-deep); letter-spacing: 0.1em; white-space: nowrap; } .inventory-nav ul { list-style: none; display: flex; gap: 4px; flex-wrap: wrap; margin: 0; padding: 0; } .inventory-nav ul li a { font-family: 'Cinzel', serif; font-size: var(--f-nav); color: var(--p-shadow); text-decoration: none; padding: 3px 9px; border: 1px solid rgba(122, 92, 42, 0.42); border-radius: 2px; background: rgba(160, 120, 60, 0.13); letter-spacing: 0.04em; white-space: nowrap; display: block; transition: background 0.22s, border-color 0.22s, color 0.22s; } .inventory-nav ul li a:hover { background: rgba(184, 134, 11, 0.22); border-color: var(--gold); color: var(--p-edge); } /* ── Col 3: User Zone with Compass Rose ── */ .user-zone { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 5px; padding: 7px 13px 8px 8px; } .user-actions-top { display: flex; align-items: center; gap: 16px; } .cart-link, .account-link { display: flex; align-items: center; gap: 4px; text-decoration: none; color: var(--p-shadow); font-family: 'Cinzel', serif; font-size: var(--f-ui); position: relative; transition: color 0.2s; } .cart-link:hover, .account-link:hover { color: var(--gold); } .cart-link i, .account-link i { font-size: var(--f-icon); } .cart-count { position: absolute; top: -6px; right: -9px; background: var(--p-edge); color: var(--p-light); font-size: 9px; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-weight: 600; } /* ── COMPASS ROSE TOOLKIT ────────────────────────────────────────────── ALWAYS LAID OUT, even when locked. It used to be display:none until login, which meant logging in added a second child to the .user-zone column and shoved the cart and the account greeting upward — they moved and appeared to resize between the two states. Now the row is always present and only its VISIBILITY changes, so the cart and greeting never budge. */ .toolkit { display: flex; align-items: center; gap: 6px; justify-content: flex-end; min-height: 26px; /* holds the space open while locked */ opacity: 1; transition: opacity 0.3s ease, visibility 0.3s ease; } /* locked: occupies its space, shows nothing, catches nothing */ .toolkit.locked { visibility: hidden; opacity: 0; pointer-events: none; } .toolkit.unlocked { visibility: visible; opacity: 1; } .guilds-link { display: flex; align-items: center; font-size: 20px; text-decoration: none; color: var(--p-shadow); opacity: 0.65; transition: opacity 0.2s, transform 0.2s; position: relative; } .guilds-link:hover { opacity: 1; transform: scale(1.15); } .guilds-link::after { content: 'Soon'; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); font-family: 'Cinzel', serif; font-size: 7px; letter-spacing: 0.08em; color: rgba(184, 134, 11, 0.5); white-space: nowrap; } .book-link { display: flex; align-items: center; gap: 5px; text-decoration: none; color: var(--p-shadow); font-size: 20px; opacity: 0.75; transition: opacity 0.2s, transform 0.2s; } .book-link:hover { opacity: 1; transform: scale(1.15); } /* ══════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════ */ .site-footer { position: relative; overflow: hidden; padding: 18px 24px 22px; text-align: center; border-top: 2px solid #9a7030; background: repeating-linear-gradient(0deg, rgba(120, 80, 30, 0.04) 0px, rgba(120, 80, 30, 0.04) 1px, transparent 1px, transparent 28px), linear-gradient(180deg, #c4ac64 0%, #dcc888 8%, #f0e2ba 20%, #f7f0d4 50%, #f0e2ba 78%, #dcc888 90%, #c4ac64 100%); box-shadow: inset 22px 0 34px rgba(75, 45, 10, 0.12), inset -22px 0 34px rgba(75, 45, 10, 0.12); } .site-footer::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(70, 42, 8, 0.13) 0%, transparent 5%, transparent 95%, rgba(70, 42, 8, 0.13) 100%); } .footer-ornament { display: block; font-size: 9px; color: var(--gold); letter-spacing: 8px; margin-bottom: 8px; position: relative; z-index: 1; } .site-footer p { font-family: 'IM Fell English', serif; font-style: italic; font-size: clamp(10px, 1.2vw, 13px); color: var(--p-shadow); letter-spacing: 0.12em; position: relative; z-index: 1; } /* ══════════════════════════════════════════════════════════ MAIN CONTENT ══════════════════════════════════════════════════════════ */ main { flex: 1; } .hero { min-height: calc(100vh - 140px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px 24px 20px; position: relative; background: radial-gradient(ellipse at 50% 38%, rgba(160, 100, 20, 0.06) 0%, transparent 68%); } .hero-content h2 { font-family: 'Cinzel Decorative', serif; font-size: clamp(24px, 4.5vw, 58px); font-weight: 700; color: var(--gold-pale); letter-spacing: 0.1em; margin-bottom: 10px; text-shadow: 0 2px 24px rgba(184, 134, 11, 0.38), 0 0 60px rgba(184, 134, 11, 0.14); } .hero-content p { font-family: 'IM Fell English', serif; font-size: clamp(14px, 2vw, 24px); color: var(--p-mid); font-style: italic; letter-spacing: 0.22em; opacity: 0.88; max-width: 600px; margin: 0 auto; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); } .contact { padding: 8px 24px; background: rgba(20, 12, 3, 0.80); border-top: 1px solid rgba(184, 134, 11, 0.2); } .contact-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; max-width: 700px; margin: 0 auto; } .contact-label { font-family: 'Cinzel', serif; font-size: clamp(9px, 1vw, 12px); color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } .contact-sep { color: rgba(184, 134, 11, 0.4); font-size: 12px; } .contact p, .contact h2, .contact .container { display: none; } .contact a { font-family: 'Cinzel', serif; font-size: clamp(9px, 1vw, 12px); color: var(--gold-b); text-decoration: none; letter-spacing: 0.06em; white-space: nowrap; transition: color 0.2s; } .contact a:hover { color: var(--gold-pale); } /* ══════════════════════════════════════════════════════════ PRODUCT PAGES ══════════════════════════════════════════════════════════ */ .product-hero { min-height: 80vh; display: flex; align-items: center; padding-top: 24px; } .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .product-image img { width: 100%; border-radius: 12px; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55); } .product-info h1 { font-family: 'Cinzel Decorative', serif; font-size: clamp(22px, 4vw, 52px); color: var(--gold-pale); margin-bottom: 8px; } .tagline { font-family: 'IM Fell English', serif; font-style: italic; font-size: clamp(13px, 1.5vw, 18px); color: var(--p-mid); opacity: 0.85; } .price { font-family: 'Cinzel', serif; font-weight: 700; color: var(--gold-pale); font-size: clamp(16px, 2vw, 24px); margin: 12px 0; } .add-to-cart { background: linear-gradient(135deg, #bdc3c7, #95a5a6); color: #1a1a1a; border: none; padding: 14px 30px; font-family: 'Cinzel', serif; font-size: clamp(12px, 1.2vw, 15px); font-weight: 600; border-radius: 4px; cursor: pointer; letter-spacing: 0.06em; transition: all 0.35s ease; position: relative; overflow: hidden; } .add-to-cart:hover { background: var(--gold-pale); transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.55); } .add-to-cart::after { content: ''; position: absolute; top: -50%; left: -100%; width: 50%; height: 200%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.75), transparent); transition: 0.4s; } .add-to-cart:hover::after { left: 150%; } /* ══════════════════════════════════════════════════════════ RESPONSIVE BREAKPOINTS ══════════════════════════════════════════════════════════ */ @media (max-width: 820px) { .brand-tagline { display: none; } .inventory-label { display: none; } .user-zone { padding: 4px 10px 4px 6px; } } @media (max-width: 480px) { /* Hide decorative elements on mobile for space saving */ .scroll-rule { display: none; } .brand-rule { display: none; } .scroll-parch { border-top-width: 2px; border-bottom-width: 2px; } /* ── Header corner gem ornaments ── Diamond gems with a curving stem + leaf, placed just inside the gold cylinder caps at top-left and bottom-right of the header. Sits above the parchment + filigree, below the cylinder caps. */ .site-header::before, .site-header::after { content: ''; position: absolute; width: 26px; height: 26px; background: center / contain no-repeat; pointer-events: none; z-index: 11; } .site-header::before { top: 2px; left: calc(var(--cap-w) + 4px); /* background-image: url('/header-corner-tl.svg'); — corner hidden, new image TBD */ } .site-header::after { bottom: 2px; right: calc(var(--cap-w) + 4px); /* background-image: url('/header-corner-br.svg'); — corner hidden, new image TBD */ } .header-inner { display: flex; flex-direction: column; align-items: center; padding: 4px 8px 0; gap: 3px; } .logo-zone { display: none; } .header-logo { display: none; } .header-logo-mobile { display: none; } .brand-col { width: fit-content; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 8px; gap: 4px; } .brand-title { font-size: clamp(15px, 5.5vw, 22px); letter-spacing: 0.04em; line-height: 1.2; text-align: center; margin-top: -2px; } .inventory-nav { width: 100%; justify-content: center; flex-wrap: wrap; gap: 0; } .inventory-nav ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 100%; } .inventory-nav ul li { display: contents; } .inventory-nav ul li a { font-size: 9px; padding: 2px 4px; letter-spacing: 0.02em; text-align: center; width: 100%; box-sizing: border-box; } .user-zone { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0 6px 0; margin-top: 4px; gap: 18px; width: fit-content; } /* Mobile lays the zone out as a ROW (toolkit first, then cart+account). Same principle as desktop: the toolkit always holds its place, so the cart and greeting sit still through a login. */ .user-zone .toolkit { order: 1; display: flex !important; gap: 14px; min-height: 24px; } .user-zone .toolkit.locked { visibility: hidden; opacity: 0; pointer-events: none; } .user-zone .toolkit.unlocked { visibility: visible; opacity: 1; } .user-actions-top { order: 2; flex-direction: row; align-items: center; gap: 18px; } .cart-link i, .account-link i { font-size: 13px; } #user-greeting { font-size: 9px; } .cart-count { width: 13px; height: 13px; font-size: 8px; top: -5px; right: -7px; z-index: 10; } .book-link { font-size: 14px; } .guilds-link { font-size: 14px; } } @media (max-width: 380px) { .brand-title { font-size: 14px; } .inventory-nav ul li a { font-size: 8px; padding: 1px 5px; } .header-logo { height: 28px; } .user-zone { gap: 12px; } } @media (max-width: 680px) { .product-grid { grid-template-columns: 1fr; gap: 16px; } .product-image { padding-top: 16px; } } /* ══════════════════════════════════════════════════════════ HOMEPAGE OVERRIDES (.page-home class) ══════════════════════════════════════════════════════════ */ .page-home .cart-link i, .page-home .account-link i { font-size: clamp(20px, 2.6vw, 30px); } .page-home .cart-link, .page-home .account-link { font-size: clamp(12px, 1.5vw, 18px); gap: 7px; } .page-home .cart-count { width: 20px; height: 20px; font-size: 11px; top: -8px; right: -11px; } .page-home .inventory-nav ul li a { font-size: clamp(11px, 1.2vw, 15px); padding: 4px 12px; letter-spacing: 0.06em; } .page-home .brand-title { font-size: clamp(13px, 4.5vw, 20px); } /* ══════════════════════════════════════════════════════════ ACCOUNT PAGE — Knight Guards & Login Styling ══════════════════════════════════════════════════════════ */ .page-account .account-hero { min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; position: relative; padding: 40px 20px; } .page-account .knight-guards { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; z-index: 1; } .page-account .login-container { position: relative; z-index: 10; max-width: 400px; width: 100%; background: linear-gradient(135deg, rgba(249, 242, 218, 0.95) 0%, rgba(244, 230, 190, 0.92) 20%, rgba(232, 212, 150, 0.88) 80%, rgba(206, 186, 112, 0.85) 100%); border: 3px solid rgba(154, 112, 48, 0.8); border-radius: 8px; padding: 32px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 245, 220, 0.7), inset 0 -2px 0 rgba(120, 80, 30, 0.3); } .page-account .login-container::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(184, 134, 11, 0.3); border-radius: 4px; pointer-events: none; } .page-account .login-title { font-family: 'Cinzel Decorative', serif; font-size: clamp(20px, 4vw, 28px); font-weight: 700; color: var(--p-shadow); text-align: center; margin-bottom: 8px; text-shadow: 0 1px 2px rgba(184, 134, 11, 0.3); } .page-account .login-subtitle { font-family: 'IM Fell English', serif; font-style: italic; font-size: clamp(11px, 1.5vw, 14px); color: var(--p-deep); text-align: center; margin-bottom: 24px; letter-spacing: 0.1em; } .page-account .auth-form { display: flex; flex-direction: column; gap: 16px; } .page-account .form-group { display: flex; flex-direction: column; gap: 6px; } .page-account .form-label { font-family: 'Cinzel', serif; font-size: 12px; font-weight: 600; color: var(--p-shadow); letter-spacing: 0.05em; text-transform: uppercase; } .page-account .form-input { padding: 10px 12px; border: 2px solid rgba(122, 92, 42, 0.4); border-radius: 4px; background: rgba(253, 246, 224, 0.9); font-family: 'Cinzel', serif; font-size: 14px; color: var(--p-shadow); transition: border-color 0.2s, box-shadow 0.2s; } .page-account .form-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.2); } .page-account .auth-button { padding: 12px 24px; background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 50%, var(--gold-b) 100%); border: 2px solid var(--gold-deep); border-radius: 4px; color: var(--p-lightest); font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .page-account .auth-button:hover { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-b) 50%, var(--gold-pale) 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(184, 134, 11, 0.4); } .page-account .auth-button::after { content: ''; position: absolute; top: -50%; left: -100%; width: 50%; height: 200%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: 0.5s; } .page-account .auth-button:hover::after { left: 150%; } .page-account .auth-toggle { text-align: center; margin-top: 16px; } .page-account .auth-toggle button { background: none; border: none; color: var(--gold-deep); font-family: 'IM Fell English', serif; font-style: italic; font-size: 12px; text-decoration: underline; cursor: pointer; transition: color 0.2s; } .page-account .auth-toggle button:hover { color: var(--gold); } .page-account .user-dashboard { display: none; max-width: 600px; width: 100%; background: linear-gradient(135deg, rgba(249, 242, 218, 0.95) 0%, rgba(244, 230, 190, 0.92) 20%, rgba(232, 212, 150, 0.88) 80%, rgba(206, 186, 112, 0.85) 100%); border: 3px solid rgba(154, 112, 48, 0.8); border-radius: 8px; padding: 32px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 245, 220, 0.7); } .page-account .dashboard-welcome { font-family: 'Cinzel Decorative', serif; font-size: clamp(18px, 3.5vw, 24px); font-weight: 700; color: var(--p-shadow); text-align: center; margin-bottom: 20px; } .page-account .logout-button { display: block; margin: 20px auto 0; padding: 8px 16px; background: rgba(122, 92, 42, 0.8); border: 1px solid var(--p-edge); border-radius: 4px; color: var(--p-light); font-family: 'Cinzel', serif; font-size: 12px; cursor: pointer; transition: background 0.2s; } .page-account .logout-button:hover { background: rgba(122, 92, 42, 1); } /* Mobile responsiveness for account page */ @media (max-width: 600px) { .page-account .knight-guards { display: none; /* Hide knights on mobile for cleaner look */ } .page-account .login-container { margin: 0 12px; padding: 24px 20px; } .page-account .account-hero { padding: 20px 12px; } } /* ══════════════════════════════════════════════════════════ UNIVERSAL TOOLKIT ACTIVATION SYSTEM JavaScript will add .unlocked class when user logs in ══════════════════════════════════════════════════════════ */ /* This block used to re-declare `.toolkit { display:none }` and override the rule above, which is what actually caused the cart and greeting to jump on login. The toolkit is now always laid out; only .locked / .unlocked change, and those live in the one definition further up. */ .toolkit { display: flex; } /* every tile the same size, so the row's footprint never depends on which tools are in it — the owner-only ❤ appearing must not resize or reflow anything beside it */ .toolkit a { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-size: 18px; line-height: 1; text-decoration: none; opacity: 0.78; transition: opacity 0.18s, transform 0.18s; } .toolkit a:hover { opacity: 1; transform: translateY(-1px); } /* ══ RUBRICATION — the one gold, sitewide ═════════════════════════════════════════════════════ Red on this site means HAZARD and nothing else (CLAUDE.md §8b). Emphasis that is not a warning is GOLD. That rule was written as applying to "the product pages," but `.emph` was only ever defined inside a page-local