/* ========================================================================== CHARROS OF ATHENS - landing page Palette sampled directly from the club crest: purple #5E247A · gold #E7B968 · bone #F2EDE4 · black #010101 ========================================================================== */ :root{ /* brand */ --ink: #050308; --ink-2: #0b0610; --ink-3: #120a1c; --purple: #5e247a; /* crest purple */ --purple-lt: #7c2fcb; /* headline violet */ --purple-dp: #2a0e3d; --purple-ink: #1b0a28; --gold: #f5b02e; /* UI gold */ --gold-lt: #e7b968; /* crest gold */ --bone: #f2ede4; /* crest bone */ --white: #ffffff; --mute: #a99fb4; /* type */ --display: 'Anton', 'Roboto Condensed', Impact, sans-serif; --ui: 'Oswald', 'Roboto Condensed', sans-serif; --body: 'Inter', system-ui, -apple-system, sans-serif; --dw: 400; /* display weight (Anton ships one weight) */ /* rhythm */ --pad: clamp(20px, 4.5vw, 64px); --nav-h: 92px; --nav-h-stuck: 50px; /* the slim dark bar once you scroll */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); } /* Greek has no Anton/Oswald coverage - swap to Roboto Condensed at black weight */ html[lang="el"]{ --display: 'Roboto Condensed', sans-serif; --ui: 'Roboto Condensed', sans-serif; --dw: 900; } /* Greek words run longer than the English - ease the display sizes down a step */ html[lang="el"] .hero__title{ font-size:clamp(36px, 6.1vw, 84px); } html[lang="el"] .panel__h{ font-size:clamp(26px, 3.3vw, 46px); } html[lang="el"] .loc__h{ font-size:clamp(24px, 2.7vw, 38px); } html[lang="el"] .vision__h1, html[lang="el"] .vision__h2{ font-size:clamp(30px, 3.8vw, 52px); } html[lang="el"] .modal__h{ font-size:clamp(28px, 4vw, 44px); } html[lang="el"] .cd__label{ letter-spacing:.18em; } /* digits need no Greek glyphs - keep the counter in Anton so the number renders identically on /el/ and / */ html[lang="el"] .cd__num{ font-family:'Anton', sans-serif; font-weight:400; } *,*::before,*::after{ box-sizing:border-box; } /* `display` declarations below would otherwise beat the hidden attribute */ [hidden]{ display:none !important; } html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--ink); color:var(--bone); font-family:var(--body); font-size:16px; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; } /* height:auto matters - without it the HTML height attribute stays a real height and any image capped by max-width renders squashed */ img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } ::selection{ background:var(--gold); color:var(--ink); } :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; } .skip-link{ position:fixed; top:8px; left:8px; z-index:200; transform:translateY(-160%); background:var(--gold); color:var(--ink); padding:10px 16px; font-family:var(--ui); font-weight:600; text-transform:uppercase; letter-spacing:.1em; transition:transform .25s; } .skip-link:focus{ transform:none; } .gold{ color:var(--gold); } .eyebrow{ margin:0 0 18px; font-family:var(--ui); font-weight:500; font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); } /* ---------- buttons ---------------------------------------------------- */ .btn{ --bg:transparent; --fg:var(--bone); --bd:currentColor; position:relative; display:inline-flex; align-items:center; gap:14px; padding:15px 26px; font-family:var(--ui); font-weight:600; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg); border:1.5px solid var(--bd); background:var(--bg); overflow:hidden; transition:color .4s var(--ease), border-color .4s var(--ease), transform .25s var(--ease); white-space:nowrap; } .btn::before{ content:''; position:absolute; inset:0; background:var(--gold); z-index:0; transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-out); } .btn > *{ position:relative; z-index:1; } .btn:hover::before{ transform:scaleX(1); } .btn:hover{ color:var(--ink); border-color:var(--gold); } .btn:active{ transform:translateY(1px); } .btn__arrow{ width:18px; height:18px; flex:none; transition:transform .4s var(--ease-out); } .btn:hover .btn__arrow{ transform:translateX(6px); } .btn--outline{ --bd:rgba(242,237,228,.34); } .btn--gold{ --bg:var(--gold); --fg:var(--ink); --bd:var(--gold); } .btn--gold::before{ background:var(--bone); } .btn--gold:hover{ color:var(--ink); border-color:var(--bone); } .btn--xl{ padding:22px 40px; font-size:15px; letter-spacing:.2em; } .btn--sm{ padding:11px 18px; font-size:11px; } .btn--block{ width:100%; justify-content:center; padding:19px 26px; } /* ---------- nav -------------------------------------------------------- */ .nav{ position:fixed; inset:0 0 auto; z-index:90; height:var(--nav-h); transition:background .45s var(--ease), backdrop-filter .45s, border-color .45s, height .45s var(--ease); border-bottom:1px solid transparent; } /* The bar is only dark once it sticks, and at full height that band covers a lot of the hero animation. So it collapses as it darkens: generous and transparent over the hero, slim and solid once you are past it. */ .nav.is-stuck{ height:var(--nav-h-stuck); background:rgba(5,3,8,.82); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); border-bottom-color:rgba(242,237,228,.09); } .nav__inner{ height:100%; padding:0 var(--pad); display:flex; align-items:center; gap:clamp(16px,3vw,44px); } .nav__logo{ flex:none; display:block; } /* One size throughout. The logo and the CTA used to shrink as the bar stuck, which meant two things resizing at once and read as a snap. Only the bar moves now; everything in it holds still. */ .nav__logo img{ width:auto; height:40px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.6)); transition:transform .5s var(--ease-out); } .nav__logo:hover img{ transform:scale(1.06); } /* the CTA is the tallest thing in the bar, so it is sized to fit the stuck one */ .nav__right .btn{ padding:10px 18px; font-size:11.5px; } .nav__links{ display:flex; gap:clamp(14px,2.4vw,34px); margin-inline:auto; } .nav__link{ position:relative; padding:8px 2px; font-family:var(--ui); font-weight:500; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(242,237,228,.72); transition:color .3s; } .nav__link::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); } .nav__link:hover{ color:var(--bone); } .nav__link:hover::after, .nav__link.is-active::after{ transform:scaleX(1); } .nav__link.is-active{ color:var(--bone); } .nav__right{ margin-left:auto; display:flex; align-items:center; gap:16px; } .lang{ display:inline-flex; align-items:center; gap:8px; } .lang__btn{ width:34px; height:23px; padding:0; display:block; position:relative; border:1px solid rgba(242,237,228,.2); overflow:hidden; line-height:0; opacity:.4; filter:grayscale(.75); transition:opacity .3s, filter .3s, border-color .3s, transform .3s var(--ease-out); } .lang__btn svg{ width:100%; height:100%; display:block; stroke:none; } .lang__btn:hover{ opacity:.8; filter:grayscale(.2); transform:translateY(-2px); } .lang__btn.is-on{ opacity:1; filter:none; border-color:var(--gold); } .lang__btn[disabled]{ opacity:.22; filter:grayscale(1) brightness(.6); cursor:not-allowed; border-color:rgba(242,237,228,.12); } .lang__btn[disabled]:hover{ opacity:.22; filter:grayscale(1) brightness(.6); transform:none; } .lang__btn.is-on::after{ content:''; position:absolute; inset:0; box-shadow:0 0 0 1px var(--gold) inset; } .burger{ display:none; width:42px; height:42px; padding:10px; flex-direction:column; justify-content:space-between; } .burger span{ display:block; height:2px; background:var(--bone); transition:transform .4s var(--ease), opacity .3s; } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); } /* ---------- section rail ---------------------------------------------- */ .rail{ position:fixed; z-index:80; right:calc(var(--pad) * .55); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:16px; align-items:flex-end; } .rail__i{ font-family:var(--ui); font-size:13px; letter-spacing:.1em; color:rgba(242,237,228,.42); text-shadow:0 1px 8px rgba(0,0,0,.65); transition:color .35s, transform .35s var(--ease-out); position:relative; padding-right:0; } .rail__i:hover{ color:rgba(242,237,228,.85); } .rail__i.is-on{ color:var(--gold); transform:translateX(-8px); } .rail__i.is-on::after{ content:''; position:absolute; right:-22px; top:50%; width:14px; height:1px; background:var(--gold); } /* ====================================================================== 01 · HERO ====================================================================== */ .hero{ position:relative; min-height:min(84svh, 760px); display:flex; align-items:center; padding:calc(var(--nav-h) + 28px) var(--pad) 52px; overflow:hidden; isolation:isolate; } .hero__media{ position:absolute; inset:0; z-index:-2; } /* scale(1) on purpose. This used to be 1.08 to give the parallax somewhere to travel, but on a wide screen cover already crops a 16:9 frame hard and the extra 8% pushed the badge past the edges. main.js now clamps the parallax to whatever overscan cover happens to leave, so the zoom is not needed for it. Keep this in step with HERO_SCALE in main.js. */ .hero__fabric{ width:100%; height:100%; object-fit:cover; object-position:62% 50%; transform:scale(1); will-change:transform; } /* embroidered patch, sized and placed rather than baked in, so it never crops badly. No perpetual motion - it settles once on load and then holds. */ .hero__patch{ position:absolute; top:50%; left:70%; transform:translate(-50%,-50%); width:min(44vw, 545px); will-change:transform; } .hero__patch img{ width:100%; height:auto; filter:drop-shadow(0 22px 38px rgba(0,0,0,.8)) drop-shadow(0 0 60px rgba(124,47,203,.3)); animation:patchIn 1.1s var(--ease-out) both; } /* Desktop takes the hero sequence, which already has the patch in it, so the placed one would be a second copy of the same badge. This breakpoint has to stay in step with the in index.html. */ @media (min-width: 901px){ .hero__patch{ display:none; } } @keyframes patchIn{ from{ opacity:0; transform:scale(.93) rotate(-2.5deg) } to { opacity:1; transform:none } } /* Heavy on the left, where the headline and copy need something to sit on, and almost nothing on the right, where the badge is. It used to carry a lot more on the right, plus a 26% purple radial centred at 66% 48% - which is the badge, not the background. That was fine when the patch was its own element stacked *above* this layer, but the patch is now part of the hero frames underneath it, so the veil was landing on the badge and costing it about a quarter of its brightness: gold thread read (181,122,62) instead of (245,176,46), cream came out a purple grey. */ .hero__vignette{ position:absolute; inset:0; background: linear-gradient(96deg, rgba(5,3,8,.97) 4%, rgba(5,3,8,.88) 26%, rgba(5,3,8,.20) 50%, rgba(5,3,8,.02) 68%, rgba(5,3,8,.12) 100%), radial-gradient(120% 90% at 66% 48%, rgba(94,36,122,.07), transparent 64%); } .hero__body{ position:relative; max-width:640px; width:100%; } .hero__title{ margin:0 0 30px; font-family:var(--display); font-weight:var(--dw); font-size:clamp(44px, 7.4vw, 104px); line-height:.94; letter-spacing:-.005em; text-transform:uppercase; } .hero__title .line{ display:block; overflow:hidden; } .hero__title .line > span{ display:block; } /* A tight glow, not a haze. This was 44px at .5, which bled about half a line height in every direction and read as a purple wash sitting over the words - more so once the vignette was eased and the right of the headline stopped sitting on near-black. Set the blur to 0 to drop it entirely. */ .line--purple{ color:var(--purple-lt); text-shadow:0 0 18px rgba(124,47,203,.3); } .hero__lede{ margin:0 0 16px; max-width:44ch; color:rgba(242,237,228,.8); font-size:clamp(15px,1.15vw,17px); } .hero__cta{ margin-top:38px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; } .reticle{ position:absolute; right:calc(var(--pad) + 46px); bottom:52px; width:44px; height:44px; color:var(--gold); opacity:.65; stroke-width:1.1; animation:spin 22s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg) } } /* ====================================================================== 02 · VISION + LA28 COUNTDOWN ====================================================================== */ .vision{ position:relative; overflow:hidden; background: radial-gradient(85% 120% at 28% 50%, #52208f 0%, #3a1360 42%, var(--purple-ink) 100%); padding:clamp(32px,3.8vw,58px) var(--pad) clamp(52px,6vw,92px); } .vision::before,.vision::after{ content:''; position:absolute; left:0; right:0; height:1px; background:rgba(245,176,46,.18); z-index:2; } .vision::before{ top:0 } .vision::after{ bottom:0 } /* --- draughting-table furniture, as in the reference: a faint grid, gold hairlines inset from each edge, registration crosshairs and edge ticks --- */ .vision__deco{ position:absolute; inset:0; pointer-events:none; z-index:1; } .vision__deco::before{ /* blueprint grid across the whole band */ content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(245,176,46,.085) 1px, transparent 1px), linear-gradient(90deg, rgba(245,176,46,.085) 1px, transparent 1px); background-size:76px 76px; background-position:center; -webkit-mask-image:radial-gradient(120% 100% at 50% 50%, #000 20%, transparent 88%); mask-image:radial-gradient(120% 100% at 50% 50%, #000 20%, transparent 88%); } .vision__deco::after{ /* gold hairlines inset from left and right */ content:''; position:absolute; top:0; bottom:0; left:clamp(10px,2.4vw,34px); right:clamp(10px,2.4vw,34px); border-left:1px solid rgba(245,176,46,.3); border-right:1px solid rgba(245,176,46,.3); } .tick{ position:absolute; width:15px; height:15px; opacity:.62; } .tick::before,.tick::after{ content:''; position:absolute; background:var(--gold); } .tick::before{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-.5px); } .tick::after { top:50%; left:0; right:0; height:1px; transform:translateY(-.5px); } .tick--tl{ top:clamp(14px,2vw,26px); left:clamp(24px,4vw,58px); } .tick--tr{ top:clamp(14px,2vw,26px); right:clamp(24px,4vw,58px); } .tick--bl{ bottom:clamp(14px,2vw,26px); left:clamp(24px,4vw,58px); } .tick--br{ bottom:clamp(14px,2vw,26px); right:clamp(24px,4vw,58px); } /* short rules climbing the left edge, like a measuring scale */ .scale{ position:absolute; left:clamp(10px,2.4vw,34px); top:50%; transform:translateY(-50%); display:grid; gap:9px; opacity:.5; } .scale span{ display:block; width:9px; height:1px; background:var(--gold); } .scale span:nth-child(3n+1){ width:19px; } .vision__grid{ /* the counter now spans the full panel width; the copy sits under it, right */ position:relative; z-index:2; display:block; max-width:1600px; margin-inline:auto; } .vision__count{ position:relative; width:100%; } .blueprint{ position:absolute; inset:-6% -4%; opacity:.55; pointer-events:none; background-image: linear-gradient(rgba(245,176,46,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(245,176,46,.16) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 78%); mask-image:radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 78%); } .countdown{ /* fixed fr columns matching the digit counts (3/2/2/2) keep each unit in place, so a ticking digit never nudges its neighbours */ position:relative; width:100%; display:grid; grid-template-columns:3fr 2fr 2fr 2fr; gap:clamp(14px,3.2vw,58px); align-items:end; } .cd__unit{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; } .cd__num{ position:relative; z-index:2; font-family:var(--display); font-weight:var(--dw); line-height:.82; font-size:clamp(58px, 14.4vw, 240px); letter-spacing:-.005em; color:transparent; -webkit-text-stroke:2px var(--gold); text-stroke:2px var(--gold); font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; display:block; text-align:left; white-space:nowrap; } .cd__num.is-tick{ animation:tick .34s var(--ease-out); } @keyframes tick{ 0%{ opacity:.5; transform:translateY(-4px) } 100%{ opacity:1; transform:none } } .cd__label{ font-family:var(--ui); font-weight:500; font-size:clamp(9px,.85vw,11.5px); letter-spacing:.28em; text-transform:uppercase; color:rgba(245,176,46,.72); } /* dead centre of the counter - it lands over the middle digits on purpose, those don't need to be read */ .vision__ball{ position:absolute; z-index:3; left:44.5%; top:59%; width:clamp(150px,19.5vw,300px); height:auto; transform:translate(-50%,-50%) rotate(21deg); filter:drop-shadow(0 30px 50px rgba(0,0,0,.7)); pointer-events:none; will-change:transform; } /* the caption sits on the same bottom line as the last line of the copy */ .vision__foot{ position:relative; z-index:2; margin-top:clamp(46px,6.4vw,96px); display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(24px,4vw,64px); } .vision__countcap{ position:relative; z-index:6; margin:0 0 2px; display:flex; align-items:center; gap:8px; flex:0 1 auto; font-family:var(--ui); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(242,237,228,.5); } .dot{ width:5px; height:5px; flex:none; border-radius:50%; background:var(--gold); animation:pulse 2s ease-in-out infinite; } @keyframes pulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(245,176,46,.5) } 70%{ opacity:.75; box-shadow:0 0 0 9px rgba(245,176,46,0) } } .vision__copy{ position:relative; z-index:5; margin:0 0 0 auto; flex:0 1 min(50ch, 43%); text-align:left; } .vision__h{ margin:0 0 14px; font-family:var(--display); font-weight:var(--dw); line-height:.95; text-transform:uppercase; } .vision__h1,.vision__h2{ display:inline; font-size:clamp(28px,3.3vw,48px); } .vision__h2{ color:var(--gold); } .vision__copy p{ margin:0; max-width:46ch; color:rgba(242,237,228,.86); font-size:15px; } /* ====================================================================== 03 · SPLIT PANELS ====================================================================== */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--ink); } .panel{ position:relative; min-height:clamp(340px,44vw,560px); overflow:hidden; isolation:isolate; display:flex; align-items:flex-end; } .panel__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform 1.1s var(--ease-out); will-change:transform; } .panel:hover .panel__img{ transform:scale(1.09); } /* two stacked plates: greyscale sits on top and dissolves to colour on hover */ .panel--train .panel__img{ object-position:16% 50%; } .panel--swap .panel__img--bw{ z-index:1; opacity:1; transition:transform 1.1s var(--ease-out), opacity .55s var(--ease); } .panel--swap:hover .panel__img--bw, .panel--swap:focus-within .panel__img--bw{ opacity:0; } .panel__shade{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(5,3,8,.95) 6%, rgba(5,3,8,.62) 38%, rgba(5,3,8,.1) 72%); } .panel__text{ position:relative; z-index:2; padding:clamp(24px,3.4vw,52px); } .panel__h{ margin:0 0 16px; font-family:var(--display); font-weight:var(--dw); line-height:.94; font-size:clamp(30px,3.9vw,56px); text-transform:uppercase; } .panel__h span{ display:block; transition:color .45s var(--ease); } /* rest: line 1 gold, line 2 bone. hover: the two simply swap colour */ .panel__h span:first-child{ color:var(--gold); } .panel__h span:last-child{ color:var(--bone); } .panel:hover .panel__h span:first-child, .panel:focus-within .panel__h span:first-child{ color:var(--bone); } .panel:hover .panel__h span:last-child, .panel:focus-within .panel__h span:last-child{ color:var(--gold); } .panel__tag{ position:relative; margin:0; padding-top:16px; font-family:var(--ui); font-weight:500; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:rgba(242,237,228,.82); } .panel__tag::before{ content:''; position:absolute; top:0; left:0; width:64px; height:2px; background:var(--gold); transform:scaleX(.45); transform-origin:left; transition:transform .55s var(--ease-out); } .panel:hover .panel__tag::before{ transform:scaleX(1); } /* ====================================================================== 04 · LOCATION ====================================================================== */ .loc{ display:grid; grid-template-columns:minmax(300px,.68fr) 1.42fr; background:var(--ink-2); border-top:1px solid rgba(242,237,228,.07); align-items:stretch; } /* heavy left inset pushes the block off the page edge and up against the map */ .loc__info{ padding:clamp(24px,2.6vw,40px) clamp(12px,1.4vw,22px) clamp(24px,2.6vw,40px) clamp(34px,5.4vw,104px); display:flex; flex-direction:column; justify-content:center; } /* when we train - the single most important fact in this section */ .when-row{ display:flex; gap:10px; margin:0 0 20px; align-items:stretch; } .when-row .when{ margin:0; flex:1 1 auto; } .when-row .when--dur{ flex:0 0 auto; min-width:104px; } .when{ display:grid; gap:1px; padding:13px 15px; border:1px solid rgba(245,176,46,.4); background:rgba(245,176,46,.07); border-left-width:4px; } .when__label{ font-family:var(--ui); font-weight:500; font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:rgba(245,176,46,.8); } .when__day{ font-family:var(--display); font-weight:var(--dw); font-size:clamp(22px,2.1vw,30px); line-height:1.04; text-transform:uppercase; color:var(--bone); letter-spacing:.005em; } .when__time{ font-family:var(--display); font-weight:var(--dw); font-size:clamp(22px,2.1vw,30px); line-height:1.04; color:var(--gold); } .loc__h{ margin:0 0 20px; font-family:var(--display); font-weight:var(--dw); font-size:clamp(21px,2.1vw,30px); line-height:1.06; text-transform:uppercase; } .loc__addr{ display:flex; gap:11px; font-style:normal; margin-bottom:20px; color:rgba(242,237,228,.68); font-size:13.5px; line-height:1.55; } .loc__addr strong{ display:block; font-family:var(--ui); font-weight:600; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone); margin-bottom:4px; } .pin{ width:20px; height:20px; flex:none; color:var(--purple-lt); margin-top:2px; } .pin--lg{ width:34px; height:34px; } .loc__feats{ list-style:none; margin:0; padding:0; display:grid; gap:10px; } .loc__feats li{ display:flex; align-items:center; gap:11px; font-size:13.5px; color:rgba(242,237,228,.76); } .chip{ flex:none; width:24px; height:24px; display:grid; place-items:center; border:1px solid rgba(124,47,203,.65); color:var(--purple-lt); border-radius:4px; font-family:var(--ui); font-size:11px; letter-spacing:.06em; } /* ---- map ---- stylised from the real street layout around Gazi ---------- */ .loc__map{ position:relative; background:var(--ink-2); display:grid; place-items:center; /* small left inset pulls the map box back toward the copy */ padding:clamp(24px,3.2vw,58px) clamp(20px,3vw,54px) clamp(24px,3.2vw,58px) clamp(4px,1vw,18px); } /* the map lives in its own framed window rather than bleeding to the edges */ .mapframe{ position:relative; width:100%; max-width:600px; aspect-ratio:5/4; background:#080512; border:1px solid rgba(245,176,46,.24); box-shadow:0 34px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(124,47,203,.12) inset; } /* The scaled map has to be clipped, but the hover card has to escape the box, so the clipping lives on a wrapper around the image rather than on the frame. overflow:hidden here would take the card with it. */ .mapframe__clip{ position:absolute; inset:0; overflow:hidden; } /* Google's attribution, bottom-left where they put it themselves. Required while the map is their imagery - see the note in index.html. */ .mapframe__credit{ /* bottom centre, over the water, clear of both corner brackets */ position:absolute; left:50%; transform:translateX(-50%); bottom:9px; z-index:4; pointer-events:none; font-family:var(--ui); font-weight:400; font-size:11px; letter-spacing:.05em; color:rgba(242,237,228,.52); text-shadow:0 1px 5px rgba(0,0,0,.95); } /* No vignette mask here. It used to dissolve the map into the panel, from before the map sat in a frame - but a mask is painted into the element and the transform scales the result, so the soft dome swelled with the scroll zoom and read as a bulge. The frame's overflow:hidden is the clip now. */ .mapimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; opacity:.95; } /* gold corner brackets */ .mapframe__c{ position:absolute; width:16px; height:16px; z-index:4; pointer-events:none; } .mapframe__c::before,.mapframe__c::after{ content:''; position:absolute; background:var(--gold); opacity:.8; } .mapframe__c::before{ width:100%; height:1px; } .mapframe__c::after { width:1px; height:100%; } .mapframe__c--tl{ top:9px; left:9px; } .mapframe__c--tr{ top:9px; right:9px; } .mapframe__c--tr::after{ right:0; } .mapframe__c--bl{ bottom:9px; left:9px; } .mapframe__c--bl::before{ bottom:0; } .mapframe__c--br{ bottom:9px; right:9px; } .mapframe__c--br::before{ bottom:0; } .mapframe__c--br::after { right:0; } /* left/top are written by JS from #siteAnchor - the SVG uses `slice`, so a percentage here would drift as the container's aspect ratio changes */ .loc__pin{ position:absolute; left:50%; top:48%; /* above the gold corner brackets (z-index 4), so the card clears them */ transform:translate(-50%,-50%); cursor:pointer; z-index:5; display:grid; place-items:center; width:56px; height:56px; } /* --pin-z / --pin-lift are driven by the scroll zoom in main.js. Hover folds into the same transform rather than replacing it, so the two compose instead of the pin snapping back to its unzoomed size on mouse over. */ .loc__pin .pin{ color:var(--gold); filter:drop-shadow(0 4px 12px rgba(0,0,0,.8)); transition:transform .35s var(--ease-out); transform:translateY(var(--pin-lift,0px)) scale(var(--pin-z,1)); } .loc__pin:hover .pin, .loc__pin:focus-visible .pin{ transform:translateY(calc(var(--pin-lift,0px) - 4px)) scale(calc(var(--pin-z,1) * 1.12)); } .loc__pinlabel{ position:absolute; top:calc(100% - 4px); left:50%; transform:translateX(-50%); /* max-content sizes to the longest line; the max-width lets the full venue name wrap onto two rather than running past the edge of the frame */ width:max-content; max-width:min(230px, 46vw); white-space:normal; text-align:center; pointer-events:none; font-family:var(--ui); font-weight:500; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(242,237,228,.85); line-height:1.5; text-shadow:0 2px 10px rgba(0,0,0,.95); } .loc__pulse{ position:absolute; width:40px; height:40px; border-radius:50%; background:rgba(245,176,46,.42); animation:ping 2.6s var(--ease-out) infinite; } @keyframes ping{ 0%{ transform:scale(.4); opacity:.85 } 100%{ transform:scale(2.6); opacity:0 } } /* hover / focus card */ .mapcard{ position:absolute; bottom:calc(100% + 12px); left:50%; transform:translate(-50%,8px); width:max-content; max-width:270px; padding:16px 18px; text-align:left; background:rgba(10,6,17,.97); border:1px solid rgba(245,176,46,.42); box-shadow:0 22px 44px rgba(0,0,0,.7); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s var(--ease), transform .28s var(--ease-out), visibility .28s; } .mapcard::after{ content:''; position:absolute; top:100%; left:50%; margin-left:-7px; border:7px solid transparent; border-top-color:rgba(245,176,46,.42); } .loc__pin:hover .mapcard, .loc__pin:focus-visible .mapcard, .loc__pin.is-open .mapcard{ opacity:1; visibility:visible; transform:translate(-50%,0); pointer-events:auto; } .mapcard__name{ margin:0 0 4px; font-family:var(--ui); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone); } .mapcard__addr{ margin:0 0 10px; font-size:13px; color:rgba(242,237,228,.62); line-height:1.5; } .mapcard__when{ margin:0 0 12px; padding-top:10px; border-top:1px solid rgba(242,237,228,.12); font-family:var(--ui); font-weight:600; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); } .mapcard__link{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ui); font-weight:500; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(242,237,228,.75); transition:color .25s; } .mapcard__link svg{ width:14px; height:14px; transition:transform .3s var(--ease-out); } .mapcard__link:hover{ color:var(--gold); } .mapcard__link:hover svg{ transform:translateX(4px); } /* ====================================================================== 05 · COLOURS BANNER ====================================================================== */ .banner{ position:relative; display:block; background:#0b0518; line-height:0; } .banner__art{ width:100%; height:auto; display:block; } /* ====================================================================== 06 · VALUES ====================================================================== */ .values{ position:relative; overflow:hidden; isolation:isolate; background:var(--ink); padding:clamp(46px,5.4vw,82px) var(--pad) clamp(66px,7.4vw,112px); } .values__inner{ position:relative; z-index:2; max-width:1500px; margin-inline:auto; display:grid; grid-template-columns:auto 1fr; gap:clamp(26px,4vw,64px); align-items:start; } .values__h{ margin:0; font-family:var(--display); font-weight:var(--dw); line-height:.9; font-size:clamp(30px,3.6vw,52px); text-transform:uppercase; color:var(--purple-lt); } .values__h span{ display:block; } .values__h::after{ content:''; display:block; width:56px; height:3px; background:var(--gold); margin-top:18px; } .values__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; } .value{ padding:2px clamp(18px,2.4vw,40px); border-left:1px solid rgba(242,237,228,.12); } .value__head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; } .value__icon{ width:clamp(52px,4.8vw,70px); height:clamp(52px,4.8vw,70px); flex:none; color:var(--gold); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; } .value__icon .v-fill{ fill:rgba(124,47,203,.55); stroke:rgba(124,47,203,.9); } .value h3{ margin:0; font-family:var(--display); font-weight:var(--dw); line-height:1; font-size:clamp(19px,1.9vw,27px); text-transform:uppercase; color:var(--bone); } .value__head + .value__lead{ position:relative; padding-top:16px; } .value__head + .value__lead::before{ content:''; position:absolute; top:0; left:0; width:34px; height:3px; background:var(--gold); } .value__lead{ margin:0 0 8px; font-size:14.5px; color:rgba(242,237,228,.9); } .value__body{ margin:0; font-size:14px; line-height:1.6; color:rgba(242,237,228,.6); max-width:32ch; } @media (max-width:1000px){ .values__inner{ grid-template-columns:1fr; gap:26px; } .values__list{ grid-template-columns:1fr; gap:22px; } .value{ border-left:0; border-top:1px solid rgba(242,237,228,.12); padding:18px 0 0; } .values__h::after{ margin-top:12px; } } /* ====================================================================== FOOTER ====================================================================== */ .foot{ background:var(--ink); padding:0 var(--pad) 26px; } /* slim social row sits between the copyright and the strapline */ .foot__social{ display:flex; gap:14px; align-items:center; } .foot__social a{ display:inline-flex; align-items:center; gap:9px; font-family:var(--ui); font-weight:500; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,237,228,.6); transition:color .25s, transform .25s var(--ease-out); } .foot__social a:hover{ color:var(--gold); transform:translateY(-1px); } .foot__social svg{ width:17px; height:17px; flex:none; } .foot__base{ max-width:1440px; margin:0 auto; padding-top:22px; border-top:1px solid rgba(242,237,228,.09); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; color:rgba(242,237,228,.4); } .foot__built{ font-family:var(--ui); letter-spacing:.14em; text-transform:uppercase; font-size:11px; } /* ====================================================================== JOIN MODAL ====================================================================== */ .modal{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:20px; } .modal[hidden]{ display:none; } .modal__backdrop{ position:absolute; inset:0; background:rgba(3,1,6,.86); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); opacity:0; transition:opacity .4s var(--ease); } .modal.is-open .modal__backdrop{ opacity:1; } .modal__card{ position:relative; width:min(560px,100%); max-height:calc(100svh - 40px); overflow-y:auto; padding:clamp(28px,4vw,46px); background:linear-gradient(168deg,#160a20 0%, var(--ink) 62%); border:1px solid rgba(245,176,46,.26); box-shadow:0 40px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(124,47,203,.16) inset; opacity:0; transform:translateY(26px) scale(.97); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); } .modal.is-open .modal__card{ opacity:1; transform:none; } .modal__x{ position:absolute; top:14px; right:14px; width:40px; height:40px; display:grid; place-items:center; color:rgba(242,237,228,.7); transition:color .25s, transform .35s var(--ease-out), background .25s; z-index:3; /* The crest is now in this corner, so the close control needs its own ground to stay findable and legible on top of it. A disc rather than a plain glyph - a bare cross over a busy badge is hard to see and harder to hit. */ background:rgba(10,5,16,.62); border-radius:50%; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } .modal__x:hover{ background:rgba(10,5,16,.85); } .modal__x:hover{ color:var(--gold); transform:rotate(90deg); } .modal__x svg{ width:20px; height:20px; stroke-width:1.8; } /* THE CREST, NOT A WATERMARK. It was a ghost - 9% opacity, greyscaled, bled off the corner - which reads as a texture rather than as the club. Full strength, sitting clear of the close button, and large enough to hold the top-right corner against a heading that holds the left. A shadow lifts it off the card so it does not look pasted on. Below the close button rather than behind it: the two were overlapping, and a crest with a cross through it is worse than no crest. */ /* THE CREST SITS IN THE SPACE THE WORDS LEAVE. A row, not an absolute position: the heading takes what it needs and the crest centres in the remainder, on both axes. Nothing has to know how tall "Join the Charros" wraps to, which is what made every fixed offset wrong on one screen size or another. */ .modal__top{ display:flex; align-items:center; gap:clamp(10px,3vw,24px); margin-bottom:28px; } .modal__intro{ flex:1 1 auto; min-width:0; } .modal__brand{ flex:0 0 auto; width:clamp(104px,22vw,161px); pointer-events:none; filter:drop-shadow(0 12px 28px rgba(0,0,0,.6)); } .modal__brand img{ display:block; width:100%; height:auto; } /* On a narrow phone the card is barely wider than the crest, so it stops competing with the words and steps aside. */ /* On a narrow phone the crest would take a third of the row from the words, so it steps out and the heading has the width to itself. */ @media (max-width:430px){ .modal__brand{ display:none; } .modal__sub{ max-width:34ch; } } .modal__h{ margin:0 0 12px; font-family:var(--display); font-weight:var(--dw); line-height:.94; font-size:clamp(32px,4.6vw,52px); text-transform:uppercase; } .modal__h span{ display:block; } /* A short measure on purpose. At 40ch this ran the full width of the card and straight under the crest; at 26 it breaks into three short lines beneath the heading and leaves the right-hand side to the badge. The eyebrow and heading are held to the same side for the same reason. */ /* The row handles the width now, so this only keeps the line from running long on a wide card. */ .modal__sub{ margin:0; color:rgba(242,237,228,.7); font-size:15px; max-width:30ch; } .form{ display:grid; gap:18px; } .field{ display:grid; gap:7px; } .field label{ font-family:var(--ui); font-weight:500; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(242,237,228,.6); } /* THE TEXTAREA IS NAMED ON EVERY RULE, not left to inherit. A textarea takes none of an input's styling by default - not the font, not the padding, not the border - so the optional message box would have rendered as a raw browser control in the middle of a branded form. */ .field input, .field textarea{ padding:14px 16px; font-family:var(--body); font-size:15.5px; color:var(--bone); background:rgba(242,237,228,.045); border:1px solid rgba(242,237,228,.16); transition:border-color .3s, background .3s, box-shadow .3s; } /* only the height is the reader's to change; dragging it wider would break the grid the rest of the form sits on */ .field textarea{ resize:vertical; min-height:96px; line-height:1.55; } .field input::placeholder, .field textarea::placeholder{ color:rgba(242,237,228,.26); } .field input:hover, .field textarea:hover{ border-color:rgba(242,237,228,.3); } .field input:focus, .field textarea:focus{ outline:none; border-color:var(--gold); background:rgba(242,237,228,.07); box-shadow:0 0 0 3px rgba(245,176,46,.14); } .field.is-bad input, .field.is-bad textarea{ border-color:#e0576b; background:rgba(224,87,107,.07); } .err{ margin:0; min-height:0; font-size:12.5px; color:#ff8497; } .err:empty{ display:none; } .consent{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; cursor:pointer; font-size:13.5px; color:rgba(242,237,228,.7); line-height:1.55; } .consent input{ position:absolute; opacity:0; width:0; height:0; } .consent__box{ width:20px; height:20px; margin-top:1px; display:grid; place-items:center; border:1px solid rgba(242,237,228,.3); transition:border-color .25s, background .25s; } .consent__box svg{ width:13px; height:13px; color:var(--ink); stroke-width:3; opacity:0; transform:scale(.5); transition:opacity .25s, transform .3s var(--ease-out); } .consent input:checked + .consent__box{ background:var(--gold); border-color:var(--gold); } .consent input:checked + .consent__box svg{ opacity:1; transform:none; } .consent input:focus-visible + .consent__box{ outline:2px solid var(--gold); outline-offset:3px; } .consent:hover .consent__box{ border-color:rgba(242,237,228,.55); } .is-bad .consent__box{ border-color:#e0576b; } .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .spinner{ position:absolute; width:19px; height:19px; border:2px solid rgba(5,3,8,.28); border-top-color:var(--ink); border-radius:50%; opacity:0; animation:spin .7s linear infinite; } .is-sending .btn__label, .is-sending .btn__arrow{ opacity:0; } .is-sending .spinner{ opacity:1; } .is-sending{ pointer-events:none; } .form__note{ margin:0; font-size:12px; color:rgba(242,237,228,.36); text-align:center; } .form__fail{ margin:0; padding:12px 14px; font-size:13.5px; color:#ff8497; border:1px solid rgba(224,87,107,.4); background:rgba(224,87,107,.08); } .done{ text-align:center; padding:12px 0 4px; } .done__tick{ width:74px; height:74px; margin:0 auto 22px; color:var(--gold); stroke-width:2.4; } .done__tick circle{ stroke-dasharray:151; stroke-dashoffset:151; animation:draw .6s var(--ease-out) forwards; } .done__tick path{ stroke-dasharray:40; stroke-dashoffset:40; animation:draw .4s var(--ease-out) .5s forwards; } @keyframes draw{ to{ stroke-dashoffset:0 } } .done h3{ margin:0 0 12px; font-family:var(--display); font-weight:var(--dw); font-size:clamp(30px,4vw,44px); text-transform:uppercase; } .done p{ margin:0 auto 22px; max-width:36ch; color:rgba(242,237,228,.72); } .done__tag{ font-family:var(--ui); font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:rgba(242,237,228,.55); margin-bottom:26px !important; line-height:2; } .done__tag span{ display:block; } /* ====================================================================== SCROLL REVEAL ====================================================================== */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); } .reveal.in{ opacity:1; transform:none; } .reveal-mask > span{ transform:translateY(105%); transition:transform 1s var(--ease-out); } .reveal-mask.in > span{ transform:none; } .reveal:nth-child(2){ transition-delay:.06s } .reveal:nth-child(3){ transition-delay:.12s } .reveal:nth-child(4){ transition-delay:.18s } .reveal:nth-child(5){ transition-delay:.24s } .line--purple{ transition-delay:.12s; } /* ====================================================================== RESPONSIVE ====================================================================== */ @media (max-width:1180px){ .rail{ display:none; } } /* the location strip and the purple bar both stay single-row well into tablet */ @media (max-width:900px){ .loc{ grid-template-columns:1fr; } .loc__map{ min-height:340px; border-left:0; border-top:1px solid rgba(242,237,228,.07); } /* the caption/copy row stacks, and the ball tucks beside the counter */ .vision__foot{ flex-direction:column; align-items:stretch; gap:18px; } .vision__copy{ flex:none; width:100%; order:1; } .vision__countcap{ order:2; margin:0; } /* stay on `left` - `right` fights the translate(-50%) */ .vision__ball{ left:76%; top:23%; width:clamp(112px,26vw,190px); opacity:.94; } } @media (max-width:900px){ :root{ --nav-h:78px; --nav-h-stuck:56px; } .nav__links{ position:fixed; inset:var(--nav-h) 0 auto; flex-direction:column; gap:0; margin:0; padding:8px var(--pad) 28px; background:rgba(5,3,8,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(242,237,228,.1); transform:translateY(-12px); opacity:0; pointer-events:none; visibility:hidden; transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; } .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto; visibility:visible; } /* text-align keeps the