/* Areal Parfumi — oblikovni tokeni in osnovni slogi. CGP 2026, smer A »Poštena etiketa«. Vir resnice za tokene je design/cgp/_head.html (platno CGP); spremembe najprej tam, potem tu. */ :root { /* Osnova */ --areal-ink: #141312; --areal-ink-2: #2B2826; --areal-paper: #FBFAF8; --areal-white: #FFFFFF; --areal-stone-100: #F2F0EC; --areal-stone-200: #E2DFDB; --areal-stone-300: #CAC7C2; --areal-stone-500: #898681; --areal-stone-700: #575552; /* Poudarki segmentov (barva je površina, na njej piše Črnilo) */ --areal-amber: #EFA831; /* Jantar — Parfumi */ --areal-amber-deep: #A16100; /* edina različica za besedilo na Papirju */ --areal-lavender: #C1A9EE; /* Sivka — Dom */ --areal-lavender-deep: #6F4FA1; /* Semantika */ --areal-ok: #2F7A4B; --areal-err: #B3261E; --areal-star: #EFA831; /* zvezdice ocen in ikona kapljic: vedno Jantar, tudi v segmentu Dom */ /* Segmentne spremenljivke — nevtralno (domača, košarica, blagajna) */ --areal-accent: var(--areal-ink); --areal-accent-deep: var(--areal-ink); --areal-accent-ink: var(--areal-paper); --areal-surface-2: var(--areal-stone-100); --areal-display-wdth: 112%; --areal-r-card: 8px; /* Pisave */ --areal-font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif; --areal-font-serif: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif; --areal-font-mono: "Geist Mono", "SF Mono", Menlo, Consolas, monospace; /* Tipografska lestvica (namizje / mobilno) */ --areal-fs-display: clamp(3.5rem, 8vw, 6rem); /* 56–96 */ --areal-fs-h1: clamp(2.5rem, 4.5vw, 3.5rem); /* 40–56 */ --areal-fs-h2: clamp(2rem, 3.2vw, 2.5rem); /* 32–40 */ --areal-fs-h3: clamp(1.5rem, 2.2vw, 1.75rem); /* 24–28 */ --areal-fs-h4: 1.375rem; /* 22 */ --areal-fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); /* 16–17 */ --areal-fs-small: 0.875rem; --areal-fs-label: 0.6875rem; /* 11 mono */ /* Razmiki (osnova 4 px) */ --areal-s1: 4px; --areal-s2: 8px; --areal-s3: 12px; --areal-s4: 16px; --areal-s5: 24px; --areal-s6: 32px; --areal-s7: 48px; --areal-s8: 64px; --areal-s9: 96px; --areal-s10: 128px; /* Oblike */ --areal-r-xs: 2px; --areal-r-sm: 6px; --areal-r-md: 10px; --areal-r-lg: 20px; --areal-r-pill: 999px; /* Globina in gibanje */ --areal-shadow-1: 0 1px 2px rgba(20, 19, 18, .06), 0 12px 32px rgba(20, 19, 18, .10); --areal-ease: cubic-bezier(.2, .7, .2, 1); --areal-t-fast: 150ms; --areal-t-base: 240ms; --areal-t-slow: 480ms; /* Mreža */ --areal-max-width: 1280px; --areal-gutter: 1.5rem; } /* Segment se nastavi z data-segment na (parfum | dom). */ body[data-segment="parfum"] { --areal-accent: var(--areal-amber); --areal-accent-deep: var(--areal-amber-deep); --areal-accent-ink: var(--areal-ink); --areal-surface-2: #F2F0EC; --areal-display-wdth: 125%; --areal-r-card: 2px; } body[data-segment="dom"] { --areal-accent: var(--areal-lavender); --areal-accent-deep: var(--areal-lavender-deep); --areal-accent-ink: var(--areal-ink); --areal-surface-2: #F1EFF5; --areal-display-wdth: 100%; --areal-r-card: 16px; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--areal-paper); color: var(--areal-ink); font-family: var(--areal-font-sans); font-size: var(--areal-fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--areal-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--areal-stone-700); } h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; } h1 { font-size: var(--areal-fs-h1); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-stretch: var(--areal-display-wdth); } h2 { font-size: var(--areal-fs-h2); letter-spacing: -.025em; line-height: 1.05; } h3 { font-size: var(--areal-fs-h3); } h4 { font-size: var(--areal-fs-h4); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; } .areal-display { font-size: var(--areal-fs-display); font-weight: 800; font-stretch: var(--areal-display-wdth); letter-spacing: -.035em; line-height: .92; } .areal-whisper { font-family: var(--areal-font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; line-height: 1.05; } body[data-segment="dom"] .areal-whisper { font-family: var(--areal-font-sans); font-style: normal; font-weight: 600; } .areal-label { font-family: var(--areal-font-mono); font-weight: 500; font-size: var(--areal-fs-label); letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; } .areal-price { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .site-header__inner, .site-footer__inner, .site-main { max-width: var(--areal-max-width); margin-inline: auto; padding-inline: var(--areal-gutter); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--areal-s6); padding-block: var(--areal-s4); border-bottom: 1px solid var(--areal-stone-200); } .site-nav ul { display: flex; gap: var(--areal-s5); list-style: none; margin: 0; padding: 0; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 1rem; top: 1rem; background: var(--areal-paper); padding: 0.5rem 1rem; z-index: 100; outline: 2px solid var(--areal-accent-deep); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }