/* ======================================================== Freename design challenge — slides shared.css DS Amaca v2.2.0 tokens + base typography + slide scaffold NOTE: Satoshi is loaded via tag in each slide's HTML , not here via @import (more reliable across browsers). This file only declares the font stack — the loading happens in HTML head BEFORE this CSS runs. ======================================================== */ :root { /* Obsidian neutrals */ --obsidian-950: #07090B; --obsidian-900: #0B0E12; --obsidian-850: #10141A; --obsidian-800: #161B22; --obsidian-700: #1E242D; --obsidian-600: #2A313B; --obsidian-500: #3A4451; --obsidian-400: #5B6573; --obsidian-300: #8A94A3; --obsidian-200: #B8C0CB; --obsidian-100: #E3E7EC; --obsidian-050: #F4F6F8; /* Magenta brand */ --magenta-100: #FFE3F8; --magenta-200: #FFB5EC; --magenta-300: #FF85DF; --magenta-400: #F868D8; --magenta-500: #F051D5; --magenta-600: #C93BB0; --magenta-700: #9A2D87; --magenta-800: #66195A; /* Supporting */ --cyan: #00FFF2; --petrol: #0C6078; /* Typography — Satoshi everywhere (canonical rule). Fallback chain ends in Inter/Helvetica/Arial to avoid Times. */ --font-sans: 'Satoshi', 'Satoshi Variable', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Slide format */ --slide-w: 1920px; --slide-h: 1080px; } /* Reset minimal */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: var(--obsidian-950); color: var(--obsidian-100); font-family: var(--font-sans); font-weight: 400; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Belt-and-suspenders: force Satoshi on every element in the slide. If something else gets a different font-family by accident, this overrides. */ .slide, .slide *, .frame, .frame *, .slide-footer, .slide-counter, .nav-arrows, .nav-arrows * { font-family: var(--font-sans); } .slide .eyebrow, .slide .mono-micro, .slide-footer, .slide-counter, .nav-arrows a { font-family: var(--font-mono); } /* ======================================================== Slide scaffold 1920x1080 fixed canvas. Scaled to fit viewport via JS. ======================================================== */ .slide { position: fixed; top: 50%; left: 50%; width: var(--slide-w); height: var(--slide-h); background: var(--obsidian-950); transform: translate(-50%, -50%) scale(1); transform-origin: center center; overflow: hidden; } /* Frame system — content lives inside .frame with consistent padding */ .frame { position: absolute; inset: 0; padding: 80px 120px; display: flex; flex-direction: column; } /* Eyebrow — mono micro top label. Cyan accent = canonical chrome per il deck (echeggia il core dell'animazione neurale in slide-anim). */ .eyebrow { font-family: var(--font-mono); font-size: 20px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); } /* Second eyebrow in a top-row = slide-specific subtitle. Differenziato dal Part identifier (sx, cyan + 20px) con: - color obsidian-100 (white) - font-size 17px (poco più piccolo) */ .top-row .eyebrow + .eyebrow { color: var(--obsidian-100); font-size: 17px; } /* Heading scale (Amaca DS adapted to 1920x1080) */ .t-display { font-size: 180px; font-weight: 500; line-height: 1.0; letter-spacing: -0.04em; color: var(--obsidian-100); } .t-h1 { font-size: 120px; font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; color: var(--obsidian-100); } .t-h2 { font-size: 84px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--obsidian-100); } .t-h3 { font-size: 60px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--obsidian-100); } .t-h4 { font-size: 44px; font-weight: 500; line-height: 1.2; color: var(--obsidian-100); } .t-lead { font-size: 32px; font-weight: 400; line-height: 1.45; color: var(--obsidian-200); } .t-body { font-size: 24px; font-weight: 400; line-height: 1.55; color: var(--obsidian-100); } .t-small { font-size: 18px; font-weight: 400; line-height: 1.5; color: var(--obsidian-300); } /* Mono micro labels (eyebrow-like) */ .mono-micro { font-family: var(--font-mono); font-size: 16px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--obsidian-300); } /* Accent magenta */ .accent { color: var(--magenta-500); } .accent-light { color: var(--magenta-400); } /* Slide footer — section label, mono micro, cyan accent. NB: il page number sulla destra è stato rimosso (overlap con nav-arrows a 24/24 + ridondante con .slide-counter top-right). */ .slide-footer { position: absolute; bottom: 48px; left: 120px; right: 120px; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); } /* Slide navigation (next/prev arrows fixed on viewport) */ .nav-arrows { position: fixed; bottom: 24px; right: 24px; display: flex; gap: 8px; z-index: 10; } .nav-arrows a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--obsidian-800); border: 1px solid var(--obsidian-700); border-radius: 8px; color: var(--obsidian-100); text-decoration: none; font-family: var(--font-mono); font-size: 16px; transition: border-color 200ms ease, background 200ms ease; } .nav-arrows a:hover { border-color: var(--magenta-500); background: var(--obsidian-700); } .nav-arrows a[aria-disabled="true"] { opacity: 0.3; pointer-events: none; } /* Slide counter (top right) */ .slide-counter { position: fixed; top: 24px; right: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--obsidian-400); z-index: 10; } /* ======================================================== Auto-scale slide to fit viewport ======================================================== */ @media (max-aspect-ratio: 16/9) { /* Portrait or narrow — scale by width */ .slide { transform: translate(-50%, -50%) scale(calc(100vw / var(--slide-w))); } } @media (min-aspect-ratio: 16/9) { /* Landscape — scale by height */ .slide { transform: translate(-50%, -50%) scale(calc(100vh / var(--slide-h))); } } /* ======================================================== Entrance animations Applied by shared.js on DOMContentLoaded: - .anim-fade-up default chrome + cards + blocks - .anim-scale-in icons + markers + dots - decode/count-up via JS direct textContent manipulation ======================================================== */ @keyframes anim-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes anim-scale-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } /* Specific keyframes for .rh (slide-04 rhombi) — preserve rotate(45deg) */ @keyframes anim-rh-scale-in { from { opacity: 0; transform: rotate(45deg) scale(0.4); } to { opacity: 1; transform: rotate(45deg) scale(1); } } .anim-fade-up { animation: anim-fade-up 550ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--anim-delay, 0ms); } .anim-scale-in { animation: anim-scale-in 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: var(--anim-delay, 0ms); } .rh.anim-scale-in { animation: anim-rh-scale-in 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: var(--anim-delay, 0ms); } /* ======================================================== Reduced motion ======================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .anim-fade-up, .anim-scale-in { animation: none !important; } }