/* ============================================================
Vienna EUDC 2027 — Homepage
Pixel-accurate rebuild of the Figma "Home-desktop" frame
(1700 × 3259). Every element is positioned by its exact
Figma coordinate. Colors, type, and shadows are 1:1.
============================================================ */
/* ---------- Fonts (self-hosted Metropolis) ---------- */
@font-face {
font-family: "Metropolis";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/metropolis-400-normal.woff2") format("woff2");
}
@font-face {
font-family: "Metropolis";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/metropolis-500-normal.woff2") format("woff2");
}
@font-face {
font-family: "Metropolis";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/metropolis-600-normal.woff2") format("woff2");
}
/* ---------- Design tokens (sampled from Figma) ---------- */
:root {
--maroon: #360d02; /* page background */
--gold: #ab8028; /* primary gold text / lines */
--gold-dim: #754400; /* dimmed gold / placeholders */
--magenta: #630033; /* active-form buttons */
--darkred: #631c00; /* send button / icon badges */
--grey: #c4c4c4; /* media placeholders */
--shadow-card: 12px 12px 12px -5px rgba(20, 20, 20, .5);
--shadow-photo: 12px 12px 12px -5px rgba(28, 6, 0, .5);
--shadow-field: inset 7px 10px 11.9px rgba(0, 0, 0, .25);
}
/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; overflow-y: scroll; } /* x-hidden clips the gold lines' bleed into the side margins; y-scroll keeps a stable gutter */
html, body {
background: var(--maroon);
font-family: "Metropolis", system-ui, sans-serif;
}
/* ---------- Responsive scaling wrapper ---------- */
/* The stage is the exact 1700px-wide canvas. A tiny script
(in index.html) scales it down to fit narrower viewports
while preserving the design's exact proportions. */
.scale-wrap {
width: 1700px;
margin: 0 auto;
transform-origin: top center;
}
.stage {
position: relative;
width: 1700px;
height: 3279px;
background: var(--maroon);
overflow: visible; /* let the gold lines bleed into the side margins on wide screens; html{overflow-x:hidden} clips the page */
}
.stage > * { position: absolute; }
/* Section wrappers (mobile grids): on desktop they generate no box at all,
so their children keep their exact stage coordinates; the mobile media
query turns them into flow/grid containers. */
.sec, .fitem, .mitem { display: contents; }
/* Generic helpers */
/* Gold lines run from the content's left edge to the viewport's right edge:
1462px (238→1700) + the side-margin width scale.js publishes as --nav-off. */
.divider { height: 3px; background: var(--gold); width: calc(1462px + var(--nav-off, 0px)); left: 238px; }
.section-title {
position: absolute;
color: var(--gold);
font-size: 24px;
line-height: 24px;
font-weight: 400;
text-transform: uppercase;
white-space: nowrap;
}
/* ============================================================
NAV
============================================================ */
/* logo.svg is a 134×139 canvas (7px of shadow-padding each side of the 120-unit
crest); rendered at native size with left:111 the gold crest fills exactly
118→238 so it touches the nav line (no gap). */
.logo {
left: 111px; top: 35px; width: 134px; height: 139px;
z-index: 6;
filter: drop-shadow(0 12px 9px rgba(20, 20, 20, .45));
}
.nav-line { top: 94.5px; height: 5px; width: 1462px; left: 238px;
background: var(--gold); z-index: 6; }
.nav-tab {
top: 41px; height: 56px;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 20px; line-height: 20px;
color: var(--gold); text-decoration: none; white-space: nowrap;
z-index: 6;
}
.nav-tab.dim { color: var(--gold-dim); } /* dimmed but clickable → coming-soon.html */
/* Six even 204px slots fill 238→1462, the content right edge (same grid as
site.css .ntab1–6), so the last tab's right edge is flush with the page
content (e.g. the contact form). The gold lines bleed on past to the edge. */
.nav-tab { width: 204px; }
.nav-tournament { left: 238px; }
.nav-partners { left: 442px; }
.nav-personnel { left: 646px; }
.nav-participants{ left: 850px; }
.nav-training { left: 1054px; }
.nav-contact { left: 1258px; }
/* Fixed header: lives outside the scaled stage, so the browser pins it on the
compositor thread (no scroll jitter) and the bar + shadow span the full
viewport width. The page's inline scaler sizes it (95×scale) and
scales/centres .nav-inner to line up with the stage. */
.site-nav { position: fixed; top: 0; left: 0; right: 0; height: 95px;
background: var(--maroon); box-shadow: var(--shadow-card); z-index: 50; }
.site-nav .nav-inner { position: absolute; left: 0; top: 0; width: 1700px;
transform-origin: top left; }
.site-nav .nav-inner > * { position: absolute; }
/* Full-viewport gold nav line: drawn on the (full-width, unclipped) fixed bar
so it reaches the screen's right edge. It starts at the scaled content-left
and seamlessly extends the in-stage .nav-line out to the margin. Fallbacks
(scale 1 / nav-off 0) make it correct before scale.js runs. */
.site-nav::after {
content: ""; position: absolute; z-index: 6;
left: calc(var(--nav-off, 0px) + 238px * var(--scale, 1)); right: 0;
top: calc(94.5px * var(--scale, 1)); height: calc(5px * var(--scale, 1));
background: var(--gold);
}
/* Mobile-only header elements (wordmark logo, meatball menu button) and the
menu overlay: present in the markup, dormant on desktop. Styled in the
MOBILE section at the end of this file. */
.logo-m, .mnav-btn { display: none; }
.mnav { display: none; }
/* ============================================================
HERO
============================================================ */
/* SVG hero (viewBox 1225×890): badges + FB/IG logos are baked in, so the
separate badge PNGs were removed from the markup (.badge CSS now dormant). */
.hero { left: 238px; top: 95px; width: 1225px; height: 890px; z-index: 1; }
/* Invisible click targets over the FB/IG logos baked into hero.svg.
Disc centres measured in the 1225×890 art (FB 398,712 r≈46; IG 503,768 r≈28);
hero sits at stage 238,95, so stage = 238+svgX, 95+svgY. border-radius clips
the hit area to the circle so corner clicks fall through to the artwork. */
.hero-link { position: absolute; z-index: 3; border-radius: 50%; }
.hero-link-fb { left: 590px; top: 761px; width: 92px; height: 92px; }
.hero-link-ig { left: 713px; top: 835px; width: 56px; height: 56px; }
/* ============================================================
ABOUT EUDC
============================================================ */
.about-title { left: 239px; top: 1068px; }
.about-divider { top: 1099px; }
.about-body {
left: 238px; top: 1139px; width: 600px;
color: var(--gold); font-size: 20px; line-height: 24px; font-weight: 400;
}
.about-photo-1 { left: 862px; top: 1139px; width: 184px; height: 350px;
box-shadow: var(--shadow-photo); }
.about-photo-2 { position: absolute; left: 1070px; top: 1139px; width: 392px; height: 350px;
box-shadow: var(--shadow-photo); }
/* transparent wrapper: the ![]()
keeps its own absolute (desktop) / static
(mobile) positioning; the only swaps the source per breakpoint. */
.about-photo-2-pic { display: contents; }
/* Photographer credit, right edge flush under the right photo's right edge
(Figma 1:906). Box spans the photo (left 1070, width 392) and text is
right-aligned, so the right edge lines up regardless of rendered font width. */
.about-credit { left: 1070px; top: 1497px; width: 392px; text-align: right;
color: var(--gold); font-size: 14px; line-height: 16px; font-weight: 400; }
/* ============================================================
ACTIVE FORMS
============================================================ */
.active-title { left: 239px; top: 1591px; }
.active-divider { top: 1622px; }
.form-box {
position: absolute;
top: 1662px; width: 288px; height: 68px;
background: var(--magenta);
box-shadow: var(--shadow-card);
text-decoration: none;
}
.form-box .inner {
position: absolute; inset: 6px;
border: 1px solid var(--gold);
display: flex; align-items: center; justify-content: center;
}
.form-box .label {
color: var(--gold); font-size: 20px; line-height: 28px;
font-weight: 400; text-transform: uppercase; text-align: center;
}
.form-box-1 { left: 239px; }
.form-box-2 { left: 551px; }
.form-date {
position: absolute;
top: 1742px; width: 276px;
color: var(--gold); font-size: 16px; line-height: 16px; font-weight: 400;
}
.form-date-1 { left: 245px; }
.form-date-2 { left: 557px; }
/* Placeholder shown by content-loader.js when no forms are active. */
.form-empty {
position: absolute;
left: 239px; top: 1681px; width: 600px;
color: var(--gold); font-size: 20px; line-height: 28px; font-weight: 400;
}
/* ============================================================
SOCIAL MEDIA UPDATES
============================================================ */
.social-title { left: 239px; top: 1842px; }
.social-divider { top: 1873px; }
.social-icon { position: absolute; top: 1858px; width: 28px; height: 28px; z-index: 3;
filter: drop-shadow(8px 8px 9px rgba(0, 0, 0, .25)); }
.social-icon-fb { left: 1397px; }
.social-icon-ig { left: 1435px; }
.media-card {
position: absolute;
top: 1913px; width: 288px; height: 360px;
background: var(--grey);
border: 3px solid var(--gold);
box-shadow: var(--shadow-card);
}
.media-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-card-1 { left: 238px; }
.media-card-2 { left: 550px; }
.media-card-3 { left: 862px; }
.media-card-4 { left: 1174px; }
.media-date {
position: absolute;
top: 2289px; width: 288px;
color: var(--gold); font-size: 20px; line-height: 20px; font-weight: 400;
}
.media-date-1 { left: 238px; }
.media-date-2 { left: 550px; }
.media-date-3 { left: 862px; }
.media-date-4 { left: 1174px; }
/* ============================================================
CONTACT US
============================================================ */
.contact-title { left: 238px; top: 2393px; }
.contact-divider { top: 2424px; }
/* The