/* * Styl stron produktowych aplikacji (public/apps/**). * * TE STRONY SĄ POZA POTOKIEM VITE/TAILWIND. Rollup ich nie widzi, a * tailwind.config.ts nie skanuje plików .html — więc nie da się tu użyć klas * Tailwinda. Tokeny poniżej są ręcznie przepisane z src/index.css i muszą * zostać zaktualizowane, jeśli tamte się zmienią. * * DLACZEGO RĘCZNY HTML, A NIE GENERATOR: to sześć plików angielskiej treści * sklepowej, zmienianej mniej więcej wtedy, gdy aplikacje wydają nową wersję. * Generator wymagałby runtime'u dla TypeScriptu (tsx/esbuild) jako nowej * zależności — więcej maszynerii niż to, co generuje. Jeśli pojawi się trzecia * aplikacja albo strony zaczną potrzebować danych dynamicznych, wtedy warto * napisać generator. */ :root { /* Tokeny z src/index.css */ --background: 0 0% 2%; --foreground: 0 0% 100%; --card: 240 10% 5.5%; --muted-foreground: 0 0% 60%; --border: 0 0% 100% / 0.08; --radius: 1.5rem; --electric-blue: 214 100% 50%; --neon-pink: 330 100% 50%; --matrix-green: 133 100% 50%; --cyber-violet: 265 100% 72%; --shadow-tactile: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.1); /* * Odnośniki w tekście NIE używają --electric-blue. #0070FF na tle karty * (#0D0D0F) daje 4,37:1 i nie spełnia WCAG AA dla tekstu — ta sama para * jest zresztą pre-existującym błędem na /polityka-prywatnosci. * 66% jasności daje 7,2:1 na karcie i 7,6:1 na tle strony. */ --link: 214 100% 66%; /* Akcent strony — nadpisywany na */ --accent: var(--cyber-violet); } body[data-accent="pink"] { --accent: var(--neon-pink); } body[data-accent="green"] { --accent: var(--matrix-green); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.65; } /* Widoczny wskaźnik fokusu — wymóg WCAG 2.4.7, skopiowany z src/index.css. */ :focus-visible { outline: 2px solid hsl(var(--electric-blue)); outline-offset: 3px; border-radius: 4px; } main:focus { outline: none; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Poszanowanie systemowego „ogranicz ruch". */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- Układ ---------- */ .wrap { max-width: 60rem; margin: 0 auto; padding: 0 1.5rem; } .skip { position: absolute; left: -9999px; top: 0; z-index: 50; } .skip:focus { left: 1rem; top: 1rem; padding: 0.75rem 1.25rem; border-radius: 0.5rem; background: hsl(var(--electric-blue)); color: hsl(var(--background)); font-weight: 700; text-decoration: none; } .site-header { border-bottom: 1px solid hsl(var(--border)); padding: 1.25rem 0; } .site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; justify-content: space-between; } .wordmark { font-family: "Geist Mono", ui-monospace, monospace; font-weight: 700; letter-spacing: 0.08em; color: hsl(var(--foreground)); text-decoration: none; font-size: 1rem; } .site-header nav ul { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; } .site-header nav a { color: hsl(var(--muted-foreground)); text-decoration: none; padding: 0.35rem 0; display: inline-block; } .site-header nav a:hover, .site-header nav a[aria-current="page"] { color: hsl(var(--foreground)); } .site-header nav a[aria-current="page"] { border-bottom: 2px solid hsl(var(--accent)); } main { padding: 3.5rem 0 4rem; } .site-footer { border-top: 1px solid hsl(var(--border)); padding: 2.5rem 0 3rem; color: hsl(var(--muted-foreground)); font-size: 0.9rem; } .site-footer p { margin: 0 0 0.5rem; } /* ---------- Typografia ---------- */ .eyebrow { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--accent)); margin: 0 0 0.85rem; display: flex; align-items: center; gap: 0.6rem; } .eyebrow::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: hsl(var(--accent)); } h1 { font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 1.1rem; font-weight: 700; } h2 { font-size: clamp(1.35rem, 3.5vw, 1.7rem); line-height: 1.2; letter-spacing: -0.01em; margin: 3rem 0 1rem; font-weight: 700; } h3 { font-size: 1.08rem; margin: 1.75rem 0 0.5rem; font-weight: 600; } .lede { font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: hsl(var(--muted-foreground)); max-width: 44rem; margin: 0 0 1.5rem; } p { margin: 0 0 1rem; max-width: 44rem; } ul, ol { max-width: 44rem; padding-left: 1.25rem; } li { margin-bottom: 0.5rem; } a { color: hsl(var(--link)); } strong { color: hsl(var(--foreground)); } .muted { color: hsl(var(--muted-foreground)); } .small { font-size: 0.88rem; } /* ---------- Karty ---------- */ /* Odpowiednik .surface-glass + BentoCard z aplikacji React. */ .card { background: hsla(240 10% 5.5% / 0.6); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-tactile); border-radius: 24px; padding: 1.75rem; margin: 0 0 1rem; } .card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; } .cards { display: grid; gap: 1rem; grid-template-columns: 1fr; padding: 0; margin: 1.5rem 0; list-style: none; max-width: none; } @media (min-width: 48rem) { .cards.two { grid-template-columns: repeat(2, 1fr); } } .cards li { margin: 0; } .card-accent { border-left: 2px solid hsl(var(--accent)); } /* ---------- Nagłówek aplikacji ---------- */ .app-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; } .app-head img { width: 72px; height: 72px; border-radius: 18px; border: 1px solid hsl(var(--border)); } .meta { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin: 0; } /* ---------- Przyciski ---------- */ .buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; padding: 0; list-style: none; max-width: none; } .buttons li { margin: 0; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.7rem 1.35rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.95rem; text-decoration: none; border: 1px solid hsl(var(--border)); background: rgba(255, 255, 255, 0.05); color: hsl(var(--foreground)); transition: background-color 0.2s ease, border-color 0.2s ease; } .btn:hover { background: rgba(255, 255, 255, 0.1); border-color: hsl(var(--accent)); } /* * Wariant „solid": jasny akcent + CIEMNY tekst. Biały tekst na akcencie nie * przechodzi AA — ta sama zasada co accents.solid w src/lib/accents.ts. */ .btn.solid { background: hsl(var(--accent)); color: hsl(var(--background)); border-color: hsl(var(--accent)); } .btn.solid:hover { filter: brightness(1.08); background: hsl(var(--accent)); } /* ---------- Zrzuty ekranu ---------- */ .shots { display: flex; gap: 1rem; overflow-x: auto; padding: 0.5rem 0 1.25rem; margin: 0; list-style: none; max-width: none; scroll-snap-type: x mandatory; } .shots li { margin: 0; flex: 0 0 auto; scroll-snap-align: start; } .shots img { display: block; width: 240px; height: auto; border-radius: 20px; border: 1px solid hsl(var(--border)); } /* ---------- Katalog na /apps/ ---------- */ .app-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; max-width: none; } @media (min-width: 48rem) { .app-list { grid-template-columns: repeat(2, 1fr); } } .app-list li { margin: 0; } .app-list .card { margin: 0; height: 100%; } .app-list h2 { margin: 0 0 0.35rem; font-size: 1.3rem; } /* ---------- Definicje ---------- */ dl { margin: 0; } dt { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-top: 1rem; } dd { margin: 0.25rem 0 0; }