/* Tech Sales Africa — storefront design system. Light by default, dark via [data-theme="dark"] on . */ :root { --blue: #1F41E5; --blue-ink: #142CA6; --blue-soft: #EEF1FE; --wa: #25D366; --wa-ink: #128C7E; --bg: #FBFBFD; --surface: #FFFFFF; --surface-2: #F4F5F9; --ink: #0B0B10; --ink-2: #3C3F4A; --muted: #6B7280; --faint: #A2A6B4; --line: #E6E7EE; --line-2: #D5D7E2; --ok: #0B8A5B; --warn: #B45309; --hot: #D0342C; --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-xl: 30px; --sh-1: 0 1px 2px rgba(16, 18, 40, .06); --sh-2: 0 8px 28px rgba(16, 18, 40, .09); --sh-3: 0 24px 64px rgba(10, 12, 32, .18); --ease: cubic-bezier(.22, .61, .36, 1); --maxw: 1320px; --hdrh: 66px; } [data-theme="dark"] { --blue: #5B7BFF; --blue-ink: #7D95FF; --blue-soft: #171B33; --bg: #08080B; --surface: #111116; --surface-2: #17171E; --ink: #F4F4F7; --ink-2: #C6C8D2; --muted: #8E92A0; --faint: #676B7A; --line: #23242E; --line-2: #313343; --ok: #34D399; --warn: #FBBF24; --hot: #F87171; --sh-1: 0 1px 2px rgba(0, 0, 0, .5); --sh-2: 0 8px 28px rgba(0, 0, 0, .5); --sh-3: 0 24px 64px rgba(0, 0, 0, .7); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } html.no-trans *, html.no-trans *::before, html.no-trans *::after { transition: none !important; } body { margin: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv05", "tnum" 0; } img { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } a { color: inherit; text-decoration: none; } input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; letter-spacing: -.022em; line-height: 1.1; font-weight: 640; } p { margin: 0; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } @media (max-width: 640px) { .wrap { padding: 0 16px; } } .hide { display: none !important; } .mono { font-variant-numeric: tabular-nums; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------------------------------- header --------------------------------- */ .ann { background: var(--ink); color: var(--bg); font-size: 12.5px; letter-spacing: .01em; } [data-theme="dark"] .ann { background: var(--blue); color: #fff; } .ann .wrap { display: flex; align-items: center; justify-content: center; gap: 22px; height: 34px; overflow: hidden; white-space: nowrap; } .ann b { font-weight: 620; } .ann .sep { opacity: .4; } @media (max-width: 700px) { .ann .wrap { justify-content: flex-start; font-size: 11.5px; gap: 14px; } .ann .opt { display: none; } } .hdr { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(18px) saturate(180%); border-bottom: 1px solid var(--line); } .hdr .wrap { display: flex; align-items: center; gap: 16px; height: var(--hdrh); } .brand { display: flex; align-items: center; gap: 10px; flex: none; } .brand .mark { width: 34px; height: 34px; border-radius: 10px; flex: none; } .brand .txt { font-weight: 680; font-size: 16.5px; letter-spacing: -.03em; line-height: 1.05; white-space: nowrap; } .brand .txt small { display: block; font: 600 8.5px/1 Inter; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; margin-top: 3px; } @media (max-width: 900px) { .brand .txt small { display: none; } } @media (max-width: 420px) { .brand .txt { font-size: 15px; } } .search { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 520px; margin: 0 auto; background: var(--surface-2); border: 1px solid transparent; border-radius: 999px; padding: 9px 16px; transition: border-color .18s, background .18s; } .search:focus-within { border-color: var(--blue); background: var(--surface); } .search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 14.5px; } .search input::placeholder { color: var(--faint); } .search svg { width: 17px; height: 17px; stroke: var(--muted); fill: none; stroke-width: 1.9; flex: none; } @media (max-width: 760px) { .search { display: none; } .search.mob { display: flex; max-width: none; margin: 0; } } .hicons { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; } .iconbtn { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; transition: background .15s; } .iconbtn:hover { background: var(--surface-2); } .iconbtn svg { width: 19px; height: 19px; stroke: var(--ink); fill: none; stroke-width: 1.7; } .badge { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--blue); color: #fff; font: 700 10.5px/17px Inter; text-align: center; box-shadow: 0 0 0 2px var(--surface); } .cta-cart { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--bg); border-radius: 999px; padding: 10px 16px; font-weight: 600; font-size: 13.5px; margin-left: 6px; transition: transform .12s, opacity .15s; } [data-theme="dark"] .cta-cart { background: var(--blue); color: #fff; } .cta-cart:active { transform: scale(.96); } .cta-cart svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; } .cta-cart .n { background: rgba(255,255,255,.22); border-radius: 999px; padding: 1px 7px; font-size: 12px; } @media (max-width: 520px) { .cta-cart .lbl { display: none; } .cta-cart { padding: 10px 12px; } } /* nav rail under the header */ .navrail { position: sticky; top: var(--hdrh); z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); } .navrail .wrap { display: flex; align-items: center; gap: 6px; height: 50px; overflow-x: auto; scrollbar-width: none; } .navrail .wrap::-webkit-scrollbar { display: none; } .navlink { padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 520; color: var(--muted); white-space: nowrap; transition: .16s; } .navlink:hover { color: var(--ink); background: var(--surface-2); } .navlink.on { background: var(--ink); color: var(--bg); } [data-theme="dark"] .navlink.on { background: var(--blue); color: #fff; } .navlink .n { opacity: .55; font-size: 11.5px; margin-left: 4px; } /* ---------------------------------- buttons -------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 12px 22px; font-weight: 580; font-size: 14.5px; letter-spacing: -.01em; white-space: nowrap; transition: transform .12s, background .18s, border-color .18s, opacity .18s; } .btn:active { transform: scale(.975); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; flex: none; } .btn-primary { background: var(--blue); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--blue-ink); } .btn-ink { background: var(--ink); color: var(--bg); } .btn-wa { background: var(--wa); color: #06301C; font-weight: 640; } .btn-wa:hover:not(:disabled) { background: #1FBE5B; } .btn-wa svg { fill: currentColor; stroke: none; } .btn-line { border: 1px solid var(--line-2); color: var(--ink); background: var(--surface); } .btn-line:hover:not(:disabled) { border-color: var(--ink); } .btn-soft { background: var(--surface-2); color: var(--ink); } .btn-soft:hover:not(:disabled) { background: var(--line); } .btn-sm { padding: 8px 15px; font-size: 13px; } .btn-lg { padding: 15px 28px; font-size: 15.5px; } .btn-block { width: 100%; } /* ---------------------------------- home ----------------------------------- */ .hero { padding: 58px 0 46px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -40% 40% 20% -20%; pointer-events: none; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--blue) 13%, transparent), transparent 62%); } .hero .wrap { position: relative; } .hero .grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; } @media (max-width: 940px) { .hero { padding: 40px 0 34px; } .hero .grid { grid-template-columns: 1fr; gap: 30px; } } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px Inter; letter-spacing: .13em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa) 25%, transparent); } .hero h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; } .hero h1 em { font-style: normal; color: var(--blue); } .hero .sub { color: var(--ink-2); font-size: 17px; line-height: 1.6; margin: 20px 0 26px; max-width: 46ch; } .hero .btns { display: flex; gap: 10px; flex-wrap: wrap; } .hero .stats { display: flex; gap: 28px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); flex-wrap: wrap; } .hero .stats b { display: block; font-size: 24px; font-weight: 680; letter-spacing: -.03em; } .hero .stats span { font-size: 12.5px; color: var(--muted); } .heroart { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .hcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .hcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } .hcard .ico { width: 44px; height: 44px; border-radius: 13px; background: var(--blue-soft); display: grid; place-items: center; } .hcard .ico svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 1.7; } .hcard b { display: block; font-size: 15px; font-weight: 620; letter-spacing: -.02em; } .hcard span { display: block; font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 3px; } .hcard.tall { grid-column: span 2; flex-direction: row; align-items: center; gap: 16px; } .hcard.tall .ico { background: color-mix(in srgb, var(--wa) 16%, transparent); } .hcard.tall .ico svg { stroke: none; fill: var(--wa-ink); } [data-theme="dark"] .hcard.tall .ico svg { fill: var(--wa); } /* section headers */ .sec { padding: 54px 0; } .sec.tight { padding: 34px 0; } .sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 24px; flex-wrap: wrap; } .sechead h2 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -.03em; } .sechead p { color: var(--muted); font-size: 14px; margin-top: 7px; max-width: 60ch; line-height: 1.55; } .sechead .more { font-size: 13.5px; font-weight: 580; color: var(--blue); display: inline-flex; align-items: center; gap: 5px; } .sechead .more svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .2s var(--ease); } .sechead .more:hover svg { transform: translateX(3px); } /* condition rail */ .condrail { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .condcard { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 17px; transition: .22s var(--ease); position: relative; overflow: hidden; } .condcard:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--sh-2); } .condcard b { display: block; font-size: 14.5px; font-weight: 640; letter-spacing: -.02em; } .condcard span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; } .condcard .n { position: absolute; top: 14px; right: 15px; font-size: 12px; font-weight: 620; color: var(--blue); } /* category tiles */ .cattiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; } .cattile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; transition: .25s var(--ease); } .cattile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); } .cattile .art { width: 100%; height: 82px; display: grid; place-items: center; } .cattile .art svg { height: 74px; width: auto; } .cattile b { font-size: 15px; font-weight: 620; letter-spacing: -.02em; } .cattile span { font-size: 12.5px; color: var(--muted); } /* shop cards */ .shoprail { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .shopcard { display: flex; gap: 15px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; transition: .25s var(--ease); } .shopcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } .shoplogo { width: 54px; height: 54px; border-radius: 15px; flex: none; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; font-size: 18px; letter-spacing: -.04em; color: var(--blue); overflow: hidden; border: 1px solid var(--line); } .shoplogo img { width: 100%; height: 100%; object-fit: cover; } .shopcard .meta { min-width: 0; flex: 1; } .shopcard b { display: flex; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 640; letter-spacing: -.02em; } .shopcard p { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 5px; } .shopcard .foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12.5px; color: var(--muted); } .shopcard .foot b { font-size: 12.5px; color: var(--ink); font-weight: 600; } .vtick { width: 15px; height: 15px; flex: none; } .vtick circle { fill: var(--blue); } .vtick path { stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } /* --------------------------------- toolbar --------------------------------- */ .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .chips { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 3px 0; flex: 1; min-width: 0; } .chips::-webkit-scrollbar { display: none; } .chip { padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; background: var(--surface); transition: .16s; } .chip:hover { border-color: var(--ink); } .chip.on { background: var(--blue); border-color: var(--blue); color: #fff; } .sel { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; } /* On narrow screens the sort select would sit beside the scrolling chip rail and clip it. Give the chips their own row instead. */ @media (max-width: 680px) { .toolbar { flex-wrap: wrap; } .toolbar .chips { order: 1; flex: 1 1 100%; } .toolbar .sel { order: 2; } } .resultbar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .resultbar .ct { font-size: 13.5px; color: var(--muted); } .resultbar .ct b { color: var(--ink); font-weight: 620; } /* ---------------------------------- grid ----------------------------------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px 20px; } @media (max-width: 560px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } } .card { display: flex; flex-direction: column; text-align: left; position: relative; } .card .media { position: relative; aspect-ratio: 1/1; border-radius: var(--r); overflow: hidden; background: var(--surface-2); display: grid; place-items: center; border: 1px solid var(--line); transition: box-shadow .3s var(--ease), border-color .2s; } .card:hover .media { box-shadow: var(--sh-2); border-color: var(--line-2); } .card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); } .card:hover .media img { transform: scale(1.04); } .card .media .ph { width: 62%; height: 62%; opacity: .82; transition: transform .5s var(--ease); } .card:hover .media .ph { transform: scale(1.05); } .flags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; z-index: 2; } .flag { font: 620 10.5px Inter; letter-spacing: .02em; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: var(--bg); text-transform: uppercase; } [data-theme="dark"] .flag { background: var(--ink); color: var(--bg); } .flag.new { background: var(--blue); color: #fff; } .flag.sealed { background: #6D28D9; color: #fff; } .flag.openbox { background: #0E7490; color: #fff; } .flag.used { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2); } .flag.bargain { background: var(--warn); color: #fff; } .flag.pre { background: var(--surface); color: var(--blue); border: 1px solid var(--blue); } .flag.out { background: rgba(12, 12, 16, .62); color: #fff; backdrop-filter: blur(3px); } .heartbtn { position: absolute; top: 9px; right: 9px; width: 33px; height: 33px; border-radius: 50%; z-index: 2; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); display: grid; place-items: center; box-shadow: var(--sh-1); opacity: 0; transform: translateY(-4px); transition: .2s var(--ease); } .card:hover .heartbtn, .heartbtn.on { opacity: 1; transform: none; } .heartbtn svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 1.8; } .heartbtn.on svg { fill: var(--hot); stroke: var(--hot); } .quickadd { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px) saturate(160%); border-radius: var(--r-sm); padding: 11px; font-weight: 580; font-size: 13px; box-shadow: var(--sh-2); display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; transform: translateY(8px); transition: .22s var(--ease); } .card:hover .quickadd { opacity: 1; transform: none; } .quickadd:hover { background: var(--ink); color: var(--bg); } .quickadd svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.1; fill: none; } @media (hover: none) { .quickadd, .heartbtn { opacity: 1; transform: none; } } .card .info { padding: 13px 2px 0; display: flex; flex-direction: column; gap: 5px; } .card .shopline { display: flex; align-items: center; gap: 4px; font: 500 11px Inter; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .card .shopline .vtick { width: 12px; height: 12px; } .card .nm { font-size: 14px; font-weight: 560; line-height: 1.38; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card .spec { font-size: 12px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .card .pr { display: flex; align-items: baseline; gap: 7px; margin-top: 3px; } .card .pr b { font-size: 16.5px; font-weight: 680; letter-spacing: -.03em; } .card .pr s { font-size: 12.5px; color: var(--faint); } .card .pr .off { font: 620 11px Inter; color: var(--hot); } .card.dim .media { opacity: .55; } .card.dim .pr b { color: var(--muted); } /* ------------------------------- empty / load ------------------------------ */ .empty { text-align: center; padding: 64px 20px; color: var(--muted); } .empty svg { width: 46px; height: 46px; stroke: var(--faint); fill: none; stroke-width: 1.3; margin: 0 auto 16px; } .empty b { display: block; font-size: 17px; color: var(--ink); font-weight: 620; margin-bottom: 6px; } .empty p { font-size: 14px; line-height: 1.55; max-width: 42ch; margin: 0 auto 18px; } .skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: var(--r); } @keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .skel-card { aspect-ratio: 1/1; } /* --------------------------------- drawers --------------------------------- */ .scrim { position: fixed; inset: 0; background: rgba(8, 9, 20, .45); backdrop-filter: blur(3px); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .25s; } .scrim.on { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100%); z-index: 100; background: var(--surface); box-shadow: var(--sh-3); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s var(--ease); will-change: transform; } .drawer.on { transform: none; } .drawer header, .sheet header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); flex: none; } .drawer header h3, .sheet header h3 { font-size: 17px; letter-spacing: -.025em; flex: 1; } .xbtn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; transition: background .15s; flex: none; } .xbtn:hover { background: var(--surface-2); } .xbtn svg { width: 17px; height: 17px; stroke: var(--ink); stroke-width: 2; fill: none; } .drawer .body, .sheet .body { flex: 1; overflow-y: auto; padding: 18px; -webkit-overflow-scrolling: touch; } .drawer .foot, .sheet .foot { flex: none; border-top: 1px solid var(--line); padding: 16px 18px; background: var(--surface); } /* cart lines */ .cartshop { margin-bottom: 20px; } .cartshop .sh { display: flex; align-items: center; gap: 8px; font: 600 11.5px Inter; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .cline { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .cline:first-of-type { border-top: 0; } .cline .th { width: 62px; height: 62px; border-radius: 11px; background: var(--surface-2); flex: none; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); } .cline .th img { width: 100%; height: 100%; object-fit: cover; } .cline .th svg { width: 60%; height: 60%; } .cline .d { flex: 1; min-width: 0; } .cline .d b { display: block; font-size: 13.5px; font-weight: 580; line-height: 1.35; } .cline .d span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; } .cline .d .pr { font-size: 13.5px; font-weight: 640; margin-top: 5px; } .qty { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line-2); border-radius: 999px; margin-top: 7px; } .qty button { width: 27px; height: 27px; display: grid; place-items: center; font-size: 15px; color: var(--ink-2); } .qty button:hover { color: var(--ink); } .qty span { min-width: 22px; text-align: center; font-size: 13px; font-weight: 600; } .rm { font-size: 11.5px; color: var(--muted); margin-left: 10px; text-decoration: underline; } .rm:hover { color: var(--hot); } .totals { font-size: 13.5px; } .totals .r { display: flex; justify-content: space-between; padding: 5px 0; color: var(--ink-2); } .totals .r.big { font-size: 17px; font-weight: 700; letter-spacing: -.025em; color: var(--ink); padding-top: 11px; margin-top: 6px; border-top: 1px solid var(--line); } /* ---------------------------------- sheet ---------------------------------- */ .sheet { position: fixed; z-index: 100; background: var(--surface); box-shadow: var(--sh-3); display: flex; flex-direction: column; transition: transform .3s var(--ease), opacity .25s; left: 50%; top: 50%; width: min(940px, calc(100% - 36px)); max-height: min(88vh, 900px); border-radius: var(--r-lg); transform: translate(-50%, -46%) scale(.97); opacity: 0; pointer-events: none; } .sheet.on { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; } .sheet.narrow { width: min(560px, calc(100% - 36px)); } @media (max-width: 700px) { .sheet, .sheet.narrow { left: 0; top: auto; bottom: 0; width: 100%; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(100%); opacity: 1; } .sheet.on { transform: none; } } /* product detail */ .pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } @media (max-width: 760px) { .pdp { grid-template-columns: 1fr; gap: 18px; } } .pdp .art { aspect-ratio: 1/1; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; } .pdp .art img { width: 100%; height: 100%; object-fit: cover; } .pdp .art .ph { width: 66%; height: 66%; } .pdp h2 { font-size: 24px; letter-spacing: -.03em; line-height: 1.15; margin: 10px 0 8px; } .pdp .price { display: flex; align-items: baseline; gap: 10px; margin: 14px 0; } .pdp .price b { font-size: 30px; font-weight: 700; letter-spacing: -.035em; } .pdp .price s { color: var(--faint); font-size: 15px; } .speclist { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin: 16px 0; } .speclist div { background: var(--surface); padding: 10px 12px; } .speclist dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .speclist dd { margin: 3px 0 0; font-size: 13.5px; font-weight: 560; } .sellerbox { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: var(--r-sm); margin: 16px 0; } .sellerbox .shoplogo { width: 42px; height: 42px; border-radius: 12px; font-size: 14px; } .sellerbox .m { flex: 1; min-width: 0; } .sellerbox b { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 620; } .sellerbox span { font-size: 12px; color: var(--muted); } .notice { font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border-radius: var(--r-sm); padding: 11px 13px; line-height: 1.5; margin-top: 12px; } .notice b { font-weight: 620; } /* ---------------------------------- forms ---------------------------------- */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 12.5px; font-weight: 580; color: var(--ink-2); margin-bottom: 6px; } .field label .req { color: var(--hot); } .field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-sm); padding: 11px 13px; font-size: 14.5px; outline: none; transition: border-color .16s, box-shadow .16s; } .field textarea { min-height: 78px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); } .field .hint { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 520px) { .row2 { grid-template-columns: 1fr; gap: 0; } } .pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .pick { border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 12px 14px; text-align: left; transition: .16s; } .pick:hover { border-color: var(--ink); } .pick.on { border-color: var(--blue); background: var(--blue-soft); } .pick b { display: block; font-size: 13.5px; font-weight: 600; } .pick span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; } .alert { background: color-mix(in srgb, var(--hot) 10%, transparent); color: var(--hot); border-radius: var(--r-sm); padding: 11px 13px; font-size: 13px; margin-bottom: 14px; line-height: 1.45; } .alert.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); } /* handoff (post-checkout) */ .handoff { text-align: center; padding: 8px 0 4px; } .handoff .tick { width: 60px; height: 60px; border-radius: 50%; background: color-mix(in srgb, var(--wa) 15%, transparent); display: grid; place-items: center; margin: 0 auto 16px; } .handoff .tick svg { width: 28px; height: 28px; stroke: var(--wa-ink); fill: none; stroke-width: 2.4; } [data-theme="dark"] .handoff .tick svg { stroke: var(--wa); } .handoff h3 { font-size: 21px; letter-spacing: -.03em; } .handoff > p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 9px auto 20px; max-width: 44ch; } .waship { display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 10px; } .waship .m { flex: 1; min-width: 0; } .waship b { display: block; font-size: 14px; font-weight: 620; } .waship span { font-size: 12px; color: var(--muted); } .ordercode { font: 620 12px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; color: var(--blue); } /* ---------------------------------- shop page ------------------------------- */ .shophero { padding: 34px 0 26px; border-bottom: 1px solid var(--line); background: var(--surface); } .shophero .top { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; } .shophero .shoplogo { width: 74px; height: 74px; border-radius: 20px; font-size: 24px; } .shophero h1 { font-size: clamp(24px, 4vw, 34px); letter-spacing: -.035em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .shophero .tag { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin-top: 8px; max-width: 62ch; } .shophero .facts { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--muted); } .shophero .facts span { display: inline-flex; align-items: center; gap: 6px; } .shophero .facts svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; } .shophero .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 700px) { .shophero .acts { margin-left: 0; width: 100%; } } /* --------------------------------- footer ---------------------------------- */ .ftr { border-top: 1px solid var(--line); background: var(--surface); margin-top: 40px; padding: 44px 0 30px; } .ftr .cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; } @media (max-width: 800px) { .ftr .cols { grid-template-columns: 1fr 1fr; gap: 26px; } } @media (max-width: 480px) { .ftr .cols { grid-template-columns: 1fr; } } .ftr h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 620; margin-bottom: 13px; } .ftr a, .ftr p { display: block; font-size: 13.5px; color: var(--ink-2); line-height: 2; } .ftr a:hover { color: var(--blue); } .ftr .about { font-size: 13.5px; color: var(--muted); line-height: 1.65; margin-top: 12px; max-width: 40ch; } .ftr .bot { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } /* floating WhatsApp */ .fab { position: fixed; right: 18px; bottom: 18px; z-index: 70; width: 54px; height: 54px; border-radius: 50%; background: var(--wa); display: grid; place-items: center; box-shadow: 0 8px 26px rgba(37, 211, 102, .42); transition: transform .2s var(--ease); } .fab:hover { transform: scale(1.07); } .fab svg { width: 27px; height: 27px; fill: #fff; } @media (max-width: 640px) { .fab { right: 14px; bottom: 14px; width: 50px; height: 50px; } } /* toast */ .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px); z-index: 200; background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 560; box-shadow: var(--sh-3); opacity: 0; pointer-events: none; transition: .25s var(--ease); max-width: calc(100% - 32px); text-align: center; } .toast.on { opacity: 1; transform: translate(-50%, 0); }