/* ============================================================ APEX — Bath Atelier · Design System Editorial luxury · Cormorant + DM Sans + JetBrains Mono ============================================================ */ :root { /* Type pairings — toggled via Tweaks (data-type attr on ) */ --f-display: 'Cormorant Garamond', 'Times New Roman', serif; --f-body: 'DM Sans', -apple-system, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; /* Color */ --ink: #0F1A1F; --ink-soft: #1C2A30; --ink-60: rgba(15, 26, 31, 0.6); --ink-40: rgba(15, 26, 31, 0.4); --ink-20: rgba(15, 26, 31, 0.18); --ink-08: rgba(15, 26, 31, 0.08); --brass: #C9A66B; --brass-soft: #B8945A; --bone: #E8E4DC; --paper: #F6F3EE; --cream: #FBF9F5; --line: rgba(15, 26, 31, 0.12); --line-soft: rgba(15, 26, 31, 0.06); --on-ink: #E8E4DC; --on-ink-soft: rgba(232, 228, 220, 0.65); /* Spacing scale */ --pad: clamp(20px, 4vw, 56px); --section: clamp(80px, 12vw, 160px); /* Misc */ --maxw: 1440px; } /* Type pairing variants */ html[data-type="1"] { --f-display: 'Playfair Display', serif; --f-body: 'Manrope', sans-serif; } html[data-type="2"] { --f-display: 'EB Garamond', serif; --f-body: 'Inter Tight', sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--f-body); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; border: 0; background: 0; cursor: pointer; color: inherit; } /* ============ Typography ============ */ .display { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.01em; line-height: 0.96; } .display-italic { font-family: var(--f-display); font-style: italic; font-weight: 400; } .mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } .eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-60); } .lede { font-family: var(--f-display); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.4; font-weight: 400; color: var(--ink); } h1, h2, h3, h4 { margin: 0; font-weight: 400; } /* ============ Layout ============ */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } .full { width: 100%; } section { position: relative; } /* ============ Header ============ */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 249, 245, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); } .site-header.dark { background: rgba(15, 26, 31, 0.85); border-bottom-color: rgba(232, 228, 220, 0.08); color: var(--on-ink); } .header-utility { display: flex; justify-content: space-between; align-items: center; padding: 8px var(--pad); border-bottom: 1px solid var(--line-soft); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-60); } .site-header.dark .header-utility { border-bottom-color: rgba(232, 228, 220, 0.06); color: var(--on-ink-soft); } .header-utility a { transition: color .2s; } .header-utility a:hover { color: var(--brass); } .header-utility .util-left, .header-utility .util-right { display: flex; gap: 28px; } .header-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px var(--pad); gap: 32px; } .brand { font-family: var(--f-display); font-size: 28px; font-weight: 400; letter-spacing: 0.04em; line-height: 1; display: inline-flex; align-items: baseline; gap: 6px; } .brand .dot { color: var(--brass); } .brand small { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-60); margin-left: 12px; font-weight: 500; } .site-header.dark .brand small { color: var(--on-ink-soft); } .nav { display: flex; gap: 32px; justify-self: center; } .nav a { font-family: var(--f-body); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; padding: 6px 0; position: relative; transition: color .2s; } .nav a:hover { color: var(--brass); } .nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass); } .header-actions { display: flex; gap: 4px; justify-self: end; align-items: center; } .icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .2s; position: relative; } .icon-btn:hover { background: var(--ink-08); } .site-header.dark .icon-btn:hover { background: rgba(232, 228, 220, 0.08); } .icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; } .cart-badge { position: absolute; top: 4px; right: 4px; background: var(--brass); color: var(--ink); font-family: var(--f-mono); font-size: 9px; font-weight: 600; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .cart-badge.hidden { display: none; } /* ============ Buttons ============ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-family: var(--f-body); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid var(--ink); color: var(--ink); background: transparent; transition: all .25s ease; cursor: pointer; } .btn:hover { background: var(--ink); color: var(--cream); } .btn.btn-light { border-color: var(--bone); color: var(--bone); } .btn.btn-light:hover { background: var(--bone); color: var(--ink); } .btn.btn-solid { background: var(--ink); color: var(--cream); } .btn.btn-solid:hover { background: var(--brass); color: var(--ink); border-color: var(--brass); } .btn.btn-brass { background: var(--brass); border-color: var(--brass); color: var(--ink); } .btn.btn-brass:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); } .link-arrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 4px; transition: gap .25s; } .link-arrow:hover { gap: 16px; } .link-arrow .arrow { display: inline-block; transition: transform .25s; } .link-arrow:hover .arrow { transform: translateX(4px); } /* ============ Footer ============ */ .site-footer { background: var(--ink); color: var(--on-ink); padding: 100px var(--pad) 40px; margin-top: var(--section); } .site-footer .wrap { padding: 0; } .footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 60px; padding-bottom: 80px; border-bottom: 1px solid rgba(232,228,220,.1); } .footer-brand .brand { color: var(--on-ink); font-size: 36px; } .footer-brand p { color: var(--on-ink-soft); margin: 24px 0 32px; max-width: 360px; font-size: 14px; line-height: 1.7; } .footer-col h5 { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); margin-bottom: 24px; font-weight: 500; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .footer-col a { color: var(--on-ink-soft); font-size: 14px; transition: color .2s; } .footer-col a:hover { color: var(--on-ink); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-ink-soft); } .footer-bottom .legal { display: flex; gap: 28px; } .newsletter { display: flex; border-bottom: 1px solid rgba(232,228,220,.2); padding: 8px 0; } .newsletter input { flex: 1; background: transparent; border: 0; outline: none; color: var(--on-ink); font-family: var(--f-body); font-size: 13px; padding: 8px 0; } .newsletter input::placeholder { color: rgba(232,228,220,.45); } .newsletter button { color: var(--brass); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } /* ============ Product card ============ */ .product-card { cursor: pointer; } .product-card .pc-image { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--paper); display: flex; align-items: center; justify-content: center; } .product-card .pc-image img { width: 70%; height: 70%; object-fit: contain; transition: transform .8s cubic-bezier(.2,.6,.2,1); } .product-card:hover .pc-image img { transform: scale(1.06); } .product-card .pc-image .pc-quick { position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 16px); opacity: 0; transition: all .3s; padding: 10px 18px; background: var(--ink); color: var(--cream); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; } .product-card:hover .pc-image .pc-quick { opacity: 1; transform: translate(-50%, 0); } .product-card .pc-meta { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; gap: 16px; } .product-card .pc-name { font-family: var(--f-display); font-size: 22px; line-height: 1.1; } .product-card .pc-code { font-family: var(--f-mono); font-size: 10px; color: var(--ink-60); letter-spacing: 0.16em; text-transform: uppercase; } .product-card .pc-price { font-family: var(--f-mono); font-size: 13px; white-space: nowrap; } .product-card .pc-price .strike { color: var(--ink-40); text-decoration: line-through; margin-right: 6px; font-size: 11px; } /* ============ Inner banner / page header ============ */ .page-hero { padding: 80px var(--pad) 60px; border-bottom: 1px solid var(--line); background: var(--cream); } .page-hero .crumbs { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 32px; } .page-hero .crumbs a { color: var(--ink-60); } .page-hero .crumbs a:hover { color: var(--brass); } .page-hero h1 { font-family: var(--f-display); font-size: clamp(48px, 8vw, 96px); line-height: 0.95; letter-spacing: -0.02em; max-width: 12ch; } .page-hero .ph-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; } .page-hero .ph-meta { max-width: 38ch; } .page-hero .ph-meta p { font-family: var(--f-display); font-size: 20px; line-height: 1.4; color: var(--ink-60); margin: 0; } /* ============ Drawer (cart) ============ */ .drawer-scrim { position: fixed; inset: 0; background: rgba(15,26,31,0.4); opacity: 0; pointer-events: none; z-index: 90; transition: opacity .3s; } .drawer-scrim.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(460px, 100%); background: var(--cream); z-index: 100; transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.6,.2,1); display: flex; flex-direction: column; } .drawer.open { transform: translateX(0); } .drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 28px 32px; border-bottom: 1px solid var(--line); } .drawer-header h3 { font-family: var(--f-display); font-size: 28px; } .drawer-body { flex: 1; overflow-y: auto; padding: 8px 32px; } .drawer-foot { padding: 24px 32px 32px; border-top: 1px solid var(--line); background: var(--cream); } .drawer-foot .row { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 0; } .drawer-foot .total { padding: 14px 0; border-top: 1px solid var(--line); margin-top: 8px; font-size: 14px; } .drawer-foot .btn { width: 100%; justify-content: center; margin-top: 16px; } .cart-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); } .cart-item .ci-img { background: var(--paper); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .cart-item .ci-img img { width: 70%; height: 70%; object-fit: contain; } .cart-item .ci-name { font-family: var(--f-display); font-size: 18px; line-height: 1.1; } .cart-item .ci-code { font-family: var(--f-mono); font-size: 10px; color: var(--ink-60); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; } .cart-item .ci-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); margin-top: 10px; } .cart-item .ci-qty button { width: 26px; height: 26px; font-family: var(--f-mono); font-size: 12px; } .cart-item .ci-qty span { padding: 0 10px; font-family: var(--f-mono); font-size: 12px; min-width: 24px; text-align: center; } .cart-item .ci-price { font-family: var(--f-mono); font-size: 13px; text-align: right; } .cart-item .ci-remove { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); margin-top: 8px; text-align: right; cursor: pointer; } .cart-item .ci-remove:hover { color: var(--brass); } .cart-empty { padding: 60px 0; text-align: center; } .cart-empty .display { font-size: 32px; color: var(--ink-60); margin-bottom: 16px; } .cart-empty p { color: var(--ink-60); margin-bottom: 24px; } /* ============ Tweaks pill ============ */ .tweaks-fab { position: fixed; bottom: 24px; right: 24px; z-index: 80; display: none; align-items: center; gap: 8px; padding: 10px 16px; background: var(--ink); color: var(--cream); border-radius: 999px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; box-shadow: 0 12px 30px rgba(0,0,0,.15); } /* ============ Tweaks panel ============ */ .tweaks-panel { position: fixed; bottom: 24px; right: 24px; z-index: 95; width: 320px; background: var(--cream); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(15, 26, 31, 0.18); padding: 24px; transform: translateY(20px); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; } .tweaks-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .tp-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; } .tp-eyebrow { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); margin-bottom: 6px; } .tp-title { font-family: var(--f-display); font-size: 24px; line-height: 1; } .tp-sub { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-60); margin-bottom: 20px; line-height: 1.5; } .tp-body { display: grid; gap: 8px; } .tp-option { border: 1px solid var(--line); padding: 14px 16px; cursor: pointer; transition: all .2s; position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; } .tp-option:hover { border-color: var(--ink-40); } .tp-option.active { border-color: var(--ink); background: var(--paper); } .tp-opt-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; } .tp-num { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--brass); } .tp-radio { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--ink-20); position: relative; flex-shrink: 0; } .tp-option.active .tp-radio { border-color: var(--ink); } .tp-option.active .tp-radio::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--ink); } .tp-display { font-size: 28px; line-height: 1; letter-spacing: -0.01em; } .tp-display em { font-style: italic; color: var(--brass); } .tp-body-sample { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; } .tp-desc { grid-column: 1 / -1; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--ink-60); text-transform: uppercase; } /* ============ Toast ============ */ .toast { position: fixed; top: 24px; left: 50%; transform: translate(-50%, -20px); background: var(--ink); color: var(--cream); padding: 14px 24px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; z-index: 200; opacity: 0; pointer-events: none; transition: all .3s; } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ============ Modal (quick view) ============ */ .modal-scrim { position: fixed; inset: 0; background: rgba(15,26,31,.6); opacity: 0; pointer-events: none; z-index: 110; transition: opacity .3s; display: flex; align-items: center; justify-content: center; padding: 40px; } .modal-scrim.open { opacity: 1; pointer-events: auto; } .modal { background: var(--cream); max-width: 1000px; width: 100%; max-height: 90vh; overflow: auto; transform: scale(.96); transition: transform .3s; display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .modal-scrim.open .modal { transform: scale(1); } .modal .mv-image { background: var(--paper); display: flex; align-items: center; justify-content: center; min-height: 480px; } .modal .mv-image img { width: 65%; } .modal .mv-body { padding: 48px; display: flex; flex-direction: column; gap: 20px; } .modal .mv-body .eyebrow { margin: 0; } .modal .mv-body h2 { font-family: var(--f-display); font-size: 44px; line-height: 1; } .modal .mv-body .price { font-family: var(--f-mono); font-size: 14px; } .modal .mv-body .price .strike { text-decoration: line-through; color: var(--ink-40); margin-right: 8px; } .modal .mv-body .desc { color: var(--ink-60); font-size: 14px; line-height: 1.7; } .modal .mv-body .swatches { display: flex; gap: 10px; margin-top: 4px; } .modal .mv-body .swatch { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; } .modal .mv-body .swatch.active { outline: 1px solid var(--ink); outline-offset: 3px; } .modal .mv-close { position: absolute; top: 24px; right: 24px; color: var(--cream); width: 40px; height: 40px; border: 1px solid var(--on-ink-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* ============ Mobile ============ */ @media (max-width: 880px) { .header-utility { display: none; } .nav { display: none; } .footer-top { grid-template-columns: 1fr; gap: 40px; } .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; } .modal { grid-template-columns: 1fr; } .modal .mv-image { min-height: 300px; } }