/* ========================================================================== Dragon Labs storefront Typeface: Poppins (loaded in layout.php). Light/white theme throughout. ========================================================================== */ :root { /* Brand — sampled from the Dragon Labs logo */ --navy-900: #0C1730; --navy-800: #16265A; --navy-700: #1E3468; --navy-600: #2A4585; --navy-500: #4570BC; --blue-600: #1266A0; --blue-500: #1B84C8; --blue-400: #2E9BD4; --blue-300: #6CC8EE; --blue-200: #B9E4F8; --blue-100: #E4F4FC; --blue-050: #F2FAFE; /* Neutrals */ --white: #FFFFFF; --bg-soft: #F6F9FC; --bg-tint: #EEF4FA; --line: #E3EAF2; --line-soft: #EDF2F7; --ink: #10203C; --body: #4C5B72; --muted: #7C8CA3; --ok: #0E9F6E; --warn: #B45309; --err: #C43A38; --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --radius: 14px; --radius-sm: 10px; --radius-lg: 22px; --shadow-xs: 0 1px 2px rgba(16, 32, 60, .06); --shadow-sm: 0 2px 10px rgba(16, 32, 60, .06); --shadow-md: 0 10px 30px rgba(16, 32, 60, .08); --shadow-lg: 0 24px 60px rgba(16, 32, 60, .12); --shadow-blue: 0 14px 34px rgba(27, 132, 200, .28); --header-h: 78px; --ease: cubic-bezier(.22, .68, .28, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--white); color: var(--body); font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; /* `clip` (not `hidden`) — `hidden` would make a scroll container and break position:sticky on the header, gallery and summary panels. */ overflow-x: clip; } h1, h2, h3, h4, h5 { font-family: var(--font); color: var(--ink); margin: 0 0 .6em; line-height: 1.18; letter-spacing: -.02em; font-weight: 700; } h1 { font-size: clamp(2rem, 4.6vw, 3.35rem); font-weight: 800; letter-spacing: -.033em; } h2 { font-size: clamp(1.55rem, 3.1vw, 2.35rem); font-weight: 700; letter-spacing: -.028em; } h3 { font-size: 1.15rem; font-weight: 600; } p { margin: 0 0 1.05rem; } p:last-child { margin-bottom: 0; } a { color: var(--blue-600); text-decoration: none; transition: color .18s var(--ease); } a:hover { color: var(--navy-700); } img { max-width: 100%; height: auto; display: block; } strong, b { font-weight: 600; color: var(--ink); } ::selection { background: var(--blue-200); color: var(--navy-900); } :focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; border-radius: 4px; } .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; } .wrap-narrow { max-width: 820px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--navy-800); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; color: #fff; } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); } .site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); } .header-inner { height: var(--header-h); display: flex; align-items: center; gap: 28px; } /* --- Brand lockup --- */ .brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; color: var(--navy-800); } .brand:hover { color: var(--navy-800); } .brand-mark { width: 46px; height: 46px; /* contain, so a non-square upload is never stretched */ object-fit: contain; transition: transform .45s var(--ease); } .brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); } .brand-full { height: 48px; width: auto; } /* "DRAGON" over "LABS", set live in Poppins — right-aligned with no extra tracking, so LABS ends flush with the N of DRAGON, matching the artwork. */ .brand-word { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; font-size: 20px; line-height: .92; letter-spacing: -.025em; color: var(--navy-800); text-transform: uppercase; } @media (max-width: 420px) { .brand-mark { width: 40px; height: 40px; } .brand-word { font-size: 17.5px; } .brand-full { height: 40px; } } .site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .site-nav a { position: relative; padding: 9px 15px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: var(--body); } .site-nav a:hover { color: var(--navy-800); background: var(--bg-soft); } .site-nav a.is-active { color: var(--navy-800); font-weight: 600; } .site-nav a.is-active::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue-500), var(--navy-600)); } .header-actions { display: flex; align-items: center; gap: 10px; } .cart-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line); color: var(--navy-800); background: var(--white); transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); } .cart-link:hover { border-color: var(--blue-300); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .cart-count { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--blue-500); color: #fff; font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px #fff; transform: scale(0); transition: transform .3s var(--ease); } .cart-link.has-items .cart-count { transform: scale(1); } .cart-count.pop { animation: badge-pop .45s var(--ease); } @keyframes badge-pop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } } .nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .nav-toggle span { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--navy-800); transition: transform .3s var(--ease), opacity .2s var(--ease); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 880px) { .nav-toggle { display: flex; } .header-actions { margin-left: auto; } .site-nav { position: fixed; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 14px 20px 22px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; } .site-nav.is-open { opacity: 1; visibility: visible; transform: none; } .site-nav a { padding: 13px 12px; font-size: 16px; } .site-nav a.is-active::after { display: none; } } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border: 1px solid transparent; border-radius: 11px; font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2; cursor: pointer; text-align: center; transition: transform .18s var(--ease), box-shadow .22s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .btn svg { flex-shrink: 0; } .btn-primary { background: linear-gradient(135deg, var(--blue-500) 0%, var(--navy-700) 100%); color: #fff; box-shadow: var(--shadow-blue); } .btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(27,132,200,.36); } .btn-primary:active { transform: translateY(0); } .btn-dark { background: var(--navy-800); color: #fff; } .btn-dark:hover { background: var(--navy-900); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-ghost { background: #fff; color: var(--navy-800); border-color: var(--line); } .btn-ghost:hover { border-color: var(--navy-600); color: var(--navy-800); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); } .btn-light:hover { background: rgba(255,255,255,.24); color: #fff; transform: translateY(-2px); } .btn-block { width: 100%; } .btn-lg { padding: 17px 32px; font-size: 16px; } .btn-sm { padding: 9px 16px; font-size: 13.5px; border-radius: 9px; } .btn:disabled, .btn[disabled] { background: var(--bg-tint) !important; color: var(--muted) !important; border-color: var(--line) !important; box-shadow: none !important; cursor: not-allowed; transform: none !important; } .link-arrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; } .link-arrow svg { transition: transform .22s var(--ease); } .link-arrow:hover svg { transform: translateX(4px); } /* ========================================================================== Scroll reveal animation primitives ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; } [data-reveal="left"] { transform: translateX(-32px); } [data-reveal="right"] { transform: translateX(32px); } [data-reveal="zoom"] { transform: scale(.94); } [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ========================================================================== Section furniture ========================================================================== */ section { position: relative; } .section { padding: 92px 0; } .section-sm { padding: 62px 0; } .section-soft { background: var(--bg-soft); } .section-tint { background: linear-gradient(180deg, var(--blue-050) 0%, #fff 100%); } .section-head { max-width: 660px; margin-bottom: 52px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head p { font-size: 17px; margin-bottom: 0; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600); margin: 0 0 14px; } .eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue-400), var(--navy-600)); } .section-head.center .eyebrow { justify-content: center; } .lede { font-size: 18px; line-height: 1.6; color: var(--body); } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; padding: 78px 0 96px; overflow: hidden; background: radial-gradient(900px 460px at 88% -8%, var(--blue-100) 0%, transparent 62%), radial-gradient(720px 420px at 4% 8%, #F3F7FD 0%, transparent 58%), var(--white); } .hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--line-soft); } .hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 64px; align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 8px; border-radius: 99px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xs); font-size: 13px; font-weight: 500; color: var(--navy-700); margin-bottom: 24px; } .hero-badge b { background: var(--navy-800); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; } .hero h1 { margin-bottom: 20px; } .hero h1 .grad { background: linear-gradient(100deg, var(--blue-500) 0%, var(--navy-700) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-lede { font-size: 18.5px; line-height: 1.62; max-width: 52ch; margin-bottom: 32px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 38px; } .hero-points { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; padding: 0; margin: 0; } .hero-points li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--navy-700); } .hero-points svg { color: var(--blue-500); flex-shrink: 0; } /* Hero visual */ .hero-visual { position: relative; } .hero-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3.1; background: var(--bg-tint); } .hero-frame img { width: 100%; height: 100%; object-fit: cover; } .hero-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(190deg, rgba(12,23,48,0) 40%, rgba(12,23,48,.42) 100%); } .hero-float { position: absolute; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 14px 18px; z-index: 2; } .hero-float .k { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .hero-float .v { font-size: 19px; font-weight: 700; color: var(--navy-800); line-height: 1.25; } .hero-float .v small { font-size: 12px; font-weight: 500; color: var(--body); } .hero-float-1 { top: 8%; left: -34px; animation: float-a 7s ease-in-out infinite; } .hero-float-2 { bottom: 12%; right: -28px; animation: float-b 8.5s ease-in-out infinite; } .hero-float-3 { bottom: -22px; left: 8%; display: flex; align-items: center; gap: 11px; animation: float-a 9s ease-in-out infinite .8s; } .hero-float-3 .ic { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: var(--blue-100); color: var(--blue-600); } @keyframes float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } } @keyframes float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(11px); } } .hero-blob { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--blue-200), transparent 68%); filter: blur(14px); opacity: .75; z-index: -1; animation: blob 16s ease-in-out infinite; } .hero-blob-1 { top: -70px; right: -60px; } .hero-blob-2 { bottom: -90px; left: -70px; animation-delay: -6s; } @keyframes blob { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(22px,-18px) scale(1.09); } 66% { transform: translate(-16px,16px) scale(.95); } } .hero-anim > * { animation: hero-in .8s var(--ease) both; } .hero-anim > *:nth-child(1) { animation-delay: .05s; } .hero-anim > *:nth-child(2) { animation-delay: .14s; } .hero-anim > *:nth-child(3) { animation-delay: .23s; } .hero-anim > *:nth-child(4) { animation-delay: .32s; } .hero-anim > *:nth-child(5) { animation-delay: .41s; } @keyframes hero-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @media (max-width: 1270px) { .hero-float-1 { left: 12px; } .hero-float-2 { right: 12px; } } @media (max-width: 960px) { .hero { padding: 52px 0 72px; } .hero-grid { grid-template-columns: 1fr; gap: 52px; } .hero-float-1 { left: 8px; } .hero-float-2 { right: 8px; } } @media (max-width: 560px) { .hero-float-3 { display: none; } .hero-float { padding: 11px 14px; } .hero-float .v { font-size: 16px; } } /* ========================================================================== Trust strip ========================================================================== */ .trust-strip { border-bottom: 1px solid var(--line-soft); background: var(--white); } .trust-strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 26px 24px; } .trust-item { display: flex; align-items: center; gap: 12px; } .trust-item .ic { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: var(--blue-050); color: var(--blue-600); } .trust-item b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; } .trust-item span { font-size: 12.5px; color: var(--muted); } @media (max-width: 880px) { .trust-strip .wrap { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 460px) { .trust-strip .wrap { grid-template-columns: 1fr; } } /* ========================================================================== Feature cards ========================================================================== */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } @media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 620px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--blue-200); } .card h3 { margin-bottom: .45em; } .card p { font-size: 14.8px; margin-bottom: 0; } .card-ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(140deg, var(--blue-100), #fff); border: 1px solid var(--blue-200); color: var(--blue-600); margin-bottom: 20px; } .card:hover .card-ic { color: var(--navy-700); } .price-unit { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--line); font-size: 13px; color: var(--body); line-height: 1.5; } .price-unit svg { color: var(--blue-600); flex-shrink: 0; margin-top: 3px; } /* ========================================================================== Stats ========================================================================== */ .stats-band { background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 55%, var(--blue-600) 130%); color: #fff; position: relative; overflow: hidden; } .stats-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 300px at 12% 0%, rgba(108,200,238,.22), transparent 60%), radial-gradient(500px 300px at 92% 100%, rgba(69,112,188,.3), transparent 60%); } .stats-band .wrap { position: relative; padding-top: 64px; padding-bottom: 64px; } .stats-band h2 { color: #fff; } .stats-band .section-head p { color: rgba(255,255,255,.76); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stat { text-align: center; padding: 26px 16px; border-radius: var(--radius); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); } .stat .n { display: block; font-size: clamp(1.65rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #fff; } .stat .n small { font-size: .5em; font-weight: 600; letter-spacing: 0; } .stat .l { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.72); letter-spacing: .02em; } @media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== Split / showcase blocks ========================================================================== */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 62px; align-items: center; } .split.reverse .split-media { order: 2; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } .split.reverse .split-media { order: 0; } } .split-media { position: relative; } .media-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--bg-tint); } .media-frame img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .8s var(--ease); } .media-frame:hover img { transform: scale(1.045); } .media-stack { display: grid; grid-template-columns: 1.25fr .85fr; gap: 16px; align-items: start; } .media-stack .media-frame:nth-child(2) { margin-top: 34px; } .media-stack img { aspect-ratio: 1/1; } .check-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 13px; } .check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.2px; } .check-list .ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-100); color: var(--blue-600); margin-top: 2px; } .check-list b { display: block; color: var(--ink); font-weight: 600; } /* ========================================================================== Product-image badge (home page: authorized-seller mark on the pump photo) ========================================================================== */ .media-frame-badged { position: relative; } .media-badge { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border-radius: 99px; background: rgba(255, 255, 255, .95); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--navy-800); font-size: 12.5px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2; white-space: nowrap; } .media-badge svg { color: var(--blue-600); flex-shrink: 0; } @media (max-width: 480px) { .media-badge { left: 12px; bottom: 12px; padding: 6px 11px 6px 9px; font-size: 11.5px; } } /* ========================================================================== Product card (shop grid) ========================================================================== */ .product-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--blue-200); } .product-card-media { position: relative; background: linear-gradient(160deg, var(--blue-050), var(--bg-soft)); padding: 28px; aspect-ratio: 4/3; display: grid; place-items: center; overflow: hidden; } .product-card-media img { max-height: 100%; width: auto; object-fit: contain; transition: transform .55s var(--ease); mix-blend-mode: multiply; } .product-card:hover .product-card-media img { transform: scale(1.07) rotate(-1.5deg); } .tag { position: absolute; top: 14px; left: 14px; padding: 5px 11px; border-radius: 99px; background: var(--navy-800); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .tag-blue { background: var(--blue-500); } .tag-muted { background: var(--muted); } .pill-muted { background: var(--bg-tint); color: var(--muted); } .product-card-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; } .product-card-body .cat { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 8px; } .product-card-body h3 { font-size: 1.08rem; margin-bottom: .4em; } .product-card-body h3 a { color: var(--ink); } .product-card-body h3 a:hover { color: var(--blue-600); } .product-card-body .desc { font-size: 14.3px; margin-bottom: 18px; } .product-card-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .product-card-foot .p { font-size: 17px; font-weight: 700; color: var(--navy-800); } .product-card-foot .p small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); } /* ========================================================================== Steps ========================================================================== */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; } @media (max-width: 820px) { .steps { grid-template-columns: 1fr; } } .step { position: relative; padding-left: 62px; } .step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -4px; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(140deg, var(--blue-500), var(--navy-700)); color: #fff; font-weight: 700; font-size: 17px; box-shadow: var(--shadow-blue); } .step h3 { margin-bottom: .35em; } .step p { font-size: 14.8px; margin: 0; } /* ========================================================================== CTA band ========================================================================== */ .cta-band { background: linear-gradient(120deg, var(--navy-900), var(--navy-700) 62%, var(--blue-600)); color: #fff; border-radius: var(--radius-lg); padding: 58px 54px; display: flex; align-items: center; justify-content: space-between; gap: 40px; position: relative; overflow: hidden; } .cta-band::after { content: ''; position: absolute; top: -120px; right: -80px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(108,200,238,.26), transparent 66%); } .cta-band h2 { color: #fff; margin-bottom: .4em; } .cta-band p { color: rgba(255,255,255,.78); max-width: 46ch; margin: 0; } .cta-band-text { position: relative; z-index: 1; } .cta-band-actions { position: relative; z-index: 1; display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; } @media (max-width: 860px) { .cta-band { flex-direction: column; align-items: flex-start; padding: 42px 30px; } } /* ========================================================================== Product detail page ========================================================================== */ .page-head { padding: 34px 0 0; background: linear-gradient(180deg, var(--bg-soft), #fff); border-bottom: 1px solid var(--line-soft); } .page-head.plain { background: #fff; } .page-head-inner { padding-bottom: 34px; } .page-head h1 { margin-bottom: .35em; font-size: clamp(1.75rem, 3.6vw, 2.6rem); } .page-head p { max-width: 62ch; margin: 0; } .crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 16px; flex-wrap: wrap; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--blue-600); } .crumbs span { color: var(--line); } .crumbs .now { color: var(--navy-700); font-weight: 500; } .product-page { padding: 46px 0 90px; } .product-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: start; } @media (max-width: 940px) { .product-grid { grid-template-columns: 1fr; gap: 40px; } } .gallery { position: sticky; top: calc(var(--header-h) + 24px); } @media (max-width: 940px) { .gallery { position: static; } } .gallery-main { background: linear-gradient(160deg, var(--blue-050) 0%, var(--bg-soft) 100%); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; display: grid; place-items: center; aspect-ratio: 1/1; overflow: hidden; } .gallery-main img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; animation: fade-in .45s var(--ease); } @keyframes fade-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } } .gallery-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .gallery-thumb { width: 68px; height: 68px; padding: 6px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-soft); cursor: pointer; display: grid; place-items: center; transition: border-color .2s var(--ease), transform .2s var(--ease); } .gallery-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; } .gallery-thumb:hover { transform: translateY(-2px); border-color: var(--blue-300); } .gallery-thumb.is-active { border-color: var(--navy-700); box-shadow: 0 0 0 2px rgba(30,52,104,.13); } .product-info h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 14px; } .rating-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); margin-bottom: 18px; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; background: rgba(14,159,110,.1); color: #0B7C56; } .pill-info { background: var(--blue-100); color: var(--blue-600); } .price-box { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin: 24px 0 26px; } .price-now { font-size: 32px; font-weight: 800; color: var(--navy-800); letter-spacing: -.03em; line-height: 1.15; } .price-sub { font-size: 13.5px; color: var(--muted); margin-top: 5px; } .price-sub strong { color: var(--ok); font-weight: 600; } .field-group { margin-bottom: 20px; } .field-group > label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: -.005em; } .field-group .hint { font-size: 12.5px; color: var(--muted); font-weight: 400; margin-left: 6px; } .select, select.select, .input { width: 100%; padding: 13px 40px 13px 15px; font-family: var(--font); font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%234C5B72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .input { background-image: none; padding-right: 15px; } textarea.input { min-height: 148px; resize: vertical; line-height: 1.6; } .select:hover, .input:hover { border-color: var(--blue-300); } .select:focus, .input:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(46,155,212,.16); } .qty-row { display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: end; } @media (max-width: 460px) { .qty-row { grid-template-columns: 1fr; } } .buy-actions { display: grid; gap: 10px; margin-top: 8px; } .note { font-size: 13.5px; padding: 12px 15px; border-radius: var(--radius-sm); background: #FFF8EC; border: 1px solid #F5E2BE; color: var(--warn); margin-top: 12px; } .note-err { background: #FDF2F2; border-color: #F5C9C7; color: var(--err); } .note-ok { background: #EFFAF5; border-color: #BFE8D6; color: #0B7C56; } .note-info { background: var(--blue-050); border-color: var(--blue-200); color: var(--blue-600); } .assurance { list-style: none; padding: 20px 0 0; margin: 24px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; } .assurance li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; } .assurance svg { flex-shrink: 0; color: var(--blue-500); margin-top: 3px; } /* Spec sections */ .specs { margin-top: 56px; } .specs h2 { font-size: 1.35rem; margin-bottom: 18px; } .feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; } .feature-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; } .feature-list svg { flex-shrink: 0; color: var(--blue-500); margin-top: 4px; } .spec-table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .spec-table th, .spec-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; } .spec-table tr:nth-child(odd) th, .spec-table tr:nth-child(odd) td { background: var(--bg-soft); } .spec-table th { color: var(--body); font-weight: 500; width: 42%; } .spec-table td { color: var(--ink); font-weight: 500; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); } /* Tabs */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 28px; overflow-x: auto; } .tabs button { background: none; border: none; cursor: pointer; font-family: var(--font); font-size: 14.5px; font-weight: 500; color: var(--body); padding: 13px 18px; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .18s var(--ease), border-color .18s var(--ease); } .tabs button:hover { color: var(--navy-800); } .tabs button.is-active { color: var(--navy-800); font-weight: 600; border-bottom-color: var(--navy-700); } .tab-panel { display: none; animation: fade-in .3s var(--ease); } .tab-panel.is-active { display: block; } /* ========================================================================== Checkout page (embedded Stripe) ========================================================================== */ .checkout-page { padding: 34px 0 90px; } .checkout-layout { display: grid; grid-template-columns: 1.4fr .85fr; gap: 40px; align-items: start; } @media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; gap: 28px; } /* Summary first on mobile, so the customer sees the total before paying. */ .checkout-summary { order: -1; position: static; } } .checkout-main { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 34px; min-height: 480px; } @media (max-width: 560px) { .checkout-main { padding: 22px 18px; } } #checkout { min-height: 460px; } .checkout-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 420px; color: var(--muted); font-size: 14.5px; } .spinner { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--blue-500); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Custom checkout form (Payment Element) */ .co-section { padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line-soft); } .co-section:last-of-type { border-bottom: 0; } .co-h { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin: 0 0 16px; } .co-flag { font-size: 11.5px; font-weight: 500; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line); padding: 3px 9px; border-radius: 99px; } .co-grid-3 { display: grid; grid-template-columns: 1.4fr .6fr .8fr; gap: 12px; } @media (max-width: 520px) { .co-grid-3 { grid-template-columns: 1fr 1fr; } } .co-payment { margin-top: 4px; } .co-secure { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); margin: 12px 0 0; } .co-secure svg { color: var(--ok); flex-shrink: 0; } #pay-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .spinner-sm { width: 18px; height: 18px; border-width: 2px; } .checkout-summary { padding: 26px; } .checkout-lines { list-style: none; margin: 0 0 20px; padding: 0 0 8px; border-bottom: 1px solid var(--line); display: grid; gap: 16px; } .checkout-lines li { display: grid; grid-template-columns: 48px 1fr auto; gap: 13px; align-items: center; } .checkout-line-media { position: relative; width: 48px; height: 48px; } .checkout-line-media img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--line-soft); border-radius: 9px; background: linear-gradient(160deg, var(--blue-050), var(--bg-soft)); padding: 4px; mix-blend-mode: multiply; } .checkout-line-qty { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--navy-800); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #fff; } .checkout-line-info .n { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; } .checkout-line-info .v { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; } .checkout-line-price { font-size: 14px; font-weight: 600; color: var(--navy-800); white-space: nowrap; } .checkout-summary .summary-fine { text-align: left; margin-top: 16px; } .checkout-summary .summary-fine a { font-weight: 600; } /* ========================================================================== Cart ========================================================================== */ .cart-layout { display: grid; grid-template-columns: 1.55fr .95fr; gap: 40px; align-items: start; } @media (max-width: 940px) { .cart-layout { grid-template-columns: 1fr; gap: 30px; } } .cart-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; } .cart-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 20px; padding: 22px; align-items: center; border-bottom: 1px solid var(--line-soft); } .cart-row:last-child { border-bottom: 0; } .cart-row-media { width: 96px; height: 96px; padding: 8px; border-radius: var(--radius-sm); background: linear-gradient(160deg, var(--blue-050), var(--bg-soft)); border: 1px solid var(--line-soft); display: grid; place-items: center; } .cart-row-media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; } .cart-row-info .n { font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.35; } .cart-row-info .v { font-size: 13.5px; color: var(--muted); margin-top: 2px; } .cart-row-info .u { font-size: 13.5px; color: var(--body); margin-top: 7px; } .cart-row-end { text-align: right; display: grid; gap: 10px; justify-items: end; } .cart-row-end .line-total { font-size: 16.5px; font-weight: 700; color: var(--navy-800); } .qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; } .qty-stepper button { width: 34px; height: 36px; border: 0; background: #fff; cursor: pointer; font-size: 17px; font-weight: 500; color: var(--navy-800); line-height: 1; transition: background .15s var(--ease); } .qty-stepper button:hover:not(:disabled) { background: var(--bg-soft); } .qty-stepper button:disabled { color: var(--line); cursor: not-allowed; } .qty-stepper input { width: 42px; height: 36px; border: 0; text-align: center; font-family: var(--font); font-size: 14.5px; font-weight: 600; color: var(--ink); border-left: 1px solid var(--line); border-right: 1px solid var(--line); -moz-appearance: textfield; } .qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .link-remove { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font); font-size: 13px; color: var(--muted); text-decoration: underline; } .link-remove:hover { color: var(--err); } @media (max-width: 620px) { .cart-row { grid-template-columns: 72px 1fr; gap: 14px 16px; padding: 18px; } .cart-row-media { width: 72px; height: 72px; } .cart-row-end { grid-column: 1 / -1; justify-items: stretch; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--line-soft); } .cart-row-end .line-total { order: 3; margin-left: auto; } } .cart-actions-row { display: flex; justify-content: space-between; gap: 14px; margin-top: 20px; flex-wrap: wrap; } .summary { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; position: sticky; top: calc(var(--header-h) + 24px); } @media (max-width: 940px) { .summary { position: static; } } .summary h2 { font-size: 1.15rem; margin-bottom: 20px; } .summary-row { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; padding: 9px 0; } .summary-row span:last-child { font-weight: 600; color: var(--ink); } .summary-row.free span:last-child { color: var(--ok); } .summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--ink); } .summary-total b { font-size: 24px; font-weight: 800; color: var(--navy-800); letter-spacing: -.02em; } .summary .btn { margin-top: 20px; } .summary-fine { font-size: 12.5px; color: var(--muted); margin-top: 14px; text-align: center; line-height: 1.55; } /* Checkout agreement + PCI badge (cart summary) */ .agree-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; font-size: 12.8px; line-height: 1.5; color: var(--body); cursor: pointer; } .agree-check input { flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue-600); cursor: pointer; } .agree-check a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .pci-badge { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); font-size: 12px; line-height: 1.5; color: var(--muted); } .pci-badge svg { color: var(--ok); flex-shrink: 0; margin-top: 1px; } .pci-badge strong { color: var(--ink); font-weight: 600; } .pci-badge a { color: var(--blue-600); text-decoration: underline; } .stripe-badge { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } .stripe-badge svg { color: var(--ok); } .empty-state { text-align: center; max-width: 480px; margin: 0 auto; padding: 56px 0 20px; } .empty-state .ic { width: 78px; height: 78px; margin: 0 auto 24px; border-radius: 22px; display: grid; place-items: center; background: var(--blue-050); color: var(--blue-500); border: 1px solid var(--blue-200); } .empty-state h1, .empty-state h2 { font-size: 1.7rem; } /* ========================================================================== Status pages (success / cancel) ========================================================================== */ .status-page { padding: 84px 0 100px; } .status-box { max-width: 600px; margin: 0 auto; text-align: center; } .status-ic { width: 82px; height: 82px; margin: 0 auto 26px; border-radius: 24px; display: grid; place-items: center; animation: pop-in .55s var(--ease) both; } .status-ic.ok { background: #EAFAF3; color: var(--ok); border: 1px solid #BFE8D6; } .status-ic.neutral { background: var(--bg-soft); color: var(--body); border: 1px solid var(--line); } @keyframes pop-in { 0% { opacity: 0; transform: scale(.7); } 60% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } .status-box h1 { font-size: clamp(1.65rem, 3.4vw, 2.3rem); } .receipt { text-align: left; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin: 30px 0; } .receipt-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 14.5px; border-bottom: 1px solid var(--line-soft); } .receipt-row:last-child { border-bottom: 0; } .receipt-row span:last-child { font-weight: 600; color: var(--ink); text-align: right; } .status-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ========================================================================== Content / legal pages ========================================================================== */ .legal { padding: 52px 0 100px; } .legal-layout { display: grid; grid-template-columns: 236px 1fr; gap: 56px; align-items: start; } @media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; gap: 32px; } } .legal-toc { position: sticky; top: calc(var(--header-h) + 24px); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } @media (max-width: 900px) { .legal-toc { position: static; } } .legal-toc h2 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 600; } .legal-toc a { display: block; font-size: 13.8px; color: var(--body); padding: 6px 0; line-height: 1.4; } .legal-toc a:hover { color: var(--blue-600); } .prose { max-width: 74ch; } .prose h2 { font-size: 1.4rem; margin-top: 46px; margin-bottom: .55em; scroll-margin-top: calc(var(--header-h) + 24px); } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 1.05rem; margin-top: 28px; margin-bottom: .5em; } .prose p, .prose li { font-size: 15.4px; line-height: 1.72; } .prose ul, .prose ol { padding-left: 22px; margin: 0 0 1.1rem; } .prose li { margin-bottom: 9px; } .prose li::marker { color: var(--blue-500); } .prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; } .prose a { text-decoration: underline; text-underline-offset: 2px; } .callout { border-left: 3px solid var(--blue-500); background: var(--blue-050); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 20px 24px; margin: 26px 0; } .callout p { margin-bottom: .7rem; } .callout p:last-child { margin-bottom: 0; } .callout.strong { border-left-color: var(--navy-700); background: var(--bg-soft); } .updated { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line); padding: 6px 13px; border-radius: 99px; margin-bottom: 8px; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 34px; } } .contact-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; } .contact-card + .contact-card { margin-top: 18px; } .contact-card h3 { font-size: 1rem; margin-bottom: .4em; } .contact-card p { font-size: 14.5px; margin-bottom: 0; } .contact-card .big { font-size: 16px; font-weight: 600; color: var(--navy-800); } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); margin-top: 0; } .footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 42px; padding: 62px 24px 46px; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .footer-brand p { font-size: 14.2px; margin-bottom: 1rem; max-width: 40ch; } .footer-brand .brand { margin-bottom: 18px; } .footer-addr { font-size: 13.5px; line-height: 1.75; color: var(--muted); } .footer-addr a { color: var(--blue-600); } .footer-col h3 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; font-weight: 600; } .footer-col a { display: block; font-size: 14.2px; color: var(--body); padding: 5px 0; } .footer-col a:hover { color: var(--blue-600); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 24px 26px; border-top: 1px solid var(--line); font-size: 12.8px; color: var(--muted); } .footer-bottom p { margin: 0; } .footer-pay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .footer-pay .dot { color: var(--line); } /* ========================================================================== Admin dashboard (nav, cards, detail, analytics) ========================================================================== */ .admin-header .wrap { gap: 24px; } .admin-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; } .admin-nav a { padding: 8px 14px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--body); } .admin-nav a:hover { background: var(--bg-soft); color: var(--navy-800); } .admin-nav a.is-active { background: var(--navy-800); color: #fff; } .admin-header-end { display: flex; align-items: center; gap: 14px; } @media (max-width: 720px) { .admin-header .wrap { flex-wrap: wrap; } .admin-nav { order: 3; width: 100%; margin: 4px 0 0; overflow-x: auto; } .admin-header-end .btn-ghost { display: none; } } .admin-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .admin-page-head h1 { font-size: 1.6rem; margin: 0; display: flex; align-items: center; gap: 12px; } .admin-crumbs { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; font-size: 13.5px; } .admin-crumbs a { color: var(--body); font-weight: 500; } .admin-crumbs a:hover { color: var(--blue-600); } .admin-crumbs-nav { display: flex; gap: 14px; } /* Filter chips + search */ .admin-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .admin-filters .admin-search { margin-left: auto; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 500; color: var(--body); } .chip:hover { border-color: var(--blue-300); color: var(--navy-800); } .chip.is-active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; } .chip-n { font-size: 11.5px; opacity: .7; font-weight: 600; } /* Clickable table rows */ .row-link { cursor: pointer; transition: background .12s var(--ease); } .row-link:hover td { background: var(--bg-soft); } .row-view { font-weight: 600; font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .tag-dispute { background: #FDECEC; color: var(--err); } .dispute-card { border-color: #F5C9C7; } .tag-inline { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: var(--blue-100); color: var(--blue-600); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; } /* KPI stat cards */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } @media (max-width: 780px) { .stat-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .stat-row { grid-template-columns: 1fr; } } .stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } .stat-card.accent { background: linear-gradient(135deg, var(--navy-900), var(--navy-700) 70%, var(--blue-600)); border-color: transparent; color: #fff; } .stat-card.accent .stat-k { color: rgba(255,255,255,.72); } .stat-card.accent .stat-k .muted { color: rgba(255,255,255,.55); } .stat-card.accent .stat-v { color: #fff; } .stat-k { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-bottom: 6px; } .stat-v { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; color: var(--navy-800); line-height: 1.1; } /* Generic admin card */ .admin-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 22px; } .admin-card h2 { font-size: 1.05rem; margin: 0 0 16px; } .admin-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; } .admin-card-head h2 { margin: 0; } .admin-card-aside { display: flex; align-items: baseline; gap: 8px; font-size: 14px; } .admin-card-aside strong { font-size: 1.05rem; color: var(--navy-800); } .delta { font-size: 12.5px; font-weight: 700; } .delta.up { color: var(--ok); } .delta.down { color: var(--err); } /* Order detail */ .order-detail { display: grid; grid-template-columns: 1.5fr .9fr; gap: 22px; align-items: start; } @media (max-width: 860px) { .order-detail { grid-template-columns: 1fr; } } .order-items-table th:last-child, .order-items-table td:last-child { text-align: right; } .order-totals { margin-top: 18px; margin-left: auto; max-width: 320px; } .order-totals .summary-row, .order-totals .summary-total { padding: 7px 0; } .order-totals .summary-total { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); } .admin-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 13.8px; } .admin-dl dt { color: var(--muted); } .admin-dl dd { margin: 0; color: var(--ink); text-align: right; } .admin-break { word-break: break-all; } .admin-address { font-style: normal; font-size: 14px; line-height: 1.7; color: var(--ink); } /* Analytics */ .analytics-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 22px; align-items: start; } @media (max-width: 900px) { .analytics-grid { grid-template-columns: 1fr; } } .chart-wrap { width: 100%; overflow-x: auto; } .revenue-chart { width: 100%; height: auto; min-width: 520px; display: block; } .chart-cap { font-size: 12.5px; margin: 10px 0 0; } .status-breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .status-breakdown .sb-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; } .status-breakdown .sb-top strong { font-size: 15px; color: var(--navy-800); } .sb-bar { display: block; height: 7px; background: var(--bg-tint); border-radius: 99px; overflow: hidden; } .sb-fill { display: block; height: 100%; border-radius: 99px; } .sb-ok { background: var(--ok); } .sb-pending { background: var(--warn); } .sb-err { background: var(--err); } .top-products .bar-mini { display: block; height: 8px; background: var(--bg-tint); border-radius: 99px; overflow: hidden; } .top-products .bar-mini span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--blue-400), var(--navy-700)); } .admin-note { font-size: 12.5px; margin-top: 4px; } /* ========================================================================== Admin (kept on the same light theme) ========================================================================== */ .admin-header { background: #fff; border-bottom: 1px solid var(--line); padding: 18px 0; } .admin-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .admin-header .brand-word { font-size: 18px; } .admin-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--navy-800); color: #fff; padding: 4px 9px; border-radius: 99px; margin-left: 10px; } .admin-logout { font-size: 14px; color: var(--body); font-weight: 500; } .admin-logout:hover { color: var(--err); } .admin-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background: var(--bg-soft); } .admin-login-box { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-md); } .admin-login-box .brand { margin-bottom: 22px; } .admin-login-box h1 { font-size: 1.3rem; margin-bottom: 6px; } .admin-login-box .sub { font-size: 14px; margin-bottom: 24px; } .admin-login-box label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin: 16px 0 7px; } .admin-login-box button { margin-top: 24px; } .admin-error { font-size: 13.5px; color: var(--err); background: #FDF2F2; border: 1px solid #F5C9C7; padding: 10px 13px; border-radius: var(--radius-sm); margin-bottom: 4px; } .admin-main { padding: 34px 0 80px; background: var(--bg-soft); min-height: 70vh; } .admin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .admin-search { display: flex; gap: 8px; } .admin-search input { width: 300px; max-width: 100%; padding: 11px 14px; font-family: var(--font); font-size: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); } .admin-search input:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(46,155,212,.16); } .admin-count { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; } .admin-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .orders-table { width: 100%; border-collapse: collapse; font-size: 13.6px; } .orders-table th { text-align: left; padding: 13px 14px; background: var(--bg-soft); color: var(--body); font-weight: 600; font-size: 12.5px; border-bottom: 1px solid var(--line); white-space: nowrap; } .orders-table td { padding: 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink); vertical-align: top; } .orders-table tr:last-child td { border-bottom: 0; } .orders-table tbody tr:hover td { background: var(--bg-soft); } .admin-empty { text-align: center; color: var(--muted); padding: 44px 0 !important; } .status-pill { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 99px; white-space: nowrap; } .status-paid { background: #EAFAF3; color: #0B7C56; } .status-pending { background: #FFF8EC; color: var(--warn); } .status-failed, .status-refunded { background: #FDF2F2; color: var(--err); } .mono { font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: .01em; font-size: 12px; } .small { font-size: 12.5px; color: var(--muted); } .pagination { margin-top: 20px; display: flex; gap: 7px; flex-wrap: wrap; } .pagination a { padding: 8px 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--body); font-size: 13.5px; font-weight: 500; } .pagination a:hover { border-color: var(--blue-300); color: var(--navy-800); } .pagination a.active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; } /* 2FA / security page */ .admin-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; color: var(--body); border: 1px solid var(--line); background: #fff; } .admin-icon-link:hover { border-color: var(--blue-300); color: var(--navy-800); } .admin-icon-link.is-active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; } .code-input { letter-spacing: .35em; font-weight: 600; text-align: center; } .totp-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.35rem; font-weight: 700; letter-spacing: .12em; color: var(--navy-800); background: var(--bg-soft); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 16px 18px; text-align: center; margin: 6px 0 14px; word-break: break-all; } .totp-uri { margin: 8px 0 0; } .totp-uri summary { cursor: pointer; font-size: 13.5px; color: var(--blue-600); font-weight: 500; } .totp-uri input { margin-top: 10px; font-size: 12px; } .security-actions { display: grid; gap: 22px; margin-top: 22px; } .inline-form label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; } .inline-form.danger label { color: var(--err); } .inline-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .inline-row .input { flex: 1; min-width: 120px; } .inline-row .code-input { max-width: 130px; flex: 0 0 auto; } .recovery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (max-width: 480px) { .recovery-grid { grid-template-columns: 1fr; } } .recovery-grid code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; letter-spacing: .08em; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; text-align: center; color: var(--navy-800); } /* ========================================================================== Utilities ========================================================================== */ .center { text-align: center; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: 18px; } .mt-3 { margin-top: 28px; } .mt-4 { margin-top: 42px; } .mb-0 { margin-bottom: 0; } .muted { color: var(--muted); } .nowrap { white-space: nowrap; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ Admin — Catalogue management ============================================================ */ .admin-note-ok { color: var(--ok); background: #EAF7F1; border: 1px solid #BEE7D6; border-radius: var(--radius-sm); padding: 9px 12px; } .admin-note-err { color: var(--err); background: #FCEDEC; border: 1px solid #F3C9C7; border-radius: var(--radius-sm); padding: 9px 12px; } .admin-note-info { color: var(--blue-600); background: var(--blue-050); border: 1px solid var(--blue-200); border-radius: var(--radius-sm); padding: 9px 12px; } .cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } @media (max-width: 860px) { .cat-grid { grid-template-columns: 1fr; } } .admin-form-panel { padding: 20px 22px; } .cat-form-title { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 18px 0 10px; } .cat-form-title:first-child { margin-top: 0; } .cat-form-title .hint { font-weight: 400; } .cat-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 520px) { .cat-two-col { grid-template-columns: 1fr; } } .cat-check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 13.5px; color: var(--body); cursor: pointer; } .cat-check input { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--blue-500); } .cat-check span { line-height: 1.4; } .cat-form-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; } .cat-preview { display: block; width: 120px; height: 120px; object-fit: contain; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; margin-bottom: 12px; } .row-actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; } .cat-facts { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; } .cat-facts li { font-size: 13.5px; color: var(--body); } .cat-facts a { margin-left: 8px; } /* Variant editor rows */ .variant-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; background: var(--bg-soft); } .vr-grid { display: grid; grid-template-columns: 108px 128px 1fr 92px 1fr auto; gap: 12px; align-items: end; } .vr-grid .field-group { margin-bottom: 0; } .vr-active { margin: 0; align-self: center; white-space: nowrap; } @media (max-width: 760px) { .vr-grid { grid-template-columns: 1fr 1fr; } .vr-label { grid-column: 1 / -1; } } .vr-sub { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .vr-sub-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .vr-sub input { max-width: 260px; } /* Shipping-method chooser on the cart */ .ship-methods { margin: 2px 0 10px; border: 0; } .ship-methods fieldset { border: 0; padding: 0; margin: 0; } .ship-methods legend { font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 0; margin-bottom: 8px; } .ship-methods legend .hint { text-transform: none; letter-spacing: 0; font-weight: 400; } .ship-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); } .ship-opt:hover { border-color: var(--blue-300); } .ship-opt.is-selected { border-color: var(--blue-500); background: var(--blue-050); } .ship-opt input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--blue-500); } .ship-opt-info { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; } .ship-opt-name { font-weight: 600; color: var(--ink); font-size: 13.5px; } .ship-opt-est { font-size: 12px; color: var(--muted); } .ship-opt-price { flex: 0 0 auto; font-weight: 600; color: var(--ink); font-size: 13.5px; } .ship-opt.is-selected .ship-opt-price { color: var(--blue-600); } /* ============================================================ Customer account (/my-account/) ============================================================ */ .account-wrap { max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; } .account-flash { margin: 0 0 20px; } .account-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); } .account-narrow { max-width: 460px; margin: 0 auto; text-align: center; } .account-narrow h1, .account-narrow h2 { margin: 0 0 12px; } .account-ic { width: 60px; height: 60px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-050); color: var(--blue-500); } .account-auth { max-width: 460px; margin: 0 auto; } .account-tabs { display: flex; gap: 6px; background: var(--bg-tint); padding: 5px; border-radius: var(--radius); margin-bottom: 20px; } .account-tab { flex: 1; border: 0; background: transparent; padding: 10px; border-radius: var(--radius-sm); font: 600 14px var(--font); color: var(--muted); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .account-tab.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-xs); } .account-panel { display: none; } .account-panel.is-active { display: block; } .account-fine { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; text-align: center; } .account-resend { margin: 0 0 16px; text-align: center; } .link-button { background: none; border: 0; padding: 0; color: var(--blue-600); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; } .account-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; } .account-hello { font-weight: 700; font-size: 1.1rem; margin: 0 0 2px; color: var(--ink); } .account-empty { text-align: center; } .account-orders { display: grid; gap: 16px; } .order-card { padding: 18px 20px; } .order-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); } .order-ref { font-weight: 700; color: var(--ink); font-family: var(--font); } .order-date { color: var(--muted); font-size: 13px; margin-left: 10px; } .order-badges { display: flex; gap: 6px; flex-wrap: wrap; } .ff-badge { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .ff-unfulfilled { background: var(--bg-tint); color: var(--muted); } .ff-processing { background: #FFF4E5; color: var(--warn); } .ff-shipped { background: var(--blue-050); color: var(--blue-600); } .ff-delivered { background: #EAF7F1; color: var(--ok); } .ff-cancelled { background: #FCEDEC; color: var(--err); } .order-card-items { list-style: none; padding: 12px 0; margin: 0; display: grid; gap: 6px; } .order-card-items li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--body); } .order-tracking { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--blue-050); border-radius: var(--radius-sm); font-size: 13px; color: var(--ink); margin-bottom: 12px; } .order-tracking svg { color: var(--blue-500); flex: 0 0 auto; } .order-card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--line-soft); } .order-total { font-weight: 700; color: var(--ink); } .account-link { display: inline-flex; align-items: center; justify-content: center; color: var(--ink); padding: 6px; border-radius: 10px; transition: background .15s var(--ease), color .15s var(--ease); } .account-link:hover { background: var(--bg-tint); color: var(--blue-600); } .order-tracking .track-label { font-weight: 600; } /* ============================================================ Admin — form controls (give bare inputs the storefront polish) ============================================================ */ .admin-main input[type="text"], .admin-main input[type="number"], .admin-main input[type="url"], .admin-main input[type="email"], .admin-main input[type="password"], .admin-main input[type="date"], .admin-main input[type="search"], .admin-main input[type="tel"], .admin-main textarea, .admin-main select { width: 100%; padding: 10px 13px; font-family: var(--font); font-size: 14px; color: var(--ink); background-color: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); -webkit-appearance: none; appearance: none; } .admin-main textarea { min-height: 84px; resize: vertical; line-height: 1.55; } .admin-main select { padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%234C5B72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; cursor: pointer; } .admin-main input:hover, .admin-main textarea:hover, .admin-main select:hover { border-color: var(--blue-300); } .admin-main input:focus, .admin-main textarea:focus, .admin-main select:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(46, 155, 212, .16); } .admin-main input[readonly] { background: var(--bg-soft); color: var(--muted); cursor: default; } .admin-main input[readonly]:hover { border-color: var(--line); } .admin-main input::placeholder, .admin-main textarea::placeholder { color: #A9B4C4; } .admin-main input[type="file"] { width: 100%; font-size: 13px; color: var(--body); padding: 8px; background: var(--bg-soft); border: 1px dashed var(--line); border-radius: var(--radius-sm); cursor: pointer; } .admin-main input[type="file"]::-webkit-file-upload-button, .admin-main input[type="file"]::file-selector-button { font: 600 13px var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; margin-right: 12px; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); } .admin-main input[type="file"]:hover::file-selector-button { border-color: var(--blue-300); } /* The admin-search box shouldn't stretch full width */ .admin-main .admin-search input[type="text"] { width: auto; min-width: 260px; } /* Three-across field grid (product dimensions) */ .cat-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } @media (max-width: 520px) { .cat-three-col { grid-template-columns: 1fr 1fr; } } /* Customer account-type badges */ .tag-inline.tag-verified { background: #EAF7F1; color: var(--ok); } .tag-inline.tag-guest { background: var(--bg-tint); color: var(--muted); } /* Selected-variant SKU on the product page */ .variant-sku { margin: -6px 0 16px; font-size: 13px; color: var(--muted); font-weight: 500; } .variant-sku span { color: var(--ink); font-weight: 600; letter-spacing: .01em; }