/* ============================================================ ERA26 Expo Real Aftertaste, Warszawa RealTimes DARK-FIRST edition (MSN26 "Mid-Summer Night" model). Granat ERA (#061c38) jako plotno, pasma granatowe (#0a2d58), bialy atrament, full-brightness gold accents, gold hairlines. Seashell survives ONLY as the single partners-marquee light band (--seashell-light-band). Sharp corners. Flipped 2026-07-24 from the former Seashell-canvas edition via the :root remap below. ============================================================ */ :root { /* Locked brand tokens (never change) */ --rt-red: #e31b23; --rt-gold: #c5a55a; --background: #061c38; /* Granat ERA gleboki: baza strony + stopka */ --rt-charcoal: #0a2d58; --rt-line: rgba(255, 255, 255, 0.12); /* DARK-FIRST flip (donor edition + MSN26 model). The former Seashell tokens now resolve to on-dark values, so every section inverts from ONE place; layout and spacing are untouched, only colour + background move. CSS custom properties resolve order-independently, so forward references to the on-dark set below are valid. The single Seashell LIGHT band (the partners marquee) is restored explicitly via --seashell-light-band. */ --seashell: var(--background); /* body base = Granat ERA #061c38 */ --seashell-alt: var(--rt-charcoal); /* alternate bands = #0a2d58 */ --card: var(--rt-charcoal); /* cards = #0a2d58 */ --ink: var(--on-dark-primary); /* headings = #ffffff */ --ink-soft: var(--on-dark-secondary); /* body copy = white 72% */ --ink-muted: var(--on-dark-muted); --ink-faint: var(--on-dark-faint); /* GOLD FRAME LAW (Director 2026-08-03, Alex: "frame border golden"). These two tokens ARE every frame and every divider on the dark surface: card borders, band top/bottom rules, and the 1px grid-gap FIELD behind the mosaic grids (.trust-grid / .concept-facts / .products) whose gap paints the row dividers of the spec table. They resolved to rgba(255,255,255,0.08/0.05) , the "dim neutral grey" in the client's screenshot. Repointing them at the existing gold alphas turns every frame + rule gold from ONE place, with no new hex and no per-selector sweep. 45% resting keeps a hairline from reading heavy across ~30 cards at once; full-brightness gold stays reserved for the hover / featured convention the sheet already uses (--rt-gold-60 on hover, --rt-gold-bright on the featured card). */ --line-warm: var(--rt-gold-45); /* frames + primary rules on dark */ --line-warm-soft: var(--rt-gold-25); /* secondary in-card row rules on dark */ --gold-ink: var(--rt-gold-bright); /* light-on-dark gold #ddc074, full brightness */ --seashell-92: var(--era-navy-92); /* nav-scrolled / arrow glass = dark translucent */ --seashell-light-band: #fff5ee; /* the ONE Seashell light band (partners marquee) */ /* Gold / red derivatives (consumed via var() only) */ --rt-gold-bright: #ddc074; --rt-gold-04: rgba(197, 165, 90, 0.04); --rt-gold-08: rgba(197, 165, 90, 0.08); --rt-gold-12: rgba(197, 165, 90, 0.12); --rt-gold-25: rgba(197, 165, 90, 0.25); --rt-gold-45: rgba(197, 165, 90, 0.45); --rt-gold-60: rgba(197, 165, 90, 0.6); --rt-red-12: rgba(227, 27, 35, 0.12); --rt-red-dim: #b8161d; --on-dark-alert: #ff6b6b; /* lightened brand-red: keeps "required/alert" reading, clears WCAG AA on charcoal */ /* On-dark set (accent bands + canonical footer). INK LAW (Alex 2026-07-31, SAR-2026-07-31-gray-on-obsidian): on ANY dark surface only two ink colours exist, pure #ffffff for text at every level, and gold --rt-gold-bright for accents/meta. NO grey token, NO sub-white rgba on dark. Hierarchy comes from size / weight / letter-spacing, never from graying colour. Light (.band-seashell) bands force their own dark ink and are unaffected. */ --on-dark-primary: #ffffff; --on-dark-secondary: #ffffff; --on-dark-muted: #ffffff; --on-dark-faint: var(--rt-gold-bright); /* meta labels -> gold accent, never grey */ --line-soft: rgba(255, 255, 255, 0.08); --era-navy-92: rgba(6, 28, 56, 0.92); --era-navy-70: rgba(6, 28, 56, 0.7); --era-navy-00: rgba(6, 28, 56, 0); /* Hockney accent palette (Alex-approved 2026-07-28: dark base + Hockney accents). David Hockney's signature hues, applied as ACCENTS on the granat ERA canvas, section rules, dividers, link hover/focus, small graphic pops, and carried by the illustration imagery. NEVER body text on dark: dark-surface-legibility holds (headings stay #fff, body white/72%, gold --rt-gold-bright #ddc074 at full brightness). Restraint is the brief: 1-2 pops per surface, max. The artist NAME lives only in human editorial copy and the tribute credit, never in a token name, prompt, filename, alt-text, or metadata. */ --hk-cerulean: #2e9cca; /* pool / Thames water */ --hk-cobalt: #0047ab; /* deep water / night sky */ --hk-viridian: #3aa17e; /* park green / foliage */ --hk-coral: #ea7e5d; /* sunlit apricot / terracotta */ --hk-rose: #c94f6d; /* Yorkshire rose / magenta */ --hk-sand: #e8c98a; /* warm sand / low sun */ --hk-chartreuse: #8fa31e; /* rare zing accent, sparing */ /* Photo-safe lifts of two palette hues, for type set directly on a bright photograph. --photo-scrim is transparent by CANON decision, so accents on a band are measured against the image itself, not against granat ERA. Raw cerulean measured 3.47:1 and raw rose 2.08:1 on the bar photograph, against a shipped sibling standard of 5.65:1 and 4.31:1. These tints restore that standard while keeping the same two hues. Do NOT use them on dark solid surfaces, where the raw tokens are correct and stronger. */ --hk-cerulean-on-photo: #86c6e0; /* 5.77:1 on the bar photograph */ --hk-cerulean-on-navy: #3aa3d0; /* 4,79:1 na granacie #0a2d58 (surowy cerulean daje tam 4,40:1) */ --hk-rose-on-photo: #e4a7b6; /* 4.53:1 on the bar photograph */ /* Added 2026-08-17 for the tribute hero's artist name. Raw --hk-coral (#ea7e5d) computes to only ~4.28:1 against the worst-case granat ERA-70 plate over that bright illustration, i.e. under the 4.5 floor, so it needed the same treatment the two lifts above already had. Built with the identical transform they use: preserve hue and saturation exactly, raise lightness only. #ea7e5d is hsl(14.0, 77.0%, 64.1%) -> #f2ac97 is hsl(13.9, 77.8%, 77.1%). Its relative luminance (0.5062) also lands within 0.5% of --hk-cerulean-on-photo (0.5082), so the two read as a matched pair when set side by side, which is exactly how the tribute hero uses them. Measured off rendered pixels on the tribute hero, against the LIGHTEST pixel found behind the word (worst case for light type): 6.86:1 at 1440x900 and 6.97:1 at 375x812. Like its siblings, do NOT use it on a dark solid surface, where raw --hk-coral is correct and stronger. */ --hk-coral-on-photo: #f2ac97; /* 6.86:1 / 6.97:1 on the tribute hero plate */ /* Low-alpha washes for rules / hover glows on dark (legibility-safe) */ --hk-cerulean-16: rgba(46, 156, 202, 0.16); --hk-cerulean-38: rgba(46, 156, 202, 0.38); --hk-coral-16: rgba(234, 126, 93, 0.16); --hk-coral-38: rgba(234, 126, 93, 0.38); --hk-rose-16: rgba(201, 79, 109, 0.16); /* The signature 4-stop Hockney wash: water -> green -> sand -> coral. Section dividers and accent rules only; a thin band, never a full section background (dark stays king). */ --hk-wash: linear-gradient(90deg, var(--hk-cerulean), var(--hk-viridian), var(--hk-sand), var(--hk-coral)); /* CANON:photo-scrim-tokens */ /* NO DARK IMAGE OVERLAYS. Superseding the 2026-07-16 flat 0.55/0.20 photo scrim: Alex 2026-08-03 ruled no dark overlay on any image, the hero video included, so every photograph shows clean. Both tokens are now transparent and every ::before/::after that references them paints nothing. Copy that used to lean on the veil keeps its legibility from a LOCAL text-shadow / text-plate on the COPY, never a full-frame wash over the picture (see the .hero-on-banner, .illus-caption, .venue-content, .band-photo shadow rules). saturate() stays: it adds colour, not darkness. */ --photo-scrim: transparent; --photo-scrim-light: transparent; --photo-saturate: 1.3; /* /CANON:photo-scrim-tokens */ /* Inter, chosen for small-size legibility (taller x-height, more open apertures than Geist at 12-14px). Geist Mono retired: it was used on 41 label/meta sites, none of them numeric, where monospace + uppercase + wide tracking made short text slow to read (Alex, round-2 feedback). --font-mono is kept as an alias so every call site flips in one line. */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: var(--font-sans); /* Editorial serif for the tribute page display heading (B8, 2026-07-29): a refined system-serif stack, no extra webfont load. */ --font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif; --ui-ease: 180ms ease; /* Card/box corner radius (Alex 2026-08-03: "rounded text boxes, as we had for MSN26"). Value matches MSN26's own card standard (agenda.css:177, gallery.css:33). One shared token for the whole card/box family so any future adjustment is a single edit; buttons/pills/fields keep their own smaller/pill radii on purpose (see LIVE-REVIEW BATCH block below). */ --radius-card: 16px; /* Companion scale (Director 2026-08-03, Alex: "text box round", ALL boxes). One token per corner family so the whole site re-tunes from three edits: control = buttons + form fields; pill = chips / badges / tags / subnav items. */ --radius-control: 10px; --radius-pill: 999px; } * { margin: 0; padding: 0; box-sizing: border-box; } /* WYSOKOSC PASKA. Alex 2026-08-14: pasek urosl 64 -> 76, zeby wordmark mogl urosnac 112 -> 140 bez przyciecia. Alex 2026-08-24: pasek "dwa pietra", znak ERA26 zdecydowanie wiekszy plus podpis "forum branzy nieruchomosci". DWA TOKENY, NIE JEDEN, I TO JEST ISTOTA TEJ ZMIANY. Pasek kurczy sie na scrollu (gorne pietro znika w CALOSCI), wiec jedna liczba nie moze obsluzyc obu zastosowan naraz: --nav-h ZYWA wysokosc paska, 112 px w spoczynku, 62 px po zwinieciu. Uzywaja jej rzeczy PRZYKLEJONE DO DOLNEJ KRAWEDZI paska: `top:` podpaska msn-subnav na siedmiu podstronach, sticky .ke-head, scroll-padding dla kotwic. Gdyby zostala stala, po zwinieciu paska podpasek wisialby 50 px NIZEJ niz pasek i zostalaby po nim dziura. To dokladnie ta usterka, ktora na Insights przezyla przeglad, bo czytano `top` z CSS zamiast zmierzyc, gdzie pasek RENDERUJE SIE naprawde. --nav-h-rest STALA rezerwa w ukladzie. 78 px od 2026-08-26 (bylo 112, czyli 34 px gornego pietra + 78 px paska; pietro zdjete). Uzywaja jej `padding-top` i `margin-top`, ktore odsuwaja tresc od paska. Gdyby szly za zywa wysokoscia, cala strona podskakiwalaby o 50 px przy kazdym zwinieciu paska. Podzial idzie po NAZWIE WLASCIWOSCI: `top:` bierze zywa, `padding-top:` i `margin-top:` biora stala. */ :root { /* 0px od 2026-08-26: gorne pietro nawigacji zdjete na polecenie Alexa. Token ZOSTAJE (a nie znika), bo --nav-h, scroll-margin sekcji i offset paska podrzednego licza sie z niego. Wyzerowanie tutaj przenosi zmiane na wszystkie te miejsca naraz; skasowanie tokenu rozsypaloby calc(). */ --nav-tier-top-h: 0px; --nav-row-h: 78px; /* wlasciwy pasek: znak + menu */ --nav-h: calc(var(--nav-tier-top-h) + var(--nav-row-h)); /* zywa */ --nav-h-rest: 78px; /* stala rezerwa; 112 -> 78 po zdjeciu gornego pietra */ } /* Zwiniecie jest sterowane klasa .scrolled, ktora main.js sam juz zaklada na #nav przy scrollY > 24. Nie dokladam nowego nasluchu scrolla; `:has()` tylko podnosi ten stan do :root, zeby tokeny mogly za nim isc. Bez wsparcia :has() pasek po prostu sie nie kurczy, co jest degradacja lagodna, a nie awaria. */ html:has(#nav.scrolled):not(:has(.msn-subnav)) { --nav-tier-top-h: 0px; --nav-row-h: 62px; } /* DLACZEGO PODSTRONY Z PODPASKIEM NIE KURCZA PASKA. Zmierzone 2026-08-24 na /canvases: podpasek ma `position: sticky` i poprawne `top: 62px`, a renderuje sie na y4, czyli 58 px za wysoko, SCHOWANY ZA paskiem. Przyczyna nie lezy w wartosciach: silnik nie przelicza ponownie zaczepienia elementu, ktory JUZ jest przyklejony, kiedy jego `top` zmieni sie w locie. Nasz `top` jedzie na zmiennej, ktora zmienia sie dokladnie w momencie zwiniecia paska, wiec podpasek zostaje z zaczepieniem policzonym dla starej wartosci. Sprawdzone tez z `overflow-x: clip` na , ktore usunelo osobna, realna usterke z kontenerem przewijania, ale tej nie ruszylo. Zamiast walczyc z silnikiem: na siedmiu podstronach niosacych podpasek pasek ZOSTAJE pelny (112 px), wiec `top` podpaska nigdy sie nie zmienia i podpasek przylega bez szpary w kazdym stanie. Strona glowna, ktora podpaska nie ma, kurczy sie normalnie do 62 px. Roznica jest niewidoczna dla odwiedzajacego, bo nie porownuje on paskow miedzy podstronami, a przyklejenie dziala wszedzie. Weryfikacja nalezy do POMIARU RENDERU (`sub.top - nav.bottom` w kilku pozycjach scrolla), nie do odczytu `top` z CSS: odczyt pokazywal 62 px i wygladal zdrowo przez caly czas trwania usterki. */ html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h-rest); } body { background: var(--seashell); color: var(--ink-soft); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* `clip` zamiast `hidden`, poprawione 2026-08-24. `overflow-x: hidden` na robi z niego KONTENER PRZEWIJANIA, a wtedy kazdy `position: sticky` w srodku liczy swoj `top` wzgledem tego kontenera, nie wzgledem okna. Skutek byl mierzalny: podpasek na /canvases, /gallery i /partnerships mial poprawne `top: 62px`, a renderowal sie na y4, czyli 58 px za wysoko, schowany ZA paskiem nawigacji. Czytanie `top` z CSS pokazywalo stan zdrowy; dopiero pomiar realnego polozenia pokazal usterke. `overflow-x: clip` przycina tak samo, ale NIE tworzy kontenera przewijania, wiec przyklejanie znow liczy sie wzgledem okna. Usterka byla tu przed przemalowaniem, tylko wyzszy pasek uczynil ja widoczna. */ overflow-x: clip; } /* Site-wide orphan guard. Measured across home/invite/speakers/venue at 375 and 1440: 13 paragraphs ended on a single stranded word. `pretty` is the right tool rather than `balance` here because it only adjusts the last few lines, so it is safe on long body copy (browsers decline to balance blocks past a handful of lines, which is exactly where the orphans were). Result: 13 single-word orphans -> 1. Two-word endings rise, which is ordinary typography, not a defect. Short blocks that need full balancing keep their own more-specific rule below (.hero-sub, .panel-block h3, .ticket-benefits li, .group-nudge span). */ p, li { text-wrap: pretty; } img { display: block; max-width: 100%; } a { color: inherit; } .rt-shell { width: min(1160px, calc(100vw - 2.5rem)); margin: 0 auto; } /* ---------- Typography primitives ---------- */ /* Event-name emphasis. Wraps every prose occurrence of the event name (`ERA26`) across every page. `color: inherit` is LOAD-BEARING, not decoration: several rules in this sheet recolour `strong`/`b` (e.g. `.band-seashell strong { color:#061c38 }`, the on-dark gold accent rules), and the name appears on dark bands, on Seashell bands, inside ``, and inside legal prose. Inheriting means it always takes the colour of the sentence it sits in and can never pick up a stray accent. `letter-spacing: inherit` for the same reason: the name sits inside tracked uppercase meta lines as well as normal body copy. Weight is the ONLY thing this class asserts. */ .brand-name { font-weight: 700; color: inherit; letter-spacing: inherit; } .eyebrow { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); display: inline-block; } .eyebrow-rule { display: block; width: 0; height: 2px; margin-top: 0.7rem; /* Hockney wash: the site-wide palette signature, carried on a small accent rule under every section eyebrow (dark base + Hockney accents, Alex 2026-07-28). Not text -> no legibility cost; systemic -> every section reads Hockney. */ background: linear-gradient(90deg, var(--hk-cerulean), var(--hk-viridian), var(--hk-sand), var(--hk-coral), transparent); transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms; } .revealed .eyebrow-rule { width: 96px; } /* Hockney-accent inline link, tribute cross-links (concept -> tribute, footer). Interactive link, not body text, so the dark-surface accent rule is satisfied. ODCIEN ZMIENIONY 2026-08-24 RAZEM Z PRZEMALOWANIEM NA GRANAT. Surowy --hk-cerulean #2e9cca mierzyl ~6,1:1 na obsydianie #0f0f0f, ale granat #0a2d58 jest JASNIEJSZY, wiec ten sam odcien spadl do 4,40:1 i przestal spelniac AA. Zmierzone na renderze /partnerships, nie wyliczone z tokenow. --hk-cerulean-on-navy to ten sam akcent podniesiony do 4,79:1 na granacie. Wariantowanie per powierzchnia jest konwencja tego arkusza: istnieja juz --hk-cerulean-on-photo dla fotografii i --hk-cerulean-deep dla jasnych tel. */ .hk-link { color: var(--hk-cerulean-on-navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--hk-cerulean-38); transition: color var(--ui-ease), border-color var(--ui-ease); white-space: nowrap; } .hk-link:hover, .hk-link:focus-visible { color: #6cc3e6; border-bottom-color: var(--hk-cerulean); } h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); margin: 1.1rem 0 1.2rem; text-wrap: balance; } h3 { color: var(--ink); font-weight: 600; letter-spacing: -0.01em; } section { padding: 5.5rem 0; position: relative; } .section-note { font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.01em; color: var(--ink-muted); margin-top: 1.6rem; } .section-lede { max-width: 58ch; color: var(--ink-soft); } /* ---------- Buttons ---------- */ /* RED RETIRED (Director 2026-08-03, Alex: "red must be changed to golden; red buttons to golden; for the whole website"). Gold is now the site-wide accent. The class name .btn-red is kept: it is referenced by ~40 HTML call sites and by :not(.btn-red) selectors, and other agents own the HTML this run. Ink MUST go dark: white on --rt-gold-bright measures ~1.8:1 (fail), dark granat ERA on it measures ~11.8:1 (AAA). This mirrors the pairing the CANON hero-CTA block already documents, so the whole site now shares one CTA look. The cream-band variant is overridden further down (gold-bright cannot separate from a cream page: ~1.6:1 edge contrast). AMENDED 2026-08-17 (Alex, on screenshot): red is reinstated for EXACTLY ONE surface, the `.marquee-band` bottom hairline on index.html ("that black line below marquee with partners is not needed; enough to ad a red line"). That is a 1px separator between two cream fields, where gold at 25% alpha measures ~1.3:1 and vanishes. It is a separator, never ink and never a CTA, so it does not contradict the ruling above. EVERY OTHER retired-red surface stays gold: .btn-red and its hover keep --rt-gold-bright / --rt-gold as set below, and --rt-red remains reserved elsewhere for form-error state only (.field-error, .field.invalid, .reg-status.error). Do not read the marquee exception as licence to reintroduce red anywhere else. */ .btn-red { display: inline-block; background: var(--rt-gold-bright); color: var(--background); font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.85rem 1.7rem; text-decoration: none; border: 1px solid var(--rt-gold-bright); cursor: pointer; transition: background var(--ui-ease), transform var(--ui-ease), box-shadow var(--ui-ease); } /* Hover = the deeper --rt-gold, identical to the convention the CANON hero-CTA block already ships (incl. its gold-tinted glow). */ .btn-red:hover { background: var(--rt-gold); border-color: var(--rt-gold); color: var(--background); transform: translateY(-2px); box-shadow: 0 8px 28px var(--rt-gold-25); } .btn-ghost { display: inline-block; color: var(--ink); font-size: 0.88rem; font-weight: 600; padding: 0.8rem 1.5rem; text-decoration: none; border: 1px solid var(--rt-gold-60); background: transparent; cursor: pointer; transition: border-color var(--ui-ease), background var(--ui-ease), transform var(--ui-ease); } .btn-ghost:hover { border-color: var(--rt-gold); background: var(--rt-gold-08); transform: translateY(-2px); } /* ============================================================ NAV - Seashell, blur on scroll ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--seashell); border-bottom: 1px solid transparent; transition: background var(--ui-ease), border-color var(--ui-ease), box-shadow var(--ui-ease); } .nav.scrolled { background: var(--seashell-92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--line-warm); box-shadow: 0 6px 24px rgba(26, 18, 16, 0.06); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-row-h); /* wlasciwy pasek; gorne pietro ma wlasna wysokosc */ transition: height 300ms ease-out; gap: 1rem; } /* Nav wordmark sized by WIDTH, not height (edit-in-place, not an appended override: a `height:26px` here plus a `width:96px` later would fight at equal specificity). The asset is the 2.1359:1 SVG lockup (viewBox 1555.5 x 728.25), swapped in from a 3.875:1 PNG. height:auto + object-fit:contain track whichever ratio the source carries, so it can never distort or letterbox. Arithmetic on the 76px bar: 140px wide -> 65.55px tall -> 10.45px clearance. Alex 2026-08-14: "the logo here is too small; increase to the height of the menu pasek; mid-aligned; same padding as Request an invite". 96 -> 98 was too timid to read as a change; 112px fills 81.9% of the bar height and is the point where the wordmark stops looking undersized next to the CTA. MEASURED IN BROWSER, not calculated (widths are the .nav-inner track): 1440px -> logo 140px, ~448-462px spare beside the nav links, no wrap 1024px -> logo 140px, ~271px spare, no wrap 900px -> logo 140px, ~148px spare, no wrap 760px -> flex ALREADY shrinks the logo to 131.6px, 16px spare, no wrap 721px -> flex shrinks it further to 92.6px, 16px spare, no wrap 720px -> breakpoint: burger mode, fixed 100px logo. Clean at 721/720/719. 375px -> the 100px mobile step, 207px clear of the 44x44 burger Re-measured in a headless browser 2026-08-14 after the 64->76 / 112->140 step. The previous numbers here claimed the logo held 140px flat to 760px; it does not, shrink begins at or before 760. Harmless (no overlap, no wrap, no h-scroll at any width) but the old figures were wrong and had already been trusted once. So the 720-760px band self-corrects by shrinking rather than breaking, which is why 112 is safe to hold rather than backing off to a smaller fixed width. Mid-alignment comes from `.nav-inner`'s align-items:center, so neither element needs its own vertical offset. Mobile 84px override lives in the MAIN NAV block at the end of this file. */ /* WYMIAROWANIE ODWROCONE 2026-08-24 — CALY AKAPIT POWYZEJ OPISUJE POPRZEDNI ZNAK I JEST JUZ NIEAKTUALNY. Tamten byl poziomym wordmarkiem 2,1359:1, wiec sterowanie SZEROKOSCIA mialo sens: wysokosc wychodzila sama i nie dotykala krawedzi paska. Znak ERA26 jest BLOKIEM 1,744:1 (450x258). Przy tych samych 140 px szerokosci mialby 80 px wysokosci, czyli WIECEJ niz caly 76-pikselowy pasek sprzed tej zmiany. Dlatego teraz wiedzie WYSOKOSC, a szerokosc wychodzi sama: to jedyny sposob, zeby znak nie przycial sie o krawedz paska niezaleznie od tego, jaka proporcje bedzie mial przyszly plik. 52 px na 78-pikselowym pietrze zostawia po 13 px swiatla u gory i u dolu. */ .nav-logo img { width: auto; height: 52px; object-fit: contain; display: block; transition: height 300ms ease-out; } html:has(#nav.scrolled) .nav-logo img { height: 36px; } /* ---- GORNE PIETRO: podpis marki + kontekst wydarzenia ---- Znika w CALOSCI na scrollu, nie blednie. Dzieki temu pasek schodzi ze 112 do 62 px, czyli nizej niz gdyby podpis tylko zgasl, a jednoczesnie --nav-h idzie za nim, wiec podpasek na podstronach nie zostaje w powietrzu. */ .nav-tier-top { height: var(--nav-tier-top-h); overflow: hidden; background: rgba(3, 17, 36, .92); border-bottom: 1px solid var(--rt-gold-25); transition: height 300ms ease-out, border-color 300ms ease-out; } .nav-tier-top-inner { height: var(--nav-tier-top-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: height 300ms ease-out; } /* .nav-podpis ZDJETY 2026-08-25 (powtarzal H1). Zostal sam kontekst. */ .nav-kontekst { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; line-height: 1; color: #fff; /* na ciemnym tylko biel albo zloto */ } html:has(#nav.scrolled) .nav-tier-top { border-bottom-color: transparent; } @media (max-width: 720px) { /* Podpis marki zdjety 2026-08-25, wiec kontekst wydarzenia NIE moze juz znikac na mobile - inaczej gorny pasek zostalby calkiem pusty. */ .nav-logo img { height: 44px; } html:has(#nav.scrolled) .nav-logo img { height: 32px; } } .nav-links { display: flex; align-items: center; gap: 1.6rem; } /* MSN26 type treatment ported IN PLACE (insights.css 111-341). Uppercase / tracked / 0.78rem. Colour stays --ink-soft, which resolves to pure #ffffff here; MSN26's own #e8e6e3 is off-white and would regress the dark-surface ink law. WHY IN PLACE, not appended: this selector is re-declared at equal specificity (0,2,1) inside the @media (max-width:720px) drawer block further down. An appended copy would sit AFTER that media block and win on source order, dropping the mobile drawer from 0.95rem to 0.78rem. Editing here keeps the drawer rule downstream and winning, exactly as the port intends. */ .nav-links a:not(.btn-red), .nav-links .nav-parent { font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; transition: color 0.3s ease; } /* Menu highlight gold, not red (Alex 2026-08-03: "menu items; same highlight in golden not red"). Resting link colour is untouched, only the highlight moves. Full-brightness gold: the nav bar is a dark surface, so ink law forbids a dimmed/mid-tone gold here. */ .nav-links a:not(.btn-red):hover, .nav-links a:not(.btn-red):focus-visible, .nav-links a:not(.btn-red)[aria-current="page"] { color: var(--rt-gold-bright); } /* CTA TYPOGRAPHY ONLY. Fill / border / ink are set by the CANON era26-hero-cta-gold-buttons block and are deliberately not restated here. Edited in place rather than appended: an appended copy would leave the 0.82rem below as a dead declaration overridden at equal specificity. */ /* Height parity with the wordmark (2026-08-14). line-height was previously UNDECLARED, so the button inherited the body value and computed ~37px against a 44.9px logo, an 8px mismatch that read as a misaligned bar. Both numbers are now pinned: font-size 0.72rem = 11.52px line-height 1.2 = 13.824px padding-y 1.06rem = 16.96px x2 = 33.92px border 1px x2 = 2.00px total = 49.74px, against the logo's 112px/2.1359 = 52.44px. The two are deliberately close but NOT identical: a button matched exactly to a wordmark's bounding box reads as taller than the wordmark, because the logo box includes its own internal whitespace while the button's box is all ink. 49.7 against 52.4 is what makes them look like a matched pair. Change either number and the other must be re-measured, which is why the arithmetic is here. Horizontal padding went 1.1rem -> 1.4rem to keep the pill in proportion at the taller height. Fill / border-colour / ink still belong to the CANON era26-hero-cta-gold-buttons block and are deliberately not restated. */ .nav-links .btn-red { padding: 1.06rem 1.4rem; font-size: 0.72rem; line-height: 1.2; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; } /* Multipage nav dropdown (Programme, with Speakers submenu) */ .nav-item { position: relative; display: flex; align-items: center; } .nav-parent { display: inline-flex; align-items: center; gap: 0.3rem; } .nav-caret { font-size: 0.58rem; line-height: 1; transition: transform var(--ui-ease); } .nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); } .nav-sub { position: absolute; top: 100%; left: 0; min-width: 190px; background: var(--seashell); border: 1px solid var(--line-warm); box-shadow: 0 12px 30px rgba(26, 18, 16, 0.12); padding: 0.35rem 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--ui-ease), transform var(--ui-ease), visibility var(--ui-ease); } .nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); } .nav-sub a { padding: 0 1.1rem !important; min-height: 44px; display: flex; align-items: center; white-space: nowrap; } /* Sub-pages have no hero, so their first section must clear the fixed 64px nav */ .subpage-main { padding-top: var(--nav-h-rest); } /* Bordered box + gold tap-highlight (MSN26 port). Edited in place: the previous `border: 0` and the port's `border: 1px` are the same property at the same specificity, so appending would leave a contradictory pair. */ .nav-burger { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); -webkit-tap-highlight-color: rgba(221, 192, 116, 0.2); touch-action: manipulation; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform var(--ui-ease), opacity var(--ui-ease); } .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ TICKER - Granat ERA market strip under the nav ============================================================ */ .ticker { position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99; height: 40px; background: var(--background); border-bottom: 1px solid var(--rt-gold-25); overflow: hidden; /* No edge-fade mask (Alex, round-2): the gradient dissolved the strip's text at both ends, which cost legibility for no design gain. */ } .ticker-row { display: flex; align-items: center; height: 100%; gap: 2.6rem; width: max-content; animation: tickerScroll 46s linear infinite; padding-left: 1rem; } .ticker:hover .ticker-row { animation-play-state: paused; } @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker-item { display: inline-flex; align-items: center; gap: 2.6rem; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; /* Dark band rule (SAR 2026-06-12): pure white, never muted */ color: var(--on-dark-primary); white-space: nowrap; text-decoration: none; } .ticker .tick-sep { color: var(--rt-gold-bright); font-size: 0.55rem; } .ticker-item.tick-cta { color: var(--rt-gold-bright); font-weight: 600; } a.ticker-item:hover { color: var(--rt-gold-bright); } /* ============================================================ HERO - copy ON the full-bleed banner (Alex, round-1 feedback). A local gradient scrim darkens the copy's band only (added post-QA; measured contrast was 1.65-2.56:1 against white text, under WCAG AA); the sky/skyline stay visible above and below. Dark band rule: all white + full-brightness gold, preserved (gold-bright accents moved to white on this specific banner only, where gold-on-golden-photo cannot pass contrast). ============================================================ */ .hero { padding-top: var(--nav-h-rest); /* nav bar, ticker removed */ background: var(--seashell); } .hero-eyebrow { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rt-gold-bright); } .hero h1 { /* Big display headline: spans most of the shell width, logo-to-menu (Alex 2026-08-03). Larger clamp + wider measure than the prior 4.6rem/17ch. */ font-size: clamp(2.5rem, 8.5vw, 7rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; color: var(--on-dark-primary); margin: 1.1rem 0 1.1rem; max-width: 24ch; text-wrap: balance; } /* CANON:era26-hero-cta-gold-h1 */ .hero-slide h1 .h1-red { color: var(--rt-gold-bright); } /* /CANON:era26-hero-cta-gold-h1 */ .hero-sub { font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--on-dark-primary); max-width: 46ch; /* Widow guard. The "...art as an asset class between them." slide dropped the single word "them." onto its own line at 375px. Measured on the deployed page, last-line word counts at 375: default [7,9,10,1], `pretty` [6,9,10,2], `balance` [5,7,7,8]. `pretty` only nudges the final line and still left two words, which trips the >=3-word floor; `balance` equalises all four lines and clears it. Also clean at 1440 ([7,10,10]). Chosen over a hard
because a
fixes one width and can break another, and over a markup fix because the slide is canon-locked. Degrades to normal wrapping where unsupported. */ text-wrap: balance; } .hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin: 1.5rem 0 1.9rem; font-family: var(--font-sans); font-size: 0.84rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rt-gold-bright); } .hero-meta .meta-dot { color: var(--on-dark-primary); } /* On this banner, gold-on-golden-photo is the same hue family as the sky, so gold-bright cannot reach 4.5:1 here even under the scrim. Use white to match the h1/sub already on this surface; --rt-gold-bright keeps its full brightness everywhere else on the site. */ .hero-on-banner .hero-eyebrow, .hero-on-banner .hero-meta { color: var(--on-dark-primary); } /* Banded hero (Alex + Domi 2026-08-14, variant A "Ledger rule"). Carries the approved interstitial treatment up into the partnerships hero so the page opens in the same system it continues in: four-colour block rule, white eyebrow, one headline word and one supporting phrase picked out. Contrast measured per line against the actual photograph, because --photo-scrim is transparent by CANON decision and the copy sits directly on the image: sand on the headline 9.23:1, cerulean on the supporting line 5.37:1, white eyebrow 6.06:1. All clear the 4.5:1 AA floor. */ .hero-banded .hero-rule { display: block; width: min(520px, 100%); height: 5px; /* auto side margins, not 0: .hero-on-banner is text-align:center at every width, so a left-flush rule reads as an orphan bar off to one side while the eyebrow, headline and button sit centred. The interstitial bands are left-aligned and keep margin:0 there. Caught on the rendered page. */ margin: 0 auto 1.1rem; border-radius: 2px; background: linear-gradient(90deg, var(--hk-cobalt) 0 25%, var(--hk-cerulean) 25% 50%, var(--hk-rose) 50% 75%, var(--hk-sand) 75% 100%); } .hero-banded h1 .t-a { color: var(--hk-sand); font-weight: 800; } /* MIEJSCOWA OSLONA POD NAPISEM HERO (partnerships, po wniesieniu kadru w tlo). Pomiar na renderze, tlo brane OBOK liter, nie przez nie, 90 percentyl jasnosci: nadtytul (biel) 6,26 prog 4,5 ok H1 linia 1 (biel) 5,03 prog 3,0 ok H1 linia 2 (zloto) 2,70 prog 3,0 ZA NISKI podtytul l.1 (biel) 6,48 prog 4,5 ok podtytul l.2 (blekit)3,86 prog 4,5 ZA NISKI Zlota linia „ktory sala zapamieta" i blekitne „w miare podpisywania umow" siedza dokladnie na rozjasnionej, ciepłej partii akwareli. NIE PRZYCIEMNIAM CALEGO KADRU. Zdjecie ma zostac widoczne - to jest twarda zasada dla tla fotograficznego. Zamiast tego elipsa cienia pod samym blokiem tekstu, wygaszona do zera przed krawedziami, wiec obraz po bokach i u gory zostaje nietkniety. */ .hero-banded { background: radial-gradient(ellipse 78% 66% at 50% 52%, rgba(6, 28, 56, 0.86) 0%, rgba(6, 28, 56, 0.70) 46%, rgba(6, 28, 56, 0.30) 66%, rgba(6, 28, 56, 0) 80%); padding-top: clamp(2rem, 4vw, 3.4rem); padding-bottom: clamp(2rem, 4vw, 3.4rem); } /* NAGLOWEK HERO NA STRONIE PARTNERSTWA - ZDECYDOWANIE MNIEJSZY (Domi, 2026-08-25: „zdecydowanie zmniejsz font"). Wspolna regula .hero h1 dochodzi do 7rem, co dla tej dwuliniowej frazy dawalo napis na pol ekranu. NIE WYMYSLAM NOWEJ SKALI. Biore te, ktora arkusz juz ma dla naglowkow podstron (.subpage-hero h1, clamp 1.9rem/4.4vw/3.1rem) - na desktopie to spadek z 7rem do 3.1rem, czyli o okolo 56 procent, a pismo zostaje w rodzinie rozmiarow serwisu zamiast byc jednorazowa wartoscia. ZAKRES: .hero-banded wystepuje WYLACZNIE na partnerships.html (sprawdzone grepem po wszystkich *.html), wiec ta regula nie rusza zadnego innego hero. */ .hero-banded h1 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); letter-spacing: -0.02em; line-height: 1.06; max-width: 26ch; } .hero-banded .hero-sub .t-b { color: var(--hk-cerulean-on-navy); font-weight: 700; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } /* On-banner ghost button: white on dark, gold on hover */ .btn-on-banner { display: inline-block; color: var(--on-dark-primary); font-size: 0.88rem; font-weight: 600; padding: 0.8rem 1.5rem; text-decoration: none; border: 1px solid var(--on-dark-primary); background: rgba(6, 28, 56, 0.18); cursor: pointer; transition: border-color var(--ui-ease), color var(--ui-ease), transform var(--ui-ease); } .btn-on-banner:hover { border-color: var(--rt-gold-bright); color: var(--rt-gold-bright); transform: translateY(-2px); } /* Full-bleed banner carrying the copy */ .hero-banner { position: relative; display: flex; align-items: center; min-height: clamp(640px, 92vh, 900px); overflow: hidden; border-bottom: 1px solid var(--rt-gold-45); background: var(--rt-charcoal); /* paint-before-image fallback */ } /* Descendant, not child: the hero is wrapped in a for the art-directed portrait crop, so `> img` would no longer match. */ .hero-banner img { position: absolute; inset: 0; width: 100%; height: 116%; object-fit: cover; object-position: center 30%; will-change: transform; /* Pairs with --photo-scrim: the veil desaturates, this gives the colour back. Luminance-preserving, so it costs no contrast. */ filter: saturate(var(--photo-saturate)); } /* Hero video loop (injected by js/hero-video.js after window load). Sits at z0: above the poster , beneath the CANON photo-scrim (::before, z1) and the copy (.hero-on-banner, z2) so legibility holds. Poster stays visible until 'playing' adds .is-playing (Safari-safe). */ /* CANON:era26-hero-video-css (TODO(canon): inherited shape from the donor. NOT yet locked for ERA26 - no manifest entry and no baseline exist in this repo. Run canon-alex W3 before treating this as immutable.) */ .hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 116%; object-fit: cover; object-position: center 30%; opacity: 0; transition: opacity 600ms ease; filter: saturate(var(--photo-saturate)); pointer-events: none; } .hero-video.is-playing { opacity: 1; } /* /CANON:era26-hero-video-css */ /* Canonical photo scrim, flat and whole-frame. See --photo-scrim. Superseded a 7-stop vertical gradient (0.20 to 0.72 to 0.08) that shaped itself around the copy band. It held AA at 6.44:1, roughly 2x the 4.5:1 floor, and paid for that unused margin by smearing 0.58-0.72 across 82% of the frame: the band read as a strip and the photograph read as gloom. Flat 0.55 measures 4.69:1 desktop / 5.13:1 mobile against the p95 backdrop with the copy hidden. Honest note: the mean frame is 0.98x / 0.90x of the old gradient's, so this is not a brighter hero, it is an evenly lit one. The copy band gains ~102%; the open sky gives back ~43% and the skyline at the foot of the towers ~62%. That trade was made deliberately. */ /* CANON:photo-scrim-hero */ .hero-banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--photo-scrim); pointer-events: none; } /* /CANON:photo-scrim-hero */ .hero-on-banner { position: relative; z-index: 2; padding: clamp(3rem, 9vh, 5.5rem) 0; /* Legibility text-shadow, paired with the .hero-banner::before scrim above */ text-shadow: 0 2px 26px rgba(6, 28, 56, 0.5), 0 1px 3px rgba(6, 28, 56, 0.4); } .hero-on-banner .hero-cta-row { text-shadow: none; } .hero-banner .banner-caption { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 0.55rem 1rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rt-gold-bright); background: var(--era-navy-70); backdrop-filter: blur(4px); border-top: 1px solid var(--rt-gold-25); border-right: 1px solid var(--rt-gold-25); } /* Golden-hour sweep lives on the image band only */ .hero-banner .banner-sweep { position: absolute; /* Oversized so the ±16% transform never reveals a hard edge (clipped by .hero-banner overflow:hidden). */ inset: -12% -55%; pointer-events: none; background: linear-gradient(105deg, transparent 42%, var(--rt-gold-04) 47%, var(--rt-gold-12) 50%, var(--rt-gold-04) 53%, transparent 58%); opacity: 0.75; /* Compositor-only sweep: animate transform (not background-position) and drop mix-blend-mode:screen. Screen-blending an animated gradient over the moving hero video forced a per-frame backdrop-read + full-region repaint, which stuttered the video. Transform runs entirely on the GPU layer. */ will-change: transform; transform: translate3d(-16%, 0, 0); animation: goldSweep 8s ease-in-out infinite; } @keyframes goldSweep { 0% { transform: translate3d(-16%, 0, 0); } 55% { transform: translate3d(16%, 0, 0); } 100% { transform: translate3d(16%, 0, 0); } } /* Staged masthead entrance */ .stage { opacity: 0; transform: translateY(22px); animation: stageIn 700ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes stageIn { to { opacity: 1; transform: translateY(0); } } .d1 { animation-delay: 100ms !important; } .d2 { animation-delay: 260ms !important; } .d3 { animation-delay: 440ms !important; } .d4 { animation-delay: 620ms !important; } .d5 { animation-delay: 800ms !important; } /* ============================================================ SUBPAGE TEASERS - multipage hub (granat ERA cards, gold accents) ============================================================ */ .subpage-teasers { padding: 5.5rem 0; } .subpage-teasers .section-header { margin-bottom: 2.4rem; } /* Even card counts split into equal rows (Alex 2026-07-31: 6 -> 3+3, never 4+2). Fixed 3-up desktop grid; 6 cards wrap to two balanced rows of three. */ .teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } @media (max-width: 860px) { .teaser-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .teaser-grid { grid-template-columns: 1fr; } } .teaser-card { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.5rem 1.5rem 1.35rem; background: var(--rt-charcoal); border: 1px solid rgba(221, 192, 116, 0.18); border-top: 2px solid var(--rt-gold-bright); text-decoration: none; transition: transform var(--ui-ease), border-color var(--ui-ease), background var(--ui-ease); } .teaser-card:hover { transform: translateY(-3px); background: #0f3565; border-color: rgba(221, 192, 116, 0.5); } .teaser-card:focus-visible { outline: 2px solid var(--rt-gold-bright); outline-offset: 3px; } .teaser-card-k { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--on-dark-primary); } .teaser-card-d { font-size: 0.92rem; line-height: 1.5; color: var(--on-dark-secondary); } .teaser-card-cta { margin-top: 0.35rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rt-gold-bright); } /* ============================================================ SEASHELL (light) BAND - the S in the S/O/I rhythm; dark ink text ============================================================ */ .band-seashell { background: var(--seashell-light-band); color: #061c38; } .band-seashell h1, .band-seashell h2, .band-seashell h3, .band-seashell h4 { color: #061c38; } .band-seashell p, .band-seashell li, .band-seashell dd, .band-seashell dt, .band-seashell .section-lede, .band-seashell .trust-sla { color: #10233f; } /* Dark ink for every descriptive / body text class (the tokens now resolve to white on dark; on a light band they must be forced dark or they vanish). */ .band-seashell .section-note, .band-seashell .act p, .band-seashell .panel-desc, .band-seashell .product p, .band-seashell .register-meta, .band-seashell .practical-note, .band-seashell .practical-list li, .band-seashell .pl-sub, .band-seashell .field-hint, .band-seashell .partner-cta-note, .band-seashell .edition-building, .band-seashell .fact-row dd .dd-sub, .band-seashell .concept-copy p, .band-seashell .trust-cell p, .band-seashell .ticket-benefits li, .band-seashell .member-terms p, .band-seashell .group-nudge, .band-seashell .tba-name, .band-seashell .chip, .band-seashell .panel-detail p, .band-seashell .reg-status, .band-seashell .consent, .band-seashell .rstep, .band-seashell .event-strip, .band-seashell .event-colophon { color: #10233f; } /* Gold (deep, legible-on-light) for every meta / label / eyebrow. */ .band-seashell .eyebrow, .band-seashell .illus-eyebrow, .band-seashell .trust-cell h3, .band-seashell .act-no, .band-seashell .panel-no, .band-seashell .edition-no, .band-seashell .act-time, .band-seashell .series-hint, .band-seashell .series-ai-note, .band-seashell .mod-tag, .band-seashell .fact-row dt, .band-seashell .practical-col h3, .band-seashell .pl-key, .band-seashell .ticket-price-note, .band-seashell .member-terms .mt-label, .band-seashell .product-kicker, .band-seashell .panel-detail-label, .band-seashell .tba-role, .band-seashell .reg-note, .band-seashell .field label, .band-seashell .marquee-label, .band-seashell .edition-stats, .band-seashell .edition-stats .ht, .band-seashell .register-meta strong, .band-seashell .register-steps .rstep-no, .band-seashell .practical-list .pl-key { color: #8a6a1e; } /* Bold defined terms + white-token headings -> dark on a light band. .band-seashell .trust-cell p strong is listed explicitly because .trust-cell p strong (line ~813, specificity 0,1,2) outranks the plain .band-seashell strong (0,1,1) rule below on element-count alone, so the dark-ink override must match/beat that specificity to actually win. */ .band-seashell strong, .band-seashell .trust-cell p strong { color: #061c38; } .band-seashell .edition-city, .band-seashell .ticket-tier, .band-seashell .ticket-price, .band-seashell .fact-row dd, .band-seashell .keynote-moment h3, .band-seashell .panel-block h3, .band-seashell .panel-detail h4, .band-seashell .venue-content h2 { color: #061c38; } .band-seashell .eyebrow-rule { background: rgba(138,106,30,0.4); } .band-seashell a:not(.btn-red):not(.nav-cta):not(.teaser-card):not(.hk-link):not(.wiz-link):not(.wiz-cta) { color: #8a6a1e; } /* .wiz-link / .wiz-cta wylaczone 2026-08-25: .wizytowka to CIEMNA wyspa na jasnym pasmie, wiec zloty atrament dla jasnego tla dawal na niej 3.08:1. Kolory karty siedza w bloku WIZYTOWKA na koncu pliku. */ /* Cards on a light band become light cards (no black boxes, Alex 2026-07-31 item 11). */ .band-seashell .trust-cell, .band-seashell .fact-row, .band-seashell .product, .band-seashell .panel-block, .band-seashell .ticket-card, .band-seashell .practical-col, .band-seashell .keynote-moment, .band-seashell .edition-card, .band-seashell .chip, .band-seashell .member-terms, .band-seashell .reg-form, .band-seashell .group-nudge, .band-seashell .nominate-cta { background: #fffaf6; } .band-seashell .trust-cell, .band-seashell .concept-facts, .band-seashell .trust-grid, .band-seashell .fact-row, .band-seashell .product, .band-seashell .panel-block, /* Gold frame law, LIGHT-BAND variant. The dark side's --rt-gold-45 is a light gold and washes out on cream, so the light band keeps its own deep gold (#8a6a1e, the light-band gold ink already used throughout this block) and is lifted 0.22 -> 0.40. 0.40 is not a new shade: it is the alpha already used by .band-seashell .eyebrow-rule just below. This leaves 0.55 free as the hover step, which .band-seashell .teaser-card:hover already uses. */ .band-seashell .ticket-card, .band-seashell .practical-col { border-color: rgba(138,106,30,0.4); } .band-seashell .trust-grid, .band-seashell .concept-facts, .band-seashell .products { background: rgba(138,106,30,0.4); } .band-seashell .trust-cell:hover, .band-seashell .fact-row:hover, .band-seashell .product:hover { background: #fff; } .band-seashell .teaser-card { background: #fffaf6; border-color: rgba(138,106,30,0.22); border-top-color: #b9932f; } .band-seashell .teaser-card:hover { background: #fff; border-color: rgba(138,106,30,0.55); } .band-seashell .teaser-card-k { color: #061c38; } .band-seashell .teaser-card-d { color: #2a4a72; } .band-seashell .teaser-card-cta { color: #8a6a1e; } /* ============================================================ HERO SLIDER (clean), 4-image cross-fade, NO text overlay, NO scrim (Alex 2026-07-31). The photograph is shown clean; the event masthead sits BELOW on solid granat ERA ground, never overlaid on the image. ============================================================ */ .hero-slider { position: relative; margin-top: var(--nav-h-rest); /* nav bar, ticker removed */ min-height: clamp(360px, 56vh, 640px); overflow: hidden; background: var(--rt-charcoal); border-bottom: 1px solid var(--rt-gold-45); } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1400ms ease; will-change: opacity; } .hero-slide.is-active { opacity: 1; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; filter: saturate(var(--photo-saturate)); } .hero-slider-dots { position: absolute; left: 0; right: 0; bottom: 1.1rem; z-index: 3; display: flex; gap: 0.5rem; justify-content: center; } .hero-slider-dot { width: 30px; height: 3px; padding: 0; border: 0; cursor: pointer; background: rgba(255,255,255,0.45); transition: background var(--ui-ease); } .hero-slider-dot.is-active { background: var(--rt-gold-bright); } .hero-slider-dot:focus-visible { outline: 2px solid var(--rt-gold-bright); outline-offset: 3px; } /* Event masthead, solid granat ERA ground beneath the slider (no overlay). */ .hero-mast { background: var(--background); padding: clamp(2.4rem,5vh,3.6rem) 0 clamp(2.6rem,5vh,3.4rem); } .hero-mast .hero-eyebrow { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rt-gold-bright); } .hero-mast h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: #ffffff; margin: 0.9rem 0; max-width: 20ch; text-wrap: balance; } .hero-mast h1 .h1-red { color: var(--rt-gold-bright); } .hero-mast .hero-sub { font-size: clamp(1rem,1.6vw,1.18rem); color: #ffffff; max-width: 52ch; } .hero-mast .hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin: 1.4rem 0 1.7rem; font-size: 0.84rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rt-gold-bright); } .hero-mast .hero-meta .meta-dot { color: #ffffff; } .hero-mast .hero-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } /* Tribute portrait (CC-BY photo of the honoured painter), constrained, gold-framed */ .tribute-portrait { max-width: 420px; margin: 2rem 0 0; } .tribute-portrait img { width: 100%; height: auto; border: 1px solid var(--rt-gold-45); } .tribute-portrait figcaption { margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.03em; color: var(--rt-gold-bright); line-height: 1.5; } .tribute-portrait figcaption a { color: var(--rt-gold-bright); text-decoration: underline; } /* ============================================================ BAND LAW (Alex 2026-07-31): every section declares its band type. Never two granat ERA adjacent, never two photo adjacent; light bands force their own dark ink (see .band-seashell above). ============================================================ */ .band-granat ERA { background: var(--background); } /* Content-section band-photo (inherited O2/O3 treatment): a full-bleed flat-pop illustration BEHIND an entire content section (not just a masthead strip like .subpage-hero below). Same canonical whole-frame veil contract as .illus-band.has-copy: --photo-scrim (0.55) is calibrated to hold WCAG AA for pure-white body copy sitting DIRECTLY on the photo, no gradient plate needed. Content children get position:relative + z-index so they paint above the absolutely-positioned image + scrim layer. */ .band-photo { position: relative; overflow: hidden; background: var(--rt-charcoal); border-top: 1px solid var(--rt-gold-25); border-bottom: 1px solid var(--rt-gold-25); } .band-photo::before { /* Hockney wash top-edge, matching .illus-band / .subpage-hero */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--hk-wash); z-index: 3; pointer-events: none; } .band-photo-img { position: absolute; inset: 0; z-index: 0; } .band-photo-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(var(--photo-saturate)); } .band-photo-img::after { content: ""; position: absolute; inset: 0; background: var(--photo-scrim); } .band-photo > .rt-shell, .band-photo > .marquee-band { position: relative; z-index: 2; } /* Subpage image hero (band-photo): a full-bleed photo banner heading each subpage (Alex 2026-07-31 item 10). White ink on a LOCAL text plate only, never a full-frame dark scrim. */ .subpage-hero { position: relative; margin-top: var(--nav-h-rest); min-height: clamp(300px, 44vh, 470px); display: flex; align-items: flex-end; overflow: hidden; background: var(--rt-charcoal); border-bottom: 1px solid var(--rt-gold-45); } .subpage-hero > img, .subpage-hero > picture { position: absolute; inset: 0; z-index: 0; } .subpage-hero > picture img, .subpage-hero > img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; filter: saturate(var(--photo-saturate)); } /* Hockney wash top-edge, matching the illustration bands */ .subpage-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--hk-wash); z-index: 3; pointer-events: none; } .subpage-hero-inner { position: relative; z-index: 2; width: min(1160px, calc(100vw - 2.5rem)); margin: 0 auto; padding: clamp(1.6rem,4vh,2.6rem) 0 clamp(1.4rem,3.5vh,2.2rem); } /* Local plate: legibility behind the copy ONLY, fades out to the right */ .subpage-hero-plate { display: inline-block; background: linear-gradient(90deg, rgba(6, 28, 56,0.82), rgba(6, 28, 56,0.6) 68%, rgba(6, 28, 56,0)); padding: 1.1rem 4rem 1.2rem 1.2rem; } .subpage-hero .hero-eyebrow { color: var(--rt-gold-bright); font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .subpage-hero h1 { color: #ffffff; font-size: clamp(1.9rem,4.4vw,3.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; margin: 0.5rem 0 0; max-width: 22ch; } .subpage-hero .subpage-hero-sub { color: #ffffff; margin-top: 0.5rem; max-width: 50ch; font-size: 0.98rem; } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); } .reveal.revealed { opacity: 1; transform: translateY(0); } .reveal[data-stagger="1"] { transition-delay: 90ms; } .reveal[data-stagger="2"] { transition-delay: 180ms; } .reveal[data-stagger="3"] { transition-delay: 270ms; } .reveal[data-stagger="4"] { transition-delay: 360ms; } .reveal[data-stagger="5"] { transition-delay: 450ms; } .reveal[data-stagger="6"] { transition-delay: 540ms; } /* No-JS fallback for the reveal system. The rule above starts every revealed block at opacity 0; js/main.js clears it by adding `.revealed` from an IntersectionObserver. With scripting off that observer never runs, so every page body stayed invisible. The site's only