/* ========================================================================== MODIVIAM — Design tokens "Noir Botanique" — niche botanikai parfüm, manufaktúra -------------------------------------------------------------------------- Ez az egyetlen hely, ahol nyers érték szerepel. Minden más fájl tokent használ. ========================================================================== */ :root { /* --- Alapok / ground --------------------------------------------------- A márka navy (#0E2A3A) megmarad, köré épül a noir és az elefántcsont. */ --mv-noir: #0B0E11; /* legmélyebb feketés alap, bársony ágy */ --mv-noir-soft: #12171C; /* emelt noir felület, kártyák sötét módban */ --mv-navy: #0E2A3A; /* MÁRKASZÍN — megtartva */ --mv-navy-deep: #081A24; /* navy mélyebb változata, gradienshez */ --mv-navy-tint: #1B3F52; /* navy világosabb, hairline-hoz */ --mv-ivory: #F6F2EA; /* meleg törtfehér — a fő világos alap */ --mv-ivory-warm: #EFE8DC; /* mélyebb elefántcsont, váltakozó sávhoz */ --mv-white: #FFFFFF; /* --- Akcent / champagne ------------------------------------------------ Arany, de sosem sárga: hajszálvonalak, verzálok, aláhúzások. Nagy felületen SOHA nem használjuk — ettől lenne olcsó. */ --mv-champagne: #C6A97C; --mv-champagne-lt: #E2CEA8; --mv-champagne-dk: #9C8256; --mv-champagne-glow: rgba(198, 169, 124, 0.28); /* --- Szöveg ------------------------------------------------------------ */ --mv-ink: #1A1F24; /* fő szövegszín világos alapon (nem #333) */ --mv-ink-soft: #4A555F; /* másodlagos szöveg */ --mv-ink-mute: #77838D; /* metaadat, felirat */ --mv-on-dark: #EDE7DC; /* szöveg sötét alapon */ --mv-on-dark-soft: #A9B2B9; /* másodlagos sötét alapon */ /* --- Funkcionális ------------------------------------------------------ */ --mv-rose: #CC3366; /* meglévő kiemelés — akció, sale */ --mv-success: #2F7D5B; --mv-error: #A63A3A; /* --- Vonalak ----------------------------------------------------------- */ --mv-rule: rgba(26, 31, 36, 0.12); --mv-rule-strong: rgba(26, 31, 36, 0.22); --mv-rule-on-dark: rgba(237, 231, 220, 0.14); --mv-hairline: 1px; /* --- Tipográfia -------------------------------------------------------- h1 Cinzel · h2 Della Respira · h3 Forum · szöveg Lora (megtartva) */ --mv-font-display: "Cinzel", "Cormorant Garamond", Georgia, serif; --mv-font-heading: "Della Respira", "Cormorant Garamond", Georgia, serif; --mv-font-sub: "Forum", "Cormorant Garamond", Georgia, serif; --mv-font-body: "Lora", Georgia, "Times New Roman", serif; --mv-font-ui: "Forum", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; /* Moduláris skála — 1.25 (major third), fluid clamp-pal. Kis képernyőn is olvasható marad, nagy képernyőn drámai. */ --mv-fs-hero: clamp(2.75rem, 1.6rem + 5.2vw, 6.5rem); --mv-fs-h1: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); --mv-fs-h2: clamp(1.75rem, 1.25rem + 2.2vw, 3.125rem); --mv-fs-h3: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem); --mv-fs-h4: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); --mv-fs-lead: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem); --mv-fs-body: clamp(1rem, 0.96rem + 0.22vw, 1.125rem); --mv-fs-small: 0.9375rem; --mv-fs-micro: 0.8125rem; --mv-lh-tight: 1.06; --mv-lh-snug: 1.22; --mv-lh-normal: 1.5; --mv-lh-body: 1.78; /* Betűköz — a prémium hatás nagy része innen jön */ --mv-ls-hero: 0.02em; --mv-ls-display: 0.045em; --mv-ls-eyebrow: 0.34em; --mv-ls-button: 0.18em; --mv-ls-nav: 0.12em; --mv-measure: 68ch; /* olvasható sorhossz */ --mv-measure-narrow: 46ch; /* --- Tér --------------------------------------------------------------- 8px alapú, de a szekció-ritmus jóval nagyobb — a levegő ad prémiumot. */ --mv-space-2xs: 0.375rem; --mv-space-xs: 0.625rem; --mv-space-sm: 1rem; --mv-space-md: 1.75rem; --mv-space-lg: 2.75rem; --mv-space-xl: 4.5rem; --mv-space-2xl: 7rem; --mv-space-3xl: clamp(5rem, 3rem + 8vw, 11rem); /* szekció padding */ --mv-gutter: clamp(1.25rem, 0.5rem + 3vw, 3.5rem); --mv-maxw: 1320px; --mv-maxw-text: 780px; /* --- Mozgás ------------------------------------------------------------ Lassabb és lágyabb, mint egy átlagos webshop. A sietség olcsó. */ --mv-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --mv-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --mv-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --mv-dur-fast: 240ms; --mv-dur: 520ms; --mv-dur-slow: 900ms; --mv-dur-reveal: 1100ms; /* --- Árnyék ------------------------------------------------------------ Nagyon halvány és nagyon széles. Éles doboz-árnyék = olcsó. */ --mv-shadow-sm: 0 1px 2px rgba(11, 14, 17, 0.04), 0 8px 24px -12px rgba(11, 14, 17, 0.10); --mv-shadow-md: 0 2px 4px rgba(11, 14, 17, 0.05), 0 24px 60px -24px rgba(11, 14, 17, 0.18); --mv-shadow-lg: 0 40px 100px -40px rgba(11, 14, 17, 0.32); --mv-shadow-gold: 0 0 0 1px var(--mv-champagne-glow), 0 30px 70px -35px rgba(156, 130, 86, 0.45); /* --- Textúra ----------------------------------------------------------- */ --mv-grain-opacity: 0.038; --mv-velvet-overlay: linear-gradient( 180deg, rgba(11, 14, 17, 0.82) 0%, rgba(14, 42, 58, 0.68) 46%, rgba(11, 14, 17, 0.90) 100%); --mv-radius: 0px; /* szögletes. a lekerekítés itt nem prémium */ --mv-radius-img: 0px; --mv-header-h: 92px; --mv-header-h-sticky: 68px; --mv-z-header: 999; --mv-z-grain: 9998; } /* Sötét szekcióban a szövegtokenek átfordulnak, így ugyanaz a komponens kód mindkét alapon helyesen néz ki. */ .mv-on-noir, .mv-section--noir, .mv-section--navy { --mv-ink: var(--mv-on-dark); --mv-ink-soft: var(--mv-on-dark-soft); --mv-ink-mute: var(--mv-on-dark-soft); --mv-rule: var(--mv-rule-on-dark); --mv-rule-strong: rgba(237, 231, 220, 0.26); }