/* ═══════════════════════════════════════════════════ The Guilty Bar — Individual Spirit Category Pages ═══════════════════════════════════════════════════ */ /* ── Hero ── */ .sp-hero { padding: 1.6rem 0 1.2rem; text-align: center; border-bottom: 1px solid rgba(201,168,76,.25); position: relative; overflow: hidden; } .sp-hero-icon { font-size: 2rem; margin-bottom: .3rem; display: block; color: #c9a84c; } .sp-hero h1 { font-family: 'Jost', sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: .12em; font-size: 2.2rem; color: #c9a84c; margin-bottom: .3rem; } .sp-hero p { color: rgba(242,232,216,.65); font-size: .92rem; max-width: 600px; margin: 0 auto; } .sp-hero-badge { display: inline-block; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: rgba(242,232,216,.6); border-radius: 50px; padding: .25rem 1rem; font-size: .8rem; font-weight: 700; margin-bottom: .5rem; letter-spacing: .04em; text-transform: uppercase; } /* ── Spirit colour themes (set via CSS vars on or hero) ── */ .sp-bourbon { --sp-accent:#d4720a; --sp-glow:rgba(212,114,10,.2); --sp-bg1:#1a0a00; --sp-bg2:#0a0500; } .sp-scotch { --sp-accent:#c9a84c; --sp-glow:rgba(201,168,76,.2); --sp-bg1:#12100a; --sp-bg2:#080602; } .sp-rye { --sp-accent:#c67c2a; --sp-glow:rgba(198,124,42,.2); --sp-bg1:#140a00; --sp-bg2:#080500; } .sp-gin { --sp-accent:#6ee7b7; --sp-glow:rgba(110,231,183,.15); --sp-bg1:#001a10; --sp-bg2:#000d08; } .sp-vodka { --sp-accent:#a8c4e0; --sp-glow:rgba(168,196,224,.15); --sp-bg1:#050a14; --sp-bg2:#020508; } .sp-rum { --sp-accent:#f59e0b; --sp-glow:rgba(245,158,11,.18); --sp-bg1:#120a00; --sp-bg2:#080400; } .sp-tequila { --sp-accent:#84cc16; --sp-glow:rgba(132,204,22,.15); --sp-bg1:#061400; --sp-bg2:#030800; } .sp-brandy { --sp-accent:#b45309; --sp-glow:rgba(180,83,9,.2); --sp-bg1:#160700; --sp-bg2:#0a0400; } .sp-vermouth { --sp-accent:#e879f9; --sp-glow:rgba(232,121,249,.15); --sp-bg1:#120018; --sp-bg2:#0a000f; } .sp-liqueur { --sp-accent:#f472b6; --sp-glow:rgba(244,114,182,.15); --sp-bg1:#18000e; --sp-bg2:#0d0008; } /* Apply hero bg — unified gold glow across every spirit page */ .sp-hero { background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(201,168,76,.16) 0%, transparent 70%), linear-gradient(160deg, #100d08 0%, #080604 100%); } /* ── Page background ── */ body { background: #100d08; } /* ── Search + filter strip ── */ .sp-controls { background: rgba(20,16,10,.97); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.07); padding: .8rem 0; position: relative; } .sp-search-wrap { position: relative; max-width: 320px; } .sp-search-wrap i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: rgba(242,232,216,.3); pointer-events: none; } .sp-search { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #f2e8d8; border-radius: 50px; padding: .48rem 1rem .48rem 2.4rem; font-size: .87rem; width: 100%; } .sp-search:focus { outline: none; border-color: var(--sp-accent,#c9a84c); box-shadow: 0 0 0 3px rgba(201,168,76,.1); background: rgba(255,255,255,.09); } .sp-search::placeholder { color: rgba(242,232,216,.28); } /* filter pills */ .sp-filters { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; } .sp-filter { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); color: rgba(242,232,216,.55); border-radius: 50px; padding: .3rem 1rem; font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .18s; } .sp-filter:hover { border-color: var(--sp-accent,#c9a84c); color: var(--sp-accent,#c9a84c); } .sp-filter.active { background: var(--sp-accent,#c9a84c); border-color: var(--sp-accent,#c9a84c); color: #100d08; } /* ── Card grid ── */ .sp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; padding: 2.5rem 0; } @media (max-width: 1199px) { .sp-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .sp-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479px) { .sp-grid { grid-template-columns: 1fr; } } /* ── Spirit card ── */ .sp-card { background: #1e1810; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; } .sp-card:hover { border-color: rgba(201,168,76,.4); transform: translateY(-3px); } .sp-card.hidden { display: none; } /* bottle image */ .sp-bottle-wrap { height: 220px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--sp-bg1,#1e1810) 0%, #120e08 100%); } .sp-bottle-img { max-height: 200px; max-width: 90%; object-fit: contain; display: block; filter: drop-shadow(0 8px 24px rgba(0,0,0,.6)); transition: transform .3s; } .sp-card:hover .sp-bottle-img { transform: scale(1.04); } /* gradient fallback */ .sp-bottle-gradient { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; font-size: 3rem; background: linear-gradient(160deg, var(--sp-bg1,#1e1810) 0%, #120e08 100%); } .sp-bottle-gradient .sp-bottle-letter { font-size: 1.1rem; font-weight: 900; color: var(--sp-accent,#c9a84c); letter-spacing: .06em; text-align: center; padding: 0 .5rem; line-height: 1.2; } /* card body */ .sp-card-body { padding: 1.1rem; flex: 1; display: flex; flex-direction: column; } .sp-card-name { font-size: 1rem; font-weight: 800; color: #f2e8d8; margin: 0 0 .4rem; line-height: 1.25; } .sp-distillery { font-size: .78rem; color: rgba(242,232,216,.45); margin-bottom: .6rem; } /* badges row */ .sp-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .7rem; } .sp-badge { display: inline-block; border-radius: 50px; padding: .14rem .6rem; font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .sp-badge-type { background: rgba(201,168,76,.15); color: #c9a84c; } .sp-badge-country { background: rgba(139,92,246,.12); color: #a78bfa; } .sp-badge-abv { background: rgba(239,68,68,.1); color: #f87171; } .sp-badge-age { background: rgba(34,211,238,.1); color: #22d3ee; } /* origin line */ .sp-origin { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: rgba(242,232,216,.55); margin-bottom: .6rem; } .sp-origin .sp-flag { font-size: 1rem; } .sp-origin .sp-region { color: rgba(242,232,216,.38); } /* description */ .sp-desc { font-size: .8rem; color: rgba(242,232,216,.68); line-height: 1.65; margin: 0; flex: 1; } /* ── No results ── */ .sp-no-results { color: rgba(242,232,216,.35); text-align: center; padding: 4rem 1rem; display: none; } .sp-no-results i { font-size: 2.5rem; margin-bottom: 1rem; display: block; } /* ── Back to spirits hub ── */ .sp-back { display: inline-flex; align-items: center; gap: .5rem; color: var(--sp-accent,#c9a84c); font-size: .85rem; font-weight: 700; text-decoration: none; margin-bottom: 1.5rem; opacity: .75; transition: opacity .2s; } .sp-back:hover { opacity: 1; color: var(--sp-accent,#c9a84c); } /* ── Responsive ── */ @media (max-width: 767px) { .sp-hero h1 { font-size: 1.7rem; } .sp-controls { position: static; } } /* ── Cocktails to Make section ── */ .sp-cocktails-section { background: #100d08; padding: 2.5rem 0 3rem; border-top: 1px solid rgba(201,168,76,.12); } .sp-cocktails-heading { font-family: 'Jost', sans-serif; font-weight: 300; color: #c9a84c; font-size: 1.4rem; margin-bottom: .3rem; } .sp-cocktails-sub { color: rgba(242,232,216,.45); font-size: .84rem; margin-bottom: 1.5rem; } .sp-cocktails-wrap { display: flex; flex-wrap: wrap; gap: .6rem; } .sp-cocktail-pill { display: inline-flex; align-items: center; gap: .45rem; background: #1e1810; border: 1px solid rgba(201,168,76,.2); border-radius: 8px; padding: .55rem 1rem; text-decoration: none; color: #f2e8d8; font-size: .83rem; font-weight: 600; transition: border-color .2s, background .2s; } .sp-cocktail-pill:hover { border-color: rgba(201,168,76,.5); background: #261f14; color: #f2e8d8; }