/* ========================================================================== */
/* FILE: /assets/fonts/HelveticaNowDisplay/stylesheet.css */
/* ========================================================================== */
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ThinIta.eot');
src: local('Helvetica Now Display Thin Ita'), local('HelveticaNowDisplay-ThinIta'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ThinIta.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ThinIta.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ThinIta.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ThinIta.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Light.eot');
src: local('Helvetica Now Display Light'), local('HelveticaNowDisplay-Light'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Light.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Light.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Light.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-BoldIta.eot');
src: local('Helvetica Now Display Bold Ita'), local('HelveticaNowDisplay-BoldIta'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-BoldIta.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-BoldIta.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-BoldIta.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-BoldIta.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-RegIta.eot');
src: local('Helvetica Now Display Reg Ita'), local('HelveticaNowDisplay-RegIta'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-RegIta.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-RegIta.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-RegIta.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-RegIta.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtLtIta.eot');
src: local('Helvetica Now Display ExtLt Ita'), local('HelveticaNowDisplay-ExtLtIta'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtLtIta.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtLtIta.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtLtIta.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtLtIta.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-MedIta.eot');
src: local('Helvetica Now Display Med Ita'), local('HelveticaNowDisplay-MedIta'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-MedIta.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-MedIta.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-MedIta.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-MedIta.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtLt.eot');
src: local('Helvetica Now Display ExtLt'), local('HelveticaNowDisplay-ExtLt'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtLt.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtLt.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtLt.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtLt.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBlk.eot');
src: local('Helvetica Now Display ExtBlk'), local('HelveticaNowDisplay-ExtBlk'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBlk.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBlk.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBlk.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBlk.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Bold.eot');
src: local('Helvetica Now Display Bold'), local('HelveticaNowDisplay-Bold'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Bold.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Bold.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Bold.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBdIta.eot');
src: local('Helvetica Now Display ExtBd Ita'), local('HelveticaNowDisplay-ExtBdIta'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBdIta.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBdIta.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBdIta.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBdIta.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Regular.eot');
src: local('Helvetica Now Display Regular'), local('HelveticaNowDisplay-Regular'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Regular.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Regular.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBlkIta.eot');
src: local('Helvetica Now Display ExBlk It'), local('HelveticaNowDisplay-ExtBlkIta'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBlkIta.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBlkIta.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBlkIta.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBlkIta.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Thin.eot');
src: local('Helvetica Now Display Thin'), local('HelveticaNowDisplay-Thin'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Thin.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Thin.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Thin.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-LightIta.eot');
src: local('Helvetica Now Display Light Ita'), local('HelveticaNowDisplay-LightIta'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-LightIta.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-LightIta.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-LightIta.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-LightIta.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtraBold.eot');
src: local('Helvetica Now Display ExtBd'), local('HelveticaNowDisplay-ExtraBold'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtraBold.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtraBold.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Medium.eot');
src: local('Helvetica Now Display Medium'), local('HelveticaNowDisplay-Medium'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Medium.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Medium.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Medium.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-HairlineI.eot');
src: local('Helvetica Now Display Hairline'), local('HelveticaNowDisplay-HairlineI'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-HairlineI.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-HairlineI.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-HairlineI.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-HairlineI.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-BlackIta.eot');
src: local('Helvetica Now Display Black Ita'), local('HelveticaNowDisplay-BlackIta'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-BlackIta.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-BlackIta.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-BlackIta.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-BlackIta.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Black.eot');
src: local('Helvetica Now Display Black'), local('HelveticaNowDisplay-Black'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Black.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Black.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Black.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Helvetica Now Display';
src: url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Hairline.eot');
src: local('Helvetica Now Display Hairline'), local('HelveticaNowDisplay-Hairline'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Hairline.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Hairline.woff2') format('woff2'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Hairline.woff') format('woff'),
url('/assets/fonts/HelveticaNowDisplay/HelveticaNowDisplay-Hairline.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
/* ========================================================================== */
/* FILE: /css/app/vars/fonts.css */
/* ========================================================================== */
/* ============================================================================
Bárhol felülírhatod az alábbi :root változókat.
1. ROOT VARIABLES — A te designnyelved (paletta, type, line, transitions)
============================================================================ */
/*--sans: 'Inter Tight', system-ui, sans-serif;*/
/*--sans: system-ui, -apple-system, 'Segoe UI', sans-serif;*/
/*--serif: Georgia, 'Times New Roman', serif;*/
/*--serif: 'Cormorant Garamond', 'Times New Roman', serif;*/
/*--mono: 'JetBrains Mono', monospace; */
/*--d: 'Fraunces', Georgia, serif;*/
/*--s: 'Inter', sans-serif;*/
/*--m: 'JetBrains Mono', monospace;*/
/*--font-display: 'Cormorant Garamond', Georgia, serif;*/
/*--font-display: system-ui, -apple-system, sans-serif;*/
/*--font-ui: system-ui, -apple-system, sans-serif;*/
/*--font-mono: monospace;*/
/*--font-serif: system-ui, -apple-system, sans-serif;*/
/*--font-serif: 'Fraunces', 'Times New Roman', serif;*/
/*"Almarena Display"*/
:root {
/*--font: "Aeonik",-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important;*/
/*--font: "SF Pro Text",-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important;*/
--font: 'Helvetica Now Display',-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important;
/*--font: "Inter",-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important;*/
/*--font: bureauSerif,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important;*/
--font-ui: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--font-serif: 'Geist', "Helvetica Neue", Helvetica, -apple-system, system-ui, Arial, sans-serif;
/*custom*/
/*--font-serif: 'bureauSerif', 'Times New Roman', serif;*/
}
/* ========================================================================== */
/* FILE: /css/app/vars/anim.css */
/* ========================================================================== */
:root {
/*animtaion*/
--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--t-fast: 0.25s ease;
--t-mid: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
--t-slow: 0.7s cubic-bezier(0.16, 1, 0.3, 1);
--eo: cubic-bezier(.16, 1, .3, 1);
--ei: cubic-bezier(.83, 0, .17, 1);
--eo: cubic-bezier(.16, 1, .3, 1);
--ei: cubic-bezier(.83, 0, .17, 1);
}
/* ========================================================================== */
/* FILE: /css/app/vars/v4/root.css */
/* ========================================================================== */
/* ============================================================================
Bárhol felülírhatod az alábbi :root változókat.
1. ROOT VARIABLES — A te designnyelved (paletta, type, line, transitions)
============================================================================ */
/*variables*/
:root{
--fog: 0;
--brad:12px;
}
/* ========================================================================== */
/* FILE: /css/app/vars/v4/colors.css */
/* ========================================================================== */
:root {
/* ----- COLORS — paletta ----- */
--dark: #0d0c0a;
--cream: #ebe4d5;
--cream-deep: #ddd4bf;
--cream-soft: #f3eee0;
--ink: #0e0d0b;
--ink-soft: #1a1814;
--char: #2a2620;
--shadow: #3d3830;
--lgrey: #f5f5f7;
--sepia: #6b5a3a;
--sepia-warm: #8a7548;
--sepia-deep: #4a3e25;
--paper: #ffffff;
--paper-old: #c4b896;
--ember: #c54a2a;
--ember-soft: rgba(197, 74, 42, 0.12);
/*--cream: #ebe4d5;*/
/*--cream-deep: #ddd4bf;*/
/*--cream-soft: #f3eee0;*/
/*--ink: #0e0d0b;*/
/*--ink-soft: #1a1814;*/
/*--ink-deeper: #050505;*/
/*--char: #2a2620;*/
/*--sepia: #6b5a3a;*/
/*--sepia-deep: #4a3e25;*/
/*--paper: #c4b896;*/
/*--paper-soft: #a89a78;*/
--gold: #d4b572;
/*--gold: #d4b87a;*/
--gold-bright: #e8c878;
/*--ember: #c54a2a;*/
/*--line-dark: rgba(235, 228, 213, 0.10);*/
/*--line-dark-mid: rgba(235, 228, 213, 0.18);*/
/*--line-dark-strong: rgba(235, 228, 213, 0.28);*/
/*--line: rgba(14, 13, 11, 0.12);*/
/*--bg: #0c0b09;*/
/*--ink: #f2ead8;*/
/*--ink2: #b3a78f;*/
/*--ink3: #6e6452;*/
/*--ink4: #3b362b;*/
/*--gold: #d3b078;*/
/*--red: #c4604a;*/
/*rgba*/
/*--line: rgba(211, 176, 120, .13);*/
/*--line2: rgba(211, 176, 120, .3); */
/*classic* /
--hungary-red: #CE2939;
--hungary-white: #FFFFFF;
--hungary-green: #477050;
/*modern*/
--hungary-red: #D72638;
--hungary-white: #F8F8F8;
--hungary-green: #1F7A4D;
/*elegant*/
--hungary-red-dark: #9E1B32;
--hungary-white-dark: #EDEDED;
--hungary-green-dark: #2E5E3B;
}
.color-gold{color:var(--gold);}
.color-ink{color:var(--ink);}
.color-ink2{color:var(--ink2);}
/* ========================================================================== */
/* FILE: /css/app/vars/v4/dimensions.css */
/* ========================================================================== */
:root{
/*html*/
--max: 1280px;
/*--max: 1440px;*/
--max: 1640px;
--r: 2px;
--r-card: 4px;
}
/* ========================================================================== */
/* FILE: /css/app/vars/v4/themes/dark.css */
/* ========================================================================== */
/* ── DARK (deep night, golden veins) ──────────────────────── */
[data-theme="dark"] {
--bg: #000000;
--bg-rgb: 13, 12, 10;
--bg-rgba: rgba(13, 12, 10, 0.6);
--bg-tint: #14130f;
--bg-deep: #1c1a15;
--surface: rgba(30, 28, 22, 0.55);
--surface-2: rgba(40, 38, 30, 0.75);
--surface-dark: rgba(8, 8, 10, 0.92);
--glass-bg: rgba(255, 255, 255, 0.04);
--glass-bg-2: rgba(255, 255, 255, 0.02);
--glass-border: rgba(255, 255, 255, 0.08);
--text: #ede5d3;
--text-2: #98907e;
--text-3: #5a554a;
--text-on-dark: #ede5d3;
--text-on-dark-2: #98907e;
--menu-text: #ede5d3;
--menu-text-2: #98907e;
--menu-line: rgba(255, 255, 255, 0.08);
--menu-color: rgba(255, 255, 255, 0.3);
--line: rgba(255, 255, 255, 0.06);
--line-2: rgba(255, 255, 255, 0.12);
--line-on-dark: rgba(255, 255, 255, 0.08);
--gold: #d4ad6a;
--gold-rgba-05: rgba(201, 164, 100, 0.5);
--gold-2: #f0c882;
--gold-light: rgba(212, 173, 106, 0.14);
--gold-glow: rgba(212, 173, 106, 0.30);
--hero-grad-1: #14110b;
--hero-grad-2: #1f1a12;
--hero-grad-3: #2a2317;
--nav-bg: rgba(13, 12, 10, 0.78);
--nav-bg-solid: rgba(13, 12, 10, 0.96);
--shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.4);
--shadow-pill: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 8px 16px -4px rgba(0, 0, 0, 0.4);
--grain: 0.30;
}
/* ========================================================================== */
/* FILE: /css/app/vars/v4/themes/light.css */
/* ========================================================================== */
/* ── LIGHT (default — matches the reference) ──────────────── */
[data-theme="light"] {
--cream:#897d65;
--ink: #534b3b;
/*--bg: #f0ebe2;*/
--bg: #ffffff;
--bg-rgb: 240, 235, 226;
--bg-rgba: rgba(240, 235, 226, 0.6);
--bg-tint: #e8e2d6;
--bg-deep: #ddd5c5;
--surface: rgba(255, 255, 255, 0.55);
--surface-2: rgba(255, 255, 255, 0.75);
/*--surface-dark: rgba(20, 20, 25, 0.92);*/
--surface-dark: rgba(253, 252, 249, 0.92);
--glass-bg: rgba(255, 255, 255, 0.35);
--glass-bg-2: rgba(255, 255, 255, 0.18);
--glass-border: rgba(255, 255, 255, 0.45);
--text: #1a1a1f;
--text-2: #4a4a52;
--text-3: #8a8a90;
--text-on-dark: #f5f3ee;
--text-on-dark-2: #b8b8be;
--menu-text: #000000;
--menu-text-2: #999999;
--menu-line: rgba(0, 0, 0, 0.08);
--menu-color: rgba(0, 0, 0, 0.3);
--line: rgba(20, 20, 25, 0.10);
--line-2: rgba(20, 20, 25, 0.18);
--line-on-dark: rgba(255, 255, 255, 0.10);
--gold: #c9a464;
--gold-rgba-05: rgba(201, 164, 100, 0.5);
--gold-2: #e0b876;
--gold-light: rgba(201, 164, 100, 0.18);
--gold-glow: rgba(201, 164, 100, 0.35);
--hero-grad-1: #f4eee2;
--hero-grad-2: #e8dfc9;
--hero-grad-3: #d4c8aa;
--nav-bg: rgba(240, 235, 226, 0.78);
/*--nav-bg: rgba(255, 255, 255, 0.78);*/
--nav-bg-solid: rgba(240, 235, 226, 0.95);
--shadow-card: 0 1px 2px rgba(20,20,25,0.04), 0 8px 24px rgba(20,20,25,0.06);
--shadow-pill: 0 24px 48px -12px rgba(40, 35, 25, 0.18), 0 8px 16px -4px rgba(40, 35, 25, 0.10);
--grain: 0.08;
}
/* ========================================================================== */
/* FILE: /css/app/core.css */
/* ========================================================================== */
/*[data-theme="dark"] img {filter:invert(1)}*/
/*opacity*/
.op-02{opacity:0.2}
.op-03{opacity:0.3}
.op-05{opacity:0.5}
/*height*/
.height-auto{height:auto;}
.h-auto{height:auto;}
.h-100vh{
height:100vh;
}
/*positions*/
.top-0{top:0}
.left-0{left:0}
/*width*/
.w-24px{width:24px;}
.w-25p{width:25%;}
.w-100p{width:100%;}
.w-80px{width:80px}
/*height*/
.h-100p{height:100%;}
.h-1px{height:1px}
/*min-height*/
.mh-50vh{min-height:50vh;}
.mh-100vh{min-height:100vh;}
/*max-width*/
.mw-300px{max-width:300px;}
.mw-400px{max-width:400px;}
.mw-700px{max-width:700px;}
.mw-880px{max-width:880px;}
.mw-1000px{max-width:1000px;}
.mw-1200px{max-width:1200px;}
/**/
.mw-xxs{max-width:120px;}
.mw-xs{max-width:300px;}
.mw-s{max-width:480px;}
.mw-m{max-width:600px;}
.mw-l{max-width:800px;}
.mw-xl{max-width:1000px;}
/*gap*/
.gap-xs {gap: 8px}
.gap-s {gap: 14px}
.gap-m {gap: 24px}
.gap-l {gap: 40px}
.gap-xl {gap: 64px}
/*margin-top*/
.mt-26px{margin-top:26px;}
.mt-52px{margin-top:52px;}
/**/
/*.mt-s {margin-top: 16px}*/
/*.mt-m {margin-top: 28px}*/
/*.mt-l {margin-top: 48px}*/
/*.mt-xl {margin-top: 80px}*/
/**/
.mt-xs{margin-top:8px;}
.mt-s{margin-top:12px;}
.mt-m{margin-top:24px;}
.mt-l{margin-top:32px;}
.mt-xl{margin-top:64px;}
.mt-xxl{margin-top:128px;}
.mt-xxxl{margin-top:256px;}
/*margin-bottom*/
.mb-13px{margin-bottom:13px;}
.mb-26px{margin-bottom:26px;}
.mb-52px{margin-bottom:52px;}
/**/
/*.mb-s {margin-bottom: 16px}*/
/*.mb-m {margin-bottom: 28px}*/
/*.mb-l {margin-bottom: 48px}*/
/*.mb-xl {margin-bottom: 80px}*/
/**/
.mb-xs{margin-bottom:8px;}
.mb-s{margin-bottom:12px;}
.mb-m{margin-bottom:24px;}
.mb-l{margin-bottom:32px;}
.mb-xl{margin-bottom:64px;}
.mb-xxl{margin-bottom:128px;}
.mb-xxxl{margin-bottom:256px;}
/*margin-left*/
.ml-auto {margin-left:auto;}
/*margin-right*/
.mr--1px{margin-right:-1px;}
.mr-auto {margin-right:auto;}
.mr-24px {margin-right:24px;}
/*margin-vetical*/
.mv-xs{margin:8px 0;}
.mv-s{margin:12px 0;}
.mv-m{margin:24px 0;}
.mv-l{margin:32px 0;}
.mv-xl{margin:64px 0;}
.mv-xxl{margin:128px 0;}
.mv-xxxl{margin:256px 0;}
/*margin-horizontal*/
.mh-xs{margin:0px 8px;}
.mh-s{margin:0 12px;}
.mh-m{margin:0 24px}
.mh-l{margin:0 32px}
.mh-xl{margin:0 64px}
.mh-xxl{margin:0 128px}
.mh-xxxl{margin:0 256px}
.mh-auto {margin-left:auto;margin-right:auto;}
/*margin-around*/
.ma-xs{margin:8px;}
.ma-s{margin:12px;}
.ma-m{margin:24px;}
.ma-l{margin:32px;}
.ma-xl{margin:64px;}
.ma-xxl{margin:256px;}
/*background*/
.bg-center{background-size:cover;background-repeat:no-repeat;background-position:center;}
.bg-norepeat{background-repeat:no-repeat;}
.bg-cover{background-size:cover;}
.bg-contain{background-size:contain;}
.bg-center{background-position:center;}
.bg-left-bottom{background-position:left bottom;}
.bc-paper{background-color:var(--paper)}
/*filters*/
.invert{filter:invert(1)}
.grayscale{filter:grayscale(1)}
.sepia{filter:sepia(1)}
[data-theme="dark"] .invert-dark{filter:invert(1)}
/*grid*/
.grid-1-1 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
margin-bottom: 80px;
align-items: end;
}
.grid-1-12 {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 100px;
margin-bottom: 80px;
align-items: end;
}
.grid-1-15 {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 100px;
margin-bottom: 80px;
align-items: end;
}
.grid-200px-1{
display: grid;
grid-template-columns: 200px 1fr;
gap: 48px;
padding: 40px 0;
border-top: 1px solid var(--line);
}
:root{
--fs-s: 16px;
--fs-xl: 48px;
}
/*z-index*/
.zi-2{z-index:2}
.zi-5{z-index:5}
.zi-10{z-index:10}
.zi-11{z-index:11}
.zi-1000{z-index:1000}
.zi-2000{z-index:2000}
.bs-m{box-shadow: 0 1px 1px rgba(22, 21, 15, .04), 0 8px 24px -12px rgba(22, 21, 15, .16);}
/*border*/
.b-1px-solid{border: 1px solid var(--browser-border);}
.br-8px{border-radius:8px;}
/*buttons*/
button.more{
background:black !important;
color:white !important;
border-radius:24px !important;
font-size:var(--fs-s);
}
[data-theme="dark"] button.more{
background:var(--gold) !important;
color:black !important;
}
/* ========================================================================== */
/* FILE: /css/app/elements/html/v4.css */
/* ========================================================================== */
*{
box-sizing:border-box;
margin:0;
padding:0
}
html{
scroll-behavior:auto
}
::selection{
background:var(--gold);
color:var(--bg)
}
/* ========================================================================== */
/* FILE: /css/app/elements/html/selection.css */
/* ========================================================================== */
/* Better selection */
::selection {
background: var(--gold);
color: var(--bg);
}
/*::selection { */
/* background: var(--ink); */
/* color: var(--cream); */
/*}*/
/* ========================================================================== */
/* FILE: /css/app/elements/body/v4.css */
/* ========================================================================== */
/*@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');*/
/* ═══════════════════════════════════════════════
RESET & BASE
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font);
/*font-family: var(--font-ui);*/
/*font-family: var(--font-display);*/
/*font-family:var(--font-serif);*/
font-size: 16px;
/*1.65*/
line-height: 1;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
/*cursor: none;*/
transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
/* ── Grain overlay ─────────────────────────────────────── */
body::before {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
opacity: var(--grain);
pointer-events: none; z-index: 9998;
transition: opacity 0.5s;
}
/* ========================================================================== */
/* FILE: /css/app/elements/header/vars.css */
/* ========================================================================== */
:root{
/*--header-height: 88px;*/
--header-height: 66px;
/*--header-height: 48px;*/
--nav-h: 84px;
}
/* ========================================================================== */
/* FILE: /css/app/elements/container/main.css */
/* ========================================================================== */
main{position:relative;z-index:2}
/* ========================================================================== */
/* FILE: /css/app/elements/container/wrap.css */
/* ========================================================================== */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 40px; }
.center {width: 100%; max-width: var(--max); margin: 0 auto;}
/* ========================================================================== */
/* FILE: /css/app/elements/a/v1.css */
/* ========================================================================== */
a { color: inherit; }
/* ========================================================================== */
/* FILE: /css/app/elements/button/v4/btn.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
BUTTONS
═════════════════════════════════════════════════════════════ */
.btn {
display: inline-flex; align-items: center; gap: 14px;
padding: 0 28px 0 8px;
height: 48px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
border: none;
cursor: pointer;
text-decoration: none;
transition: all 0.25s var(--ease);
white-space: nowrap;
position: relative;
}
/* ========================================================================== */
/* FILE: /css/app/elements/button/v4/btn-primary.css */
/* ========================================================================== */
.btn-primary {
background: #18181d;
color: #f5f3ee;
border-radius: 100px;
box-shadow: 0 16px 32px -8px rgba(20, 20, 25, 0.25), 0 4px 12px -2px rgba(20, 20, 25, 0.10);
}
.btn-primary::before {
content: '';
width: 36px; height: 36px;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
box-shadow: 0 0 0 0 rgba(201, 164, 100, 0.4);
transition: box-shadow 0.3s;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 24px 40px -8px rgba(20, 20, 25, 0.30), 0 8px 16px -2px rgba(20, 20, 25, 0.14);
}
.btn-primary:hover::before {
box-shadow: 0 0 0 6px rgba(201, 164, 100, 0.18);
}
/* ========================================================================== */
/* FILE: /css/app/elements/header/v15.css */
/* ========================================================================== */
/* ════════ HEADER ════════ */
.header{
position:fixed;
top:0;
left:0;
right:0;
z-index:800;
display:flex;
align-items:start;
justify-content:space-between;
padding:clamp(18px,3vh,30px) clamp(20px,4vw,52px);
pointer-events:none
}
.header>*{
pointer-events:auto
}
.h-menu{
display:flex;
align-items:center;
gap:14px;
font:400 10px/1 var(--m);
letter-spacing:.32em;
text-transform:uppercase;
color:var(--ink2);
transition:color .35s;
padding:8px 0
}
.h-menu:hover{
color:var(--ink)
}
.h-menu i{
display:block;
width:30px;
height:9px;
position:relative
}
.h-menu i::before,.h-menu i::after{
content:'';
position:absolute;
left:0;
height:1px;
background:currentColor;
transition:all .45s var(--eo)
}
.h-menu i::before{
top:0;
width:100%
}
.h-menu i::after{
bottom:0;
width:62%
}
.h-menu:hover i::after{
width:100%
}
body.nav-open .h-menu i::before{
transform:translateY(4px) rotate(45deg)
}
body.nav-open .h-menu i::after{
width:100%;
transform:translateY(-4px) rotate(-45deg)
}
.h-mark{
position:absolute;
left:50%;
transform:translateX(-50%);
font:italic 300 15px var(--d);
color:var(--ink2);
transition:color .4s
}
.h-mark:hover{
color:var(--ink)
}
.h-join{
font:italic 300 14px var(--d);
color:var(--ink);
padding:11px 26px;
border:1px solid var(--line2);
border-radius:100px;
transition:border-color .45s;
position:relative;
overflow:hidden
}
.h-join span{
position:relative;
z-index:1;
transition:color .35s
}
.h-join::before{
content:'';
position:absolute;
inset:0;
background:var(--gold);
border-radius:100px;
transform:translateY(102%);
transition:transform .5s var(--eo)
}
.h-join:hover::before{
transform:none
}
.h-join:hover span{
color:var(--bg)
}
.h-join:hover{
border-color:var(--gold)
}
@media(max-width:680px){
.h-mark{
display:none
}
}
/* ========================================================================== */
/* FILE: /css/app/elements/footer/v4.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
FOOTER
═════════════════════════════════════════════════════════════ */
footer {
width:100%;
/*border-top: 1px solid var(--line);*/
padding: 60px 48px 40px;
margin:0px;
}
/* ========================================================================== */
/* FILE: /css/app/elements/section.css */
/* ========================================================================== */
section {
position: relative;
/*padding: 140px 0; */
}
/*section {*/
/*position: relative;*/
/*padding: 160px 48px;*/
}
/* ========================================================================== */
/* FILE: /css/app/elements/img/v1.css */
/* ========================================================================== */
img { display: block; max-width: 100%; }
/* ========================================================================== */
/* FILE: /css/app/classes/typography/polish.css */
/* ========================================================================== */
/* ═══════════════════════════════════════════════
TYPOGRAPHY POLISH (added v2)
═══════════════════════════════════════════════ */
html {
font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
}
body {
font-feature-settings: "kern" 1, "ss01" 1, "tnum" 0;
}
.section-h2,
.page-hero-h1,
.hero-h1,
.module-title,
.candle-h2,
.join-h3,
.contact-email-big,
.editorial-quote p,
.mission-quote,
.kpi-val,
.stat-num,
.feature-name,
.panel-nav-name,
.era-detail-big-year {
font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "swsh" 1;
font-variant-ligatures: common-ligatures discretionary-ligatures;
}
/* Italic em emphasis — softer optical weight */
.hero-h1 em,
.section-h2 em,
.page-hero-h1 em,
.cta-full-title em,
.era-detail-big-year em {
font-feature-settings: "kern" 1, "liga" 1, "dlig" 1;
font-style: italic;
}
/* Mono numerals for stats/prices */
.kpi-val,
.stat-num,
.progress-count,
.era-num,
.era-event-month,
.timeline-date {
font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Refined small caps for labels */
.label,
.panel-label,
.mt-label,
.section-label {
font-feature-settings: "kern" 1, "ss01" 1;
}
/* ========================================================================== */
/* FILE: /css/app/classes/typography/roman.css */
/* ========================================================================== */
/* ----- ROMAN — római számos azonosító ----- */
.roman {
font-style: italic;
font-weight: 200;
font-size: clamp(48px, 5vw, 80px);
color: var(--sepia-deep);
letter-spacing: -0.03em;
line-height: 0.9;
font-variation-settings: "opsz" 144;
}
.dark .roman { color: var(--paper); }
.roman.sm { font-size: clamp(28px, 2.5vw, 40px); }
.roman.lg { font-size: clamp(64px, 7vw, 120px); }
/* ========================================================================== */
/* FILE: /css/app/classes/typography/tipo.css */
/* ========================================================================== */
/* ════════ TIPÓ ════════ */
/*spaces*/
.gap-12{gap:12px;}
.gap-24{gap:24px;}
.space-v-large{padding:70px 0px;}
/*text*/
.color-white{color:#ffffff}
.color-grey{color:#999}
/**/
/*.fw-light{font-weight:200;}*/
/*.fw-semilight{font-weight:300;}*/
/*.fw-normal{font-weight:400;}*/
/*.fw-regular{font-weight:600;}*/
/*.fw-semibold{font-weight:800;}*/
.fw-200{font-weight:200;}
.fw-300{font-weight:300;}
.fw-400{font-weight:400;}
.fw-500{font-weight:500;}
.fw-600{font-weight:600;}
.fw-800{font-weight:800;}
.fs-xs{font-size:12px}
.fs-s{font-size:16px}
.fs-m{font-size:18px}
.fs-n{font-size:20px}
.fs-l{font-size:24px}
.fs-st{font-size:28px}
.fs-x{font-size:clamp(20px,5vw,36px)}
.fs-xl{font-size:clamp(22px,6vw,48px)}
.fs-xxl{font-size:clamp(32px,8vw,64px)}
.fs-xxxl{font-size:clamp(48px, 12vw, 260px);}
/*.fs-small{font-size: clamp(18px, 6vw, 18px);}*/
/*.fs-medium{font-size: clamp(24px, 6vw, 24px);}*/
/*.fs-big{font-size: clamp(30px, 6vw, 48px);}*/
.ta-left{text-align:left;}
.ta-center{text-align:center;}
/*line-height*/
.lh-s{line-height:0.8}
.lh-n{line-height:normal}
.lh-m{line-height:1.3}
.lh-l{line-height:1.4}
.lh-x{line-height:1.6}
.lh-xl{line-height:1.8}
.ls--03{letter-spacing: -.03em;}
.ws-nowrap{white-space:nowrap;}
.ws-normal{white-space:normal;}
/*simple*/
.italic{font-style: italic;}
.uppercase {text-transform: uppercase;}
/*********************************/
p {font-weight:500}
strong{}
/*.D {*/
/*font-family: var(--d);*/
/*font-family: var(--font-ui);*/
/*font-family: var(--font-display);*/
/*font-weight: 200;*/
/*letter-spacing: -.04em;*/
/*line-height: .95;*/
/*}*/
.hero-text{
font-family: var(--font);
/*font-family: var(--font-display);*/
font-weight: 400;
letter-spacing: -.04em;
line-height: .95;
/*font-size: clamp(46px, 11vw, 158px);*/
font-size: clamp(46px, 11vw, 122px);
/*max-width: 11ch;*/
}
.hero-sub{
margin-top:48px;
font:500 clamp(14px,1.5vw,17px)/1 var(--font);
color:var(--ink2);
/*max-width:52ch;*/
}
.text-center{text-align:center;}
.uppercase{text-transform:uppercase;}
.color-black-white{
color:black;
}
[data-theme="dark"] {
color:white;
}
/*.D em {*/
/* font-style: italic;*/
/* font-weight: 300;*/
/* color: var(--gold)*/
/*}*/
/*.tag {*/
/* font: 400 10px/1 var(--m);*/
/* letter-spacing: .36em;*/
/* text-transform: uppercase;*/
/* color: var(--gold)*/
/*}*/
/*.body-s {*/
/* font: 300 14px/2 var(--s);*/
/* color: var(--ink2)*/
/*}*/
/*.haze {*/
/* opacity: .12;*/
/* will-change: opacity*/
/*}*/
/*.hero-title {text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);}*/
/* ========================================================================== */
/* FILE: /css/app/classes/colors.css */
/* ========================================================================== */
.eyebrow {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
display: inline-block;
}
/* ========================================================================== */
/* FILE: /css/app/classes/shadow.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
IMAGE OVERLAY GRADIENTS — Standalone div classes
Directional shadows for image backgrounds
Light/dark theme-responsive
Usage: inside image container
═════════════════════════════════════════════════════════════ */
/* ── Base overlay ──────────────────────────────────────────── */
.overlay-hero {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
/* ════════════════════════════════════════════════════════════
LEFT-SIDE OVERLAYS (fade from left)
Use case: Text on left, image on right
═════════════════════════════════════════════════════════════ */
/* Light theme — fade to page background */
.overlay-left {
background: linear-gradient(90deg,
var(--bg) 0%,
var(--bg) 15%,
rgba(var(--bg-rgb), 0.85) 30%,
rgba(var(--bg-rgb), 0.4) 50%,
transparent 70%
);
}
/* Strong left — more coverage */
.overlay-left-strong {
background: linear-gradient(90deg,
var(--bg) 0%,
var(--bg) 25%,
rgba(var(--bg-rgb), 0.9) 40%,
rgba(var(--bg-rgb), 0.6) 60%,
transparent 80%
);
}
/* Subtle left — minimal fade */
.overlay-left-subtle {
background: linear-gradient(90deg,
rgba(var(--bg-rgb), 0.7) 0%,
rgba(var(--bg-rgb), 0.3) 30%,
transparent 60%
);
}
/* Dark theme adjustments for left overlays */
.dark.overlay-left,
[data-theme="dark"] .overlay-left {
background: linear-gradient(90deg,
#0d0c0a 0%,
#0d0c0a 12%,
rgba(13,12,10,0.88) 28%,
rgba(13,12,10,0.5) 50%,
transparent 72%
);
}
.dark.overlay-left-strong,
[data-theme="dark"] .overlay-left-strong {
background: linear-gradient(90deg,
#0d0c0a 0%,
#0d0c0a 22%,
rgba(13,12,10,0.92) 38%,
rgba(13,12,10,0.65) 58%,
transparent 78%
);
}
.dark.overlay-left-subtle,
[data-theme="dark"] .overlay-left-subtle {
background: linear-gradient(90deg,
rgba(13,12,10,0.75) 0%,
rgba(13,12,10,0.35) 32%,
transparent 62%
);
}
/* ════════════════════════════════════════════════════════════
RIGHT-SIDE OVERLAYS (fade from right)
Use case: Text on right, image on left
═════════════════════════════════════════════════════════════ */
.overlay-right {
background: linear-gradient(270deg,
var(--bg) 0%,
var(--bg) 15%,
rgba(var(--bg-rgb), 0.85) 30%,
rgba(var(--bg-rgb), 0.4) 50%,
transparent 70%
);
}
.overlay-right-strong {
background: linear-gradient(270deg,
var(--bg) 0%,
var(--bg) 25%,
rgba(var(--bg-rgb), 0.9) 40%,
rgba(var(--bg-rgb), 0.6) 60%,
transparent 80%
);
}
.overlay-right-subtle {
background: linear-gradient(270deg,
rgba(var(--bg-rgb), 0.7) 0%,
rgba(var(--bg-rgb), 0.3) 30%,
transparent 60%
);
}
[data-theme="dark"] .overlay-right {
background: linear-gradient(270deg,
#0d0c0a 0%,
#0d0c0a 12%,
rgba(13,12,10,0.88) 28%,
rgba(13,12,10,0.5) 50%,
transparent 72%
);
}
[data-theme="dark"] .overlay-right-strong {
background: linear-gradient(270deg,
#0d0c0a 0%,
#0d0c0a 22%,
rgba(13,12,10,0.92) 38%,
rgba(13,12,10,0.65) 58%,
transparent 78%
);
}
[data-theme="dark"] .overlay-right-subtle {
background: linear-gradient(270deg,
rgba(13,12,10,0.75) 0%,
rgba(13,12,10,0.35) 32%,
transparent 62%
);
}
/* ════════════════════════════════════════════════════════════
TOP OVERLAYS (fade from top)
Use case: Text at top, image below
═════════════════════════════════════════════════════════════ */
.overlay-top {
background: linear-gradient(180deg,
var(--bg) 0%,
var(--bg) 12%,
rgba(var(--bg-rgb), 0.85) 25%,
rgba(var(--bg-rgb), 0.4) 45%,
transparent 65%
);
}
.overlay-top-strong {
background: linear-gradient(180deg,
var(--bg) 0%,
var(--bg) 20%,
rgba(var(--bg-rgb), 0.9) 35%,
rgba(var(--bg-rgb), 0.6) 55%,
transparent 75%
);
}
.overlay-top-subtle {
background: linear-gradient(180deg,
rgba(var(--bg-rgb), 0.75) 0%,
rgba(var(--bg-rgb), 0.35) 28%,
transparent 58%
);
}
[data-theme="dark"] .overlay-top {
background: linear-gradient(180deg,
#0d0c0a 0%,
#0d0c0a 10%,
rgba(13,12,10,0.88) 24%,
rgba(13,12,10,0.5) 44%,
transparent 66%
);
}
[data-theme="dark"] .overlay-top-strong {
background: linear-gradient(180deg,
#0d0c0a 0%,
#0d0c0a 18%,
rgba(13,12,10,0.92) 33%,
rgba(13,12,10,0.65) 53%,
transparent 73%
);
}
[data-theme="dark"] .overlay-top-subtle {
background: linear-gradient(180deg,
rgba(13,12,10,0.78) 0%,
rgba(13,12,10,0.38) 30%,
transparent 60%
);
}
/* ════════════════════════════════════════════════════════════
BOTTOM OVERLAYS (fade from bottom)
Use case: Text at bottom, image above
═════════════════════════════════════════════════════════════ */
.overlay-bottom {
background: linear-gradient(0deg,
var(--bg) 0%,
var(--bg) 12%,
rgba(var(--bg-rgb), 0.85) 25%,
rgba(var(--bg-rgb), 0.4) 45%,
transparent 65%
);
}
.overlay-bottom-strong {
background: linear-gradient(0deg,
var(--bg) 0%,
var(--bg) 20%,
rgba(var(--bg-rgb), 0.9) 35%,
rgba(var(--bg-rgb), 0.6) 55%,
transparent 75%
);
}
.overlay-bottom-subtle {
background: linear-gradient(0deg,
rgba(var(--bg-rgb), 0.75) 0%,
rgba(var(--bg-rgb), 0.35) 28%,
transparent 58%
);
}
[data-theme="dark"] .overlay-bottom {
background: linear-gradient(0deg,
#0d0c0a 0%,
#0d0c0a 10%,
rgba(13,12,10,0.88) 24%,
rgba(13,12,10,0.5) 44%,
transparent 66%
);
}
[data-theme="dark"] .overlay-bottom-strong {
background: linear-gradient(0deg,
#0d0c0a 0%,
#0d0c0a 18%,
rgba(13,12,10,0.92) 33%,
rgba(13,12,10,0.65) 53%,
transparent 73%
);
}
[data-theme="dark"] .overlay-bottom-subtle {
background: linear-gradient(0deg,
rgba(13,12,10,0.78) 0%,
rgba(13,12,10,0.38) 30%,
transparent 60%
);
}
/* ════════════════════════════════════════════════════════════
RADIAL OVERLAYS (vignette from center)
Use case: Centered text, atmospheric darkening
═════════════════════════════════════════════════════════════ */
/* Center vignette — darkens edges */
.overlay-vignette {
background: radial-gradient(ellipse at center,
transparent 25%,
rgba(0,0,0,0.15) 60%,
rgba(0,0,0,0.35) 100%
);
}
.overlay-vignette-strong {
background: radial-gradient(ellipse at center,
transparent 20%,
rgba(0,0,0,0.25) 55%,
rgba(0,0,0,0.55) 100%
);
}
.overlay-vignette-subtle {
background: radial-gradient(ellipse at center,
transparent 30%,
rgba(0,0,0,0.08) 65%,
rgba(0,0,0,0.20) 100%
);
}
/* Inverse vignette — lightens edges (rare, but useful for dark images) */
.overlay-vignette-inverse {
background: radial-gradient(ellipse at center,
transparent 25%,
rgba(255,255,255,0.08) 60%,
rgba(255,255,255,0.18) 100%
);
}
[data-theme="dark"] .overlay-vignette {
background: radial-gradient(ellipse at center,
transparent 28%,
rgba(0,0,0,0.20) 62%,
rgba(0,0,0,0.45) 100%
);
}
[data-theme="dark"] .overlay-vignette-strong {
background: radial-gradient(ellipse at center,
transparent 22%,
rgba(0,0,0,0.32) 58%,
rgba(0,0,0,0.65) 100%
);
}
/* ════════════════════════════════════════════════════════════
CORNER OVERLAYS (diagonal fades)
Use case: Text in one corner, image in opposite
═════════════════════════════════════════════════════════════ */
/* Top-left corner fade */
.overlay-corner-tl {
background: radial-gradient(ellipse at 0% 0%,
var(--bg) 0%,
rgba(var(--bg-rgb), 0.85) 25%,
rgba(var(--bg-rgb), 0.4) 45%,
transparent 65%
);
}
/* Top-right corner fade */
.overlay-corner-tr {
background: radial-gradient(ellipse at 100% 0%,
var(--bg) 0%,
rgba(var(--bg-rgb), 0.85) 25%,
rgba(var(--bg-rgb), 0.4) 45%,
transparent 65%
);
}
/* Bottom-left corner fade */
.overlay-corner-bl {
background: radial-gradient(ellipse at 0% 100%,
var(--bg) 0%,
rgba(var(--bg-rgb), 0.85) 25%,
rgba(var(--bg-rgb), 0.4) 45%,
transparent 65%
);
}
/* Bottom-right corner fade */
.overlay-corner-br {
background: radial-gradient(ellipse at 100% 100%,
var(--bg) 0%,
rgba(var(--bg-rgb), 0.85) 25%,
rgba(var(--bg-rgb), 0.4) 45%,
transparent 65%
);
}
[data-theme="dark"] .overlay-corner-tl,
[data-theme="dark"] .overlay-corner-tr,
[data-theme="dark"] .overlay-corner-bl,
[data-theme="dark"] .overlay-corner-br {
background: radial-gradient(ellipse,
#0d0c0a 0%,
rgba(13,12,10,0.88) 26%,
rgba(13,12,10,0.45) 46%,
transparent 66%
);
}
/* ════════════════════════════════════════════════════════════
FULL OVERLAYS (entire section darkening/lightening)
Use case: Low contrast images needing readability boost
═════════════════════════════════════════════════════════════ */
.overlay-darken {
background: rgba(0,0,0,0.25);
}
.overlay-darken-strong {
background: rgba(0,0,0,0.45);
}
.overlay-darken-subtle {
background: rgba(0,0,0,0.12);
}
.overlay-lighten {
background: rgba(255,255,255,0.20);
}
.overlay-lighten-strong {
background: rgba(255,255,255,0.35);
}
.overlay-lighten-subtle {
background: rgba(255,255,255,0.10);
}
[data-theme="dark"] .overlay-darken {
background: rgba(0,0,0,0.35);
}
[data-theme="dark"] .overlay-darken-strong {
background: rgba(0,0,0,0.55);
}
/* ════════════════════════════════════════════════════════════
COMBINED OVERLAYS (stack multiple effects)
Use case: Apply via multiple div classes for complex fades
Example:
═════════════════════════════════════════════════════════════ */
/* Multiple overlays work via stacking — each div gets z-index: 1 */
/* Layer them in HTML order — first div = bottom layer */
/* ════════════════════════════════════════════════════════════
USAGE EXAMPLES
═════════════════════════════════════════════════════════════ */
/*
Your text here
Your text here
Your text here
Your text here
Your text here
*/
/* ========================================================================== */
/* FILE: /css/app/classes/layout/footer.css */
/* ========================================================================== */
.footer-inner {
max-width: var(--max);
margin: 0 auto;
display: flex; flex-direction: column; gap: 32px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
padding-bottom: 40px;
/*border-bottom: 1px solid var(--line);*/
}
.footer-brand h3 {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 12px;
}
.footer-brand p { font-size: 13px; color: var(--text-2); line-height: 1.7; max-width: 360px; }
.footer-col h4 {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
font-size: 13px;
color: var(--text-2);
text-decoration: none;
cursor: pointer;
transition: color 0.2s;
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.footer-copy {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-3);
letter-spacing: 0.08em;
}
.footer-domains {
display: flex; gap: 20px; flex-wrap: wrap;
}
.footer-domains a {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-3);
text-decoration: none;
letter-spacing: 0.06em;
transition: color 0.2s;
cursor: pointer;
}
.footer-domains a:hover { color: var(--gold); }
@media (max-width: 1024px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
footer { padding: 48px 24px 32px; }
}
/* ========================================================================== */
/* FILE: /res/app/scroll/scroll-reveal.css */
/* ========================================================================== */
/* ═══════════════════════════════════════════════
PAGE SYSTEM
═══════════════════════════════════════════════ */
.page { display: none; position: relative; z-index: 1; }
.page.active { display: block; }
/* Page transition */
.page-enter { animation: pageIn 0.6s var(--ease-out) both; }
@keyframes pageIn {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* Scroll reveal */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
/* Reveal */
/*.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }*/
/*.reveal.visible { opacity: 1; transform: translateY(0); }*/
/*.reveal-d1 { transition-delay: 0.08s; }*/
/*.reveal-d2 { transition-delay: 0.16s; }*/
/*.reveal-d3 { transition-delay: 0.24s; }*/
/* ============================================================================
19. REVEAL ANIMATIONS — scroll-on belépő animációk
============================================================================ */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity var(--t-slower), transform var(--t-slower);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }
.reveal.d5 { transition-delay: 0.40s; }
/* ============================================================================
22. ACCESSIBILITY — hozzáférhetőség
============================================================================ */
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; }
}
/* ========================================================================== */
/* FILE: /res/app/scroll/scroll-anim.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════════════
anim — szekció- és tartalom-animáció animra (be- ÉS kilépéskor)
Függőség: nincs. Rejtett állapot csak html.js alatt — JS nélkül
minden látható marad.
── HASZNÁLAT ────────────────────────────────────────────────────
Bármely elemre vagy komplett szekcióra:
data-anim → alap: felúszik (irányérzékeny)
data-anim="kod" → ködből élesedik
data-anim="lap" → lapként emelkedik (skála + úszás)
data-anim="balrol" → balról úszik be
data-anim="jobbrol" → jobbról úszik be
data-anim="zoom" → mélyből közelít
MÓDOK
(alap) → MINDEN belépésnél be, kilépésnél ki
data-anim-egyszer → csak az első belépéskor, utána marad
OPCIÓK
data-anim-kesleltetes=".2" belépési késleltetés (mp)
data-anim-kuszob=".25" mennyi látszódjon a váltáshoz (0–1)
data-anim-gyerekek a KÖZVETLEN gyerekeket animálja,
lépcsőzve — komplett szekciókhoz
data-anim-lepes=".08" lépcső két gyerek között (mp)
IRÁNYÉRZÉKELÉS (automatikus): lefelé görgetve a tartalom alulról
érkezik és felfelé távozik; felfelé görgetve fordítva — a mozgás
mindig a görgetés terében marad.
API: anim.scan(gyoker) — dinamikusan beszúrt tartalomhoz.
════════════════════════════════════════════════════════════════════ */
/* ── anim mag — ezt emeld át az oldaladba ─────────────────────── */
.js [data-anim]{
opacity:var(--op,0);
transform:translate3d(var(--sx,0px), calc(var(--tv,38px) * var(--ir,1)), 0) scale(var(--sk,1));
filter:blur(var(--bl,0px));
/*transition:opacity var(--ido,.85s) ease,transform var(--ido2,1.05s) cubic-bezier(.19,1,.22,1),filter .85s ease;*/
transition:opacity var(--ido,1.2s) ease,transform var(--ido2,1.05s) cubic-bezier(.19,1,.22,1),filter .85s ease;
transition-delay:var(--kes,0s);
will-change:opacity,transform;
}
.js [data-anim="fog"]{--tv:0px; --bl:16px;--ido:2s;}
.js [data-anim="page"]{--tv:54px; --sk:.965;}
.js [data-anim="left"]{--tv:0px; --sx:-52px;}
.js [data-anim="right"]{--tv:0px; --sx:52px;}
.js [data-anim="zoom"]{--tv:0px; --sk:.9;}
.js [data-anim="show"]{--op:0;}
.js [data-anim].is-visible{opacity:1; transform:none; filter:none;}
@media (prefers-reduced-motion:reduce){
.js [data-anim]{transition-duration:.01ms !important;}
}
/* ── /anim mag ── */
/* ========================================================================== */
/* FILE: /css/app/classes/scroll/sections.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════
SAJÁT SCROLL-RENDSZER — pin-mentes, üzembiztos
────────────────────────────────────────────────────────
A jelenet-szekciók magasak (utazási táv = magasság−100svh),
a belső .pin réteg natív CSS sticky-vel tapad. Nincs
pin-spacer, nincs újraszámolási hiba — a geometria sima
dokumentumfolyam. A progress-t a Scenes JS-motor adja.
════════════════════════════════════════════════════════ */
/*#why{height:420svh}*/
/*#flood{height:520svh}*/
/*#rage{height:400svh}*/
/*#mis{height:340svh}*/
/*#hate{height:360svh}*/
/*#tun{height:440svh}*/
/*#why .pin,*/
#flood .pin,
#rage .pin,
#mis .pin,
#hate .pin,
#tun .pin{
position:sticky;
top:0
}
/* ========================================================================== */
/* FILE: /res/view/section/section.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
SECTION
═════════════════════════════════════════════════════════════ */
section.no-padding{
padding: 0px 0;
}
.section-intro {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 100px;
margin-bottom: 80px;
align-items: end;
}
.section-h2 {
font-family: var(--font-serif);
font-size: clamp(36px, 5vw, 64px);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--text);
margin-top: 24px;
/*text-transform: uppercase;*/
}
.section-h2 em {
font-style: italic;
font-weight: 400;
color: var(--gold);
text-transform: none;
}
.section-body {
font-size: 16px;
color: var(--text-2);
/*line-height: 1.85;*/
max-width: 520px;
}
@media (max-width: 1024px) {
section { padding: 100px 0; }
.section-intro { grid-template-columns: 1fr; gap: 32px; }
}
/**/
.section-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--text-3);
display: flex; align-items: center; gap: 12px;
}
.section-label::before {
content: '';
display: block; width: 28px; height: 1px;
background: var(--gold);
flex-shrink: 0;
}
/* ============================================================
SECTION FRAMEWORK
============================================================ */
/*.section-light { background: var(--cream); color: var(--ink); --section-line: var(--line); --section-line-strong: var(--line-strong); --section-accent: var(--sepia-warm); --section-muted: var(--sepia); }*/
/*.section-soft { background: var(--cream-soft); color: var(--ink); --section-line: var(--line); --section-line-strong: var(--line-strong); --section-accent: var(--sepia-warm); --section-muted: var(--sepia); }*/
/*.section-dark { background: var(--ink); color: var(--cream); --section-line: var(--line-light); --section-line-strong: var(--line-light-strong); --section-accent: var(--paper); --section-muted: var(--paper); }*/
/*.section-dark {background: var(--ink);color: var(--cream);}*/
.section-dark .section-marker .desc,
.section-dark .section-marker .name,
.section-dark .section-marker .num { color: var(--paper); }
.container {
/*max-width: 1400px;*/
max-width: 1500px;
margin: 0 auto;
position: relative;
}
/* ----- SECTION — szekció keret ----- */
.section {
position: relative;
/*padding: var(--sp-20) var(--sp-8);*/
}
/*.section.light { background: var(--cream); color: var(--ink); }*/
/*.section.dark { background: var(--ink); color: var(--cream); }*/
/*.section.soft { background: var(--cream-soft); color: var(--ink); }*/
.section.tight { padding: var(--sp-12) var(--sp-8); }
.section.tall { padding: var(--sp-32) var(--sp-8); }
/* Section eyebrow — szekció felső címke */
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 16px;
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--sepia);
font-style: italic;
margin-bottom: var(--sp-8);
}
.section-eyebrow::before {
content: ''; width: 40px; height: 1px; background: currentColor;
}
/* Section title — szekció főcím */
.section-title {
font-size: clamp(40px, 5.5vw, 96px);
font-weight: 300;
line-height: 0.96;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 144;
max-width: 16ch;
}
.section-title em { font-style: italic; color: var(--sepia-deep); font-weight: 400; }
.dark .section-title em { color: var(--paper); }
/* ========================================================================== */
/* FILE: /res/view/section/hero/v15.css */
/* ========================================================================== */
/* ════════ HERO ════════ */
#hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 22px;position:relative}
.hero-tag{margin-bottom:42px;opacity:0}
.hero-t{font-size:clamp(46px,11vw,158px);max-width:11ch}
.hero-t .L{display:inline-block;white-space:pre;opacity:0;transform:translateY(.25em)}
/*.hero-sub{margin-top:48px;font:300 clamp(14px,1.5vw,17px)/2 var(--s);color:var(--ink2);max-width:52ch;}*/
.hero-cue{position:absolute;bottom:clamp(28px,5vh,52px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0}
.hero-cue span{font:400 9px/1 var(--m);letter-spacing:.34em;text-transform:uppercase;color:var(--ink3)}
.hero-cue i{width:1px;height:46px;background:linear-gradient(var(--gold),transparent);animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(.15);transform-origin:top;opacity:.4}55%{transform:scaleY(1);transform-origin:top;opacity:1}56%{transform-origin:bottom}100%{transform:scaleY(.08);transform-origin:bottom;opacity:.3}}
/* ========================================================================== */
/* FILE: /res/view/section/hero/v1.css */
/* ========================================================================== */
/* ═══════════════════════════════════════════════
HOME — HERO
═══════════════════════════════════════════════ */
.hero {
min-height: 100svh;
padding-top: var(--nav-h);
display: grid;
grid-template-rows: 1fr auto;
position: relative;
overflow: hidden;
}
.hero-content {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 40px 80px;
max-width: var(--max);
width: 100%;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* Giant background number */
.hero-bg-num {
position: absolute;
right: -40px;
/*right:8%;*/
top: 50%;
transform: translateY(-50%);
/*font-family: var(--font-display);*/
font-size: clamp(200px, 35vw, 500px);
font-weight: 700;
/*color: transparent;*/
color:var(--bg);
/*color:var(--gold);*/
/*-webkit-text-stroke: 1px var(--border2);*/
/*line-height: 0.85;*/
line-height: 0.65;
pointer-events: none;
user-select: none;
letter-spacing: -0.05em;
white-space: nowrap;
}
.hero-eyebrow {
margin-bottom: 32px;
}
.hero-h1 {
/*font-family: var(--font-display);*/
font-size: clamp(56px, 9vw, 130px);
font-weight: 300;
line-height: 0.92;
letter-spacing: -0.03em;
color: var(--text);
max-width: 900px;
margin-bottom: 48px;
}
.hero-h1 em {
font-style: italic;
color: var(--gold);
}
.hero-h1 strong {
font-weight: 700;
display: block;
}
.hero-bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.hero-desc {
font-size: clamp(14px, 1.3vw, 16px);
/*color: var(--text2);*/
color: var(--gold);
max-width: 480px;
line-height: 1.8;
font-weight: 400;
}
.hero-ctas {
display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap;
}
/* Scroll indicator */
.scroll-hint {
position: absolute;
bottom: 32px; right: 40px;
display: flex; flex-direction: column; align-items: center; gap: 8px;
opacity: 0.4;
animation: scrollBob 2s ease-in-out infinite;
}
.scroll-hint-line {
width: 1px; height: 48px;
background: linear-gradient(to bottom, var(--gold), transparent);
}
.scroll-hint-label {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text3);
writing-mode: vertical-lr;
}
@keyframes scrollBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
/***/
/* ═══════════════════════════════════════════════
PAGE HEROES (other pages)
═══════════════════════════════════════════════ */
.page-hero {
padding: calc(var(--nav-h) + 80px) 40px 80px;
max-width: var(--max);
margin: 0 auto;
position: relative;
}
.page-hero-eyebrow { margin-bottom: 24px; }
.page-hero-h1 {
/*font-family: var(--font-display);*/
font-size: clamp(48px, 7vw, 100px);
font-weight: 300;
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--text);
max-width: 800px;
margin-bottom: 32px;
}
.page-hero-h1 em { font-style: italic; color: var(--gold); }
.page-hero-body {
font-size: 16px;
color: var(--text2);
max-width: 560px;
line-height: 1.85;
}
/* ========================================================================== */
/* FILE: /res/view/section/hero/v4.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
PAGE HERO (inner pages)
═════════════════════════════════════════════════════════════ */
.page-hero {
padding: calc(var(--nav-h) + 100px) 48px 80px;
max-width: var(--max);
margin: 0 auto;
position: relative;
}
.page-hero-h1 {
/*font-family: var(--font-display);*/
font-size: clamp(48px, 7vw, 96px);
font-weight: 500;
line-height: 1.0;
letter-spacing: -0.025em;
color: var(--text);
margin: 28px 0 32px;
max-width: 900px;
text-transform: uppercase;
}
.page-hero-h1 em {
font-style: italic;
font-weight: 400;
color: var(--gold);
text-transform: none;
}
.page-hero-body {
font-size: 17px;
color: var(--text-2);
max-width: 600px;
line-height: 1.85;
margin-bottom: 32px;
}
@media (max-width: 768px) { .page-hero { padding: calc(var(--nav-h) + 60px) 24px 60px; } }
/* ════════════════════════════════════════════════════════════
HERO BACKGROUND ATMOSPHERE (cloudy sky)
═════════════════════════════════════════════════════════════ */
.atmosphere {
position: absolute;
top: 0; left: 0; right: 0;
height: 100vh;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.atmosphere::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 90% 60% at 50% 30%, var(--hero-grad-1) 0%, transparent 70%),
radial-gradient(ellipse 70% 50% at 70% 50%, var(--hero-grad-2) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 30% 60%, var(--hero-grad-3) 0%, transparent 50%);
filter: blur(20px);
}
.atmosphere::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 60% 35%, var(--gold-glow) 0%, transparent 30%);
opacity: 0.35;
filter: blur(40px);
}
[data-theme="dark"] .atmosphere::after { opacity: 0.5; }
/* Floating particles */
.particles {
position: absolute; inset: 0;
pointer-events: none;
}
.particle {
position: absolute;
width: 3px; height: 3px;
border-radius: 50%;
background: var(--gold);
opacity: 0.4;
animation: float 12s infinite ease-in-out;
}
@keyframes float {
0%, 100% { transform: translateY(0) translateX(0); opacity: 0.4; }
25% { transform: translateY(-30px) translateX(10px); opacity: 0.7; }
50% { transform: translateY(-15px) translateX(-15px); opacity: 0.3; }
75% { transform: translateY(20px) translateX(8px); opacity: 0.5; }
}
/* ════════════════════════════════════════════════════════════
HERO (home)
═════════════════════════════════════════════════════════════ */
.hero-new {
min-height: 100vh;
padding-top: var(--nav-h);
padding-bottom: 32px;
position: relative;
display: grid;
grid-template-rows: 1fr auto;
align-items: stretch;
overflow: hidden;
}
.hero-grid {
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 60px 48px 40px;
display: grid;
grid-template-columns: minmax(380px, 0.7fr) 1fr;
gap: 60px;
align-items: start;
position: relative;
z-index: 2;
}
.hero-flex {
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 60px 48px 40px;
display: flex;
align-items: end;
position: relative;
z-index: 2;
}
.hero-left {
display: flex;
flex-direction: column;
gap: 28px;
max-width: 560px;
align-self: start;
padding-top: 40px;
}
.hero-new .hero-h1 {
/*font-family: var(--font-display);*/
font-size: clamp(44px, 5vw, 80px);
font-weight: 500;
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--text);
text-transform: uppercase;
font-feature-settings: "kern" 1, "liga" 1;
margin-bottom: 4px;
}
.hero-new .hero-h1 em {
font-style: normal;
font-weight: 500;
color: var(--text);
text-transform: uppercase;
}
.hero-new .hero-desc {
font-size: 14px;
color: var(--text-2);
line-height: 1.7;
max-width: 380px;
font-weight: 400;
}
.hero-new .hero-cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
margin-top: 4px;
}
/* ========================================================================== */
/* FILE: /res/view/section/why/v15.css */
/* ========================================================================== */
/* ════════ MIÉRT ════════ */
#why .pin {
height: 100svh;
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
/*position:relative;*/
overflow: hidden;
position: sticky;
top: 0;
}
.why-line {
/*position: absolute;*/
/*left: 0;*/
/*right: 0;*/
/*opacity: 0;*/
text-align: center;
/*padding: 0 clamp(22px, 10vw, 160px);*/
/*font-size: clamp(30px, 6vw, 84px);*/
/*font-size: clamp(30px, 6vw, 64px);*/
font-size: clamp(30px, 6vw, 48px);
transform: translateY(30px)
}
.why-line strong {
font-weight: 300;
color: var(--ink)
}
.why-line span {
color: var(--ink2)
}
.why-fin {
/*position: absolute;*/
/*left: 0;*/
/*right: 0;*/
/*opacity: 0;*/
text-align: center;
padding: 0 24px;
font: 300 clamp(15px, 1.8vw, 20px)/1.9 var(--s);
color: var(--gold);
transform: translateY(24px)
}
/* ════════ MIÉRT ════════ */
/*#why .pin{height:100svh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}*/
/*.why-line{position:absolute;left:0;right:0;text-align:center;padding:0 clamp(22px,10vw,160px);font-size:clamp(30px,6vw,84px);opacity:0;transform:translateY(30px)}*/
/*.why-line strong{font-weight:300;color:var(--ink)}*/
/*.why-line span{color:var(--ink2)}*/
/*.why-fin{position:absolute;left:0;right:0;text-align:center;padding:0 24px;font:300 clamp(15px,1.8vw,20px)/1.9 var(--s);color:var(--gold);opacity:0;transform:translateY(24px)} */
/* ========================================================================== */
/* FILE: /res/view/section/hero/process/v4.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
"HOGYAN MŰKÖDIK?" — process steps (panel style)
═════════════════════════════════════════════════════════════ */
/*:root{*/
/*--surface*/
/*}*/
.process-panel {
background: var(--surface);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: var(--r-card);
padding: 36px 40px;
box-shadow: var(--shadow-card);
}
[data-theme="dark"] .process-panel {
background: var(--glass-bg);
border-color: var(--line);
}
/* Compact variant inside hero-left — matches reference image */
.hero-process-wrap {
margin-top: 12px;
max-width: 420px;
}
.hero-process-eyebrow {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--text-2);
margin-bottom: 12px;
display: block;
}
.process-panel.hero-process {
padding: 22px 26px;
/*background: rgba(255, 255, 255, 0.40);*/
background: var(--surface);
border: 1px solid rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .process-panel.hero-process {
background: rgba(30, 28, 22, 0.55);
border-color: var(--line);
}
.process-list {
list-style: none;
display: flex; flex-direction: column;
}
.process-item {
display: grid;
grid-template-columns: 28px 1fr;
gap: 16px;
padding: 12px 0;
position: relative;
align-items: start;
}
/* Vertical line between numbers in hero-process */
.hero-process .process-item::before {
content: '';
position: absolute;
top: 30px;
bottom: -10px;
left: 13px;
width: 1px;
background: var(--line);
}
.hero-process .process-item:last-child::before { display: none; }
.process-item:last-child { padding-bottom: 0; }
.process-num {
/*font-family: var(--font-mono);*/
font-size: 10px;
font-weight: 500;
color: var(--text-3);
letter-spacing: 0.06em;
padding-top: 3px;
position: relative;
z-index: 1;
background: transparent;
text-align:center;
}
.hero-process .process-num {
background: var(--surface);
padding: 3px 0;
}
[data-theme="dark"] .hero-process .process-num {
background: var(--bg-tint);
}
.process-item.active .process-num { color: var(--gold); font-weight: 600; }
.process-content h4 {
font-family: var(--font-ui);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text);
margin-bottom: 4px;
line-height: 1.3;
}
.process-content p {
font-size: 12px;
color: var(--text-2);
line-height: 1.55;
}
/* ========================================================================== */
/* FILE: /res/view/section/feature-list/v4.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
FEATURE LIST (editorial) — reszponzív
------------------------------------------------------------
A csúszások okai és a javításuk:
· a középső oszlop nem tudott zsugorodni → minmax(0, 1fr)
· a .feature-name inline volt → block
· a címke „auto” oszlopa törhetett → 860 alatt saját sorba
· a hover padding-left elmozdította az
egész rácsot (a címke is ugrott) → csak a szöveg mozdul
· középre igazítás többsoros szövegnél → felső igazítás,
optikai eltolással
════════════════════════════════════════════════════════════ */
.feature-list{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;
}
.feature-item{
display:grid;
grid-template-columns:44px minmax(0,1fr) auto;
column-gap:clamp(16px,2vw,24px);
row-gap:12px;
align-items:start; /* nem középre: többsoros szövegnél az csúszik */
padding:clamp(22px,2.6vw,28px) 16px;
border-bottom:1px solid var(--line);
cursor:pointer;
transition:background .25s var(--ease);
}
.feature-item:first-child{border-top:1px solid var(--line)}
.feature-item:hover{background:var(--surface)}
/* a hover elmozdulás csak a szöveget viszi — a rács nem ugrik */
.feature-num,
.feature-text{transition:transform .3s var(--ease)}
.feature-item:hover .feature-num,
.feature-item:hover .feature-text{transform:translateX(10px)}
.feature-num{
font-family:var(--font-mono);font-size:11px;line-height:1;
color:var(--text-3);letter-spacing:.1em;
padding-top:.72em; /* a névsor közepére optikailag */
white-space:nowrap;
}
.feature-text{min-width:0} /* enélkül a hosszú szöveg szétfeszíti a rácsot */
.feature-name{
display:block; /* span volt: emiatt csúszott a leírás */
font-family:var(--font-display);
font-size:clamp(20px,2.1vw,28px);
font-weight:500;line-height:1.15;
color:var(--text);letter-spacing:-.01em;
transition:color .2s;
text-wrap:balance;
}
.feature-item:hover .feature-name{color:var(--gold)}
.feature-desc{
font-family:var(--font-mono);
font-size:11px;line-height:1.65;
color:var(--text-3);letter-spacing:.04em;
margin-top:6px;max-width:56ch;
}
.feature-tag{
justify-self:end;align-self:start;
margin-top:.5em;
font-family:var(--font-mono);font-size:9px;line-height:1;
letter-spacing:.15em;text-transform:uppercase;
color:var(--text-3);background:var(--surface);
border:1px solid var(--line);
padding:6px 11px;border-radius:100px;
white-space:nowrap;
}
/* ── 900 alatt: a címke a szöveg alá kerül, nem szorítja a nevet ── */
@media (max-width:900px){
.feature-item{grid-template-columns:38px minmax(0,1fr)}
.feature-tag{
grid-column:2;justify-self:start;
margin-top:14px;
}
.feature-item:hover .feature-num,
.feature-item:hover .feature-text{transform:translateX(6px)}
}
/* ── 520 alatt: a sorszám a név fölé, egy hasáb ── */
@media (max-width:520px){
.feature-item{
grid-template-columns:1fr;
padding:22px 0;row-gap:8px;
}
.feature-num{padding-top:0}
.feature-tag{grid-column:1;margin-top:12px}
.feature-item:hover{background:none}
.feature-item:hover .feature-num,
.feature-item:hover .feature-text{transform:none}
}
/* ── a bevezető rács is bomoljon ── */
@media (max-width:900px){
.section-intro{grid-template-columns:1fr;gap:28px}
}
@media (prefers-reduced-motion:reduce){
.feature-item,.feature-num,.feature-text,.feature-name{transition:none}
.feature-item:hover .feature-num,
.feature-item:hover .feature-text{transform:none}
}
/* ========================================================================== */
/* FILE: /res/view/section/join/v4.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
JOIN BLOCK
═════════════════════════════════════════════════════════════ */
.join-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 80px 0;
background:transparent !important;
border:none !important;
}
.join-card {
background: var(--surface);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: var(--r-card);
padding: 56px;
/*box-shadow: var(--shadow-card);*/
}
[data-theme="dark"] .join-card { background: var(--glass-bg); border-color: var(--line); }
.join-h3 {
/*font-family: var(--font-display);*/
font-size: 36px;
font-weight: 500;
color: var(--text);
margin: 16px 0;
line-height: 1.15;
letter-spacing: -0.015em;
}
.join-body {
font-size: 14px;
color: var(--text-2);
line-height: 1.75;
margin-bottom: 32px;
}
.progress-row {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 12px;
}
.progress-label { font-size: 11px; color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; }
.progress-count { font-family: var(--font-mono); font-size: 13px; color: var(--gold); letter-spacing: 0.06em; }
.progress-track {
height: 2px; background: var(--line);
border-radius: 1px; overflow: hidden;
margin-bottom: 8px;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--gold), var(--gold-2));
border-radius: 1px;
transition: width 1.5s var(--ease-out);
}
.progress-note { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }
.join-form {
display: flex; gap: 8px; margin-top: 28px;
}
.join-input {
flex: 1;
padding: 0 18px;
height: 44px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 100px;
color: var(--text);
font-family: var(--font-ui);
font-size: 13px;
outline: none;
transition: border-color 0.2s, background 0.2s;
}
.join-input:focus { border-color: var(--gold); background: var(--surface); }
.join-input::placeholder { color: var(--text-3); }
@media (max-width: 900px) {
.join-block { grid-template-columns: 1fr; }
.join-card { padding: 40px 28px; }
}
/* ========================================================================== */
/* FILE: /res/view/section/mission/v4.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
MISSION QUOTE
═════════════════════════════════════════════════════════════ */
.mission-block {
padding: 140px 0;
text-align: center;
/*border-top: 1px solid var(--line);*/
/*border-bottom: 1px solid var(--line);*/
}
.mission-quote {
/*font-family: var(--font-display);*/
font-size: clamp(28px, 4.5vw, 56px);
font-weight: 400;
font-style: italic;
color: var(--text);
line-height: 1.4;
max-width: 1200px;
margin: 0 auto 32px;
letter-spacing: -0.015em;
}
.mission-quote strong {
font-weight: 600;
/*font-style: normal;*/
color: var(--gold);
}
.mission-attr {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--text-3);
}
/* ========================================================================== */
/* FILE: /res/view/section/mission/v15.css */
/* ========================================================================== */
/* ════════ KÜLDETÉS ════════ */
#mis .pin{height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;text-align:center;padding:0 22px}
.mis-pre{font:400 10px/1 var(--m);letter-spacing:.36em;text-transform:uppercase;color:var(--ink3);margin-bottom:40px;opacity:0}
.mis-stage{position:relative;height:clamp(64px,12vw,176px);width:100%;display:flex;align-items:center;justify-content:center}
.mis-w{position:absolute;font-size:clamp(48px,11vw,164px);opacity:0;white-space:nowrap}
.mis-w.neg{color:var(--ink3)}
.mis-w.neg::after{content:'';position:absolute;left:-2%;right:-2%;top:52%;height:2px;background:var(--red);transform:scaleX(var(--strike,0));transform-origin:left}
.mis-ls{margin-top:54px;display:flex;flex-direction:column;align-items:center;opacity:0}
.mis-ls span{font:300 clamp(13.5px,1.6vw,17px)/1 var(--s);color:var(--ink2);padding:12px 0;display:flex;gap:16px;align-items:center}
.mis-ls span::before{content:'';width:26px;height:1px;background:var(--gold)}
/* ========================================================================== */
/* FILE: /res/view/section/modules/grid/v4.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
MODULES GRID (glass cards)
═════════════════════════════════════════════════════════════ */
.modules-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
background:transparent !important;
border:none !important;
}
.module-card {
background: var(--surface);
/*backdrop-filter: blur(20px);*/
/*-webkit-backdrop-filter: blur(20px);*/
border: 1px solid var(--glass-border);
border-radius: var(--r-card);
padding: 36px 32px;
transition: all 0.35s var(--ease-out);
position: relative;
overflow: hidden;
/*box-shadow: var(--shadow-card);*/
}
[data-theme="dark"] .module-card {
background: var(--glass-bg);
border-color: var(--line);
}
.module-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 2px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s var(--ease-out);
}
.module-card:hover::before { transform: scaleX(1); }
.module-card:hover {
transform: translateY(-4px);
border-color: var(--gold);
box-shadow: 0 32px 64px -12px rgba(80,60,30,0.18);
}
[data-theme="dark"] .module-card:hover { box-shadow: 0 32px 64px -12px rgba(0,0,0,0.5); }
.module-num {
font-family: var(--font-mono);
font-size: 40px;
font-weight: 300;
color: var(--text-3);
line-height: 1;
letter-spacing: -0.04em;
margin-bottom: 24px;
transition: color 0.3s;
}
.module-card:hover .module-num { color: var(--gold); }
.module-title {
/*font-family: var(--font-display);*/
font-size: 24px;
font-weight: 600;
color: var(--text);
margin-bottom: 12px;
line-height: 1.2;
letter-spacing: -0.01em;
}
.module-body {
font-size: 14px;
color: var(--text-2);
line-height: 1.7;
margin-bottom: 16px;
}
.module-desc {
font-size: 11px;
color: var(--text-3);
font-family: var(--font-mono);
line-height: 1.7;
letter-spacing: 0.02em;
margin-bottom: 20px;
border-top: 1px solid var(--line);
padding-top: 16px;
}
.module-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.module-tag {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-3);
padding: 4px 10px;
border: 1px solid var(--line);
border-radius: 100px;
}
@media (max-width: 1024px) { .modules-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .modules-grid { grid-template-columns: 1fr; } }
/* ========================================================================== */
/* FILE: /res/view/section/support/v4.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
SUPPORT CARDS
═════════════════════════════════════════════════════════════ */
.support-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin-bottom: 60px;
}
.support-card {
display: flex; align-items: center; gap: 20px;
padding: 24px 28px;
background: var(--surface);
border: 1px solid var(--glass-border);
border-radius: var(--r-card);
text-decoration: none;
cursor: pointer;
transition: all 0.25s;
box-shadow: var(--shadow-card);
}
[data-theme="dark"] .support-card { background: var(--glass-bg); border-color: var(--line); }
.support-card:hover {
border-color: var(--gold);
background: var(--gold-light);
transform: translateY(-2px);
}
.support-card-icon {
width: 48px; height: 48px;
border-radius: 50%;
background: var(--surface-2);
border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.support-card h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; letter-spacing: 0.02em; }
.support-card p { font-size: 12px; color: var(--text-2); }
@media (max-width: 768px) { .support-grid { grid-template-columns: 1fr; } }
/* ========================================================================== */
/* FILE: /res/view/section/wall/demo/v11.css */
/* ========================================================================== */
/* ============================================================
LAPFAL — az Emlékezet Fala dokumentumfalának egy kivágott
részlete. A rács a keret mind a négy oldalán folytatódik.
Csempearányok — kötöttek:
dokumentum / idézet ....... A4 (1 : 1.4142), álló
kép / videó / hang / adat . szabályos négyzet (1 : 1)
A csempéken nincs felület-kezelőelem: a dokumentum maga a
szöveg, a médián a felirat csak hoverre jelenik meg.
============================================================ */
.lapfal{
/* --- a fal --- */
--lf-bg: #0b0a09;
--lf-bg-2: #121110;
--lf-bg-3: #0e0d0c;
/* --- a papír --- */
--lf-paper: #e9e5db;
--lf-paper-hi: #f2efe8;
--lf-sheet: #f1eee6;
--lf-fold-face: #d5cfc0;
/* --- tinta --- */
--lf-ink: #16140f;
--lf-ink-2: #4c473d;
--lf-ink-3: #7f7a6d;
--lf-line: rgba(22,20,15,.18);
--lf-line-soft: rgba(22,20,15,.09);
/* --- jelzőszínek --- */
--lf-gold: #c9a87a;
--lf-ice: #a9d8df;
/* --- az előtér --- */
--lf-veil: rgba(6,5,4,.80);
--lf-scrim: rgba(6,5,4,.88);
--lf-scrim-6: rgba(6,5,4,.52);
--lf-scrim-3: rgba(6,5,4,.22);
--lf-scrim-0: rgba(6,5,4,0);
--lf-onveil: rgba(234,230,220,.72);
--lf-onveil-hi: #eae6dc;
--lf-lift: 0 46px 100px -38px rgba(0,0,0,.92);
--lf-cast: drop-shadow(0 18px 30px rgba(0,0,0,.5));
--lf-cast-hi: drop-shadow(0 28px 48px rgba(0,0,0,.66));
/* --- a falon ülő elemek (sötét alapon) --- */
--lf-onwall-ink: #eae6dc;
--lf-onwall-1: rgba(234,230,220,.10);
--lf-onwall-2: rgba(234,230,220,.07);
--lf-onwall-3: rgba(234,230,220,.16);
--lf-onwall-4: rgba(234,230,220,.26);
--lf-onwall-05: rgba(234,230,220,.03);
--lf-onwall-txt: rgba(234,230,220,.62);
--lf-onwall-dim: rgba(234,230,220,.42);
--lf-onwall-grid:rgba(234,230,220,.09);
--lf-tlines: rgba(234,230,220,.15);
--lf-tlines-lt: rgba(22,20,15,.30);
--lf-fold-ghost: #2a2721;
/* --- papírvonalak, hajtás-árnyék --- */
--lf-paper-line: rgba(22,20,15,.30);
--lf-paper-line-2: rgba(22,20,15,.40);
--lf-fold-sh: rgba(22,20,15,.50);
--lf-fold-sh-2: rgba(0,0,0,.70);
--lf-fold-sh-3: rgba(22,20,15,.60);
/* --- vignetta --- */
--lf-vig: rgba(11,10,9,.66);
--lf-vig-0: rgba(11,10,9,0);
/* --- média: a felvétel maga, témától függetlenül --- */
--lf-plate-scan: rgba(255,255,255,.045);
--lf-plate-1: #454037;
--lf-plate-2: #17150f;
--lf-plate-3: #2b2721;
--lf-plate-glow: rgba(233,229,219,.20);
--lf-fig: rgba(233,229,219,.15);
--lf-onplate: rgba(234,230,220,.90);
--lf-onplate-2: rgba(234,230,220,.50);
--lf-play-bg: rgba(11,10,9,.18);
--lf-play-bg-hi: rgba(11,10,9,.34);
--lf-wave: rgba(234,230,220,.34);
--lf-wave-base: rgba(234,230,220,.10);
--lf-capscrim: rgba(8,7,6,.92);
--lf-capscrim-2: rgba(8,7,6,.68);
--lf-hero-bg: #141210;
/* --- adatpanel --- */
--lf-data-1: #17150f;
--lf-data-2: #0d0c0b;
--lf-ondata-2: rgba(234,230,220,.46);
--lf-ondata-3: rgba(234,230,220,.34);
--lf-ondata-grid:rgba(234,230,220,.07);
--lf-chart-fill: rgba(201,168,122,.13);
--lf-chart-ink: #8c6b3d;
--lf-chart-mark: rgba(22,20,15,.32);
--lf-chart-fill-2:rgba(140,107,61,.12);
--lf-gold-soft: rgba(201,168,122,.6);
/* --- betű --- */
--lf-ff-display: "Cormorant Garamond", ui-serif, "Iowan Old Style", Georgia, serif;
--lf-ff-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* --- méret --- */
--lf-gap: clamp(7px, .62vw, 12px);
--lf-col: clamp(230px, 19vw, 310px);
--lf-fold: 26px;
--lf-fade: clamp(60px, 11%, 190px); /* a fal ki-halványulása fent és lent */
--lf-facepad: clamp(18px, 1.5vw, 26px);
--lf-deckgap: clamp(16px, 1.8vh, 34px); /* az oldalak közti szünet */
--lf-pagew: min(920px, 100vw - 2 * var(--lf-gap));
position:relative; display:block;
color:var(--lf-paper);
font-family:var(--lf-ff-display);
font-size:16px; line-height:1.55;
}
.lapfal *,
.lapfal *::before,
.lapfal *::after{ box-sizing:border-box; }
.lapfal [hidden]{ display:none !important; }
.lapfal :where(button):focus-visible{ outline:1px solid var(--lf-gold); outline-offset:3px; }
.lapfal__source{ display:none; }
.lapfal__probe{
position:absolute; top:0; left:0;
width:var(--lf-gap); height:var(--lf-col);
visibility:hidden; pointer-events:none;
}
/* ============================================================
A FAL
============================================================ */
.lapfal__wall{ position:relative; width:100%; }
.lapfal--frame .lapfal__wall{ overflow:hidden; }
/* A fal széle nem ráfestett sávval tűnik el, hanem maga a csempesor
halványul ki. Így bármilyen háttéren működik, és nem sávozik. */
.lapfal--frame .lapfal__wall{
-webkit-mask-image:linear-gradient(to bottom,
transparent 0,
rgba(0,0,0,.35) calc(var(--lf-fade) * .38),
rgba(0,0,0,.85) calc(var(--lf-fade) * .72),
#000 var(--lf-fade),
#000 calc(100% - var(--lf-fade)),
rgba(0,0,0,.85) calc(100% - var(--lf-fade) * .72),
rgba(0,0,0,.35) calc(100% - var(--lf-fade) * .38),
transparent 100%);
mask-image:linear-gradient(to bottom,
transparent 0,
rgba(0,0,0,.35) calc(var(--lf-fade) * .38),
rgba(0,0,0,.85) calc(var(--lf-fade) * .72),
#000 var(--lf-fade),
#000 calc(100% - var(--lf-fade)),
rgba(0,0,0,.85) calc(100% - var(--lf-fade) * .72),
rgba(0,0,0,.35) calc(100% - var(--lf-fade) * .38),
transparent 100%);
}
/* a régi elem marad a helyén, de már nem fest semmit */
.lapfal__vignette{ display:none; }
.lapfal__slot{
position:absolute; top:0; left:0;
filter:var(--lf-cast);
opacity:0; transform:translateY(24px);
transition:opacity .8s cubic-bezier(.16,1,.3,1),
transform .8s cubic-bezier(.16,1,.3,1),
filter .4s ease-out;
transition-delay:calc(var(--lf-i, 0) * 34ms);
}
.lapfal__slot.is-in{ opacity:1; transform:none; }
@media (hover:hover){ .lapfal__slot:hover{ filter:var(--lf-cast-hi); } }
.lapfal__card{
position:absolute; inset:0;
overflow:hidden;
background:var(--lf-bg-2);
border:1px solid var(--lf-onwall-1);
color:var(--lf-paper);
}
/* --- papírtípusok: ívpapír, kivágott sarokkal --- */
/* papírlap: minden olyan típus, aminek a leírásában paper:true áll */
.lapfal__card[data-paper]{
background:var(--lf-paper);
border-color:var(--lf-paper-line);
color:var(--lf-ink);
transition:background .4s ease-out, clip-path .22s ease-out, border-color .4s ease-out;
}
/* a felhajló sarok — mobilon fixen látszik */
.lapfal__card{
clip-path:polygon(
0 0, 100% 0,
100% calc(100% - var(--lf-fold)),
calc(100% - var(--lf-fold)) 100%,
0 100%
);
transition:clip-path .22s ease-out;
}
.lapfal__card::before{
content:"";
position:absolute; right:-1px; bottom:-1px;
width:0; height:0;
border:calc((var(--lf-fold) + 1px) / 2) solid;
border-color:var(--lf-fold-face) transparent transparent var(--lf-fold-face);
box-shadow:-2px -2px 9px -3px var(--lf-fold-sh);
opacity:1; pointer-events:none; z-index:4;
transition:border-width .22s ease-out, opacity .22s ease-out;
}
.lapfal__card:not([data-paper])::before{
border-color:var(--lf-bg) transparent transparent var(--lf-bg);
box-shadow:-2px -2px 9px -3px var(--lf-fold-sh-2);
}
/* asztali gépen csak hoverre hajlik fel */
@media (hover:hover){
.lapfal__card{
clip-path:polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
}
.lapfal__card::before{ border-width:0; opacity:0; }
.lapfal__slot:hover .lapfal__card,
.lapfal__card:focus-within{
clip-path:polygon(
0 0, 100% 0,
100% calc(100% - var(--lf-fold)),
calc(100% - var(--lf-fold)) 100%,
0 100%
);
}
.lapfal__slot:hover .lapfal__card::before,
.lapfal__card:focus-within::before{
border-width:calc((var(--lf-fold) + 1px) / 2);
opacity:1;
}
.lapfal__slot:hover .lapfal__card[data-paper]{ background:var(--lf-paper-hi); }
}
.lapfal__hit{
position:absolute; inset:0; z-index:5;
appearance:none; -webkit-appearance:none;
background:none; border:0; padding:0; margin:0;
font:inherit; color:transparent; cursor:pointer;
}
.lapfal__hit:focus-visible{ outline-offset:-5px; }
/* ============================================================
DOKUMENTUM — maga a szöveg, felület-kezelőelem nélkül
============================================================ */
.lapfal__doc{
position:absolute; inset:0;
padding:var(--lf-facepad);
padding-bottom:calc(var(--lf-fold) + 8px);
overflow:hidden;
-webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 97%);
mask-image:linear-gradient(to bottom, #000 62%, transparent 97%);
}
.lapfal__dtitle{
margin:0 0 .55em; font-weight:500;
font-size:clamp(21px, 1.8vw, 29px); line-height:1.08; letter-spacing:-.012em;
color:var(--lf-ink); text-wrap:balance;
}
.lapfal__dtext{
margin:0; color:var(--lf-ink-2);
font-size:15.5px; line-height:1.52; text-align:justify; hyphens:auto;
}
.lapfal__dtext + .lapfal__dtext{ margin-top:.75em; text-indent:1.1em; }
/* idézet-lap */
.lapfal__quote{
position:absolute; inset:0;
padding:var(--lf-facepad);
padding-bottom:calc(var(--lf-fold) + 8px);
display:flex; flex-direction:column; justify-content:center; gap:1.1em;
overflow:hidden;
}
.lapfal__quote q{
quotes:none; font-style:italic; font-weight:400;
font-size:clamp(22px, 2vw, 31px); line-height:1.26;
color:var(--lf-ink); text-wrap:balance;
}
.lapfal__attr{
font-family:var(--lf-ff-mono); font-size:9px; letter-spacing:.2em;
text-transform:uppercase; color:var(--lf-ink-3);
}
/* ============================================================
MÉDIA — kép, videó, hang. A felirat csak hoverre.
============================================================ */
.lapfal__media{ position:absolute; inset:0; overflow:hidden; }
.lapfal__plate{
position:absolute; inset:0;
background:
repeating-linear-gradient(0deg, var(--lf-plate-scan) 0 1px, transparent 1px 3px),
linear-gradient(var(--lf-ph, 158deg), var(--lf-plate-1) 0%, var(--lf-plate-2) 56%, var(--lf-plate-3) 100%);
transition:transform .9s cubic-bezier(.16,1,.3,1), filter .5s ease-out;
}
.lapfal__plate::after{
content:""; position:absolute; inset:0;
background:radial-gradient(110% 82% at var(--lf-px, 34%) var(--lf-py, 26%),
var(--lf-plate-glow), transparent 62%);
}
@media (hover:hover){
.lapfal__slot:hover .lapfal__plate{ transform:scale(1.035); }
}
/* alak a képen: sziluett, nem UI */
.lapfal__figurine{
position:absolute; left:50%; bottom:18%; translate:-50% 0;
width:26%; aspect-ratio:1; border-radius:50%;
background:var(--lf-fig);
}
.lapfal__figurine::after{
content:""; position:absolute; left:-46%; top:122%;
width:192%; height:126%; border-radius:50% 50% 0 0;
background:var(--lf-fig);
}
/* lejátszásjel — egyetlen vékony kör */
.lapfal__play{
position:absolute; inset:0; display:grid; place-items:center; z-index:2;
pointer-events:none;
}
.lapfal__play i{
display:grid; place-items:center;
width:clamp(46px, 4.4vw, 62px); aspect-ratio:1; border-radius:50%;
border:1px solid var(--lf-onplate-2);
background:var(--lf-play-bg);
-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
transition:border-color .35s ease-out, background .35s ease-out;
}
.lapfal__play i::after{
content:""; margin-left:3px;
border-left:11px solid var(--lf-onplate);
border-top:7px solid transparent; border-bottom:7px solid transparent;
}
@media (hover:hover){
.lapfal__slot:hover .lapfal__play i{ border-color:var(--lf-gold); background:var(--lf-play-bg-hi); }
}
/* hangsáv — vékony vonalak, középre tükrözve */
.lapfal__wave{
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center; gap:3px;
padding:0 12%; overflow:hidden;
}
.lapfal__wave::before{
content:""; position:absolute; left:12%; right:12%; top:50%; height:1px;
background:var(--lf-wave-base);
}
.lapfal__wave i{
position:relative; flex:0 0 1px; width:1px; min-height:2px;
background:var(--lf-wave);
}
.lapfal__wave i.is-hot{ background:var(--lf-ice); opacity:.85; }
@media (hover:hover){
.lapfal__slot:hover .lapfal__wave i.is-hot{ background:var(--lf-gold); }
}
/* felirat: alul, abszolút, csak hoverre */
.lapfal__cap{
position:absolute; left:0; right:0; bottom:0; z-index:3;
padding:calc(var(--lf-facepad) * 1.6) var(--lf-facepad) var(--lf-facepad);
background:linear-gradient(to top, var(--lf-capscrim), var(--lf-capscrim-2) 42%, transparent);
opacity:0; transform:translateY(8px);
transition:opacity .4s ease-out, transform .5s cubic-bezier(.16,1,.3,1);
pointer-events:none;
}
.lapfal__captitle{
display:block; font-size:clamp(18px, 1.6vw, 24px); line-height:1.14;
letter-spacing:-.012em; color:var(--lf-onveil-hi);
}
.lapfal__capmeta{
display:block; margin-top:8px;
font-family:var(--lf-ff-mono); font-size:9px; letter-spacing:.2em;
text-transform:uppercase; color:var(--lf-onplate-2);
}
@media (hover:hover){
.lapfal__slot:hover .lapfal__cap{ opacity:1; transform:none; }
}
.lapfal__hit:focus-visible ~ .lapfal__cap,
.lapfal__card:focus-within .lapfal__cap{ opacity:1; transform:none; }
/* ============================================================
ADAT — modern, vékonyvonalas grafikon
============================================================ */
.lapfal__data{
position:absolute; inset:0;
display:flex; flex-direction:column;
padding:var(--lf-facepad);
background:linear-gradient(168deg, var(--lf-data-1) 0%, var(--lf-data-2) 100%);
}
.lapfal__dnum{
font-size:clamp(46px, 4.6vw, 68px); line-height:.9; font-weight:300;
letter-spacing:-.035em; color:var(--lf-paper);
font-variant-numeric:lining-nums tabular-nums;
}
.lapfal__dlabel{
margin-top:10px;
font-family:var(--lf-ff-mono); font-size:9px; letter-spacing:.2em;
text-transform:uppercase; color:var(--lf-ondata-2);
}
.lapfal__dchart{
position:relative; margin-top:auto; width:100%; aspect-ratio:5 / 2;
background:repeating-linear-gradient(0deg, var(--lf-ondata-grid) 0 1px, transparent 1px 25%);
}
.lapfal__dchart svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.lapfal__ca{ fill:var(--lf-chart-fill); }
.lapfal__cl{
fill:none; stroke:var(--lf-gold); stroke-width:1;
vector-effect:non-scaling-stroke; stroke-linejoin:round;
}
.lapfal__cm{ stroke:var(--lf-ondata-3); stroke-width:1; vector-effect:non-scaling-stroke; }
.lapfal__dfoot{
display:flex; justify-content:space-between; margin-top:11px;
font-family:var(--lf-ff-mono); font-size:8.5px; letter-spacing:.18em;
text-transform:uppercase; color:var(--lf-ondata-3);
}
/* a forráscsempe a morfolás alatt üresen áll */
.lapfal__card.is-source > *:not(.lapfal__hit){ opacity:0; }
/* a morfoláshoz készülő másolat */
.lapfal__slot.is-ghost{
position:fixed; z-index:5; opacity:1; transform:none;
transition:none; pointer-events:none;
}
/* ============================================================
HÁTTÉRCSEMPÉK — a fal folytatása a kereten túl
============================================================ */
.lapfal__slot--fill{
filter:none; will-change:transform;
transition:opacity .9s ease-out;
transition-delay:calc(var(--lf-i, 0) * 24ms);
}
.lapfal__slot--fill.is-in{ opacity:var(--lf-a, .4); }
.lapfal__tile{
position:absolute; inset:0; overflow:hidden;
background:var(--lf-bg-2);
border:1px solid var(--lf-onwall-2);
}
.lapfal__tile[data-paper]{
background:var(--lf-paper); border-color:var(--lf-paper-line-2);
clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.lapfal__tile[data-paper]::after{
content:""; position:absolute; right:-1px; bottom:-1px; width:0; height:0;
border:9.5px solid;
border-color:var(--lf-fold-face) transparent transparent var(--lf-fold-face);
}
.lapfal__tile[data-kind="ures"]{ background:var(--lf-bg-3); }
/* az adat-csempe képernyő, nem felület: mindkét témában sötét marad */
.lapfal__tile[data-kind="adat"]{
background:linear-gradient(168deg, var(--lf-data-1) 0%, var(--lf-data-2) 100%);
}
.lapfal__tlines{ position:absolute; inset:0; padding:13px; display:flex; flex-direction:column; gap:6px; }
.lapfal__tdata{
position:absolute; inset:0; display:flex; flex-direction:column;
justify-content:flex-end; gap:12%; padding:11% 12%;
}
.lapfal__tdata b{
font-family:var(--lf-ff-display); font-weight:300;
font-size:clamp(15px,3.4cqw,34px); line-height:1; color:rgba(234,230,220,.92);
}
.lapfal__tdata i{
display:block; height:26%;
background:linear-gradient(to top right, transparent 46%, var(--lf-gold-soft) 47%, transparent 48%);
opacity:.7;
}
.lapfal__tlines i{ display:block; height:1px; background:var(--lf-tlines); }
.lapfal__tlines.is-light i{ background:var(--lf-tlines-lt); }
.lapfal__tlines i.is-head{ height:6px; width:52% !important; margin-bottom:7px; }
/* ============================================================
VÁLTOZAT — "ghost": csak külső keret, belül áttetsző.
A tartalom változatlan, csak a hordozó tűnik el alóla.
============================================================ */
.lapfal--ghost{
--lf-fold-face:var(--lf-fold-ghost);
}
.lapfal--ghost .lapfal__card{
background:transparent;
border-color:var(--lf-onwall-4);
}
.lapfal--ghost .lapfal__card[data-paper]{
background:transparent;
border-color:var(--lf-onwall-4);
color:var(--lf-onwall-ink);
}
.lapfal--ghost .lapfal__card::before{
border-color:var(--lf-fold-face) transparent transparent var(--lf-fold-face);
box-shadow:-2px -2px 9px -3px var(--lf-fold-sh-2);
}
.lapfal--ghost .lapfal__dtitle,
.lapfal--ghost .lapfal__quote q{ color:var(--lf-onwall-ink); }
.lapfal--ghost .lapfal__dtext{ color:var(--lf-onwall-txt); }
.lapfal--ghost .lapfal__attr,
.lapfal--ghost .lapfal__dlabel,
.lapfal--ghost .lapfal__dfoot{ color:var(--lf-onwall-dim); }
.lapfal--ghost .lapfal__data{ background:transparent; }
.lapfal--ghost .lapfal__dchart{
background:repeating-linear-gradient(0deg, var(--lf-onwall-grid) 0 1px, transparent 1px 25%);
}
.lapfal--ghost .lapfal__plate{ opacity:.66; }
@media (hover:hover){
.lapfal--ghost .lapfal__slot:hover .lapfal__card{ border-color:var(--lf-gold-soft); }
.lapfal--ghost .lapfal__slot:hover .lapfal__card[data-paper]{
background:var(--lf-onwall-05);
}
.lapfal--ghost .lapfal__slot:hover .lapfal__plate{ opacity:1; }
}
.lapfal--ghost .lapfal__tile[data-paper]{
background:transparent; border-color:var(--lf-onwall-3);
}
.lapfal--ghost .lapfal__tile[data-paper]::after{ border-color:var(--lf-fold-ghost) transparent transparent var(--lf-fold-ghost); }
.lapfal--ghost .lapfal__tlines.is-light i{ background:var(--lf-onwall-3); }
/* ============================================================
AZ ELŐTÉRBE KERÜLŐ LAP
============================================================ */
.lapfal__pop{
position:fixed; inset:0;
width:100%; height:100%; max-width:none; max-height:none;
margin:0; padding:0; border:0;
background:transparent; color:var(--lf-ink);
overflow-x:hidden; overflow-y:scroll;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
scroll-behavior:smooth;
}
.lapfal__pop:not([open]){ display:none; }
.lapfal__pop::backdrop{ background:transparent; }
.lapfal__pop.is-fallback{ z-index:2147483000; }
.lapfal__veil{
position:fixed; inset:0; z-index:0;
background:var(--lf-veil);
-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
/* a színpad: a pakli teljes méretben áll, a réteg görgeti */
.lapfal__stage{
position:relative; z-index:2;
min-height:100%;
padding-bottom:clamp(30px, 5vh, 70px);
}
/* a pakli: az aktuális oldal helye. A szomszédok kilógnak belőle. */
.lapfal__deck{
position:relative;
width:var(--lf-pagew);
margin:0 auto;
overflow:visible;
}
.lapfal__track{
display:flex; flex-direction:column; align-items:center;
gap:var(--lf-deckgap);
}
.lapfal__bar{
position:sticky; top:0; z-index:6; isolation:isolate;
display:flex; align-items:center; justify-content:space-between; gap:18px;
padding:15px clamp(16px, 3vw, 40px);
font-family:var(--lf-ff-mono); font-size:9.5px; font-weight:500;
letter-spacing:.2em; text-transform:uppercase; color:var(--lf-onveil);
}
.lapfal__bar::before{
content:""; position:absolute; left:0; right:0; top:0; bottom:-52px; z-index:-1;
background:linear-gradient(to bottom,
var(--lf-scrim) 0%,
var(--lf-scrim) 44%,
var(--lf-scrim-6) 66%,
var(--lf-scrim-3) 83%,
var(--lf-scrim-0) 100%);
pointer-events:none;
}
.lapfal__foot{
width:var(--lf-pagew);
margin:var(--lf-gap) auto 0;
display:flex; align-items:center; justify-content:space-between; gap:18px;
font-family:var(--lf-ff-mono); font-size:9.5px; font-weight:500;
letter-spacing:.2em; text-transform:uppercase; color:var(--lf-onveil);
}
.lapfal__sig{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lapfal__pageno{ color:var(--lf-gold); white-space:nowrap; }
.lapfal__back{
display:inline-flex; align-items:center; gap:10px;
appearance:none; -webkit-appearance:none;
background:none; border:0; padding:4px 0; margin:0; cursor:pointer;
font:inherit; letter-spacing:.2em; text-transform:uppercase; color:var(--lf-onveil-hi);
}
.lapfal__back:hover{ color:var(--lf-gold); }
/* ---- a lap: mindig A4, a tartalom hosszától függetlenül ---- */
.lapfal__page{
position:relative; z-index:2;
flex:0 0 auto;
width:var(--lf-pagew);
aspect-ratio:210 / 297;
container-type:inline-size;
--lf-fold:3.4cqw;
background:var(--lf-sheet);
border:1px solid var(--lf-paper-line); border-bottom:0;
box-shadow:var(--lf-lift);
transform-origin:0 0;
will-change:transform, clip-path;
clip-path:polygon(
0 0, 100% 0,
100% calc(100% - var(--lf-fold)),
calc(100% - var(--lf-fold)) 100%,
0 100%
);
}
/* a további oldalak ugyanolyan ívek, csak lejjebb */
.lapfal__page + .lapfal__page{ box-shadow:var(--lf-lift); }
/* oldalszám a lap alján, ahogy egy valódi íven */
.lapfal__folio{
position:absolute; left:8.6cqw; bottom:2.6cqw;
font-family:var(--lf-ff-mono); font-size:1.16cqw; letter-spacing:.24em;
color:var(--lf-ink-3); pointer-events:none;
}
.lapfal__edge{
position:absolute; left:-1px; right:-1px; top:-1px; height:0;
transform-origin:0 0; pointer-events:none; z-index:2;
}
.lapfal__edgeline{
position:absolute; left:0; right:var(--lf-fold); bottom:0; height:1px;
background:var(--lf-paper-line);
}
/* a szedéstükör: a tartalom hasábokra törik, egy hasáb = egy oldal */
.lapfal__reader{
position:absolute;
top:7.4cqw; left:8.6cqw; right:8.6cqw;
bottom:calc(var(--lf-fold) + 5.4cqw);
overflow:hidden;
}
.lapfal__flow{
height:100%;
column-gap:var(--lf-colgap, 64px);
column-fill:auto;
}
.lapfal__flow > *{ break-inside:avoid-column; }
.lapfal__flow > p,
.lapfal__flow > .lapfal__body{ break-inside:auto; }
/* ---- lapozás: a felhajló sarok ---- */
.lapfal__turn{
position:absolute; right:0; bottom:0; z-index:6;
width:var(--lf-fold); height:var(--lf-fold);
appearance:none; -webkit-appearance:none;
background:none; border:0; padding:0; margin:0;
cursor:pointer; font:inherit; color:transparent;
}
.lapfal__turn::before{
content:""; position:absolute; right:-1px; bottom:-1px; width:0; height:0;
border:calc((var(--lf-fold) + 1px) / 2) solid;
border-color:var(--lf-fold-face) transparent transparent var(--lf-fold-face);
box-shadow:-2px -2px 10px -3px var(--lf-fold-sh-3);
transition:border-color .25s ease-out;
}
.lapfal__turn:hover::before{ border-color:var(--lf-gold) transparent transparent var(--lf-gold); }
.lapfal__turn[hidden]{ display:none; }
.lapfal__turnlabel{
position:absolute; right:calc(100% + 12px); bottom:5px;
white-space:nowrap;
font-family:var(--lf-ff-mono); font-size:1.05cqw; letter-spacing:.2em;
text-transform:uppercase; color:var(--lf-ink-3);
opacity:0; transform:translateX(6px);
transition:opacity .3s ease-out, transform .4s cubic-bezier(.16,1,.3,1);
}
.lapfal__page:hover .lapfal__turnlabel,
.lapfal__turn:focus-visible .lapfal__turnlabel{ opacity:1; transform:none; }
/* ---- a lap tipográfiája ---- */
.lapfal__docmeta{
display:flex; flex-wrap:wrap; gap:6px 20px;
padding-bottom:13px; border-bottom:1px solid var(--lf-line);
font-family:var(--lf-ff-mono); font-size:1.16cqw; font-weight:500;
letter-spacing:.22em; text-transform:uppercase; color:var(--lf-ink-3);
}
.lapfal__doctitle{
margin:3.2cqw 0 0; max-width:18ch;
font-weight:500; font-size:6.2cqw;
line-height:1.03; letter-spacing:-.02em; color:var(--lf-ink);
}
.lapfal__doclead{
margin:2.2cqw 0 0;
font-size:2.95cqw; line-height:1.4; color:var(--lf-ink-2);
}
.lapfal__dochero{
position:relative; margin:2.8cqw 0 0;
aspect-ratio:3 / 2; overflow:hidden;
border:1px solid var(--lf-paper-line); background:var(--lf-hero-bg);
}
.lapfal__dochero .lapfal__wave{ padding:0 6%; }
.lapfal__docfig{
margin:2.6cqw 0 0;
font-size:12.5cqw; line-height:.84; font-weight:300;
letter-spacing:-.035em; color:var(--lf-ink);
font-variant-numeric:lining-nums tabular-nums;
}
.lapfal__docchart{
position:relative; margin:2.2cqw 0 0;
width:100%; aspect-ratio:7 / 2;
background:repeating-linear-gradient(0deg, var(--lf-line-soft) 0 1px, transparent 1px 25%);
}
.lapfal__docchart svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.lapfal__docchart .lapfal__cl{ stroke:var(--lf-chart-ink); }
.lapfal__docchart .lapfal__cm{ stroke:var(--lf-chart-mark); }
.lapfal__docchart .lapfal__ca{ fill:var(--lf-chart-fill-2); }
.lapfal__body{ margin-top:3cqw; }
.lapfal__body :where(p){
margin:0 0 .85em; color:var(--lf-ink-2);
font-size:2.5cqw; line-height:1.56;
text-align:justify; hyphens:auto;
}
.lapfal__body :where(h3,h4){
margin:1.9em 0 .8em; padding-top:.9em; border-top:1px solid var(--lf-line-soft);
font-family:var(--lf-ff-mono); font-size:1.24cqw; font-weight:500;
letter-spacing:.22em; text-transform:uppercase; color:var(--lf-ink);
break-after:avoid-column;
}
.lapfal__body :where(blockquote){
margin:1.5em 0; padding-left:20px; border-left:1px solid var(--lf-gold);
font-style:italic; font-size:3.2cqw; line-height:1.32; color:var(--lf-ink);
}
.lapfal__body :where(ul,ol){ margin:0 0 .85em; padding-left:1.2em; color:var(--lf-ink-2); }
.lapfal__docfoot{
margin-top:1.6em; padding-top:1.4cqw; border-top:1px solid var(--lf-line);
font-family:var(--lf-ff-mono); font-size:1.16cqw; letter-spacing:.2em;
text-transform:uppercase; color:var(--lf-ink-3);
}
/* ---- lábléc: léptetés a következő lapra ---- */
.lapfal__next{
appearance:none; -webkit-appearance:none;
background:none; border:0; padding:4px 0; margin:0; cursor:pointer;
font:inherit; letter-spacing:.2em; text-transform:uppercase;
color:var(--lf-onveil-hi);
display:inline-flex; align-items:center; gap:12px;
max-width:60%; overflow:hidden;
}
.lapfal__next:hover{ color:var(--lf-gold); }
.lapfal__nextlabel{ color:var(--lf-gold); white-space:nowrap; }
.lapfal__nexttitle{
font-family:var(--lf-ff-display); font-size:17px; letter-spacing:0;
text-transform:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* ============================================================
VILÁGOS TÉMA
------------------------------------------------------------
A fal világosodik, a papír fehéredik, a réteg fátyla világos.
A fényképek és az adatpanel sötét marad: azok felvételek és
képernyők, nem felületek — a témaváltás nem írja át őket.
Vezérlés: data-lf-theme="dark" | "light" | "auto"
============================================================ */
.lapfal[data-lf-theme="light"],
[data-lf-theme="light"] .lapfal,
.lapfal--light{
--lf-bg: #eeeae3;
--lf-bg-2: #e4dfd6;
--lf-bg-3: #e9e5dd;
--lf-paper: #fdfcf8;
--lf-paper-hi: #ffffff;
--lf-sheet: #ffffff;
--lf-fold-face: #ddd6c7;
--lf-line: rgba(22,20,15,.20);
--lf-line-soft: rgba(22,20,15,.10);
--lf-gold: #7d6031;
--lf-gold-soft: rgba(125,96,49,.62);
--lf-ink-3: #6a6558;
--lf-veil: rgba(238,234,227,.86);
--lf-scrim: rgba(238,234,227,.94);
--lf-scrim-6: rgba(238,234,227,.58);
--lf-scrim-3: rgba(238,234,227,.26);
--lf-scrim-0: rgba(238,234,227,0);
--lf-onveil: rgba(22,20,15,.62);
--lf-onveil-hi: #16140f;
--lf-lift: 0 40px 92px -42px rgba(46,38,26,.44);
--lf-cast: drop-shadow(0 14px 24px rgba(46,38,26,.16));
--lf-cast-hi: drop-shadow(0 24px 42px rgba(46,38,26,.24));
--lf-onwall-ink: #16140f;
--lf-onwall-1: rgba(22,20,15,.16);
--lf-onwall-2: rgba(22,20,15,.10);
--lf-onwall-3: rgba(22,20,15,.22);
--lf-onwall-4: rgba(22,20,15,.32);
--lf-onwall-05: rgba(22,20,15,.035);
--lf-onwall-txt: rgba(22,20,15,.62);
--lf-onwall-dim: rgba(22,20,15,.46);
--lf-onwall-grid:rgba(22,20,15,.10);
--lf-tlines: rgba(22,20,15,.16);
--lf-tlines-lt: rgba(22,20,15,.30);
--lf-fold-ghost: #c8c1b2;
--lf-paper-line: rgba(22,20,15,.26);
--lf-paper-line-2: rgba(22,20,15,.34);
--lf-fold-sh: rgba(46,38,26,.28);
--lf-fold-sh-2: rgba(46,38,26,.30);
--lf-fold-sh-3: rgba(46,38,26,.34);
--lf-vig: rgba(238,234,227,.74);
--lf-vig-0: rgba(238,234,227,0);
--lf-chart-fill: rgba(125,96,49,.16);
--lf-chart-ink: #7d6031;
}
/* explicit sötét — világos gazdaoldalon is */
.lapfal[data-lf-theme="dark"],
[data-lf-theme="dark"] .lapfal,
.lapfal--dark{
--lf-bg:#0b0a09; --lf-bg-2:#121110; --lf-bg-3:#0e0d0c;
--lf-paper:#e9e5db; --lf-paper-hi:#f2efe8; --lf-sheet:#f1eee6;
--lf-fold-face:#d5cfc0;
--lf-ink:#16140f; --lf-ink-2:#4c473d; --lf-ink-3:#7f7a6d;
--lf-line:rgba(22,20,15,.18); --lf-line-soft:rgba(22,20,15,.09);
--lf-gold:#c9a87a; --lf-gold-soft:rgba(201,168,122,.6);
--lf-veil:rgba(6,5,4,.80); --lf-scrim:rgba(6,5,4,.88);
--lf-scrim-6:rgba(6,5,4,.52); --lf-scrim-3:rgba(6,5,4,.22); --lf-scrim-0:rgba(6,5,4,0);
--lf-onveil:rgba(234,230,220,.72); --lf-onveil-hi:#eae6dc;
--lf-lift:0 46px 100px -38px rgba(0,0,0,.92);
--lf-cast:drop-shadow(0 18px 30px rgba(0,0,0,.5));
--lf-cast-hi:drop-shadow(0 28px 48px rgba(0,0,0,.66));
--lf-onwall-ink:#eae6dc;
--lf-onwall-1:rgba(234,230,220,.10); --lf-onwall-2:rgba(234,230,220,.07);
--lf-onwall-3:rgba(234,230,220,.16); --lf-onwall-4:rgba(234,230,220,.26);
--lf-onwall-05:rgba(234,230,220,.03);
--lf-onwall-txt:rgba(234,230,220,.62); --lf-onwall-dim:rgba(234,230,220,.42);
--lf-onwall-grid:rgba(234,230,220,.09);
--lf-tlines:rgba(234,230,220,.15); --lf-tlines-lt:rgba(22,20,15,.30);
--lf-fold-ghost:#2a2721;
--lf-paper-line:rgba(22,20,15,.30); --lf-paper-line-2:rgba(22,20,15,.40);
--lf-fold-sh:rgba(22,20,15,.50); --lf-fold-sh-2:rgba(0,0,0,.70);
--lf-fold-sh-3:rgba(22,20,15,.60);
--lf-vig:rgba(11,10,9,.66); --lf-vig-0:rgba(11,10,9,0);
--lf-chart-fill:rgba(201,168,122,.13); --lf-chart-ink:#8c6b3d;
}
@media (prefers-color-scheme: light){
.lapfal[data-lf-theme="auto"],
[data-lf-theme="auto"] .lapfal,
.lapfal--auto{
--lf-bg:#eeeae3; --lf-bg-2:#e4dfd6; --lf-bg-3:#e9e5dd;
--lf-paper:#fdfcf8; --lf-paper-hi:#ffffff; --lf-sheet:#ffffff;
--lf-fold-face:#ddd6c7;
--lf-line:rgba(22,20,15,.20); --lf-line-soft:rgba(22,20,15,.10);
--lf-gold:#7d6031; --lf-gold-soft:rgba(125,96,49,.62); --lf-ink-3:#6a6558;
--lf-veil:rgba(238,234,227,.86); --lf-scrim:rgba(238,234,227,.94);
--lf-scrim-6:rgba(238,234,227,.58); --lf-scrim-3:rgba(238,234,227,.26);
--lf-scrim-0:rgba(238,234,227,0);
--lf-onveil:rgba(22,20,15,.62); --lf-onveil-hi:#16140f;
--lf-lift:0 40px 92px -42px rgba(46,38,26,.44);
--lf-cast:drop-shadow(0 14px 24px rgba(46,38,26,.16));
--lf-cast-hi:drop-shadow(0 24px 42px rgba(46,38,26,.24));
--lf-onwall-ink:#16140f;
--lf-onwall-1:rgba(22,20,15,.16); --lf-onwall-2:rgba(22,20,15,.10);
--lf-onwall-3:rgba(22,20,15,.22); --lf-onwall-4:rgba(22,20,15,.32);
--lf-onwall-05:rgba(22,20,15,.035);
--lf-onwall-txt:rgba(22,20,15,.62); --lf-onwall-dim:rgba(22,20,15,.46);
--lf-onwall-grid:rgba(22,20,15,.10);
--lf-tlines:rgba(22,20,15,.16); --lf-tlines-lt:rgba(22,20,15,.30);
--lf-fold-ghost:#c8c1b2;
--lf-paper-line:rgba(22,20,15,.26); --lf-paper-line-2:rgba(22,20,15,.34);
--lf-fold-sh:rgba(46,38,26,.28); --lf-fold-sh-2:rgba(46,38,26,.30);
--lf-fold-sh-3:rgba(46,38,26,.34);
--lf-vig:rgba(238,234,227,.74); --lf-vig-0:rgba(238,234,227,0);
--lf-chart-fill:rgba(125,96,49,.16); --lf-chart-ink:#7d6031;
}
}
/* a témaváltás legyen átmenet, ne kapcsoló */
.lapfal,
.lapfal__card,
.lapfal__tile,
.lapfal__page,
.lapfal__veil{
transition-property:background-color, border-color, color;
transition-duration:.45s;
transition-timing-function:ease-out;
}
/* ============================================================
LAPOZÁS A CIKKEK KÖZÖTT — előre és vissza a lábléc két szélén
============================================================ */
.lapfal__prev{
appearance:none; -webkit-appearance:none;
background:none; border:0; padding:4px 0; margin:0; cursor:pointer;
font:inherit; letter-spacing:.2em; text-transform:uppercase;
color:var(--lf-onveil-hi);
display:inline-flex; align-items:center; gap:12px;
max-width:42%; overflow:hidden;
}
.lapfal__prev:hover{ color:var(--lf-gold); }
.lapfal__prev[hidden]{ display:none; }
.lapfal__prevlabel{ color:var(--lf-gold); white-space:nowrap; }
.lapfal__prevtitle{
font-family:var(--lf-ff-display); font-size:17px; letter-spacing:0;
text-transform:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lapfal__next{ max-width:42%; }
.lapfal__pageno{ flex:0 0 auto; }
@media (max-width:760px){
.lapfal__prevtitle,
.lapfal__nexttitle{ display:none; }
.lapfal__prev,.lapfal__next{ max-width:none; }
}
/* az ív bal alsó sarkában: vissza az előző oldalra */
.lapfal__turnback{
position:absolute; left:0; bottom:0; z-index:6;
width:var(--lf-fold); height:var(--lf-fold);
appearance:none; -webkit-appearance:none;
background:none; border:0; padding:0; margin:0;
cursor:pointer; font:inherit; color:transparent;
}
.lapfal__turnback::before{
content:""; position:absolute; left:36%; top:50%;
width:.95cqw; height:.95cqw;
border-left:1px solid var(--lf-ink-3); border-bottom:1px solid var(--lf-ink-3);
transform:translate(-50%,-50%) rotate(45deg);
transition:border-color .25s ease-out;
}
.lapfal__turnback:hover::before{ border-color:var(--lf-gold); }
.lapfal__turnback[hidden]{ display:none; }
.lapfal__turnlabel--prev{
right:auto; left:2px; bottom:calc(100% + 2px);
transform:translateY(5px);
}
.lapfal__page:hover .lapfal__turnlabel--prev,
.lapfal__turnback:focus-visible .lapfal__turnlabel--prev{ opacity:1; transform:none; }
/* ============================================================
CSÖKKENTETT MOZGÁS
============================================================ */
@media (prefers-reduced-motion: reduce){
.lapfal *, .lapfal *::before, .lapfal *::after{
animation-duration:.001ms !important;
transition-duration:.001ms !important;
}
.lapfal__slot{ opacity:1; transform:none; }
.lapfal__slot--fill{ opacity:var(--lf-a, .4); }
.lapfal__cap{ opacity:1; transform:none; }
}
/* ========================================================================== */
/* FILE: /res/view/components/slider/HorizontalSlider/style.css */
/* ========================================================================== */
.mainpage {
position:relative;
width: 100%;
min-height: 100vh;
padding:clamp(2rem, 6vw, 6rem);
}
/* =========================================================
HORIZONTAL SLIDER
========================================================= */
.hs {
--hs-gap: 1.25rem;
--hs-button-size: 3rem;
width: 100%;
position: relative;
}
/* =========================================================
HEADER
========================================================= */
.hs__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
margin-bottom: 2rem;
}
.hs__heading {
min-width: 0;
}
.hs__eyebrow {
display: block;
margin-bottom: .6rem;
font-size: .72rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
opacity: .5;
}
.hs__title {
margin: 0;
font-size:
clamp(2rem, 5vw, 4.5rem);
line-height: .9;
letter-spacing: -.04em;
}
/* =========================================================
CONTROLS
========================================================= */
.hs__controls {
display: flex;
gap: .5rem;
flex-shrink: 0;
}
.hs__button {
width: var(--hs-button-size);
height: var(--hs-button-size);
display: grid;
place-items: center;
padding: 0;
border:
1px solid currentColor;
border-radius: 50%;
background: transparent;
color: inherit;
cursor: pointer;
transition:
opacity .2s ease,
transform .2s ease,
background-color .2s ease;
}
.hs__button svg {
width: 1.1rem;
height: 1.1rem;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.hs__button:hover:not(:disabled) {
transform: scale(1.06);
}
.hs__button:active:not(:disabled) {
transform: scale(.94);
}
.hs__button:disabled {
opacity: .2;
cursor: default;
}
.hs__button:focus-visible {
outline:
2px solid currentColor;
outline-offset: 4px;
}
/* =========================================================
VIEWPORT
========================================================= */
.hs__viewport {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
/*
* Allows vertical page movement while
* JS handles horizontal pointer movement.
*/
touch-action: pan-y;
/*
* Prevent selection during dragging.
*/
user-select: none;
/*
* Keyboard focus.
*/
outline: none;
}
.hs__viewport::-webkit-scrollbar {
display: none;
}
.hs__viewport:focus-visible {
outline:
2px solid currentColor;
outline-offset: 5px;
}
/* =========================================================
TRACK
========================================================= */
.hs__track {
display: flex;
align-items: stretch;
gap: var(--hs-gap);
width: max-content;
}
/* =========================================================
ITEM
========================================================= */
.hs__item {
flex:
0 0 auto;
}
/* =========================================================
DEMO CARD
========================================================= */
.demo-card {
width:
clamp(
280px,
32vw,
520px
);
min-height: 340px;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
border:
1px solid rgba(
0,
0,
0,
.12
);
border-radius: 1.5rem;
background: #fff;
transition:
transform .35s ease,
border-color .35s ease;
}
.demo-card:hover {
transform:
translateY(-5px);
border-color:
rgba(0, 0, 0, .35);
}
.demo-card__number {
font-family:
"SFMono-Regular",
Consolas,
monospace;
font-size: .72rem;
opacity: .45;
}
.demo-card__content h3 {
margin: 0 0 .5rem;
font-size:
clamp(
1.5rem,
3vw,
2.5rem
);
line-height: 1;
letter-spacing: -.035em;
}
.demo-card__content p {
margin: 0;
opacity: .55;
}
/* =========================================================
DRAGGING STATE
========================================================= */
.hs__viewport.is-dragging {
cursor: grabbing;
}
.hs__viewport.is-dragging .demo-card {
pointer-events: none;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.page {
padding:
2rem 1rem;
}
.hs {
--hs-gap: .75rem;
--hs-button-size: 2.7rem;
}
.hs__header {
align-items: center;
margin-bottom: 1.25rem;
}
.hs__title {
font-size: 2rem;
}
.demo-card {
width:
min(
82vw,
360px
);
min-height: 280px;
padding: 1.5rem;
border-radius: 1.25rem;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (
prefers-reduced-motion: reduce
) {
html {
scroll-behavior: auto;
}
.hs__button,
.demo-card {
transition: none;
}
}
/* ========================================================================== */
/* FILE: /res/view/components/menu/v4.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
PANEL MENU (dark, dramatic)
═════════════════════════════════════════════════════════════ */
.overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1001;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s;
}
.overlay.open {
opacity: 1;
pointer-events: all;
}
.panel {
position: fixed;
top: 0;
right: 0;
width: min(520px, 92vw);
height: 100dvh;
background: var(--surface-dark);
color: var(--menu-text);
z-index: 1002;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
border-left: 1px solid var(--menu-line);
}
.panel.open {
transform: translateX(0);
}
.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
height: var(--nav-h);
border-bottom: 1px solid var(--menu-line);
flex-shrink: 0;
}
.panel-logo {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.20em;
color: var(--gold);
text-transform: uppercase;
}
.panel-close {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--menu-line);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--menu-text);
transition: all 0.25s;
}
.panel-close:hover {
background: var(--gold-light);
color: var(--gold);
border-color: var(--gold);
}
.panel-body {
flex: 1;
overflow-y: auto;
padding: 40px 32px 32px;
display: flex;
flex-direction: column;
gap: 40px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.panel-body::-webkit-scrollbar {
width: 4px;
}
.panel-body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 2px;
}
.panel-label {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 14px;
}
.panel-nav-list {
list-style: none;
display: flex;
flex-direction: column;
}
.panel-nav-item {
border-bottom: 1px solid var(--menu-line);
}
@media (min-width: 1024px) {
.panel-nav-item.menu-mobile {
display:none !important;
}
}
.panel-nav-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 0;
cursor: pointer;
transition: padding-left 0.3s var(--ease), color 0.2s;
}
.panel-nav-link:hover {
padding-left: 14px;
}
.panel-nav-left {
display: flex;
align-items: center;
gap: 18px;
}
.panel-nav-num {
font-family: var(--font-mono);
font-size: 10px;
color: var(--menu-text-2);
letter-spacing: 0.1em;
width: 24px;
flex-shrink: 0;
}
.panel-nav-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex-shrink: 0;
color:var(--text);
margin-right:12px;
}
.panel-nav-icon svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
}
.panel-nav-name {
/*font-family: var(--font-display);*/
font-size: 30px;
font-weight: 500;
color: var(--menu-text);
line-height: 1;
letter-spacing: -0.01em;
transition: color 0.2s;
}
.panel-nav-link:hover .panel-nav-name,
.panel-nav-link.active .panel-nav-name {
color: var(--gold);
}
.panel-nav-sub {
font-size: 11px;
color: var(--menu-text-2);
margin-top: 4px;
font-family: var(--font-ui);
letter-spacing: 0.04em;
}
.panel-nav-arrow {
font-size: 18px;
color: var(--menu-color);
transition: transform 0.2s, color 0.2s;
}
.panel-nav-link:hover .panel-nav-arrow {
transform: translateX(4px);
color: var(--gold);
}
.panel-divider {
height: 1px;
background: var(--menu-line);
}
/* Quick actions */
.panel-actions-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.panel-action {
padding: 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--menu-line);
border-radius: var(--r-card);
cursor: pointer;
transition: all 0.25s;
text-decoration: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.panel-action:hover {
border-color: var(--gold);
background: var(--gold-light);
transform: translateY(-2px);
}
.panel-action-icon {
font-size: 20px;
}
.panel-action strong {
font-size: 12px;
font-weight: 600;
color: var(--menu-text);
display: block;
letter-spacing: 0.02em;
}
.panel-action small {
font-size: 10px;
color: var(--menu-text-2);
display: block;
line-height: 1.4;
}
/* Theme grid */
.panel-theme-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.panel-theme-item {
padding: 14px 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--menu-line);
border-radius: var(--r-card);
cursor: pointer;
transition: all 0.25s;
display: flex;
align-items: center;
gap: 12px;
}
.panel-theme-item:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
}
.panel-theme-item.active {
border-color: var(--gold);
background: var(--gold-light);
}
.panel-theme-item.active::after {
content: '✓';
margin-left: auto;
color: var(--gold);
}
.panel-theme-swatch {
width: 26px;
height: 26px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.2);
flex-shrink: 0;
}
.panel-theme-swatch.light {
background: radial-gradient(circle, #f0ebe2 50%, #c9a464 100%);
}
.panel-theme-swatch.dark {
background: radial-gradient(circle, #0d0c0a 50%, #d4ad6a 100%);
}
.panel-theme-info {
display: flex;
flex-direction: column;
}
.panel-theme-name {
font-size: 12px;
font-weight: 600;
color: var(--menu-text);
letter-spacing: 0.02em;
}
.panel-theme-desc {
font-size: 10px;
color: var(--menu-text-2);
margin-top: 2px;
}
/* Language */
.panel-lang-row {
display: flex;
gap: 8px;
}
.panel-lang-btn {
flex: 1;
padding: 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--menu-line);
border-radius: var(--r-card);
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.25s;
}
.panel-lang-btn.active {
border-color: var(--gold);
background: var(--gold-light);
}
.panel-lang-btn:hover:not(.active) {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
}
.panel-lang-flag {
font-size: 18px;
}
.panel-lang-name {
font-size: 13px;
font-weight: 600;
color: var(--menu-text);
}
.panel-lang-code {
font-size: 10px;
color: var(--menu-text-2);
font-family: var(--font-mono);
letter-spacing: 0.06em;
}
.panel-lang-check {
margin-left: auto;
color: var(--gold);
opacity: 0;
transition: opacity 0.2s;
}
.panel-lang-btn.active .panel-lang-check {
opacity: 1;
}
.panel-footer {
padding: 22px 32px;
border-top: 1px solid var(--menu-line);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.panel-footer-links {
display: flex;
gap: 18px;
}
.panel-footer-links a {
font-size: 10px;
color: var(--menu-text-2);
font-family: var(--font-ui);
letter-spacing: 0.10em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: color 0.2s;
}
.panel-footer-links a:hover {
color: var(--gold);
}
.panel-footer-copy {
font-size: 10px;
/*color: rgba(255, 255, 255, 0.25);*/
color: var(--menu-color);
font-family: var(--font-mono);
}
/* ========================================================================== */
/* FILE: /res/view/components/nav/v4.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
NAV
═════════════════════════════════════════════════════════════ */
/*nav {*/
/* position: fixed;*/
/* top: 0; */
/* left: 0; */
/* right: 0;*/
/* height: var(--nav-h);*/
/* z-index: 1000;*/
/* display: flex;*/
/* align-items: center;*/
/* padding: 0 48px;*/
/* transition: background 0.4s, backdrop-filter 0.4s, height 0.3s;*/
/*}*/
nav.filled {
background: var(--nav-bg);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border-bottom: 1px solid var(--line);
height: 68px;
}
nav.blurred {
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
}
nav.blur {
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
}
nav.bg{
background: var(--nav-bg);
}
.whiteText .nav-links a{
color:#fff !important;
}
.nav-inner {
width: 100%; max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 48px;
}
/* Logo block */
.nav-logo-block {
display: flex;
flex-direction: column;
gap: 4px;
text-decoration: none;
cursor: pointer;
}
.nav-logo {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.20em;
color: var(--text);
line-height: 1;
text-transform: uppercase;
transition: opacity 0.2s;
}
.nav-tagline {
font-family: var(--font-ui);
font-size: 8.5px;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--text-3);
text-transform: uppercase;
white-space: nowrap;
line-height: 1;
}
.nav-logo-block:hover .nav-logo { opacity: 0.7; }
/* Nav links — center */
.nav-links {
list-style: none;
display: flex;
gap: 0;
justify-content: center;
}
.nav-links a {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--text);
text-decoration: none;
text-transform: uppercase;
padding: 8px 22px;
cursor: pointer;
position: relative;
transition: color 0.2s;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0; left: 22px; right: 22px;
height: 1px;
background: var(--text);
transform: scaleX(0);
transition: transform 0.3s var(--ease);
transform-origin: center;
}
.nav-links a:hover::after,
.nav-links a.active::after {
transform: scaleX(1);
}
/* Nav right — search + menu */
.nav-actions {
display: flex;
align-items: center;
gap: 12px;
}
.nav-pill {
display: flex;
align-items: center;
gap: 10px;
padding: 0 20px 0 6px;
height: 44px;
background: #18181d;
color: #f5f3ee;
border: none;
border-radius: 100px;
cursor: pointer;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: all 0.25s var(--ease);
white-space: nowrap;
box-shadow: 0 8px 16px -4px rgba(20, 20, 25, 0.18), 0 2px 6px -1px rgba(20, 20, 25, 0.08);
}
.nav-pill:hover {
transform: translateY(-1px);
box-shadow: 0 16px 28px -6px rgba(20, 20, 25, 0.24), 0 4px 10px -2px rgba(20, 20, 25, 0.12);
}
.nav-pill-icon {
width: 34px; height: 34px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background 0.2s;
}
.nav-pill:hover .nav-pill-icon { background: rgba(201, 164, 100, 0.18); }
.nav-pill-icon svg {
width: 14px; height: 14px;
stroke: currentColor; fill: none; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
}
/* Hamburger inside pill */
.nav-pill .ham {
display: flex;
flex-direction: column;
gap: 3.5px;
width: 14px;
}
.nav-pill .ham span {
display: block;
height: 1.5px;
background: currentColor;
border-radius: 1px;
transition: all 0.3s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.nav-pill .ham span:nth-child(1) { width: 100%; }
.nav-pill .ham span:nth-child(2) { width: 70%; align-self: flex-end; }
.nav-pill .ham span:nth-child(3) { width: 100%; }
.nav-pill.open .ham span:nth-child(1) { transform: translateY(5px) rotate(45deg); width: 100%; }
.nav-pill.open .ham span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-pill.open .ham span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); width: 100%; }
/* Theme toggle inline */
.theme-toggle {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--line);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
transition: all 0.25s var(--ease);
color: var(--text);
}
.theme-toggle:hover {
background: var(--surface-2);
border-color: var(--gold);
transform: translateY(-1px);
}
@media (max-width: 1024px) {
nav { padding: 0 24px; }
.nav-inner { grid-template-columns: auto auto; gap: 16px; }
.nav-links { display: none; }
.nav-tagline { display: none; }
}
@media (max-width: 600px) {
.nav-pill .pill-label { display: none; }
/*.nav-pill { padding: 0 14px 0 6px; }*/
.nav-pill { padding: 0 6px 0 6px; }
}
/* ========================================================================== */
/* FILE: /res/view/components/menu/v15.css */
/* ========================================================================== */
/* ════════ MENÜ ════════ */
#nav{position:fixed;inset:0;z-index:790;visibility:hidden;pointer-events:none}
#nav.open{visibility:visible;pointer-events:auto}
.nav-shade{position:absolute;inset:0;
background:linear-gradient(90deg,rgba(8,7,5,.96) 0%,rgba(8,7,5,.88) 36%,rgba(8,7,5,.55) 68%,rgba(8,7,5,.15) 100%);
opacity:0;transition:opacity .8s var(--ei)}
@supports (backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px)){
.nav-shade{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
background:linear-gradient(90deg,rgba(8,7,5,.94) 0%,rgba(8,7,5,.84) 36%,rgba(8,7,5,.46) 68%,rgba(8,7,5,.1) 100%)}
}
body.lux .nav-shade{background:linear-gradient(90deg,rgba(238,231,216,.97) 0%,rgba(238,231,216,.88) 36%,rgba(238,231,216,.55) 68%,rgba(238,231,216,.12) 100%)}
#nav.open .nav-shade{opacity:1}
.nav-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-body{min-height:100.5%;display:flex;flex-direction:column;justify-content:center;padding:clamp(120px,17vh,170px) clamp(24px,7vw,110px) clamp(80px,12vh,120px)}
.nav-item{display:flex;align-items:baseline;gap:clamp(18px,3vw,36px);padding:clamp(8px,1.5vh,15px) 0;width:fit-content;
opacity:0;transform:translateX(-44px)}
#nav.open .nav-item{opacity:1;transform:none;transition:opacity .7s var(--eo),transform .85s var(--eo)}
.nav-item small{font:400 10px/1 var(--font-mono);letter-spacing:.3em;color:var(--ink3);transition:color .35s}
.nav-item a{
font:400 clamp(30px,5.6vw,66px)/1.06 var(--font-serif);
letter-spacing:-.03em;
color:var(--ink2);
transition:color .4s,letter-spacing .5s var(--eo)
}
.nav-item:hover a{color:var(--ink);letter-spacing:-.015em}
.nav-item:hover small{color:var(--gold)}
.nav-item a em{font-style:italic;color:var(--gold)}
.nav-meta{margin-top:clamp(36px,6vh,60px);font:400 10px/2.3 var(--m);letter-spacing:.26em;text-transform:uppercase;color:var(--ink3);opacity:0;transition:opacity .8s .45s}
#nav.open .nav-meta{opacity:1}
/* ========================================================================== */
/* FILE: /res/view/components/morebox/v4.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
MORE BUTTON / MORE BOX
Inline expandable content + matching trigger styles
═════════════════════════════════════════════════════════════ */
/* Trigger button — works as both inline and modal trigger */
.more-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 22px 11px 22px;
height: 40px;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text);
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 100px;
cursor: pointer;
white-space: nowrap;
transition: all 0.25s var(--ease);
position: relative;
}
[data-theme="dark"] .more-btn {
background: var(--glass-bg);
border-color: var(--line);
}
.more-btn::after {
content: '↓';
display: inline-block;
font-size: 12px;
color: var(--gold);
transition: transform 0.35s var(--ease);
margin-left: 2px;
}
.more-btn:hover {
border-color: var(--gold);
color: var(--gold);
background: var(--gold-light);
}
.more-btn.open::after {
transform: rotate(180deg);
}
.more-btn:disabled,
.more-btn.loading {
opacity: 0.55;
cursor: progress;
}
.more-btn.loading::after {
animation: moreLoading 0.9s linear infinite;
}
@keyframes moreLoading {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Alternate ghost variant (subtle, text-only) */
.more-btn-ghost {
background: transparent;
border: none;
padding: 8px 0;
height: auto;
color: var(--gold);
}
.more-btn-ghost:hover {
background: transparent;
color: var(--gold-2);
}
/* The expandable box */
.more-box {
overflow: hidden;
max-height: 0;
opacity: 0;
margin-top: 18px;
background: var(--surface);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: var(--r-card);
box-shadow: var(--shadow-card);
position: relative;
}
[data-theme="dark"] .more-box {
background: var(--glass-bg);
border-color: var(--line);
}
.more-box::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 2px;
height: 100%;
background: var(--gold);
opacity: 0.5;
}
.more-box-inner {
padding: 28px 32px;
font-size: 14px;
color: var(--text-2);
line-height: 1.7;
}
.more-box-inner > *:first-child { margin-top: 0; }
.more-box-inner > *:last-child { margin-bottom: 0; }
.more-box-inner h3,
.more-box-inner h4 {
/*font-family: var(--font-display);*/
font-weight: 600;
color: var(--text);
margin: 18px 0 10px;
letter-spacing: -0.01em;
}
.more-box-inner h3 { font-size: 20px; }
.more-box-inner h4 { font-size: 16px; }
.more-box-inner p + p { margin-top: 12px; }
.more-box-inner strong { color: var(--text); font-weight: 600; }
.more-box-inner a {
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid rgba(201,164,100,0.4);
transition: border-color 0.2s;
}
.more-box-inner a:hover { border-bottom-color: var(--gold); }
.more-box-inner ul,
.more-box-inner ol {
margin: 12px 0 12px 20px;
display: flex;
flex-direction: column;
gap: 6px;
}
@media (max-width: 600px) {
.more-box-inner { padding: 22px 20px; }
.more-btn { font-size: 9px; padding: 10px 18px; }
}
/* ========================================================================== */
/* FILE: /res/view/components/popup/v4.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
POPUP / MODAL
═════════════════════════════════════════════════════════════ */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(20, 18, 14, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 2000;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s var(--ease);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.7); }
.modal-overlay.open {
opacity: 1;
pointer-events: all;
}
.modal {
background: var(--bg-tint, #faf6ee);
color: var(--text);
border: 1px solid var(--glass-border, rgba(255,255,255,0.45));
border-radius: 8px;
max-width: 560px;
width: 100%;
max-height: 88vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow:
0 24px 64px -12px rgba(40, 30, 20, 0.30),
0 8px 24px -4px rgba(40, 30, 20, 0.16);
transform: translateY(24px) scale(0.96);
opacity: 0;
transition: transform 0.45s var(--ease-out), opacity 0.35s var(--ease-out);
position: relative;
}
[data-theme="dark"] .modal {
background: var(--bg-tint, #1c1a15);
border-color: var(--line, rgba(255,255,255,0.10));
}
.modal-overlay.open .modal {
transform: translateY(0) scale(1);
opacity: 1;
}
/* Top accent line */
.modal::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 220px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* Modal header */
.modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 32px 36px 20px;
border-bottom: 1px solid var(--line);
flex-shrink: 0;
}
.modal-head-text { flex: 1; min-width: 0; }
.modal-eyebrow {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 10px;
display: block;
}
.modal-title {
/*font-family: var(--font-display);*/
font-size: 28px;
font-weight: 600;
color: var(--text);
line-height: 1.15;
letter-spacing: -0.015em;
}
.modal-title em { font-style: italic; color: var(--gold); font-weight: 500; }
.modal-close {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--surface, rgba(255,255,255,0.55));
border: 1px solid var(--line);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--text-2);
transition: all 0.2s;
flex-shrink: 0;
}
.modal-close:hover {
background: var(--gold-light, rgba(201,164,100,0.18));
color: var(--gold);
border-color: var(--gold);
}
/* Modal body */
.modal-body {
padding: 28px 36px 32px;
overflow-y: auto;
flex: 1;
font-size: 14px;
color: var(--text-2);
line-height: 1.7;
}
.modal-body p + p { margin-top: 14px; }
.modal-body strong { color: var(--text); font-weight: 600; }
.modal-body h3 {
/*font-family: var(--font-display);*/
font-size: 18px;
font-weight: 600;
color: var(--text);
margin: 24px 0 10px;
}
.modal-body ul, .modal-body ol {
margin: 14px 0 14px 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.modal-body a {
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid var(--gold-light, rgba(201,164,100,0.4));
transition: border-color 0.2s;
}
.modal-body a:hover { border-bottom-color: var(--gold); }
/* Modal footer (actions) */
.modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 20px 36px 28px;
border-top: 1px solid var(--line);
flex-shrink: 0;
flex-wrap: wrap;
}
.modal-foot.split { justify-content: space-between; }
/* Modal sizes */
.modal.small { max-width: 440px; }
.modal.large { max-width: 720px; }
.modal.xlarge { max-width: 880px; }
/* Modal scrollbar styling */
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: var(--line-2, rgba(0,0,0,0.15)); border-radius: 3px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: var(--gold); }
@media (max-width: 600px) {
.modal { max-height: 92vh; }
.modal-head, .modal-body, .modal-foot { padding-left: 24px; padding-right: 24px; }
.modal-title { font-size: 22px; }
.modal-foot { flex-direction: column; align-items: stretch; }
.modal-foot .btn { width: 100%; justify-content: center; }
}
/* ========================================================================== */
/* FILE: /res/view/components/tabs/v4.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
TABS
Multi-variant: default (underline) | pills | bordered
═════════════════════════════════════════════════════════════ */
.tabs {
margin: 32px 0;
}
/* Tab navigation bar */
.tabs-nav {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 32px;
position: relative;
}
.tab {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-2);
background: transparent;
border: none;
cursor: pointer;
white-space: nowrap;
transition: color 0.2s, background 0.25s, border-color 0.25s;
position: relative;
outline: none;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); }
.tab:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
/* Optional badge on a tab (e.g. count) */
.tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 6px;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--gold);
background: var(--gold-light);
border-radius: 100px;
}
/* ── Variant: default (underline) ──────────────────────── */
.tabs-default .tabs-nav {
border-bottom: 1px solid var(--line);
gap: 0;
}
.tabs-default .tab {
position: relative;
margin-bottom: -1px;
}
.tabs-default .tab::after {
content: '';
position: absolute;
bottom: 0;
left: 16px;
right: 16px;
height: 2px;
background: var(--gold);
transform: scaleX(0);
transition: transform 0.3s var(--ease);
transform-origin: center;
}
.tabs-default .tab:hover::after,
.tabs-default .tab.active::after {
transform: scaleX(1);
}
/* ── Variant: pills ─────────────────────────────────────── */
.tabs-pills .tabs-nav {
gap: 6px;
}
.tabs-pills .tab {
border-radius: 100px;
border: 1px solid var(--line);
background: var(--surface);
height: 36px;
padding: 0 18px;
}
[data-theme="dark"] .tabs-pills .tab {
background: var(--glass-bg);
}
.tabs-pills .tab:hover {
border-color: var(--gold);
color: var(--text);
}
.tabs-pills .tab.active {
background: var(--gold);
border-color: var(--gold);
color: #18181d;
}
.tabs-pills .tab.active .tab-badge {
background: rgba(24, 24, 29, 0.18);
color: #18181d;
}
/* ── Variant: bordered ─────────────────────────────────── */
.tabs-bordered .tabs-nav {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: 4px;
gap: 2px;
}
[data-theme="dark"] .tabs-bordered .tabs-nav {
background: var(--glass-bg);
}
.tabs-bordered .tab {
border-radius: 4px;
padding: 9px 16px;
}
.tabs-bordered .tab:hover {
background: rgba(201, 164, 100, 0.08);
}
.tabs-bordered .tab.active {
background: var(--gold);
color: #18181d;
}
/* ── Panels ─────────────────────────────────────────────── */
.tabs-panels {
position: relative;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
animation: tabPanelIn 0.35s var(--ease-out);
}
@keyframes tabPanelIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Loader (during AJAX fetch) ────────────────────────── */
.tab-panel-loading {
min-height: 80px;
position: relative;
}
.tab-loader {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 32px 0;
}
.tab-loader span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold);
opacity: 0.4;
animation: tabLoaderBounce 1.2s ease-in-out infinite;
}
.tab-loader span:nth-child(2) { animation-delay: 0.15s; }
.tab-loader span:nth-child(3) { animation-delay: 0.30s; }
@keyframes tabLoaderBounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
40% { transform: scale(1.1); opacity: 1; }
}
/* ── Error state ─────────────────────────────────────────── */
.tab-error {
padding: 24px 28px;
background: rgba(197, 64, 42, 0.05);
border: 1px solid rgba(197, 64, 42, 0.20);
border-radius: var(--r-card);
color: #c5402a;
font-size: 13px;
text-align: center;
}
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 700px) {
.tabs-nav { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.tabs-nav::-webkit-scrollbar { height: 2px; }
.tabs-nav::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 1px; }
.tab { font-size: 10px; padding: 10px 14px; }
.tabs-pills .tab { height: 32px; padding: 0 14px; }
}
/* ========================================================================== */
/* FILE: /res/view/components/icons/v4.css */
/* ========================================================================== */
/* ════════════════════════════════════════════════════════════
BUTTONS
═════════════════════════════════════════════════════════════ */
.btn {
display: inline-flex; align-items: center; gap: 14px;
padding: 0 28px 0 8px;
height: 48px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
border: none;
cursor: pointer;
text-decoration: none;
transition: all 0.25s var(--ease);
white-space: nowrap;
position: relative;
}
.btn-primary {
background: #18181d;
color: #f5f3ee;
border-radius: 100px;
box-shadow: 0 16px 32px -8px rgba(20, 20, 25, 0.25), 0 4px 12px -2px rgba(20, 20, 25, 0.10);
}
.btn-primary::before {
content: '';
width: 36px; height: 36px;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
box-shadow: 0 0 0 0 rgba(201, 164, 100, 0.4);
transition: box-shadow 0.3s;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 24px 40px -8px rgba(20, 20, 25, 0.30), 0 8px 16px -2px rgba(20, 20, 25, 0.14);
}
.btn-primary:hover::before {
box-shadow: 0 0 0 6px rgba(201, 164, 100, 0.18);
}
.btn-outline {
background: transparent;
color: var(--text);
border: 1px solid var(--line-2);
padding: 0 24px;
border-radius: 100px;
}
.btn-outline:hover {
border-color: var(--gold);
background: var(--gold-light);
color: var(--gold);
}
.btn-ghost {
background: transparent;
color: var(--gold);
padding: 12px 0;
font-size: 11px;
height: auto;
gap: 8px;
}
.btn-ghost::after { content: '→'; transition: transform 0.2s; }
.btn-ghost:hover::after { transform: translateX(6px); }
/* ========================================================================== */
/* FILE: /res/view/components/inputs/v1.css */
/* ========================================================================== */
.label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text2);
display: flex; align-items: center; gap: 12px;
}
.label::before {
content: '';
display: block; width: 28px; height: 1px;
background: var(--gold);
flex-shrink: 0;
}
/* ========================================================================== */
/* FILE: /css/developer.css */
/* ========================================================================== */
/* ═══════════════════════════════════════════════
SHELL-ONLY STYLES (nav, panel, loader)
Everything else is in base.css
═══════════════════════════════════════════════ */
/* ── Page load bar ─────────────────────────────────────── */
#load-bar {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0%;
background: linear-gradient(90deg, var(--gold), var(--gold2));
z-index: 10000;
transition: width 0.3s var(--ease), opacity 0.4s;
opacity: 0;
pointer-events: none;
}
#load-bar.loading { opacity: 1; animation: loadpulse 0.9s ease-in-out infinite; }
#load-bar.done { width: 100% !important; opacity: 0; transition: width 0.2s, opacity 0.5s 0.2s; }
@keyframes loadpulse {
0% { width: 10%; }
50% { width: 65%; }
100% { width: 80%; }
}
/* ── Content area ─────────────────────────────────────── */
#app-content {
min-height: 100svh;
}
/* Page enter animation */
.page-enter {
animation: pgIn 0.55s var(--ease-out) both;
}
@keyframes pgIn {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
/*******EXTRAS*********/
.module-num{
opacity:0.1;
}
.module-card,
.join-card,
.glass-card,
.support-card,
.cta-full,
.candle-zone,
.cta-banner
{
border-radius:0px !important;
}
/*img{filter:grayscale(1);}*/
.margin-center {
margin:0px auto;
}
.margin-top-52px{
margin-top:52px;
}
.max-width-780px{
max-width:780px;
}