/** * Ira Wear — Brand CSS * Global design system: colors, typography, buttons, layout, header, footer */ /* ══════════════════════════════════════════════════════════ 1. CSS CUSTOM PROPERTIES (Design Tokens) ══════════════════════════════════════════════════════════ */ :root { /* Colors */ --ira-primary: #800020; --ira-primary-light: #A0002A; --ira-primary-dark: #5C0017; --ira-primary-soft: #FFF0F3; --ira-secondary: #C9A96E; --ira-secondary-light: #DEC48E; --ira-secondary-dark: #A6844A; --ira-accent: #F5F0EB; --ira-accent-warm: #EDE5DC; --ira-bg-white: #FFFFFF; --ira-bg-dark: #1A0A0E; --ira-text-dark: #2D2D2D; --ira-text-medium: #4A4A4A; --ira-text-light: #6B6B6B; --ira-text-muted: #9E9E9E; --ira-border: #E8E0D8; --ira-border-light: #F0EBE5; --ira-success: #4A7C59; --ira-warning: #B5752B; --ira-error: #C0392B; /* Typography */ --ira-font-heading: 'Playfair Display', Georgia, serif; --ira-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --ira-font-accent: 'Cormorant Garamond', Georgia, serif; /* Spacing */ --ira-section-padding: 80px 0; --ira-container-max: 1200px; /* Shadows */ --ira-shadow-sm: 0 1px 3px rgba(45,45,45,0.08); --ira-shadow-md: 0 4px 12px rgba(45,45,45,0.12); --ira-shadow-lg: 0 8px 30px rgba(45,45,45,0.16); --ira-shadow-card: 0 2px 8px rgba(128,0,32,0.08); /* Radius */ --ira-radius-sm: 4px; --ira-radius-md: 8px; --ira-radius-pill: 999px; /* Transitions */ --ira-transition: 250ms ease; } /* ══════════════════════════════════════════════════════════ 1b. HEADER: Hide site title text when logo image is set ══════════════════════════════════════════════════════════ */ /* Hide site title text when custom logo is active. WordPress adds wp-custom-logo to when a logo is set. Confirmed from live HTML: .ast-site-title-wrap > span.site-title */ .wp-custom-logo .ast-site-title-wrap, .wp-custom-logo .site-title, .wp-custom-logo .site-description { display: none !important; } /* Ensure the SVG logo renders at correct size */ .custom-logo-link img.custom-logo { max-height: 60px; width: auto; display: inline-block !important; } /* ══════════════════════════════════════════════════════════ 2. BASE / RESET ══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body.ira-wear { font-family: var(--ira-font-body); font-size: 16px; line-height: 1.65; color: var(--ira-text-medium); background: var(--ira-bg-white); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--ira-font-heading); color: var(--ira-text-dark); line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 0.5em; } a { color: var(--ira-primary); transition: color var(--ira-transition); } a:hover { color: var(--ira-secondary-dark); text-decoration: none; } img { max-width: 100%; height: auto; } /* ══════════════════════════════════════════════════════════ 3. ANNOUNCEMENT BAR ══════════════════════════════════════════════════════════ */ .ira-announcement-bar { background: var(--ira-primary); color: #fff; text-align: center; padding: 10px 20px; font-size: 13px; font-family: var(--ira-font-body); font-weight: 400; letter-spacing: 0.04em; width: 100%; z-index: 1000; max-height: 60px; overflow: hidden; } .ira-announcement-bar p { margin: 0; color: #fff; } /* Rotating messages */ .ira-announcement-bar__messages { position: relative; height: 20px; overflow: hidden; } .ira-announcement-bar__msg { position: absolute; width: 100%; margin: 0; color: #fff; opacity: 0; transform: translateY(10px); transition: opacity 500ms ease, transform 500ms ease; } .ira-announcement-bar__msg.active { opacity: 1; transform: translateY(0); } /* ══════════════════════════════════════════════════════════ 4. HEADER ══════════════════════════════════════════════════════════ */ /* Astra site header overrides */ .ast-desktop-header, #masthead, .site-header { background: #fff !important; border-bottom: 1px solid var(--ira-border); box-shadow: var(--ira-shadow-sm); position: sticky; top: 0; z-index: 999; } /* Logo */ .ast-site-identity .custom-logo, .custom-logo-link img { max-height: 60px; width: auto; } /* Navigation */ .ast-nav-menu > li > a, .main-navigation ul li a { font-family: var(--ira-font-body); font-size: 14px; font-weight: 500; color: var(--ira-text-dark) !important; letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 16px; transition: color var(--ira-transition); } .ast-nav-menu > li > a:hover, .ast-nav-menu > li.current-menu-item > a, .ast-nav-menu > li.current-menu-ancestor > a { color: var(--ira-primary) !important; } /* Dropdown menus */ .ast-nav-menu .sub-menu { background: #fff; border: 1px solid var(--ira-border); border-top: 2px solid var(--ira-primary); box-shadow: var(--ira-shadow-md); border-radius: 0 0 var(--ira-radius-md) var(--ira-radius-md); } .ast-nav-menu .sub-menu li a { font-size: 13px; color: var(--ira-text-medium) !important; padding: 10px 20px; } .ast-nav-menu .sub-menu li a:hover { color: var(--ira-primary) !important; background: var(--ira-accent); } /* Cart icon in header */ .ast-header-woo-cart .count, .ast-cart-menu-wrap .count { background: var(--ira-primary); color: #fff; font-size: 11px; border-radius: var(--ira-radius-pill); padding: 2px 6px; } /* ══════════════════════════════════════════════════════════ 5. BUTTONS ══════════════════════════════════════════════════════════ */ /* Primary button */ .wp-block-button__link, .button, button[type="submit"], input[type="submit"], .ira-btn-primary { background: var(--ira-primary) !important; color: #fff !important; border: none !important; padding: 12px 32px !important; font-family: var(--ira-font-body) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border-radius: var(--ira-radius-sm) !important; transition: all var(--ira-transition) !important; cursor: pointer !important; display: inline-block; text-align: center; } .wp-block-button__link:hover, .button:hover, button[type="submit"]:hover, input[type="submit"]:hover, .ira-btn-primary:hover { background: var(--ira-primary-dark) !important; transform: translateY(-1px) !important; box-shadow: var(--ira-shadow-md) !important; } /* Secondary / outline button */ .ira-btn-secondary { background: transparent !important; color: var(--ira-primary) !important; border: 2px solid var(--ira-primary) !important; padding: 10px 30px !important; font-family: var(--ira-font-body) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border-radius: var(--ira-radius-sm) !important; transition: all var(--ira-transition) !important; cursor: pointer !important; display: inline-block; } .ira-btn-secondary:hover { background: var(--ira-primary) !important; color: #fff !important; } /* Gold accent button */ .ira-btn-gold { background: var(--ira-secondary) !important; color: var(--ira-text-dark) !important; border: none !important; padding: 12px 32px !important; font-family: var(--ira-font-body) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border-radius: var(--ira-radius-sm) !important; transition: all var(--ira-transition) !important; } .ira-btn-gold:hover { background: var(--ira-secondary-dark) !important; } /* ══════════════════════════════════════════════════════════ 6. SECTION LAYOUT HELPERS ══════════════════════════════════════════════════════════ */ .ira-section { padding: var(--ira-section-padding); } .ira-section--accent { background: var(--ira-accent); } .ira-section--dark { background: var(--ira-bg-dark); color: #fff; } .ira-section-header { text-align: center; margin-bottom: 48px; } .ira-section-title { font-family: var(--ira-font-heading); font-size: clamp(28px, 4vw, 40px); font-weight: 600; color: var(--ira-text-dark); letter-spacing: -0.02em; margin-bottom: 8px; } .ira-section-subtitle { font-family: var(--ira-font-accent); font-size: 18px; font-style: italic; color: var(--ira-secondary); letter-spacing: 0.05em; margin: 0; } /* Decorative gold rule */ .ira-gold-rule { display: block; width: 60px; height: 2px; background: var(--ira-secondary); margin: 16px auto 0; } /* ══════════════════════════════════════════════════════════ 7. FOOTER ══════════════════════════════════════════════════════════ */ .site-footer, #colophon { background: var(--ira-bg-dark); color: rgba(255,255,255,0.8); font-size: 14px; } /* Force footer copyright bar full width — no white gaps */ .site-footer .ast-footer-overlay, .site-footer .ast-small-footer, .site-footer .ast-small-footer .ast-container, .ast-small-footer-wrap, .site-footer .site-below-footer-wrap, .ast-footer-copyright, .site-below-footer-wrap, .site-below-footer-wrap .ast-builder-grid-row-container, .site-below-footer-wrap .ast-builder-grid-row, .site-below-footer-wrap .ast-container, .site-footer .ast-builder-grid-row-container { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* Copyright bar background — full bleed */ .site-below-footer-wrap { background: #0D0508 !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; } .site-footer .ast-small-footer { background: #0E0500 !important; } /* Also make our custom footer widget area truly full-bleed */ .ira-footer-widgets { width: 100% !important; box-sizing: border-box; } /* Footer widgets */ .site-footer .widget-title, .site-footer h3, .site-footer h4 { font-family: var(--ira-font-heading); font-size: 18px; color: #fff; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(201,169,110,0.3); } .site-footer p, .site-footer li { color: rgba(255,255,255,0.7); line-height: 1.8; } .site-footer a { color: rgba(255,255,255,0.7); transition: color var(--ira-transition); } .site-footer a:hover { color: var(--ira-secondary); } /* Footer nav list */ .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer ul li { padding: 4px 0; } .site-footer ul li::before { content: '›'; color: var(--ira-secondary); margin-right: 8px; font-weight: bold; } /* Copyright bar */ .ast-footer-copyright, .footer-bar, .ast-small-footer { background: #0D0508 !important; color: rgba(255,255,255,0.5) !important; font-size: 13px; text-align: center; padding: 16px 20px !important; } .ast-footer-copyright a { color: var(--ira-secondary) !important; } /* ══════════════════════════════════════════════════════════ 8. FORMS ══════════════════════════════════════════════════════════ */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], textarea, select { border: 1px solid var(--ira-border) !important; border-radius: var(--ira-radius-sm) !important; padding: 10px 14px !important; font-family: var(--ira-font-body) !important; font-size: 15px !important; color: var(--ira-text-dark) !important; background: #fff !important; transition: border-color var(--ira-transition) !important; width: 100%; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border-color: var(--ira-primary) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(128,0,32,0.1) !important; } /* ══════════════════════════════════════════════════════════ 9. CATEGORY PAGE — description + breadcrumb link color ══════════════════════════════════════════════════════════ */ /* Category description text */ .woocommerce-archive-description p { font-size: 15px; line-height: 1.7; color: var(--ira-text-medium); margin-bottom: 24px; } /* Links inside category descriptions — use brand color */ .woocommerce-archive-description a { color: var(--ira-primary); text-decoration: underline; text-underline-offset: 2px; } /* Breadcrumb */ .woocommerce-breadcrumb { font-size: 13px; color: var(--ira-text-light); margin-bottom: 16px; padding-top: 8px; } .woocommerce-breadcrumb a { color: var(--ira-secondary-dark); text-decoration: none; } .woocommerce-breadcrumb a:hover { color: var(--ira-primary); } /* ══════════════════════════════════════════════════════════ 10. UTILITY CLASSES ══════════════════════════════════════════════════════════ */ .ira-text-primary { color: var(--ira-primary); } .ira-text-secondary { color: var(--ira-secondary); } .ira-text-muted { color: var(--ira-text-muted); } .ira-bg-accent { background: var(--ira-accent); } .ira-bg-dark { background: var(--ira-bg-dark); } .ira-text-center { text-align: center; } .ira-fw-600 { font-weight: 600; } /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ══════════════════════════════════════════════════════════ 11. BACK TO TOP BUTTON ══════════════════════════════════════════════════════════ */ /* Hide Astra's built-in scroll-to-top — we use our own #ira-back-to-top */ .ast-scroll-top-icon, .ast-scroll-to-top-right { display: none !important; } #ira-back-to-top { position: fixed; bottom: 32px; right: 32px; width: 44px; height: 44px; background: var(--ira-primary); color: #fff; border: none; border-radius: 50%; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--ira-transition), transform var(--ira-transition); z-index: 9999; box-shadow: var(--ira-shadow-md); padding: 0; } #ira-back-to-top.visible { opacity: 1; visibility: visible; } #ira-back-to-top:hover { background: var(--ira-primary-dark); transform: translateY(-3px); } /* ══════════════════════════════════════════════════════════ 12. SCROLLED HEADER STATE ══════════════════════════════════════════════════════════ */ .ira-header-scrolled { box-shadow: var(--ira-shadow-md) !important; } /* ══════════════════════════════════════════════════════════ 13. ANNOUNCEMENT BAR CLOSE BUTTON ══════════════════════════════════════════════════════════ */ .ira-bar-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,0.8); font-size: 20px; cursor: pointer; line-height: 1; padding: 0; transition: color var(--ira-transition); } .ira-bar-close:hover { color: #fff; } .ira-announcement-bar { position: relative; } /* ══════════════════════════════════════════════════════════ 14. ACCESSIBILITY ══════════════════════════════════════════════════════════ */ /* Respect reduced motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Better focus-visible styles — keyboard-only focus ring */ :focus-visible { outline: 2px solid var(--ira-primary); outline-offset: 2px; } /* Remove outline for mouse clicks but keep for keyboard */ :focus:not(:focus-visible) { outline: none; } /* ══════════════════════════════════════════════════════════ 15. ANIMATIONS (Intersection Observer) ══════════════════════════════════════════════════════════ */ .ira-animate-in { opacity: 0; transform: translateY(20px); transition: opacity 600ms ease, transform 600ms ease; } .ira-animate-in.ira-visible { opacity: 1; transform: translateY(0); } /* ══════════════════════════════════════════════════════════ 16. COLLECTION & OCCASION IMAGE CARDS ══════════════════════════════════════════════════════════ */ .ira-collection-card:hover img, .ira-occasion-grid > div:hover img { transform: scale(1.08); } .ira-collection-card, .ira-occasion-grid > div { box-shadow: var(--ira-shadow-md); transition: box-shadow var(--ira-transition), transform var(--ira-transition); } .ira-collection-card:hover, .ira-occasion-grid > div:hover { box-shadow: var(--ira-shadow-lg); transform: translateY(-4px); } /* Responsive: 2 cols on tablet, 1 on mobile */ @media (max-width: 768px) { .ira-collection-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } .ira-occasion-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } } @media (max-width: 480px) { .ira-collection-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .ira-occasion-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } } /* ══════════════════════════════════════════════════════════ 17. CUSTOM FOOTER WIDGET AREA ══════════════════════════════════════════════════════════ */ .ira-footer-widgets { border-bottom: 1px solid rgba(255,255,255,0.1); } .ira-footer-widgets .ira-footer-widget__title { font-family: var(--ira-font-heading); font-size: 16px; font-weight: 600; color: #F5C842; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid rgba(245, 200, 66, 0.3); } .ira-footer-widgets .ira-footer-widget { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.6; } .ira-footer-widgets .ira-footer-widget a { color: var(--ira-secondary); text-decoration: none; transition: color 0.2s ease; } .ira-footer-widgets .ira-footer-widget a:hover { color: #F5C842; } .ira-footer-widgets .ira-footer-widget ul { list-style: none; padding: 0; margin: 0; } .ira-footer-widgets .ira-footer-widget li { margin-bottom: 8px; } .ira-footer-widgets .ira-footer-brand strong { color: #fff; } @media (max-width: 768px) { .ira-footer-widgets__inner { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; } } @media (max-width: 480px) { .ira-footer-widgets__inner { grid-template-columns: 1fr !important; } }