/* Novas Group — design tokens, single source of truth Generated from: Naslovnica primjer.dc.html + Naslovnica primjer Mobile.dc.html Authored in oklch, converted to sRGB hex for theme.json. Hex is authoritative. Slugs match theme.json settings.color.palette slugs 1:1. */ :root { /* ---- SURFACES · DARK (default page) ---- */ --nv-ink-900: #060C13; /* slug: ink-900 footer background */ --nv-ink-800: #0C141F; /* slug: ink-800 page background */ --nv-ink-700: #101821; /* slug: ink-700 inset / placeholder panel */ --nv-ink-600: #131B26; /* slug: ink-600 card background on dark */ --nv-ink-500: #15202D; /* slug: ink-500 utility top bar */ --nv-header-glass: rgba(8,16,26,0.92); /* sticky header, backdrop-filter: blur(14px) */ --nv-header-glass-m: rgba(8,16,26,0.94); /* same, mobile */ /* ---- SURFACES · LIGHT (alternating sections) ---- */ --nv-sand-200: #F5F3EF; /* slug: sand-200 light section background */ --nv-sand-100: #FBFAF7; /* slug: sand-100 inset panel on sand-200 */ --nv-sand-50: #FDFCF9; /* slug: sand-50 card background on sand-200 */ --nv-white: #FFFFFF; /* slug: white search bar / form fields */ /* ---- TEXT ON DARK ---- */ --nv-fg: #F1EEE9; /* slug: fg body + headings on dark */ --nv-fg-strong: #E8E4DD; /* FAQ question, nav active */ --nv-fg-muted: #C8C4BC; /* slug: fg-muted paragraph on dark */ --nv-fg-dim: #A8A49C; /* slug: fg-dim meta, card subtitle */ --nv-fg-faint: #7E7A72; /* slug: fg-faint legal line, disabled label */ /* ---- TEXT ON LIGHT ---- */ --nv-ink: #18202A; /* slug: ink headings on light */ --nv-ink-body: #3D434B; /* slug: ink-body paragraph on light */ --nv-ink-muted: #5E646B; /* slug: ink-muted card subtitle, helper text */ --nv-ink-faint: #646970; /* slug: ink-faint labels, "Što gosti kažu" muted H2 */ /* ---- GOLD (brand accent) ---- */ --nv-gold-400: #EBCD95; /* slug: gold-400 accent text / [[slot]] marker on dark */ --nv-gold-500: #D6B174; /* slug: gold-500 PRIMARY: button fill, icons, eyebrow on dark */ --nv-gold-600: #C59D5D; /* slug: gold-600 primary button hover / search CTA */ --nv-gold-700: #9F783E; /* slug: gold-700 icons + accents on light sections */ --nv-bronze-800: #7C4607; /* slug: bronze-800 inline links + focus ring on light */ --nv-bronze-900: #582A00; /* slug: bronze-900 inline link hover on light */ /* ---- LINES ---- */ --nv-line-dark: rgba(255,255,255,0.09); /* rules and dividers on dark */ --nv-line-dark-soft: rgba(255,255,255,0.07); --nv-line-dark-chip: rgba(255,255,255,0.14); /* chip / outline-button border */ --nv-line-dark-dash: rgba(255,255,255,0.16); /* dashed placeholder border */ --nv-line-light: #D0CDC8; /* rules on sand-200 */ --nv-line-light-soft:#D9D7D3; --nv-line-field: #DCDEE1; /* dividers inside white search bar */ --nv-line-light-dash:rgba(156,165,177,0.55); /* ---- FEEDBACK (not present in artboards — defined here for forms) ---- */ --nv-error: #A63D24; /* slug: error error text/border on light */ --nv-error-on-dark: #E8907A; /* slug: error-light error text on dark */ --nv-error-surface: #FBEFEA; --nv-success: #2F6B4F; /* slug: success success text/border on light */ --nv-success-on-dark:#86C2A2; /* slug: success-light */ --nv-success-surface:#EDF4EF; /* ---- FOCUS ---- */ --nv-focus-dark: #D6B174; /* gold-500 on any dark surface */ --nv-focus-light: #7C4607; /* bronze-800 on sand/white */ --nv-focus-width: 2px; --nv-focus-offset: 2px; --nv-focus-radius: 0; /* ---- TYPE FAMILIES ---- */ --nv-font-serif: "EB Garamond", Georgia, "Times New Roman", serif; --nv-font-sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; /* ---- TYPE SCALE (fluid 390px → 1440px) ---- Formula: slope_vw = (Y − X) / 10.5 ; base_px = X − slope_vw × 3.90 (X = px na 390, Y = px na 1440). Svaki novi fluidni token izračunaj ovako. */ --nv-h1: clamp(2.375rem, 1.05rem + 4.2vw, 4.125rem); /* 38 → 66 */ --nv-h1-lh: 1.07; --nv-h1-ls: -0.01em; --nv-h2: clamp(1.8125rem, 1.44rem + 1.2vw, 2.5rem); /* 29 → 40 */ --nv-h2-lh: 1.11; --nv-h3: clamp(1.5rem, 1.3839rem + 0.4762vw, 1.8125rem); /* 24 → 29.00 (v3) */ --nv-h3-lh: 1.13; --nv-h4: clamp(1.1875rem, 1.0946rem + 0.381vw, 1.4375rem); /* 19 → 23.00 (v3) */ --nv-h4-lh: 1.19; --nv-body: clamp(0.9063rem, 0.8714rem + 0.1429vw, 1rem); /* 14.5 → 16 (v2: staro 0.86rem+0.14vw stiglo je samo do 15.78 px na 1440) */ --nv-body-lh: 1.72; --nv-body-long: clamp(0.9063rem, 0.85rem + 0.19vw, 0.9688rem); /* 14.5 → 15.5 SEO prose */ --nv-body-long-lh: 1.8; --nv-small: clamp(0.7813rem, 0.758rem + 0.0952vw, 0.8438rem); /* 12.5 → 13.5 (v2) */ --nv-small-lh: 1.6; --nv-faq-q: clamp(0.9375rem, 0.88rem + 0.17vw, 1.0313rem); /* 15 → 16.5 */ --nv-eyebrow: 0.6875rem; /* 11px, uppercase */ --nv-eyebrow-ls:0.32em; --nv-label: 0.6563rem; /* 10.5px, uppercase */ --nv-label-ls: 0.22em; --nv-btn: 0.6563rem; /* 10.5px, uppercase */ --nv-btn-ls: 0.15em; --nv-legal: 0.6563rem; /* 10.5–11px */ /* ---- SPACING SCALE ---- */ --nv-s1: 4px; --nv-s2: 8px; --nv-s3: 12px; --nv-s4: 16px; --nv-s5: 20px; --nv-s6: 28px; --nv-s7: 36px; --nv-s8: 48px; --nv-s9: 64px; --nv-s10: 80px; --nv-section-y-desktop: 76px; /* section top padding */ --nv-section-y-mobile: 42px; --nv-band-gap-desktop: 80px; /* gap between dark and light bands */ --nv-band-gap-mobile: 48px; --nv-gutter-desktop: 36px; /* horizontal page padding */ --nv-gutter-mobile: 18px; --nv-card-gap-desktop: 28px; --nv-card-gap-mobile: 16px; --nv-band-pad-top-desktop: 76px; /* padding-block-start banda */ --nv-band-pad-bottom-desktop: 84px; --nv-band-pad-top-mobile: 42px; --nv-band-pad-bottom-mobile: 46px; --nv-section-gap-desktop: 72px; /* razmak sekcija UNUTAR banda */ --nv-section-gap-mobile: 36px; --nv-hero-min-desktop: 600px; --nv-hero-max-desktop: 760px; --nv-hero-height-mobile: 470px; --nv-owners-band-desktop: 340px; --nv-owners-band-mobile: 400px; --nv-heading-to-body: 16px; --nv-body-to-content: 36px; /* ---- LAYOUT ---- */ --nv-container: 1320px; /* max-width OMOTAČA sekcije (uključuje gutter) — koristi ovo za .nv-wrap */ --nv-content: 1248px; /* NETO širina sadržaja = container − 2×36. NIJE max-width omotača */ --nv-wide: 1320px; /* theme.json wideSize (= container) */ --nv-prose: 800px; /* SEO prose column, ≈78 chars/line */ --nv-faq: 860px; --nv-sidecol: 340px; /* sticky heading column, desktop only */ /* ---- BORDERS, RADII, SHADOW ---- */ --nv-border: 1px; --nv-radius: 0; /* NO rounded corners anywhere in this design */ --nv-shadow-float: 0 24px 60px rgba(2,6,13,0.45); /* only the hero search bar */ /* ---- BREAKPOINTS (px, min-width) ---- */ --nv-bp-tablet: 768px; --nv-bp-desktop: 1024px; --nv-bp-wide: 1320px; /* ---- MOTION ---- */ --nv-dur-fast: 120ms; /* button/link colour */ --nv-dur-base: 200ms; /* card hover, header background */ --nv-dur-slow: 260ms; /* accordion open, mobile nav */ --nv-ease: cubic-bezier(0.2, 0, 0.2, 1); } /* Slika nikad ne smije prijeci svoj okvir. Bez ovoga s intrinsicnom sirinom 2560 px razvuce stranicu vodoravno svugdje gdje okvir ne postavlja sirinu sam (npr. .nv-article__hero). */ img, picture, svg, video { max-width: 100%; } img, video { height: auto; }