/* * Koræi — la vetrina pubblica. * * Solo l'impaginazione della pagina larga: i colori, i caratteri, il marchio e lo sfondo disegnato * arrivano da app.css, che questa pagina carica per primo. Qui non c'e' nemmeno un colore scritto a * mano - se domani cambia l'accento del prodotto, cambia anche la vetrina. * * Ogni classe comincia per "lp-". L'applicazione e' un guscio stretto da telefono e questa e' una * pagina larga da desktop: le due impaginazioni non hanno niente in comune, e un prefisso e' cio' * che garantisce che nessuna regola scritta qui possa arrivare su una schermata dell'app. */ /* ---------- l'impianto ---------- */ /* Le due superfici che l'applicazione non ha, e che questa pagina si ricava dalle sue. Un'app da telefono e' una colonna sola: non le servono ne' una fascia che sprofonda sotto il fondo della pagina, ne' la scocca di un telefono disegnato. Servono qui, e invece di due colori scritti a mano sono due mescole del fondo vero - cosi' restano giuste anche il giorno in cui il fondo cambia, e non nasce una seconda tavolozza accanto a quella del prodotto. */ .lp { --lp-fondo: color-mix(in srgb, black 40%, var(--bg)); --lp-scocca: color-mix(in srgb, var(--ink) 7%, var(--bg)); } /* In chiaro la fascia non puo' essere il fondo mescolato al nero: su una pagina bianca sarebbe una striscia scura in mezzo al testo. E' l'inchiostro a bassissima dose, cioe' la stessa idea al contrario - una fascia appena piu' profonda della pagina, qualunque sia la pagina. */ :root:has(.lp-theme-light:checked) .lp { --lp-fondo: color-mix(in srgb, var(--ink) 5%, var(--bg)); } .lp-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 22px; } /* Il salto delle ancore deve tenere conto della barra fissa, altrimenti il titolo della sezione finisce sotto di essa. */ section[id] { scroll-margin-top: 88px; } /* La pagina non scorre di lato, mai. I blocchi arrivano da oltre il bordo destro, e un elemento fuori dal bordo destro allarga il documento: misurato prima, 474 pixel di larghezza su una finestra da 412, cioe' la pagina si poteva trascinare di lato e tutto sembrava spostato a sinistra con una striscia vuota a destra. "E' anche decentrata, non deve esserci quello spazio in piu' a destra." Il taglio sta su
e non su : sul body l'overflow si propaga alla finestra, e un asse ritagliato con l'altro visibile la trasformerebbe in un contenitore che scorre - lo stesso guaio dell'eroe qui sopra, ma su tutta la pagina. E clip invece di hidden per la stessa ragione. */ .lp main { overflow-x: clip; } .lp-section { padding: clamp(56px, 7vw, 92px) 0; } /* Due fondi oltre a quello del corpo: uno appena sollevato, uno piu' profondo del nero della pagina. E' il ritmo del riferimento - chiaro, grigio, scuro - riletto su un tema scuro. */ .lp-section--soft { background: var(--surface-2); } .lp-section--dark { background: var(--lp-fondo); border-block: 1px solid var(--line-soft); } .lp-head { max-width: 760px; margin-bottom: 34px; } .lp-head--center { margin-inline: auto; text-align: center; } .lp-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; font-family: var(--cond); font-size: 13px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--accent-text); } /* Il trattino davanti all'occhiello: e' il segno che apre ogni sezione del prodotto. */ .lp-eyebrow::before { content: ""; width: 24px; height: 3px; border-radius: 3px; background: var(--accent); /* Si allunga da sinistra quando la sezione arriva (vedi lp-riga): senza un'origine dichiarata crescerebbe dal centro, che di un trattino di ventiquattro pixel non si accorge nessuno. */ transform-origin: left center; } .lp h1, .lp h2 { font-family: var(--sans); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; } .lp h2 { font-size: clamp(28px, 4.2vw, 44px); } .lp h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); } .lp p { color: var(--mut); } .lp-lead { margin-top: 14px; max-width: 62ch; font-size: 17px; color: var(--mut); } .lp-head--center .lp-lead { margin-inline: auto; } /* ---------- i bottoni ---------- */ /* Non riusano .btn dell'applicazione di proposito: quello e' largo quanto la sua colonna, perche' in un guscio da 520px i bottoni si impilano. Qui stanno in fila, quindi la larghezza e' quella del testo. Tutto il resto - la pillola, il carattere condensato, il maiuscoletto spaziato - e' lo stesso, cosi' i due bottoni sono riconoscibilmente gli stessi bottoni. */ .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 13px 24px; border: 1px solid transparent; border-radius: 999px; font-family: var(--cond); font-size: 15.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease; } .lp-btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow-accent-soft); } .lp-btn--ghost { border-color: var(--line); color: var(--ink); } .lp-btn--sm { min-height: 38px; padding: 9px 18px; font-size: 14px; } .lp-btn--lg { padding: 16px 30px; font-size: 16.5px; } .lp-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--glow-accent); } .lp-btn--ghost:hover { border-color: var(--accent-line); color: var(--accent-text); } @media (prefers-reduced-motion: reduce) { .lp-btn { transition: none; } .lp-btn:hover { transform: none; } } /* ---------- la barra in alto ---------- */ .lp-nav { position: fixed; inset: 0 0 auto 0; z-index: 90; padding: 12px 0; background: var(--bar); border-bottom: 1px solid var(--line-soft); backdrop-filter: blur(14px); } .lp-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .lp-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; } .lp-nav__links { display: flex; align-items: center; gap: 22px; } .lp-nav__menu { display: flex; align-items: center; gap: 22px; } .lp-nav__links a { font-size: 14.5px; font-weight: 600; color: var(--mut); text-decoration: none; white-space: nowrap; } .lp-nav__links a:hover { color: var(--ink); } .lp-nav__cta { display: flex; align-items: center; gap: 10px; } /* Le due porte dentro al pannello esistono solo su telefono: nella barra larga ci sono gia'. */ .lp-nav__doors { display: none; } /* Il menu su telefono, con la casella nascosta all'inizio del corpo. La casella e' fuori campo invece che hidden: un input nascosto esce dall'ordine di tabulazione e il menu diventa irraggiungibile da tastiera. Stesso motivo, stessa soluzione del drawer dell'app. */ /* ---------- la scelta del colore, nella barra ---------- */ /* I pallini e il loro anello stanno in app.css: la stessa fila e' anche nella registrazione, che questo foglio non lo carica. Qui c'e' solo dove finiscono dentro la barra. */ /* I pallini nella barra: sempre visibili, a ogni larghezza. La zona premibile scende da 44 a 26. E' l'unico posto dell'applicazione dove si scende sotto i 44, e vale la pena scrivere perche': quattro zone da 44 sono 176px, e su un telefono da 320 accanto al marchio e all'hamburger semplicemente non ci stanno - la scelta era fra pallini piu' piccoli e pallini che si vedono solo aprendo il menu, cioe' che non si vedono. Sbagliare mira qui non cancella e non invia niente: prende il colore accanto, si vede subito e si ricorregge al tocco dopo. Nel form di registrazione, dove la stessa fila e' un campo vero, i 44 pieni restano. */ /* La pastiglia del colore nella barra: e' .appearance dell'applicazione, quindi qui c'e' solo cio' che riguarda questa pagina. Il pallino chiuso non ha una classe .swatch-* addosso - il colore in uso qui non lo sa il server, lo sa il foglio - e allora se lo prende da var(--accent), che il :has() ridefinisce nell'istante in cui si sceglie un pallino nel pannello. */ .lp-accent { flex: none; } .lp-accent > summary .swatch { background: var(--accent); } /* Sei pallini da 44 fanno 264, che entrano anche in uno schermo da 320 - ma il pannello si dimensiona sul contenuto, quindi senza un tetto non ci sarebbe niente a fermarlo se un giorno i colori diventassero otto. Nessun a capo: incolonnati diventavano una lista alta mezzo schermo. */ .lp-accent .appearance-panel { max-width: calc(100vw - 24px); } .lp-accent .accent-choice { flex-wrap: nowrap; } /* Il comando del tema sotto la fila dei colori, largo quanto il pannello: nel pannello dell'applicazione e' un