/* ======================================================================== StitchingStories — Design System ======================================================================== */ :root{ /* Palette 1 — Terracotta & Parchment (default) */ --bg: #F5EFE4; --bg-soft: #EEE5D4; --bg-card: #FAF5EB; --ink: #2B2620; --ink-soft: #5A4F42; --ink-mute: #8B7E6A; --line: #D9CEB8; --line-soft: #E6DCC7; --brand: #8B4A3B; /* terracotta */ --brand-ink: #6B3328; --thread: #C67D5E; /* ochre thread */ --thread-2: #D4A373; --accent: #3E5C4A; /* sage accent */ --hot: #C4412D; /* sale / hot */ /* Type */ --serif: "DM Serif Display", "Newsreader", Georgia, serif; --sans: "IBM Plex Sans", -apple-system, Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; /* Motion */ --ease: cubic-bezier(.22,.61,.36,1); } /* palette swaps (applied to ) */ html[data-palette="sage"]{ --bg:#F1EFE6; --bg-soft:#E7E4D6; --bg-card:#F8F6ED; --ink:#1E2520; --ink-soft:#4A5349; --ink-mute:#7E8A7C; --line:#D0D0C0; --line-soft:#E1DFCF; --brand:#3E5C4A; --brand-ink:#2A3F33; --thread:#A86A52; --thread-2:#C8A27A; --accent:#8B4A3B; --hot:#B3412A; } html[data-palette="indigo"]{ --bg:#F3EFEA; --bg-soft:#E6DED3; --bg-card:#FAF5EE; --ink:#1C2230; --ink-soft:#3E4658; --ink-mute:#7A7E8A; --line:#CDCEC6; --line-soft:#E0DFD5; --brand:#3A4A5C; --brand-ink:#232D3A; --thread:#C9A875; --thread-2:#E0BF91; --accent:#A86A52; --hot:#B44530; } /* font swaps */ html[data-font="serif"]{ --serif:"DM Serif Display", Georgia, serif; --sans:"IBM Plex Sans", sans-serif; } html[data-font="editorial"]{ --serif:"Newsreader", Georgia, serif; --sans:"Work Sans", sans-serif; } html[data-font="modern"]{ --serif:"Instrument Serif", Georgia, serif; --sans:"Geist", "IBM Plex Sans", sans-serif; } *,*::before,*::after{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ font-family: var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing:antialiased; text-rendering: optimizeLegibility; font-size: 16px; line-height: 1.55; } h1,h2,h3,h4{ font-family: var(--serif); font-weight:400; line-height:1.15; letter-spacing:-0.01em; margin:0; } h1{ font-size: clamp(28px, 4vw, 48px); line-height:1.1; } h2{ font-size: clamp(22px, 2.6vw, 32px); } h3{ font-size: clamp(18px, 1.6vw, 22px); } h4{ font-size: clamp(16px, 1.2vw, 18px); } p{ margin:0; text-wrap: pretty; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; } img{ display:block; max-width:100%; } /* ---------- Layout ---------- */ .container{ max-width:1280px; margin:0 auto; padding: 0 16px; } .container-wide{ max-width:1440px; margin:0 auto; padding: 0 16px; } @media (min-width:768px){ .container{ padding: 0 28px; } .container-wide{ padding: 0 28px; } } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; padding: 14px 22px; border-radius: 999px; font-weight:500; font-size:15px; letter-spacing:0.01em; transition: all .25s var(--ease); white-space:nowrap; } .btn-primary{ background: var(--ink); color: var(--bg); } .btn-primary:hover{ background: var(--brand); } .btn-brand{ background: var(--brand); color: var(--bg); } .btn-brand:hover{ background: var(--brand-ink); } .btn-ghost{ border:1px solid var(--line); color: var(--ink); } .btn-ghost:hover{ border-color: var(--ink); background:var(--bg-soft); } .btn-ico{ width:44px; height:44px; padding:0; border-radius:999px; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; } .btn-ico:hover{ border-color:var(--ink); background:var(--bg-soft); } .pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background: var(--bg-soft); border:1px solid var(--line); font-size:12px; letter-spacing:0.04em; text-transform: uppercase; color: var(--ink-soft); font-family: var(--mono); } .pill-dot::before{ content:""; width:6px; height:6px; border-radius:999px; background: var(--brand); } .eyebrow{ font-family: var(--mono); font-size:11px; letter-spacing:0.14em; text-transform: uppercase; color: var(--ink-mute); } /* ---------- Cross-stitch motif utilities ---------- */ .xstitch-bg{ background-image: linear-gradient(45deg, transparent 47%, currentColor 47%, currentColor 53%, transparent 53%), linear-gradient(-45deg, transparent 47%, currentColor 47%, currentColor 53%, transparent 53%); background-size: 14px 14px; color: var(--line); opacity:.6; } .xstitch-divider{ height:14px; background-image: linear-gradient(45deg, transparent 45%, var(--ink-mute) 45%, var(--ink-mute) 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--ink-mute) 45%, var(--ink-mute) 55%, transparent 55%); background-size: 10px 10px; opacity:.45; } /* small × glyph that reads as a cross-stitch */ .stitch-mark{ display:inline-block; width:0.7em; height:0.7em; position:relative; } .stitch-mark::before, .stitch-mark::after{ content:""; position:absolute; inset:0; margin:auto; width: 100%; height: 1.5px; background: currentColor; border-radius:1px; } .stitch-mark::before{ transform: rotate(45deg); } .stitch-mark::after{ transform: rotate(-45deg); } /* ---------- Chart swatch (pattern preview) ---------- */ /* render a tiny cross-stitch chart via background-image for product cards */ .chart-preview{ background-color: var(--bg-card); background-image: linear-gradient(to right, rgba(0,0,0,.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.08) 1px, transparent 1px); background-size: 8px 8px; position: relative; overflow:hidden; } /* ---------- Nav ---------- */ .nav{ position: sticky; top:0; z-index: 50; background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom:1px solid var(--line-soft); } .nav-inner{ display:flex; align-items:center; gap:12px; height:60px; } @media (min-width:768px){ .nav-inner{ gap:28px; height:72px; } } .logo{ display:flex; align-items:center; gap:8px; font-family: var(--serif); font-size:20px; letter-spacing:-0.01em; } @media (min-width:768px){ .logo{ gap:10px; font-size:24px; } } .logo-mark{ width:30px; height:30px; display:grid; place-items:center; background: var(--ink); color: var(--bg); border-radius:8px; font-family: var(--mono); font-size:16px; line-height:1; } @media (min-width:768px){ .logo-mark{ width:34px; height:34px; font-size:18px; } } .nav-links{ display:none; gap:28px; margin-left:20px; } .nav-links a{ font-size:15px; color: var(--ink-soft); } .nav-links a:hover{ color: var(--ink); } @media (min-width:1024px){ .nav-links{ display:flex; } } .nav-right{ margin-left:auto; display:flex; align-items:center; gap:8px; } @media (min-width:768px){ .nav-right{ gap:14px; } } .nav-hide-mobile{ display:none !important; } @media (min-width:1024px){ .nav-hide-mobile{ display:inline-flex !important; } } .lang-switcher{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); font-size:12px; font-family: var(--mono); letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; background:var(--bg); } @media (min-width:768px){ .lang-switcher{ padding:8px 12px; font-size:13px; } } .lang-switcher:hover{ border-color: var(--ink); } .lang-dropdown{ display:none; } .lang-dropdown.open{ display:block; } /* ---------- Mobile burger button ---------- */ .nav-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:12px 10px; cursor:pointer; } .nav-burger span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition: transform .3s var(--ease), opacity .2s; } .nav-burger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-burger.active span:nth-child(2){ opacity:0; } .nav-burger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } @media (min-width:1024px){ .nav-burger{ display:none; } } /* ---------- Mobile navigation drawer ---------- */ .nav-mobile{ position:fixed; top:0; left:0; right:0; bottom:0; z-index:49; background:var(--bg); padding-top:60px; /* below nav */ transform:translateX(100%); transition:transform .35s var(--ease); overflow-y:auto; -webkit-overflow-scrolling:touch; } .nav-mobile.open{ transform:translateX(0); } @media (min-width:1024px){ .nav-mobile{ display:none !important; } } .nav-mobile-inner{ padding:24px 16px 40px; display:flex; flex-direction:column; gap:24px; } .nav-mobile-links{ display:flex; flex-direction:column; gap:0; } .nav-mobile-links a{ display:block; padding:16px 0; font-family:var(--serif); font-size:28px; border-bottom:1px solid var(--line-soft); color:var(--ink); } .nav-mobile-actions{ display:flex; flex-direction:column; gap:4px; } .nav-mobile-link-row{ display:flex; align-items:center; gap:12px; padding:12px 0; font-size:16px; color:var(--ink-soft); } .body-no-scroll{ overflow:hidden; } /* topbar discount */ .topbar{ background: var(--ink); color: var(--bg); font-family: var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; padding: 8px 16px; text-align:center; line-height:1.4; } @media (min-width:768px){ .topbar{ font-size:12px; letter-spacing:0.1em; padding:10px 0; } } .topbar .stitch-mark{ margin: 0 6px; color: var(--thread); } @media (min-width:768px){ .topbar .stitch-mark{ margin: 0 12px; } } .topbar-sub{ display:none; } @media (min-width:480px){ .topbar-sub{ display:inline; } } /* ---------- Product card ---------- */ .pcard{ position:relative; background: var(--bg-card); border-radius:18px; overflow:hidden; border:1px solid var(--line-soft); transition: transform .35s var(--ease), box-shadow .35s var(--ease); display:flex; flex-direction:column; } .pcard:hover{ transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(43,38,32,.25); } .pcard-media{ aspect-ratio: 4/5; position: relative; overflow:hidden; } .pcard-body{ padding: 12px 14px 16px; display:flex; flex-direction:column; gap:6px; } @media (min-width:768px){ .pcard-body{ padding: 16px 18px 20px; gap:8px; } } .pcard-title{ font-family: var(--serif); font-size:16px; line-height:1.1; } @media (min-width:768px){ .pcard-title{ font-size:20px; } } .pcard-meta{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; color: var(--ink-mute); letter-spacing:0.06em; text-transform:uppercase; } .pcard-price{ display:flex; align-items:baseline; gap:10px; } .pcard-price .now{ font-size:20px; font-family:var(--serif); } .pcard-price .was{ font-size:13px; color: var(--ink-mute); text-decoration: line-through; } .badge-sale{ position:absolute; top:14px; right:14px; background: var(--hot); color: var(--bg); font-family: var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; padding:5px 10px; border-radius:999px; } .badge-new{ position:absolute; top:28px; left:-40px; width:150px; text-align:center; background:#4a8c5c; color:#fff; font-family: var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; padding:6px 0; line-height:1; z-index:2; transform: rotate(-45deg); box-shadow: 0 2px 4px rgba(0,0,0,.15); } .pcard-price-row{ display:flex; align-items:center; justify-content:space-between; } .pcard-fav{ width:32px; height:32px; border-radius:999px; display:grid; place-items:center; color: var(--ink-mute); cursor:pointer; z-index:2; transition: color .2s; flex-shrink:0; } .pcard-fav svg{ display:block; } .pcard-fav:hover{ color: var(--ink); } .pcard-fav.active{ color: var(--ink); } .pcard-fav.active svg{ fill: var(--ink); } /* ---------- Sections ---------- */ .sec{ padding: 16px 0; } .sec-tight{ padding: 40px 0; } @media (min-width:768px){ .sec{ padding: 20px 0; } .sec-tight{ padding: 60px 0; } } .sec-head{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:24px; } @media (min-width:768px){ .sec-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:40px; } } .sec-head h2{ max-width: 640px; } .sec-head .eyebrow{ display:block; margin-bottom:14px; } /* marquee */ .marquee{ background: var(--ink); color: var(--bg); padding: 14px 0; overflow:hidden; position: relative; } @media (min-width:768px){ .marquee{ padding:22px 0; } } .marquee-track{ display:flex; gap:32px; white-space:nowrap; animation: marquee 38s linear infinite; font-family: var(--serif); font-size: 22px; letter-spacing:-0.01em; } @media (min-width:768px){ .marquee-track{ gap:60px; font-size:36px; } } .marquee-track .stitch-mark{ color: var(--thread); } @keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} } /* footer */ .footer{ background: var(--ink); color: var(--bg); padding: 48px 0 32px; } @media (min-width:768px){ .footer{ padding: 80px 0 40px; } } .footer a{ color: color-mix(in oklab, var(--bg) 80%, transparent); } .footer a:hover{ color: var(--bg); } .footer-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-bottom: 32px; border-bottom:1px solid rgba(245,239,228,.15); } @media (min-width:768px){ .footer-grid{ grid-template-columns: 1fr 1fr 1fr 1fr; gap: 36px; padding-bottom:48px; } } @media (min-width:1024px){ .footer-grid{ grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px; padding-bottom:60px; } } .footer-grid > div:first-child{ grid-column: 1 / -1; } @media (min-width:1024px){ .footer-grid > div:first-child{ grid-column: auto; } } .footer h4{ font-family: var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:12px; color: var(--thread-2); font-weight:500; } @media (min-width:768px){ .footer h4{ margin-bottom:18px; } } .footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; font-size:14px; } .footer-bottom{ padding-top: 20px; display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; font-size:11px; color: rgba(245,239,228,.55); font-family: var(--mono); letter-spacing:0.06em; text-transform:uppercase; } @media (min-width:768px){ .footer-bottom{ flex-direction:row; justify-content:space-between; font-size:12px; padding-top:28px; } } /* scroll-reveal */ .reveal{ opacity:0; transform: translateY(18px); transition: all .7s var(--ease); } .reveal.in{ opacity:1; transform: translateY(0); } /* utilities */ .hr{ height:1px; background: var(--line); width:100%; } .grid-2{ display:grid; grid-template-columns: 1fr; gap:20px; } .grid-3{ display:grid; grid-template-columns: 1fr; gap:20px; } .grid-4{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; } @media (min-width:480px){ .grid-2{ grid-template-columns: 1fr 1fr; gap:20px; } .grid-3{ grid-template-columns: repeat(2, 1fr); gap:20px; } } @media (min-width:768px){ .grid-2{ gap:28px; } .grid-3{ grid-template-columns: repeat(3, 1fr); gap:28px; } .grid-4{ grid-template-columns: repeat(3, 1fr); gap:20px; } } @media (min-width:1024px){ .grid-4{ grid-template-columns: repeat(4, 1fr); gap:24px; } } .flex{ display:flex; } .flex-col{ display:flex; flex-direction:column; } .items-center{ align-items:center; } .gap-sm{ gap:8px; } .gap-md{ gap:16px; } .gap-lg{ gap:28px; } .text-mute{ color: var(--ink-mute); } .text-soft{ color: var(--ink-soft); } .mono{ font-family: var(--mono); } .tag{ display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius:999px; background: var(--bg-soft); border:1px solid var(--line); font-family: var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-soft); } /* ---------- Tag pages ---------- */ .tags-page-title{ margin-bottom:14px; } .tags-page-sub{ color:var(--ink-soft); font-size:16px; max-width:680px; margin-bottom:28px; } .tags-cloud{ display:flex; flex-wrap:wrap; gap:10px; } .tag-chip{ display:inline-flex; align-items:center; padding:8px 16px; border-radius:999px; background:var(--bg-card); border:1px solid var(--line); font-family:var(--sans); font-size:14px; color:var(--ink); transition: background .15s ease, border-color .15s ease, transform .15s ease; } .tag-chip:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); transform:translateY(-1px); } .tags-empty, .tag-empty{ color:var(--ink-soft); font-size:15px; } .tag-page-title{ margin-bottom:14px; } .tag-page-desc{ color:var(--ink-soft); font-size:16px; line-height:1.7; max-width:760px; margin-bottom:8px; } .tag-section-title{ margin-top:8px; margin-bottom:24px; } .tag-section-count{ color:var(--ink-soft); font-size:0.7em; font-family:var(--mono); margin-left:6px; } /* product/post tag pills (used on product detail and blog post) */ .entity-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; } .entity-tags a{ display:inline-flex; padding:4px 12px; border-radius:999px; background:var(--bg-soft); border:1px solid var(--line); font-family:var(--sans); font-size:13px; color:var(--ink-soft); } .entity-tags a:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); } /* ---------- Catalog ---------- */ /* --border alias (used in some inline styles) */ :root{ --border: var(--line); } /* Sidebar card */ #catalog-filters{ padding: 20px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); } @media (min-width:768px){ #catalog-filters{ padding: 24px 22px; border-radius: 18px; } } /* Custom radio */ #catalog-filters input[type="radio"], #catalog-filters input[type="checkbox"]{ appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1.5px solid var(--line); flex-shrink: 0; position: relative; cursor: pointer; margin: 0; transition: border-color .15s, background .15s; } #catalog-filters input[type="radio"]{ border-radius: 50%; } #catalog-filters input[type="checkbox"]{ border-radius: 4px; } #catalog-filters input[type="radio"]:checked, #catalog-filters input[type="checkbox"]:checked{ background: var(--brand); border-color: var(--brand); } /* Radio dot */ #catalog-filters input[type="radio"]:checked::after{ content:''; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:5px; height:5px; border-radius:50%; background: var(--bg); } /* Checkbox checkmark */ #catalog-filters input[type="checkbox"]:checked::after{ content:''; position:absolute; top:1px; left:4px; width:5px; height:8px; border: 1.5px solid var(--bg); border-top:none; border-left:none; transform: rotate(43deg); } /* Filter label hover */ #catalog-filters label:hover{ color: var(--ink); } #catalog-filters label:hover input[type="radio"], #catalog-filters label:hover input[type="checkbox"]{ border-color: var(--brand); } /* Price inputs */ .filter-price-input{ width:100%; padding:8px 12px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:transparent; color: var(--ink); font-family: var(--sans); transition: border-color .15s; } .filter-price-input:focus{ outline:none; border-color: var(--brand); } /* Sort select */ .sort-select{ appearance: none; -webkit-appearance: none; padding: 8px 36px 8px 14px; border: 1px solid var(--line); border-radius: 999px; background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' stroke='%238B7E6A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; font-family: var(--mono); font-size:12px; letter-spacing:0.06em; color: var(--ink); cursor:pointer; transition: border-color .15s; } .sort-select:hover{ border-color: var(--ink); } .sort-select:focus{ outline:none; border-color: var(--brand); } /* View toggle */ .grid-toggle{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--line); border-radius:8px; background:transparent; color: var(--ink-soft); cursor:pointer; transition: all .15s; } .grid-toggle:hover{ border-color: var(--ink); color: var(--ink); } .grid-toggle.active{ background: var(--ink); border-color: var(--ink); color: var(--bg); } /* Small button */ .btn-sm{ padding:9px 16px; font-size:13px; } /* Outline button */ .btn-outline{ border:1px solid var(--line); color: var(--ink-soft); } .btn-outline:hover{ border-color: var(--ink); color: var(--ink); background: var(--bg-soft); } /* Price range slider */ .price-slider{ -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 2px; background: var(--line); outline: none; cursor: pointer; margin-top: 6px; } .price-slider::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); cursor: pointer; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--ink); } .price-slider::-moz-range-thumb{ width: 16px; height: 16px; border-radius: 50%; background: var(--ink); cursor: pointer; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--ink); } /* Difficulty squares */ .diff-squares{ display:flex; gap:3px; } .diff-sq{ width: 9px; height: 9px; border-radius: 2px; background: var(--line); } .diff-sq.filled{ background: var(--ink); } /* Loading state */ #catalog-grid.loading{ opacity:.5; pointer-events:none; transition: opacity .2s; } /* Breadcrumbs */ .breadcrumbs{ padding: 16px 0; border-bottom: 1px solid var(--line); background: var(--bg); } .breadcrumbs-list{ display: flex; align-items: center; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; } .breadcrumbs-item{ display: flex; align-items: center; gap: 4px; } .breadcrumbs-item a{ color: var(--ink-soft); text-decoration: none; transition: color .15s; } .breadcrumbs-item a:hover{ color: var(--ink); } .breadcrumbs-item span[aria-current]{ color: var(--ink); } .breadcrumbs-sep{ color: var(--ink-mute); } /* mobile frame helper */ .mobile-screen{ width: 390px; height: 844px; overflow: hidden; border-radius: 52px; background: var(--bg); border: 10px solid #111; box-shadow: 0 40px 100px -30px rgba(43,38,32,.35); position: relative; } /* ---------- Product page ---------- */ .product-hero{ display:grid; grid-template-columns:1fr; gap:24px; align-items:start; } @media (min-width:768px){ .product-hero{ grid-template-columns:1.2fr 1fr; gap:40px; } } @media (min-width:1024px){ .product-hero{ grid-template-columns:2fr 1fr; gap:60px; } } .product-media{ position:relative; } .product-media--empty{ aspect-ratio:1; border-radius:16px; background:var(--bg-soft); } .product-img-main{ border-radius:14px; overflow:hidden; background:var(--bg-soft); margin-bottom:10px; aspect-ratio:1; position:relative; } @media (min-width:768px){ .product-img-main{ border-radius:20px; margin-bottom:12px; } } .product-img-main img{ width:100%; height:100%; display:block; object-fit:contain; } .gallery-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,0.85); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:1; transition:opacity .2s; box-shadow:0 2px 8px rgba(0,0,0,0.1); } @media (min-width:768px){ .gallery-arrow{ width:40px; height:40px; opacity:0; } .product-img-main:hover .gallery-arrow{ opacity:1; } } .gallery-arrow:hover{ background:#fff; box-shadow:0 2px 12px rgba(0,0,0,0.15); } .gallery-arrow--left{ left:8px; } .gallery-arrow--right{ right:8px; } @media (min-width:768px){ .gallery-arrow--left{ left:12px; } .gallery-arrow--right{ right:12px; } } .product-thumbs{ display:flex; gap:6px; flex-wrap:wrap; } .product-thumb{ width:56px; height:56px; border-radius:8px; overflow:hidden; cursor:pointer; border:2px solid transparent; transition:border-color .2s; } @media (min-width:768px){ .product-thumb{ width:72px; height:72px; border-radius:10px; } .product-thumbs{ gap:8px; } } .product-thumb--active{ border-color:var(--accent, #b8860b); } .product-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .product-details{ position:static; } @media (min-width:768px){ .product-details{ position:sticky; top:100px; } } .product-eyebrow{ margin-bottom:10px; display:inline-block; } @media (min-width:768px){ .product-eyebrow{ margin-bottom:14px; } } .product-title{ font-size:22px; line-height:1.1; margin-bottom:12px; } @media (min-width:768px){ .product-title{ font-size:24px; margin-bottom:16px; } } .product-short-desc{ font-size:14px; color:var(--ink-soft); line-height:1.5; margin-bottom:20px; } @media (min-width:768px){ .product-short-desc{ font-size:17px; margin-bottom:28px; } } .product-price{ margin-bottom:24px; } @media (min-width:768px){ .product-price{ margin-bottom:32px; } } .product-price-now{ font-family:var(--serif); font-size:38px; line-height:1; } @media (min-width:768px){ .product-price-now{ font-size:54px; } } .product-price-was{ font-size:18px; color:var(--ink-soft); text-decoration:line-through; margin-left:10px; } @media (min-width:768px){ .product-price-was{ font-size:22px; margin-left:12px; } } .product-cta-btn{ width:100%; margin-bottom:16px; } .product-cta-note{ text-align:center; font-size:13px; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; } /* ---------- Etsy CTA button ---------- */ .btn-etsy{ --etsy:#F1641E; --etsy-deep:#D9531A; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:14px; width:100%; padding:18px 28px; border-radius:999px; font-family: var(--sans); font-weight:600; font-size:16px; letter-spacing:0.02em; color:#fff; background: linear-gradient(135deg, var(--etsy) 0%, var(--etsy-deep) 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 -2px 0 rgba(0,0,0,0.12) inset, 0 8px 22px -8px rgba(241,100,30,0.55), 0 2px 6px -2px rgba(43,38,32,0.18); overflow:hidden; isolation:isolate; transition: transform .25s var(--ease), box-shadow .3s var(--ease), filter .25s var(--ease); } @media (min-width:768px){ .btn-etsy{ padding:20px 30px; font-size:17px; } } .btn-etsy::before{ content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 0%, transparent 38%, rgba(255,255,255,0.32) 50%, transparent 62%, transparent 100%); transform: translateX(-120%); transition: transform .8s var(--ease); z-index:-1; pointer-events:none; } .btn-etsy:hover{ transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 -2px 0 rgba(0,0,0,0.14) inset, 0 14px 30px -8px rgba(241,100,30,0.65), 0 4px 10px -2px rgba(43,38,32,0.22); } .btn-etsy:hover::before{ transform: translateX(120%); } .btn-etsy:active{ transform: translateY(0); filter: brightness(.98); } .btn-etsy:focus-visible{ outline:none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--etsy), 0 8px 22px -8px rgba(241,100,30,0.55); } .btn-etsy__label{ position:relative; z-index:1; } .btn-etsy__icon{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:999px; background: rgba(255,255,255,0.18); transition: transform .3s var(--ease), background .25s var(--ease); } .btn-etsy:hover .btn-etsy__icon{ transform: translateX(4px); background: rgba(255,255,255,0.28); } .sec--no-top{ padding-top:0; } .product-specs{ gap:12px; } @media (min-width:768px){ .product-specs{ gap:24px; } } .product-spec{ padding:18px 16px; border:1px solid var(--border); border-radius:14px; text-align:center; } @media (min-width:768px){ .product-spec{ padding:28px 24px; border-radius:18px; } } .product-spec-label{ font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; } @media (min-width:768px){ .product-spec-label{ font-size:11px; margin-bottom:10px; } } .product-spec-value{ font-family:var(--serif); font-size:20px; } @media (min-width:768px){ .product-spec-value{ font-size:26px; } } .product-section-h2{ margin-bottom:20px; } .product-desc{ font-size:16px; line-height:1.7; color:var(--ink-soft); } .tabs-nav{ display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:20px; } @media (min-width:768px){ .tabs-nav{ margin-bottom:32px; } } .tab-btn{ padding:12px 16px; border:none; background:none; font-family:var(--sans); font-size:13px; font-weight:500; cursor:pointer; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; } @media (min-width:768px){ .tab-btn{ padding:14px 24px; font-size:14px; } } .tab-btn.active{ color:var(--ink); border-bottom-color:var(--ink); } .tab-panel{ display:none; } .tab-panel.active{ display:block; } .product-tab-body{ font-size:16px; line-height:1.7; } .product-tab-body .title{ font-family:var(--serif); font-weight:400; font-size:clamp(22px, 2vw, 28px); line-height:1.08; letter-spacing:-0.01em; color:var(--ink); margin:24px 0 12px; } .product-tab-body .title:first-child{ margin-top:0; } .product-reviews-grid{ gap:20px; } .product-no-reviews{ color:var(--ink-soft); font-size:15px; } .product-similar-title{ margin-top:14px; margin-bottom:32px; } /* product-hero responsive is handled inline above */ /* ---------- Hero section ---------- */ .sec-hero{ position:relative; padding-top:16px; padding-bottom:48px; overflow:hidden; } @media (min-width:768px){ .sec-hero{ padding-top:20px; padding-bottom:100px; } } .sec-hero > .container{ position:relative; z-index:2; } .hero-content{ max-width:850px; margin-bottom:32px; } @media (min-width:768px){ .hero-content{ margin-bottom:48px; } } .hero-eyebrow{ margin-bottom:14px; display:flex; align-items:center; gap:10px; } @media (min-width:768px){ .hero-eyebrow{ margin-bottom:20px; gap:14px; } } .hero-title{ margin-bottom:16px; } @media (min-width:768px){ .hero-title{ margin-bottom:24px; } } .hero-lead{ font-size:16px; color:var(--ink-soft); max-width:560px; margin-bottom:24px; } @media (min-width:768px){ .hero-lead{ font-size:19px; margin-bottom:32px; } } .btn-row{ display:flex; gap:10px; flex-wrap:wrap; } .btn-row .btn{ font-size:14px; padding:12px 18px; } @media (min-width:768px){ .btn-row .btn{ font-size:15px; padding:14px 22px; } } .hero-cards{ position:relative; } .hero-bg-accent{ position:absolute; top:100px; right:-40px; width:180px; height:180px; pointer-events:none; color:var(--thread); } @media (min-width:768px){ .hero-bg-accent{ width:280px; height:280px; } } .brand{ color:var(--brand); } .italic-brand{ font-style:italic; color:var(--brand); } /* ---------- Section color variants ---------- */ .sec-alt{ background:var(--bg-soft); } .sec-dark{ background:var(--ink); color:var(--bg); } .sec-dark .eyebrow{ color:var(--thread-2); } .sec-dark h2{ color:var(--bg); } /* ---------- Section head utilities ---------- */ .sec-h2{ margin-top:14px; } .sec-subtitle{ margin-top:12px; max-width:520px; } /* ---------- About maker ---------- */ .maker-layout{ gap:28px; align-items:center; } @media (min-width:768px){ .maker-layout{ gap:60px; } } .maker-image{ aspect-ratio:4/5; border-radius:22px; overflow:hidden; background:linear-gradient(135deg, var(--thread) 0%, var(--brand) 100%); position:relative; display:flex; align-items:flex-end; padding:28px; color:#FAF5EB; } .maker-image-overlay{ position:absolute; inset:0; opacity:.2; } .maker-image-bg{ width:100%; height:100%; background:var(--bg-soft); display:grid; place-items:center; font-family:var(--mono); font-size:11px; color:rgba(250,245,235,.4); } .maker-image-cap{ position:relative; } .maker-location{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; opacity:.85; } .maker-name-display{ font-family:var(--serif); font-size:34px; margin-top:8px; } .maker-title{ margin-top:14px; margin-bottom:20px; } .maker-lead{ font-size:18px; color:var(--ink-soft); margin-bottom:16px; } .maker-body{ font-size:16px; color:var(--ink-soft); margin-bottom:28px; } .maker-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-top:20px; border-top:1px solid var(--line); } @media (min-width:768px){ .maker-stats{ gap:24px; padding-top:28px; } } .stat-value{ font-family:var(--serif); font-size:24px; } @media (min-width:768px){ .stat-value{ font-size:32px; } } .stat-label{ font-family:var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-mute); margin-top:4px; } @media (min-width:768px){ .stat-label{ font-size:11px; } } /* ---------- Reviews dark section ---------- */ .review-nav{ display:flex; gap:10px; } .btn-ico-dark{ border-color:rgba(245,239,228,.2); color:var(--bg); } /* ---------- Review card ---------- */ .review-card{ padding:20px 18px; border:1px solid rgba(245,239,228,.15); border-radius:14px; } @media (min-width:768px){ .review-card{ padding:28px 24px; border-radius:18px; } } .review-stars{ font-size:16px; margin-bottom:12px; color:var(--thread-2); } .review-text{ font-family:var(--serif); font-size:17px; line-height:1.35; margin-bottom:16px; } @media (min-width:768px){ .review-text{ font-size:19px; margin-bottom:20px; } } .review-author{ font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:rgba(245,239,228,.7); } /* ---------- Category card ---------- */ .category-card{ aspect-ratio:1/1; border-radius:18px; border:1px solid var(--line-soft); padding:22px; display:flex; flex-direction:column; justify-content:space-between; transition:all .3s var(--ease); position:relative; overflow:hidden; } .category-card--even{ background:var(--bg-card); } .category-card--odd{ background:var(--bg-soft); } .catcard-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.18; } .catcard-num{ position:relative; z-index:2; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--ink-mute); } .catcard-info{ position:relative; z-index:2; } .catcard-name{ font-family:var(--serif); font-size:20px; margin-bottom:6px; } @media (min-width:768px){ .catcard-name{ font-size:26px; } } .catcard-count{ font-family:var(--mono); font-size:12px; color:var(--ink-mute); } /* ---------- Product card image ---------- */ .pcard-media img{ width:100%; height:100%; object-fit:cover; display:block; } /* ---------- Topbar ---------- */ .topbar-sub{ opacity:.6; } /* ---------- Nav extras ---------- */ .lang-wrap{ position:relative; } .lang-dropdown{ position:absolute; top:100%; right:0; margin-top:8px; background:var(--bg-card); border:1px solid var(--line); border-radius:12px; padding:8px 0; min-width:160px; box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:100; display:none; } .lang-dropdown.open{ display:block; } .lang-option{ display:flex; align-items:center; gap:10px; padding:10px 18px; font-size:14px; color:var(--ink); text-decoration:none; transition:background .15s; } .lang-option:hover{ background:var(--bg-soft); } .btn-nav{ padding:10px 18px; font-size:14px; } /* User menu dropdown */ .user-menu-wrap{ position:relative; } .user-dropdown{ position:absolute; top:100%; right:0; margin-top:8px; background:var(--bg-card); border:1px solid var(--line); border-radius:12px; padding:8px 0; min-width:180px; box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:100; display:none; } .user-dropdown.open{ display:block; } .user-dropdown-name{ display:block; padding:10px 18px 8px; font-size:13px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line-soft); margin-bottom:4px; } .user-dropdown a{ display:block; padding:9px 18px; font-size:14px; color:var(--ink-soft); transition:background .15s, color .15s; } .user-dropdown a:hover{ background:var(--bg-soft); color:var(--ink); } .user-dropdown hr{ border:none; border-top:1px solid var(--line-soft); margin:4px 0; } /* ---------- Footer extras ---------- */ .footer-logo{ color:var(--bg); margin-bottom:16px; } .footer-logo .logo-mark{ background:var(--bg); color:var(--ink); } .footer-tagline{ opacity:.7; font-size:14px; max-width:280px; margin-bottom:20px; } .footer-socials{ display:flex; gap:10px; } .footer .btn-ico{ border-color:rgba(245,239,228,.2); } /* ---------- Newsletter section ---------- */ .newsletter-section{ background:var(--brand); color:#FAF5EB; position:relative; overflow:hidden; } .newsletter-decor{ position:absolute; top:-60px; right:-60px; width:260px; height:260px; opacity:.15; } .newsletter-decor-inner{ width:100%; height:100%; background:rgba(250,245,235,.08); display:grid; place-items:center; font-family:var(--mono); font-size:11px; color:rgba(250,245,235,.3); } .newsletter-body{ text-align:center; position:relative; } .newsletter-eyebrow{ color:rgba(250,245,235,.75); } .newsletter-title{ margin-top:14px; color:#FAF5EB; } .newsletter-subtitle{ font-size:17px; opacity:.85; margin-top:12px; margin-bottom:28px; max-width:500px; margin-left:auto; margin-right:auto; } .newsletter-form{ display:flex; flex-direction:column; gap:10px; max-width:480px; margin:0 auto; } @media (min-width:480px){ .newsletter-form{ flex-direction:row; } } .newsletter-input{ flex:1; padding:14px 20px; border-radius:999px; border:1px solid rgba(250,245,235,.3); background:rgba(250,245,235,.1); color:#FAF5EB; font-size:15px; font-family:var(--sans); } .newsletter-input::placeholder{ color:rgba(250,245,235,.5); } .newsletter-submit{ background:var(--ink); color:var(--bg); justify-content:center; } /* ---------- Blog card ---------- */ .blog-card-media{ aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--bg-soft); position:relative; margin-bottom:14px; } .blog-card-gradient{ position:absolute; inset:0; background:linear-gradient(135deg, var(--thread-2) 0%, var(--brand) 100%); opacity:.85; } .blog-card-pattern{ position:absolute; inset:15%; opacity:.4; } .blog-card-pattern-inner{ width:100%; height:100%; background:rgba(250,245,235,.15); border-radius:6px; display:grid; place-items:center; font-family:var(--mono); font-size:9px; color:rgba(250,245,235,.5); } .blog-card-tag{ position:absolute; top:12px; left:12px; } .blog-card-tag .tag{ background:rgba(250,245,235,.9); border-color:transparent; } .blog-card .pcard-meta{ margin-bottom:8px; } .blog-card-title{ font-family:var(--serif); font-size:22px; line-height:1.2; margin-bottom:8px; } .blog-card-excerpt{ font-size:14px; color:var(--ink-soft); line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* ---------- Page header (catalog, blog) ---------- */ .page-header{ text-align:center; padding-bottom:0; } .page-header h1{ margin-top:10px; } @media (min-width:768px){ .page-header h1{ margin-top:14px; } } .page-header-sub{ font-size:15px; color:var(--ink-soft); max-width:540px; margin:10px auto 0; } @media (min-width:768px){ .page-header-sub{ font-size:17px; margin:12px auto 0; } } /* ---------- Catalog layout ---------- */ .catalog-layout{ display:grid; grid-template-columns:1fr; gap:20px; align-items:start; } @media (min-width:1024px){ .catalog-layout{ grid-template-columns:260px 1fr; gap:40px; } } .catalog-sidebar{ position:static; } @media (min-width:1024px){ .catalog-sidebar{ position:sticky; top:100px; } } /* Mobile filter toggle */ .filter-toggle-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; font-size:14px; font-weight:500; background:var(--bg-card); color:var(--ink); cursor:pointer; margin-bottom:16px; } @media (min-width:1024px){ .filter-toggle-btn{ display:none; } } #catalog-filters.mobile-hidden{ display:none; } @media (min-width:1024px){ #catalog-filters.mobile-hidden{ display:block; } } .filter-group{ margin-bottom:32px; } .filter-heading{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:16px; } .filter-label{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:14px; cursor:pointer; } .filter-count{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-soft); } .filter-price-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; } .filter-price-val{ font-family:var(--mono); font-size:11px; color:var(--ink); } .filter-diff-name{ flex:1; } .filter-actions{ display:flex; gap:10px; } .catalog-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; } @media (min-width:768px){ .catalog-toolbar{ margin-bottom:28px; } } .catalog-results{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; color:var(--ink-soft); } @media (min-width:768px){ .catalog-results{ font-size:12px; } } .catalog-sort-group{ display:flex; align-items:center; gap:10px; } @media (min-width:768px){ .catalog-sort-group{ gap:16px; } } .catalog-view-toggles{ display:flex; gap:6px; } .catalog-pagination{ margin-top:56px; padding:24px 0; } @media (min-width:768px){ .catalog-pagination{ margin-top:72px; padding:32px 0; } } /* Pagination component (catalog) */ .catalog-pagination .pagination{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; } @media (min-width:768px){ .catalog-pagination .pagination{ gap:10px; } } .catalog-pagination .pagination-btn{ min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border-radius:10px; font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:0.01em; color:var(--ink-soft); background:var(--bg-card); border:1px solid var(--line); text-decoration:none; transition:all .2s var(--ease); cursor:pointer; } @media (min-width:768px){ .catalog-pagination .pagination-btn{ min-width:44px; height:44px; font-size:15px; border-radius:12px; } } .catalog-pagination .pagination-btn:hover{ background:var(--bg-soft); border-color:var(--brand); color:var(--brand); transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.06); } .catalog-pagination .pagination-btn.active{ background:var(--brand); color:#fff; border-color:var(--brand); font-weight:600; pointer-events:none; box-shadow:0 2px 10px rgba(139,74,59,.25); } .catalog-pagination .pagination-next{ margin-left:4px; } @media (min-width:768px){ .catalog-pagination .pagination-next{ margin-left:8px; } } /* ---------- Blog index layout ---------- */ .blog-featured-link{ display:grid; grid-template-columns:1fr; gap:20px; align-items:center; text-decoration:none; color:inherit; } @media (min-width:768px){ .blog-featured-link{ grid-template-columns:1.4fr 1fr; gap:40px; } } .blog-featured-media{ aspect-ratio:16/10; border-radius:18px; overflow:hidden; background:var(--bg-soft); position:relative; } .blog-featured-tag{ position:absolute; top:16px; left:16px; } .blog-featured-tag .tag{ background:rgba(250,245,235,.9); border-color:transparent; } .blog-featured-meta{ margin-bottom:12px; } .blog-featured-title{ font-size:24px; line-height:1.15; margin-bottom:12px; } @media (min-width:768px){ .blog-featured-title{ font-size:34px; margin-bottom:16px; } } .blog-featured-excerpt{ font-size:16px; color:var(--ink-soft); line-height:1.6; } .blog-featured-cta{ margin-top:20px; display:inline-block; font-size:14px; font-weight:500; } .blog-tags-sec{ padding:0 0 16px; } .blog-tags-list{ display:flex; flex-wrap:wrap; gap:8px; } .blog-main-layout{ display:grid; grid-template-columns:1fr; gap:32px; align-items:start; } @media (min-width:1024px){ .blog-main-layout{ grid-template-columns:2fr 1fr; gap:48px; } } .blog-posts-grid{ gap:32px; } .blog-sidebar{ position:sticky; top:100px; } .blog-sidebar-block{ margin-bottom:36px; } .blog-search-wrap{ position:relative; } .blog-search-input{ width:100%; padding:12px 16px 12px 40px; border:1px solid var(--border); border-radius:10px; font-size:14px; background:transparent; color:var(--ink); font-family:var(--sans); } .blog-search-ico{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-soft); } .blog-sidebar-newsletter{ padding:28px 24px; border-radius:18px; background:var(--brand); color:#FAF5EB; margin-bottom:36px; } .blog-sidebar-newsletter h3{ font-size:20px; color:#FAF5EB; margin-bottom:10px; } .blog-sidebar-newsletter p{ font-size:13px; opacity:.85; margin-bottom:16px; } .blog-sidebar-newsletter input{ width:100%; padding:10px 14px; border-radius:8px; border:1px solid rgba(250,245,235,.3); background:rgba(250,245,235,.1); color:#FAF5EB; font-size:13px; font-family:var(--sans); margin-bottom:10px; } .blog-sidebar-newsletter .btn{ width:100%; background:var(--ink); color:var(--bg); } .blog-popular-heading{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:20px; } .blog-popular-link{ display:block; text-decoration:none; color:inherit; margin-bottom:20px; } .blog-popular-title{ font-family:var(--serif); font-size:17px; line-height:1.3; margin-bottom:4px; } .blog-popular-date{ font-size:12px; color:var(--ink-soft); } /* ---------- Blog article ---------- */ .article-container{ max-width:780px; } .article-meta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:20px; } .article-meta-text{ font-size:13px; color:var(--ink-soft); } .article-title{ font-size:28px; line-height:1.1; margin-bottom:16px; } @media (min-width:768px){ .article-title{ font-size:46px; margin-bottom:20px; } } .article-excerpt{ font-size:17px; color:var(--ink-soft); line-height:1.5; margin-bottom:24px; } @media (min-width:768px){ .article-excerpt{ font-size:20px; margin-bottom:36px; } } .article-hero{ aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:var(--bg-soft); margin-bottom:48px; position:relative; } .article-hero-gradient{ position:absolute; inset:0; background:linear-gradient(135deg, var(--thread-2) 0%, var(--brand) 100%); opacity:.85; } .article-hero-pattern{ position:absolute; inset:15%; opacity:.4; } .article-hero-pattern-inner{ width:100%; height:100%; background:rgba(250,245,235,.15); border-radius:6px; display:grid; place-items:center; font-family:var(--mono); font-size:11px; color:rgba(250,245,235,.5); } .article-body{ font-size:17px; line-height:1.8; color:var(--ink); } .article-body h1{ font-size: clamp(24px, 2.4vw, 30px); margin: 36px 0 14px; line-height:1.2; } .article-body h2{ font-size: clamp(20px, 1.9vw, 24px); margin: 32px 0 12px; line-height:1.25; } .article-body h3{ font-size: clamp(17px, 1.4vw, 20px); margin: 24px 0 10px; line-height:1.3; } .article-body h4{ font-size: 16px; margin: 20px 0 8px; line-height:1.35; } .article-body h1:first-child, .article-body h2:first-child, .article-body h3:first-child{ margin-top:0; } .article-related-h2{ margin-top:14px; margin-bottom:32px; } /* ---------- Static page ---------- */ .page-container{ max-width:900px; width:100%; margin:20px auto 50px; } .page-title{ font-size: clamp(26px, 3vw, 38px); margin-bottom:24px; } /* ---------- FAQ ---------- */ .faq-header{ text-align:center; margin-bottom:48px; } .faq-header .page-title{ margin-bottom:12px; } .faq-subtitle{ font-size:17px; max-width:500px; margin:0 auto; } .faq-list{ display:flex; flex-direction:column; gap:0; } .faq-item{ border-bottom:1px solid var(--line-soft); } .faq-item:first-child{ border-top:1px solid var(--line-soft); } .faq-question{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 4px; background:none; border:none; cursor:pointer; font-family:var(--serif); font-size:18px; line-height:1.3; color:var(--ink); text-align:left; transition: color .2s; } .faq-question:hover{ color:var(--ink-mute); } .faq-chevron{ flex-shrink:0; transition: transform .3s var(--ease); color:var(--ink-mute); } .faq-item.is-open .faq-chevron{ transform:rotate(180deg); } .faq-answer{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); } .faq-item.is-open .faq-answer{ max-height:500px; } .faq-answer-inner{ padding:0 4px 24px; font-size:16px; line-height:1.7; color:var(--ink-mute); } .faq-answer-inner p{ margin:0 0 12px; } .faq-answer-inner p:last-child{ margin-bottom:0; } .faq-answer-inner strong{ color:var(--ink); } .faq-answer-inner h2{ font-size:18px; margin:14px 0 8px; line-height:1.3; } .faq-answer-inner h3{ font-size:16px; margin:12px 0 6px; line-height:1.35; } /* Search overlay mobile */ @media (max-width:600px){ .search-overlay-inner{ max-width:100%; margin:12px; border-radius:14px; } .search-suggest-item{ gap:10px; } .search-suggest-img{ width:44px; height:44px; } .search-overlay-kbd{ display:none; } } @media (max-width:480px){ .search-overlay{ padding-top:8px; } .search-overlay-inner{ margin:8px; } } /* ---------- Search overlay ---------- */ .search-overlay{ position:fixed; inset:0; z-index:100; background:rgba(30,37,32,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:flex-start; justify-content:center; padding-top:min(15vh, 120px); opacity:0; visibility:hidden; transition: opacity .25s var(--ease), visibility .25s; } .search-overlay.active{ opacity:1; visibility:visible; } .search-overlay-inner{ background:var(--bg-card); border:1px solid var(--line); border-radius:18px; width:100%; max-width:580px; box-shadow:0 32px 64px -16px rgba(30,37,32,.35); overflow:hidden; } .search-overlay-header{ display:flex; align-items:center; gap:12px; padding:0 20px; border-bottom:1px solid var(--line-soft); } .search-overlay-form{ flex:1; display:flex; align-items:center; gap:12px; } .search-overlay-ico{ color:var(--ink-mute); flex-shrink:0; } .search-overlay-input{ flex:1; border:0; background:transparent; font-size:17px; font-family:var(--sans); color:var(--ink); padding:18px 0; outline:none; } .search-overlay-input::placeholder{ color:var(--ink-mute); } .search-overlay-kbd{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); border:1px solid var(--line); border-radius:6px; padding:3px 8px; flex-shrink:0; } .search-overlay-close{ color:var(--ink-mute); flex-shrink:0; padding:8px; border-radius:8px; transition:color .2s; } .search-overlay-close:hover{ color:var(--ink); } /* Suggest results */ .search-suggest-list{ padding:8px; } .search-suggest-item{ display:flex; align-items:center; gap:16px; padding:10px 12px; border-radius:12px; text-decoration:none; color:inherit; transition:background .15s; } .search-suggest-item:hover{ background:var(--bg-soft); } .search-suggest-img{ width:56px; height:56px; border-radius:10px; overflow:hidden; background:var(--bg-soft); flex-shrink:0; } .search-suggest-img img{ width:100%; height:100%; object-fit:cover; } .search-suggest-noimg{ width:100%; height:100%; background:var(--line-soft); } .search-suggest-info{ flex:1; min-width:0; } .search-suggest-name{ font-family:var(--serif); font-size:16px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .search-suggest-meta{ display:flex; gap:10px; font-size:12px; color:var(--ink-mute); font-family:var(--mono); letter-spacing:0.04em; margin-top:3px; } .search-suggest-all{ display:block; text-align:center; padding:14px; border-top:1px solid var(--line-soft); font-size:14px; color:var(--brand); font-weight:500; transition:background .15s; } .search-suggest-all:hover{ background:var(--bg-soft); } .search-no-results{ padding:32px; text-align:center; color:var(--ink-mute); font-size:14px; } .search-suggest-section{ padding:4px 0; } .search-suggest-label{ padding:8px 20px 4px; font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-mute); } .search-suggest-blog-ico{ width:40px; height:40px; border-radius:10px; background:var(--bg-soft); display:grid; place-items:center; color:var(--ink-mute); flex-shrink:0; } /* Search results page */ .search-section{ margin-bottom:48px; } .search-section-heading{ font-size:22px; margin-bottom:20px; display:flex; align-items:baseline; gap:10px; } .search-section-count{ font-family:var(--mono); font-size:13px; color:var(--ink-mute); } .search-page-form{ margin-top:24px; max-width:520px; } .search-page-input-wrap{ position:relative; } .search-page-ico{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ink-mute); } .search-page-input{ width:100%; padding:14px 20px 14px 48px; border:1px solid var(--line); border-radius:999px; font-size:16px; font-family:var(--sans); color:var(--ink); background:var(--bg-card); outline:none; transition:border-color .2s; } .search-page-input:focus{ border-color:var(--brand); } .search-empty{ text-align:center; padding:80px 20px; } .search-empty-ico{ color:var(--ink-mute); margin-bottom:20px; } .search-empty h3{ margin-bottom:10px; } .search-empty p{ color:var(--ink-soft); margin-bottom:24px; } .search-hint{ color:var(--ink-mute); text-align:center; padding:40px; }