/* ========================================================================== GENERIC CLEAN SHELL - design token reteg -------------------------------------------------------------------------- Eredet: NEW CLEAN IMPLEMENTATION. Ez a fajl ebben a projektben, nullarol keszult. Nem tartalmaz atvett kodot semmilyen kulso vagy korabbi implementaciobol. Nevter: a komponensosztalyok prefixe "gs-" (generic shell). A design tokenek SZANDEKOSAN nevter nelkuliek es markasemlegesek, hogy egy kesobbi arculat pusztan a token-ertekek felulirasaval rahuzhato legyen. A tokenek harom retegben allnak: 1. PRIMITIV - nyers ertekek (skalak) 2. SZEMANTIKUS - szerep szerinti nevek, primitivekre hivatkozva 3. KOMPONENS - komponensszintu finomhangolas (a komponensfajlokban) ========================================================================== */ :root { /* ---------------------------------------------------------------- 1. SZIN A paletta szandekosan neutralis. Az arculati kort a --color-primary / --color-secondary / --color-accent felulirasa inditja. */ /* Primitiv szinskalak */ --palette-neutral-0: #ffffff; --palette-neutral-50: #f7f8fa; --palette-neutral-100: #eef0f4; --palette-neutral-200: #dde1e8; --palette-neutral-300: #c3c9d4; --palette-neutral-400: #949cad; --palette-neutral-500: #6b7385; --palette-neutral-600: #4d5566; --palette-neutral-700: #383f4d; --palette-neutral-800: #242a35; --palette-neutral-900: #151920; --palette-brand-100: #e2ecfa; --palette-brand-300: #93b6e8; --palette-brand-500: #3f74c4; --palette-brand-700: #2a5292; --palette-brand-900: #1a3560; --palette-support-100: #e0f2ee; --palette-support-500: #2f9c86; --palette-support-700: #1f6b5c; --palette-highlight-100: #fdeede; --palette-highlight-500: #d97a2b; --palette-highlight-700: #a05617; --palette-positive-100: #e3f5e6; --palette-positive-500: #3a8f4c; --palette-notice-100: #fdf3d9; --palette-notice-500: #b58208; --palette-critical-100: #fbe6e6; --palette-critical-500: #c0392f; /* Szemantikus szinek */ --color-primary: var(--palette-brand-500); --color-primary-strong: var(--palette-brand-700); --color-primary-soft: var(--palette-brand-100); --color-primary-contrast: var(--palette-neutral-0); --color-secondary: var(--palette-support-500); --color-secondary-strong: var(--palette-support-700); --color-secondary-soft: var(--palette-support-100); --color-secondary-contrast: var(--palette-neutral-0); --color-accent: var(--palette-highlight-500); --color-accent-strong: var(--palette-highlight-700); --color-accent-soft: var(--palette-highlight-100); --color-accent-contrast: var(--palette-neutral-0); --surface: var(--palette-neutral-0); --surface-alt: var(--palette-neutral-50); --surface-sunken: var(--palette-neutral-100); --surface-inverse: var(--palette-neutral-900); --surface-overlay: rgba(21, 25, 32, 0.58); --text-primary: var(--palette-neutral-900); --text-secondary: var(--palette-neutral-600); --text-muted: var(--palette-neutral-500); --text-inverse: var(--palette-neutral-0); --text-on-accent: var(--palette-neutral-0); --border: var(--palette-neutral-200); --border-strong: var(--palette-neutral-300); --border-subtle: var(--palette-neutral-100); --color-success: var(--palette-positive-500); --color-success-soft: var(--palette-positive-100); --color-warning: var(--palette-notice-500); --color-warning-soft: var(--palette-notice-100); --color-error: var(--palette-critical-500); --color-error-soft: var(--palette-critical-100); --focus-ring: var(--color-primary); --focus-ring-offset: var(--surface); /* --------------------------------------------------------- 2. TIPOGRAFIA A font-stack rendszerfontokra epul: nincs kulso font-betoltes, nincs harmadik feles CDN-hivas. Arculati kornel felulirhato. */ --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-heading: var(--font-body); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace; --font-size-2xs: 0.75rem; --font-size-xs: 0.8125rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.375rem; --font-size-2xl: 1.75rem; --font-size-3xl: 2.125rem; --font-size-4xl: 2.75rem; --font-size-5xl: 3.5rem; /* Folyekony fejlec-meretek: a kisebb ertekre esnek vissza szuk nezeten */ --font-size-display: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem); --font-size-title: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); --font-size-section: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.15; --line-height-snug: 1.3; --line-height-normal: 1.55; --line-height-relaxed: 1.75; --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; /* ------------------------------------------------------------ 3. SPACING 4 px-es alapracs. */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --section-space-y: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); /* ------------------------------------------------------------- 4. RADIUS */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ------------------------------------------------------------ 5. SHADOWS */ --shadow-xs: 0 1px 2px rgba(21, 25, 32, 0.06); --shadow-sm: 0 2px 6px rgba(21, 25, 32, 0.08); --shadow-md: 0 6px 18px rgba(21, 25, 32, 0.10); --shadow-lg: 0 16px 40px rgba(21, 25, 32, 0.14); --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 35%, transparent); /* --------------------------------------------------------- 6. CONTAINER */ --container-sm: 40rem; --container-md: 52rem; --container-lg: 68rem; --container-xl: 78rem; --container-full: 100%; --container-gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem); /* Olvasasi savszelesseg hosszu szoveghez */ --measure: 68ch; /* ------------------------------------------------------- 7. TRANSITIONS */ --duration-instant: 90ms; --duration-fast: 160ms; --duration-base: 240ms; --duration-slow: 380ms; --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --ease-entrance: cubic-bezier(0, 0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* --------------------------------------------------------- 8. Z-INDEX Reteg-terkep. Uj reteget csak itt szabad felvenni. */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; /* A homalyosito reteg a fiok MOGE tartozik: elsotetiti a fejlecet es az oldal tartalmat, de a fiok fole nem kerulhet. Korabban 400 volt, ami a `--z-drawer` (300) fole tette, ezert a nyitott mobilmenu minden kattintasat az overlay nyelte el. */ --z-overlay: 250; --z-drawer: 300; --z-modal: 500; --z-toast: 600; --z-skiplink: 700; /* ------------------------------------------------------ 9. KOMPONENS-VAZ */ --header-height: 4.5rem; --header-height-sm: 3.75rem; /* A FIX fejlec alatti ELSO tartalmi blokk felso terkoze. A `gs-page--flush` oldalakon a `main` nem kap kompenzalo kitoltest, ezert a hero sajat felso terkozenek kell a fejlec ala futast megelozni: a fejlec magassaga + levego. Egy helyen allithato, igy a site vertikalis ritmusa egyseges marad. */ --header-clearance: calc(var(--header-height) + var(--space-xl)); --header-clearance-sm: calc(var(--header-height-sm) + var(--space-lg)); --drawer-width: min(22rem, 86vw); --field-height: 2.875rem; --control-border: 1px; } /* -------------------------------------------------------------------------- BREAKPOINTOK A CSS media query nem fogad custom propertyt, ezert a torespontok dokumentalt fix ertekek. A rendszer mobile-first. --bp-sm 36rem (576px) nagy telefon --bp-md 48rem (768px) tablet --bp-lg 64rem (1024px) kis desktop / nav-valtas --bp-xl 80rem (1280px) desktop --bp-2xl 96rem (1536px) szeles desktop A torespontok referenciakent tokenkent is elerhetok (JS olvashatja): -------------------------------------------------------------------------- */ :root { --bp-sm: 36rem; --bp-md: 48rem; --bp-lg: 64rem; --bp-xl: 80rem; --bp-2xl: 96rem; } /* -------------------------------------------------------------------------- SOTET SEMA A tokenrendszer keszen all a sema-valtasra: csak a szemantikus reteg ertekei valtoznak, a komponensek valtozatlanok maradnak. -------------------------------------------------------------------------- */ /* A rendszer sotet-beallitasat SZANDEKOSAN nem kovetjuk: a NetDoktor alapertelmezett temaja mindig a VILAGOS. Sotet temara kizarolag a felhasznaloi valasztas kapcsol, a gyokerelem `data-color-scheme="dark"` attributumaval — lasd a lenti blokkot es a theme-toggle modult. */ :root { color-scheme: light; } :root[data-color-scheme="dark"] { color-scheme: dark; --surface: var(--palette-neutral-900); --surface-alt: var(--palette-neutral-800); --surface-sunken: #0f1319; --surface-inverse: var(--palette-neutral-0); --surface-overlay: rgba(0, 0, 0, 0.66); --text-primary: var(--palette-neutral-50); --text-secondary: var(--palette-neutral-300); --text-muted: var(--palette-neutral-400); --text-inverse: var(--palette-neutral-900); --border: var(--palette-neutral-700); --border-strong: var(--palette-neutral-600); --border-subtle: var(--palette-neutral-800); --color-primary: var(--palette-brand-300); --color-primary-soft: #1d2c44; --color-primary-contrast: var(--palette-neutral-900); --focus-ring-offset: var(--palette-neutral-900); }