@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap'); :root { --bg: #FAF6F0; --fg: #2A3A2C; --muted: #F4EBE1; --muted-soft: rgba(244,235,225,0.55); --card: #FFFFFF; --border: #D3D9CF; --primary: #D97F65; --primary-dark: #c46b53; --secondary: #A3B19B; --accent: #E6C58B; --accent-soft: rgba(230,197,139,0.30); --accent-bg: rgba(230,197,139,0.10); --sage-bg: rgba(163,177,155,0.15); --shadow-sm: 0 1px 2px rgba(42,58,44,0.06); --shadow-md: 0 4px 12px rgba(42,58,44,0.08); --shadow-lg: 0 12px 32px rgba(42,58,44,0.12); --radius: 0.75rem; --radius-lg: 1.25rem; --radius-xl: 1.5rem; --radius-pill: 9999px; --container: 1180px; --serif: 'Playfair Display', serif; --sans: 'DM Sans', sans-serif; } /* ══════════════════════════════════════════════════════════════════════════ THEMES — 10 palettes × light + dark + auto-dark Activate: ══════════════════════════════════════════════════════════════════════════ */ /* 1. Лесная тишина (forest) */ html[data-theme="forest"]{--bg:#FAF6F0;--fg:#2A3A2C;--muted:#F4EBE1;--muted-soft:rgba(244,235,225,.55);--card:#fff;--border:#D3D9CF;--primary:#D97F65;--primary-dark:#c46b53;--secondary:#A3B19B;--accent:#E6C58B;--accent-soft:rgba(230,197,139,.30);--accent-bg:rgba(230,197,139,.10);--sage-bg:rgba(163,177,155,.15);--shadow-sm:0 1px 2px rgba(42,58,44,.06);--shadow-md:0 4px 12px rgba(42,58,44,.08);--shadow-lg:0 12px 32px rgba(42,58,44,.12)} html[data-theme="forest"][data-mode="dark"]{--bg:#1A2A1C;--fg:#D8EAD4;--muted:#243226;--muted-soft:rgba(36,50,38,.55);--card:#22332A;--border:#3A5040;--primary:#E09070;--primary-dark:#CC7760;--secondary:#6A8A62;--accent:#C4A060;--accent-soft:rgba(196,160,96,.30);--accent-bg:rgba(196,160,96,.10);--sage-bg:rgba(106,138,98,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)} @media(prefers-color-scheme:dark){html[data-theme="forest"][data-mode="auto"]{--bg:#1A2A1C;--fg:#D8EAD4;--muted:#243226;--muted-soft:rgba(36,50,38,.55);--card:#22332A;--border:#3A5040;--primary:#E09070;--primary-dark:#CC7760;--secondary:#6A8A62;--accent:#C4A060;--accent-soft:rgba(196,160,96,.30);--accent-bg:rgba(196,160,96,.10);--sage-bg:rgba(106,138,98,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)}} /* 2. Морской рассвет (ocean) */ html[data-theme="ocean"]{--bg:#F0F6FA;--fg:#1A2E3A;--muted:#DDEAF2;--muted-soft:rgba(221,234,242,.55);--card:#fff;--border:#B8D0E4;--primary:#2E8CC4;--primary-dark:#2478AA;--secondary:#7AB4CC;--accent:#E8C87A;--accent-soft:rgba(232,200,122,.30);--accent-bg:rgba(232,200,122,.10);--sage-bg:rgba(122,180,204,.15);--shadow-sm:0 1px 2px rgba(26,46,58,.06);--shadow-md:0 4px 12px rgba(26,46,58,.08);--shadow-lg:0 12px 32px rgba(26,46,58,.12)} html[data-theme="ocean"][data-mode="dark"]{--bg:#0C1E2A;--fg:#C8E0F0;--muted:#122232;--muted-soft:rgba(18,34,50,.55);--card:#162838;--border:#2A4860;--primary:#4AA8DC;--primary-dark:#38A0D0;--secondary:#3A7898;--accent:#D4AC50;--accent-soft:rgba(212,172,80,.30);--accent-bg:rgba(212,172,80,.10);--sage-bg:rgba(58,120,152,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)} @media(prefers-color-scheme:dark){html[data-theme="ocean"][data-mode="auto"]{--bg:#0C1E2A;--fg:#C8E0F0;--muted:#122232;--muted-soft:rgba(18,34,50,.55);--card:#162838;--border:#2A4860;--primary:#4AA8DC;--primary-dark:#38A0D0;--secondary:#3A7898;--accent:#D4AC50;--accent-soft:rgba(212,172,80,.30);--accent-bg:rgba(212,172,80,.10);--sage-bg:rgba(58,120,152,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)}} /* 3. Осенний сад (autumn) */ html[data-theme="autumn"]{--bg:#FAF3ED;--fg:#3A1A0A;--muted:#F0E2D2;--muted-soft:rgba(240,226,210,.55);--card:#fff;--border:#D8B89A;--primary:#C4542A;--primary-dark:#AA4020;--secondary:#B07848;--accent:#D4A050;--accent-soft:rgba(212,160,80,.30);--accent-bg:rgba(212,160,80,.10);--sage-bg:rgba(176,120,72,.15);--shadow-sm:0 1px 2px rgba(58,26,10,.06);--shadow-md:0 4px 12px rgba(58,26,10,.08);--shadow-lg:0 12px 32px rgba(58,26,10,.12)} html[data-theme="autumn"][data-mode="dark"]{--bg:#2A1008;--fg:#F4DECE;--muted:#341810;--muted-soft:rgba(52,24,16,.55);--card:#3C1E12;--border:#6A3020;--primary:#DC6A40;--primary-dark:#CC5830;--secondary:#8A5838;--accent:#C48030;--accent-soft:rgba(196,128,48,.30);--accent-bg:rgba(196,128,48,.10);--sage-bg:rgba(138,88,56,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)} @media(prefers-color-scheme:dark){html[data-theme="autumn"][data-mode="auto"]{--bg:#2A1008;--fg:#F4DECE;--muted:#341810;--muted-soft:rgba(52,24,16,.55);--card:#3C1E12;--border:#6A3020;--primary:#DC6A40;--primary-dark:#CC5830;--secondary:#8A5838;--accent:#C48030;--accent-soft:rgba(196,128,48,.30);--accent-bg:rgba(196,128,48,.10);--sage-bg:rgba(138,88,56,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)}} /* 4. Горный воздух (mountain) */ html[data-theme="mountain"]{--bg:#F4F6F8;--fg:#1E2A35;--muted:#DDE3E9;--muted-soft:rgba(221,227,233,.55);--card:#fff;--border:#BBC8D4;--primary:#4A7A9B;--primary-dark:#3C6685;--secondary:#7A99B4;--accent:#B4C8D4;--accent-soft:rgba(180,200,212,.30);--accent-bg:rgba(180,200,212,.10);--sage-bg:rgba(122,153,180,.15);--shadow-sm:0 1px 2px rgba(30,42,53,.06);--shadow-md:0 4px 12px rgba(30,42,53,.08);--shadow-lg:0 12px 32px rgba(30,42,53,.12)} html[data-theme="mountain"][data-mode="dark"]{--bg:#0C1820;--fg:#C8D8E8;--muted:#141E28;--muted-soft:rgba(20,30,40,.55);--card:#182030;--border:#2A3C4E;--primary:#6A9ABE;--primary-dark:#5888AC;--secondary:#3A5E78;--accent:#7AA4BC;--accent-soft:rgba(122,164,188,.30);--accent-bg:rgba(122,164,188,.10);--sage-bg:rgba(58,94,120,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)} @media(prefers-color-scheme:dark){html[data-theme="mountain"][data-mode="auto"]{--bg:#0C1820;--fg:#C8D8E8;--muted:#141E28;--muted-soft:rgba(20,30,40,.55);--card:#182030;--border:#2A3C4E;--primary:#6A9ABE;--primary-dark:#5888AC;--secondary:#3A5E78;--accent:#7AA4BC;--accent-soft:rgba(122,164,188,.30);--accent-bg:rgba(122,164,188,.10);--sage-bg:rgba(58,94,120,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)}} /* 5. Лавандовый вечер (lavender) */ html[data-theme="lavender"]{--bg:#FAF0FC;--fg:#2A1835;--muted:#EDD8F4;--muted-soft:rgba(237,216,244,.55);--card:#fff;--border:#D4B8E2;--primary:#8A52B4;--primary-dark:#763E9C;--secondary:#B47EC8;--accent:#D4A0C8;--accent-soft:rgba(212,160,200,.30);--accent-bg:rgba(212,160,200,.10);--sage-bg:rgba(180,126,200,.15);--shadow-sm:0 1px 2px rgba(42,24,53,.06);--shadow-md:0 4px 12px rgba(42,24,53,.08);--shadow-lg:0 12px 32px rgba(42,24,53,.12)} html[data-theme="lavender"][data-mode="dark"]{--bg:#180A28;--fg:#EAD4F8;--muted:#220E34;--muted-soft:rgba(34,14,52,.55);--card:#2A1040;--border:#4A2870;--primary:#A872D0;--primary-dark:#9660BC;--secondary:#6A3E8A;--accent:#C08AB8;--accent-soft:rgba(192,138,184,.30);--accent-bg:rgba(192,138,184,.10);--sage-bg:rgba(106,62,138,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)} @media(prefers-color-scheme:dark){html[data-theme="lavender"][data-mode="auto"]{--bg:#180A28;--fg:#EAD4F8;--muted:#220E34;--muted-soft:rgba(34,14,52,.55);--card:#2A1040;--border:#4A2870;--primary:#A872D0;--primary-dark:#9660BC;--secondary:#6A3E8A;--accent:#C08AB8;--accent-soft:rgba(192,138,184,.30);--accent-bg:rgba(192,138,184,.10);--sage-bg:rgba(106,62,138,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)}} /* 6. Тёплый янтарь (amber) */ html[data-theme="amber"]{--bg:#FAF4E8;--fg:#2A1E08;--muted:#F0E2C2;--muted-soft:rgba(240,226,194,.55);--card:#fff;--border:#DCC88C;--primary:#C88820;--primary-dark:#AA7010;--secondary:#A87848;--accent:#E0C060;--accent-soft:rgba(224,192,96,.30);--accent-bg:rgba(224,192,96,.10);--sage-bg:rgba(168,120,72,.15);--shadow-sm:0 1px 2px rgba(42,30,8,.06);--shadow-md:0 4px 12px rgba(42,30,8,.08);--shadow-lg:0 12px 32px rgba(42,30,8,.12)} html[data-theme="amber"][data-mode="dark"]{--bg:#201400;--fg:#F8ECC0;--muted:#2C1C04;--muted-soft:rgba(44,28,4,.55);--card:#341C08;--border:#6A4800;--primary:#D4980A;--primary-dark:#C08000;--secondary:#7A5028;--accent:#C0A040;--accent-soft:rgba(192,160,64,.30);--accent-bg:rgba(192,160,64,.10);--sage-bg:rgba(122,80,40,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)} @media(prefers-color-scheme:dark){html[data-theme="amber"][data-mode="auto"]{--bg:#201400;--fg:#F8ECC0;--muted:#2C1C04;--muted-soft:rgba(44,28,4,.55);--card:#341C08;--border:#6A4800;--primary:#D4980A;--primary-dark:#C08000;--secondary:#7A5028;--accent:#C0A040;--accent-soft:rgba(192,160,64,.30);--accent-bg:rgba(192,160,64,.10);--sage-bg:rgba(122,80,40,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)}} /* 7. Северный лес (nordic) */ html[data-theme="nordic"]{--bg:#EEF3F0;--fg:#1A2825;--muted:#D2E2DC;--muted-soft:rgba(210,226,220,.55);--card:#fff;--border:#ACC8BC;--primary:#2A7A6A;--primary-dark:#1E6558;--secondary:#5A9A88;--accent:#A8C4B8;--accent-soft:rgba(168,196,184,.30);--accent-bg:rgba(168,196,184,.10);--sage-bg:rgba(90,154,136,.15);--shadow-sm:0 1px 2px rgba(26,40,37,.06);--shadow-md:0 4px 12px rgba(26,40,37,.08);--shadow-lg:0 12px 32px rgba(26,40,37,.12)} html[data-theme="nordic"][data-mode="dark"]{--bg:#081810;--fg:#CCE8DC;--muted:#0C2018;--muted-soft:rgba(12,32,24,.55);--card:#102818;--border:#204838;--primary:#3AAA90;--primary-dark:#2E9880;--secondary:#286855;--accent:#80B8A8;--accent-soft:rgba(128,184,168,.30);--accent-bg:rgba(128,184,168,.10);--sage-bg:rgba(40,104,85,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)} @media(prefers-color-scheme:dark){html[data-theme="nordic"][data-mode="auto"]{--bg:#081810;--fg:#CCE8DC;--muted:#0C2018;--muted-soft:rgba(12,32,24,.55);--card:#102818;--border:#204838;--primary:#3AAA90;--primary-dark:#2E9880;--secondary:#286855;--accent:#80B8A8;--accent-soft:rgba(128,184,168,.30);--accent-bg:rgba(128,184,168,.10);--sage-bg:rgba(40,104,85,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)}} /* 8. Розовый рассвет (rose) */ html[data-theme="rose"]{--bg:#FAF0F2;--fg:#2A1820;--muted:#F0D8DC;--muted-soft:rgba(240,216,220,.55);--card:#fff;--border:#E0B0BA;--primary:#C44A6A;--primary-dark:#AA3858;--secondary:#D08898;--accent:#E8B4A4;--accent-soft:rgba(232,180,164,.30);--accent-bg:rgba(232,180,164,.10);--sage-bg:rgba(208,136,152,.15);--shadow-sm:0 1px 2px rgba(42,24,32,.06);--shadow-md:0 4px 12px rgba(42,24,32,.08);--shadow-lg:0 12px 32px rgba(42,24,32,.12)} html[data-theme="rose"][data-mode="dark"]{--bg:#200810;--fg:#F8D8DE;--muted:#2C0E18;--muted-soft:rgba(44,14,24,.55);--card:#38101C;--border:#6A2840;--primary:#D46880;--primary-dark:#C05870;--secondary:#8A4060;--accent:#C0909A;--accent-soft:rgba(192,144,154,.30);--accent-bg:rgba(192,144,154,.10);--sage-bg:rgba(138,64,96,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)} @media(prefers-color-scheme:dark){html[data-theme="rose"][data-mode="auto"]{--bg:#200810;--fg:#F8D8DE;--muted:#2C0E18;--muted-soft:rgba(44,14,24,.55);--card:#38101C;--border:#6A2840;--primary:#D46880;--primary-dark:#C05870;--secondary:#8A4060;--accent:#C0909A;--accent-soft:rgba(192,144,154,.30);--accent-bg:rgba(192,144,154,.10);--sage-bg:rgba(138,64,96,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)}} /* 9. Графитовый минимализм (graphite) */ html[data-theme="graphite"]{--bg:#F6F6F6;--fg:#1A1A1A;--muted:#E8E8E8;--muted-soft:rgba(232,232,232,.55);--card:#fff;--border:#CCCCCC;--primary:#3A3A3A;--primary-dark:#202020;--secondary:#888888;--accent:#C8C8C8;--accent-soft:rgba(200,200,200,.30);--accent-bg:rgba(200,200,200,.10);--sage-bg:rgba(136,136,136,.15);--shadow-sm:0 1px 2px rgba(26,26,26,.06);--shadow-md:0 4px 12px rgba(26,26,26,.08);--shadow-lg:0 12px 32px rgba(26,26,26,.12)} html[data-theme="graphite"][data-mode="dark"]{--bg:#0A0A0A;--fg:#F2F2F2;--muted:#161616;--muted-soft:rgba(22,22,22,.55);--card:#1C1C1C;--border:#333333;--primary:#D0D0D0;--primary-dark:#E0E0E0;--secondary:#606060;--accent:#888888;--accent-soft:rgba(136,136,136,.30);--accent-bg:rgba(136,136,136,.10);--sage-bg:rgba(96,96,96,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)} @media(prefers-color-scheme:dark){html[data-theme="graphite"][data-mode="auto"]{--bg:#0A0A0A;--fg:#F2F2F2;--muted:#161616;--muted-soft:rgba(22,22,22,.55);--card:#1C1C1C;--border:#333333;--primary:#D0D0D0;--primary-dark:#E0E0E0;--secondary:#606060;--accent:#888888;--accent-soft:rgba(136,136,136,.30);--accent-bg:rgba(136,136,136,.10);--sage-bg:rgba(96,96,96,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)}} /* 10. Изумрудный оазис (emerald) */ html[data-theme="emerald"]{--bg:#F0FAF4;--fg:#0A2818;--muted:#CCE8D4;--muted-soft:rgba(204,232,212,.55);--card:#fff;--border:#A0D4B4;--primary:#1A8A50;--primary-dark:#107040;--secondary:#5AB478;--accent:#C8DC40;--accent-soft:rgba(200,220,64,.30);--accent-bg:rgba(200,220,64,.10);--sage-bg:rgba(90,180,120,.15);--shadow-sm:0 1px 2px rgba(10,40,24,.06);--shadow-md:0 4px 12px rgba(10,40,24,.08);--shadow-lg:0 12px 32px rgba(10,40,24,.12)} html[data-theme="emerald"][data-mode="dark"]{--bg:#041008;--fg:#C0F0D0;--muted:#081A10;--muted-soft:rgba(8,26,16,.55);--card:#0C2014;--border:#184830;--primary:#28B068;--primary-dark:#20A058;--secondary:#186840;--accent:#A0C020;--accent-soft:rgba(160,192,32,.30);--accent-bg:rgba(160,192,32,.10);--sage-bg:rgba(24,104,64,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)} @media(prefers-color-scheme:dark){html[data-theme="emerald"][data-mode="auto"]{--bg:#041008;--fg:#C0F0D0;--muted:#081A10;--muted-soft:rgba(8,26,16,.55);--card:#0C2014;--border:#184830;--primary:#28B068;--primary-dark:#20A058;--secondary:#186840;--accent:#A0C020;--accent-soft:rgba(160,192,32,.30);--accent-bg:rgba(160,192,32,.10);--sage-bg:rgba(24,104,64,.20);--shadow-sm:0 1px 4px rgba(0,0,0,.20);--shadow-md:0 4px 16px rgba(0,0,0,.30);--shadow-lg:0 12px 40px rgba(0,0,0,.40)}} /* ── Dark mode global adjustments ────────────────────────────────────────── */ [data-mode="dark"] body,[data-mode="auto"] body { color-scheme: light; } html[data-mode="dark"] { color-scheme: dark; } @media(prefers-color-scheme:dark){html[data-mode="auto"]{ color-scheme: dark; }} /* ── Improved dark palettes (cascade-override + --fg-aXX contrast vars) ──── */ html[data-theme="forest"][data-mode="dark"]{--bg:#0E1810;--fg:#EDF6E8;--muted:#172018;--muted-soft:rgba(23,32,24,.55);--card:#1D2E1F;--border:#2E4A32;--primary:#E49080;--primary-dark:#D07868;--secondary:#7AAA72;--accent:#D4AC68;--accent-soft:rgba(212,172,104,.30);--accent-bg:rgba(212,172,104,.10);--sage-bg:rgba(122,170,114,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(237,246,232,.55);--fg-a65:rgba(237,246,232,.65);--fg-a70:rgba(237,246,232,.70);--fg-a75:rgba(237,246,232,.75);--fg-a80:rgba(237,246,232,.80)} @media(prefers-color-scheme:dark){html[data-theme="forest"][data-mode="auto"]{--bg:#0E1810;--fg:#EDF6E8;--muted:#172018;--muted-soft:rgba(23,32,24,.55);--card:#1D2E1F;--border:#2E4A32;--primary:#E49080;--primary-dark:#D07868;--secondary:#7AAA72;--accent:#D4AC68;--accent-soft:rgba(212,172,104,.30);--accent-bg:rgba(212,172,104,.10);--sage-bg:rgba(122,170,114,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(237,246,232,.55);--fg-a65:rgba(237,246,232,.65);--fg-a70:rgba(237,246,232,.70);--fg-a75:rgba(237,246,232,.75);--fg-a80:rgba(237,246,232,.80)}} html[data-theme="ocean"][data-mode="dark"]{--bg:#061018;--fg:#DCEEF8;--muted:#0C1C2C;--muted-soft:rgba(12,28,44,.55);--card:#122030;--border:#1E3A54;--primary:#58BCEC;--primary-dark:#44AAD8;--secondary:#488FB0;--accent:#E0B858;--accent-soft:rgba(224,184,88,.30);--accent-bg:rgba(224,184,88,.10);--sage-bg:rgba(72,143,176,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(220,238,248,.55);--fg-a65:rgba(220,238,248,.65);--fg-a70:rgba(220,238,248,.70);--fg-a75:rgba(220,238,248,.75);--fg-a80:rgba(220,238,248,.80)} @media(prefers-color-scheme:dark){html[data-theme="ocean"][data-mode="auto"]{--bg:#061018;--fg:#DCEEF8;--muted:#0C1C2C;--muted-soft:rgba(12,28,44,.55);--card:#122030;--border:#1E3A54;--primary:#58BCEC;--primary-dark:#44AAD8;--secondary:#488FB0;--accent:#E0B858;--accent-soft:rgba(224,184,88,.30);--accent-bg:rgba(224,184,88,.10);--sage-bg:rgba(72,143,176,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(220,238,248,.55);--fg-a65:rgba(220,238,248,.65);--fg-a70:rgba(220,238,248,.70);--fg-a75:rgba(220,238,248,.75);--fg-a80:rgba(220,238,248,.80)}} html[data-theme="autumn"][data-mode="dark"]{--bg:#160600;--fg:#F8E8D4;--muted:#220E04;--muted-soft:rgba(34,14,4,.55);--card:#2E1408;--border:#5C2816;--primary:#EC7C50;--primary-dark:#D86838;--secondary:#AA6438;--accent:#D4A040;--accent-soft:rgba(212,160,64,.30);--accent-bg:rgba(212,160,64,.10);--sage-bg:rgba(170,100,56,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(248,232,212,.55);--fg-a65:rgba(248,232,212,.65);--fg-a70:rgba(248,232,212,.70);--fg-a75:rgba(248,232,212,.75);--fg-a80:rgba(248,232,212,.80)} @media(prefers-color-scheme:dark){html[data-theme="autumn"][data-mode="auto"]{--bg:#160600;--fg:#F8E8D4;--muted:#220E04;--muted-soft:rgba(34,14,4,.55);--card:#2E1408;--border:#5C2816;--primary:#EC7C50;--primary-dark:#D86838;--secondary:#AA6438;--accent:#D4A040;--accent-soft:rgba(212,160,64,.30);--accent-bg:rgba(212,160,64,.10);--sage-bg:rgba(170,100,56,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(248,232,212,.55);--fg-a65:rgba(248,232,212,.65);--fg-a70:rgba(248,232,212,.70);--fg-a75:rgba(248,232,212,.75);--fg-a80:rgba(248,232,212,.80)}} html[data-theme="mountain"][data-mode="dark"]{--bg:#060C14;--fg:#D4E6F4;--muted:#0E1A28;--muted-soft:rgba(14,26,40,.55);--card:#142232;--border:#203650;--primary:#78AACE;--primary-dark:#6498BC;--secondary:#3A6A98;--accent:#88B0C8;--accent-soft:rgba(136,176,200,.30);--accent-bg:rgba(136,176,200,.10);--sage-bg:rgba(58,106,152,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(212,230,244,.55);--fg-a65:rgba(212,230,244,.65);--fg-a70:rgba(212,230,244,.70);--fg-a75:rgba(212,230,244,.75);--fg-a80:rgba(212,230,244,.80)} @media(prefers-color-scheme:dark){html[data-theme="mountain"][data-mode="auto"]{--bg:#060C14;--fg:#D4E6F4;--muted:#0E1A28;--muted-soft:rgba(14,26,40,.55);--card:#142232;--border:#203650;--primary:#78AACE;--primary-dark:#6498BC;--secondary:#3A6A98;--accent:#88B0C8;--accent-soft:rgba(136,176,200,.30);--accent-bg:rgba(136,176,200,.10);--sage-bg:rgba(58,106,152,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(212,230,244,.55);--fg-a65:rgba(212,230,244,.65);--fg-a70:rgba(212,230,244,.70);--fg-a75:rgba(212,230,244,.75);--fg-a80:rgba(212,230,244,.80)}} html[data-theme="lavender"][data-mode="dark"]{--bg:#080318;--fg:#F0E4FC;--muted:#100628;--muted-soft:rgba(16,6,40,.55);--card:#180A3A;--border:#301660;--primary:#BC88E4;--primary-dark:#A874D0;--secondary:#7040A8;--accent:#D0A0C8;--accent-soft:rgba(208,160,200,.30);--accent-bg:rgba(208,160,200,.10);--sage-bg:rgba(112,64,168,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(240,228,252,.55);--fg-a65:rgba(240,228,252,.65);--fg-a70:rgba(240,228,252,.70);--fg-a75:rgba(240,228,252,.75);--fg-a80:rgba(240,228,252,.80)} @media(prefers-color-scheme:dark){html[data-theme="lavender"][data-mode="auto"]{--bg:#080318;--fg:#F0E4FC;--muted:#100628;--muted-soft:rgba(16,6,40,.55);--card:#180A3A;--border:#301660;--primary:#BC88E4;--primary-dark:#A874D0;--secondary:#7040A8;--accent:#D0A0C8;--accent-soft:rgba(208,160,200,.30);--accent-bg:rgba(208,160,200,.10);--sage-bg:rgba(112,64,168,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(240,228,252,.55);--fg-a65:rgba(240,228,252,.65);--fg-a70:rgba(240,228,252,.70);--fg-a75:rgba(240,228,252,.75);--fg-a80:rgba(240,228,252,.80)}} html[data-theme="amber"][data-mode="dark"]{--bg:#0E0600;--fg:#FCF0C4;--muted:#1A0E02;--muted-soft:rgba(26,14,2,.55);--card:#2A1A06;--border:#523400;--primary:#E4A82A;--primary-dark:#D09018;--secondary:#906030;--accent:#CEB038;--accent-soft:rgba(206,176,56,.30);--accent-bg:rgba(206,176,56,.10);--sage-bg:rgba(144,96,48,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(252,240,196,.55);--fg-a65:rgba(252,240,196,.65);--fg-a70:rgba(252,240,196,.70);--fg-a75:rgba(252,240,196,.75);--fg-a80:rgba(252,240,196,.80)} @media(prefers-color-scheme:dark){html[data-theme="amber"][data-mode="auto"]{--bg:#0E0600;--fg:#FCF0C4;--muted:#1A0E02;--muted-soft:rgba(26,14,2,.55);--card:#2A1A06;--border:#523400;--primary:#E4A82A;--primary-dark:#D09018;--secondary:#906030;--accent:#CEB038;--accent-soft:rgba(206,176,56,.30);--accent-bg:rgba(206,176,56,.10);--sage-bg:rgba(144,96,48,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(252,240,196,.55);--fg-a65:rgba(252,240,196,.65);--fg-a70:rgba(252,240,196,.70);--fg-a75:rgba(252,240,196,.75);--fg-a80:rgba(252,240,196,.80)}} html[data-theme="nordic"][data-mode="dark"]{--bg:#020E08;--fg:#C8ECE0;--muted:#081810;--muted-soft:rgba(8,24,16,.55);--card:#0E2418;--border:#183E2C;--primary:#48C0A0;--primary-dark:#34AE8E;--secondary:#287868;--accent:#88C0AE;--accent-soft:rgba(136,192,174,.30);--accent-bg:rgba(136,192,174,.10);--sage-bg:rgba(40,120,104,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(200,236,224,.55);--fg-a65:rgba(200,236,224,.65);--fg-a70:rgba(200,236,224,.70);--fg-a75:rgba(200,236,224,.75);--fg-a80:rgba(200,236,224,.80)} @media(prefers-color-scheme:dark){html[data-theme="nordic"][data-mode="auto"]{--bg:#020E08;--fg:#C8ECE0;--muted:#081810;--muted-soft:rgba(8,24,16,.55);--card:#0E2418;--border:#183E2C;--primary:#48C0A0;--primary-dark:#34AE8E;--secondary:#287868;--accent:#88C0AE;--accent-soft:rgba(136,192,174,.30);--accent-bg:rgba(136,192,174,.10);--sage-bg:rgba(40,120,104,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(200,236,224,.55);--fg-a65:rgba(200,236,224,.65);--fg-a70:rgba(200,236,224,.70);--fg-a75:rgba(200,236,224,.75);--fg-a80:rgba(200,236,224,.80)}} html[data-theme="rose"][data-mode="dark"]{--bg:#0E0208;--fg:#FCE0E8;--muted:#180610;--muted-soft:rgba(24,6,16,.55);--card:#2C0C1C;--border:#581E3A;--primary:#E4788E;--primary-dark:#D0627A;--secondary:#984060;--accent:#CC9898;--accent-soft:rgba(204,152,152,.30);--accent-bg:rgba(204,152,152,.10);--sage-bg:rgba(152,64,96,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(252,224,232,.55);--fg-a65:rgba(252,224,232,.65);--fg-a70:rgba(252,224,232,.70);--fg-a75:rgba(252,224,232,.75);--fg-a80:rgba(252,224,232,.80)} @media(prefers-color-scheme:dark){html[data-theme="rose"][data-mode="auto"]{--bg:#0E0208;--fg:#FCE0E8;--muted:#180610;--muted-soft:rgba(24,6,16,.55);--card:#2C0C1C;--border:#581E3A;--primary:#E4788E;--primary-dark:#D0627A;--secondary:#984060;--accent:#CC9898;--accent-soft:rgba(204,152,152,.30);--accent-bg:rgba(204,152,152,.10);--sage-bg:rgba(152,64,96,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(252,224,232,.55);--fg-a65:rgba(252,224,232,.65);--fg-a70:rgba(252,224,232,.70);--fg-a75:rgba(252,224,232,.75);--fg-a80:rgba(252,224,232,.80)}} html[data-theme="graphite"][data-mode="dark"]{--bg:#060606;--fg:#F4F4F4;--muted:#111111;--muted-soft:rgba(17,17,17,.55);--card:#1C1C1C;--border:#303030;--primary:#D8D8D8;--primary-dark:#E8E8E8;--secondary:#686868;--accent:#909090;--accent-soft:rgba(144,144,144,.30);--accent-bg:rgba(144,144,144,.10);--sage-bg:rgba(104,104,104,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(244,244,244,.55);--fg-a65:rgba(244,244,244,.65);--fg-a70:rgba(244,244,244,.70);--fg-a75:rgba(244,244,244,.75);--fg-a80:rgba(244,244,244,.80)} @media(prefers-color-scheme:dark){html[data-theme="graphite"][data-mode="auto"]{--bg:#060606;--fg:#F4F4F4;--muted:#111111;--muted-soft:rgba(17,17,17,.55);--card:#1C1C1C;--border:#303030;--primary:#D8D8D8;--primary-dark:#E8E8E8;--secondary:#686868;--accent:#909090;--accent-soft:rgba(144,144,144,.30);--accent-bg:rgba(144,144,144,.10);--sage-bg:rgba(104,104,104,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(244,244,244,.55);--fg-a65:rgba(244,244,244,.65);--fg-a70:rgba(244,244,244,.70);--fg-a75:rgba(244,244,244,.75);--fg-a80:rgba(244,244,244,.80)}} html[data-theme="emerald"][data-mode="dark"]{--bg:#021006;--fg:#C4F0D4;--muted:#061A0C;--muted-soft:rgba(6,26,12,.55);--card:#0A2218;--border:#144428;--primary:#3CC47A;--primary-dark:#2EB06A;--secondary:#1C7848;--accent:#A8CC20;--accent-soft:rgba(168,204,32,.30);--accent-bg:rgba(168,204,32,.10);--sage-bg:rgba(28,120,72,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(196,240,212,.55);--fg-a65:rgba(196,240,212,.65);--fg-a70:rgba(196,240,212,.70);--fg-a75:rgba(196,240,212,.75);--fg-a80:rgba(196,240,212,.80)} @media(prefers-color-scheme:dark){html[data-theme="emerald"][data-mode="auto"]{--bg:#021006;--fg:#C4F0D4;--muted:#061A0C;--muted-soft:rgba(6,26,12,.55);--card:#0A2218;--border:#144428;--primary:#3CC47A;--primary-dark:#2EB06A;--secondary:#1C7848;--accent:#A8CC20;--accent-soft:rgba(168,204,32,.30);--accent-bg:rgba(168,204,32,.10);--sage-bg:rgba(28,120,72,.18);--shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 16px rgba(0,0,0,.32);--shadow-lg:0 12px 40px rgba(0,0,0,.45);--fg-a55:rgba(196,240,212,.55);--fg-a65:rgba(196,240,212,.65);--fg-a70:rgba(196,240,212,.70);--fg-a75:rgba(196,240,212,.75);--fg-a80:rgba(196,240,212,.80)}} /* ── Dark mode text & component overrides ────────────────────────────────── */ /* text */ html[data-mode="dark"] .muted{color:var(--fg-a55)} html[data-mode="dark"] .hero__lead{color:var(--fg-a80)} html[data-mode="dark"] .section__sub{color:var(--fg-a70)} html[data-mode="dark"] .section__sub--lg{color:var(--fg-a80)} html[data-mode="dark"] .prose{color:var(--fg-a80)} html[data-mode="dark"] .prose__list em{color:var(--fg)} html[data-mode="dark"] .card__sub{color:var(--fg-a65)} html[data-mode="dark"] .card__desc{color:var(--fg-a75)} html[data-mode="dark"] .step p{color:var(--fg-a70)} html[data-mode="dark"] .accordion__inner{color:var(--fg-a75)} html[data-mode="dark"] .contact__list{color:var(--fg-a80)} html[data-mode="dark"] .contact__cta-text{color:var(--fg-a75)} html[data-mode="dark"] .card--quote blockquote{color:var(--fg-a80)} html[data-mode="dark"] .card__author-context{color:var(--fg-a55)} html[data-mode="dark"] .form__note{color:var(--fg-a55)} /* nav */ html[data-mode="dark"] .nav{background:var(--muted);border-bottom-color:var(--border)} html[data-mode="dark"] .nav__links{color:var(--fg-a80)} html[data-mode="dark"] .nav__burger{color:var(--fg-a80)} html[data-mode="dark"] .icon-btn{color:var(--fg-a70)} /* drawer */ html[data-mode="dark"] .drawer__panel{border-left-color:var(--border)} html[data-mode="dark"] .drawer__header{border-bottom-color:var(--border)} html[data-mode="dark"] .drawer__footer{border-top-color:var(--border)} html[data-mode="dark"] .drawer__contacts{color:var(--fg-a75)} html[data-mode="dark"] .drawer__overlay{background:rgba(0,0,0,.65)} /* sections */ html[data-mode="dark"] .section--muted{background:var(--muted-soft)} /* hero */ html[data-mode="dark"] .hero__blob{mix-blend-mode:screen;opacity:.18} html[data-mode="dark"] .hero__blob--1{background:var(--accent)} html[data-mode="dark"] .hero__blob--2{background:var(--primary)} html[data-mode="dark"] .icon--quote{color:var(--primary);opacity:.5} html[data-mode="dark"] .portrait__dot--br{background:var(--sage-bg)} html[data-mode="dark"] .portrait__dot--tl{background:var(--accent-bg)} /* testimonials */ html[data-mode="dark"] .testimonials__blob--1{background:var(--primary);opacity:.1} html[data-mode="dark"] .testimonials__blob--2{background:var(--accent);opacity:.12} html[data-mode="dark"] .card--quote{background:var(--card)} html[data-mode="dark"] .card__author{border-top-color:var(--border)} html[data-mode="dark"] .avatar{background:var(--accent-bg);border-color:var(--border)} html[data-mode="dark"] .carousel__btn{border-color:var(--border)} /* FAQ accordion */ html[data-mode="dark"] .accordion__item{background:var(--card);border-color:var(--border)} html[data-mode="dark"] .accordion__item.is-open{border-color:var(--primary)} /* contact */ html[data-mode="dark"] .contact__cta-icon{background:var(--accent-bg)} html[data-mode="dark"] .map__address{color:var(--fg-a75)} /* banner */ html[data-mode="dark"] .banner__overlay{background:rgba(0,0,0,.45)} /* cards / buttons */ html[data-mode="dark"] .btn--outline{border-color:var(--border)} html[data-mode="dark"] .card--service:hover{border-color:var(--border)} html[data-mode="dark"] .card__icon--soft{background:var(--accent-bg)} html[data-mode="dark"] .step{border-left-color:var(--border)} /* form */ html[data-mode="dark"] .field input,html[data-mode="dark"] .field textarea{background:var(--muted);border-color:var(--border);color:var(--fg)} html[data-mode="dark"] .field input:focus,html[data-mode="dark"] .field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--accent-soft)} html[data-mode="dark"] .form__status.is-success{background:var(--sage-bg);color:var(--fg);border-color:var(--secondary)} @media(prefers-color-scheme:dark){ /* text */ html[data-mode="auto"] .muted{color:var(--fg-a55)} html[data-mode="auto"] .hero__lead{color:var(--fg-a80)} html[data-mode="auto"] .section__sub{color:var(--fg-a70)} html[data-mode="auto"] .section__sub--lg{color:var(--fg-a80)} html[data-mode="auto"] .prose{color:var(--fg-a80)} html[data-mode="auto"] .prose__list em{color:var(--fg)} html[data-mode="auto"] .card__sub{color:var(--fg-a65)} html[data-mode="auto"] .card__desc{color:var(--fg-a75)} html[data-mode="auto"] .step p{color:var(--fg-a70)} html[data-mode="auto"] .accordion__inner{color:var(--fg-a75)} html[data-mode="auto"] .contact__list{color:var(--fg-a80)} html[data-mode="auto"] .contact__cta-text{color:var(--fg-a75)} html[data-mode="auto"] .card--quote blockquote{color:var(--fg-a80)} html[data-mode="auto"] .card__author-context{color:var(--fg-a55)} html[data-mode="auto"] .form__note{color:var(--fg-a55)} /* nav */ html[data-mode="auto"] .nav{background:var(--muted);border-bottom-color:var(--border)} html[data-mode="auto"] .nav__links{color:var(--fg-a80)} html[data-mode="auto"] .nav__burger{color:var(--fg-a80)} html[data-mode="auto"] .icon-btn{color:var(--fg-a70)} /* drawer */ html[data-mode="auto"] .drawer__panel{border-left-color:var(--border)} html[data-mode="auto"] .drawer__header{border-bottom-color:var(--border)} html[data-mode="auto"] .drawer__footer{border-top-color:var(--border)} html[data-mode="auto"] .drawer__contacts{color:var(--fg-a75)} html[data-mode="auto"] .drawer__overlay{background:rgba(0,0,0,.65)} /* sections */ html[data-mode="auto"] .section--muted{background:var(--muted-soft)} /* hero */ html[data-mode="auto"] .hero__blob{mix-blend-mode:screen;opacity:.18} html[data-mode="auto"] .hero__blob--1{background:var(--accent)} html[data-mode="auto"] .hero__blob--2{background:var(--primary)} html[data-mode="auto"] .icon--quote{color:var(--primary);opacity:.5} html[data-mode="auto"] .portrait__dot--br{background:var(--sage-bg)} html[data-mode="auto"] .portrait__dot--tl{background:var(--accent-bg)} /* testimonials */ html[data-mode="auto"] .testimonials__blob--1{background:var(--primary);opacity:.1} html[data-mode="auto"] .testimonials__blob--2{background:var(--accent);opacity:.12} html[data-mode="auto"] .card--quote{background:var(--card)} html[data-mode="auto"] .card__author{border-top-color:var(--border)} html[data-mode="auto"] .avatar{background:var(--accent-bg);border-color:var(--border)} html[data-mode="auto"] .carousel__btn{border-color:var(--border)} /* FAQ accordion */ html[data-mode="auto"] .accordion__item{background:var(--card);border-color:var(--border)} html[data-mode="auto"] .accordion__item.is-open{border-color:var(--primary)} /* contact */ html[data-mode="auto"] .contact__cta-icon{background:var(--accent-bg)} html[data-mode="auto"] .map__address{color:var(--fg-a75)} /* banner */ html[data-mode="auto"] .banner__overlay{background:rgba(0,0,0,.45)} /* cards / buttons */ html[data-mode="auto"] .btn--outline{border-color:var(--border)} html[data-mode="auto"] .card--service:hover{border-color:var(--border)} html[data-mode="auto"] .card__icon--soft{background:var(--accent-bg)} html[data-mode="auto"] .step{border-left-color:var(--border)} /* form */ html[data-mode="auto"] .field input,html[data-mode="auto"] .field textarea{background:var(--muted);border-color:var(--border);color:var(--fg)} html[data-mode="auto"] .field input:focus,html[data-mode="auto"] .field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--accent-soft)} html[data-mode="auto"] .form__status.is-success{background:var(--sage-bg);color:var(--fg);border-color:var(--secondary)} } /* ── Theme-mode toggle widget (compact, lives in footer) ─────────────────── */ .theme-toggle { display:flex; align-items:center; gap:1px; background:rgba(128,128,128,.15); border-radius:var(--radius-pill); padding:2px; } .theme-toggle__btn { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:var(--radius-pill); font-size:11px; line-height:1; cursor:pointer; border:none; background:transparent; color:var(--fg); opacity:.55; transition:background .15s,opacity .15s; } .theme-toggle__btn.is-active { background:var(--primary); opacity:1; box-shadow:0 1px 3px rgba(0,0,0,.15); } .theme-toggle__btn:hover:not(.is-active){ opacity:.85; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.6; background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; } ::selection { background: var(--primary); color: #fff; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.15; color: var(--fg); } .container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; } .container--narrow { max-width: 800px; } .font-serif { font-family: var(--serif); } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .muted { color: rgba(42,58,44,0.55); } /* Icons */ .icon { width: 20px; height: 20px; flex-shrink: 0; } .icon--sm { width: 16px; height: 16px; } .icon--md { width: 22px; height: 22px; } .icon--lg { width: 28px; height: 28px; } .icon--xl { width: 40px; height: 40px; } .icon--primary { color: var(--primary); } .icon--quote { color: rgba(217,127,101,0.4); margin-bottom: 1.25rem; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1.4rem; font-weight: 500; font-size: .95rem; border-radius: var(--radius-pill); transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease; border: 1px solid transparent; } .btn--sm { padding: .55rem 1.2rem; } .btn--lg { padding: 1rem 2rem; font-size: 1.05rem; } .btn--primary { background: var(--primary); color: #fff; } .btn--primary:hover { background: var(--primary-dark); } .btn--primary:disabled { opacity: .45; cursor: not-allowed; } .btn--outline { background: transparent; border-color: rgba(42,58,44,0.18); color: var(--fg); } .btn--outline:hover { background: var(--muted); } .btn--block { width: 100%; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); color: rgba(42,58,44,0.7); transition: background .2s, color .2s; } .icon-btn:hover { background: var(--accent-bg); color: var(--fg); } /* Badge */ .badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--fg); font-size: .875rem; margin-bottom: 1.25rem; } /* Nav */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; background: rgba(250,246,240,0.85); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(211,217,207,0.5); } .nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; } .nav__logo { font-family: var(--serif); font-size: 1.25rem; letter-spacing: .02em; } .nav__links { display: none; gap: 2rem; font-size: .9rem; font-weight: 500; color: rgba(42,58,44,0.8); } .nav__link:hover { color: var(--primary); } .nav__cta { display: flex; align-items: center; gap: .5rem; } .nav__burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); color: rgba(42,58,44,0.8); } .nav__burger:hover { background: var(--accent-bg); } @media (min-width: 1024px) { .nav__links { display: flex; } .nav__burger { display: none; } } /* Drawer */ .drawer { position: fixed; inset: 0; z-index: 60; pointer-events: none; } .drawer.is-open { pointer-events: auto; } .drawer__overlay { position: absolute; inset: 0; background: rgba(42,58,44,0.4); opacity: 0; transition: opacity .3s ease; } .drawer.is-open .drawer__overlay { opacity: 1; } .drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(85vw, 380px); background: var(--bg); border-left: 1px solid rgba(211,217,207,0.5); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s ease; } .drawer.is-open .drawer__panel { transform: translateX(0); } .drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(211,217,207,0.5); font-family: var(--serif); font-size: 1.125rem; } .drawer__nav { display: flex; flex-direction: column; padding: .5rem .75rem; flex: 1; overflow-y: auto; } .drawer__link { font-family: var(--serif); font-size: 1.25rem; padding: .9rem 1rem; border-radius: var(--radius); transition: background .2s, color .2s; } .drawer__link:hover { background: var(--sage-bg); color: var(--primary); } .drawer__footer { padding: 1.25rem 1.5rem; border-top: 1px solid rgba(211,217,207,0.4); } .drawer__contacts { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .75rem; font-size: .9rem; color: rgba(42,58,44,0.75); } .drawer__contacts a { display: inline-flex; align-items: center; gap: .65rem; } /* Sections */ .section { padding: 6rem 0; } .section--muted { background: rgba(244,235,225,0.45); } .section--accent { background: var(--accent-bg); } .section--sage { background: var(--sage-bg); position: relative; overflow: hidden; } .section__header { text-align: center; max-width: 760px; margin: 0 auto 3.5rem; } .section__title { font-size: 2.25rem; line-height: 1.15; } .section__title--lg { font-size: 2.5rem; } @media (min-width: 768px) { .section { padding: 8rem 0; } .section__title { font-size: 2.75rem; } .section__title--lg { font-size: 3rem; } } .section__sub { font-size: 1.075rem; color: rgba(42,58,44,0.7); margin-top: 1rem; } .section__sub--lg { font-size: 1.2rem; color: rgba(42,58,44,0.8); } /* Hero */ .hero { position: relative; padding: 9rem 0 5rem; overflow: hidden; } .hero__inner { max-width: 760px; } .hero__title { font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 1.05; margin-bottom: 1.75rem; } .hero__lead { font-size: 1.25rem; color: rgba(42,58,44,0.8); max-width: 600px; margin: 0 0 2.25rem; line-height: 1.55; } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; } .hero__blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; mix-blend-mode: multiply; opacity: .25; } .hero__blob--1 { width: 700px; height: 700px; background: rgba(230,197,139,0.6); top: -10%; right: -15%; } .hero__blob--2 { width: 520px; height: 520px; background: rgba(217,127,101,0.4); bottom: -20%; right: 15%; } @media (min-width: 768px) { .hero { padding: 12rem 0 8rem; } } /* Image break */ .image-break { padding: 3rem 0; background: rgba(244,235,225,0.4); } .image-break__frame { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); } .image-break__frame img { width: 100%; height: 40vh; object-fit: cover; } @media (min-width: 768px) { .image-break__frame img { height: 60vh; } } /* About */ .about { display: flex; flex-direction: column; gap: 3.5rem; align-items: center; } .about__avatar { display: flex; justify-content: center; } .portrait { position: relative; width: 14rem; height: 14rem; border-radius: 50%; border: 2px solid var(--accent); overflow: hidden; box-shadow: var(--shadow-lg); } .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .portrait__dot { position: absolute; border-radius: 50%; backdrop-filter: blur(10px); z-index: -1; } .portrait__dot--br { right: -1rem; bottom: -1rem; width: 6rem; height: 6rem; background: rgba(163,177,155,0.3); } .portrait__dot--tl { left: -1rem; top: -1rem; width: 4rem; height: 4rem; background: rgba(217,127,101,0.15); } .about__text .section__title { margin-bottom: 1.25rem; } .prose { display: flex; flex-direction: column; gap: 1.25rem; font-size: 1.125rem; color: rgba(42,58,44,0.8); } .prose p { margin: 0; } .prose__heading { font-family: var(--serif); font-size: 1.4rem; color: var(--fg); margin: .75rem 0 -.25rem; font-weight: 600; display: flex; align-items: center; gap: .75rem; } .prose__heading::before { content: ""; display: inline-block; width: 1.75rem; height: 2px; background: var(--accent); border-radius: 2px; } .prose__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; } .prose__list li { position: relative; padding-left: 1.25rem; font-size: 1rem; line-height: 1.55; } .prose__list li::before { content: ""; position: absolute; left: 0; top: .55rem; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .prose__list strong { color: var(--fg); font-weight: 600; } .prose__list em { font-style: italic; color: rgba(42,58,44,0.9); } @media (min-width: 768px) { .about { flex-direction: row; align-items: center; gap: 4rem; } .about__avatar { width: 33%; justify-content: flex-end; } .portrait { width: 18rem; height: 18rem; } .about__text { width: 67%; } } /* Cards & grids */ .grid { display: grid; gap: 2rem; } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } @media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2,1fr); } .grid--3 { grid-template-columns: repeat(2,1fr); } } @media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3,1fr); } } .card { background: var(--card); border: 1px solid rgba(211,217,207,0.5); border-radius: var(--radius-xl); padding: 2rem; box-shadow: var(--shadow-sm); transition: border-color .25s, box-shadow .25s; } .card--service:hover { border-color: rgba(217,127,101,0.3); box-shadow: var(--shadow-md); } .card__icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .card__icon--soft { background: rgba(217,127,101,0.1); width: 3rem; height: 3rem; } .card__title { font-size: 1.5rem; margin-bottom: .5rem; } .card__sub { color: rgba(42,58,44,0.65); margin: 0 0 1.25rem; } .card__desc { color: rgba(42,58,44,0.75); font-size: 1.05rem; line-height: 1.6; margin: 0; } .card--featured { position: relative; overflow: hidden; } .card--featured::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--primary); } .format-list { list-style: none; margin: 0; padding: 0; } .format-list li { display: flex; justify-content: space-between; padding: .9rem 0; border-bottom: 1px solid rgba(211,217,207,0.5); font-size: 1.05rem; } .format-list li:last-child { border-bottom: 0; } .format-list strong { font-weight: 600; } /* Banner */ .banner { position: relative; height: 50vh; overflow: hidden; } .banner__img { width: 100%; height: 100%; object-fit: cover; } .banner__overlay { position: absolute; inset: 0; background: rgba(42,58,44,0.25); } .banner__title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 1.5rem; color: #fff; text-align: center; font-size: clamp(2rem,5vw,3.75rem); text-shadow: 0 4px 20px rgba(0,0,0,0.3); } @media (min-width: 768px) { .banner { height: 70vh; } } /* Approach steps */ .approach { max-width: 900px; } .steps { display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem; } .step { position: relative; padding: .5rem 0 .5rem 2rem; border-left: 2px solid rgba(163,177,155,0.5); } .step::before { content: ""; position: absolute; left: -5px; top: 1rem; width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); } .step--accent { border-left-color: rgba(230,197,139,0.5); } .step--accent::before { background: var(--accent); } .step--primary { border-left-color: rgba(217,127,101,0.5); } .step--primary::before { background: var(--primary); } .step h3 { font-size: 1.5rem; margin-bottom: .5rem; } .step p { color: rgba(42,58,44,0.7); font-size: 1.075rem; margin: 0; } /* Testimonials carousel */ .testimonials__blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: 1; } .testimonials__blob--1 { width: 500px; height: 500px; background: rgba(217,127,101,0.10); top: 50%; left: 0; transform: translateY(-50%); } .testimonials__blob--2 { width: 400px; height: 400px; background: rgba(230,197,139,0.20); top: 0; right: 0; } .carousel { position: relative; max-width: 1080px; margin: 0 auto; } .carousel__viewport { overflow: hidden; } .carousel__track { display: flex; transition: transform .5s cubic-bezier(0.22,1,0.36,1); } .carousel__slide { flex: 0 0 100%; padding: 0 .75rem; box-sizing: border-box; } @media (min-width: 768px) { .carousel__slide { flex: 0 0 50%; } } .card--quote { background: rgba(255,255,255,0.85); backdrop-filter: blur(6px); padding: 2.5rem; height: 100%; display: flex; flex-direction: column; } .card--quote blockquote { font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.6; margin: 0 0 2rem; color: rgba(42,58,44,0.85); flex: 1; } .card__author { display: flex; align-items: center; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid rgba(211,217,207,0.5); } .avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(217,127,101,0.15); border: 1px solid rgba(217,127,101,0.3); display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); color: var(--primary); } .card__author-name { font-weight: 500; } .card__author-context { font-size: .875rem; color: rgba(42,58,44,0.6); } .carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--card); border: 1px solid rgba(211,217,207,0.6); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: background .2s; z-index: 2; } .carousel__btn:hover { background: var(--accent-soft); } .carousel__btn--prev { left: 4px; } .carousel__btn--next { right: 4px; } @media (min-width: 768px) { .carousel__btn--prev { left: -22px; } .carousel__btn--next { right: -22px; } } /* Accordion */ .accordion { display: flex; flex-direction: column; gap: .75rem; } .accordion__item { background: rgba(255,255,255,0.6); border: 1px solid rgba(211,217,207,0.6); border-radius: var(--radius-lg); padding: 0 1.5rem; transition: background .25s, border-color .25s; } .accordion__item.is-open { background: var(--card); border-color: rgba(217,127,101,0.3); } .accordion__trigger { width: 100%; padding: 1.25rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: left; font-family: var(--serif); font-size: 1.15rem; } .accordion__chevron { transition: transform .25s; } .accordion__item.is-open .accordion__chevron { transform: rotate(180deg); } .accordion__content { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .accordion__inner { padding: 0 0 1.5rem; color: rgba(42,58,44,0.75); line-height: 1.65; font-size: 1rem; } /* Contact */ .contact { display: flex; flex-direction: column; gap: 3rem; max-width: 1100px; margin: 0 auto; } .contact__intro { flex: 1; } .contact__list { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-direction: column; gap: 1.25rem; font-size: 1.075rem; color: rgba(42,58,44,0.8); } .contact__list li { display: flex; align-items: center; gap: 1rem; } .contact__cta { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; } .contact__cta-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: rgba(217,127,101,0.1); border-radius: 16px; } .contact__cta-text { margin: 0; font-size: 1rem; color: rgba(42,58,44,0.75); line-height: 1.6; } @media (min-width: 1024px) { .contact { flex-direction: row; gap: 4rem; align-items: flex-start; } .contact__intro, .form { flex: 1; } } @media (max-width: 1023px) { .contact__cta { align-items: stretch; } } /* Form */ .form { padding: 2rem; } .field { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; } .field label { font-size: .95rem; font-weight: 500; } .field input, .field textarea { width: 100%; padding: .85rem 1rem; border: 1px solid rgba(211,217,207,0.7); background: rgba(250,246,240,0.5); border-radius: var(--radius); font: inherit; color: var(--fg); transition: border-color .2s, box-shadow .2s; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(217,127,101,0.15); } .field textarea { resize: vertical; min-height: 120px; } .field.is-error input, .field.is-error textarea { border-color: #cc4b3a; } .field__error { color: #cc4b3a; font-size: .85rem; display: none; } .field.is-error .field__error { display: block; } .smart-captcha { margin-bottom: .25rem; } .form__note { font-size: .8rem; color: rgba(42,58,44,0.5); text-align: center; margin: 1rem 0 0; } .form__status { margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--radius); font-size: .95rem; display: none; } .form__status.is-success { display: block; background: rgba(163,177,155,0.25); color: #2A3A2C; border: 1px solid rgba(163,177,155,0.5); } .form__status.is-error { display: block; background: rgba(204,75,58,0.1); color: #8a2e22; border: 1px solid rgba(204,75,58,0.3); } /* Map section */ .map-section { padding: 5rem 0 0; background: var(--muted); } .map-section .section__header { margin-bottom: 2.5rem; } .map__address { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; color: rgba(42,58,44,0.75); margin-top: .75rem; } .map__address svg { flex-shrink: 0; color: var(--primary); } .map__frame { width: 100%; height: 420px; border-radius: 0; overflow: hidden; display: block; border: none; } @media (min-width: 768px) { .map__frame { height: 480px; } } /* Footer */ .footer { background: var(--muted); color: var(--fg); padding: 2.5rem 0; border-top: 1px solid var(--border); } .footer__inner { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; text-align: center; } .footer__brand { display: flex; flex-direction: column; align-items: center; gap: .5rem; } .footer__meta { display: flex; flex-direction: column; align-items: center; gap: .5rem; } .footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; font-size: .9rem; opacity: .7; } .footer__links a:hover { opacity: 1; } .footer__copy { font-size: .85rem; opacity: .5; white-space: nowrap; } @media (min-width: 768px) { .footer__inner { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; } .footer__brand { align-items: flex-start; } .footer__meta { flex-direction: row; align-items: center; gap: 1.5rem; } .footer__links { flex-wrap: nowrap; } } /* Modal */ .modal { position: fixed; inset: 0; z-index: 70; display: none; align-items: flex-start; justify-content: center; padding: 2rem 1rem; overflow-y: auto; } .modal.is-open { display: flex; } .modal__overlay { position: fixed; inset: 0; background: rgba(42,58,44,0.55); } .modal__dialog { position: relative; background: var(--bg); width: 100%; max-width: 720px; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 1.5rem 1.5rem 2rem; max-height: calc(100vh - 4rem); overflow-y: auto; animation: modalIn .25s ease; } .modal__dialog::-webkit-scrollbar { width: 5px; } .modal__dialog::-webkit-scrollbar-track { background: transparent; margin: 1.5rem 0; } .modal__dialog::-webkit-scrollbar-thumb { background: rgba(42,58,44,0.18); border-radius: var(--radius-pill); } .modal__dialog::-webkit-scrollbar-thumb:hover { background: rgba(42,58,44,0.32); } @keyframes modalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .modal__header { display: flex; align-items: center; gap: .75rem; margin-bottom: .25rem; } .modal__header h3 { font-size: 1.6rem; flex: 1; font-family: var(--serif); } .modal__back { display: none; } .modal__back.is-visible { display: inline-flex; } .modal__sub { color: rgba(42,58,44,0.65); margin: 0 0 1rem; } .stepper { display: flex; gap: .5rem; margin-bottom: 1.5rem; } .stepper__bar { flex: 1; height: 4px; border-radius: var(--radius-pill); background: rgba(211,217,207,0.7); transition: background .3s; } .stepper__bar.is-active { background: var(--primary); } .format-card { text-align: left; padding: 1.5rem; border: 1px solid rgba(211,217,207,0.7); border-radius: var(--radius-lg); background: var(--card); transition: border-color .2s, background .2s; cursor: pointer; } .format-card:hover { border-color: var(--primary); background: var(--accent-bg); } .format-card h4 { font-size: 1.25rem; font-family: var(--serif); margin: .25rem 0; } .format-card p { color: rgba(42,58,44,0.7); font-size: .9rem; margin: 0 0 .75rem; } .checkline { display: inline-flex; align-items: center; gap: .5rem; color: rgba(42,58,44,0.7); margin-bottom: 1.25rem; font-size: .95rem; } .booking-grid { gap: 1.5rem; } .booking-grid__heading { display: flex; align-items: center; gap: .5rem; font-weight: 500; margin-bottom: .75rem; font-size: .95rem; color: rgba(42,58,44,0.8); } .empty-slot { padding: 2rem; border: 1px dashed rgba(211,217,207,0.7); border-radius: var(--radius-lg); text-align: center; color: rgba(42,58,44,0.5); font-size: .9rem; } /* Datepicker */ .datepicker { background: var(--card); border: 1px solid rgba(211,217,207,0.6); border-radius: var(--radius-lg); padding: .75rem; } .dp__head { display: flex; align-items: center; justify-content: space-between; padding: .25rem .25rem .75rem; } .dp__title { font-family: var(--serif); font-size: 1.05rem; } .dp__nav { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); color: rgba(42,58,44,0.7); } .dp__nav:hover:not(:disabled) { background: var(--accent-bg); color: var(--fg); } .dp__nav:disabled { opacity: .3; cursor: not-allowed; } .dp__grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; } .dp__dow { text-align: center; font-size: .75rem; color: rgba(42,58,44,0.5); padding: .35rem 0; text-transform: capitalize; } .dp__day { aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); font-size: .9rem; transition: background .15s, color .15s; } .dp__day:hover:not(:disabled):not(.is-selected) { background: var(--accent-bg); } .dp__day:disabled { color: rgba(42,58,44,0.25); cursor: not-allowed; } .dp__day.is-other { color: rgba(42,58,44,0.3); } .dp__day.is-today:not(.is-selected) { background: rgba(211,217,207,0.4); font-weight: 500; } .dp__day.is-selected { background: var(--primary); color: #fff; font-weight: 500; } .slots__date { font-size: .9rem; color: rgba(42,58,44,0.6); margin: 0 0 .75rem; } .slots__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .5rem; } .slot { padding: .75rem 1rem; border: 1px solid rgba(211,217,207,0.7); background: var(--card); border-radius: var(--radius); font-weight: 500; transition: all .15s; } .slot:hover { border-color: rgba(217,127,101,0.5); background: var(--accent-bg); } .slot.is-selected { background: var(--primary); border-color: var(--primary); color: #fff; } .slot.is-booked { opacity: .55; cursor: not-allowed; background: rgba(211,217,207,.2); border-color: rgba(211,217,207,.5); } .slot.is-booked:hover { border-color: rgba(211,217,207,.5); background: rgba(211,217,207,.2); } .slot__tag { display: block; font-size: .7rem; font-weight: 400; opacity: .7; line-height: 1.2; } .slot.is-format-only { cursor: not-allowed; background: rgba(163,177,155,.07); border-color: rgba(163,177,155,.35); color: rgba(42,58,44,.45); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .5rem 1rem; } .slot.is-format-only:hover { background: rgba(163,177,155,.07); border-color: rgba(163,177,155,.35); } .slot__format-hint { display: block; font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: rgba(42,58,44,.4); line-height: 1.2; } .modal__actions { display: flex; justify-content: flex-end; padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid rgba(211,217,207,0.4); } /* Legal modals (privacy / offer) */ .modal__dialog--legal { max-width: 760px; } .legal-prose { color: rgba(42,58,44,0.85); font-size: 1rem; line-height: 1.65; } .legal-prose p { margin: 0 0 1rem; } .legal-prose h4 { font-family: var(--serif); font-size: 1.2rem; color: var(--fg); margin: 1.6rem 0 .6rem; font-weight: 600; } .legal-prose ul { margin: 0 0 1rem; padding-left: 1.25rem; } .legal-prose li { margin-bottom: .35rem; } .legal-prose strong { color: var(--fg); } .legal-table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: .95rem; } .legal-table td { padding: .65rem .85rem; border: 1px solid rgba(211,217,207,0.7); vertical-align: top; line-height: 1.55; } .legal-table tr td:first-child { font-weight: 600; color: var(--fg); background: rgba(163,177,155,0.1); white-space: nowrap; width: 36%; } .footer__links a { cursor: pointer; } .summary { background: var(--accent-bg); border: 1px solid rgba(230,197,139,0.4); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.5rem; } .summary__title { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(42,58,44,0.6); font-weight: 500; margin-bottom: .65rem; } .summary__row { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 1rem; } .summary__chip { display: inline-flex; align-items: center; gap: .4rem; } /* Toast */ .toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; max-width: 360px; padding: 1rem 1.25rem; background: var(--fg); color: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: toastIn .3s ease; } .toast strong { display: block; font-family: var(--serif); margin-bottom: .25rem; } .toast div { font-size: .9rem; opacity: .85; } @keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Reveal animation */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(0.22,1,0.36,1), transform .8s cubic-bezier(0.22,1,0.36,1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }