/* ============================================ THE MODFATHER — Global Design System "An offer your eyes cannot refuse." ============================================ */ /* Fonts are loaded via in each page's for faster, parallel fetching. */ :root { --gold: #C9A84C; --gold-light: #E8C97A; --gold-pale: #F5E9C6; --gold-dark: #8B6914; --gold-dim: rgba(201,168,76,0.12); --blood: #8B1A1A; --blood-light: #B02020; --black: #0A0A0A; --charcoal: #111111; --smoke: #1A1A1A; --ash: #242424; --stone: #2E2E2E; --dim: #8A8A8A; --muted: #888888; --silver: #AAAAAA; --ivory: #E8E0D0; --white: #F5F2EC; --success: #3A7A4A; } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { background:var(--charcoal); color:var(--ivory); font-family:'Cormorant Garamond',serif; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } button { cursor:pointer; font-family:inherit; } input, select, textarea { font-family:inherit; } ::-webkit-scrollbar { width:5px; } ::-webkit-scrollbar-track { background:#0a0a0a; } ::-webkit-scrollbar-thumb { background:var(--gold-dark); } /* NAV */ .nav { position:fixed; top:0; left:0; right:0; z-index:9000; background:#0a0a0a; border-bottom:1px solid rgba(201,168,76,0.2); } .nav-topstrip { display:none; background:var(--blood); padding:.42rem 1.25rem; align-items:center; justify-content:space-between; font-family:'Inter',sans-serif; font-size:.68rem; letter-spacing:.04em; color:rgba(255,255,255,.9); text-decoration:none; width:100%; box-sizing:border-box; flex-shrink:0; } .nav-topstrip:hover { background:#6b1010; } @media(max-width:920px){ .nav-topstrip { display:flex; } } .nav-inner { max-width:1440px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:68px; padding:0 2rem; } .nav-logo { font-family:'Cinzel',serif; font-size:1.3rem; font-weight:900; color:var(--gold); letter-spacing:0.07em; display:flex; align-items:center; gap:0.55rem; white-space:nowrap; text-decoration:none; } .nav-logo .logo-gem { color:var(--blood); } .nav-logo .logo-sub { font-family:'Inter',sans-serif; font-size:0.55rem; letter-spacing:0.35em; text-transform:uppercase; color:var(--dim); display:block; margin-top:-3px; } .nav-links { display:flex; align-items:center; gap:0.1rem; } .nav-link { font-family:'Inter',sans-serif; font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); padding:0.5rem 0.85rem; transition:color 0.2s; border:none; background:none; position:relative; text-decoration:none; display:inline-block; } .nav-link::after { content:''; position:absolute; bottom:2px; left:50%; right:50%; height:1px; background:var(--gold); transition:left 0.25s,right 0.25s; } .nav-link:hover,.nav-link.active { color:var(--gold); } .nav-link:hover::after,.nav-link.active::after { left:0.85rem; right:0.85rem; } .nav-actions { display:flex; align-items:center; gap:0.65rem; } .nav-search-btn { background:none; border:none; color:var(--muted); font-size:1rem; padding:0.4rem; transition:color 0.2s; display:flex; align-items:center; } .nav-search-btn:hover { color:var(--gold); } .nav-cart-btn { display:flex; align-items:center; gap:0.5rem; background:none; border:1px solid var(--gold-dark); color:var(--gold); font-family:'Cinzel',serif; font-size:0.72rem; letter-spacing:0.1em; padding:0.42rem 0.95rem; transition:all 0.2s; text-decoration:none; } .nav-cart-btn:hover { background:var(--gold); color:var(--black); border-color:var(--gold); } .cart-count { background:var(--blood); color:#fff; border-radius:50%; width:17px; height:17px; font-family:'Inter',sans-serif; font-size:0.6rem; display:flex; align-items:center; justify-content:center; font-weight:700; } .nav-admin-btn { background:none; border:none; color:var(--dim); font-family:'Inter',sans-serif; font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; padding:0.4rem 0.55rem; transition:color 0.2s; text-decoration:none; } .nav-admin-btn:hover { color:var(--gold); } .nav-burger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:0.25rem; } .nav-burger span { display:block; width:22px; height:1px; background:var(--gold); transition:all 0.3s; } @media(max-width:920px){ .nav-links,.nav-search-btn,.nav-admin-btn{ display:none; } .nav-burger{ display:flex; } } /* PAGE */ .page-wrap { padding-top:68px; min-height:100vh; } /* TYPOGRAPHY */ .section-eyebrow { font-family:'Inter',sans-serif; font-size:0.66rem; letter-spacing:0.48em; text-transform:uppercase; color:var(--gold); margin-bottom:0.85rem; display:block; } .section-title { font-family:'Cinzel',serif; font-size:clamp(1.8rem,3.5vw,3rem); color:#fff; font-weight:700; line-height:1.1; } .section-title em { color:var(--gold); font-style:normal; } .section-lead { font-size:1.05rem; color:var(--muted); font-style:italic; line-height:1.9; max-width:600px; margin-top:0.85rem; } /* DIVIDER */ .gold-divider { display:flex; align-items:center; gap:1.25rem; padding:2rem 0; } .gold-divider-line { flex:1; height:1px; background:linear-gradient(to right,transparent,var(--gold-dark),transparent); } .gold-divider-gem { color:var(--gold); font-size:0.7rem; opacity:0.6; } /* BUTTONS */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; font-family:'Cinzel',serif; font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; padding:0.82rem 2.1rem; border:none; transition:all 0.25s; white-space:nowrap; text-decoration:none; cursor:pointer; } .btn-primary { background:var(--gold); color:var(--black); } .btn-primary:hover { background:var(--gold-light); transform:translateY(-1px); } .btn-outline { background:transparent; color:var(--gold); border:1px solid var(--gold); } .btn-outline:hover { background:var(--gold-dim); } .btn-ghost { background:transparent; color:var(--silver); border:1px solid var(--stone); } .btn-ghost:hover { border-color:var(--gold-dark); color:var(--ivory); } .btn-danger { background:var(--blood); color:#fff; border:1px solid var(--blood-light); } .btn-danger:hover { background:var(--blood-light); } .btn-sm { padding:0.48rem 1.1rem; font-size:0.7rem; } .btn-lg { padding:1.05rem 2.8rem; font-size:0.85rem; } /* PRODUCT CARDS */ .product-card { background:var(--smoke); border:1px solid var(--stone); overflow:hidden; transition:all 0.3s; display:flex; flex-direction:column; } .product-card:hover { border-color:var(--gold-dark); transform:translateY(-4px); box-shadow:0 14px 44px rgba(0,0,0,0.55); } .product-card-img-wrap { position:relative; overflow:hidden; aspect-ratio:4/3; } .product-card-img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; filter:brightness(0.86); } .product-card:hover .product-card-img { transform:scale(1.06); } .product-badge { position:absolute; top:0.7rem; left:0; background:var(--blood); color:#fff; font-family:'Inter',sans-serif; font-size:0.6rem; letter-spacing:0.15em; text-transform:uppercase; padding:0.22rem 0.65rem; } .product-badge.badge-sale { background:#1a4a1a; color:#7cd47c; } .product-badge.badge-hot { background:#4a1a00; color:#ff8040; } .product-badge.badge-new { background:var(--blood); } .product-badge.badge-bundle { background:#1a254a; color:#80aaff; } .product-badge.badge-exclusive { background:#2a1a4a; color:#c080ff; } .product-badge.badge-value { background:#2a2a1a; color:var(--gold); } .product-wishlist { position:absolute; top:0.7rem; right:0.7rem; background:rgba(0,0,0,0.65); border:1px solid var(--stone); color:var(--muted); width:31px; height:31px; display:flex; align-items:center; justify-content:center; font-size:0.85rem; transition:all 0.2s; cursor:pointer; } .product-wishlist:hover { border-color:var(--gold); color:var(--gold); } .product-card-body { padding:1.2rem; flex:1; display:flex; flex-direction:column; } .product-cat { font-family:'Inter',sans-serif; font-size:0.6rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--gold); margin-bottom:0.38rem; } .product-name { font-family:'Cinzel',serif; font-size:1rem; color:var(--ivory); margin-bottom:0.38rem; line-height:1.3; } .product-spec { font-size:0.83rem; color:var(--dim); margin-bottom:0.7rem; line-height:1.5; flex:1; } .product-rating { display:flex; align-items:center; gap:0.38rem; margin-bottom:0.7rem; flex-wrap:wrap; } .stars { color:var(--gold); font-size:0.72rem; } .rating-count { font-family:'Inter',sans-serif; font-size:0.68rem; color:var(--dim); } .product-footer { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; } .product-price { font-family:'Cinzel',serif; font-size:1.2rem; color:var(--gold); } .product-price-old { font-size:0.82rem; color:var(--dim); text-decoration:line-through; margin-left:0.35rem; } .btn-add-cart { background:none; border:1px solid var(--gold-dark); color:var(--gold); font-family:'Inter',sans-serif; font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; padding:0.42rem 0.85rem; transition:all 0.2s; white-space:nowrap; cursor:pointer; } .btn-add-cart:hover { background:var(--gold); color:var(--black); border-color:var(--gold); } /* GRIDS */ .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; } .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; } .grid-auto{ display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:1.5rem; } @media(max-width:1200px){ .grid-4{grid-template-columns:repeat(3,1fr);} } @media(max-width:900px) { .grid-4,.grid-3{grid-template-columns:repeat(2,1fr);} } @media(max-width:560px) { .grid-4,.grid-3,.grid-2,.grid-auto{grid-template-columns:1fr;} } /* CONTAINERS */ .container { max-width:1440px; margin:0 auto; padding:0 2rem; } .container-sm { max-width:960px; margin:0 auto; padding:0 2rem; } .container-md { max-width:1200px; margin:0 auto; padding:0 2rem; } /* SECTIONS */ .section { padding:5rem 0; } .section-sm { padding:3rem 0; } .section-lg { padding:7rem 0; } /* FORMS */ .form-group { display:flex; flex-direction:column; gap:0.45rem; margin-bottom:1.2rem; } .form-label { font-family:'Inter',sans-serif; font-size:0.65rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--gold); } .form-label .required { color:var(--blood-light); } .form-input,.form-select,.form-textarea { background:var(--black); border:1px solid var(--stone); color:var(--ivory); font-size:1rem; padding:0.72rem 1rem; transition:border-color 0.2s; width:100%; font-family:'Cormorant Garamond',serif; -webkit-appearance:none; } .form-input:focus,.form-select:focus,.form-textarea:focus { outline:none; border-color:var(--gold); } .form-input::placeholder { color:var(--dim); } .form-select { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; } .form-textarea { resize:vertical; min-height:110px; line-height:1.6; } .form-hint { font-family:'Inter',sans-serif; font-size:0.72rem; color:var(--dim); margin-top:0.2rem; font-style:italic; } .form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; } @media(max-width:640px){ .form-grid-2,.form-grid-3{grid-template-columns:1fr;} } /* TOAST */ #toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:0.5rem; pointer-events:none; } .toast { background:var(--smoke); border:1px solid var(--gold-dark); color:var(--ivory); padding:0.82rem 1.2rem; font-size:0.95rem; max-width:320px; animation:slideIn 0.3s ease; display:flex; align-items:center; gap:0.7rem; pointer-events:all; } .toast-icon { color:var(--gold); font-size:0.95rem; flex-shrink:0; } @keyframes slideIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} } /* BREADCRUMB */ .breadcrumb { font-family:'Inter',sans-serif; font-size:0.7rem; letter-spacing:0.1em; color:var(--dim); display:flex; align-items:center; gap:0.45rem; padding:1.1rem 0; flex-wrap:wrap; } .breadcrumb a { color:var(--dim); transition:color 0.2s; } .breadcrumb a:hover { color:var(--gold); } .breadcrumb-sep { color:var(--stone); } .breadcrumb-current { color:var(--gold); } /* BADGES */ .badge { display:inline-block; padding:0.18rem 0.55rem; font-family:'Inter',sans-serif; font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; } .badge-in-stock { background:rgba(58,122,74,0.18); color:#7cd47c; } .badge-low-stock { background:rgba(160,112,32,0.18); color:#d4a020; } .badge-out-stock { background:rgba(139,26,26,0.18); color:#c05050; } .badge-pending { background:rgba(160,112,32,0.18); color:#d4a020; } .badge-done { background:rgba(58,122,74,0.18); color:#7cd47c; } .badge-processing { background:rgba(26,60,140,0.25); color:#80aaff; } .badge-shipped { background:rgba(80,20,120,0.25); color:#c080ff; } /* STATS ROW */ .stats-row { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--stone); border-left:1px solid var(--stone); } .stat-item { padding:3rem 2rem; text-align:center; border-right:1px solid var(--stone); border-bottom:1px solid var(--stone); } .stat-num { font-family:'Cinzel',serif; font-size:clamp(2rem,4vw,3.2rem); color:var(--gold); line-height:1; margin-bottom:0.45rem; } .stat-label{ font-family:'Inter',sans-serif; font-size:0.65rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--dim); } @media(max-width:700px){ .stats-row{grid-template-columns:1fr 1fr;} } /* FOOTER */ .footer { background:var(--black); border-top:1px solid #181818; padding:4rem 0 2rem; } .footer-inner { padding:3.5rem 0 2rem; } .footer-heading { font-family:'Inter',sans-serif; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:.9rem; padding-bottom:.7rem; border-bottom:1px solid var(--stone); } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; margin-bottom:3rem; } .footer-brand-name { font-family:'Cinzel',serif; font-size:1.15rem; color:var(--gold); letter-spacing:0.07em; margin-bottom:0.3rem; display:flex; align-items:center; gap:0.45rem; } .footer-tagline { font-style:italic; color:var(--dim); font-size:0.92rem; line-height:1.8; margin-bottom:1.4rem; } .footer-social { display:flex; gap:0.55rem; } .social-link { width:33px; height:33px; border:1px solid var(--stone); display:flex; align-items:center; justify-content:center; color:var(--dim); font-size:0.82rem; transition:all 0.2s; } .social-link:hover { border-color:var(--gold); color:var(--gold); } .footer-col-title { font-family:'Inter',sans-serif; font-size:0.62rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:0.9rem; padding-bottom:0.7rem; border-bottom:1px solid var(--stone); } .footer-links { display:flex; flex-direction:column; gap:0.45rem; } .footer-link { font-family:'Inter',sans-serif; font-size:0.78rem; color:var(--dim); transition:color 0.2s; cursor:pointer; } .footer-link:hover { color:var(--gold); } .footer-bottom { border-top:1px solid #181818; padding-top:1.75rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; } .footer-legal { font-family:'Inter',sans-serif; font-size:0.67rem; letter-spacing:0.1em; color:#2e2e2e; } .footer-payment { display:flex; gap:0.45rem; align-items:center; } .payment-icon { background:var(--smoke); border:1px solid var(--stone); padding:0.18rem 0.48rem; font-family:'Inter',sans-serif; font-size:0.58rem; color:var(--dim); letter-spacing:0.04em; } @media(max-width:700px){ .footer-grid{grid-template-columns:1fr 1fr;} } @media(max-width:460px){ .footer-grid{grid-template-columns:1fr;} .footer-bottom{flex-direction:column;text-align:center;gap:.5rem;} } /* SEARCH OVERLAY */ .search-overlay { position:fixed; inset:0; z-index:9500; background:rgba(4,4,4,0.97); display:flex; flex-direction:column; align-items:center; padding-top:15vh; opacity:0; pointer-events:none; transition:opacity 0.3s; } .search-overlay.open { opacity:1; pointer-events:all; } .search-input-wrap { width:100%; max-width:660px; padding:0 2rem; position:relative; } .search-big-input { width:100%; background:none; border:none; border-bottom:1px solid var(--gold); color:#fff; font-family:'Cinzel',serif; font-size:clamp(1.4rem,4vw,2.4rem); padding:0.7rem 0; letter-spacing:0.04em; outline:none; } .search-big-input::placeholder { color:var(--dim); } .search-close { position:absolute; top:50%; right:2.5rem; transform:translateY(-50%); background:none; border:none; color:var(--muted); font-size:1.4rem; cursor:pointer; transition:color 0.2s; } .search-close:hover { color:var(--gold); } .search-hint { font-family:'Inter',sans-serif; font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--dim); margin-top:0.9rem; } /* UTILITIES */ .text-gold { color:var(--gold); } .text-muted { color:var(--muted); } .text-center { text-align:center; } .mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem} .mt-4{margin-top:2rem} .mb-1{margin-bottom:.5rem} .mb-2{margin-bottom:1rem} .mb-3{margin-bottom:1.5rem} .mb-4{margin-bottom:2rem} .hidden { display:none !important; } /* ── GLOBAL PHONE ADJUSTMENTS (≤640px) ── */ @media(max-width:640px){ .section { padding:3rem 0; } .section-eyebrow { font-size:.6rem; letter-spacing:.35em; } .section-title { font-size:clamp(1.6rem,7vw,2.2rem); } .section-lead { font-size:.95rem; line-height:1.7; } .container { padding:0 1.15rem; } .btn-lg { padding:.9rem 1.75rem; font-size:.8rem; } .mb-4 { margin-bottom:1.75rem; } } /* Skip-to-content link — visible only when focused via keyboard (WCAG 2.4.1) */ .skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--gold);color:#0a0a0a;padding:.75rem 1.25rem;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:600;text-decoration:none;border-radius:0 0 4px 0} .skip-link:focus{left:0}