/* ===================================================================== PeptidiBiH — design system (uu.life structure, black/gold brand) One calm system: Outfit (headings) + Satoshi (body). Flat gold accents. No gradient text, glow, grain, particles, marquee, parallax, shimmer. ===================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&display=swap"); @import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap"); /* --------------------------------------------------------------------- 0. TOKENS --------------------------------------------------------------------- */ :root { /* colors */ --bg: #FAF8F3; --bg-deep: #0A0A0A; /* footer, sticky ATC bar */ --band: #0A0A0A; /* contrast band (uu "dark section") */ --surface: #FFFFFF; /* cards, "white" sections */ --surface-2: #F6F7F9; /* inputs, selected option, table header */ --elevated: #FFFFFF; /* floating plates, drawer, modal */ --border: #E5E7EB; --border-strong: #D4D6DB; --text: #0A0A0A; --muted: #56585C; --faint: #9CA0A6; --gold: #C9A227; --gold-text: #8A6D12; /* zlato kao tekst na svijetlom (kontrast) */ --gold-hover: #D9B23A; --gold-tint: rgba(201,162,39,0.16); --gold-tint-2: rgba(201,162,39,0.09); --gold-border: rgba(201,162,39,0.35); --on-gold: #0F0F10; --light: #FFFFFF; /* light pill on contrast bands */ --on-light: #0F0F10; --success: #4CAF7D; --danger: #C05252; --whatsapp: #25D366; --chip: rgba(10,10,10,0.05); --hover-wash: rgba(10,10,10,0.04); --overlay: rgba(0,0,0,0.5); --shadow-card: 0 8px 24px rgba(26,23,20,0.08); --shadow-float: 0 16px 40px rgba(26,23,20,0.16); --shadow-drawer: -8px 0 32px rgba(26,23,20,0.18); /* category tints (6 + pribor) — image tiles, tags, filter pills */ --tint-metabolizam: rgba(219,220,200,0.6); --solid-metabolizam: #A3B42E; --on-metabolizam: #0F0F10; --tint-performanse: rgba(242,223,208,0.6); --solid-performanse: #F08A2E; --on-performanse: #0F0F10; --tint-oporavak: rgba(213,223,220,0.6); --solid-oporavak: #7FB5A6; --on-oporavak: #0F0F10; --tint-san: rgba(200,208,226,0.6); --solid-san: #6B86D6; --on-san: #0F0F10; --tint-koza: rgba(231,219,221,0.6); --solid-koza: #F2B8C6; --on-koza: #0F0F10; --tint-vitalnost: rgba(224,213,224,0.6); --solid-vitalnost: #A06E9E; --on-vitalnost: #ECEAE4; --tint-pribor: rgba(10,10,10,0.05); --solid-pribor: #6F6D74; --on-pribor: #FFFFFF; /* type */ --font-head: "Outfit", "Urbanist", system-ui, sans-serif; --font-body: "Satoshi", "DM Sans", "Inter", system-ui, -apple-system, sans-serif; /* layout */ --container: 1280px; /* incl. gutters → 1208 inner */ --gutter: 36px; --gap: 24px; --gap-tight: 12px; --announce-h: 31px; --header-h: 61px; /* radii */ --r-pill: 9999px; --r-goal: 28px; --r-quick: 22px; --r-panel: 24px; --r-card: 20px; --r-card-s: 16px; --r-input: 12px; --r-tile: 8px; --r-xs: 6px; --r-chip: 4px; /* motion */ --ease: cubic-bezier(.2,.6,.2,1); --t-fast: 160ms; --t-reveal: 400ms; } /* --------------------------------------------------------------------- 1. RESET --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } strong, b { font-weight: 700; } em, i { font-style: normal; font-weight: 500; } /* no italics in this system */ hr { border: 0; border-top: 1px solid var(--border); margin: 0; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--gold); color: var(--on-gold); } ::placeholder { color: var(--faint); opacity: 1; } table { border-collapse: collapse; width: 100%; } /* --------------------------------------------------------------------- 2. TYPOGRAPHY --------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .display-xl, .display-l, .display-m, .h2, .h1-compact, .h3, .h3-s, .h4, .stat__num { font-family: var(--font-head); font-weight: 600; color: var(--text); } .display-xl { font-size: clamp(2.75rem, 6.9vw, 5.5rem); line-height: .95; letter-spacing: -.04em; } .display-l { font-size: clamp(2.5rem, 5.6vw, 4.48rem); line-height: .98; letter-spacing: -.035em; } .display-m { font-size: clamp(2.25rem, 4.35vw, 3.48rem); line-height: 1; letter-spacing: -.03em; } .h2 { font-size: clamp(2rem, 3.6vw, 2.89rem); line-height: 1.05; letter-spacing: -.03em; } .h1-compact { font-size: clamp(1.875rem, 2.8vw, 2.25rem); line-height: 1.1; letter-spacing: -.025em; } .h3 { font-size: 26px; line-height: 1.18; letter-spacing: -.02em; } .h3-s { font-size: 23px; line-height: 1.25; letter-spacing: -.015em; } .h4 { font-size: 22px; line-height: 1.2; letter-spacing: -.01em; } .h1-plain { font-family: var(--font-body); font-weight: 500; font-size: 28px; line-height: 1.3; letter-spacing: 0; } .lead { font-size: 18px; line-height: 1.55; } .body-s { font-size: 15px; line-height: 1.5; } .small { font-size: 14px; line-height: 1.5; } .xs { font-size: 13px; line-height: 1.5; font-weight: 500; } .xxs { font-size: 12px; line-height: 1.5; font-weight: 500; } .label, .eyebrow { font-family: var(--font-body); font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .label-tag { font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .micro { font-size: 10px; line-height: 1.5; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .accent { color: var(--gold-text); } /* second clause of a headline */ .u-gold { color: var(--gold-text); } .u-muted { color: var(--muted); } .u-faint { color: var(--faint); } .u-text { color: var(--text); } .u-center { text-align: center; } .u-right { text-align: right; } .u-upper { text-transform: uppercase; letter-spacing: .14em; } .u-strike { text-decoration: line-through; color: var(--faint); } .u-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); transition: color var(--t-fast), text-decoration-color var(--t-fast); } .u-link:hover { color: var(--gold-text); text-decoration-color: var(--gold-text); } .u-nowrap { white-space: nowrap; } .u-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .u-clamp-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* eyebrow variants */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; } .eyebrow--gold { color: var(--gold-text); } .eyebrow--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; } .eyebrow--rule::before { content: ""; width: 24px; height: 1px; background: var(--gold); flex: none; } .eyebrow--light { color: rgba(236,234,228,.7); } /* --------------------------------------------------------------------- 3. LAYOUT — container, sections, bands, grids --------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .container--1100 { max-width: calc(1100px + var(--gutter) * 2); } .container--980 { max-width: calc(980px + var(--gutter) * 2); } .container--720 { max-width: calc(720px + var(--gutter) * 2); } .container--642 { max-width: calc(642px + var(--gutter) * 2); } .container--468 { max-width: calc(468px + var(--gutter) * 2); } /* section vertical rhythm (uu measured) */ .section { padding: 96px 0; } .section--hero { padding: 40px 0 24px; } .section--utility { padding: 48px 0; } .section--store { padding: 72px 0; } .section--reviews { padding: 80px 0; } .section--pdp { padding: 100px 0; } .section--home { padding: 96px 0; } .section--bundle { padding: 110px 0; } .section--tight { padding: 48px 0; } .section--flush-top { padding-top: 0; } .section--flush-bottom { padding-bottom: 0; } /* bands: page (default) → contrast (their black) → surface (their white) */ .band { background: var(--bg); } .band--contrast { background: var(--band); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .band--surface { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .band--deep { background: var(--bg-deep); border-top: 1px solid var(--border); } .band--contrast + .band--contrast, .band--surface + .band--surface { border-top: 0; } /* cards inside a surface band flip to page-bg so they still read as cards */ .band--surface :is(.card, .trust, .pcard, .stat--card, .mech, .coa-row, .review, .table-wrap, .search) { background: var(--bg); } .band--surface .spec { background: var(--bg); } .grid { display: grid; gap: var(--gap); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--tight { gap: var(--gap-tight); } .grid--rowgap-40 { row-gap: 40px; } .flex { display: flex; } .flex--between { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .flex--center { display: flex; align-items: center; gap: 12px; } .flex--wrap { flex-wrap: wrap; } .stack > * + * { margin-top: var(--stack, 16px); } .divider { height: 1px; background: var(--border); border: 0; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-40 { margin-bottom: 40px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* horizontal scroll pattern (mobile carousels) */ .scroll-x { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .scroll-x::-webkit-scrollbar { display: none; } .scroll-x > * { flex: none; scroll-snap-align: start; } /* section header */ .sec-head { margin-bottom: 40px; } .sec-head .eyebrow { margin-bottom: 16px; } .sec-head__sub { margin-top: 16px; font-size: 15px; color: var(--muted); max-width: 600px; } .sec-head--center { text-align: center; } .sec-head--center .sec-head__sub { margin-left: auto; margin-right: auto; } .sec-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: end; padding-bottom: 32px; border-bottom: 1px solid var(--border); } .sec-head--split .sec-head__sub { margin: 0; justify-self: end; text-align: right; } .sec-head__cta { justify-self: end; align-self: end; } .sec-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } /* reveal (optional, 0.4s fade-up) */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { transition-duration: 0ms !important; } } /* --------------------------------------------------------------------- 4. HEADER — announcement bar + sticky header + mobile nav --------------------------------------------------------------------- */ .announce { min-height: var(--announce-h); background: var(--surface); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11px; line-height: 17px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-align: center; padding: 7px 16px; } .announce strong { color: var(--text); font-weight: 600; } .announce .sep { margin: 0 8px; color: var(--faint); } .header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: rgba(250,248,243,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .header__logo { display: flex; align-items: center; flex: none; } .header__logo img { height: 26px; width: auto; } .header__nav { display: flex; align-items: center; gap: 28px; } .header__nav a { font-size: 15px; font-weight: 500; color: var(--text); padding: 4px 0; position: relative; transition: color var(--t-fast); } .header__nav a:hover { color: var(--muted); } .header__nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--gold); border-radius: 1px; } .header__right { display: flex; align-items: center; gap: 10px; flex: none; } .header__cod { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .header__cod::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } .icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--border); background: transparent; color: var(--text); transition: border-color var(--t-fast), background var(--t-fast); } .icon-btn:hover { border-color: var(--border-strong); background: var(--hover-wash); } .icon-btn svg { width: 18px; height: 18px; } .icon-btn__count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--gold); color: var(--on-gold); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .burger { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--gold-border); align-items: center; justify-content: center; color: var(--text); } .burger svg { width: 20px; height: 20px; } .burger span { display: block; width: 18px; height: 1.5px; background: currentColor; } .burger span + span { margin-top: 5px; } /* mobile nav panel */ .mobile-nav { display: none; position: fixed; z-index: 49; left: 0; right: 0; top: var(--header-h); bottom: 0; background: var(--bg); border-top: 1px solid var(--border); padding: 16px var(--gutter) 32px; overflow-y: auto; } .mobile-nav a { display: block; padding: 16px 0; font-family: var(--font-head); font-size: 22px; font-weight: 600; border-bottom: 1px solid var(--border); } .mobile-nav__foot { margin-top: 24px; display: grid; gap: 12px; } body.nav-open .mobile-nav { display: block; } body.nav-open { overflow: hidden; } /* --------------------------------------------------------------------- 5. FOOTER --------------------------------------------------------------------- */ .footer { background: var(--bg-deep); border-top: 1px solid var(--border); padding: 96px 0 48px; color: var(--text); } .footer__grid { display: grid; grid-template-columns: minmax(0, 386fr) minmax(0, 290fr) minmax(0, 290fr) minmax(0, 290fr); gap: 24px; } .footer__brand img { height: 30px; width: auto; } .footer__tagline { margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 280px; } .footer__title { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; } .footer__links li a { display: block; line-height: 38px; font-size: 14px; color: var(--muted); transition: color var(--t-fast); } .footer__links li a:hover { color: var(--text); } .footer__divider { height: 1px; background: var(--border); margin: 56px 0 32px; } .footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer__copy { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--muted); flex-wrap: wrap; } .footer__badges { display: flex; gap: 8px; flex-wrap: wrap; } .footer__pay { display: flex; align-items: center; gap: 20px; margin-top: 32px; flex-wrap: wrap; } .footer__pay .label { color: var(--faint); } .pay-tiles { display: flex; gap: 8px; flex-wrap: wrap; } .pay-tile { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 32px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .pay-tile--wide { width: auto; padding: 0 10px; } .footer__ruo { border-top: 1px solid var(--border); margin-top: 32px; padding-top: 32px; max-width: 980px; } .footer__ruo-title { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text); } .footer__ruo p { margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--muted); } /* static chip for the legal row ("Bosna i Hercegovina · KM") */ .region-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--muted); } /* WhatsApp float */ .wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: var(--whatsapp); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); transition: transform var(--t-fast) var(--ease); } .wa-float:hover { transform: translateY(-1px); } .wa-float svg { width: 28px; height: 28px; } .wa-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); } .wa-link svg { width: 20px; height: 20px; color: var(--whatsapp); } .wa-link:hover { text-decoration-color: var(--text); } /* --------------------------------------------------------------------- 6. BUTTONS --------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 20px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.5; white-space: nowrap; text-decoration: none; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--text); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease); } .btn svg { width: 18px; height: 18px; flex: none; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } .btn--primary { background: var(--gold); color: var(--on-gold); border-color: var(--gold); } .btn--primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); } .btn--dark { background: var(--surface-2); color: var(--text); border-color: var(--border); } .btn--dark:hover { background: var(--border); border-color: var(--border-strong); } .btn--outline { background: transparent; color: var(--text); border-color: var(--text); } .btn--outline:hover { background: var(--hover-wash); } .btn--outline-soft { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn--outline-soft:hover { border-color: var(--text); } .btn--light { background: var(--light); color: var(--on-light); border-color: var(--light); } .btn--light:hover { background: #fff; border-color: #fff; } .btn--tint { background: var(--gold-tint); color: var(--gold-text); border-color: transparent; } .btn--tint:hover { background: rgba(201,162,39,.22); } .btn--ghost { padding: 12px 0; font-size: 13px; font-weight: 500; color: var(--muted); border-radius: 0; } .btn--ghost:hover { color: var(--text); } .btn--ghost.xxs { font-size: 12px; } .btn--wa { background: var(--whatsapp); color: #fff; border-color: var(--whatsapp); } .btn--wa:hover { background: #2fdc71; } .btn--upper-link { padding: 0; font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; color: var(--text); border-radius: 0; } .btn--upper-link:hover { color: var(--gold-text); } /* sizes */ .btn--sm { padding: 12px 16px; font-size: 13px; } .btn--md { padding: 16px 26px; font-size: 15px; } .btn--lg { padding: 20px 28px; font-size: 16px; min-height: 64px; } .btn--xs { padding: 8px 14px; font-size: 12px; font-weight: 500; } .btn--h48 { padding: 0 24px 0 20px; height: 48px; } .btn--block { width: 100%; } .btn .dot-sep { opacity: .5; margin: 0 2px; } /* icon circle buttons (arrows on tiles, stepper, carousel) */ .btn--icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; border-color: var(--border); color: var(--text); } .btn--icon:hover { border-color: var(--border-strong); background: var(--hover-wash); } .btn--icon.is-light { background: var(--light); color: var(--on-light); border-color: var(--light); } .btn--icon.is-gold { background: var(--gold); color: var(--on-gold); border-color: var(--gold); } .btn--icon.is-44 { width: 44px; height: 44px; } .btn--icon.is-48 { width: 48px; height: 48px; } .btn--icon.is-36 { width: 36px; height: 36px; } .btn--icon svg { width: 18px; height: 18px; } /* segmented toggle (calculator MCG/MG) */ .segment { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); } .segment button { height: 28px; padding: 0 12px; border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .segment button.is-active { background: var(--text); color: var(--on-light); } /* --------------------------------------------------------------------- 7. FORMS — field, input, select, stepper, checkbox, toggle, search --------------------------------------------------------------------- */ .field { display: block; } .field + .field { margin-top: 20px; } .field__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .field__hint { margin-top: 8px; font-size: 13px; color: var(--muted); } .field__error { margin-top: 8px; font-size: 13px; color: var(--danger); } .field.is-error .input, .field.is-error .select { border-color: var(--danger); } .input, .select, .textarea { width: 100%; height: 52px; padding: 0 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-input); color: var(--text); font-size: 15px; transition: border-color var(--t-fast), background var(--t-fast); -webkit-appearance: none; appearance: none; } .textarea { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; } .input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--gold); } .input--pill { border-radius: var(--r-pill); height: 48px; } .input--sm { height: 48px; } .input--r8 { border-radius: 8px; height: 48px; } .input[type=number] { -moz-appearance: textfield; } .input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239B989F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } .select option { background: var(--surface-2); color: var(--text); } /* wrapper for suffix / inner controls */ .input-wrap { position: relative; display: flex; align-items: center; } .input-wrap .input { padding-right: 56px; } .input-wrap__suffix { position: absolute; right: 16px; font-size: 13px; color: var(--muted); pointer-events: none; } .input-wrap__inner { position: absolute; right: 6px; } .input-wrap--icon .input { padding-left: 48px; } .input-wrap__icon { position: absolute; left: 18px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; } /* search */ .search { height: 56px; border-radius: 16px; background: var(--surface-2); } .search.input { padding-left: 52px; } /* quantity stepper */ .stepper { display: inline-flex; align-items: center; justify-content: space-between; width: 126px; height: 52px; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); } .stepper button { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); transition: color var(--t-fast), background var(--t-fast); } .stepper button:hover { color: var(--text); background: var(--hover-wash); } .stepper button svg { width: 16px; height: 16px; } .stepper__val { min-width: 24px; text-align: center; font-size: 16px; font-weight: 600; } .stepper--sm { width: 100px; height: 40px; padding: 0 4px; } .stepper--sm button { width: 30px; height: 30px; } .stepper--sm .stepper__val { font-size: 15px; } .stepper--dark { background: var(--surface-2); border-color: var(--border-strong); } /* checkbox */ .checkbox { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface-2); display: inline-grid; place-content: center; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); } .checkbox::before { content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform var(--t-fast) var(--ease); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F0F10' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } .checkbox:checked { background: var(--gold); border-color: var(--gold); } .checkbox:checked::before { transform: scale(1); } .check-row { display: flex; align-items: center; gap: 12px; font-size: 15px; cursor: pointer; } /* radio (plain) */ .radio { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); display: inline-grid; place-content: center; cursor: pointer; } .radio::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform var(--t-fast); } .radio:checked { border-color: var(--gold); } .radio:checked::before { transform: scale(1); } /* toggle switch */ .toggle { position: relative; display: inline-block; width: 44px; height: 24px; } .toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle__track { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border-strong); transition: background var(--t-fast), border-color var(--t-fast); } .toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform var(--t-fast) var(--ease), background var(--t-fast); } .toggle input:checked + .toggle__track { background: var(--gold); border-color: var(--gold); } .toggle input:checked + .toggle__track::after { transform: translateX(20px); background: var(--on-gold); } /* inline form (email capture in lead block) */ .inline-form { display: flex; gap: 8px; align-items: center; } .inline-form .input { flex: 1; min-width: 0; max-width: 300px; } .form-stack { display: grid; gap: 20px; } .form-legal { font-size: 13px; color: var(--faint); } /* --------------------------------------------------------------------- 8. TAGS / BADGES --------------------------------------------------------------------- */ .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-family: var(--font-head); font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; background: var(--chip); color: var(--text); border: 1px solid transparent; } .tag--outline { background: transparent; border-color: var(--border-strong); color: var(--muted); } .tag--gold { background: var(--gold-tint); color: var(--gold-text); } .tag--gold-outline { background: transparent; border-color: var(--gold-border); color: var(--gold); } .tag--solid { color: var(--on-light); background: var(--light); } .tag--status { background: transparent; color: var(--faint); padding: 0; font-family: var(--font-body); letter-spacing: .14em; font-weight: 500; } .tag--stock { background: transparent; padding: 0; color: var(--muted); font-family: var(--font-body); } .tag--stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); } .tag--oos { background: transparent; border-color: var(--border-strong); color: var(--muted); } .tag--oos::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); } .tag--lg { padding: 8px 12px; } .tag--square { border-radius: 6px; padding: 8px 14px; border-color: var(--border-strong); background: transparent; color: var(--muted); font-family: var(--font-body); font-weight: 500; } .tag--onphoto { background: rgba(15,15,16,.55); color: #fff; border-color: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* category tint tags — */ .tag--cat, .filter { background: var(--tint-pribor); color: var(--text); } [data-cat="metabolizam"] { --cat-tint: var(--tint-metabolizam); --cat-solid: var(--solid-metabolizam); --cat-on: var(--on-metabolizam); } [data-cat="performanse"] { --cat-tint: var(--tint-performanse); --cat-solid: var(--solid-performanse); --cat-on: var(--on-performanse); } [data-cat="oporavak"] { --cat-tint: var(--tint-oporavak); --cat-solid: var(--solid-oporavak); --cat-on: var(--on-oporavak); } [data-cat="san"] { --cat-tint: var(--tint-san); --cat-solid: var(--solid-san); --cat-on: var(--on-san); } [data-cat="koza"] { --cat-tint: var(--tint-koza); --cat-solid: var(--solid-koza); --cat-on: var(--on-koza); } [data-cat="vitalnost"] { --cat-tint: var(--tint-vitalnost); --cat-solid: var(--solid-vitalnost); --cat-on: var(--on-vitalnost); } [data-cat="pribor"] { --cat-tint: var(--tint-pribor); --cat-solid: var(--solid-pribor); --cat-on: var(--on-pribor); } .tag--cat[data-cat], .filter[data-cat] { background: var(--cat-tint); } .tag--solid[data-cat] { background: var(--cat-solid); color: var(--cat-on); } .tile[data-cat], .thumb[data-cat] { background: var(--cat-tint); } /* discount roundel + savings pill + code chip */ .roundel { width: 56px; height: 56px; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 14px; font-weight: 600; } .savings { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-pill); background: var(--gold); color: var(--on-gold); font-size: 13px; font-weight: 600; } .code-chip { display: inline-flex; padding: 3px 8px; border-radius: var(--r-chip); background: var(--gold-tint); color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .chip { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 32px; background: var(--chip); font-size: 14px; color: var(--muted); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } /* store filter pills */ .filters { display: flex; gap: 8px; flex-wrap: wrap; } .filter { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: var(--r-pill); font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text); border: 1px solid transparent; transition: border-color var(--t-fast); } .filter--all { background: var(--surface); border-color: var(--border-strong); } .filter:hover { border-color: var(--border-strong); } .filter.is-active { border-color: var(--gold); color: var(--text); } .filter.is-soon { opacity: .6; } /* --------------------------------------------------------------------- 9. CARDS --------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); } .card--panel { border-radius: var(--r-panel); } .card--s { border-radius: var(--r-card-s); } .card--pad { padding: 24px; } .card--pad-32 { padding: 32px; } .card--shadow { box-shadow: var(--shadow-card); } .card--elevated { background: var(--elevated); } .card--hover { transition: border-color var(--t-fast), transform var(--t-fast) var(--ease); } .card--hover:hover { border-color: var(--border-strong); transform: translateY(-2px); } /* image tile helper (dark tinted) */ .tile { position: relative; overflow: hidden; border-radius: var(--r-tile); background: var(--surface-2); } .tile img { width: 100%; height: 100%; object-fit: cover; } .tile--4x5 { aspect-ratio: 4 / 5; } .tile--1x1 { aspect-ratio: 1; } .tile--3x4 { aspect-ratio: 3 / 4; } .tile--wide { aspect-ratio: 568 / 389; } .tile__corner { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text); display: inline-flex; align-items: center; justify-content: center; } .tile__corner svg { width: 14px; height: 14px; } .tile__badge { position: absolute; top: 16px; left: 16px; } .tile__roundel { position: absolute; top: 12px; right: 12px; } .thumb { flex: none; border-radius: var(--r-tile); background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; display: grid; place-items: center; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .thumb--48 { width: 48px; height: 48px; } .thumb--40 { width: 40px; height: 40px; } .thumb--32 { width: 32px; height: 32px; border-radius: 6px; } .thumb--64x80 { width: 64px; height: 80px; } .placeholder { display: grid; place-items: center; overflow: hidden; padding: 2px; background: var(--surface-2); color: var(--faint); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-align: center; border: 1px dashed var(--border-strong); } /* 9.1 ProductCard */ .pcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 12px; transition: border-color var(--t-fast), transform var(--t-fast) var(--ease); } .pcard:hover { border-color: var(--border-strong); transform: translateY(-2px); } .pcard__img { display: block; } .pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .pcard__title { margin-top: 12px; font-family: var(--font-head); font-size: 17px; font-weight: 600; line-height: 1.3; } .pcard__title small { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--muted); margin-left: 4px; } .pcard__desc { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); min-height: 58px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pcard__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 12px; min-height: 22px; } .pcard__price-row .tag--status { font-size: 10px; } .pcard__price { font-size: 15px; font-weight: 600; white-space: nowrap; } .pcard__price small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 4px; } .pcard__price--tba { font-size: 13px; font-weight: 500; color: var(--muted); } .pcard__cta { margin-top: 12px; } .pcard--oos .pcard__img img { opacity: .55; } .pcard--oos .tile__oos { position: absolute; top: 12px; left: 12px; } .pcard--bundle .pcard__title { font-size: 17px; } /* 9.2 GoalCard */ .gcard { position: relative; display: block; overflow: hidden; border-radius: var(--r-goal); aspect-ratio: 3 / 4; background: var(--surface-2); border: 1px solid var(--border); } .gcard img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-fast) var(--ease); } .gcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,15,16,0) 45%, rgba(15,15,16,.65) 100%); pointer-events: none; } .gcard__badge { position: absolute; z-index: 2; top: 16px; left: 16px; } .gcard__plate { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; padding: 20px 24px; border-radius: 16px; background: rgba(15,15,16,.55); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .gcard__title { font-family: var(--font-head); font-size: 26px; font-weight: 600; line-height: 1.18; letter-spacing: -.02em; color: #fff; } .gcard__sub { margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); } .gcard--soon img { opacity: .45; } .gcard--compact { aspect-ratio: 380 / 475; border-radius: 16px; } .gcard__caption { margin-top: 12px; font-size: 15px; color: var(--muted); } /* 9.3 PromoTile (hero large) */ .promo { position: relative; display: block; overflow: hidden; border-radius: var(--r-goal); aspect-ratio: 598 / 340; background: var(--surface-2); border: 1px solid var(--border); } .promo img { width: 100%; height: 100%; object-fit: cover; } .promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,15,16,.35) 0%, rgba(15,15,16,0) 40%, rgba(15,15,16,.35) 100%); pointer-events: none; } .promo__title { position: absolute; z-index: 2; top: 24px; left: 24px; font-family: var(--font-head); font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: #fff; } .promo__badge { position: absolute; z-index: 2; left: 24px; bottom: 24px; } .promo__arrow { position: absolute; z-index: 2; right: 24px; bottom: 24px; } .promo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } /* 9.4 QuickTile (hero small) */ .qtile { display: flex; align-items: center; gap: 16px; height: 110px; padding: 0 16px 0 20px; border-radius: var(--r-quick); background: var(--surface); border: 1px solid var(--border); transition: border-color var(--t-fast); } .qtile:hover { border-color: var(--border-strong); } .qtile__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--gold-tint); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; flex: none; } .qtile__icon svg { width: 20px; height: 20px; } .qtile__label { flex: 1; font-family: var(--font-head); font-size: 17px; font-weight: 600; } .qtile__arrow { flex: none; } .qtile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } /* 9.5 BundleExtendedCard (xcard) */ .xcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 12px; display: flex; flex-direction: column; } .xcard__media { position: relative; border-radius: 16px; overflow: hidden; background: var(--surface-2); aspect-ratio: 568 / 389; } .xcard__media img { width: 100%; height: 100%; object-fit: cover; } .xcard__media[data-cat] { background: var(--cat-tint); } .xcard__plate { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 24px; border-radius: 16px; background: var(--elevated); border: 1px solid var(--border-strong); box-shadow: var(--shadow-card); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .xcard__total { font-family: var(--font-head); font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: -.02em; margin-top: 8px; } .xcard__plate-right { text-align: right; display: grid; gap: 8px; justify-items: end; } .xcard__strike { font-size: 13px; color: var(--faint); text-decoration: line-through; } .xcard__body { padding: 24px 12px 12px; display: flex; flex-direction: column; flex: 1; } .xcard__title { margin-top: 8px; font-family: var(--font-head); font-size: 23px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; } .xcard__desc { margin-top: 12px; font-size: 15px; color: var(--muted); } .xcard__items { margin-top: 20px; border-top: 1px solid var(--border); } .xcard__cta { margin-top: 24px; } .xcard__ghost { text-align: center; margin-top: 4px; } /* item row (bundle lists, plan card, drawer) */ .irow { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 0; border-bottom: 1px solid var(--border); } .irow__name { font-size: 15px; font-weight: 500; } .irow__meta { margin-top: 2px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .irow__body { flex: 1; min-width: 0; } .irow__price { text-align: right; font-size: 15px; font-weight: 500; } .irow__price small { display: block; font-size: 13px; font-weight: 400; color: var(--faint); text-decoration: line-through; } .irow--76 { min-height: 76px; } /* 9.6 BundlePairCard */ .pair { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; } .pair__media { position: relative; height: 260px; background: var(--surface-2); } .pair__media img { width: 100%; height: 100%; object-fit: cover; } .pair__body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .pair__title { font-family: var(--font-head); font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.18; } .pair__sub { margin-top: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .pair__desc { margin-top: 16px; font-size: 15px; color: var(--muted); padding-bottom: 16px; border-bottom: 1px solid var(--border); } .pair__items { position: relative; } .pair__plus { position: absolute; left: 12px; top: 50%; transform: translate(0,-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: 14px; color: var(--muted); z-index: 1; } .pair__ghost { margin-top: 4px; } .pair__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); margin-top: auto; } .pair__total-label { font-size: 15px; color: var(--muted); } .pair__total-val { font-family: var(--font-head); font-size: 22px; font-weight: 600; } .pair__code { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--muted); } .pair__cta { margin-top: 16px; } .pair__note { margin-top: 12px; font-size: 12px; color: var(--faint); text-align: center; } .pair--oos .pair__media img { opacity: .5; } /* 9.7 PairPromoWide (PDP) */ .pairwide { display: grid; grid-template-columns: 536px minmax(0, 1fr); gap: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 18px; } .pairwide__media { position: relative; border-radius: 16px; overflow: hidden; background: var(--surface-2); min-height: 404px; } .pairwide__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .pairwide__body { padding: 14px 14px 14px 0; display: flex; flex-direction: column; } .pairwide__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); margin-top: auto; } .pairwide__row .pair__total-val { font-size: 24px; } /* 9.8 ReviewCard + UGC */ .review { width: 344px; min-height: 410px; padding: 32px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; } .review__glyph { font-family: var(--font-head); font-size: 28px; line-height: 1; color: var(--gold); font-weight: 700; } .review__stars { display: flex; gap: 2px; margin-top: 16px; color: var(--gold); } .review__stars svg { width: 16px; height: 16px; } .review__text { margin-top: 20px; font-size: 20px; line-height: 1.45; letter-spacing: -.01em; } .review__meta { margin-top: auto; padding-top: 24px; } .review__name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .review__loc { margin-top: 4px; font-size: 13px; color: var(--muted); } .review__note { margin-top: 12px; font-size: 11px; color: var(--faint); display: flex; align-items: center; gap: 6px; } .ugc { width: 380px; height: 410px; border-radius: var(--r-panel); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); } .ugc img { width: 100%; height: 100%; object-fit: cover; } .carousel { position: relative; } .carousel__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__track > * { flex: none; scroll-snap-align: start; } .carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: var(--surface); } .carousel__nav--prev { left: -20px; } .carousel__nav--next { right: -20px; } .carousel__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; } .carousel__dash { width: 24px; height: 4px; border-radius: 2px; background: var(--gold); } /* 9.9 StatBlock */ .stat { border-top: 1px solid var(--border-strong); padding-top: 16px; } .stat__num { font-size: 40px; line-height: 1; letter-spacing: -.02em; } .stat__label { margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .stats-row { display: flex; gap: 32px; } .stats-row .stat { width: 183px; } .stat--inline { border: 0; padding: 0; } .stat--inline .stat__num { font-size: 32px; } .stat--inline .stat__label { margin-top: 8px; font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 400; } .stats-inline { display: flex; gap: 40px; flex-wrap: wrap; } .stat--card { border: 1px solid var(--border); border-radius: var(--r-card-s); background: var(--surface); padding: 24px; min-height: 96px; } .stat--card .stat__label { margin: 0 0 8px; font-size: 10px; } .stat--card .stat__num { font-size: 32px; } .stat--card .stat__num.accent { color: var(--gold-text); } /* 9.10 TrustCard */ .trust { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card-s); padding: 28px; min-height: 222px; } .trust__icon, .icon-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--gold-tint); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; flex: none; } .trust__icon svg, .icon-circle svg { width: 18px; height: 18px; } .icon-circle--48 { width: 48px; height: 48px; } .icon-circle--sq { border-radius: 8px; width: 44px; height: 44px; } .icon-circle__abbr { font-size: 12px; font-weight: 600; letter-spacing: .02em; } .trust__title { margin-top: 20px; font-family: var(--font-head); font-size: 20px; font-weight: 600; letter-spacing: -.01em; } .trust__title a { text-decoration: none; } .trust__title a::after { content: " →"; } .trust__body { margin-top: 10px; font-size: 15px; color: var(--muted); } /* 9.11 TrustStrip (bundle) */ .trust-strip { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .trust-strip__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 96px; } .trust-strip__cell { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-left: 1px solid var(--border); } .trust-strip__cell:first-child { border-left: 0; padding-left: 0; } .trust-strip__title { font-size: 15px; font-weight: 600; } .trust-strip__sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; } /* 9.12 FeatureGrid (PDP trust box) */ .fgrid { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px; } .fgrid__items { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; } .fgrid__item { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; } .fgrid__foot { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--surface-2); font-size: 15px; font-weight: 500; } .fgrid__foot .icon-circle { width: 28px; height: 28px; } .fgrid__foot .icon-circle svg { width: 14px; height: 14px; } /* 9.13 COA link card */ .coa-card { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 12px; border-radius: var(--r-card-s); background: var(--surface); border: 1px solid var(--border); transition: border-color var(--t-fast); } .coa-card:hover { border-color: var(--border-strong); } .coa-card__thumb { width: 48px; height: 48px; border-radius: 6px; border: 1px solid var(--border); background: #ECEAE4; display: grid; place-items: center; color: #6F6D74; flex: none; } .coa-card__thumb svg { width: 22px; height: 22px; } .coa-card__body { flex: 1; } .coa-card__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); } .coa-card__title { margin-top: 2px; font-size: 15px; font-weight: 500; } .coa-card__arrow { color: var(--muted); } /* 9.14 MechanismCard, SpecStrip, CheckList */ .mech { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card-s); padding: 20px; } .mech__title { margin-top: 14px; font-family: var(--font-head); font-size: 17px; font-weight: 600; } .mech__body { margin-top: 8px; font-size: 15px; color: var(--muted); } .spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-input); overflow: hidden; } .spec--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .spec__cell { padding: 16px 20px; border-left: 1px solid var(--border); } .spec__cell:first-child { border-left: 0; } .spec__label { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .spec__val { margin-top: 6px; font-size: 15px; font-weight: 500; } .checklist { display: grid; gap: 20px; } .checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; } .checklist li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background-color: var(--gold-tint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px; } .checklist--tight { gap: 12px; } /* 9.15 FAQ accordion (details/summary) */ .faq { display: grid; gap: 8px; } .faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card-s); } .faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; font-family: var(--font-head); font-size: 17px; font-weight: 600; } .faq__item summary::-webkit-details-marker { display: none; } .faq__chev { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); transition: transform var(--t-fast) var(--ease); } .faq__chev svg { width: 14px; height: 14px; } .faq__item[open] .faq__chev { transform: rotate(180deg); } .faq__body { padding: 0 24px 20px; font-size: 15px; color: var(--muted); } /* COA library accordion row */ .coa-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card-s); } .coa-row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 300px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto 40px; align-items: center; gap: 24px; padding: 24px 28px; min-height: 92px; } .coa-row summary::-webkit-details-marker { display: none; } .coa-row__name { font-family: var(--font-head); font-size: 20px; font-weight: 600; } .coa-row__lots { margin-top: 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .coa-row__label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 600; } .coa-row__val { margin-top: 4px; font-size: 15px; } .coa-row__val--purity { font-family: var(--font-head); font-size: 24px; font-weight: 600; color: var(--gold-text); } .coa-row__body { padding: 0 28px 24px; } .coa-lot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px; border-radius: 8px; background: var(--surface-2); font-size: 13px; } .coa-lot__code { font-weight: 600; letter-spacing: .04em; } .coa-lot__pass { color: var(--success); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .coa-lot__methods { display: flex; gap: 6px; } .coa-lot__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; } .coa-row[open] .faq__chev { transform: rotate(180deg); } /* 9.16 Table */ .table-wrap { border: 1px solid var(--border); border-radius: var(--r-card-s); overflow: hidden; background: var(--surface); } .table-wrap--scroll { overflow-x: auto; } .table th { background: var(--surface-2); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 14px 16px; } .table td { height: 46px; padding: 0 16px; font-size: 15px; color: var(--text); border-top: 1px solid var(--border); } .table tbody tr:nth-child(even) td { background: rgba(255,255,255,.015); } .table td:first-child { font-weight: 500; } .table td.is-accent, .table .is-accent { color: var(--gold-text); font-weight: 600; font-size: 14px; } .table--presets tbody tr { cursor: pointer; transition: background var(--t-fast); } .table--presets tbody tr:hover td { background: var(--hover-wash); } .table--presets tbody tr.is-active td { background: var(--gold-tint-2); } .table__foot { margin-top: 12px; font-size: 12px; color: var(--faint); } /* 9.17 StepList (about) / ValueGrid / Timeline */ .steps { border-top: 1px solid var(--border); } .steps__row { display: grid; grid-template-columns: 120px 260px minmax(0, 1fr); align-items: center; min-height: 88px; padding: 16px 0; border-bottom: 1px solid var(--border); gap: 16px; } .steps__num { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--gold-text); } .steps__name { font-family: var(--font-head); font-size: 24px; font-weight: 600; letter-spacing: -.02em; } .steps__desc { font-size: 15px; color: var(--muted); } .values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .values__item { border-top: 1px solid var(--border-strong); padding-top: 20px; } .values__title { font-family: var(--font-head); font-size: 24px; font-weight: 600; letter-spacing: -.02em; } .values__body { margin-top: 10px; font-size: 15px; color: var(--muted); } .timeline { position: relative; display: grid; gap: 24px; padding-left: 28px; } .timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--border-strong); } .timeline__item { position: relative; } .timeline__item::before { content: ""; position: absolute; left: -28px; top: 5px; width: 15px; height: 15px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-strong); } .timeline__item.is-done::before { background: var(--gold); border-color: var(--gold); } .timeline__item.is-current::before { border-color: var(--gold); box-shadow: inset 0 0 0 3px var(--surface); background: var(--gold); } .timeline__title { font-size: 15px; font-weight: 600; } .timeline__meta { margin-top: 2px; font-size: 13px; color: var(--muted); } /* 9.18 Quiz banner (store) */ .quiz-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 340px; max-width: 100%; min-height: 72px; padding: 14px 20px; border-radius: var(--r-card-s); background: var(--surface); border: 1px solid var(--border); transition: border-color var(--t-fast); } .quiz-banner:hover { border-color: var(--border-strong); } .quiz-banner__eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .quiz-banner__title { margin-top: 2px; font-size: 15px; font-weight: 600; } /* 9.19 Lead-magnet / email block + book */ .lead-block { display: grid; grid-template-columns: 424px minmax(0, 1fr); gap: 120px; align-items: center; } .book { width: 273px; height: 414px; padding: 24px; border-radius: 2px 7px 7px 2px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-float); display: flex; flex-direction: column; margin: 0 auto; } .book__pub { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 600; } .book__logo { margin-top: 24px; height: 22px; width: auto; } .book__title { margin-top: auto; font-family: var(--font-head); font-size: 26px; font-weight: 700; text-transform: uppercase; line-height: 1.1; letter-spacing: -.01em; } .book__badge { margin-top: 16px; align-self: flex-start; } /* 9.20 Hero (home) */ .hero__title { margin-top: 16px; } .hero__rule { width: 56px; height: 2px; background: var(--gold); margin-top: 20px; } .hero__sub { margin-top: 20px; font-size: 15px; color: var(--muted); max-width: 600px; } .hero__wa { margin-top: 16px; } .hero__promos { margin-top: 32px; } .hero__quick { margin-top: 12px; } /* bundle hero */ .bhero { display: grid; grid-template-columns: minmax(0, 598fr) minmax(0, 562fr); gap: 48px; align-items: center; } .bhero__media { position: relative; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 562 / 700; background: var(--surface-2); border: 1px solid var(--border); } .bhero__media img { width: 100%; height: 100%; object-fit: cover; } .bhero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,15,16,0) 55%, rgba(15,15,16,.7) 100%); } .bhero__caption { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; color: #fff; } .bhero__caption .eyebrow { color: rgba(255,255,255,.7); } .bhero__caption-title { margin-top: 8px; font-family: var(--font-head); font-size: 26px; font-weight: 600; } .bhero__caption-price { margin-top: 6px; font-size: 17px; } .icon-bullets { display: grid; gap: 16px; } .icon-bullets li { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--muted); } .icon-bullets li strong { color: var(--text); font-weight: 600; } .btn-row { display: flex; gap: 12px; flex-wrap: wrap; } /* closing CTA */ .cta-center { text-align: center; padding: 96px 0; } .cta-center__btns { display: inline-grid; gap: 16px; margin-top: 40px; justify-items: center; } /* breadcrumb */ .crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); padding: 24px 0 8px; } .crumb:hover { color: var(--text); } /* --------------------------------------------------------------------- 10. PDP — layout + buy box + panels --------------------------------------------------------------------- */ .pdp { display: grid; grid-template-columns: minmax(0, 612fr) minmax(0, 532fr); gap: 64px; align-items: start; } .pdp__gallery { border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 612 / 762; background: var(--surface-2); border: 1px solid var(--border); position: relative; } .pdp__gallery img { width: 100%; height: 100%; object-fit: cover; } .pdp__gallery[data-cat] { background: var(--cat-tint); } .pdp__aside { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 16px; min-width: 0; } .pdp__aside > * { min-width: 0; max-width: 100%; } .pdp__eyebrow { margin-bottom: 12px; } .pdp__title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .pdp__dose { font-family: var(--font-body); font-size: 22px; font-weight: 400; color: var(--muted); letter-spacing: 0; } .pdp__block { margin-top: 48px; } .pdp__block .h4 + p { margin-top: 16px; color: var(--muted); } .pdp__disclaimer { margin-top: 40px; font-size: 12px; color: var(--faint); } .buybox { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 24px; box-shadow: var(--shadow-card); } .buybox__title { padding-bottom: 20px; border-bottom: 1px solid var(--border); } .buybox__group { margin-top: 20px; } .buybox__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .buybox__qty { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .buybox__hint { font-size: 13px; color: var(--muted); max-width: 240px; margin-top: 4px; } .buybox__cta { margin-top: 24px; } .micro-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; text-align: center; } .micro-trust span { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); line-height: 1.5; } .stock-line { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0 4px; } .stock-line::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex: none; } .stock-line--oos::before { background: var(--faint); } /* option box (radio-as-card) */ .opt { display: block; width: 100%; padding: 12px 14px; border-radius: var(--r-input); border: 1px solid var(--border); background: var(--surface); text-align: center; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); } .opt:hover { border-color: var(--border-strong); } .opt.is-selected { background: var(--surface-2); border-color: var(--gold); } .opt__title { font-size: 15px; font-weight: 600; } .opt__sub { margin-top: 2px; font-size: 11px; color: var(--muted); } .opt__sub--gold { color: var(--gold-text); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; } .opt.is-disabled { opacity: .5; cursor: not-allowed; } .opt--sm { padding: 8px 12px; } .opt-list { display: grid; gap: 8px; } .opt-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .opt-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* what's in the box panel */ .boxp { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 24px; } .boxp__grid { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .boxp__cell { background: var(--surface); padding: 16px; } .boxp__cell-head { display: flex; align-items: center; gap: 8px; color: var(--faint); } .boxp__cell-head svg { width: 16px; height: 16px; } .boxp__cell-label { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .boxp__cell-val { margin-top: 8px; font-size: 14px; font-weight: 500; } .boxp__cell-help { margin-top: 4px; font-size: 12px; color: var(--muted); } .boxp__addons { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); } .boxp__addons-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .boxp__addons-note { margin-top: 8px; font-size: 13px; color: var(--muted); } .addons { margin-top: 12px; display: grid; gap: 8px; } /* add-on row */ .addon { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px; border-radius: var(--r-input); border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color var(--t-fast); } .addon:hover { border-color: var(--border-strong); } .addon.is-checked, .addon:has(.checkbox:checked) { border-color: var(--gold-border); } .addon__body { flex: 1; min-width: 0; } .addon__name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; } .addon__name .tag { padding: 2px 8px; font-size: 10px; } .addon__desc { margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .addon__price { flex: none; font-size: 15px; font-weight: 600; } /* --------------------------------------------------------------------- 11. CART DRAWER --------------------------------------------------------------------- */ .drawer-overlay { position: fixed; inset: 0; z-index: 60; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease); } .drawer { position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-drawer); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 280ms var(--ease); } body.drawer-open .drawer { transform: none; } body.drawer-open .drawer-overlay { opacity: 1; pointer-events: auto; } body.drawer-open { overflow: hidden; } .drawer--static { position: relative; transform: none; width: 100%; max-width: 420px; height: 760px; box-shadow: none; border: 1px solid var(--border); border-radius: var(--r-card-s); overflow: hidden; } .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 16px; } .drawer__title { display: flex; align-items: baseline; gap: 12px; } .drawer__count { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .drawer__close { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); } .drawer__close:hover { color: var(--text); background: var(--hover-wash); } .drawer__body { flex: 1; overflow-y: auto; padding: 0 24px; } .drawer__section { padding: 20px 0; border-top: 1px solid var(--border); } .drawer__section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .drawer__foot { border-top: 1px solid var(--border); padding: 20px 24px 24px; background: var(--surface); } .drawer__ship { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); } .drawer__subtotal { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 0 16px; } .drawer__subtotal-val { font-family: var(--font-head); font-size: 24px; font-weight: 600; } .drawer__eta { margin-top: 12px; text-align: center; font-size: 13px; color: var(--muted); } .drawer__empty { padding: 64px 0; text-align: center; color: var(--muted); font-size: 15px; } /* line item */ .line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); } .line__name { font-size: 15px; font-weight: 600; } .line__meta { margin-top: 2px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .line__price { margin-top: 6px; font-size: 15px; } .line__chip { margin-top: 8px; display: inline-flex; padding: 3px 8px; border-radius: 6px; background: var(--gold-tint); color: var(--gold); font-size: 11px; font-weight: 500; } .line__right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .line__remove { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .line__remove:hover { color: var(--text); } /* upsell row */ .upsell { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border-radius: var(--r-input); background: var(--surface-2); border: 1px solid var(--border); } .upsell + .upsell { margin-top: 8px; } .upsell__body { flex: 1; min-width: 0; } .upsell__name { font-size: 14px; font-weight: 500; } .upsell__name small { font-size: 11px; color: var(--muted); margin-left: 6px; font-weight: 400; } .upsell__desc { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .upsell .btn { flex: none; background: var(--surface); border-color: var(--border-strong); } /* progress bar (free shipping) */ .progress { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; margin-top: 10px; } .progress__fill { height: 100%; background: var(--gold); border-radius: 2px; width: var(--p, 0%); transition: width 300ms var(--ease); } /* sticky mobile ATC bar */ .sticky-atc { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; height: 64px; padding: 8px 20px; background: var(--bg-deep); border-top: 1px solid var(--border); display: none; align-items: center; gap: 12px; } .sticky-atc .btn { flex: 1; } .sticky-atc--static { position: relative; display: flex; border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 390px; } /* --------------------------------------------------------------------- 12. QUIZ --------------------------------------------------------------------- */ .quiz { max-width: 648px; margin: 0 auto; padding: 56px 0 96px; } .quiz__progress { height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; } .quiz__progress-fill { height: 100%; background: var(--gold); width: var(--p, 20%); transition: width 300ms var(--ease); } .quiz__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12px; color: var(--muted); } .quiz__eyebrow { margin-top: 40px; } .quiz__title { margin-top: 12px; } .quiz__help { margin-top: 12px; font-size: 15px; color: var(--muted); } .quiz__options { margin-top: 32px; display: grid; gap: 8px; } .qopt { display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 20px; border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--border); cursor: pointer; text-align: left; width: 100%; transition: border-color var(--t-fast), background var(--t-fast); } .qopt:hover { border-color: var(--border-strong); } .qopt.is-selected { border-color: var(--gold); background: var(--surface-2); } .qopt__body { flex: 1; } .qopt__title { font-family: var(--font-head); font-size: 17px; font-weight: 600; } .qopt__sub { margin-top: 4px; font-size: 13px; color: var(--muted); } .qopt__arrow { color: var(--faint); flex: none; width: 18px; height: 18px; } .qopt--text { min-height: 64px; padding: 16px 20px; } .qopt--dark { background: var(--band); } .qchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } .qchip { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: transparent; font-size: 15px; font-weight: 500; color: var(--text); transition: border-color var(--t-fast), background var(--t-fast); } .qchip::after { content: "+"; color: var(--muted); font-size: 16px; } .qchip:hover { border-color: var(--text); } .qchip.is-on { border-color: var(--gold); background: var(--gold-tint); color: var(--text); } .qchip.is-on::after { content: "✓"; color: var(--gold); } .quiz__actions { margin-top: 32px; display: flex; justify-content: flex-end; gap: 12px; } /* result plan card */ .plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 32px; } .plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .plan__title { margin-top: 8px; } .plan__sub { margin-top: 8px; font-size: 15px; color: var(--muted); } .plan__checks { margin-top: 24px; } .plan__items { margin-top: 24px; border-top: 1px solid var(--border); } .plan__supply { margin-top: 24px; } .plan__total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); } .plan__cta { margin-top: 20px; } .plan__restart { margin-top: 24px; text-align: center; } /* --------------------------------------------------------------------- 13. CALCULATOR --------------------------------------------------------------------- */ .calc { display: grid; grid-template-columns: minmax(0, 556fr) minmax(0, 652fr); border: 1px solid var(--border); border-radius: var(--r-panel); overflow: hidden; background: var(--surface); } .calc__inputs { padding: 32px; background: var(--surface-2); border-right: 1px solid var(--border); } .calc__inputs .input, .calc__inputs .select { background: var(--surface); } .calc__inputs .h4 { margin-bottom: 28px; } .calc__results { padding: 32px; } .rtiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .rtile { padding: 20px; border-radius: var(--r-input); border: 1px solid var(--border); background: var(--surface); } .rtile.is-primary { border-color: var(--gold); } .rtile__label { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .rtile__val { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; } .rtile__num { font-family: var(--font-head); font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: -.02em; } .rtile.is-primary .rtile__num { color: var(--gold); } .rtile__unit { font-size: 13px; color: var(--muted); } .calc__math { grid-column: 1 / -1; padding: 32px; border-top: 1px solid var(--border); background: var(--bg); } .calc__math-grid { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; font-size: 12px; line-height: 2; color: var(--muted); } .calc__math-grid .accent { color: var(--gold); } .calc__note { margin-top: 16px; font-size: 13px; color: var(--faint); max-width: 560px; } .presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .preset { padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); font-size: 12px; font-weight: 500; color: var(--muted); transition: border-color var(--t-fast), color var(--t-fast); } .preset:hover { color: var(--text); } .preset.is-active { border-color: var(--gold); color: var(--gold); } /* syringe scale bar (U-100) — set marker with style="--u:5" (0–100) */ .syringe { --u: 5; margin-top: 40px; padding: 0 36px 0 12px; } .syringe__row { display: flex; align-items: center; gap: 0; } .syringe__cap { width: 12px; height: 60px; border-radius: 3px; background: var(--border-strong); flex: none; } .syringe__barrel { position: relative; flex: 1; height: 44px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface-2); overflow: hidden; } .syringe__ticks { position: absolute; inset: 0; background-image: repeating-linear-gradient(to right, var(--border-strong) 0 1px, transparent 1px 10%); background-size: 100% 100%; background-position: 0 0; opacity: .9; } .syringe__ticks::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background-image: repeating-linear-gradient(to right, var(--border-strong) 0 1px, transparent 1px 2%); } .syringe__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--u) * 1%); background: var(--gold-tint); } .syringe__marker { position: absolute; top: -1px; bottom: -1px; left: calc(var(--u) * 1%); width: 3px; margin-left: -1px; background: var(--gold); } .syringe__needle { width: 72px; height: 2px; background: var(--border-strong); flex: none; } .syringe__needle::before { content: ""; display: block; width: 14px; height: 10px; margin-top: -4px; background: var(--border-strong); border-radius: 0 3px 3px 0; } .syringe__scale { display: flex; justify-content: space-between; margin: 10px 84px 0 12px; font-size: 13px; color: var(--muted); } .syringe__caption { margin-top: 20px; font-size: 14px; color: var(--muted); text-align: center; } /* guide CTA panel */ .guide-panel { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--border); } .guide-panel__title { font-family: var(--font-head); font-size: 32px; font-weight: 600; letter-spacing: -.02em; } .guide-panel__body { margin-top: 12px; font-size: 17px; color: var(--muted); max-width: 560px; } /* --------------------------------------------------------------------- 14. MODAL / POPUP --------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; padding: 20px; } .modal.is-open { display: flex; } .modal__overlay { position: absolute; inset: 0; background: var(--overlay); } .modal__card { position: relative; width: 100%; max-width: 480px; padding: 32px; border-radius: var(--r-panel); background: var(--elevated); border: 1px solid var(--border-strong); box-shadow: var(--shadow-float); } .modal__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); } .modal__close:hover { color: var(--text); border-color: var(--border-strong); } .modal__title { margin-top: 12px; } .modal__sub { margin-top: 12px; font-size: 15px; color: var(--muted); } .modal__form { margin-top: 24px; } .modal__legal { margin-top: 12px; font-size: 12px; color: var(--faint); } .modal--static { position: relative; display: flex; padding: 0; inset: auto; } .modal--static .modal__overlay { display: none; } /* --------------------------------------------------------------------- 15. UTILITY PAGES — track order, account, terms (prose) --------------------------------------------------------------------- */ .utility { max-width: 468px; margin: 0 auto; } .utility__title { margin-bottom: 12px; } .utility__intro { font-size: 15px; color: var(--muted); margin-bottom: 32px; } .utility__foot { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .utility__foot a { text-decoration: underline; text-underline-offset: 3px; color: var(--text); } .acct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; } .acct__card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 24px; } .acct__card .h3 { font-size: 24px; margin-bottom: 20px; } .acct__row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; } .acct__link { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; } .prose { max-width: 468px; margin: 0 auto; } .prose > * + * { margin-top: 16px; } .prose h1 { margin-bottom: 24px; } .prose h2 { font-family: var(--font-body); font-size: 17px; font-weight: 500; color: var(--text); margin-top: 40px; } .prose h3 { font-family: var(--font-body); font-size: 15px; font-weight: 600; margin-top: 24px; } .prose p, .prose li { font-size: 15px; line-height: 1.5; color: var(--muted); } .prose ul { list-style: disc; padding-left: 20px; } .prose ol { list-style: decimal; padding-left: 20px; } .prose a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .prose a:hover { color: var(--gold); } .prose strong { color: var(--text); } .prose--wide { max-width: 720px; } /* --------------------------------------------------------------------- 16. RESPONSIVE — 1024 / 768 / 640 --------------------------------------------------------------------- */ .hide-lg { display: none; } @media (max-width: 1024px) { .header__nav { display: none; } .burger { display: inline-flex; } .header__cod { display: none; } .hide-lg { display: revert; } .show-lg { display: none !important; } .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 24px; } .pdp { grid-template-columns: minmax(0, 1fr); gap: 40px; } .pdp__aside { position: static; } .pairwide { grid-template-columns: minmax(0, 1fr); } .pairwide__media { min-height: 260px; } .pairwide__body { padding: 8px; } .lead-block { grid-template-columns: minmax(0, 1fr); gap: 48px; text-align: center; } .lead-block .inline-form { justify-content: center; } .lead-block .checklist { text-align: left; max-width: 480px; margin: 0 auto; } .lead-block .eyebrow { justify-content: center; } .bhero { grid-template-columns: minmax(0, 1fr); } .calc { grid-template-columns: minmax(0, 1fr); } .calc__inputs { border-right: 0; border-bottom: 1px solid var(--border); } .coa-row summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .steps__row { grid-template-columns: 80px minmax(0, 1fr); } .steps__desc { grid-column: 2; } .values { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .carousel__nav { display: none; } .stats-row .stat { width: auto; flex: 1; } } @media (max-width: 768px) { :root { --gutter: 20px; } .section, .section--home, .section--bundle, .section--pdp { padding: 64px 0; } .section--store, .section--reviews { padding: 48px 0; } .grid--4, .grid--3, .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .grid--2.grid--stack { grid-template-columns: minmax(0, 1fr); } .grid--stack-md { grid-template-columns: minmax(0, 1fr) !important; } .sec-head--split { grid-template-columns: minmax(0, 1fr); } .sec-head--split .sec-head__sub { justify-self: start; text-align: left; } .sec-head--row { flex-direction: column; align-items: flex-start; } .promo-grid { gap: 8px; } .promo { aspect-ratio: 170 / 230; } .promo__title { font-size: 20px; top: 16px; left: 16px; } .promo__badge { display: none; } .promo__arrow { right: 12px; bottom: 12px; } .qtile-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } .qtile { height: 90px; } .pcard__cta { white-space: normal; } .pcard__price-row { flex-wrap: wrap; } .pcard__price small { display: none; } .pcard__title { font-size: 16px; } .trust-strip__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; } .trust-strip__cell { border-left: 0; border-top: 1px solid var(--border); padding: 12px 0; min-height: 64px; } .trust-strip__cell:first-child { border-top: 0; } .spec { grid-template-columns: minmax(0, 1fr); } .spec__cell { border-left: 0; border-top: 1px solid var(--border); } .spec__cell:first-child { border-top: 0; } .boxp__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .opt-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer { padding: 64px 0 40px; } .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footer__brand { grid-column: 1 / -1; } .footer__legal { flex-direction: column; align-items: flex-start; } .sticky-atc { display: flex; } body.has-sticky-atc { padding-bottom: 64px; } .stats-row { flex-direction: column; gap: 24px; } .stats-inline { gap: 24px; } .rtiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .calc__inputs, .calc__results, .calc__math { padding: 24px; } .calc__math-grid { grid-template-columns: minmax(0, 1fr); } .table .hide-sm { display: none; } .guide-panel { flex-direction: column; align-items: stretch; padding: 24px; } .guide-panel .btn { width: 100%; } .acct { grid-template-columns: minmax(0, 1fr); } .quiz { padding: 40px 0 64px; } .review { width: 300px; min-height: 360px; padding: 24px; } .review__text { font-size: 18px; } .ugc { width: 300px; height: 360px; } .gcard-scroll, .xcard-scroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); } .gcard-scroll::-webkit-scrollbar, .xcard-scroll::-webkit-scrollbar { display: none; } .gcard-scroll > *, .xcard-scroll > * { flex: none; scroll-snap-align: start; } .gcard-scroll .gcard { width: 300px; aspect-ratio: 300 / 370; } .xcard-scroll .xcard { width: 340px; } .drawer { width: 100vw; } .line { grid-template-columns: 56px minmax(0, 1fr) auto; } .cta-center { padding: 64px 0; } .hero__promos { margin-top: 24px; } .h3 { font-size: 22px; } .h4 { font-size: 20px; } } @media (max-width: 640px) { .announce { line-height: 1.5; padding: 6px 16px; } .btn--lg { padding: 16px 20px; min-height: 56px; } .buybox { padding: 20px; } .buybox__qty > div { min-width: 0; flex: 1; } .buybox__hint { max-width: none; } .pcard--oos .tile__corner { display: none; } .addon__name { flex-wrap: wrap; row-gap: 4px; } .addon__price { font-size: 14px; } .micro-trust { gap: 8px; } .xcard__plate { padding: 16px; left: 12px; right: 12px; bottom: 12px; flex-wrap: wrap; } .xcard__total { font-size: 26px; } .pair__media { height: 200px; } .modal__card { padding: 24px; } .steps__row { grid-template-columns: minmax(0, 1fr); gap: 4px; } .steps__desc { grid-column: 1; } .values { grid-template-columns: minmax(0, 1fr); } .inline-form { flex-direction: column; align-items: stretch; } .inline-form .input { max-width: none; } .boxp__grid { grid-template-columns: minmax(0, 1fr); } .coa-row summary { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px; } .pay-tiles { gap: 6px; } .quiz-banner { width: 100%; } .stat__num { font-size: 32px; } .syringe { padding: 0 24px 0 8px; } .syringe__needle { width: 40px; } .syringe__scale { margin-right: 52px; } } /* build additions */ /* generic photo placeholder (lifestyle/UGC fotke koje još nemamo) */ .ph { display: grid; place-items: center; width: 100%; height: 100%; min-height: 80px; background: var(--surface-2); color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-align: center; border: 1px dashed var(--border-strong); border-radius: inherit; } .ph--4x5 { aspect-ratio: 4 / 5; } .ph--3x4 { aspect-ratio: 3 / 4; } .ph--wide { aspect-ratio: 568 / 389; } .ph--1x1 { aspect-ratio: 1; } .ugc, .pair__media, .pairwide__media, .xcard__media { position: relative; } .promo .ph, .gcard .ph, .ugc .ph, .xcard__media .ph, .pair__media .ph, .pairwide__media .ph, .bhero__media .ph, .pdp__gallery .ph, .tile .ph { border: 0; border-radius: 0; position: absolute; inset: 0; height: 100%; } /* drawer: rows above total (međuzbroj / popust) */ .drawer__rows { margin-top: 20px; display: grid; gap: 6px; font-size: 14px; color: var(--muted); } .drawer__row { display: flex; justify-content: space-between; gap: 12px; } .drawer__row--discount span:last-child { color: var(--gold); } .drawer__rows + .drawer__subtotal { margin-top: 12px; } .drawer__h { font-size: 24px; } .drawer__cta.is-disabled { opacity: .5; pointer-events: none; } .drawer__ship.is-free { color: var(--success); } /* quiz */ .quiz__back { font-size: 12px; color: var(--muted); } .quiz__back:hover { color: var(--text); } .quiz__meta .u-link { text-decoration-color: var(--border-strong); } .opt-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .plan__items .irow.is-oos .thumb img { opacity: .5; } .plan__items .irow__price small s { color: var(--faint); } .plan__restart .u-link { color: var(--muted); } /* modal */ .modal__error { font-size: 13px; color: var(--danger); } .modal__error:empty { display: none; } /* track result */ .track-result { margin-top: 32px; padding: 24px; border: 1px solid var(--border); border-radius: var(--r-card-s); background: var(--surface); } .track-result--invalid .track-result__title, .track-result--notfound .track-result__title { color: var(--text); } /* store */ .store-empty { grid-column: 1 / -1; padding: 40px 0; } .store-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; } .store-head__right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } @media (max-width: 768px) { .store-head { grid-template-columns: minmax(0, 1fr); } .store-head__right { align-items: stretch; } .opt-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .review { min-height: 0; } } /* header badge hidden at 0 */ .icon-btn__count.is-empty { display: none; } /* chip marquee (reviews — jedini dozvoljeni marquee, uu pattern) */ .chip-marquee { overflow: hidden; margin-top: 48px; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .chip-marquee__row { display: flex; gap: 8px; width: max-content; animation: chip-scroll 60s linear infinite; } .chip-marquee__row + .chip-marquee__row { margin-top: 8px; animation-direction: reverse; animation-duration: 75s; } .chip-marquee .chip { white-space: nowrap; } @keyframes chip-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .chip-marquee__row { animation: none; } } /* checkout */ .checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: start; } .checkout__summary { position: sticky; top: calc(var(--header-h) + 24px); } .checkout__rows { margin-top: 16px; border-top: 1px solid var(--border); } .checkout__row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--muted); } .checkout__row--total { font-size: 16px; color: var(--text); font-weight: 600; } .checkout__row--total .pair__total-val { font-size: 24px; } .form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .form-grid .field + .field { margin-top: 0; } .form-grid--full { grid-column: 1 / -1; } .order-no { font-family: var(--font-head); font-size: 40px; font-weight: 600; letter-spacing: -.02em; color: var(--gold); } @media (max-width: 1024px) { .checkout { grid-template-columns: minmax(0, 1fr); } .checkout__summary { position: static; } } @media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } } /* pdp buy box extras */ .buybox__tier-note { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; } .buybox__tier-note:empty { display: none; } .notify-inline { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } .notify-inline .field + .field { margin-top: 12px; } .pdp__hero-mobile { display: none; } @media (max-width: 1024px) { .pdp__gallery-desktop { display: none; } .pdp__hero-mobile { display: block; } } /* verified band pattern (faint lines, no glow) */ .verified-band { position: relative; overflow: hidden; } .review__title { margin-top: 16px; font-family: var(--font-head); font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .review__title + .review__text { margin-top: 8px; font-size: 18px; } .grid--center { align-items: center; } .grid--start { align-items: start; } .lead-block .lead { font-size: 17px; } .buybox__qty .buybox__label { margin-bottom: 0; } .quiz-exit { padding-bottom: 64px; } .pdp__coa-text { margin-top: 8px; font-size: 12px; color: var(--faint); } .mb-0 { margin-bottom: 0; } /* mobile overflow guards */ .addon, .addon__body { min-width: 0; } .addon__name { flex-wrap: wrap; row-gap: 4px; } .addon__price { white-space: normal; text-align: right; max-width: 40%; } .sticky-atc .btn { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .buybox__cta { min-width: 0; white-space: normal; } /* ===== LIGHT THEME: tamne trake (kao uu "dark sections") ===== */ .band--contrast, .band--deep, .footer, .sticky-atc, .announce { --text: #FFFFFF; --muted: rgba(255,255,255,.72); --faint: rgba(255,255,255,.5); --border: rgba(255,255,255,.12); --border-strong: rgba(255,255,255,.25); --chip: rgba(255,255,255,.08); --hover-wash: rgba(255,255,255,.06); --gold-text: #E3C25A; --light: #FFFFFF; --on-light: #0A0A0A; color: var(--text); } .band--contrast { background: #0A0A0A; border-color: rgba(255,255,255,.12); } /* kartice unutar tamnih traka ostaju bijele s tamnim tekstom (uu: bijele bundle kartice na crnom) */ .band--contrast :is(.xcard, .pair, .card, .stat--card, .review, .trust, .pcard, .plan) { --text: #0A0A0A; --muted: #56585C; --faint: #9CA0A6; --border: #E5E7EB; --border-strong: #D4D6DB; --chip: rgba(10,10,10,.05); --gold-text: #8A6D12; --surface: #FFFFFF; --surface-2: #F6F7F9; color: var(--text); background: #FFFFFF; } .band--contrast .btn--outline, .band--deep .btn--outline { border-color: rgba(255,255,255,.35); color: #fff; } .band--contrast .btn--light, .band--deep .btn--light { background: #fff; color: #0A0A0A; } .eyebrow--light { color: rgba(255,255,255,.7); } .ph { background: #EFECE6; color: #9CA0A6; border: 1px dashed #D4D6DB; } .tile, .xcard__media, .pcard__media { background: var(--surface-2); } .header__logo img, .nav-mobile .header__logo img { filter: none; mix-blend-mode: normal; } /* light theme fixes */ .book { background: #0A0A0A; color: #FFFFFF; border-color: rgba(255,255,255,.1); } .book .tag, .book .badge { color: #FFFFFF; border-color: rgba(255,255,255,.3); background: transparent; } .book img { mix-blend-mode: screen; } .footer .tag, .band--deep .tag, .footer .badge, .band--deep .badge { background: rgba(255,255,255,.08); color: #FFFFFF; border-color: rgba(255,255,255,.22); } .footer .tag--solid { background: #FFFFFF; color: #0A0A0A; } .footer .pay-tile, .band--deep .pay-tile { background: #FFFFFF; color: #0A0A0A; border-color: transparent; } .promo--fit { background: #FAF5EA; } .promo--fit img { object-fit: contain; object-position: center; padding: 0; } .promo--fit::after { background: linear-gradient(to bottom, rgba(15,15,16,.22) 0%, rgba(15,15,16,0) 40%, rgba(15,15,16,0) 70%, rgba(15,15,16,.18) 100%); } /* ===== PDP lite (kao .co/.eu) ===== */ .pdp-lite .crumbs { margin: 4px 0 28px; } .pdp-lite .crumbs a:hover { color: var(--text); } .pdp-lite__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } .pdp-lite__media { position: relative; border-radius: var(--r-panel); overflow: hidden; background: var(--surface-2); aspect-ratio: 1 / 1; } .pdp-lite__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .pdp-lite__title { font-family: var(--font-head); font-weight: 600; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -.03em; margin: 12px 0 14px; } .pdp-lite__title .u-muted { font-weight: 400; font-size: .5em; letter-spacing: 0; } .pdp-lite__intro { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 520px; } .pdp-lite__price { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 18px; font-family: var(--font-head); font-weight: 600; font-size: 32px; letter-spacing: -.02em; } .pdp-lite__per { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--muted); } .pdp-lite__price .price-tba { font-size: 22px; color: var(--muted); font-weight: 500; } .pdp-lite__packlabel { font-size: 12px; color: var(--muted); margin: 0 0 10px; } .pdp-lite__packlabel span { color: var(--gold-text); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; } .pack-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 8px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; font-family: var(--font-body); color: var(--text); transition: border-color .15s, box-shadow .15s; } .pack:hover { border-color: var(--border-strong); } .pack.is-active { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); } .pack__badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-size: 10px; font-weight: 700; letter-spacing: .04em; } .pack:nth-child(4) .pack__badge { background: #0A0A0A; color: #fff; } .pack__title { font-size: 13px; font-weight: 700; } .pack__total { font-size: 15px; font-weight: 700; } .pack__per { font-size: 11px; color: var(--muted); } .pdp-lite__buy { display: flex; gap: 12px; margin-top: 18px; } .pdp-lite__buy .stepper { flex: none; } .pdp-lite__atc { flex: 1; height: 56px; font-size: 15px; } .ruo-note { margin-top: 22px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-input); background: var(--surface-2); font-size: 13px; color: var(--muted); line-height: 1.55; } .ruo-note strong { color: var(--text); } .acc { margin-top: 26px; border-top: 1px solid var(--border); } .acc__item { border-bottom: 1px solid var(--border); } .acc__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-weight: 700; font-size: 15px; } .acc__item summary::-webkit-details-marker { display: none; } .acc__item summary::after { content: "+"; width: 24px; height: 24px; border: 1px solid var(--border-strong); border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: var(--gold-text); font-weight: 500; } .acc__item[open] summary::after { content: "–"; } .acc__body { padding: 0 0 18px; color: var(--muted); font-size: 14.5px; line-height: 1.6; } @media (max-width: 900px) { .pdp-lite__grid { grid-template-columns: 1fr; gap: 28px; } .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pdp-lite__buy { flex-wrap: wrap; } .pdp-lite__atc { min-width: 100%; } } .pcard__bonus { font-size: 12.5px; color: var(--muted); margin: -2px 0 6px; } .pcard__bonus b { color: var(--gold-text); } .pcard__bonus s { opacity: .7; } .pcard__price--gratis { font-size: 14px !important; color: var(--gold-text) !important; } .pcard__price--gratis s { color: var(--muted); font-weight: 500; margin-right: 4px; } .pdp-lite__price s { font-size: 20px; } .pcard__tags .tag { max-width: 100%; white-space: normal; text-align: left; line-height: 1.3; } .ugc img, .rv-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .rv-card__media { aspect-ratio: 4 / 5; overflow: hidden; } /* recenzije: kartice ne rastezati do najviše u redu */ .rv-grid { align-items: start; } .rv-card { height: auto; } .rv-card__body { display: flex; flex-direction: column; gap: 10px; } .rv-card__foot { margin-top: 8px; } /* recenzije: masonry kolone (kao uu UGC zid) */ .rv-grid { display: block; columns: 3; column-gap: 16px; } .rv-grid .rv-card { display: inline-block; width: 100%; break-inside: avoid; margin: 0 0 16px; } .rv-grid .rv-card.is-hidden { display: none; } @media (max-width: 1024px) { .rv-grid { columns: 2; } } @media (max-width: 640px) { .rv-grid { columns: 1; } } /* gratis cijena: bez nowrap, da ne bježi iz kartice na mobitelu */ .pcard__price--gratis { white-space: normal !important; line-height: 1.3; } @media (max-width: 640px) { .pcard__price--gratis { font-size: 12.5px !important; } .pcard__price--gratis s { display: block; margin: 0; } }