/* siwiecsoft.pl - wspólny arkusz dla wszystkich podstron. Bez frameworka i bez builda. Kolor akcentu jest ZMIENNĄ, nie wartością rozsypaną po pliku: każda podstrona ustawia własny przez klasę na , a reszta reguł się dostosowuje sama. Zmiana identyfikacji aplikacji = jedna linia niżej. */ :root { color-scheme: light dark; --accent: #1976D2; /* domyślny: QuizAI, ziarno palety aplikacji */ --accent-dk: #125ca3; --ok: #2E7D32; --warn: #FF8F00; --bg: light-dark(#fdfdfd, #101418); --surface: light-dark(#ffffff, #171d24); --line: light-dark(#e3e8ee, #2a323c); --text: light-dark(#16202b, #e6ebf1); --muted: light-dark(#5b6875, #9aa7b4); /* Jedna skala odstępów. Wartości spoza niej nie występują nigdzie - to ona, a nie kolor, daje wrażenie uporządkowania. */ --s1: .25rem; --s2: .5rem; --s3: 1rem; --s4: 1.5rem; --s5: 2rem; --s6: 3rem; --s7: 4rem; --s8: 6rem; --radius: 14px; --wrap: 68rem; } /* Motywy produktów. QuizAI zostaje na domyślnym niebieskim. */ /* Indygo z aplikacji Matmatura (kolor liczb w statystykach), plus gradient z jej belki nagłówka - indygo przechodzące w fiolet. */ body.theme-matmatura { --accent: #4F46E5; --accent-dk: #4338CA; --accent-2: #8B5CF6; } body.theme-matmatura .hero h1 { background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Gdyby przeglądarka nie umiała przyciąć tła do tekstu, nagłówek zostaje czytelny zamiast zniknąć - `color: transparent` obowiązuje tylko razem z działającym background-clip. */ @supports not ((background-clip: text) or (-webkit-background-clip: text)) { body.theme-matmatura .hero h1 { color: var(--accent); } } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 clamp(1rem, .95rem + .3vw, 1.125rem)/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0; } h1 { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.7rem); letter-spacing: -.03em; } h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.3rem); letter-spacing: -.02em; } h3 { font-size: 1.15rem; letter-spacing: -.01em; } p { margin: 0; text-wrap: pretty; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--accent-dk); } /* --- układ ---------------------------------------------------------- */ main > section { max-width: var(--wrap); margin-inline: auto; padding: var(--s8) var(--s4); border-top: 1px solid var(--line); } main > section:first-child { border-top: 0; } main > section > h2 { margin-bottom: var(--s4); } .section-lead { max-width: 48ch; color: var(--muted); margin-bottom: var(--s5); } .prose { max-width: 62ch; display: grid; gap: var(--s3); } .prose h3 { margin-top: var(--s4); } .prose ul { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--s2); } .prose li { color: var(--muted); } /* --- nagłówek ------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); max-width: var(--wrap); margin-inline: auto; padding: var(--s3) var(--s4); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); } .brand { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text); text-decoration: none; font-size: 1.1rem; font-weight: 500; } .brand strong { color: var(--accent); font-weight: 600; } .brand-mark { font-size: 1.25rem; } .site-header nav { display: flex; align-items: center; gap: var(--s4); } .site-header nav a:not(.btn) { color: var(--muted); text-decoration: none; font-size: .95rem; } .site-header nav a:not(.btn):hover { color: var(--text); } @media (max-width: 40rem) { .site-header nav a:not(.btn) { display: none; } } /* --- przyciski ------------------------------------------------------ */ .btn { display: inline-block; padding: .75rem 1.4rem; border-radius: 999px; font-weight: 500; font-size: .98rem; text-decoration: none; transition: transform .15s, background-color .15s, border-color .15s, color .15s; } .btn:active { transform: translateY(1px); } .btn-sm { padding: .45rem 1rem; font-size: .9rem; } .btn-lg { padding: .95rem 2rem; font-size: 1.05rem; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-dk); color: #fff; } .btn-ghost { border: 1px solid var(--line); color: var(--text); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); } /* --- hero ----------------------------------------------------------- */ .hero { padding-block: var(--s8) var(--s7); } .eyebrow { color: var(--accent); font-size: .85rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; margin-bottom: var(--s3); } .hero .lead { max-width: 46ch; margin-top: var(--s4); font-size: clamp(1.05rem, 1rem + .45vw, 1.28rem); color: var(--muted); } .fine { margin-top: var(--s3); font-size: .875rem; color: var(--muted); } /* --- znacznik bety -------------------------------------------------- */ .beta-tag { display: inline-block; vertical-align: middle; margin-left: var(--s2); padding: .1rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .notice { display: grid; gap: var(--s2); padding: var(--s4); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); } .notice h3 { color: var(--warn); } .notice p { color: var(--muted); font-size: .95rem; } /* --- kafelki -------------------------------------------------------- */ .cards { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .card { padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .card h3 { margin-bottom: var(--s2); } .card p { color: var(--muted); font-size: .95rem; } /* --- kafelki aplikacji (strona główna) ------------------------------ */ .apps { display: grid; gap: var(--s4); } .app-card { display: grid; gap: var(--s3); padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .app-card.is-primary { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .app-card.is-matmatura { border-color: color-mix(in srgb, #4F46E5 45%, var(--line)); } .app-card h3 { font-size: 1.45rem; } .app-card .app-what { color: var(--muted); } .app-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); } .app-card li { padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--line); font-size: .82rem; color: var(--muted); } .app-links { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; } /* --- kroki ---------------------------------------------------------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .steps h3 { margin: var(--s3) 0 var(--s2); } .steps p { color: var(--muted); font-size: .97rem; } .step-no { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; font-size: .95rem; } /* --- FAQ ------------------------------------------------------------ */ .faq { display: grid; gap: var(--s2); max-width: 52rem; } .faq details { padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .faq summary { cursor: pointer; font-weight: 500; list-style-position: inside; } .faq summary::marker { color: var(--accent); } .faq details p { margin-top: var(--s3); color: var(--muted); font-size: .95rem; } /* --- domknięcie, stopka --------------------------------------------- */ .closing { text-align: center; } .closing .cta-row { justify-content: center; } .site-footer { max-width: var(--wrap); margin-inline: auto; padding: var(--s6) var(--s4) var(--s7); border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; display: grid; gap: var(--s2); } .footer-links { display: flex; flex-wrap: wrap; gap: var(--s4); } /* --- wejście sekcji przy scrollu ------------------------------------ Natywne, bez JS. Gdzie przeglądarka tego nie zna, treść jest po prostu od razu widoczna - dlatego stan początkowy siedzi WEWNĄTRZ @supports, a nie obok niego. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 10% cover 26%; } @keyframes reveal { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } } } }