diff --git a/documentation/22-znacka-a-design.md b/documentation/22-znacka-a-design.md new file mode 100644 index 0000000..477fac6 --- /dev/null +++ b/documentation/22-znacka-a-design.md @@ -0,0 +1,129 @@ +# 22 - Znacka a design + +Naprogramovano. Navrh, ze ktereho to vzniklo, je artefakt "WorkNuke Rebrand". + +Tenhle dokument popisuje, **jak znacka funguje v kodu** - kde se meni barvy, +pismo a znak, a co se pri prejmenovani menit nesmi. + +## Kde se meni vzhled + +| Co | Kde | +| ----------------------- | ------------------------------------ | +| Barvy, pismo, utility | `web/src/index.css` | +| Znak a slovni znacka | `web/src/components/layout/Logo.tsx` | +| Nazev, kontakty, claim | `web/src/config/brand.ts` | +| Titulek a fonty stranky | `web/index.html` | + +Zmena barevnosti celeho webu i portalu je zmena hodnot v `index.css`. Web +i portal stoji na tychz tokenech, takze se projevi naraz na obojim. + +## Barvy + +| Token | Hodnota | K cemu | +| ------------ | --------- | -------------------------------------------- | +| `brand-400` | `#B7FF3C` | Akcent. **Jedina hlasita barva na strance.** | +| `ink-900` | `#0F1411` | Podklad. Cerna do zelena, ne do modra. | +| `ink-600` | `#2E3A32` | Linky a ohraniceni | +| `ok-400` | `#2DD4BF` | Stav "v poradku" | +| `warn-400` | `#FBBF24` | Stav, ktery chce pozornost | +| `danger-400` | `#FB7185` | Chyba | + +**Proc je "v poradku" modrozelene a ne zelene.** Akcent je zeleny. Kdyby byl +zeleny i stav, byly by na jedne obrazovce dve zelene, kazda o necem jinem, +a nikdo by je nerozlisil. Akcent znamena "tady se neco stane", stav znamena +"takhle to dopadlo". + +**Sedy odstin ma zelenou prichut.** Neni to nahoda ani chyba prevodu: seda +s naznakem odstinu podkladu drzi paletu pohromade, ciste neutralni seda vedle +zelenocerne pusobi spinave. + +### Druhy akcent uz neni barva + +`accent-300` az `accent-600` **ukazuji do teze zelene rady** jako `brand-*`. +Klice zustaly, protoze je pouziva 341 mist v kodu; nechat je namirene na +fialovou by znamenalo dve akcentove barvy, prepsat je vsechny naraz zbytecne +velkou zmenu. Az se ta mista projdou, klice zmizi. + +Totez plati pro utilitu `text-gradient`: uz negeneruje prechod, ale plnou +zelenou. Nazev zustal, aby se osm mist nemuselo prepisovat. + +## Pismo + +| Role | Pismo | Kde | +| ---------- | ------------- | ---------------------------------- | +| Nadpisy | Archivo 800 | `h1` az `h4`, trida `font-display` | +| Text | IBM Plex Sans | vychozi pismo dokumentu | +| Cisla a ID | IBM Plex Mono | casy, ID ticketu, nadtitulky | + +Nadpisy maji `letter-spacing: -0.035em` a `line-height: 1.04`. Prave tesny +proklad delal v predloze ten rozdil; Inter takhle tesne nejde bez trikareni. + +Plex Sans a Plex Mono jsou od jednoho autora, takze spolu ladi bez ladeni. + +## Znak + +Plocha bomba mirici k zemi: nos vlevo dole, tri kridelka vpravo nahore, tri +odletove cary u nosu. Kresli se svisle a otoci o 45 stupnu, aby se geometrie +dala cist a upravovat. + +Je **plochy zamerne**, ne render. Plochy znak snese jakoukoliv velikost, +obarvi se jednou promennou (`currentColor`) a nezestarne s modou na 3D. + +`LogoMark` je samostatny export, takze se da pouzit i mimo hlavicku - napriklad +uvnitr snimku portalu v heru. + +## Hero + +| Prvek | Jak to je | +| ------------ | ------------------------------------------ | +| Nad nadpisem | Verzalkova radka v mono, prokladana | +| Nadpis | Dve slova na radek, druhy radek zeleny | +| Tlacitka | Jedna zelena pilulka plus textovy odkaz | +| Pod textem | Ctyri slovesa s ikonou a jednou vetou | +| Snimek | Vybiha z prave hrany | +| Pozadi | Tri zelene radialni prechody, zadna mrizka | + +**Zare je pozadi sekce, ne vrstva pod ni.** Prekryv se zapornym z-indexem se +schoval za podklad stranky a nebyl videt. Element se svym vlastnim pozadim +tenhle problem nema. + +**Snimek vybiha z hrany schvalne.** Oriznuty pusobi jako vyrez z neceho +vetsiho, cely v ramecku pusobi jako obrazek. + +## Ctyri slovesa + +Sbira, Automatizuje, Propojuje, Deleguje. Neni to marketingova ozdoba, jsou to +ctyri kroky, ktere portal opravdu dela: + +| Sloveso | Co za tim v portalu je | +| ------------ | ----------------------------- | +| Sbira | Udalosti, spoustece, webhooky | +| Automatizuje | Skripty konektoru | +| Propojuje | Strom kroku v builderu | +| Deleguje | Tickety a prirazeni lidem | + +Kdyz se ctverice zmeni, musi se zmenit i tady - jinak web slibuje neco jineho, +nez aplikace dela. + +## Co se pri prejmenovani nemeni + +Vypada to jako jmeno, ale jsou to identifikatory: + +| Co | Proc zustava | +| ----------------------- | ------------------------------------------------- | +| `automia.token` | Prejmenovani odhlasi vsechny prihlasene | +| `automia.tenant` | Zapomnela by se vybrana firma | +| `tnt_automia` | Sedi v ticketech, automatizacich i rozlozeni | +| `/apps/csbot-prototype` | Verejna adresa a routovani v Caddy, viz AGENTS.md | +| Ukazkove ucty | Prihlasovaci e-maily v seedu. Data, ne texty. | + +Firma **Automia v datech je neco jineho nez produkt WorkNuke**. Je to zaznam +zakaznika v ukazkovych datech a prejmenovat ho nema duvod. + +## Co chybi + +| Chybi | Poznamka | +| --------------------- | --------------------------------------------------- | +| Materialy mimo web | prezentace, obrazky pro socialni site | +| Domena | `worknuke.cz` v `brand.ts`, ale nikde neni nasazena | +| Prochazeni `accent-*` | 341 mist, ktera uz nemaji duvod pouzivat druhy klic | diff --git a/documentation/99-zmeny.md b/documentation/99-zmeny.md index b8eb961..947d2a4 100644 --- a/documentation/99-zmeny.md +++ b/documentation/99-zmeny.md @@ -2,6 +2,47 @@ Nejnovejsi nahore. +## 2026-08-26 - rebrand na WorkNuke + +Prevzeti vizualniho smeru z predlohy. Popis, jak znacka funguje v kodu, je +v [22-znacka-a-design.md](22-znacka-a-design.md). + +### Zmeneno + +- **Barevnost.** Akcent z cyanove na zelenou `#B7FF3C`, podklad z modrocerne + na zelenocernou `#0F1411`. Web i portal stoji na tychz tokenech, takze se to + projevilo naraz na obojim. +- **Druhy akcent uz neni barva.** `accent-*` ukazuje do teze zelene rady jako + `brand-*`. Klice zustaly, protoze je pouziva 341 mist; prepsat je vsechny + naraz by byla zbytecne velka zmena. Totez u utility `text-gradient`, ktera + uz negeneruje prechod, ale plnou zelenou. +- **Stav "v poradku" je modrozeleny.** Akcent je zeleny, a dve zelene na jedne + obrazovce, kazda o necem jinem, nikdo nerozlisi. +- **Pismo.** Archivo na nadpisy, IBM Plex Sans na text, IBM Plex Mono na cisla + a ID. Nadpisy maji tesny proklad, ktery Inter neumel bez trikareni. +- **Znak.** Plocha bomba misto pismene v gradientnim ctverci. `LogoMark` je + samostatny export, aby sel pouzit i uvnitr snimku v heru. +- **Tlacitko.** Plna zelena misto prechodu ze dvou barev. Prave tim vystupuje + z rady. +- **Hero.** Prokladany nadtitulek misto odznaku, dvouslovne radky nadpisu, + jedno primarni tlacitko plus textovy odkaz, ctyri slovesa misto tri odrazek + a snimek portalu vybihajici z prave hrany. +- **Navigace** je pri levem okraji a bez pilulky za aktivni polozkou. Jedina + pilulka na liste je primarni akce. +- **Nazev, claim a kontakt** v `brand.ts`. + +### Opraveno u toho + +- **Zare v heru je pozadi sekce, ne vrstva pod ni.** Prekryv se zapornym + z-indexem se schoval za podklad stranky a nebyl videt vubec. + +### Co se zamerne nezmenilo + +Klice v prohlizeci (`automia.token`, `automia.tenant`), ID firmy `tnt_automia`, +ID aplikace `csbot-prototype` a prihlasovaci e-maily v ukazkovych datech. +Vypadaji jako jmeno, ale jsou to identifikatory. Duvody jsou +v [22-znacka-a-design.md](22-znacka-a-design.md). + ## 2026-08-26 - prepinac firmy: do sidebaru a prekresli obsah cely Dodelavka predchoziho bodu. Tvrzeni "prepinac plati pro cely system" nebylo diff --git a/web/index.html b/web/index.html index 85ef640..f81376f 100644 --- a/web/index.html +++ b/web/index.html @@ -3,17 +3,17 @@ - Automia - automatizace, voiceboti a integrace na míru + WorkNuke - konec ruční práce - + diff --git a/web/public/favicon.svg b/web/public/favicon.svg index 348297a..ccf4951 100644 --- a/web/public/favicon.svg +++ b/web/public/favicon.svg @@ -1,18 +1,20 @@ - - - - - - - - - - + + + + + + + + + + + + + diff --git a/web/src/components/home/Hero.tsx b/web/src/components/home/Hero.tsx index ec5ce21..dbe7f09 100644 --- a/web/src/components/home/Hero.tsx +++ b/web/src/components/home/Hero.tsx @@ -1,133 +1,342 @@ -import { ArrowRight, CheckCircle2, PhoneCall, Sparkles } from 'lucide-react'; +import { + ArrowRight, + ChevronDown, + Play, + Plus, + Search, + Settings2, + Share2, + SlidersHorizontal, + Users, + Zap, +} from 'lucide-react'; import { ButtonLink } from '@/components/ui/Button'; import { Container } from '@/components/ui/Container'; +import { LogoMark } from '@/components/layout/Logo'; + +/** + * Hero. + * + * Zacina prikazem a slibem, ne pozdravem a predstavenim firmy. Prvni je + * o zakaznikovi, druhe o nas - a na hlavni stranu patri to prvni. + * + * Slozeni: proklada nadtitulek, dvoubarevny nadpis, jedno primarni tlacitko + * plus textovy odkaz, ctyri slovesa a snimek portalu vybihajici z prave hrany. + */ + +/** Ctyri kroky, ktere produkt opravdu dela. Nazvy sedi na zalozky v portalu. */ +const steps = [ + { + icon: Zap, + title: 'Sbírá', + text: 'Události ze všech vašich nástrojů na jednom místě.', + }, + { + icon: Settings2, + title: 'Automatizuje', + text: 'Odbaví, co jde odbavit bez člověka.', + }, + { + icon: Share2, + title: 'Propojuje', + text: 'Spustí navazující kroky a celé workflow.', + }, + { + icon: Users, + title: 'Deleguje', + text: 'Zapojí správné lidi, když je potřeba.', + }, +]; -/** Krátké uvítání + hlavní CTA + mockup živého provozu. */ export function Hero() { return ( -
- {/* Dekorativni pozadi */} -
-
-
-
-
+ /* + Zelena zare je pozadi **sekce**, ne vrstva pod ni. + Prekryv se zapornym z-indexem se schoval za podklad stranky a nebyl videt; + pozadi elementu tenhle problem nema. + */ +
+ {/* + Kolik snimek presahne pres pravou hranu. Nula na uzkych displejich, + kde by presah znamenal jen orezany obsah bez efektu. + */} + -
+
- - - Automatizace · Voiceboti · Integrace - - -

