/* ============================================================================ CRESIDENTE · CORE — parte 1/2 : PRIMITIVES + CONTRACT + DEPTH + TYPE La piattaforma-madre. Regola d'oro: evolvi il LOOK, non l'API. I prodotti consumano SOLO i token semantici del contract. Le skin riempiono SOLO il contract + i type slot, via [data-brand]. sabbia = campo · tungsteno = segnale (lucentezza) · ottone = struttura. ========================================================================== */ /* Font self-hosted (Hanken Grotesk · JetBrains Mono · Spectral) — subset latin+latin-ext. Nessuna chiamata esterna: privacy/GDPR-clean, niente render-block da Google. */ @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/hanken-grotesk-400-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/hanken-grotesk-400-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/hanken-grotesk-500-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/hanken-grotesk-500-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/hanken-grotesk-600-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/hanken-grotesk-600-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/hanken-grotesk-700-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/hanken-grotesk-700-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrains-mono-400-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrains-mono-400-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/jetbrains-mono-500-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/jetbrains-mono-500-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/jetbrains-mono-600-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/jetbrains-mono-600-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url("fonts/spectral-400-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url("fonts/spectral-400-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Spectral';font-style:italic;font-weight:500;font-display:swap;src:url("fonts/spectral-500-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Spectral';font-style:italic;font-weight:500;font-display:swap;src:url("fonts/spectral-500-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/spectral-400-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/spectral-400-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/spectral-500-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/spectral-500-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/spectral-600-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/spectral-600-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* ---- 1 · PRIMITIVES — ramp grezze, mai consumate dai prodotti --------------*/ :root { /* Sabbia — campo Dune (Sole) */ --p-sand-900: #9C885C; --p-sand-700: #B5A275; --p-sand-500: #D4C49E; --p-sand-300: #E5D9BE; --p-sand-200: #F1E8D2; --p-sand-100: #F8F1DE; /* Inchiostro caldo — testo su Sole */ --p-ink: #1C1611; --p-ink-soft: #6B5F4A; --p-ink-faint: #968768; /* Ebano verde-tungsteno — campo Notte (near-black freddo, lieve cast verde-grigio) */ --p-wood-900: #0A0C09; --p-wood-800: #121511; --p-wood-700: #1B1E18; --p-wood-600: #242821; /* Avorio caldo — testo su Notte */ --p-ivory: #F1E5C8; --p-ivory-soft: #BBA784; --p-ivory-faint: #7E7050; /* Tungsteno — sinapsi (il segnale è una lucentezza, non un colore) */ --p-tung-700: #4A5058; --p-tung-500: #6E7783; --p-tung-400: #8B95A0; --p-tung-200: #C8CFD7; --p-tung-100: #E5EAEF; --p-tung-night: #C0C8D2; /* Ottone bruciato — struttura */ --p-brass-deep: #6B5028; --p-brass: #8C6B3C; --p-brass-bright: #A8814F; --p-brass-night: #B89968; /* Foglia secca — vivo */ --p-leaf-deep: #4A5230; --p-leaf: #6B7548; --p-leaf-night: #8A9472; } /* ---- 2 · TYPE SLOTS + scale non-colore -------------------------------------*/ :root { --font-display: "Hanken Grotesk", system-ui, sans-serif; --font-ui: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --font-editorial: "Spectral", Georgia, serif; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 60px; --sp-9: 90px; --sp-10: 128px; --r-0: 0px; --r-1: 2px; --r-2: 4px; --ease: cubic-bezier(.22, 1, .36, 1); --t-fast: 140ms; --t-base: 220ms; --t-slow: 360ms; --grid-step: 32px; } /* ---- 3 · CONTRACT — l'API stabile · default SOLE (Giorno) ------------------*/ :root, [data-theme="light"] { color-scheme: light; --bg: var(--p-sand-300); --bg-raised: var(--p-sand-200); --bg-overlay: var(--p-sand-100); --bg-sunken: var(--p-sand-500); --fg: var(--p-ink); --fg-muted: var(--p-ink-soft); --fg-faint: var(--p-ink-faint); --accent: var(--p-tung-400); --accent-deep: var(--p-tung-500); --accent-bright: var(--p-tung-200); --accent-wash: #E4E7EB; --accent-on: #1C1611; --metal: var(--p-brass); --leaf: var(--p-leaf); --leaf-deep: var(--p-leaf-deep); --border: #C9B98E; --border-strong: #B5A275; --hairline: rgba(28, 22, 17, 0.07); --ring: rgba(139, 149, 160, 0.40); --grain-opacity: 0.035; } [data-theme="dark"] { color-scheme: dark; --bg: var(--p-wood-800); --bg-raised: var(--p-wood-700); --bg-overlay: var(--p-wood-600); --bg-sunken: var(--p-wood-900); --fg: var(--p-ivory); --fg-muted: var(--p-ivory-soft); --fg-faint: var(--p-ivory-faint); --accent: var(--p-tung-night); --accent-deep: var(--p-tung-400); --accent-bright: var(--p-tung-100); --accent-wash: rgba(192, 200, 210, 0.10); --accent-on: #1C1611; --metal: var(--p-brass-night); --leaf: var(--p-leaf-night); --leaf-deep: var(--p-leaf-deep); --border: #262A22; --border-strong: #383D32; --hairline: rgba(241, 229, 200, 0.05); --ring: rgba(192, 200, 210, 0.40); --grain-opacity: 0.045; } /* ---- 4 · BASE --------------------------------------------------------------*/ * { box-sizing: border-box; } .cr-root { margin: 0; background-color: var(--bg); color: var(--fg); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--accent); color: var(--accent-on); } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-bright); } /* ---- 5 · DEPTH — griglia hairline 32px + grana, senza ombre ----------------*/ .cr-depth::before, .cr-depth::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; } .cr-depth::before { background-image: linear-gradient(to right, var(--hairline) 1px, transparent 1px), linear-gradient(to bottom, var(--hairline) 1px, transparent 1px); background-size: var(--grid-step) var(--grid-step); } .cr-depth::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: var(--grain-opacity); mix-blend-mode: overlay; } .cr-depth > * { position: relative; z-index: 1; } /* ---- 6 · TYPE SCALE --------------------------------------------------------*/ .t-display { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px,6vw,76px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; margin: 0; } .t-h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px,3.4vw,40px); line-height: 1.08; letter-spacing: -0.015em; margin: 0; } .t-h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; } .t-h3 { font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 1.25; margin: 0; } .t-body { font-family: var(--font-ui); font-size: 16px; line-height: 1.55; margin: 0; } .t-small { font-family: var(--font-ui); font-size: 13px; line-height: 1.45; margin: 0; } .t-editorial { font-family: var(--font-editorial); font-weight: 400; font-size: clamp(19px,1.7vw,23px); line-height: 1.5; letter-spacing: 0.003em; text-wrap: pretty; margin: 0; } .t-editorial-lg { font-family: var(--font-editorial); font-weight: 400; font-size: clamp(26px,3.2vw,38px); line-height: 1.3; margin: 0; } .t-editorial em { font-style: italic; } .t-mono { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; margin: 0; } .t-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .t-muted { color: var(--fg-muted); } .t-faint { color: var(--fg-faint); } .t-metal { color: var(--metal); } .t-accent { color: var(--accent); } /* ---- 7 · KICKER — oggetto-firma -------------------------------------------*/ .cr-kicker { display: inline-flex; align-items: baseline; gap: 0.45em; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--metal); } .cr-kicker::before { content: "["; color: var(--accent); font-weight: 600; } .cr-kicker::after { content: "]"; color: var(--accent); font-weight: 600; } .cr-kicker .sep { color: var(--fg-faint); } .cr-kicker b { color: var(--fg-muted); font-weight: 500; } /* ---- 8 · WORDMARK — "cresidente" + punto-segnale tungsteno -----------------*/ .cr-wordmark { font-family: var(--font-mono); font-weight: 500; font-size: 15px; letter-spacing: 0.02em; color: var(--fg); text-transform: lowercase; display: inline-flex; align-items: baseline; } .cr-wordmark::after { content: "."; color: var(--accent); font-weight: 700; margin-left: 1px; } /* ============================================================================ 9 · COMPONENTS — keyed SOLO sui token semantici del contract. Nessun colore letterale qui sotto: solo var(--…). Le skin li ricolorano cambiando i token, non queste regole. ========================================================================== */ /* --- BUTTON · 3 varianti ---------------------------------------------------*/ .cr-btn { --_bg: transparent; --_fg: var(--fg); --_bd: var(--border-strong); display: inline-flex; align-items: center; gap: var(--sp-2); padding: 10px 18px; font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0.005em; line-height: 1; color: var(--_fg); background: var(--_bg); white-space: nowrap; border: 1px solid var(--_bd); border-radius: var(--r-1); cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .cr-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .cr-btn--primary { --_bg: var(--accent); --_fg: var(--accent-on); --_bd: var(--accent); } .cr-btn--primary:hover { --_bg: var(--accent-deep); --_bd: var(--accent-deep); } .cr-btn--ghost:hover { --_bd: var(--accent); --_fg: var(--accent-bright); } .cr-btn--quiet { --_bd: transparent; --_fg: var(--fg-muted); padding-inline: 8px; } .cr-btn--quiet:hover { --_fg: var(--fg); --_bg: var(--bg-overlay); } /* --- CARD ------------------------------------------------------------------*/ .cr-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-2); padding: var(--sp-5); } .cr-card--sunken { background: var(--bg-sunken); } /* --- TAG · 4 varianti ------------------------------------------------------*/ .cr-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); background: transparent; border: 1px solid var(--border-strong); border-radius: var(--r-1); } .cr-tag--accent { color: var(--accent-bright); border-color: var(--accent); background: var(--accent-wash); } .cr-tag--metal { color: var(--metal); border-color: var(--border-strong); } .cr-tag--solid { color: var(--accent-on); background: var(--accent); border-color: var(--accent); } /* --- CHIP + DOT · stato ----------------------------------------------------*/ .cr-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--fg); background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--r-1); } .cr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--metal); flex: none; } .cr-dot--live { background: var(--accent-bright); box-shadow: 0 0 0 3px var(--accent-wash); } .cr-dot--metal { background: var(--metal); } /* --- FIELD -----------------------------------------------------------------*/ .cr-field { display: flex; flex-direction: column; gap: 6px; } .cr-field > span, .cr-field > label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); } .cr-input { font-family: var(--font-ui); font-size: 15px; color: var(--fg); background: var(--bg-sunken); border: 1px solid var(--border-strong); border-radius: var(--r-1); padding: 11px 13px; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .cr-input::placeholder { color: var(--fg-faint); } .cr-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } /* --- TIMELINE · indicizzata, mono -------------------------------------------*/ .cr-timeline { list-style: none; margin: 0; padding: 0; } .cr-timeline li { position: relative; padding: 0 0 var(--sp-5) var(--sp-6); border-left: 1px solid var(--border-strong); } .cr-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; } .cr-timeline li::before { content: ""; position: absolute; left: -4px; top: 5px; width: 7px; height: 7px; background: var(--metal); border-radius: 50%; } .cr-timeline li[data-active]::before { background: var(--accent-bright); box-shadow: 0 0 0 3px var(--accent-wash); } .cr-tl-idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--metal); display: block; margin-bottom: 3px; } .cr-tl-title { font-family: var(--font-ui); font-weight: 500; font-size: 15px; } .cr-tl-meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); margin-top: 3px; } /* --- NOTE · annotazione editoriale ------------------------------------------*/ .cr-note { border-left: 2px solid var(--accent); padding: 2px 0 2px var(--sp-4); font-family: var(--font-editorial); font-size: 18px; line-height: 1.5; color: var(--fg-muted); } .cr-note em { color: var(--fg); font-style: italic; } /* --- RULE hairline ---------------------------------------------------------*/ .cr-rule { height: 1px; background: var(--border); border: 0; margin: 0; } /* --- OGGETTO COME EROE · scheda lotto con metadata mono + prezzo tabular ----*/ .cr-object { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-2); overflow: hidden; transition: border-color var(--t-base) var(--ease); } .cr-object:hover { border-color: var(--border-strong); } .cr-object__media { aspect-ratio: 4 / 5; background: var(--bg-sunken); border-bottom: 1px solid var(--border); background-image: repeating-linear-gradient( -45deg, transparent 0 9px, var(--hairline) 9px 10px); display: flex; align-items: flex-end; justify-content: space-between; padding: var(--sp-3); } .cr-object__idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--metal); } .cr-object__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); } .cr-object__title { font-family: var(--font-editorial); font-size: 18px; line-height: 1.25; color: var(--fg); } .cr-object__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-muted); text-transform: uppercase; } .cr-object__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); } .cr-object__row .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); } .cr-object__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600; color: var(--fg); }