/* ============================================================ LGF — Brand Guidelines · Layout & components The shell is a sober monochrome gallery; the channel colour carries all the energy. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* clip (not hidden) contains any stray horizontal overflow WITHOUT turning / into a scroll container — which would break the sidebar's position:sticky. Keep it off so sticky stays anchored to the viewport. */ body { overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-text); font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--accent); color: var(--on-accent); } h1,h2,h3,h4,p { margin: 0; } a { color: inherit; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } /* DIN impact helper */ .din { font-family: var(--font-impact); font-weight: var(--w-din-bold); line-height: var(--lh-snug); letter-spacing: 0.005em; } .label { font-family: var(--font-impact); font-weight: var(--w-din-bold); text-transform: uppercase; letter-spacing: var(--tr-label); font-size: var(--t-label); line-height: 1; } .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; letter-spacing: 0.01em; } /* ============================================================ APP SHELL — fixed sidebar + scrolling content ============================================================ */ .app { display: flex; min-height: 100vh; } .sidebar { position: sticky; top: 0; align-self: flex-start; width: var(--sidebar-w); height: 100vh; flex: 0 0 var(--sidebar-w); display: flex; flex-direction: column; background: var(--bg); z-index: 40; } .sidebar__brand { padding: 28px var(--s-6) 22px; border-bottom: 1px solid var(--border); } .sidebar__mark { font-family: var(--font-impact); font-weight: var(--w-din-black); font-size: 1.5rem; letter-spacing: 0.02em; line-height: 1; } .sidebar__mark span { color: var(--accent); transition: color .4s var(--ease-out); } .sidebar__sub { margin-top: 6px; font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .toc { list-style: none; margin: 0; padding: 14px 0; overflow-y: auto; flex: 1; } .toc a { display: flex; align-items: baseline; gap: 14px; padding: 9px var(--s-6); text-decoration: none; color: var(--muted); transition: color .18s ease, background .18s ease; position: relative; } .toc a:hover { color: var(--ink); } .toc a .num { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--faint); width: 22px; flex: 0 0 22px; transition: color .18s ease; } .toc a .name { font-size: var(--t-sm); font-weight: var(--w-med); letter-spacing: 0.005em; } .toc a.is-active { color: var(--ink); } .toc a.is-active .num { color: var(--accent); } .toc a.is-active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--accent); } .sidebar__foot { padding: 18px var(--s-6) 22px; border-top: 1px solid var(--border); } .dl-btn { display: inline-flex; align-items: center; gap: 9px; width: 100%; justify-content: center; padding: 11px 16px; border-radius: var(--r-pill); background: var(--ink); color: #fff; border: none; font-family: var(--font-text); font-size: var(--t-sm); font-weight: var(--w-semi); letter-spacing: 0.01em; transition: opacity .18s ease; } .dl-btn:hover { opacity: .85; } .sidebar__channel { margin-top: 14px; font-size: var(--t-micro); color: var(--faint); text-transform: uppercase; letter-spacing: 0.14em; display: flex; align-items: center; gap: 8px; } .sidebar__channel b { color: var(--ink); font-weight: var(--w-bold); } .sidebar__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 1px solid rgba(0,0,0,.12); transition: background .4s var(--ease-out); } /* main column */ /* the separator lives on .content so it runs the FULL page height, not just the sidebar's one-viewport height (sticky, 100vh) */ .content { flex: 1 1 auto; min-width: 0; border-left: 1px solid var(--border); } .section { scroll-margin-top: 0; border-bottom: 1px solid var(--border); } .section__inner { max-width: var(--content-max); padding: var(--s-9) var(--pad-x); } .wide .section__inner { max-width: 1320px; } /* ============================================================ SECTION HEADER — giant number + title on a full band ============================================================ */ .shead { display: flex; align-items: stretch; border-bottom: 1px solid var(--ink); background: var(--bg); } .shead__num { font-family: var(--font-impact); font-weight: var(--w-din-black); font-size: var(--t-display); line-height: 0.86; padding: var(--s-7) var(--s-5) var(--s-5) var(--pad-x); color: var(--ink); letter-spacing: -0.01em; } .shead__title { font-family: var(--font-impact); font-weight: var(--w-din-bold); text-transform: uppercase; font-size: var(--t-h1); line-height: 0.9; letter-spacing: 0.01em; align-self: flex-end; padding: 0 var(--pad-x) calc(var(--s-5) + 4px) 0; } .eyebrow { font-family: var(--font-impact); text-transform: uppercase; letter-spacing: var(--tr-label); font-size: var(--t-label); color: var(--accent); font-weight: var(--w-din-bold); transition: color .4s var(--ease-out); } .lead { font-size: var(--t-lead); line-height: 1.45; max-width: 42ch; color: var(--ink-2); font-weight: var(--w-reg); } .note { color: var(--muted); font-size: var(--t-sm); max-width: 60ch; } .kicker { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.13em; color: var(--muted); font-weight: var(--w-semi); } /* generic helpers */ .stack > * + * { margin-top: var(--s-4); } .grid { display: grid; gap: var(--gutter); } .divider { height: 1px; background: var(--border); margin: var(--s-7) 0; } .hr-strong { height: 1px; background: var(--ink); } /* ============================================================ 00 · COVER ============================================================ */ .cover { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: var(--s-8) var(--pad-x) var(--s-7); position: relative; border-bottom: 1px solid var(--ink); } .cover__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } .cover__meta { text-align: right; font-size: var(--t-xs); color: var(--muted); line-height: 1.7; } .cover__meta b { color: var(--ink); font-weight: var(--w-semi); } .cover__center { padding: var(--s-6) 0; } .cover__wordmark { font-family: var(--font-impact); font-weight: var(--w-din-black); font-size: var(--t-mega); line-height: 0.82; letter-spacing: -0.01em; text-transform: uppercase; } .cover__wordmark em { font-style: normal; color: var(--accent); transition: color .4s var(--ease-out); } .cover__title { margin-top: var(--s-4); font-size: var(--t-lead); max-width: 46ch; color: var(--ink-2); } .cover__logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gutter); border-top: 1px solid var(--border); padding-top: var(--s-6); } .cover__logo { display: flex; flex-direction: column; gap: 12px; } .cover__logo img { width: 100%; height: auto; border-radius: 6px; } .cover__logo .cap { font-size: var(--t-xs); color: var(--muted); display: flex; justify-content: space-between; gap: 8px; } .cover__logo .cap .sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.1); } /* ============================================================ 01 · NETWORK / channel grid ============================================================ */ .sys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); margin-top: var(--s-7); } .sys-cell { border: 1px solid var(--border); padding: var(--s-5); } .sys-cell .n { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--faint); } .sys-cell h3 { font-family: var(--font-impact); text-transform: uppercase; font-size: 1.6rem; letter-spacing: 0.02em; margin-top: 4px; font-weight: var(--w-din-bold); } .sys-cell p { font-size: var(--t-sm); color: var(--muted); margin-top: 8px; } .channels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: var(--s-7); border: 1px solid var(--border); background: var(--border); } .ch-card { position: relative; background: var(--bg); border: none; padding: 0; text-align: left; display: flex; flex-direction: column; transition: transform .3s var(--ease-out); overflow: hidden; } .ch-card__sw { aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 18%; background: #ffffff; border-bottom: 1px solid var(--border); transition: filter .25s ease; } .ch-card__sw img { width: 100%; height: auto; } .ch-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; } .ch-card__name { font-family: var(--font-impact); text-transform: uppercase; font-weight: var(--w-din-bold); font-size: 1.15rem; letter-spacing: 0.03em; } .ch-card__hex { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); } .ch-card__state { position: absolute; top: 10px; right: 10px; font-family: var(--font-impact); text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.12em; padding: 3px 8px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); transition: background .4s var(--ease-out), color .4s var(--ease-out); z-index: 2; } .ch-card.is-active { outline: 2px solid var(--accent); outline-offset: -2px; } .callout { margin-top: var(--s-7); border-left: 3px solid var(--accent); padding: 4px 0 4px var(--s-5); max-width: 64ch; transition: border-color .4s var(--ease-out); } .callout .label { color: var(--accent); transition: color .4s var(--ease-out); } .callout p { margin-top: 8px; font-size: var(--t-lead); line-height: 1.4; color: var(--ink-2); } /* ============================================================ 02 · LOGO ============================================================ */ .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); } .cols-2--40 { grid-template-columns: 0.8fr 1.2fr; } .frame { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-frame); position: relative; overflow: hidden; } .frame--dark { background: #0e0e10; } .frame__cap { position: absolute; left: 14px; top: 12px; font-family: var(--font-impact); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.12em; color: var(--muted); } .frame--dark .frame__cap { color: #8a8a8c; } .logo-pad { display: grid; place-items: center; padding: 14% 12%; min-height: 240px; } .logo-pad img { width: min(58%, 230px); height: auto; } /* anatomy */ .anatomy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; } .anatomy__viz { position: relative; border: 1px solid var(--border); background: var(--surface); padding: var(--s-7); display: grid; place-items: center; } .anatomy__viz img { width: min(48%, 180px); } .anatomy__list { list-style: none; padding: 0; margin: 0; } .anatomy__list li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); } .anatomy__list li:last-child { border-bottom: none; } .anatomy__list .tag { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--accent); transition: color .4s var(--ease-out); } .anatomy__list .tag-t { font-weight: var(--w-semi); font-size: var(--t-sm); } .anatomy__list .tag-d { font-size: var(--t-sm); color: var(--muted); } /* clearspace */ .clearspace { position: relative; padding: var(--s-7); border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; } .clearspace__box { position: relative; padding: 8%; } .clearspace__box::before { content: ""; position: absolute; inset: 0; outline: 2px dashed var(--accent); outline-offset: 0; opacity: .5; } .clearspace__box img { width: min(200px, 40vw); position: relative; z-index: 1; } .measure { position: absolute; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--accent); } /* min sizes */ .minsizes { display: flex; align-items: flex-end; gap: var(--s-6); flex-wrap: wrap; } .minsize { text-align: center; } .minsize img { margin: 0 auto 10px; height: auto; } .minsize .cap { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); } /* don'ts */ .donts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-top: var(--s-6); } .dont { border: 1px solid var(--border); } .dont__viz { aspect-ratio: 4/3; display: grid; place-items: center; background: var(--surface); overflow: hidden; position: relative; padding: 18%; } .dont__viz img { width: 100%; height: auto; } .dont__x { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--lgf-fun); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; } .dont__c { padding: 12px 14px; font-size: var(--t-sm); color: var(--muted); border-top: 1px solid var(--border); } /* on-air mock */ .onair { position: relative; aspect-ratio: 16/9; background: #0c0c0e center/cover no-repeat; border: 1px solid var(--border); overflow: hidden; border-radius: var(--r-frame); } .onair::before { content: ""; position: absolute; inset: 0; background: var(--onair-img) center/cover no-repeat; filter: blur(26px) brightness(.82) saturate(1.05); transform: scale(1.2); } .onair__photo { position: absolute; inset: 0; z-index: 1; background: var(--onair-img) center 58% / 95% no-repeat; } /* logo bug: stays a pure % of the screen so the desktop ratio is preserved verbatim when the mock shrinks on mobile (no px min-width that would blow it up) */ .onair__logo { position: absolute; z-index: 2; top: 5%; right: 5%; width: 9%; } .onair__safe { position: absolute; z-index: 2; inset: 5%; border: 1.5px dashed #FF7A00; } .onair__cap { margin-top: 12px; color: var(--muted); font-family: var(--font-mono); font-size: var(--t-xs); } /* ============================================================ 03 · COLOUR ============================================================ */ .hero-accent { background: var(--accent); color: var(--on-accent); border-radius: var(--r-frame); padding: clamp(28px, 5vw, 56px); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; transition: background .45s var(--ease-out), color .45s var(--ease-out); } .hero-accent .big { font-family: var(--font-impact); text-transform: uppercase; font-weight: var(--w-din-black); font-size: clamp(2.6rem, 6vw, 5rem); line-height: 0.86; letter-spacing: 0.01em; } .hero-accent .spec { font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.9; text-align: right; opacity: .92; } .swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); margin-top: var(--s-6); } .swatch { border: 1px solid var(--border); background: var(--bg); text-align: left; padding: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; transition: transform .2s var(--ease-out); } .swatch:hover { transform: translateY(-2px); } .swatch__fill { height: 150px; transition: background .25s ease; } .swatch__meta { padding: 14px 16px; display: grid; gap: 3px; } .swatch__meta .row { display: grid; grid-template-columns: 52px 1fr; gap: 10px; font-family: var(--font-mono); font-size: var(--t-xs); } .swatch__meta .row .k { color: var(--faint); } .swatch__meta .row .v { color: var(--ink); } .swatch__copied { position: absolute; top: 12px; right: 12px; background: rgba(17,17,17,.92); color: #fff; font-family: var(--font-impact); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem; padding: 5px 10px; border-radius: var(--r-pill); opacity: 0; transform: translateY(-4px) scale(.96); pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .swatch.copied .swatch__copied { opacity: 1; transform: translateY(0) scale(1); } .swatch__hint { position: absolute; top: 12px; right: 12px; font-family: var(--font-mono); font-size: var(--t-micro); color: rgba(255,255,255,.0); transition: color .2s ease; } .swatch:hover .swatch__hint { color: rgba(255,255,255,.7); } .swatch.on-light:hover .swatch__hint { color: rgba(0,0,0,.45); } .five-up { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; border: 1px solid var(--border); background: var(--border); margin-top: var(--s-6); } .five-up button { border: none; padding: 0; text-align: left; background: var(--bg); cursor: pointer; } .five-up .fill { height: 110px; transition: filter .2s ease; } .five-up .lab { padding: 12px 14px; } .five-up .lab .nm { font-family: var(--font-impact); text-transform: uppercase; font-weight: var(--w-din-bold); font-size: 0.95rem; letter-spacing: 0.04em; } .five-up .lab .hx { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--muted); } .five-up button:hover .fill { filter: brightness(.94); } .scale-row { display: grid; grid-template-columns: repeat(9, 1fr); margin-top: var(--s-6); border: 1px solid var(--border); } .scale-cell { aspect-ratio: 3/4; position: relative; display: flex; align-items: flex-end; padding: 10px; cursor: pointer; } .scale-cell span { font-family: var(--font-mono); font-size: var(--t-micro); } /* differentiation */ .bluegrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-5); margin-top: var(--s-6); align-items: start; } .bluecell { display: flex; flex-direction: column; gap: 14px; } .bluecell__logo-wrap { height: 52px; display: flex; align-items: center; } .bluecell__logo { max-height: 30px; max-width: 100%; width: auto; height: auto; display: block; } .bluecell__sq { aspect-ratio: 1 / 1; width: 100%; } .bluecell__hex { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); } .bluecell.is-lgf .bluecell__logo { max-height: 52px; } .bluecell.is-lgf .bluecell__sq { outline: 2px solid var(--ink); outline-offset: 4px; } .bluecell.is-lgf .bluecell__hex { color: var(--lgf-talk); font-weight: 600; } /* do / dont color usage */ .dodont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-top: var(--s-6); } .dd { border: 1px solid var(--border); } .dd__viz { aspect-ratio: 16/9; position: relative; overflow: hidden; } .dd__tag { position: absolute; top: 12px; left: 12px; font-family: var(--font-impact); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; padding: 4px 11px; border-radius: var(--r-pill); } .dd--ok .dd__tag { background: #0f9d58; color: #fff; } .dd--no .dd__tag { background: var(--lgf-fun); color: #fff; } .dd__c { padding: 13px 16px; font-size: var(--t-sm); color: var(--muted); border-top: 1px solid var(--border); } .coming { margin-top: var(--s-7); border: 1px dashed var(--border-strong); padding: var(--s-6); display: flex; align-items: center; gap: 18px; background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 12px, #fff 12px, #fff 24px); } .coming .label { color: var(--muted); } .coming p { font-size: var(--t-sm); color: var(--muted); } /* ============================================================ 04 · TYPOGRAPHY ============================================================ */ .type-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border: 1px solid var(--border); background: var(--border); margin-top: var(--s-7); } .type-card { background: var(--bg); padding: var(--s-6); } .type-card .role { display: flex; justify-content: space-between; align-items: baseline; } .type-card .role .pct { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--accent); transition: color .4s var(--ease-out); } .type-card .fam-impact { font-family: var(--font-impact); text-transform: uppercase; font-weight: var(--w-din-black); font-size: clamp(3rem,7vw,5.5rem); line-height: 0.84; margin-top: 10px; } .type-card .fam-text { font-family: var(--font-text); font-weight: var(--w-semi); font-size: clamp(2.6rem,6vw,4.5rem); line-height: 0.92; margin-top: 10px; letter-spacing: -0.01em; } .type-card .glyphs { font-size: var(--t-sm); color: var(--muted); margin-top: 14px; font-family: var(--font-mono); } .type-card .desc { color: var(--muted); font-size: var(--t-sm); margin-top: 12px; max-width: 40ch; } .type-card .name { font-weight: var(--w-bold); font-size: 1.05rem; } /* annoncer / expliquer demo */ .ax { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-5); margin-top: var(--s-6); } .ax-card { border: 1px solid var(--border); padding: var(--s-5); } .ax-card .ann { display: inline-block; background: var(--accent); color: var(--on-accent); font-family: var(--font-impact); text-transform: uppercase; font-weight: var(--w-din-bold); letter-spacing: 0.08em; font-size: 1.05rem; padding: 4px 12px; transition: background .4s var(--ease-out), color .4s var(--ease-out); } .ax-card .exp { margin-top: 14px; font-size: var(--t-body); color: var(--ink-2); } .ax-card .exp b { font-weight: var(--w-semi); } /* type stack (demonstrated, not just tabular) */ .stack-list { margin-top: var(--s-6); border-top: 1px solid var(--ink); } .stack-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-6); padding: var(--s-5) 0; border-bottom: 1px solid var(--border); align-items: center; } .stack-row .demo { overflow: hidden; } .stack-row .specs { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); display: grid; gap: 3px; } .stack-row .specs .lv { color: var(--accent); font-size: var(--t-label); font-family: var(--font-impact); letter-spacing: 0.1em; text-transform: uppercase; transition: color .4s var(--ease-out); } .stack-row .specs b { color: var(--ink); font-weight: 500; } .d-impact { font-family: var(--font-impact); text-transform: uppercase; } /* ============================================================ 05 · COMPONENTS / on-air toolkit ============================================================ */ .frame-16 { position: relative; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-frame); background: #14110d center/cover no-repeat; } .frame-16__scene { position: absolute; inset: 0; } .frame-16__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.55) 100%); } .frame-16__logo { position: absolute; top: 4.6%; right: 3.2%; width: 8.5%; min-width: 58px; z-index: 5; } /* lower third */ .lthird { position: absolute; left: 4.2%; bottom: 7%; display: flex; align-items: stretch; z-index: 6; max-width: 64%; } .lthird__bar { background: var(--accent); color: var(--on-accent); font-family: var(--font-impact); text-transform: uppercase; font-weight: var(--w-din-bold); letter-spacing: 0.1em; display: grid; place-items: center; padding: 0 clamp(12px,1.6vw,20px); font-size: clamp(0.9rem, 1.7vw, 1.35rem); clip-path: inset(0 0 0 0); transition: background .4s var(--ease-out), color .4s var(--ease-out); } .lthird__body { background: rgba(255,255,255,0.96); color: var(--ink); padding: clamp(8px,1.3vw,14px) clamp(14px,1.8vw,22px); display: flex; flex-direction: column; justify-content: center; } .lthird__name { font-weight: var(--w-bold); font-size: clamp(1rem,2vw,1.5rem); line-height: 1.05; } .lthird__fn { color: var(--muted); font-size: clamp(0.78rem,1.3vw,1rem); margin-top: 2px; } /* animation states (gated by .play) */ .lthird .lthird__bar { clip-path: inset(0 100% 0 0); } .lthird .lthird__body { clip-path: inset(0 100% 0 0); } .lthird .lthird__name, .lthird .lthird__fn { opacity: 0; transform: translateY(10px); } .lthird.play .lthird__bar { animation: barReveal var(--dur-in) var(--ease-out) forwards; } .lthird.play .lthird__body { animation: bodyReveal var(--dur-in) var(--ease-out) .09s forwards; } .lthird.play .lthird__name { animation: lineUp var(--dur-in) var(--ease-out) .22s forwards; } .lthird.play .lthird__fn { animation: lineUp var(--dur-in) var(--ease-out) calc(.22s + var(--stagger)) forwards; } @keyframes barReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes bodyReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes lineUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .replay { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-4); background: var(--bg); border: 1px solid var(--border-strong); color: var(--ink); padding: 8px 16px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: var(--w-semi); transition: opacity .18s ease, border-color .18s ease; } .replay:hover { border-color: var(--ink); } /* component spec rows */ .comp-specs { margin-top: var(--s-5); display: grid; gap: 0; border-top: 1px solid var(--border); } .comp-specs .r { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: var(--t-sm); } .comp-specs .r .k { color: var(--muted); } .comp-specs .r .v { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink); } /* component bits */ .bits { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s-6); margin-top: var(--s-6); } .bit { border: 1px solid var(--border); padding: var(--s-6); display: flex; flex-direction: column; gap: 16px; } .bit__demo { min-height: 120px; display: grid; place-items: center; background: var(--surface); padding: var(--s-5); } .bit__cap { font-size: var(--t-sm); color: var(--muted); } .bit__cap b { color: var(--ink); font-weight: var(--w-semi); display: block; font-family: var(--font-text); } .cartouche { background: var(--accent); color: var(--on-accent); font-family: var(--font-impact); text-transform: uppercase; font-weight: var(--w-din-bold); letter-spacing: 0.12em; padding: 8px 18px; font-size: 1.3rem; transition: background .4s var(--ease-out), color .4s var(--ease-out); } .badge-ch { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; padding: 7px 14px 7px 8px; border-radius: var(--r-pill); } .badge-ch img { height: 26px; width: auto; border-radius: 4px; } .badge-ch span { font-family: var(--font-impact); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; } .titlebar { width: 100%; } .titlebar__k { font-family: var(--font-impact); text-transform: uppercase; color: var(--accent); letter-spacing: 0.12em; font-size: 0.85rem; transition: color .4s var(--ease-out); } .titlebar__t { font-family: var(--font-impact); text-transform: uppercase; font-weight: var(--w-din-black); font-size: 2rem; line-height: 0.95; margin-top: 4px; } .score { display: flex; align-items: center; gap: 18px; font-family: var(--font-impact); } .score__n { font-weight: var(--w-din-black); font-size: 3.4rem; line-height: 1; } .score__sep { color: var(--muted); font-size: 2rem; } .score__pct { background: var(--accent); color: var(--on-accent); padding: 6px 12px; font-weight: var(--w-din-bold); font-size: 1.5rem; transition: background .4s var(--ease-out), color .4s var(--ease-out); } /* ============================================================ 06 · APPLICATIONS ============================================================ */ .posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); margin-top: var(--s-7); } .poster { border: 1px solid var(--border); } .poster img { width: 100%; height: auto; } .poster__c { padding: 14px 16px; border-top: 1px solid var(--border); } .poster__c .t { font-weight: var(--w-semi); font-size: var(--t-sm); } .poster__c .d { font-size: var(--t-xs); color: var(--muted); margin-top: 2px; } .app-anatomy { margin-top: var(--s-7); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; } .app-anatomy__img { border: 1px solid var(--border); position: relative; } .app-anatomy__img img { width: 100%; } .app-anatomy ol { margin: 0; padding: 0; list-style: none; counter-reset: a; } .app-anatomy li { counter-increment: a; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); } .app-anatomy li::before { content: counter(a,decimal-leading-zero); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--accent); transition: color .4s var(--ease-out); } .app-anatomy li b { font-weight: var(--w-semi); font-size: var(--t-sm); } .app-anatomy li p { font-size: var(--t-sm); color: var(--muted); margin-top: 2px; } /* ============================================================ 07 · RESOURCES + developer block ============================================================ */ .res-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s-6); margin-top: var(--s-7); } .res-card { border: 1px solid var(--border); padding: var(--s-6); } .res-card h3 { font-family: var(--font-impact); text-transform: uppercase; font-size: 1.3rem; letter-spacing: 0.04em; } .res-card ul { margin: 14px 0 0; padding-left: 18px; color: var(--muted); font-size: var(--t-sm); } .res-card ul li { margin: 6px 0; } .dev { margin-top: var(--s-8); background: var(--ink); color: #e7e7e9; border-radius: var(--r-frame); padding: clamp(28px,4vw,48px); } .dev h3 { color: #fff; font-family: var(--font-impact); text-transform: uppercase; font-size: 1.6rem; letter-spacing: 0.05em; } .dev p { color: #a9a9ad; font-size: var(--t-sm); max-width: 64ch; margin-top: 10px; } .dev__vars { margin-top: var(--s-6); display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; } .dev__vars .r { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid #2a2a2d; font-family: var(--font-mono); font-size: var(--t-xs); } .dev__vars .r .k { color: #7fc4ff; } .dev__vars .r .v { color: #c9c9cd; } .dev code { font-family: var(--font-mono); background: #2a2a2d; color: #e7e7e9; padding: 1px 6px; border-radius: 3px; font-size: 0.85em; } .foot { padding: var(--s-7) var(--pad-x); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: var(--t-xs); } /* ============================================================ MOBILE ============================================================ */ .menu-btn { display: none; } .topbar { display: none; } @media (max-width: 1180px) { .swatches { grid-template-columns: 1fr 1fr; } .sys-grid { grid-template-columns: repeat(2,1fr); } /* keep the 4 "don't" tiles on one line — 2x2 makes each logo too big */ .res-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 920px) { .sidebar { position: fixed; left: 0; top: 0; height: 100dvh; transform: translateX(-100%); transition: transform .3s var(--ease-out); box-shadow: none; } body.nav-open .sidebar { transform: translateX(0); } body.nav-open::after { content:""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 35; } .topbar { display: flex; position: sticky; top: 0; z-index: 50; align-items: center; justify-content: space-between; padding: 12px 18px; background: var(--bg); border-bottom: 1px solid var(--border); } .topbar__mark { font-family: var(--font-impact); font-weight: var(--w-din-black); font-size: 1.2rem; } .topbar__mark span { color: var(--accent); } .menu-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 14px; font-size: var(--t-sm); font-weight: 600; } .app { display: block; } .content { width: 100%; border-left: none; } .cols-2, .cols-2--40, .anatomy, .app-anatomy, .dodont, .type-duo { grid-template-columns: 1fr; } .channels, .cover__logos, .five-up, .posters { grid-template-columns: repeat(2, 1fr); } .ax { grid-template-columns: 1fr; } .bits { grid-template-columns: 1fr; } .stack-row { grid-template-columns: 1fr; gap: 12px; } .dev__vars { grid-template-columns: 1fr; } .res-grid { grid-template-columns: 1fr; } .shead__num { font-size: clamp(2.6rem,12vw,4rem); } /* 9 squeezed tint columns -> the band wraps to 2 rows of ~5, so each hex label stays readable and the row stops overflowing */ .scale-row { grid-template-columns: repeat(5, 1fr); } .scale-cell { aspect-ratio: 1 / 1; } .scale-cell span { font-size: 9px; } /* blue-comparison grid: 5 squeezed columns -> 2 readable ones */ .bluegrid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } } @media (max-width: 560px) { .channels, .cover__logos, .five-up, .posters, .donts { grid-template-columns: 1fr 1fr; } /* the 3 "système" cards carry too much text for 2 columns on a phone -> stack them */ .sys-grid { grid-template-columns: 1fr; } .cover__wordmark { font-size: clamp(3rem, 18vw, 6rem); } .swatches { grid-template-columns: 1fr; } /* the cover meta block can crowd the wordmark on the narrowest phones */ .cover__top { flex-direction: column; gap: 16px; align-items: flex-start; } } /* reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .lthird .lthird__bar, .lthird .lthird__body { clip-path: inset(0 0 0 0) !important; } .lthird .lthird__name, .lthird .lthird__fn { opacity: 1 !important; transform: none !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* scroll reveal */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .reveal.in { opacity: 1; transform: none; }