- Vítejte. Děláme z ruční práce{' '} - procesy, které běží samy. -

- -

- Jsme malý tým, který firmám staví automatizace, hlasové asistenty a propojení systémů - - a pak je i provozuje. Vy vidíte výsledky v dashboardu, my držíme provoz. +

+ Události dovnitř. Akce ven.

-
+

+ Konec +
+ ruční práce. +

+ +

+ WorkNuke sbírá události, zautomatizuje, co jde, propojí další kroky a zapojí + správné lidi, když je potřeba. Vaše práce prostě plyne. +

+ +
- Nezávazná konzultace + Začít zdarma - - Co umíme - -
-
    - {['Nasazení v týdnech, ne kvartálech', 'Provoz a podpora v ceně', 'Bez vendor lock-inu'].map( - (item) => ( -
  • - - {item} -
    • - ), - )} -
+ {/* + Vedle primarniho tlacitka uz zadne druhe. Textovy odkaz rekne, + ze je to mensi zavazek, aniz by o pozornost soutezil. + */} + + + + + Prohlédnout si to + +
- +
+ +
+ + {/* Ctyri slovesa. Neni to slib, je to popis toho, co portal umi. */} +
    + {steps.map((step) => ( +
  • + +

    {step.title}

    +

    {step.text}

    +
    • + ))} +
); } -/** Mockup panelu "z provozu" - jen ilustrace, zadna realna data. */ -function HeroPanel() { - const steps = [ - { label: 'Příchozí hovor rozpoznán', time: '0,4 s', done: true }, - { label: 'Poptávka založena v CRM', time: '1,1 s', done: true }, - { label: 'Nabídka vygenerována', time: '2,8 s', done: true }, - { label: 'Předáno obchodníkovi', time: 'právě teď', done: false }, - ]; +/* ------------------------------------------------------------------ snimek */ +/** + * Snimek portalu. + * + * Vybiha z prave hrany, protoze oriznuty snimek pusobi jako vyrez z neceho + * vetsiho, kdezto cely v ramecku pusobi jako obrazek. Data jsou ilustracni, + * ale nazvy sloupcu i stavy jsou ty, ktere portal opravdu ma. + */ + +const rows = [ + { + event: 'Platba selhala', + detail: 'Nepodařilo se strhnout platbu', + source: 'Stripe', + color: 'bg-[#635bff]', + status: 'Automatizováno', + tone: 'bg-lime-100 text-lime-800', + next: 'Zkusit znovu za hodinu', + time: 'před 2 min', + }, + { + event: 'Nový požadavek', + detail: 'Problém s přihlášením', + source: 'Zendesk', + color: 'bg-[#03363d]', + status: 'Delegováno', + tone: 'bg-indigo-100 text-indigo-800', + next: 'Přiřazeno Petrovi', + time: 'před 12 min', + }, + { + event: 'Vysoké vytížení CPU', + detail: 'Nad 90 % po 5 minut', + source: 'Datadog', + color: 'bg-[#632ca6]', + status: 'Probíhá', + tone: 'bg-sky-100 text-sky-800', + next: 'Spustit nápravu', + time: 'před 28 min', + }, + { + event: 'Nová registrace', + detail: 'Zkušební účet vytvořen', + source: 'Intercom', + color: 'bg-[#1f8ded]', + status: 'Automatizováno', + tone: 'bg-lime-100 text-lime-800', + next: 'Odeslat uvítání', + time: 'před 1 hod', + }, + { + event: 'Odeslán formulář', + detail: 'Poptávka z webu', + source: 'HubSpot', + color: 'bg-[#ff7a59]', + status: 'Otevřené', + tone: 'bg-orange-100 text-orange-800', + next: 'Kvalifikovat lead', + time: 'před 2 hod', + }, +]; + +const nav = [ + 'Přehled', + 'Události', + 'Automatizace', + 'Workflow', + 'Lidé', + 'Integrace', + 'Analytika', + 'Nastavení', +]; + +function HeroPanel() { return ( -
-
-
-
- - - -
-

Voicebot - příjem poptávek

-

AUT-02 · běží

+ /* + Snimek musi vybihat z hrany na kazde sirce, ne jen na notebooku. + Pevny zaporny okraj ve vw prestal stacit nad 1600 px: kontejner ma strop + max-w-6xl (72rem), takze postranni mezera roste a snimek se do ni vesel. + Vypocet ji odecte, at je obrazovka jakkoliv siroka. + */ +
+
+
+ {/* Postranni navigace */} + + + {/* Obsah */} +
+
+ +
+ + JK + +
+

Jan Koutný

+

Acme s.r.o.

+
+ +
+
+ +
+
+

+ Události +

+ + + Nová automatizace + +
+ +
+
    + {['Vše', 'Otevřené', 'Automatizované', 'Delegované', 'Vyřešené'].map( + (tab, index) => ( +
  • + {tab} +
    • + ), + )} +
+ + + Filtry + +
+ + + + + + + + + + + + + {rows.map((row) => ( + + + + + + + + ))} + +
UdálostZdrojStavDalší akceČas
+

{row.event}

+

{row.detail}

+ 		+ + + {row.source} + + + + {row.status} + + + {row.next} + + {row.time} +
- - - live -
- -
    - {steps.map((step) => ( -
  1. - - {step.done ? ( - - ) : ( - - )} - - {step.label} - {step.time} -
    2. - ))} -
- -
- {[ - { value: '137', label: 'hovorů dnes' }, - { value: '96,1 %', label: 'úspěšnost' }, - { value: '1,2 s', label: 'odezva' }, - ].map((stat) => ( -
-

{stat.value}

-

{stat.label}

-
- ))} -
-
- - {/* Male "odlepene" karticky pro hloubku */} -
-

Ušetřeno tento měsíc

-

312 hodin

); diff --git a/web/src/components/home/Products.tsx b/web/src/components/home/Products.tsx index 39503ac..c3c7b81 100644 --- a/web/src/components/home/Products.tsx +++ b/web/src/components/home/Products.tsx @@ -40,7 +40,7 @@ export function ProductCard({ product }: { product: Product }) { )} >
- +
diff --git a/web/src/components/layout/Logo.tsx b/web/src/components/layout/Logo.tsx index ed712cf..ef50308 100644 --- a/web/src/components/layout/Logo.tsx +++ b/web/src/components/layout/Logo.tsx @@ -2,13 +2,70 @@ import { Link } from 'react-router-dom'; import { brand } from '@/config/brand'; import { cn } from '@/lib/cn'; -export function Logo({ className, to = '/' }: { className?: string; to?: string }) { +/** + * Znacka: plochy znak plus slovni znacka. + * + * Znak je bomba naklonena k zemi se tremi kridelky a dvema odletovymi carami. + * Zamerne **ploche**, ne render: plochy znak snese jakoukoliv velikost, jde + * obarvit jednou promennou a nezestarne s modou na 3D. + */ + +export function LogoMark({ className }: { className?: string }) { + return ( + + ); +} + +export function Logo({ + className, + to = '/', + withClaim = false, +}: { + className?: string; + to?: string; + /** Podtitulek pod slovni znackou. Jen tam, kde je na nej misto. */ + withClaim?: boolean; +}) { return ( - - A + + + + {brand.name} + + {withClaim && ( + + {brand.claim} + + )} - {brand.name} ); } diff --git a/web/src/components/layout/Navbar.tsx b/web/src/components/layout/Navbar.tsx index 9d13ac4..d2581e8 100644 --- a/web/src/components/layout/Navbar.tsx +++ b/web/src/components/layout/Navbar.tsx @@ -35,10 +35,11 @@ export function Navbar() { )} > -
+
-
diff --git a/web/src/components/ui/Button.tsx b/web/src/components/ui/Button.tsx index 1228aa4..2513ef8 100644 --- a/web/src/components/ui/Button.tsx +++ b/web/src/components/ui/Button.tsx @@ -9,8 +9,12 @@ const base = 'inline-flex items-center justify-center gap-2 rounded-full font-semibold transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-55'; const variants: Record = { + /* + * Plna zelena, tmavy text, tvar pilulky. Driv to byl prechod ze dvou barev; + * v predloze je tlacitko jednobarevne, protoze prave tim vystupuje z rady. + */ primary: - 'bg-gradient-to-r from-brand-400 to-accent-500 text-ink-950 shadow-lg shadow-brand-500/20 hover:shadow-xl hover:shadow-brand-500/30 hover:brightness-110', + 'bg-brand-400 text-ink-950 shadow-lg shadow-brand-500/20 hover:bg-brand-300 hover:shadow-xl hover:shadow-brand-500/30', secondary: 'glass text-white hover:border-brand-400/60 hover:bg-ink-700/70', ghost: 'text-white/70 hover:bg-white/5 hover:text-white', }; diff --git a/web/src/config/brand.ts b/web/src/config/brand.ts index a44271e..c960eb8 100644 --- a/web/src/config/brand.ts +++ b/web/src/config/brand.ts @@ -3,12 +3,12 @@ * Prejmenovani firmy = zmena tady (viz docs/03-frontend.md). */ export const brand = { - name: 'Automia', - legalName: 'Automia s.r.o.', - claim: 'Automatizace, voiceboti a integrace, které vydrží provoz.', + name: 'WorkNuke', + legalName: 'WorkNuke s.r.o.', + claim: 'Konec ruční práce.', description: - 'Navrhujeme a provozujeme automatizace firemních procesů, hlasové asistenty a propojení systémů. K tomu dodáváme dashboardy, tickety a incident management pod jednou střechou.', - email: 'info@automia.cz', + 'WorkNuke sbírá události ze všech vašich nástrojů, zautomatizuje, co jde, propojí další kroky a zapojí správné lidi, když je potřeba. Vaše práce prostě plyne.', + email: 'info@worknuke.cz', phone: '+420 777 123 456', phoneHref: '+420777123456', address: { diff --git a/web/src/index.css b/web/src/index.css index cf90f50..1a77fc5 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -5,37 +5,51 @@ Dokumentace: docs/05-design-system.md ------------------------------------------------------------------- */ @theme { - /* Podklady - tmave modrociste odstiny */ - --color-ink-950: #05070f; - --color-ink-900: #070b16; - --color-ink-850: #0a0f1f; - --color-ink-800: #0e1526; - --color-ink-700: #16203a; - --color-ink-600: #1f2c4d; + /* + * Podklady - cerna do zelena, ne do modra. + * Odstin je odvozeny z #0F1411, aby seda nikde nesklouzavala k modre + * a drzela pohromade se zelenym akcentem. + */ + --color-ink-950: #080b09; + --color-ink-900: #0f1411; + --color-ink-850: #141a16; + --color-ink-800: #1a211c; + --color-ink-700: #232c26; + --color-ink-600: #2e3a32; - /* Primarni akcent - cyan */ - --color-brand-200: #a5f3fc; - --color-brand-300: #67e8f9; - --color-brand-400: #22d3ee; - --color-brand-500: #06b6d4; - --color-brand-600: #0891b2; + /* Primarni akcent - zelena. Jedina hlasita barva na strance. */ + --color-brand-200: #dfffae; + --color-brand-300: #cdff7a; + --color-brand-400: #b7ff3c; + --color-brand-500: #9be619; + --color-brand-600: #7cbd0f; - /* Sekundarni akcent - violet */ - --color-accent-300: #c4b5fd; - --color-accent-400: #a78bfa; - --color-accent-500: #8b5cf6; - --color-accent-600: #7c3aed; + /* + * Druhy akcent uz neexistuje jako barva, jen jako klic. + * Je namireny do teze zelene rady, takze 341 mist, ktera ho pouzivaji, + * nemuselo prepisovat - jen prestala byt fialova. Az se ta mista projdou, + * klic zmizi uplne. + */ + --color-accent-300: #cdff7a; + --color-accent-400: #b7ff3c; + --color-accent-500: #9be619; + --color-accent-600: #7cbd0f; - /* Stavove barvy (tickety, incidenty, healthchecky) */ - --color-ok-400: #34d399; - --color-ok-500: #10b981; + /* + * Stavove barvy. "V poradku" je nove modrozelena, ne zelena: akcent je + * zeleny a dve zelene na jedne obrazovce, kazda o necem jinem, nikdo + * nerozlisi. + */ + --color-ok-400: #2dd4bf; + --color-ok-500: #14b8a6; --color-warn-400: #fbbf24; --color-warn-500: #f59e0b; --color-danger-400: #fb7185; --color-danger-500: #f43f5e; - --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; - --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; + --font-display: 'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif; + --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; + --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; --radius-card: 1rem; @@ -103,12 +117,19 @@ text-wrap: pretty; } + /* + * Nadpisy jedou displayovym pismem s tesnym prokladem. Prave to delalo + * v predloze ten rozdil: Inter takhle tesne nejde bez trikareni. + */ h1, h2, h3, h4 { + font-family: var(--font-display); + font-weight: 800; text-wrap: balance; - letter-spacing: -0.02em; + letter-spacing: -0.035em; + line-height: 1.04; } ::selection { @@ -160,16 +181,16 @@ backdrop-filter: blur(14px); } -/* Gradientni text pro zvyrazneni slov v nadpisech */ +/* + * Zvyraznene slovo v nadpisu. + * + * Driv to byl gradient pres tri barvy. Ted je to plna zelena: v predloze je + * nadpis dvoubarevny, ne prechodovy, a gradient se na malych velikostech + * rozpadal a hur cetl. Nazev utility zustava, aby se osm mist nemuselo + * prepisovat. + */ @utility text-gradient { - background-image: linear-gradient( - 100deg, - var(--color-brand-300), - var(--color-brand-400) 40%, - var(--color-accent-400) - ); - background-clip: text; - color: transparent; + color: var(--color-brand-400); } /* Jemna mrizka na pozadi sekci */