.
============================================================ */
.field-divider {
position: relative;
display: block;
width: min(240px, 40%);
height: 7px;
margin: 1.1rem auto 0;
border: 0;
border-top: 1px solid var(--polo-gold);
border-bottom: 1px solid var(--polo-gold);
background: transparent;
opacity: 0.9;
}
/* Center chukker mark on the divider — engraved detail */
.field-divider::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 5px;
height: 5px;
transform: translate(-50%, -50%) rotate(45deg);
background: var(--polo-gold);
}
/* Full-width variant between major sections */
.field-divider--wide {
width: min(720px, 82%);
}
/* Section heading pattern: centered burgundy h2 + divider under */
.section-header {
text-align: center;
}
.section-header .section-title { color: var(--polo-burgundy); }
.section-header .field-divider { margin-top: 1.1rem; }
/* ============================================================
06 · NAVIGATION — stays DARK (deep green) so the
white-red-i RealTimes logo sits correctly.
============================================================ */
.nav {
background: rgba(20, 43, 33, 0.92); /* --polo-green-deep glass */
-webkit-backdrop-filter: blur(18px) saturate(1.2);
backdrop-filter: blur(18px) saturate(1.2);
border-bottom: 1px solid var(--polo-gold-soft);
}
/* Event name lockup next to the RealTimes logo */
.nav-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
}
.nav-logo-event {
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
/* Dark-surface legibility (D3 chain, 2026-07-16): the lockup was 0.85rem
regular in mid gold (#c5a55a) — small, thin, muted on the near-black
green bar. Now: larger, semibold, brightest gold token, opacity 1.
Contract: ~/.claude/rules/dark-surface-legibility.md */
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.1em;
/* No uppercase: the capital-POLO wordplay in "POLOwanie" is the event
name's signature and must stay mixed-case everywhere it renders. */
text-transform: none;
color: var(--accent-gold-light); /* #d4b878 — full-brightness gold */
opacity: 1;
border-left: 1px solid var(--polo-gold-soft);
padding-left: 0.75rem;
white-space: nowrap;
}
@media (max-width: 980px) {
.nav-logo-event { display: none; }
}
.nav-links a:not(.nav-cta) {
/* Dark surface ⇒ pure white, opacity 1 (was #efe9da warm off-white,
which reads muted on the dark green bar — D3 contract).
:not(.nav-cta) — the CTA lives inside .nav-links; without the guard
this (0,1,1) rule beats .nav-cta (0,1,0) and paints the CTA text
white-on-gold (low contrast). CTA keeps dark ink on gold. */
color: #ffffff;
opacity: 1;
}
.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta):focus-visible {
color: var(--accent-gold-light); /* hover shifts to bright gold, never gray */
}
/* Hamburger — 44x44 minimum (iOS HIG), three gold lines, mobile only */
.nav-hamburger {
display: none;
width: 44px;
height: 44px;
padding: 12px 10px;
background: transparent;
border: 1px solid var(--polo-gold-soft);
cursor: pointer;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}
.nav-hamburger span {
display: block;
height: 2px;
background: var(--polo-gold);
transition: transform 180ms ease, opacity 180ms ease;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 980px) {
.nav-hamburger { display: flex; }
.nav-links.nav-sections {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
gap: 0;
background: rgba(20, 43, 33, 0.98);
border-bottom: 1px solid var(--polo-gold-soft);
padding: 0.5rem 0 1rem;
}
.nav-links.nav-sections.nav-open { display: flex; }
.nav-links.nav-sections a {
display: block;
padding: 0.85rem 1.5rem;
min-height: 44px;
}
}
.nav-links a::after {
background: var(--polo-gold);
}
/* .nav-links a.nav-cta (0,2,1) — must outrank BOTH .nav-links a rules
(style.css:131 + :1820, each 0,1,1) or the CTA text inherits the
link color instead of dark ink on the gold button. */
.nav-cta,
.nav-links a.nav-cta {
background: var(--polo-gold);
color: var(--polo-green-deep);
border: 1px solid var(--polo-gold);
min-height: 44px;
display: inline-flex;
align-items: center;
}
.nav-cta:hover,
.nav-cta:focus-visible,
.nav-links a.nav-cta:hover,
.nav-links a.nav-cta:focus-visible {
background: transparent;
/* Ghost state sits on the dark bar ⇒ brightest gold, never dimmed (D3). */
color: var(--accent-gold-light);
border-color: var(--accent-gold-light);
}
.lang-toggle {
/* Dark surface ⇒ pure white, opacity 1 (was #efe9da — D3 contract). */
color: #ffffff;
opacity: 1;
border-color: var(--polo-gold-soft);
white-space: nowrap;
}
.lang-toggle:hover { color: var(--accent-gold-light); }
/* ============================================================
07 · HERO SHELL — .polo-hero + .invite-card
"LOOK" ONLY (typography colors, CTA colors, decorative seal).
hero.css owns full-bleed LAYOUT + the media/scrim stack + the
reveal-in animation.
============================================================ */
/* Wax-seal accent — small RealTimes red dot above the eyebrow line.
Kept as a refined brand touch on the dark cinematic overlay (a soft
white halo instead of the old paper-card drop shadow). */
.invite-card > :first-child::before {
content: "";
display: block;
width: 10px;
height: 10px;
margin: 0 auto 14px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #ff5a60, #e31b23 60%, #9c0f14);
box-shadow:
0 0 0 3px rgba(255, 255, 255, 0.14),
0 2px 10px rgba(227, 27, 35, 0.5);
}
/* A1: eyebrow masthead line — small-caps, gold, on dark */
.invite-card .invite-masthead {
font-size: 0.8rem;
font-variant: small-caps;
letter-spacing: 0.32em;
color: var(--polo-gold);
margin: 0 0 0.5rem;
}
/* A1: the ❦ fleuron divider between masthead and title */
.invite-card .invite-rule {
font-family: var(--polo-serif);
font-size: 1.6rem;
line-height: 1;
color: var(--polo-gold);
margin: 0.2rem 0 0.9rem;
}
.invite-card .invite-title {
color: #ffffff;
font-family: var(--polo-serif);
font-weight: 700;
line-height: 1.06;
text-wrap: balance;
font-size: clamp(2.6rem, 2.05rem + 2.6vw, 5.5rem);
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
margin: 0 0 0.55em;
}
.invite-card .hero-subtitle {
color: #ffffff;
font-family: var(--polo-serif);
font-style: italic;
font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
line-height: 1.55;
max-width: 58ch;
margin: 0 auto 1.6rem;
}
/* Hairline rule separating subtitle from the facts block */
.invite-card .hero-hairline {
width: 120px;
height: 1px;
margin: 0 auto 1.5rem;
background: var(--polo-gold);
opacity: 0.85;
border: 0;
}
/* Date line (data-i18n="hero.date", class hero-when) — the key fact,
prominent gold, small-caps. */
.invite-card .hero-when {
color: var(--polo-gold);
font-weight: 600;
font-variant: small-caps;
letter-spacing: 0.2em;
font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
margin: 0 0 0.5rem;
}
/* Venue line (data-i18n="hero.venue", class hero-date-prominent) — white */
.invite-card .hero-date-prominent {
color: #ffffff;
font-variant: small-caps;
letter-spacing: 0.16em;
font-size: 0.95rem;
margin: 0 0 0.65rem;
}
.invite-card .hero-fullname {
color: #ffffff;
font-family: var(--polo-serif);
font-style: italic;
font-size: 1rem;
margin: 0 0 1.85rem;
}
.invite-card .hero-edition-badge {
color: var(--polo-gold);
border-color: var(--polo-gold);
font-variant: small-caps;
letter-spacing: 0.3em;
}
.invite-card .hero-cta-group {
margin-top: 0.4rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
/* Primary CTA — solid gold, dark ink text (high contrast on footage) */
.invite-card .hero-cta-group .btn-primary {
background: var(--polo-gold);
border-color: var(--polo-gold);
color: #22150a;
}
.invite-card .hero-cta-group .btn-primary:hover {
background: #d8bd7f;
border-color: #d8bd7f;
color: #22150a;
}
/* Secondary CTA — white outline, transparent, on dark */
.invite-card .hero-cta-group .btn-secondary {
background: transparent;
border: 1px solid #ffffff;
color: #ffffff;
}
.invite-card .hero-cta-group .btn-secondary:hover {
background: rgba(255, 255, 255, 0.14);
border-color: #ffffff;
color: #ffffff;
}
/* ============================================================
08 · CHUKKER CLOCK — countdown as an engraved scoreboard:
serif numerals, thin gold rules between units.
============================================================ */
.chukker-clock {
/* A3: display:flex (block-level) + width:fit-content lets margin:auto
actually centre the clock — the prior display:inline-flex is an
inline-level box, so horizontal auto margins never self-centre it. */
display: flex;
flex-wrap: wrap; /* A2: lets .chukker-line wrap to its own row */
align-items: stretch;
justify-content: center;
gap: 0;
width: fit-content;
margin: 1.75rem auto;
padding: 0.9rem 0.5rem;
background: var(--polo-paper);
border-top: 2px solid var(--polo-gold);
border-bottom: 2px solid var(--polo-gold);
}
.chukker-clock .clock-unit,
.chukker-clock .countdown-item {
min-width: 74px;
padding: 0 1.1rem;
text-align: center;
border-right: 1px solid var(--polo-gold-soft); /* gold rule between units */
}
.chukker-clock .clock-unit:last-child,
.chukker-clock .countdown-item:last-child,
.chukker-clock .countdown-item:nth-child(4) {
/* :last-child alone no longer matches SEKUND now that main.js appends
.chukker-line as a 5th child after the 4 countdown-items (A2) — pin
the border-right removal to the 4th item explicitly. */
border-right: 0;
}
/* A2: the "N tygodni do..." chukker line main.js injects into .chukker-clock */
.chukker-clock .chukker-line {
grid-column: 1 / -1; /* mobile: parent switches to CSS grid at 720px */
flex: 1 1 100%; /* desktop: parent is flex — force a new row */
order: 99;
text-align: center;
font-variant: small-caps;
letter-spacing: 0.28em;
color: var(--polo-gold);
font-size: 0.68rem;
padding-top: 0.7rem;
margin-top: 0.6rem;
border-top: 1px solid var(--polo-gold-soft);
}
/* Serif numerals — engraved scoreboard digits */
.chukker-clock .clock-value,
.chukker-clock .countdown-number,
.chukker-clock strong {
display: block;
font-family: var(--polo-serif);
font-size: clamp(1.9rem, 4.5vw, 2.8rem);
font-weight: 600;
font-variant-numeric: tabular-nums lining-nums;
color: var(--polo-burgundy);
line-height: 1.05;
}
.chukker-clock .clock-label,
.chukker-clock .countdown-label {
display: block;
margin-top: 0.3rem;
font-size: 0.62rem;
font-variant: small-caps;
letter-spacing: 0.28em;
color: var(--polo-ink-muted);
}
/* A3: base .section-header margin-bottom (5rem, style.css) is calibrated
for sections that also carry a .section-subtitle; the countdown header
has none, so the gap above the clock reads oversized — tighten it. */
#countdown .section-header {
margin-bottom: 2rem;
}
/* Legacy countdown banner (base layout) relabels to programme style */
.countdown-banner {
background: var(--polo-paper);
border-top: 1px solid var(--polo-gold-soft);
border-bottom: 1px solid var(--polo-gold-soft);
color: var(--polo-ink);
}
.countdown-item .countdown-number {
font-family: var(--polo-serif);
color: var(--polo-burgundy);
font-variant-numeric: tabular-nums;
}
.countdown-item .countdown-label { color: var(--polo-ink-muted); }
.countdown-cta {
background: var(--polo-burgundy);
color: var(--polo-cream);
min-height: 44px;
display: inline-flex;
align-items: center;
}
.countdown-cta:hover { background: var(--polo-burgundy-hover); }
/* ============================================================
09 · TERRACE SVG — #terrace
Strokes are authored as currentColor → burgundy on cream.
The SVG stand-plan diagram (+ its terrace-active picker state) was
removed 2026-07-16 in favour of the terrace-two-level photo as the
section's single primary visual. #terrace below now targets only
itself (never carried by the SVG), constraining
it to the shared 1160px container like every sibling section.
============================================================ */
#terrace {
max-width: 1160px;
}
/* ============================================================
09b · SHARED LIST MARKER — gold diamond bullet, reused by
venue-list / dresscode-list / terrace-legend (same metrics as
.ticket-perks li::before in section 10).
============================================================ */
.venue-list,
.dresscode-list,
.terrace-legend {
list-style: none;
margin: 0;
padding: 0;
}
.venue-list li,
.dresscode-list li,
.terrace-legend li {
position: relative;
padding-left: 1.4rem;
margin-bottom: 0.85rem;
color: var(--polo-ink-soft);
font-size: 0.95rem;
line-height: 1.6;
}
.venue-list li::before,
.dresscode-list li::before,
.terrace-legend li::before {
content: '';
position: absolute;
left: 0.15rem;
top: 0.55rem;
width: 6px;
height: 6px;
background: var(--polo-gold);
transform: rotate(45deg);
}
/* ============================================================
A5 · POLO 101 — spectator's primer, 2×2 card grid
============================================================ */
.polo101-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
max-width: 1160px;
margin: 0 auto;
}
.polo101-card {
background: var(--polo-paper);
border: 1px solid var(--border-light);
padding: 2rem 1.85rem;
box-shadow: 0 10px 28px -20px rgba(34, 32, 28, 0.22);
}
.polo101-card h3 {
font-family: var(--polo-serif);
color: var(--polo-burgundy);
font-size: 1.2rem;
margin: 0 0 0.75rem;
}
.polo101-card p {
color: var(--polo-ink-soft);
font-size: 0.95rem;
line-height: 1.65;
max-width: 68ch;
}
@media (max-width: 720px) {
.polo101-grid { grid-template-columns: 1fr; }
}
/* ============================================================
A12 · TERRACE PHOTO — the two-level terrace photo is the
section's single primary visual (photo-frame shared utility;
the former SVG stand-plan diagram was removed 2026-07-16).
============================================================ */
.photo-frame {
border: 1px solid var(--polo-gold-soft);
padding: 8px;
background: var(--polo-paper);
box-shadow: 0 10px 28px -20px rgba(34, 32, 28, 0.22);
}
.photo-frame img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* The two-level terrace photo is a wide (~16:9) shot, not square —
override the shared photo-frame 1:1 crop so the VIP deck above /
networking rail below both stay fully visible, and widen the frame
to full section width since it now carries the section on its own. */
.terrace-photo {
max-width: 1160px;
margin: 0 auto 2.5rem;
}
.terrace-photo img {
aspect-ratio: 16 / 9;
}
.terrace-legend {
max-width: 640px;
margin: 0 auto;
text-align: left;
}
/* ============================================================
A6 · FAQ — native / accordion
============================================================ */
.faq-list {
max-width: 720px;
margin: 0 auto;
}
.faq-list details {
border-bottom: 1px solid var(--polo-gold-soft);
padding: 1.1rem 0;
}
.faq-list summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-family: var(--polo-serif);
font-size: 1.05rem;
font-weight: 600;
color: var(--polo-burgundy);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
content: '+';
flex: 0 0 auto;
font-family: var(--polo-serif);
font-size: 1.3rem;
line-height: 1;
color: var(--polo-gold);
}
.faq-list details[open] summary::after {
content: '\2212'; /* − */
}
.faq-list details p {
margin: 0.85rem 0 0;
color: var(--polo-ink-soft);
font-size: 0.95rem;
line-height: 1.65;
}
/* ============================================================
A8 · VENUE — prose + list + weather note
============================================================ */
.venue-prose {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.venue-prose p {
color: var(--polo-ink-soft);
font-size: 1rem;
line-height: 1.75;
margin: 0 0 1.5rem;
}
.venue-list {
text-align: left;
display: inline-block;
margin-bottom: 1.75rem;
}
.venue-weather {
font-style: italic;
color: var(--polo-ink-muted);
font-size: 0.88rem;
max-width: 60ch;
margin: 0 auto 1.75rem;
}
/* ============================================================
A11 · PARTNER CTA BLOCK
============================================================ */
.partner-cta-block {
max-width: 640px;
margin: 2rem auto 0;
text-align: center;
}
.partner-cta-block p {
color: var(--polo-ink-soft);
font-size: 1.02rem;
line-height: 1.7;
margin: 0 0 1.75rem;
}
/* ============================================================
A13 · DRESS CODE — value line + photo/list layout
============================================================ */
.dresscode-body {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.dress-code-value {
text-shadow: none; /* kill style.css's dark-theme glow smudge on cream */
}
.dresscode-layout {
display: grid;
grid-template-columns: minmax(220px, 320px) 1fr;
gap: 2.5rem;
align-items: center;
text-align: left;
margin-top: 2rem;
}
@media (max-width: 720px) {
.dresscode-layout {
grid-template-columns: 1fr;
text-align: center;
}
.dresscode-photo {
max-width: 280px;
margin: 0 auto;
}
.dresscode-layout .dresscode-list {
text-align: left;
}
}
/* ============================================================
A7 · FOOTER GRID LAYOUT — ported from the RT canonical footer
(rt-www-home / MSN26 reference). Colors stay as already set
above (section 15); this adds the 4-col grid + container +
the 980/720 breakpoints that were entirely missing.
============================================================ */
.cf-footer {
padding: 3.5rem 0 2.5rem;
width: 100%;
}
.cf-footer .cf-container {
width: min(1160px, calc(100vw - 2rem));
margin: 0 auto;
padding: 0 1rem;
}
.cf-footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 2.5rem;
}
.cf-footer-brand img {
display: block;
height: 32px;
width: auto;
}
.cf-footer-brand p {
color: #cfc8b4;
font-size: 0.88rem;
line-height: 1.55;
margin-top: 0.8rem;
max-width: 420px;
}
.cf-footer div:not(.cf-footer-brand):not(.cf-footer-grid) {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.cf-footer a {
font-size: 0.86rem;
text-decoration: none;
transition: color 180ms ease;
}
.cf-footer span {
color: #a8a08a;
font-size: 0.82rem;
}
@media (max-width: 980px) {
.cf-footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.cf-footer-grid { grid-template-columns: 1fr; text-align: center; }
.cf-footer-brand img { margin: 0 auto; }
.cf-footer-brand p { margin-left: auto; margin-right: auto; }
.cf-footer div:not(.cf-footer-brand):not(.cf-footer-grid) { align-items: center; }
}
/* ============================================================
10 · TICKET CARDS — cream paper cards, gold VIP border,
burgundy CTAs, ≥44px touch targets.
============================================================ */
.ticket-card {
background: var(--polo-paper);
border: 1px solid var(--border-light);
box-shadow: 0 10px 28px -18px rgba(34, 32, 28, 0.28);
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.ticket-card:hover {
transform: translateY(-3px);
border-color: var(--polo-gold);
box-shadow: 0 18px 36px -18px rgba(34, 32, 28, 0.32);
}
.ticket-card .ticket-name {
font-family: var(--polo-serif);
color: var(--polo-burgundy);
}
.ticket-card .ticket-price {
font-family: var(--polo-serif);
color: var(--polo-ink);
font-variant-numeric: lining-nums;
}
.ticket-card .ticket-price span { color: var(--polo-ink-muted); }
.ticket-card .ticket-desc,
.ticket-card .ticket-note {
color: var(--polo-ink-soft);
}
/* VIP / featured: thin double gold border like the invite card */
.ticket-card--vip,
.ticket-card.featured {
border: 1px solid var(--polo-gold);
box-shadow:
0 0 0 3px var(--polo-paper),
0 0 0 4px var(--polo-gold),
0 18px 40px -18px rgba(94, 31, 31, 0.25);
position: relative;
}
/* Optional flag ribbon — renders only when data-flag is set */
.ticket-card--vip[data-flag]::before,
.ticket-card.featured[data-flag]::before {
content: attr(data-flag);
position: absolute;
top: -0.7em;
left: 50%;
transform: translateX(-50%);
padding: 0.15em 1em;
background: var(--polo-burgundy);
color: var(--polo-cream);
font-size: 0.65rem;
font-variant: small-caps;
letter-spacing: 0.3em;
white-space: nowrap;
}
/* Ticket CTA buttons — burgundy, ≥44px touch targets */
.ticket-card .btn-primary,
.ticket-card a.btn,
.ticket-card button {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.7rem 1.6rem;
background: var(--polo-burgundy);
color: var(--polo-cream);
border: 1px solid var(--polo-burgundy);
font-variant: small-caps;
letter-spacing: 0.18em;
transition: background 180ms ease, color 180ms ease;
}
.ticket-card .btn-primary:hover,
.ticket-card a.btn:hover,
.ticket-card button:hover {
background: transparent;
color: var(--polo-burgundy);
}
/* ============================================================
11 · SHARE STRIP — four round outline buttons, gold hover
============================================================ */
.share-strip {
display: flex;
flex-wrap: wrap; /* text pills (A9) are wider than icon circles — wrap on narrow viewports */
justify-content: center;
align-items: center;
gap: 1rem;
margin: 2rem auto;
}
/* A9: the HTML buttons carry TEXT labels (E-mail / LinkedIn / Facebook /
Kopiuj link), not icons, so the 48px icon-circle shape overflows —
restyle as small-caps text pills, still ≥44px tall for touch targets. */
.share-strip a,
.share-strip button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
width: auto;
height: auto;
padding: 0.6rem 1.4rem;
border-radius: 999px;
border: 1px solid var(--polo-burgundy);
background: transparent;
color: var(--polo-burgundy);
font-variant: small-caps;
letter-spacing: 0.12em;
font-size: 0.82rem;
white-space: nowrap;
transition: border-color 180ms ease, color 180ms ease,
background 180ms ease, transform 180ms ease;
}
.share-strip a:hover,
.share-strip button:hover,
.share-strip a:focus-visible,
.share-strip button:focus-visible {
border-color: var(--polo-gold);
color: var(--polo-gold);
background: var(--polo-gold-faint);
transform: translateY(-2px);
}
.share-strip svg {
width: 20px;
height: 20px;
fill: currentColor;
stroke: currentColor;
}
/* ============================================================
12 · SOCIAL TICKER — one elegant centered line, small caps
============================================================ */
.social-ticker {
display: block;
width: 100%;
padding: 0.8rem 1.25rem;
text-align: center;
font-size: 0.78rem;
font-variant: small-caps;
letter-spacing: 0.3em;
color: var(--polo-ink-muted);
background: transparent;
border-top: 1px solid var(--polo-gold-soft);
border-bottom: 1px solid var(--polo-gold-soft);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.social-ticker a {
color: var(--polo-burgundy);
text-decoration: none;
}
.social-ticker a:hover { color: var(--polo-gold); }
/* Separator glyphs between ticker items */
.social-ticker .sep {
color: var(--polo-gold);
padding: 0 0.6em;
}
/* ============================================================
13 · FORMS + RODO — light inputs, burgundy focus ring,
readable consent row.
============================================================ */
.partners-form,
form {
color: var(--polo-ink);
}
input,
select,
textarea {
background: var(--polo-paper);
color: var(--polo-ink);
border: 1px solid var(--border-light);
min-height: 44px;
padding: 0.6rem 0.9rem;
font-size: 1rem;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
textarea { min-height: 110px; }
input::placeholder,
textarea::placeholder {
color: var(--polo-ink-muted);
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--polo-burgundy);
box-shadow: 0 0 0 3px var(--polo-burgundy-soft); /* burgundy focus ring */
}
.form-group label {
color: var(--polo-ink-soft);
font-size: 0.85rem;
letter-spacing: 0.04em;
}
/* RODO consent row — checkbox aligned, ≥44px hit area, readable */
.rodo-row,
.form-group--rodo,
.form-consent {
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding: 0.4rem 0;
min-height: 44px;
}
.rodo-row input[type="checkbox"],
.form-group--rodo input[type="checkbox"],
.form-consent input[type="checkbox"],
input[type="checkbox"] {
width: 20px;
height: 20px;
min-height: 20px;
min-width: 20px;
margin-top: 0.15rem;
flex: 0 0 auto;
accent-color: var(--polo-burgundy);
}
.rodo-row label,
.form-group--rodo label,
.form-consent label {
font-size: 0.82rem;
line-height: 1.55;
color: var(--polo-ink-soft);
}
.rodo-row a,
.form-consent a {
color: var(--polo-burgundy);
text-decoration: underline;
text-underline-offset: 2px;
}
/* Form submit — burgundy CTA */
form .btn-primary,
form button[type="submit"] {
min-height: 48px;
background: var(--polo-burgundy);
color: var(--polo-cream);
border: 1px solid var(--polo-burgundy);
font-variant: small-caps;
letter-spacing: 0.18em;
padding: 0.7rem 2rem;
}
form .btn-primary:hover,
form button[type="submit"]:hover {
background: var(--polo-burgundy-hover);
}
/* ============================================================
14 · BUTTONS, LINKS, FOCUS-VISIBLE
============================================================ */
.btn-primary {
background: var(--polo-burgundy);
color: var(--polo-cream);
border: 1px solid var(--polo-burgundy);
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none; /* A11: these render as in the hero/tickets/partners CTAs */
}
.btn-primary:hover {
background: var(--polo-burgundy-hover);
border-color: var(--polo-burgundy-hover);
color: var(--polo-cream);
}
.btn-secondary {
background: transparent;
color: var(--polo-burgundy);
border: 1px solid var(--polo-burgundy);
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.btn-secondary:hover {
border-color: var(--polo-gold);
color: var(--polo-gold);
}
/* Global keyboard focus — gold engraved ring */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--polo-gold);
outline-offset: 3px;
}
/* Inputs keep the burgundy box-shadow ring instead */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: none;
}
/* Body links */
a { color: var(--polo-burgundy); }
a:hover { color: var(--polo-burgundy-hover); }
/* ============================================================
15 · FOOTER — stays DARK (deep field green) for the
white-red-i RealTimes logo.
============================================================ */
.footer,
footer,
.cf-footer {
background: var(--polo-green);
color: #e9e4d6;
border-top: 2px solid var(--polo-gold);
}
.footer h4,
footer h4,
.cf-footer h4 {
color: #ffffff;
font-family: var(--polo-serif);
}
.footer a,
.footer-links a,
footer a,
.cf-footer a {
color: #cfc8b4;
}
.footer a:hover,
.footer-links a:hover,
footer a:hover,
.cf-footer a:hover {
color: var(--polo-gold);
}
.footer-links a::after { background: var(--polo-gold); }
.footer .footer-bottom,
footer .footer-bottom {
border-top: 1px solid rgba(197, 165, 90, 0.25);
color: #a8a08a;
}
/* ============================================================
B4 · ALTERNATING BACKGROUNDS — style.css:841's `.venue` rule
targets a class this HTML never uses (.venue-section is the
real one), so the whole page reads as one flat cream field.
Point --bg-secondary (the paper tint) at the real section
classes for a subtle tonal rhythm between adjacent bands.
============================================================ */
.countdown-section,
.terrace-section,
.venue-section,
.faq {
background: var(--bg-secondary);
}
/* ============================================================
16 · RESPONSIVE — content shell 1160px,
breakpoints ~980px and ~720px, mobile-first hero.
============================================================ */
.section-header,
.tickets-grid,
.share-strip,
.partners-form {
max-width: 1160px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 980px) {
.chukker-clock .clock-unit,
.chukker-clock .countdown-item { min-width: 62px; padding: 0 0.8rem; }
.field-divider--wide { width: 88%; }
}
@media (max-width: 720px) {
/* A4: .polo-hero mobile sizing (min-height + padding, incl. clearing the
fixed nav) is now owned SOLELY by css/hero.css's own @719.98px block —
it loads after this file and was silently winning the whole shorthand
`padding` anyway, so keeping a second, competing declaration here was
dead weight (and the source of the clipped-under-nav bug). The former
paper-card padding/frame rules (::before inset) are gone with the card
box itself — the overlay's structural sizing now also lives solely in
hero.css's @719.98px block. */
.invite-card .hero-cta-group {
margin-top: 1.2rem;
flex-direction: column;
align-items: stretch;
}
.invite-card .hero-cta-group .btn-primary,
.invite-card .hero-cta-group .btn-secondary {
width: 100%;
}
.chukker-clock {
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 100%;
padding: 0.7rem 0.25rem;
}
.chukker-clock .clock-unit,
.chukker-clock .countdown-item { min-width: 0; padding: 0 0.4rem; }
.share-strip { gap: 0.8rem; }
.social-ticker {
font-size: 0.68rem;
letter-spacing: 0.22em;
white-space: normal;
overflow: visible;
text-overflow: unset;
line-height: 1.8;
}
}
/* ============================================================
16b · SCROLL-REVEAL SAFETY — content is NEVER hidden without JS.
style.css sets .reveal { opacity:0 }; that may only apply once
hero.js has added .js-anim to . No JS → fully visible.
============================================================ */
html:not(.js-anim) .reveal,
html:not(.js-anim) .reveal > * {
opacity: 1 !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
.reveal,
.reveal > * {
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================================
17 · REDUCED MOTION — kill golden-hour + micro-motions
============================================================ */
@media (prefers-reduced-motion: reduce) {
body {
animation: none !important;
background-color: var(--polo-cream) !important;
}
.ticket-card,
.ticket-card:hover,
.share-strip a,
.share-strip a:hover,
.share-strip button,
.share-strip button:hover {
transform: none !important;
transition: none !important;
}
}
/* ============================================================
18 · PRINT — it IS a programme
============================================================ */
@media print {
body {
background: #ffffff !important;
animation: none !important;
color: #000000;
}
.nav,
.share-strip,
.social-ticker,
.countdown-banner,
.chukker-clock,
form,
.partners-form { display: none !important; }
.invite-card {
box-shadow: none;
border: 1.5pt double #c5a55a;
}
.footer, footer, .cf-footer {
background: none;
color: #000000;
border-top: 1pt solid #000000;
}
.footer a, footer a, .cf-footer a { color: #000000; }
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.75em;
color: #555555;
}
}
/* ============================================================
17 · EVENT LEGAL BAND — thin per-event legal strip rendered
AFTER the canonical footer (two-footer architecture:
Regulamin / Polityka Prywatności never live inside .cf-footer).
============================================================ */
.event-legal-band {
display: flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
padding: 0.9rem 1rem;
background: var(--polo-green);
border-top: 1px solid rgba(197, 165, 90, 0.25);
font-size: 0.78rem;
color: #a8a08a;
text-align: center;
}
.event-legal-band a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 0.35rem;
color: var(--polo-gold);
text-decoration: none;
}
.event-legal-band a:hover,
.event-legal-band a:focus-visible {
text-decoration: underline;
}
.event-legal-divider {
color: #a8a08a;
}
/* ============================================================
10b · TICKET CARDS + RSVP CARD (GLM 5.2 redesign 2026-07-02;
supersedes section 10 via #tickets scoping)
============================================================ */
#tickets{
--polo-cream:#f7f3ea;
--polo-paper:#fdfbf5;
--polo-burgundy:#5e1f1f;
--polo-gold:#c5a55a;
--polo-green:#1e3d2f;
--polo-ink:#22201c;
--polo-ink-soft:#4d483f;
--polo-ink-muted:#6e6759;
--border-light:#cfc4a9;
--polo-serif:'Playfair Display', Georgia, 'Times New Roman', serif;
/* B1: no more max-width/margin/padding divergence here — #tickets is a
, so it now shares the same 1160px / 3rem (1.5rem @720px)
container as every other section (style.css base `section` rule). */
color:var(--polo-ink);
}
#tickets .section-header{
text-align:center;
margin:0 auto 3.5rem;
max-width:760px;
}
#tickets .section-title::after{
content:"";
display:block;
width:3.5rem;
height:1px;
background:var(--polo-gold);
margin:1.1rem auto 0;
}
/* ---------- Tickets grid ---------- */
#tickets .tickets-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:2rem;
align-items:stretch;
}
@media (max-width:980px){
#tickets .tickets-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
}
/* ---------- Ticket card ---------- */
#tickets .ticket-card{
position:relative;
background:var(--polo-paper);
border:1px solid var(--border-light);
padding:2.5rem 1.85rem 2rem;
display:flex;
flex-direction:column;
/* B2: no blanket serif on the whole card — serif is scoped to the
display heading + price only (.ticket-name / .ticket-current-price
set their own font-family below); everything else (perks list, CTA)
inherits the page's sans body font. */
/* subtle paper grain */
background-image:
radial-gradient(circle at 18% 12%, rgba(197,165,90,0.04), transparent 40%),
radial-gradient(circle at 82% 88%, rgba(94,31,31,0.025), transparent 45%);
}
#tickets .ticket-card--vip,
#tickets .ticket-card.featured{
border:1px solid var(--polo-gold);
box-shadow:0 0 0 4px var(--polo-paper), 0 0 0 5px var(--polo-gold);
}
/* B3: kill style.css:799's constant scale(1.04) "ghost" that breaks the
row baseline (the featured card sits taller/wider than its siblings at
rest). Scoped :not(:hover) so style.css:1202's hover lift is untouched. */
#tickets .ticket-card.featured:not(:hover){
transform:none;
}
/* Featured ribbon sitting on the top border */
#tickets .ticket-card.featured::after{
content:"Pakiet wyróżniony";
position:absolute;
top:-13px;
left:50%;
transform:translateX(-50%);
background:var(--polo-paper);
color:var(--polo-burgundy);
border:1px solid var(--polo-gold);
font-family:var(--polo-serif);
font-variant:small-caps;
letter-spacing:0.18em;
font-size:0.68rem;
font-weight:700;
padding:0.32rem 1rem;
white-space:nowrap;
z-index:2;
}
/* B3: kill style.css:802's donor "Early Bird" ::before — the real ribbon
is the ::after "Pakiet wyróżniony" rule above. */
#tickets .ticket-card.featured::before{
content:none;
}
#tickets .ticket-card--vip::before{
content:"VIP";
position:absolute;
top:-13px;
left:50%;
transform:translateX(-50%);
background:var(--polo-paper);
color:var(--polo-burgundy);
border:1px solid var(--polo-gold);
font-family:var(--polo-serif);
font-variant:small-caps;
letter-spacing:0.32em;
font-size:0.68rem;
font-weight:700;
padding:0.32rem 1.4rem;
white-space:nowrap;
z-index:2;
}
#tickets .ticket-name{
font-family:var(--polo-serif);
font-size:1.45rem;
color:var(--polo-burgundy);
font-weight:700;
text-align:center;
margin:0.5rem 0 0.85rem;
letter-spacing:0.01em;
line-height:1.25;
}
/* ---------- Price / TBC line ---------- */
#tickets .ticket-current-price{
font-family:var(--polo-serif);
font-style:italic;
color:var(--polo-ink-muted);
text-align:center;
font-size:0.95rem;
margin:0 auto 1.6rem;
padding:0 1rem;
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:0.7rem;
letter-spacing:0.02em;
}
#tickets .ticket-current-price::before,
#tickets .ticket-current-price::after{
content:"";
display:block;
width:1.6rem;
height:1px;
background:var(--polo-gold);
flex-shrink:0;
}
/* ---------- Perks list ---------- */
#tickets .ticket-perks{
list-style:none;
padding:0;
margin:0 0 2rem;
font-size:0.94rem;
color:var(--polo-ink-soft);
line-height:1.55;
text-align:left;
}
#tickets .ticket-perks li{
position:relative;
padding-left:1.3rem;
margin-bottom:0.65rem;
}
#tickets .ticket-perks li::before{
content:"";
position:absolute;
left:0.15rem;
top:0.55rem;
width:6px;
height:6px;
background:var(--polo-gold);
transform:rotate(45deg);
text-indent:0;
}
#tickets .ticket-perks li:last-child{ margin-bottom:0; }
/* ---------- CTA button ---------- */
#tickets .btn-primary{
font-variant:small-caps;
letter-spacing:0.14em;
background:var(--polo-burgundy);
color:var(--polo-cream);
border:1px solid var(--polo-burgundy);
padding:0.9rem 1.5rem;
text-decoration:none;
text-align:center;
font-size:0.88rem;
font-weight:600;
cursor:pointer;
margin-top:auto;
display:block;
border-radius:0;
transition:background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
#tickets .btn-primary:hover,
#tickets .btn-primary:focus{
background:transparent;
color:var(--polo-burgundy);
border-color:var(--polo-burgundy);
outline:none;
}
/* ---------- Registration block: RSVP reply card ---------- */
#tickets .registration-block{
margin:5.5rem auto 0;
max-width:820px;
background:var(--polo-paper);
border:1px solid var(--polo-gold);
box-shadow:0 0 0 4px var(--polo-cream);
padding:3rem 2.75rem 2.75rem;
position:relative;
}
#tickets .registration-block::before{
/* thin inner hairline frame, engraved programme feel */
content:"";
position:absolute;
inset:10px;
border:1px solid rgba(197,165,90,0.28);
pointer-events:none;
}
#tickets .registration-heading{
font-family:var(--polo-serif);
text-align:center;
color:var(--polo-burgundy);
font-size:1.85rem;
font-weight:700;
margin:0;
letter-spacing:0.02em;
position:relative;
}
#tickets .registration-heading::after{
content:"";
display:block;
width:3rem;
height:1px;
background:var(--polo-gold);
margin:0.85rem auto 0;
}
#tickets .registration-note{
font-style:italic;
text-align:center;
color:var(--polo-ink-muted);
max-width:55ch;
margin:1.4rem auto 2.5rem;
font-size:0.96rem;
line-height:1.65;
}
/* ---------- Form layout ---------- */
#tickets #registration-form{
display:grid;
grid-template-columns:1fr 1fr;
gap:1.3rem 1.6rem;
}
@media (max-width:720px){
#tickets #registration-form{ grid-template-columns:1fr; }
}
#tickets .form-group{
display:flex;
flex-direction:column;
}
#tickets .form-group--consent,
#tickets #rf-status,
#tickets #registration-form > .btn-primary,
#tickets .form-note{
grid-column:1 / -1;
}
#tickets #registration-form > .btn-primary{
margin-top:0.5rem;
padding:1rem 1.5rem;
font-size:0.92rem;
}
#tickets .form-group label{
font-variant:small-caps;
letter-spacing:0.08em;
font-size:0.82rem;
color:var(--polo-ink-soft);
margin-bottom:0.45rem;
font-weight:600;
}
#tickets .form-group input[type="text"],
#tickets .form-group input[type="email"],
#tickets .form-group select{
background:var(--polo-paper);
border:1px solid var(--border-light);
padding:12px;
min-height:44px;
font-size:0.98rem;
color:var(--polo-ink);
border-radius:0;
-webkit-appearance:none;
appearance:none;
transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
#tickets .form-group input::placeholder{
color:var(--polo-ink-muted);
font-style:italic;
opacity:0.7;
}
#tickets .form-group input:focus,
#tickets .form-group select:focus{
outline:none;
border-color:var(--polo-gold);
box-shadow:0 0 0 2px rgba(197,165,90,0.18);
}
#tickets .form-group select{
background-image:linear-gradient(45deg, transparent 50%, var(--polo-ink-muted) 50%),
linear-gradient(135deg, var(--polo-ink-muted) 50%, transparent 50%);
background-position:calc(100% - 18px) center, calc(100% - 13px) center;
background-size:5px 5px, 5px 5px;
background-repeat:no-repeat;
padding-right:36px;
}
/* ---------- Consent ---------- */
#tickets .form-group--consent .consent-label{
display:flex;
align-items:flex-start;
gap:0.65rem;
font-style:italic;
font-size:0.88rem;
color:var(--polo-ink-muted);
line-height:1.55;
font-variant:normal;
letter-spacing:0;
text-transform:none;
font-weight:400;
margin:0;
padding:0.25rem 0;
cursor:pointer;
}
#tickets .form-group--consent input[type="checkbox"]{
margin-top:0.3rem;
accent-color:var(--polo-burgundy);
width:16px;
height:16px;
flex-shrink:0;
cursor:pointer;
}
/* ---------- Status + note ---------- */
#tickets .rf-status{
min-height:1.2rem;
font-style:italic;
color:var(--polo-ink-muted);
text-align:center;
font-size:0.9rem;
margin:0;
}
#tickets .form-note{
font-style:italic;
color:var(--polo-ink-muted);
font-size:0.85rem;
text-align:center;
margin:1.4rem 0 0;
line-height:1.6;
}
#tickets .form-note a{
color:var(--polo-burgundy);
text-decoration:none;
border-bottom:1px solid var(--polo-gold);
padding-bottom:1px;
transition:color 0.2s ease;
}
#tickets .form-note a:hover{ color:var(--polo-gold); }
/* B7: when js/main.js hides #rf-nip-group (Faktura = NIE), it toggles
.form-group--full on the FAKTURA group so it spans the full grid row
instead of leaving an empty hole next to it. */
#tickets .form-group.form-group--full{
grid-column:1 / -1;
}
/* B7: match the italic muted placeholder look on the empty/placeholder
state of the required "Wybierz poziom" select (#rf-tier is required,
so :invalid matches while its empty first option is selected). */
#tickets .form-group select:invalid{
color:var(--polo-ink-muted);
font-style:italic;
opacity:0.7;
}
/* B6: "Zarezerwuj miejsce VIP" wraps to 2 lines — not only at ~375px, but
at ANY width ≥981px too, because #tickets .tickets-grid is a fixed
3-column grid above 980px (cards ≈300-360px regardless of how wide the
viewport is beyond the 1160px container). Tighten letter-spacing/size in
BOTH ranges so every card CTA stays one line. */
@media (max-width:400px), (min-width:981px){
#tickets .btn-primary{
font-size:0.78rem;
letter-spacing:0.06em;
padding:0.9rem 1rem;
}
}
/* ---------- Reveal ---------- */
#tickets .reveal{
opacity:0;
transform:translateY(14px);
animation:tk-reveal 0.9s ease forwards;
}
#tickets .section-header.reveal{ animation-delay:0.05s; }
#tickets .tickets-grid.reveal{ animation-delay:0.2s; }
#tickets .registration-block.reveal{ animation-delay:0.3s; }
@keyframes tk-reveal{
to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
#tickets .reveal{ opacity:1; transform:none; animation:none; }
}