/* ========================================================================== Español Plovdiv — Main Stylesheet Colour tokens are theme-scoped via [data-theme] on . Remove the "Dev Tools" block at the bottom before production. ========================================================================== */ /* --- Base tokens (overridden per theme) --- */ :root { --font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-sans: var(--font-family); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04); --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.07); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.09); --header-height: 108px; --container: 1200px; --container-gutter: clamp(1.25rem, 5vw, 2.5rem); --section-space: clamp(4rem, 9vw, 6.5rem); --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --touch-min: 44px; } /* --- Theme: Coral (default) --- */ [data-theme="coral"], :root:not([data-theme]) { --color-primary: #c0392b; --color-primary-hover: #a93226; --color-primary-light: #fdecea; --color-accent: #e67e22; --color-bg: #faf8f6; --color-bg-alt: #ffffff; --color-bg-muted: #f3efeb; --color-text: #1a1a1a; --color-text-muted: #5c5c5c; --color-border: #e0d8d0; --color-header-bg: rgba(255, 255, 255, 0.92); --color-footer-bg: #2c1810; --color-footer-text: #f5ebe3; --color-footer-muted: #c4a882; --color-hero-overlay: rgba(44, 24, 16, 0.55); } [data-theme="coral"][data-mode="dark"], :root:not([data-theme])[data-mode="dark"] { --color-primary: #e74c3c; --color-primary-hover: #ff6b5a; --color-primary-light: #3d1f1a; --color-accent: #f39c12; --color-bg: #141010; --color-bg-alt: #1e1814; --color-bg-muted: #2a221c; --color-text: #f5f0eb; --color-text-muted: #a89888; --color-border: #3d332a; --color-header-bg: rgba(20, 16, 16, 0.94); --color-footer-bg: #0d0908; --color-footer-text: #f5ebe3; --color-footer-muted: #8a7560; --color-hero-overlay: rgba(0, 0, 0, 0.65); } /* --- Theme: Ocean --- */ [data-theme="ocean"] { --color-primary: #1a5276; --color-primary-hover: #154360; --color-primary-light: #eaf2f8; --color-accent: #2980b9; --color-bg: #f4f8fb; --color-bg-alt: #ffffff; --color-bg-muted: #e8f0f6; --color-text: #1a2332; --color-text-muted: #4a5f73; --color-border: #c8d8e4; --color-header-bg: rgba(255, 255, 255, 0.92); --color-footer-bg: #0f2438; --color-footer-text: #e8f0f6; --color-footer-muted: #7a9bb5; --color-hero-overlay: rgba(15, 36, 56, 0.6); } [data-theme="ocean"][data-mode="dark"] { --color-primary: #3498db; --color-primary-hover: #5dade2; --color-primary-light: #1a2f42; --color-accent: #5dade2; --color-bg: #0c1218; --color-bg-alt: #141c26; --color-bg-muted: #1c2836; --color-text: #e8f0f6; --color-text-muted: #8a9db0; --color-border: #2a3d50; --color-header-bg: rgba(12, 18, 24, 0.94); --color-footer-bg: #060c12; --color-footer-text: #e8f0f6; --color-footer-muted: #5a7a94; --color-hero-overlay: rgba(0, 0, 0, 0.65); } /* --- Theme: Forest --- */ [data-theme="forest"] { --color-primary: #0d6e6e; --color-primary-hover: #0a5555; --color-primary-light: #e6f5f5; --color-accent: #27ae60; --color-bg: #f4faf8; --color-bg-alt: #ffffff; --color-bg-muted: #e8f2ef; --color-text: #142420; --color-text-muted: #4a635c; --color-border: #c4ddd6; --color-header-bg: rgba(255, 255, 255, 0.92); --color-footer-bg: #0a2824; --color-footer-text: #e8f2ef; --color-footer-muted: #7aab9e; --color-hero-overlay: rgba(10, 40, 36, 0.58); } [data-theme="forest"][data-mode="dark"] { --color-primary: #1abc9c; --color-primary-hover: #48c9b0; --color-primary-light: #143028; --color-accent: #2ecc71; --color-bg: #0a100e; --color-bg-alt: #121a18; --color-bg-muted: #1a2622; --color-text: #e8f2ef; --color-text-muted: #8aa89e; --color-border: #2a3d36; --color-header-bg: rgba(10, 16, 14, 0.94); --color-footer-bg: #060e0c; --color-footer-text: #e8f2ef; --color-footer-muted: #5a8878; --color-hero-overlay: rgba(0, 0, 0, 0.65); } /* --- Theme: Violet --- */ [data-theme="violet"] { --color-primary: #6c3483; --color-primary-hover: #5b2c6f; --color-primary-light: #f4ecf7; --color-accent: #9b59b6; --color-bg: #faf8fc; --color-bg-alt: #ffffff; --color-bg-muted: #f0ebf5; --color-text: #1e1424; --color-text-muted: #5c4a6a; --color-border: #ddd0e8; --color-header-bg: rgba(255, 255, 255, 0.92); --color-footer-bg: #1a0f24; --color-footer-text: #f0ebf5; --color-footer-muted: #a088b8; --color-hero-overlay: rgba(26, 15, 36, 0.58); } [data-theme="violet"][data-mode="dark"] { --color-primary: #bb8fce; --color-primary-hover: #d2b4de; --color-primary-light: #2a1a36; --color-accent: #af7ac5; --color-bg: #100c14; --color-bg-alt: #1a1420; --color-bg-muted: #241c2e; --color-text: #f0ebf5; --color-text-muted: #9a88aa; --color-border: #3a2e48; --color-header-bg: rgba(16, 12, 20, 0.94); --color-footer-bg: #08060c; --color-footer-text: #f0ebf5; --color-footer-muted: #786090; --color-hero-overlay: rgba(0, 0, 0, 0.65); } /* --- Theme: Amber --- */ [data-theme="amber"] { --color-primary: #b7770d; --color-primary-hover: #9c6509; --color-primary-light: #fef5e7; --color-accent: #d4ac0d; --color-bg: #fdfaf4; --color-bg-alt: #ffffff; --color-bg-muted: #f8f0e0; --color-text: #241a08; --color-text-muted: #6a5830; --color-border: #e8dcc0; --color-header-bg: rgba(255, 255, 255, 0.92); --color-footer-bg: #241808; --color-footer-text: #f8f0e0; --color-footer-muted: #b89860; --color-hero-overlay: rgba(36, 24, 8, 0.58); } [data-theme="amber"][data-mode="dark"] { --color-primary: #f39c12; --color-primary-hover: #f5b041; --color-primary-light: #362810; --color-accent: #f1c40f; --color-bg: #141008; --color-bg-alt: #1e1810; --color-bg-muted: #2a2218; --color-text: #f8f0e0; --color-text-muted: #a89870; --color-border: #3d3220; --color-header-bg: rgba(20, 16, 8, 0.94); --color-footer-bg: #0c0804; --color-footer-text: #f8f0e0; --color-footer-muted: #887048; --color-hero-overlay: rgba(0, 0, 0, 0.65); } /* --- Reset & base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.65; letter-spacing: -0.011em; color: var(--color-text); background: var(--color-bg); transition: background var(--transition), color var(--transition); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.nav-open { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-primary-hover); } ul { list-style: none; } .container { width: min(calc(100% - 2 * var(--container-gutter)), var(--container)); margin-inline: auto; } /* --- Typography --- */ h1, h2, h3, h4 { font-family: var(--font-family); line-height: 1.15; letter-spacing: -0.03em; color: var(--color-text); } h1 { font-size: clamp(2.5rem, 5.5vw, 3.75rem); font-weight: 700; } h2 { font-size: clamp(1.75rem, 3.5vw, 2.375rem); font-weight: 600; } h3 { font-size: clamp(1.2rem, 2vw, 1.375rem); font-weight: 600; } .section-title { margin-bottom: 0.75rem; } .section-subtitle { color: var(--color-text-muted); font-size: 1.125rem; line-height: 1.6; margin-bottom: 2.5rem; max-width: 36rem; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 4rem; padding: 1.375rem 2.75rem; font-family: var(--font-family); font-size: 1.0625rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; border-radius: 0; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--transition), color var(--transition), border-color var(--transition), opacity 0.15s ease; } .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:hover { background: var(--color-primary-hover); color: #fff; } .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.6); } .btn:active { opacity: 0.88; } .btn-outline { background: transparent; color: var(--color-primary); border-color: currentColor; } .btn-outline:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-ghost:focus-visible { outline-color: #fff; } /* --- Header (template-part: header) --- */ .site-header { position: sticky; top: 0; z-index: 100; min-height: var(--header-height); background: var(--color-header-bg); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); transition: background var(--transition); } .site-header__inner { display: flex; align-items: center; position: relative; width: 100%; min-height: var(--header-height); padding-inline: max(var(--container-gutter), 2rem); padding-block: 1.25rem; gap: clamp(2rem, 5vw, 3.5rem); } .site-logo { flex-shrink: 0; z-index: 1; font-family: var(--font-family); font-size: clamp(1.35rem, 2.5vw, 1.625rem); font-weight: 700; letter-spacing: -0.03em; color: var(--color-text); min-width: 0; line-height: 1.2; transition: color var(--transition); } .site-logo:hover { color: var(--color-primary); } .site-logo span { color: var(--color-text-muted); font-weight: 500; font-size: clamp(0.8125rem, 1.8vw, 0.9375rem); letter-spacing: 0; display: block; margin-top: 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main-nav { min-width: 0; } .main-nav ul { display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 4vw, 3rem); } .main-nav a { position: relative; display: block; padding: 0.5rem 0; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.015em; color: var(--color-text-muted); transition: color var(--transition); } .main-nav a:hover { color: var(--color-text); } .main-nav a.active { color: var(--color-text); font-weight: 600; } .main-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--color-primary); border-radius: 1px; } .header-actions { flex-shrink: 0; margin-left: auto; z-index: 1; display: flex; align-items: center; gap: 0.5rem; } /* Language picker */ .lang-picker { position: relative; } .lang-picker__toggle { display: flex; align-items: center; gap: 0.45rem; padding: 0.65rem 0.85rem; background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-family); font-size: 1rem; font-weight: 500; color: var(--color-text-muted); transition: color var(--transition), background var(--transition); } .lang-picker__toggle:hover { color: var(--color-text); background: var(--color-bg-muted); } .lang-picker__menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px; padding: 0.35rem; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; z-index: 10; } .lang-picker.is-open .lang-picker__menu { display: block; } .lang-picker__menu button { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.7rem 0.9rem; background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-family); font-size: 0.9375rem; font-weight: 500; color: var(--color-text); text-align: left; transition: background var(--transition); } .lang-picker__menu button:hover { background: var(--color-bg-muted); } .lang-picker__menu button.is-active { color: var(--color-primary); font-weight: 600; } /* Dark mode toggle */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text-muted); transition: color var(--transition), background var(--transition); } .theme-toggle:hover { color: var(--color-text); background: var(--color-bg-muted); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { width: 18px; height: 18px; } [data-mode="light"] .theme-toggle .icon-moon, [data-mode="dark"] .theme-toggle .icon-sun { display: none; } /* Mobile nav toggle */ .nav-toggle { display: none; flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; padding: 0; background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text); } .nav-toggle:hover { background: var(--color-bg-muted); } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- Hero (template-part: hero) --- */ .hero { position: relative; min-height: calc(100vh - var(--header-height)); min-height: calc(100dvh - var(--header-height)); display: flex; align-items: center; background: linear-gradient(var(--color-hero-overlay), var(--color-hero-overlay)), url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=1600&q=80") center / cover no-repeat; } .hero__content { position: relative; z-index: 1; max-width: 42rem; color: #fff; padding-block: clamp(3rem, 8vw, 5rem); } .hero h1 { color: #fff; margin-bottom: 1.25rem; letter-spacing: -0.035em; } .hero p { font-size: clamp(1.0625rem, 2vw, 1.25rem); opacity: 0.9; margin-bottom: 2.5rem; line-height: 1.75; max-width: 36rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; } /* --- Page header (inner pages) --- */ .page-header { background: var(--color-primary-light); padding: clamp(3rem, 7vw, 4.5rem) 0; border-bottom: 1px solid var(--color-border); transition: background var(--transition); } .page-header h1 { color: var(--color-primary); } .page-header p { color: var(--color-text-muted); font-size: 1.125rem; margin-top: 0.75rem; max-width: 36rem; } /* --- Content sections --- */ .page-content { padding: var(--section-space) 0; } .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; } .content-grid.reverse { direction: rtl; } .content-grid.reverse > * { direction: ltr; } .placeholder-image { aspect-ratio: 4 / 5; background: var(--color-bg-muted); border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 0.9375rem; font-weight: 500; } .card { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 2.5rem); box-shadow: var(--shadow-sm); transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); } /* --- Spanish Lessons page --- */ .lessons-layout { display: grid; grid-template-columns: 1fr min(19rem, 32%); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .lessons-intro { color: var(--color-text-muted); margin-bottom: 2.5rem; max-width: 40rem; } .lesson-block { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--color-border); } .lesson-block:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .lesson-block p { color: var(--color-text-muted); max-width: 40rem; } .lessons-cta { margin-top: 2.5rem; } .lessons-sidebar { position: sticky; top: calc(var(--header-height) + 1.5rem); } .course-index { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), border-color var(--transition); } .course-index:hover { box-shadow: var(--shadow-md); } .course-index::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); } .course-index__eyebrow { padding: 1.35rem 1.35rem 0; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-primary); } .course-index__title { padding: 0.35rem 1.35rem 1.1rem; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; } .course-index__table { width: 100%; border-collapse: collapse; } .course-index__table tr { border-top: 1px solid var(--color-border); transition: background var(--transition); } .course-index__table tr:hover { background: var(--color-primary-light); } .course-index__dot { width: 2.5rem; padding: 0.9rem 1.25rem 0.9rem 1.35rem; vertical-align: middle; } .course-index__dot::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-border); transition: background var(--transition), transform var(--transition); } .course-index__table tr:hover .course-index__dot::before { background: var(--color-primary); transform: scale(1.25); } .course-index__link { padding: 0; vertical-align: middle; } .course-index__link a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1.35rem 0.9rem 0.5rem; color: var(--color-text); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; line-height: 1.3; text-decoration: none; transition: color var(--transition); } .course-index__table tr:hover .course-index__link a { color: var(--color-primary); } .course-index__link svg { width: 1rem; height: 1rem; flex-shrink: 0; opacity: 0; transform: translateX(-6px); transition: opacity var(--transition), transform var(--transition); } .course-index__table tr:hover .course-index__link svg { opacity: 1; transform: translateX(0); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Contact page --- */ .contact-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } .contact-info-list { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; } .contact-info-item { display: flex; gap: 1rem; align-items: flex-start; } .contact-info-item__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-light); color: var(--color-primary); border-radius: var(--radius-sm); font-size: 1.1rem; } .contact-info-item strong { display: block; margin-bottom: 0.15rem; } .contact-info-item span, .contact-info-item a { color: var(--color-text-muted); font-size: 0.95rem; } .map-container { margin-top: 2rem; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); aspect-ratio: 16 / 9; } .map-container iframe { width: 100%; height: 100%; border: 0; } /* --- Form --- */ .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.9rem; } .form-group input, .form-group textarea { width: 100%; padding: 0.85rem 1rem; font-family: var(--font-family); font-size: 1rem; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .form-group textarea { min-height: 140px; resize: vertical; } .form-note { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.75rem; } /* --- Full footer (template-part: footer) --- */ .site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding-top: clamp(3rem, 6vw, 4.5rem); } .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .footer-logo { font-family: var(--font-family); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: #fff; margin-bottom: 1rem; } .footer-logo span { display: block; font-size: 0.9375rem; font-weight: 500; color: var(--color-footer-muted); margin-top: 0.35rem; letter-spacing: 0; } .footer-col h4 { color: #fff; font-family: var(--font-family); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.25rem; } .footer-links li { margin-bottom: 0.5rem; } .footer-links a { color: var(--color-footer-muted); font-size: 1rem; font-weight: 500; transition: color var(--transition); } .footer-links a:hover { color: #fff; } .footer-contact p { color: var(--color-footer-muted); font-size: 0.95rem; margin-bottom: 0.5rem; } .footer-contact a { color: var(--color-footer-muted); } .footer-contact a:hover { color: #fff; } .footer-bar { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0 max(1.25rem, env(safe-area-inset-bottom, 0px)); gap: 1rem; flex-wrap: wrap; } .footer-bar__copy { font-size: 0.875rem; color: var(--color-footer-muted); } .footer-bar__actions { display: flex; align-items: center; gap: 0.75rem; } .social-link { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08); color: var(--color-footer-muted); transition: background var(--transition), color var(--transition); } .social-link:hover { background: var(--color-primary); color: #fff; } .scroll-top { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08); border: none; color: var(--color-footer-muted); cursor: pointer; transition: background var(--transition), color var(--transition); } .scroll-top:hover { background: var(--color-primary); color: #fff; } .scroll-top svg { width: 18px; height: 18px; } /* --- FAQ / Privacy placeholder --- */ .prose { max-width: 720px; } .prose p { margin-bottom: 1rem; color: var(--color-text-muted); } .prose h2 { margin-top: 2rem; margin-bottom: 0.75rem; } /* ========================================================================== Responsive — mobile-first breakpoints sm ≤480px · md ≤768px · lg ≤1024px ========================================================================== */ /* Tablet */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .footer-grid .footer-col:first-child { grid-column: 1 / -1; } .contact-layout, .lessons-layout { grid-template-columns: 1fr; gap: 2rem; } .lessons-sidebar { position: static; order: -1; } } /* Mobile / small tablet */ @media (max-width: 768px) { :root { --header-height: 84px; } .site-header__inner { flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding-block: 1rem; } .site-logo { flex: 1 1 auto; max-width: calc(100% - 7.5rem); } .nav-toggle { display: flex; order: 3; margin-left: 0; } .header-actions { order: 2; margin-left: auto; gap: 0; } .main-nav { display: none; order: 4; flex: 1 1 100%; width: 100%; grid-column: unset; justify-self: unset; padding: 1rem 0 0.5rem; border-top: 1px solid var(--color-border); margin-top: 0.5rem; } .main-nav.is-open { display: block; } .main-nav ul { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; } .main-nav a { padding: 1.125rem 0; min-height: var(--touch-min); font-size: 1.125rem; display: flex; align-items: center; } .main-nav a.active::after { display: none; } .main-nav a.active { color: var(--color-primary); padding-left: 1rem; border-left: 3px solid var(--color-primary); } .main-nav a:hover { color: var(--color-text); } .lang-picker__toggle { min-height: var(--touch-min); min-width: var(--touch-min); justify-content: center; padding-inline: 0.5rem; } .theme-toggle { width: var(--touch-min); height: var(--touch-min); } .hero__content { padding-block: 2.5rem; } .hero p { font-size: 1rem; } .page-header { padding: 2rem 0; } .page-content { padding: 2.5rem 0 3rem; } .section-subtitle { margin-bottom: 1.5rem; } .content-grid { grid-template-columns: 1fr; gap: 2rem; } .content-grid.reverse { direction: ltr; } .placeholder-image { aspect-ratio: 16 / 10; max-height: 280px; } .card { padding: 1.25rem; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; } .footer-grid .footer-col:first-child { grid-column: auto; } .site-footer { padding-top: 2.5rem; } .footer-bar { flex-direction: column; align-items: center; text-align: center; padding: 1.5rem 0; } .footer-bar__actions { justify-content: center; } .social-link, .scroll-top { width: var(--touch-min); height: var(--touch-min); } .dev-panel { bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)); right: max(0.75rem, env(safe-area-inset-right, 0px)); left: max(0.75rem, env(safe-area-inset-left, 0px)); } .dev-panel__toggle { margin-left: auto; } .dev-panel__menu { right: 0; left: 0; width: auto; } } /* Small phones */ @media (max-width: 480px) { .hero { min-height: min(calc(100dvh - var(--header-height)), 720px); } .hero__actions { flex-direction: column; width: 100%; } .hero__actions .btn { width: 100%; } .btn { min-height: 3.5rem; padding: 1.25rem 1.75rem; } .lang-picker__toggle .lang-code { display: none; } .form-group input, .form-group textarea { font-size: 16px; } .contact-info-item span, .contact-info-item a { word-break: break-word; } .map-container { aspect-ratio: 4 / 3; } } /* Large screens — centred nav, logo left, actions right */ @media (min-width: 769px) { .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; } .site-logo { grid-column: 1; justify-self: start; } .main-nav { grid-column: 2; justify-self: center; display: block !important; } .header-actions { grid-column: 3; justify-self: end; margin-left: 0; } .nav-toggle { display: none; } } /* ========================================================================== DEV TOOLS — Remove this block + dev-tools.js before production ========================================================================== */ .dev-panel { position: fixed; bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)); right: max(1.25rem, env(safe-area-inset-right, 0px)); z-index: 9999; font-size: 0.8rem; } .dev-panel__toggle { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.85rem; background: #1a1a2e; color: #eee; border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); font-size: 0.8rem; font-weight: 600; } .dev-panel__menu { display: none; position: absolute; bottom: calc(100% + 8px); right: 0; width: 220px; padding: 1rem; background: #1a1a2e; color: #eee; border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .dev-panel.is-open .dev-panel__menu { display: block; } .dev-panel__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin-bottom: 0.5rem; } .dev-panel__themes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; } .dev-panel__theme-btn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; } .dev-panel__theme-btn:hover { transform: scale(1.1); } .dev-panel__theme-btn.is-active { border-color: #fff; box-shadow: 0 0 0 2px #1a1a2e; } .dev-panel__mode { display: flex; gap: 0.4rem; } .dev-panel__mode-btn { flex: 1; padding: 0.45rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-sm); color: #ccc; cursor: pointer; font-size: 0.75rem; transition: background 0.15s ease; } .dev-panel__mode-btn.is-active { background: rgba(255, 255, 255, 0.2); color: #fff; border-color: rgba(255, 255, 255, 0.4); }