/* ================================================================ LOOM — Design system (light editorial) Single source of truth: tokens, base, shared components. Loaded by every customer page. Page-specific styles stay inline on each page but must only use these tokens. Layers in this file: 1. Tokens 4. Buttons & links 7. Footer 2. Base 5. Sections & type 8. Loader / veil / reveal 3. Utilities 6. Cards & marquee 9. Forms 10. Reduced motion ================================================================ */ /* ── 1. Tokens ─────────────────────────────────────────────── */ :root { color-scheme: light; /* Canvas & ink */ --paper: #f4f2ed; /* warm off-white canvas */ --paper-2: #ebe8e1; /* recessed surfaces (image tiles, table heads) */ --paper-3: #ffffff; /* raised surfaces (cards, panels, menus) */ --ink: #131311; /* near-black text */ --ink-70: rgba(19, 19, 17, 0.70); --ink-55: rgba(19, 19, 17, 0.55); --ink-38: rgba(19, 19, 17, 0.38); --line: rgba(19, 19, 17, 0.16); /* hairlines */ --line-soft: rgba(19, 19, 17, 0.09); /* Accent — disciplined: links, hovers, active states, key CTAs */ --accent: #fc5044; --accent-deep: #d63a2f; /* small text on paper needs the deeper cut */ --accent-tint: rgba(252, 80, 68, 0.08); --accent-55: rgba(252, 80, 68, 0.55); --on-accent: #ffffff; /* text sitting on accent fills */ /* Inverted (ink) sections */ --on-ink: #f4f2ed; --on-ink-55: rgba(244, 242, 237, 0.55); --on-ink-line: rgba(244, 242, 237, 0.16); --surface-ink: #131311; /* bg of inverted bands (.sect--ink, alt tiles) */ /* Surfaces & washes (theme-dependent, never hardcode) */ --media-bg: #ffffff; /* product-photo tiles (photos are studio-white) */ --field-bg: #ffffff; /* form inputs */ --card-wash: rgba(255, 255, 255, 0.55); /* card hover/active wash */ --hover-wash: rgba(19, 19, 17, 0.04); /* subtle icon-button hover */ --nav-bg: rgba(244, 242, 237, 0.82); /* nav glass */ --nav-bg-strong: rgba(244, 242, 237, 0.94);/* nav glass, phones */ --scrim: rgba(19, 19, 17, 0.4); /* modal/menu backdrops */ --menu-shadow: 0 14px 40px rgba(19, 19, 17, 0.14); /* Status */ --ok: #15803d; --ok-tint: rgba(21, 128, 61, 0.08); --danger: #d6382d; --danger-tint: rgba(214, 58, 47, 0.08); --warn: #a16207; --warn-tint: rgba(161, 98, 7, 0.08); /* Type — full Cyrillic support (DM Sans had none; RU fell back to system) */ --font-display: 'Inter Tight', 'Inter', -apple-system, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', monospace; --text-display: clamp(2.9rem, 8.6vw, 7.25rem); /* hero */ --text-h2: clamp(2.1rem, 5vw, 4.4rem); /* section titles */ --text-h3: clamp(1.15rem, 1.8vw, 1.5rem); --text-body: 1rem; --text-sm: 0.86rem; --text-label: 0.68rem; /* mono eyebrows */ /* Layout */ --max-w: 1360px; --gutter: clamp(1.25rem, 4vw, 2.75rem); --sect-y: clamp(4.5rem, 10vw, 8rem); --nav-h: 64px; --radius: 2px; /* sharp, editorial */ /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* expo-ish decel */ --ease-inout: cubic-bezier(0.77, 0, 0.18, 1); --dur-fast: 0.22s; --dur: 0.5s; --dur-slow: 0.9s; } /* ── 1b. Dark theme ──────────────────────────────────────────── Same warm editorial system, inverted. data-theme is set on by assets/boot.js BEFORE first paint (localStorage `loom_theme`, falling back to prefers-color-scheme). Accent survives unchanged; --accent-deep swaps to a lighter cut because small red text needs luminance on dark paper, not depth. */ :root[data-theme="dark"] { color-scheme: dark; --paper: #151412; --paper-2: #1d1c19; --paper-3: #242321; --ink: #eeebe4; --ink-70: rgba(238, 235, 228, 0.72); --ink-55: rgba(238, 235, 228, 0.56); --ink-38: rgba(238, 235, 228, 0.40); --line: rgba(238, 235, 228, 0.17); --line-soft: rgba(238, 235, 228, 0.10); --accent: #fc5044; --accent-deep: #ff7d72; --accent-tint: rgba(252, 80, 68, 0.16); --accent-55: rgba(252, 80, 68, 0.55); --on-accent: #ffffff; --on-ink: #f0ede6; --on-ink-55: rgba(240, 237, 230, 0.55); --on-ink-line: rgba(240, 237, 230, 0.16); --surface-ink: #0c0b0a; /* inverted bands go deeper than the canvas */ --media-bg: #201f1c; --field-bg: #1c1b18; --card-wash: rgba(255, 255, 255, 0.05); --hover-wash: rgba(238, 235, 228, 0.07); --nav-bg: rgba(21, 20, 18, 0.80); --nav-bg-strong: rgba(21, 20, 18, 0.94); --scrim: rgba(0, 0, 0, 0.62); --menu-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); --ok: #3ecf72; --ok-tint: rgba(62, 207, 114, 0.12); --danger: #ff6b5e; --danger-tint: rgba(255, 107, 94, 0.12); --warn: #e8b93c; --warn-tint: rgba(232, 185, 60, 0.12); } /* First paint: boot.js stamps data-theme synchronously, then removes .theme-booting two frames later — nothing may animate the initial theme. */ html.theme-booting *, html.theme-booting *::before, html.theme-booting *::after { transition: none !important; } /* User-initiated switch: boot.js pins .theme-anim on for ~400ms so the whole page crossfades (reference behaviour), then unpins so GSAP / component transitions get their own timings back. */ html.theme-anim body, html.theme-anim body *, html.theme-anim body *::before, html.theme-anim body *::after { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, fill 0.25s ease, stroke 0.25s ease, box-shadow 0.25s ease !important; } /* ── 2. Base ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; /* clip (not hidden): kills sideways wiggle without creating a scroll container that would break position: sticky descendants */ overflow-x: clip; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* FOUC guard — assets/boot.js adds .motion-hold before first paint when an intro/transition will cover the page; motion.js (or its failsafe) lifts it */ html.motion-hold body { opacity: 0; } a { color: inherit; text-decoration: none; } img, video { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } /* one consistent touch layer: no gray Android flash, no 350ms double-tap-zoom delay on interactive elements */ a, button, [role="button"], label, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } h1, h2, h3, h4, p, ul, figure { margin: 0; } ::selection { background: var(--accent); color: var(--paper); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ── 3. Utilities ──────────────────────────────────────────── */ .container { max-width: var(--max-w); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .hairline { border: 0; border-top: 1px solid var(--line); margin: 0; } /* ── 4. Buttons & links ────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.9rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-radius: var(--radius); border: 1px solid var(--ink); white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; } .btn--solid { background: var(--ink); color: var(--paper); } .btn--solid:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn--outline { background: transparent; color: var(--ink); } .btn--outline:hover { background: var(--ink); color: var(--paper); } /* on inverted sections */ .btn--on-ink { border-color: var(--on-ink); color: var(--on-ink); background: transparent; } .btn--on-ink:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* Inline arrow link — accent on hover */ .link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-55); transition: color var(--dur-fast) ease, gap var(--dur-fast) var(--ease-out); /* ~44px touch target without moving the baseline */ padding: 0.8rem 0; margin: -0.8rem 0; } .link-arrow:hover { color: var(--accent-deep); gap: 0.65rem; } /* ── 5. Sections & type ────────────────────────────────────── */ .eyebrow { font-family: var(--font-mono); font-size: var(--text-label); font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-38); } .display { font-family: var(--font-display); font-size: var(--text-display); font-weight: 700; line-height: 0.96; letter-spacing: -0.035em; } /* Uzbek runs long single words ("Tasavvuringizdagini") — scale the display size down so headlines never overflow their column */ html[lang="uz"] .display { font-size: clamp(2.2rem, 5.6vw, 5rem); overflow-wrap: anywhere; } .h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 700; line-height: 0.98; letter-spacing: -0.03em; } /* The brand "/" — one of the few standing accent marks */ .slash { color: var(--accent); } .sect { padding: var(--sect-y) 0; } .sect--ink { background: var(--surface-ink); color: var(--on-ink); } /* Section header row: eyebrow left, meta/link right, rule underneath */ .sect-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); margin-bottom: clamp(2rem, 5vw, 3.5rem); } /* ── 6. Cards & marquee ────────────────────────────────────── */ /* Editorial product card: hairline column grid, image tile, mono meta */ .pcard { display: flex; flex-direction: column; padding: clamp(1.25rem, 2.4vw, 2rem); border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: transparent; transition: background var(--dur-fast) ease; } .pcard:hover { background: var(--card-wash); } .pcard__media { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--media-bg); border: 1px solid var(--line-soft); margin-bottom: 1.4rem; } /* cover, not contain: the product photos carry their own studio-gray backdrop — letterboxing them painted visible seams on the white tile */ .pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .pcard:hover .pcard__media img { transform: scale(1.05); } /* Hover image-swap. No second photo shot yet, so the "back" is a styled ink tile carrying the product name — drop an into .pcard__media-alt later to swap to a real photo. */ .pcard__media-alt { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; padding: 1.2rem; text-align: center; background: var(--surface-ink); color: var(--on-ink); opacity: 0; transition: opacity var(--dur) var(--ease-out); } .pcard:hover .pcard__media-alt, .product-card:hover .pcard__media-alt { opacity: 1; } /* real second photo (when present) fills the tile; slight settle-in */ .pcard__media-alt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; /* portrait shots in a square tile: crop legs, never heads */ transform: scale(1.06); transform-origin: top center; transition: transform var(--dur-slow) var(--ease-out); } .pcard:hover .pcard__media-alt img, .product-card:hover .pcard__media-alt img { transform: scale(1); } .pcard__alt-tag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--on-ink-55); } .pcard__alt-name { font-family: var(--font-display); font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; } .pcard__alt-slash { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--accent); } /* accent arrow chip slides in on hover */ .pcard__go { z-index: 2; position: absolute; right: 0; bottom: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on-accent); transform: translateY(102%); transition: transform var(--dur) var(--ease-out); } .pcard:hover .pcard__go { transform: translateY(0); } .pcard__go svg { width: 17px; height: 17px; } .pcard__tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-38); margin-bottom: 0.55rem; } .pcard__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.45rem; } .pcard__desc { font-size: var(--text-sm); color: var(--ink-55); line-height: 1.55; margin-bottom: 1.4rem; } .pcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .pcard__price { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--ink-70); } .color-dots { display: flex; gap: 4px; align-items: center; } .color-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line); flex-shrink: 0; } /* Marquee — content duplicated by motion.js for a seamless loop */ .marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0.9rem 0; white-space: nowrap; } .marquee__track { display: inline-flex; align-items: baseline; gap: 3rem; padding-right: 3rem; will-change: transform; animation: marquee-scroll var(--marquee-dur, 28s) linear infinite; } .marquee__item { font-family: var(--font-display); /* 5.5vw keeps the strip confident on phones; still caps at 1.7rem */ font-size: clamp(1.35rem, 5.5vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } .marquee__item--mono { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-38); } .marquee__dot { color: var(--accent); } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── 7. Footer (markup injected by assets/layout.js) ───────── */ .site-footer { border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; background: var(--paper); } .site-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 6vw, 4rem); } .site-footer__brand { font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 5.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .site-footer__brand .slash { margin-left: 0.06em; } .site-footer__cols { display: flex; gap: clamp(2rem, 6vw, 5.5rem); flex-wrap: wrap; } .site-footer__heading { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-38); margin-bottom: 0.9rem; } .site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .site-footer__links a { font-size: var(--text-sm); color: var(--ink-70); transition: color var(--dur-fast) ease; } .site-footer__links a:hover { color: var(--accent-deep); } .site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ink-38); } /* ── 8. Loader / veil / reveal (built by assets/motion.js) ─── */ .loader { position: fixed; inset: 0; z-index: 900; background: var(--paper); display: flex; align-items: center; justify-content: center; } .loader__brand { position: absolute; top: 1.4rem; left: var(--gutter); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; } .loader__frame { width: min(46vw, 250px); aspect-ratio: 1; position: relative; background: var(--media-bg); border: 1px solid var(--line); } .loader__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; } .loader__frame img.on { opacity: 1; } .loader__count { position: absolute; right: var(--gutter); bottom: 1rem; font-family: var(--font-display); font-size: clamp(4rem, 14vw, 9rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; } .loader__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--accent); } /* Masked line reveals: masks are wrapped AROUND [data-i18n] nodes by motion.js, so language switching never destroys the structure. The padding/negative-margin pair enlarges the clip window so glyph descenders (р, у, д…) survive the tight display line-height while animating; motion.js sets overflow:visible once a line has settled. */ .mask-line { display: block; overflow: hidden; padding: 0.06em 0 0.16em; margin: -0.06em 0 -0.16em; } .mask-line > * { display: block; } /* ── 9. Forms (shared look for account/auth/order fields) ──── */ .f-label { display: block; font-size: 0.78rem; font-weight: 500; color: var(--ink-55); margin-bottom: 0.4rem; } .f-input { width: 100%; padding: 0.72rem 0.95rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--field-bg); color: var(--ink); font-family: var(--font-body); font-size: 0.9rem; outline: none; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .f-input::placeholder { color: var(--ink-38); } .f-input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-tint); } /* below 16px iOS Safari zoom-jumps the page on focus */ @media (max-width: 767px) { .f-input { font-size: 1rem; } } /* ── Custom cursor follower (built by motion.js on pointer-fine) ── Reference-style: the native cursor stays; this accent dot trails behind it, grows translucent over interactive elements, and fades when the pointer idles. */ .cursor { position: fixed; top: 0; left: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); z-index: 10010; pointer-events: none; opacity: 0; transition: opacity 0.25s ease, background 0.25s ease; } .cursor--on { opacity: 1; } .cursor--idle, .cursor--hide { opacity: 0 !important; } .cursor--grow { background: var(--accent-55); } /* ── Page-transition curtain (reference-style red wipe) ─────── */ /* leave leg: element created by motion.js, animated with clip-path */ .wipe { position: fixed; inset: 0; z-index: 985; background: var(--accent); pointer-events: none; clip-path: inset(100% 0 0 0); will-change: clip-path; display: flex; align-items: center; justify-content: center; } /* arrival leg: painted before first render via boot.js class */ html.page-covered::after { content: ''; position: fixed; inset: 0; z-index: 985; background: var(--accent); pointer-events: none; } html.page-reveal::after { animation: loom-wipe-out 0.55s cubic-bezier(0.77, 0, 0.18, 1) both; } @keyframes loom-wipe-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } } /* Transition label: destination name rides the curtain on the way out, and is re-shown over the arrival cover so the word appears to carry across the navigation. Returning home swaps the name for the LOOM wordmark (reference-style letter reveal). Built by motion.js. */ .cover-label { position: fixed; inset: 0; z-index: 986; /* one above the cover / wipe */ display: flex; align-items: center; justify-content: center; pointer-events: none; } .tlabel { display: inline-flex; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--on-accent); font-size: clamp(2rem, 8vw, 5rem); white-space: nowrap; } .tlabel--wordmark { font-size: clamp(3.4rem, 17vw, 10rem); letter-spacing: -0.04em; } /* full-strength: at 0.72 the slash sank into the red curtain and read as "covered with color" — the wordmark must arrive whole */ .tlabel .slash { color: var(--on-accent); opacity: 1; } /* per-letter masks — descender-safe clip windows, like .mask-line. Horizontal padding matters too: the "/" glyph leans past its advance width (tight letter-spacing), and a zero-width window shaves its diagonal — the slash showed up partially covered by the curtain. */ .tlabel .tl-m { display: inline-block; overflow: hidden; padding: 0.08em 0.07em 0.16em; margin: -0.08em -0.07em -0.16em; } .tlabel .tl-m > span { display: inline-block; will-change: transform; } /* ── 9.4 Bag (full-screen drawer, markup injected by assets/cart.js) ── */ .drawer-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: 300; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .drawer-backdrop.active { opacity: 1; visibility: visible; } .cart-drawer { position: fixed; inset: 0; width: 100vw; height: 100%; z-index: 310; background: var(--paper); transform: translateY(102%); transition: transform 0.55s var(--ease-inout); display: flex; flex-direction: column; } .cart-drawer.active { transform: translateY(0); } .cart-head { flex-shrink: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; max-width: var(--max-w); width: 100%; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem) var(--gutter) 0.5rem; border-bottom: 2px solid var(--accent); } .cart-title { font-family: var(--font-display); font-size: clamp(2.8rem, 9vw, 6.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; color: var(--accent); text-transform: uppercase; margin: 0; } .cart-title-slash { color: var(--ink); margin-left: 0.05em; } .cart-head .mobile-menu-close { width: 44px; height: 44px; color: var(--ink); margin-bottom: 0.6rem; } .cart-head .mobile-menu-close:hover { color: var(--accent); background: transparent; } .cart-head .mobile-menu-close svg { width: 30px; height: 30px; } .cart-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; max-width: var(--max-w); width: 100%; margin: 0 auto; padding: 1rem var(--gutter); display: flex; flex-direction: column; gap: 0; } .cart-empty { font-family: var(--font-display); font-size: clamp(1.8rem, 5.5vw, 3.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; color: var(--accent); text-align: left; padding: 3rem 0; margin: 0; max-width: 18ch; } .cart-item { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); padding: 1.4rem 0; border-bottom: 1px solid var(--line); } .cart-item-thumb { width: 92px; height: 92px; object-fit: cover; position: relative; background: var(--media-bg); flex-shrink: 0; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-38); overflow: hidden; } .cart-item-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; } .cart-item-name { font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .cart-item-meta { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-55); } .cart-item-price { font-size: clamp(0.95rem, 1.6vw, 1.15rem); font-weight: 600; color: var(--ink); font-family: var(--font-mono); margin-top: 0.2rem; } .cart-item-row { display: flex; align-items: center; gap: 1rem; margin-top: 0.2rem; } .cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); } .cart-qty-btn { width: 34px; height: 34px; border: none; background: transparent; color: var(--ink-70); font-size: 1.05rem; font-weight: 600; cursor: pointer; line-height: 1; transition: background 0.15s ease, color 0.15s ease; } .cart-qty-btn:hover { background: var(--hover-wash); color: var(--ink); } .cart-qty-val { min-width: 34px; text-align: center; font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); font-variant-numeric: tabular-nums; } .cart-item-edit { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-55); text-decoration: none; padding: 0.5rem 0; transition: color 0.15s ease; } .cart-item-edit:hover { color: var(--accent-deep); } .cart-item-remove { background: transparent; border: none; color: var(--ink-55); cursor: pointer; padding: 0.4rem; align-self: center; transition: color 0.15s ease, transform 0.2s ease; } .cart-item-remove:hover { color: var(--danger); transform: rotate(90deg); } .cart-item-remove svg { width: 20px; height: 20px; } .cart-foot { flex-shrink: 0; max-width: var(--max-w); width: 100%; margin: 0 auto; padding: 1rem var(--gutter) calc(clamp(1.5rem, 4vw, 2.5rem) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.5rem; } .cart-total-row { display: flex; justify-content: space-between; align-items: baseline; } .cart-total-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-55); } .cart-total-val { font-family: var(--font-mono); font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 600; color: var(--ink); } /* giant text-action checkout, reference-style */ .cart-foot .btn-primary-full, .cart-foot #cartCheckoutBtn { width: auto; align-self: flex-start; background: transparent; border: none; padding: 0.2rem 0; color: var(--accent); cursor: pointer; font-family: var(--font-display); font-size: clamp(1.7rem, 5vw, 2.9rem); font-weight: 700; letter-spacing: -0.02em; text-transform: none; display: inline-flex; align-items: baseline; gap: 0.3em; transition: color 0.2s ease; } .cart-foot #cartCheckoutBtn::after { content: '\2197'; font-size: 0.85em; } .cart-foot #cartCheckoutBtn:hover { color: var(--ink); background: transparent; } @media (max-width: 900px) { .cart-item-remove { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; } .cart-qty-btn { width: 40px; height: 40px; } } /* ── 9.45 Address picker (assets/address-picker.js) ─────────── */ .addr-picker { display: flex; flex-direction: column; gap: 0.6rem; } .addr-search { position: relative; } .addr-search-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--ink-38); pointer-events: none; } .addr-search-input { width: 100%; padding: 0.8rem 1rem 0.8rem 2.5rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--field-bg); color: var(--ink); font-family: var(--font-body); font-size: 0.92rem; outline: none; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .addr-search-input::placeholder { color: var(--ink-38); } .addr-search-input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-tint); } .addr-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1200; background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--menu-shadow); overflow: hidden; } .addr-suggest-item { display: flex; flex-direction: column; gap: 0.1rem; width: 100%; text-align: left; padding: 0.7rem 0.95rem; background: transparent; border: none; cursor: pointer; font-family: var(--font-body); font-size: 0.88rem; color: var(--ink); border-bottom: 1px solid var(--line-soft); transition: background 0.12s ease; } .addr-suggest-item:last-child { border-bottom: none; } .addr-suggest-item:hover { background: var(--hover-wash); } .addr-suggest-item small { color: var(--ink-55); font-size: 0.75rem; } .addr-map-wrap { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .addr-map { height: 300px; width: 100%; background: var(--paper-2); } /* the pin never moves — the map does; lift it so the TIP marks center */ .addr-pin { position: absolute; left: 50%; top: 50%; z-index: 800; transform: translate(-50%, -100%); pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3)); } .addr-locate { position: absolute; right: 10px; bottom: 10px; z-index: 800; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--paper-3); color: var(--ink); border: 1px solid var(--line); cursor: pointer; box-shadow: var(--menu-shadow); transition: color 0.15s ease, border-color 0.15s ease; } .addr-locate:hover { color: var(--accent-deep); border-color: var(--ink); } .addr-line { min-height: 1.4em; } .addr-line-text { font-size: 0.88rem; color: var(--ink); } .addr-line-text[data-state="idle"] { color: var(--ink-38); } .addr-line-text[data-state="busy"] { color: var(--ink-55); } .addr-line-text[data-state="error"] { color: var(--danger); } .addr-line-text[data-state="ok"]::before { content: '📍 '; } /* Leaflet chrome follows the theme */ .addr-map .leaflet-control-zoom a { background: var(--paper-3); color: var(--ink); border-color: var(--line); } .addr-map .leaflet-control-attribution { background: var(--nav-bg); color: var(--ink-55); font-size: 0.6rem; } .addr-map .leaflet-control-attribution a { color: var(--ink-70); } /* ── 9.5 Touch & small-screen adaptations ──────────────────── */ /* Touch devices: hover choreography never fires meaningfully (iOS applies sticky :hover on the first tap — the card flashes its alt state under the page wipe). Neutralize it and answer touch with instant pressed states instead. */ @media (hover: none) { .pcard:hover { background: transparent; } .pcard:hover .pcard__media img { transform: none; } .pcard:hover .pcard__media-alt, .product-card:hover .pcard__media-alt { opacity: 0; } .pcard:hover .pcard__media-alt img, .product-card:hover .pcard__media-alt img { transform: scale(1.06); } .btn--solid:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } .btn--outline:hover { background: transparent; color: var(--ink); } .btn--on-ink:hover { background: transparent; border-color: var(--on-ink); color: var(--on-ink); } .link-arrow:hover { color: var(--ink-55); gap: 0.4rem; } /* the arrow chip is a dead hover reveal on touch — show it, smaller */ .pcard__go { transform: none; width: 36px; height: 36px; } /* pressed states: instant (<100ms) response reads premium on touch */ .btn { transition: transform 150ms var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .btn:active { transform: scale(0.97); } .btn--solid:active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn--outline:active { background: var(--ink); color: var(--paper); } .btn--on-ink:active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .pcard { transition: transform 150ms var(--ease-out), background 150ms ease; } .pcard:active { background: var(--card-wash); transform: scale(0.985); } .link-arrow:active { color: var(--accent-deep); } .site-footer__links a:active { color: var(--accent-deep); } /* JS-driven in-view crossfade replaces the hover image swap (only applied to tiles that carry a real second photo) */ .pcard__media-alt { transition: opacity 0.7s var(--ease-out); } .pcard__media.swap .pcard__media-alt { opacity: 1 !important; } .pcard__media.swap .pcard__media-alt img { transform: scale(1) !important; } } /* Editorial card, phone composition: full-bleed portrait image, tag / name / price only — the sentence belongs on desktop */ @media (max-width: 620px) { .product-grid3 { border-left: none; } .pcard { padding: 1.4rem 0 1.6rem; border-right: none; } .pcard__media { aspect-ratio: 4 / 5; margin-bottom: 1rem; } .pcard__desc { display: none; } .pcard__name { font-size: 1.25rem; } .pcard__foot { margin-top: 0.1rem; } /* micro-type legibility floor (~11px) */ :root { --text-label: 0.7rem; } .pcard__tag { font-size: 0.68rem; } .pcard__alt-tag { font-size: 0.66rem; } /* footer: full-width wordmark, even two-column links, stacked legal */ .site-footer__brand { font-size: clamp(3.4rem, 19vw, 5.5rem); width: 100%; } .site-footer__top { flex-direction: column; gap: 2.2rem; } .site-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; width: 100%; } .site-footer__links a { padding: 0.2rem 0; display: inline-block; } .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.4rem; } } /* Page wipe: tighter on touch — every tap pays this toll */ @media (pointer: coarse) { html.page-reveal::after { animation-duration: 0.38s; } } /* ── 10. Reduced motion — instant, readable, calm ──────────── */ @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; } .marquee__track { animation: none; transform: none; } .pcard__go { transform: none; } html.motion-hold body { opacity: 1; } html.page-covered::after { content: none; } .wipe, .cursor { display: none; } }