/* ============================================================ SHOPICKS โ€” Design tokens & base Pre-loved fashion marketplace ยท calm linen boutique ============================================================ */ /* Fonts are vendored locally โ€” see assets/fonts/fonts.css, loaded from index.html before this file. No external CDN at runtime. */ :root{ /* surfaces */ --cream: #F6F1E8; --cream-2: #F0E9DC; --cream-3: #E9E0D0; --paper: #FFFFFF; --paper-warm: #FCFAF5; /* ink */ --ink: #1E1A15; --ink-2: #38312A; --muted: #8B8173; --muted-2: #A89E8E; --line: #E7DDCC; --line-2: #D9CDB7; /* gold */ --gold: #B8924A; --gold-2: #C9A24B; --gold-soft: #D9BC7A; --gold-pale: #EBDCB6; --gold-deep: #8A6A2F; --gold-grad: linear-gradient(135deg,#EAD29A 0%,#C9A24B 42%,#9A7634 100%); --gold-grad-v: linear-gradient(180deg,#E7CE92 0%,#C2A05B 50%,#8E6C32 100%); /* noir (dark sections) */ --noir: #15110C; --noir-2: #211B14; --noir-3: #2E261C; /* boutique materials */ --wall: #E9DFCF; --wall-2: #E0D4C0; --wall-shadow: #CDBEA4; --wood: #CBA56C; --wood-2: #B08A53; --wood-deep: #93713F; --wood-light: #E3C893; --brass: linear-gradient(180deg,#E8D49B,#C7A45C 45%,#9C7836); /* status */ --pos: #5C7A52; --pos-bg: #EBF0E4; --warn: #B5764F; --warn-bg: #F6E9DD; --danger: #B0463C; --danger-bg: #F6E2DE; /* shape */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px; --sh-1: 0 2px 10px rgba(45,35,20,.06); --sh-2: 0 10px 30px -8px rgba(45,35,20,.14); --sh-3: 0 26px 60px -18px rgba(40,30,15,.30); --sh-float: 0 40px 80px -24px rgba(30,22,10,.42); --ease: cubic-bezier(.22,.61,.36,1); --ease-soft: cubic-bezier(.4,.14,.18,1); --font: 'Assistant', 'Heebo', system-ui, sans-serif; --serif: 'Cormorant Garamond', 'Frank Ruhl Libre', Georgia, serif; --serif-he: 'Frank Ruhl Libre', 'Cormorant Garamond', Georgia, serif; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ font-family:var(--font); color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* direction follows (set by i18n.js) so EN flips the whole UX to LTR */ overflow-x:hidden; /* belt-and-suspenders: no stray horizontal scroll on mobile */ } button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; } input,textarea,select{ font-family:inherit; } img{ display:block; max-width:100%; } ::selection{ background:var(--gold-pale); } /* Custom-styled dropdowns to match the boutique look (no ugly native chrome). */ select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; background-color:var(--paper); background-image:url('data:image/svg+xml;utf8,'); background-repeat:no-repeat; background-position:left 13px center; background-size:13px; border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 14px; padding-inline-start:36px; font-size:14px; color:var(--ink); cursor:pointer; line-height:1.2; transition:border-color .18s var(--ease), box-shadow .18s var(--ease); } select:hover{ border-color:var(--line-2); } select:focus{ outline:none; border-color:var(--gold-soft); box-shadow:0 0 0 3px rgba(217,188,122,.18); } select:disabled{ opacity:.6; cursor:not-allowed; } /* Respect users who prefer reduced motion (accessibility). */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* serif display */ .serif{ font-family:var(--serif); font-weight:600; letter-spacing:.01em; } .wordmark{ font-family:var(--serif); font-weight:600; letter-spacing:.34em; text-transform:uppercase; } .eyebrow{ font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; } .gold-text{ background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } /* buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:15px; border-radius:var(--r-pill); padding:13px 26px; transition:.25s var(--ease); white-space:nowrap; line-height:1; } .btn-ink{ background:var(--ink); color:#F4ECDC; } .btn-ink:hover{ background:#000; transform:translateY(-1px); box-shadow:var(--sh-2); } .btn-gold{ background:var(--gold-grad); color:#2A2008; box-shadow:0 6px 18px -6px rgba(150,110,40,.5); } .btn-gold:hover{ transform:translateY(-1px); filter:brightness(1.04); } .btn-ghost{ background:transparent; border:1.5px solid var(--line-2); color:var(--ink); } .btn-ghost:hover{ border-color:var(--ink); background:#fff; } .btn-sm{ padding:9px 16px; font-size:13.5px; } .btn-lg{ padding:16px 34px; font-size:16px; } .btn:disabled{ opacity:.5; cursor:default; } /* cards */ .card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-1); } /* star rating */ .stars{ display:inline-flex; gap:2px; color:var(--gold-2); } /* scrollbars */ *::-webkit-scrollbar{ width:10px; height:10px; } *::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; border:2px solid transparent; background-clip:padding-box; } *::-webkit-scrollbar-track{ background:transparent; } /* chip */ .chip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--cream-2); border:1px solid var(--line); padding:5px 12px; border-radius:var(--r-pill); } /* fade/slide entrance โ€” transform only, never hides content if clock stalls */ @keyframes fadeUp{ from{ transform:translateY(16px); } to{ transform:none; } } .fade-up{ animation:fadeUp .5s var(--ease) both; } .app-scroll{ scroll-behavior:smooth; }