/* Legendarie Game Store — brand override, layered on top of Furni's style.css. Two themes: dark ("MTG") and light ("Pokémon"), toggled via [data-theme] on (see assets/theme-toggle.js). Every rule below reads color through semantic CSS variables so it flips automatically with the theme — no rule here should ever hardcode a literal color. */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Manrope:wght@400;500&family=Cormorant+Garamond:ital@1&family=Luckiest+Guy&family=Quicksand:wght@400;500;700&display=swap'); :root, :root[data-theme="dark"] { --bg: #0E0C0A; --surface: #17140F; --text: #F3ECDF; --text-muted: rgba(243, 236, 223, 0.6); --divider: #2A241C; --accent: #B09050; --accent-hover: #8A6F3B; --accent-light: #C9AD74; --accent-text: #0E0C0A; --nav-bg: #0E0C0A; --nav-text: #F3ECDF; --icon-dot: rgba(176, 144, 80, 0.25); --font-display: 'Cinzel', serif; --font-body: 'Manrope', sans-serif; --font-accent: 'Cormorant Garamond', serif; --heading-tracking: 0.02em; } :root[data-theme="light"] { --bg: #FFFFFF; --surface: #F0F4FA; --text: #3C5AA6; --text-muted: rgba(60, 90, 166, 0.65); --divider: #D7E3F4; --accent: #FFCB05; --accent-hover: #C7A008; --accent-light: #2A75BB; --accent-text: #3C5AA6; --nav-bg: #3C5AA6; --nav-text: #FFFFFF; --icon-dot: rgba(255, 203, 5, 0.3); --type-fire: #EA7A3C; --type-water: #539DDF; --type-grass: #71C558; --type-electric: #F4D23C; --font-display: 'Luckiest Guy', cursive; --font-body: 'Quicksand', sans-serif; --font-accent: 'Quicksand', sans-serif; --heading-tracking: 0; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); } h1, h2, h3, .section-title, .site-title, .product-title, .footer-logo { font-family: var(--font-display) !important; letter-spacing: var(--heading-tracking); } /* Furni's original CSS targets these with higher specificity than a bare class override can beat (e.g. `.product-section .product-item h3`), or never gave them a color at all (`.section-title`) — !important makes brand.css authoritative. */ .section-title { color: var(--text) !important; } h1 { font-weight: 700; } h2, h3 { font-weight: 500; } blockquote, .accent-quote { font-family: var(--font-accent); font-style: italic; color: var(--accent-light); } /* Feature icons (Home/About/Services) — inline SVG, see render_feature_icon() */ .feature .icon:before { background: var(--icon-dot) !important; } .feature-icon-svg { width: 100%; height: 100%; } .feature-icon-svg path { stroke: var(--text); } .feature-icon-svg path[fill]:not([fill="none"]) { fill: var(--text); } /* Light theme only: cycle the decorative dot through Pokémon-type accent colors */ [data-theme="light"] .feature-grid > div:nth-child(4n+1) .icon:before { background: rgba(234, 122, 60, 0.3) !important; } [data-theme="light"] .feature-grid > div:nth-child(4n+2) .icon:before { background: rgba(83, 157, 223, 0.3) !important; } [data-theme="light"] .feature-grid > div:nth-child(4n+3) .icon:before { background: rgba(113, 197, 88, 0.3) !important; } [data-theme="light"] .feature-grid > div:nth-child(4n+4) .icon:before { background: rgba(244, 210, 60, 0.3) !important; } /* Contact page icon circles (already inline SVG using currentColor) */ .service-icon { background: var(--accent) !important; color: var(--accent-text) !important; } .navbar-logo { max-height: 40px; width: auto; } .footer-logo-img { max-height: 48px; width: auto; } /* Navbar */ .custom-navbar { background: var(--nav-bg) !important; border-bottom: 1px solid var(--divider); } .custom-navbar .navbar-brand, .custom-navbar .nav-link { color: var(--nav-text) !important; } .custom-navbar .nav-link:hover, .custom-navbar li.active .nav-link { color: var(--accent-light) !important; } .theme-toggle-btn { background: transparent; border: 1px solid var(--nav-text); color: var(--nav-text) !important; border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.85rem; cursor: pointer; } .theme-toggle-btn:hover { border-color: var(--accent-light); color: var(--accent-light) !important; } /* Hero */ .hero { background: var(--bg); border-bottom: 1px solid var(--divider); } .hero h1, .hero p { color: var(--text); } /* Buttons */ .btn, button, .btn-black { background: var(--accent); border-color: var(--accent); color: var(--accent-text) !important; } .btn:hover, button:hover, .btn-black:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-outline-black, .btn-white-outline, .btn.secondary { background: transparent; border-color: var(--accent); color: var(--accent) !important; } .btn-outline-black:hover, .btn-white-outline:hover, .btn.secondary:hover { background: var(--accent); color: var(--accent-text) !important; } .btn-secondary { background: var(--accent); border-color: var(--accent); color: var(--accent-text) !important; } /* Product cards / shop */ .product-item, .product-card, .untree_co-section, .product-section, .why-choose-section { background: transparent; color: var(--text); } .product-title, .product-price { color: var(--text) !important; } .product-item:hover .product-title, .product-card:hover h3 { color: var(--accent-light); } /* Cards / surfaces */ .site-blocks-table, .border, .card { background: var(--surface) !important; border-color: var(--divider) !important; color: var(--text); } .site-blocks-table td { color: var(--text) !important; } a { color: var(--accent-light); } a:hover { color: var(--accent); } /* Footer */ .footer-section { background: var(--surface) !important; border-top: 1px solid var(--divider); } .footer-section, .footer-section p, .footer-section a { color: var(--text) !important; } .footer-section a:hover { color: var(--accent-light) !important; } .footer-section .copyright { border-color: var(--divider) !important; color: var(--text-muted) !important; } .footer-section .copyright a { color: var(--accent-light) !important; } /* Forms */ .form-control { background: var(--surface); border-color: var(--divider); color: var(--text); } .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem var(--icon-dot); } /* Carousels (Slick) — generic, usable anywhere via [data-carousel] */ [data-carousel] .carousel-slide { position: relative; aspect-ratio: var(--slide-ratio, 16 / 9); overflow: hidden; } [data-carousel] .carousel-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } [data-carousel] .slick-dots li button:before { color: var(--accent); opacity: 0.5; } [data-carousel] .slick-dots li.slick-active button:before { color: var(--accent); opacity: 1; } [data-carousel] .slick-prev:before, [data-carousel] .slick-next:before { color: var(--accent); } [data-carousel].slick-initialized { visibility: visible; } /* Focal-point images — fixed ratio box + object-fit:cover so object-position (set inline) matters */ .focal-4x3 { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; } .focal-team-photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; } .focal-avatar-sm { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 50%; } .focal-blog-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }