/* Edukejt — landing (coming soon). Ciepła, neutralna paleta. */ /* Motyw jasny/ciemny: domyślnie wg preferencji systemu (color-scheme), przełącznik nadpisuje przez [data-theme] na (patrz theme.js). Każda zmienna ma wartość jasną (fallback dla starszych przeglądarek) ORAZ light-dark(jasny, ciemny) dla nowoczesnych. */ :root { color-scheme: light dark; /* domyślnie podążaj za systemem */ --bg: #FBF6EE; --bg: light-dark(#FBF6EE, #1A1816); --surface: #FFFFFF; --surface: light-dark(#FFFFFF, #242220); --surface-warm: #FFFBF6; --surface-warm: light-dark(#FFFBF6, #2A2622); --ink: #3B322B; --ink: light-dark(#3B322B, #ECE7E0); --ink-soft: #6F6357; --ink-soft: light-dark(#6F6357, #B6ADA3); --ink-faint: #9A8C7D; --ink-faint: light-dark(#9A8C7D, #847C72); --accent: #E07A5F; --accent: light-dark(#E07A5F, #E88C70); --accent-strong: #CB5F45; --accent-strong: light-dark(#CB5F45, #E07A5F); --accent-soft: #F7E7DD; --accent-soft: light-dark(#F7E7DD, rgba(232, 140, 112, 0.14)); --line: #ECE1D4; --line: light-dark(#ECE1D4, #322F2B); --ring: rgba(224, 122, 95, 0.35); --ring: light-dark(rgba(224, 122, 95, 0.35), rgba(232, 140, 112, 0.42)); --glow-1: #FCEFE3; --glow-1: light-dark(#FCEFE3, #221F1B); --glow-2: #F7E7DD; --glow-2: light-dark(#F7E7DD, #1D1B18); --ok-bg: #EAF3EC; --ok-bg: light-dark(#EAF3EC, rgba(46, 107, 67, 0.20)); --ok-ink: #2E6B43; --ok-ink: light-dark(#2E6B43, #9CD6B0); --err-bg: #FBEAE6; --err-bg: light-dark(#FBEAE6, rgba(203, 95, 69, 0.22)); --err-ink: #CB5F45; --err-ink: light-dark(#CB5F45, #F0A78F); --shadow: 0 18px 50px -24px rgba(94, 64, 43, 0.35); --shadow: light-dark(0 18px 50px -24px rgba(94, 64, 43, 0.35), 0 22px 55px -24px rgba(0, 0, 0, 0.6)); --radius: 18px; --radius-sm: 12px; --font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Ręczne nadpisanie motywu (przełącznik w rogu) */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font); color: var(--ink); line-height: 1.6; background: var(--bg); background-image: radial-gradient(120% 90% at 50% -10%, var(--glow-1) 0%, transparent 60%), radial-gradient(90% 70% at 100% 0%, var(--glow-2) 0%, transparent 55%); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Przełącznik motywu jasny/ciemny (w rogu, ikona kontrastu) */ .theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 10; width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.25); cursor: pointer; transition: color 0.15s ease, background 0.15s ease, transform 0.05s ease; } .theme-toggle:hover { color: var(--accent); } .theme-toggle:active { transform: translateY(1px); } .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .theme-toggle svg { display: block; } .page { flex: 1 0 auto; width: 100%; max-width: 620px; margin: 0 auto; padding: clamp(2.5rem, 8vw, 6rem) 1.5rem 3rem; display: flex; flex-direction: column; align-items: center; text-align: center; } /* Znak / placeholder pod logo (docelowo: postać Kejt) */ .mark { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; background: linear-gradient(150deg, #F2A07A 0%, var(--accent) 70%); box-shadow: 0 14px 30px -12px var(--ring); margin-bottom: 1.75rem; } .mark svg { width: 40px; height: 40px; display: block; } .badge { display: inline-flex; align-items: center; gap: 0.5ch; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-strong); background: var(--accent-soft); border-radius: 999px; padding: 0.35rem 0.85rem; margin-bottom: 1.25rem; } .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .wordmark { font-size: clamp(2.2rem, 8vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.4rem; color: var(--ink); } .wordmark .kejt { color: var(--accent); } .tagline { font-size: clamp(1.05rem, 3.6vw, 1.3rem); font-weight: 700; color: var(--ink); margin: 0 0 1rem; max-width: 30ch; } .lede { font-size: clamp(1rem, 3vw, 1.1rem); color: var(--ink-soft); margin: 0 0 1.75rem; max-width: 46ch; } .chips { list-style: none; padding: 0; margin: 0 0 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .chips li { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.9rem; } /* Formularz kontaktowy */ .contact { width: 100%; max-width: 420px; background: var(--surface-warm); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.4rem, 5vw, 1.9rem); text-align: left; } .contact h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.35rem; color: var(--ink); } .contact p.hint { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 1.1rem; } .field { margin-bottom: 0.85rem; } .field label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 0.35rem; } .field input, .field textarea { width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field textarea { resize: vertical; min-height: 64px; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } button.submit { width: 100%; font-family: inherit; font-size: 1rem; font-weight: 800; color: #fff; background: var(--accent); border: none; border-radius: var(--radius-sm); padding: 0.8rem 1rem; margin-top: 0.4rem; cursor: pointer; transition: background 0.15s ease, transform 0.05s ease; } button.submit:hover { background: var(--accent-strong); } button.submit:active { transform: translateY(1px); } button.submit:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .consent { font-size: 0.78rem; color: var(--ink-faint); margin: 0.9rem 0 0; line-height: 1.5; } /* Komunikat po wysłaniu */ .form-status { margin-top: 0.9rem; font-size: 0.9rem; font-weight: 600; border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; display: none; } .form-status.is-visible { display: block; } .form-status.ok { background: var(--ok-bg); color: var(--ok-ink); } .form-status.error { background: var(--err-bg); color: var(--err-ink); } .thanks { display: none; text-align: center; padding: 0.5rem 0; } .thanks.is-visible { display: block; } .thanks strong { display: block; font-size: 1.1rem; margin-bottom: 0.3rem; } .thanks span { color: var(--ink-soft); font-size: 0.95rem; } .site-footer { flex-shrink: 0; text-align: center; font-size: 0.8rem; color: var(--ink-faint); padding: 1.5rem; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }