/* Shared tokens + components for all concept pages. Fonts (add this in each page's ): https://fonts.googleapis.com/css2?family=Outfit:wght@300..800&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Josefin+Sans:wght@300..600&family=Caveat:wght@500..700&family=JetBrains+Mono:wght@400;600&display=swap */ :root { /* FLUO brand (sampled from the logo) */ --fluo-blue: #3fa2c9; --fluo-steel: #7c8a99; --fluo-orange: #e8642c; --fluo-grad: linear-gradient(100deg, #3fa2c9 0%, #7c8a99 45%, #e8642c 100%); /* Tiny Bar world: sun, sand, lake, aperol */ --tb-sky: #bfe3f5; --tb-sky-deep: #6fb9e0; --tb-sand: #f3e4c8; --tb-sand-deep: #dcc19a; --tb-lake: #2f7f8c; --tb-straw: #cfa56a; --tb-aperol: #f07a3a; --tb-ink: #2b2620; /* LES BULLES world: label green, champagne gold, cream */ --lb-green: #10261f; --lb-green-2: #1b3a30; --lb-gold: #d6b25e; --lb-gold-light: #efd792; --lb-champagne: #f4e7c4; --lb-cream: #fbf6ea; --lb-ink: #1a1a16; /* Neutrals */ --paper: #fbf8f2; --ink: #1d1b18; --muted: #6d665c; /* Type */ --f-sans: 'Outfit', ui-sans-serif, system-ui, sans-serif; --f-serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; --f-tb: 'Josefin Sans', 'Outfit', sans-serif; --f-hand: 'Caveat', 'Bradley Hand', cursive; --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --ease-out: cubic-bezier(.16, 1, .3, 1); --gutter: clamp(16px, 4vw, 56px); color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* Bodoni Moda's display optical size has hairlines that vanish on a video call (screen-share compression). "none" keeps the sturdier default optical size at every font size. !important because every `font:` shorthand in a page silently resets it to auto. */ *, *::before, *::after { font-optical-sizing: none !important; } img { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; } [hidden] { display: none !important; } /* No lonely last words in running text. */ p, figcaption, li { text-wrap: pretty; } /* Counters from FLUO.countHTML: fixed-width digit box + reserved suffix, so the row never jumps. */ fl-n { display: inline-block; white-space: nowrap; } fl-c { display: inline-block; font-variant-numeric: tabular-nums; } fl-s { display: inline; } /* Drawn ∞ from FLUO.countHTML / FLUO.INF_HTML — sits on the baseline like a digit. */ .inf { display: inline-block; line-height: 0; vertical-align: baseline; } .inf svg { height: .62em; width: 1.24em; overflow: visible; } .inf path { fill: none; stroke: currentColor; stroke-width: var(--inf-stroke, 9); stroke-linejoin: round; } /* Lenis recommended CSS */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ---------- FLUO logo ---------- */ .fluo-logo { display: inline-block; width: 92px; height: auto; } .fluo-logo img { width: 100%; height: auto; } /* ---------- Language switch ---------- */ .lang-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .08); } .lang-switch button { border: 0; background: transparent; cursor: pointer; font: 600 12px/1 var(--f-sans); letter-spacing: .08em; padding: 8px 12px; border-radius: 999px; color: var(--muted); transition: background .25s, color .25s; } .lang-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; } .lang-switch button:focus-visible { outline: 2px solid var(--fluo-blue); outline-offset: 2px; } /* ---------- REAL / AI tags: the visual grammar of the whole page ---------- REAL = paper chip, camera icon, ink text. AI = FLUO-gradient chip, sparkle icon, white text. */ .tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; font: 600 11px/1 var(--f-sans); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; pointer-events: none; } .tag svg { width: 14px; height: 14px; flex: none; } .tag b { font-weight: 600; } .tag--real { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, .10), 0 4px 12px rgba(0, 0, 0, .10); } .tag--ai { background: var(--fluo-grad); color: #fff; box-shadow: 0 4px 14px rgba(232, 100, 44, .30); } /* Pinned on a picture corner */ .tag--corner { position: absolute; left: 10px; top: 10px; z-index: 3; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }