/* ═══════════════════════════════════════════════════════════════════ TripleShot Pool — shared stylesheet Palette, type scale and shapes are taken from the 2026 brochure. Colour values are the literal gradient stops read out of the PDF's shading dictionaries, not eyedropper samples. ═══════════════════════════════════════════════════════════════════ */ :root{ /* brand — straight from the brochure's PDF gradient definitions */ --navy:#01033F; /* page background */ --navy-deep:#000342; /* gradient terminus, darkest wells */ --gold:#ED8717; /* primary accent */ --gold-mid:#D0771C; --cream:#FFF582; /* gradient bright end, ball highlights */ --peri:#7387E0; /* periwinkle — secondary accent, blue tubes */ --text:#F4F5FF; --muted:#AEB6E4; /* periwinkle-tinted body text */ --line:rgba(115,135,224,.26); --surface:rgba(115,135,224,.07); --surface-2:rgba(115,135,224,.12); --grad-gold:linear-gradient(100deg,var(--gold),var(--cream)); --grad-tube:linear-gradient(180deg,var(--cream),var(--gold) 45%,var(--navy-deep)); /* display face for titles — Gotham, per Anthony's decision (Houschka Rounded was tried and removed again) */ --font-display:"gotham","gotham-office",system-ui,sans-serif; --radius:18px; --radius-pill:999px; --wrap:1200px; --ease:cubic-bezier(.22,.68,.32,1); --nav-h:74px; } /* --------------------------------------------------------------- webfonts Gotham Office (the brochure's own files, converted to woff2) is wired in as the fallback tier behind the Adobe Fonts kit: the kit stays primary because it carries the full weight range (Office ships only 400/700 — the 300 body weight and 800 stat values would be faux-synthesized), and Office takes over cleanly if the kit ever fails to load. */ @font-face{ font-family:"gotham-office";font-weight:400;font-style:normal;font-display:swap; src:url("/assets/fonts/gotham-office-regular.woff2") format("woff2"); } @font-face{ font-family:"gotham-office";font-weight:700;font-style:normal;font-display:swap; src:url("/assets/fonts/gotham-office-bold.woff2") format("woff2"); } /* ---------------------------------------------------------------- reset */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)} body{ margin:0;background:var(--navy);color:var(--text); font-family:"gotham","gotham-office",system-ui,-apple-system,"Segoe UI",sans-serif; font-weight:300;font-size:1.0625rem;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit} :focus-visible{outline:2px solid var(--cream);outline-offset:3px;border-radius:4px} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px} .sec{padding:96px 0;position:relative} .sec-tight{padding:64px 0} .skip-link{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--gold);color:var(--navy);padding:12px 20px;font-weight:700;border-radius:0 0 10px 0; } .skip-link:focus{left:0} /* ------------------------------------------------------------- typography Gotham is licensed through Adobe Fonts (kit atm5rce). The standard width ships 100–400 and 700–900 — there is no 500/600, so the scale below uses 300 / 400 / 700 only. */ h1,h2,h3,h4,h5{margin:0;font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.005em} h1{font-size:clamp(2.6rem,6.2vw,4.6rem);text-transform:uppercase;letter-spacing:.005em} h2{font-size:clamp(1.9rem,3.6vw,2.9rem);text-transform:uppercase} h3{font-size:1.28rem} p{margin:0 0 18px} p:last-child{margin-bottom:0} .lead{font-size:clamp(1.08rem,1.7vw,1.32rem);color:var(--muted);font-weight:300;max-width:62ch} /* the brochure sets section titles in the gold→cream gradient */ .grad{ background:var(--grad-gold);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } .eyebrow{ display:inline-block;font-family:var(--font-display);font-size:.79rem;font-weight:700;letter-spacing:.19em; text-transform:uppercase;color:var(--peri);margin-bottom:14px; } /* ------------------------------------------------------------------ nav */ .nav{ position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h); display:flex;align-items:center; transition:background .3s var(--ease),backdrop-filter .3s var(--ease),border-color .3s; border-bottom:1px solid transparent; } .nav.scrolled{ background:rgba(1,3,63,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line); } .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px} .brand{display:flex;align-items:center;flex:0 0 auto} /* the brochure's lockup is stacked (≈1:1), so it needs more height than a horizontal wordmark would to read at the same optical size */ .brand img{height:46px;width:auto} .nav-links{display:flex;align-items:center;gap:34px} .nav-links > a{ font-size:.86rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);transition:color .25s;position:relative;padding:6px 0; } /* underline slide on text links only — .btn-primary uses ::after for its ball, so the button is excluded rather than having its ::after nuked */ .nav-links > a:not(.btn)::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:2px; background:var(--grad-gold);transition:right .3s var(--ease); } .nav-links > a:hover{color:var(--text)} .nav-links > a:not(.btn):hover::after,.nav-links > a:not(.btn)[aria-current="page"]::after{right:0} .nav-links > a[aria-current="page"]{color:var(--text)} /* ---------------------------------------------------------------- button Primary CTA follows the SCAN button from the UI flow file (LBE02_SG_UI_total flow.ai, artboard 1): gold gradient stadium with a ball nested in its right end, wrapped in a periwinkle ring with a gap. The gap is a TRANSPARENT border (background clipped to padding-box) so the ring works over photos as well as flat navy; the ring itself is a box-shadow, which follows the pill radius. */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 30px;min-height:50px;border-radius:var(--radius-pill); font-size:.86rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase; border:1px solid transparent;cursor:pointer; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s; } .btn-primary{ position:relative; border:5px solid transparent; background:linear-gradient(90deg,#ED8717,#FDB84A 75%) padding-box; color:var(--navy); padding:11px 62px 11px 28px; box-shadow:0 0 0 2px rgba(115,135,224,.85); } .btn-primary::after{ content:"";position:absolute;top:50%;right:5px;transform:translateY(-50%); width:34px;height:34px;border-radius:50%; background:radial-gradient(circle at 32% 28%,#FFF0B0,#FFD26E 45%,#F9A93C 78%,#F0912B); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 0 2px var(--peri); } /* ---------------------------------------------------- ball-shot hover EXPERIMENT - hero "Discover the games" button only (.btn-shot). One 1s run per hover (fill both; re-enter to replay): 1. the gold pill flips edge-on (rotateX) and comes back TripleShot blue (the stat-tile gradient) while the navy label fades out; 2. graphic element 10 - recoloured all-gold and pre-rotated 90deg so its pool ball leads - shoots in from the left with a SHUTTER-DRAG smear: blurred and stretched backwards from its leading edge while moving fast, snapping crisp as it lands (transform-origin right keeps the stretch trailing the ball, like a slow-shutter photo); 3. the label fades back in, now white. Unhovering snaps back to the gold state. */ .btn-shot{overflow:hidden} .btn-shot .bs-label{position:relative;z-index:1} .btn-shot:hover{animation:bsFlip 1s ease both} @keyframes bsFlip{ 0%{transform:perspective(600px) rotateX(0); background:linear-gradient(90deg,#ED8717,#FDB84A 75%) padding-box} 28%{transform:perspective(600px) rotateX(90deg); background:linear-gradient(90deg,#ED8717,#FDB84A 75%) padding-box} 34%{transform:perspective(600px) rotateX(90deg); background:linear-gradient(90deg,#232753,#5A6AB0) padding-box} 62%,100%{transform:perspective(600px) rotateX(0) translateY(-2px); background:linear-gradient(90deg,#232753,#5A6AB0) padding-box} } /* label: out with the gold, back in white over the blue */ .btn-shot:hover .bs-label{animation:bsLabel 1s ease both} @keyframes bsLabel{ 0%{opacity:1;color:var(--navy)} 22%{opacity:0;color:var(--navy)} 23%,64%{opacity:0;color:#fff} 100%{opacity:1;color:#fff} } /* the resting gold ball leaves during the flip */ .btn-shot:hover::after{animation:bsBallOut 1s ease both} @keyframes bsBallOut{0%{opacity:1}22%,100%{opacity:0}} /* the gold element-10 ball, shutter-smeared while in flight */ .btn-shot::before{ content:"";position:absolute;top:50%;right:10px; width:104px;height:42px;margin-top:-21px; background:url("/assets/brand/deco/deco-10-rot90-gold.svg") center/contain no-repeat; opacity:0;transform:translateX(-320px);pointer-events:none; transform-origin:right center; } .btn-shot:hover::before{animation:bsBallIn 1s cubic-bezier(.25,.9,.35,1) both} @keyframes bsBallIn{ 0%,34%{opacity:0;transform:translateX(-320px) scaleX(1.5);filter:blur(5px)} 42%{opacity:1;transform:translateX(-180px) scaleX(1.5);filter:blur(4px)} 62%{transform:translateX(-30px) scaleX(1.28);filter:blur(2.5px)} 74%{transform:translateX(5px) scaleX(1.04);filter:blur(.6px)} 82%,100%{opacity:1;transform:translateX(0) scaleX(1);filter:blur(0)} } @media(prefers-reduced-motion:reduce){ .btn-shot:hover,.btn-shot:hover::after,.btn-shot:hover::before, .btn-shot:hover .bs-label{animation:none} .btn-shot:hover .bs-label{color:var(--navy)} } .btn-ghost{border-color:var(--line);color:var(--text);background:transparent} .btn-ghost:hover{border-color:var(--peri);background:var(--surface);transform:translateY(-2px)} .nav-links .btn{letter-spacing:.1em} .nav-links > a.btn-primary{padding:11px 58px 11px 26px;color:var(--navy)} /* nav toggle (mobile) */ .nav-toggle{ display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:12px; background:var(--surface);cursor:pointer;position:relative; } .nav-toggle span{ position:absolute;left:13px;right:13px;height:2px;background:var(--text);border-radius:2px; transition:transform .3s var(--ease),opacity .2s; } .nav-toggle span:nth-child(1){top:16px} .nav-toggle span:nth-child(2){top:22px} .nav-toggle span:nth-child(3){top:28px} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ------------------------------------------------------------- decoration Numbered elements from the brochure, catalogued in site/assets/brand/deco/ as deco-01..18. They are pure decoration: aria-hidden, never interactive, and each section carries at most one so the family never fights itself. .tubes is absolutely positioned, so its parent MUST establish a positioning context or the layer escapes to the page origin (this is why .sec and .pillar are position:relative). */ .tubes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .deco{position:absolute;opacity:.85} .pillar{position:relative} /* Content sits ABOVE the decoration. .tubes is positioned, so without this it paints over the (unpositioned) text - which forced the elements to be cropped down to slivers to stay clear. With text on top they can overlap generously and read as background, exactly as they do in the brochure. */ .sec > .wrap,.hero > .wrap,.subhero > .wrap,.pillar > .pillar-head,.pillar > .grid-3{position:relative;z-index:1} /* 13 - hero, bottom right, hard against the edge. Needs its own stacking level: .hero-media follows it in the DOM and would paint over it. */ .hero .tubes{z-index:1} .deco-hero-br{right:0;bottom:-64px;width:221px} /* 10 - The Games, top right. top:6px (not negative) keeps the rounded cap of the arch inside the clip - a negative offset shears it flat. The mask fades the tails out at the bottom so the element dissolves into the page instead of ending on a hard cut. */ .deco-games-tr{ right:-18px;top:6px;width:161px; -webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.35) 82%,transparent 100%); mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.35) 82%,transparent 100%); } /* Rotated placements. A rotated element keeps its ORIGINAL box for layout and only paints turned, so left/top here refer to the upright box - the visible result is offset by half the difference between width and height. Easier to nudge these by eye than to compute. */ /* 13 - turned 90deg, sitting ON the boundary between The Games and the Business Case rather than inside either one. Its layer opts out of clipping so the element can straddle the gap; it is pointer-events:none decoration, so escaping the section box is harmless. */ /* 13 - turned 90deg, lying across the gap between The Games and the Business Case. It lives in its OWN zero-height band between the two sections rather than inside either of them: .sec-pattern carries overflow:hidden (it clips the oversized rotated background pattern), which cropped everything of this element that reached above the Business Case's top edge. A standalone band has nothing to clip against, and z-index 5 keeps it over both neighbours' content (which sits at z-index 1) while staying under the fixed nav. */ .deco-band{position:relative;height:0;z-index:5} .deco-gap-rot{ /* Rotation keeps the upright box for layout, so left/top describe the PRE-rotation rectangle - the painted result is offset by half the difference between width and height (59.7px each way here). */ left:60px;top:-127px;width:118px; transform:rotate(90deg);transform-origin:center; } /* contact subhero keeps a quiet single element (1) so the page does not regress to bare - swap the number whenever you like */ .deco-contact-tr{right:5%;top:-52px;width:74px} /* ------------------------------------------------------- pattern sections Seamless tile extracted from the tiling pattern in the UI flow file (116.22 x 110.754pt cell, painted there at 45deg). The rotation cannot be baked into a rectangular CSS tile (the rotated lattice has no small rectangular period), so the tile repeats unrotated on an oversized layer which is then rotated as a whole. In the source the curls sit at only a few percent above the background — keep the opacity LOW. */ .sec-pattern{position:relative;overflow:hidden} .sec-pattern::before{ content:"";position:absolute;left:-45%;top:-45%;width:190%;height:190%; background:url("/assets/brand/pattern-tile.svg") 0 0/116px 111px repeat; transform:rotate(-45deg);opacity:.045;pointer-events:none; } /* lift content above the pattern - but NOT .tubes, which must stay position:absolute or it collapses to zero height and clips its element */ .sec-pattern > *:not(.tubes){position:relative;z-index:1} /* ----------------------------------------------------------------- hero */ .hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden} .hero-media{position:absolute;inset:0;z-index:0} .hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* continuous crossfade between the two venue renders: 20s cycle = a fade every 10 seconds. The second image animates over the first; the overlay gradient (::after) sits above both. */ .hero-media .hf-b{opacity:0;animation:heroXfade 20s ease-in-out infinite} @keyframes heroXfade{ 0%,42%{opacity:0} 50%,92%{opacity:1} 100%{opacity:0} } @media(prefers-reduced-motion:reduce){.hero-media .hf-b{animation:none}} .hero-media::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(1,3,63,.62) 0%,rgba(1,3,63,.35) 38%,rgba(1,3,63,.94) 88%,var(--navy) 100%); } .hero .wrap{position:relative;z-index:2;padding-bottom:88px;padding-top:calc(var(--nav-h) + 60px)} .hero-logo{ width:min(460px,72vw);margin-bottom:28px; filter:drop-shadow(0 4px 18px rgba(0,0,0,.65)) drop-shadow(0 0 52px rgba(0,0,0,.5)); animation:logoFloat 6.5s ease-in-out infinite; } @keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @media(prefers-reduced-motion:reduce){.hero-logo{animation:none}} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} /* subhero — inner pages */ .subhero{position:relative;padding:calc(var(--nav-h) + 76px) 0 44px;overflow:hidden} .subhero .wrap{position:relative;z-index:2} .crumb{ display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--peri);margin-bottom:18px; } .crumb a{transition:color .25s} .crumb a:hover{color:var(--cream)} .subhero h1{margin-bottom:20px} /* ---------------------------------------------------------------- cards */ .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:28px 26px;transition:border-color .3s,background .3s,transform .3s var(--ease); } .card:hover{border-color:rgba(115,135,224,.5);background:var(--surface-2)} .card h3{margin-bottom:10px;color:var(--peri);text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem} .card p{color:var(--muted);font-size:.98rem} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} /* ------------------------------------------------------------ stat tiles Exact copy of brochure p.18: stadium tiles with a thin periwinkle ring set off by a gap, a dark-to-light periwinkle body gradient, dark line icons (extracted from the PDF), gradient gold values and the glowing gold ROI tile. Colours are sampled from the v2 brochure render. */ .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:660px} .stat{ font-family:var(--font-display); position:relative;display:flex;align-items:center;gap:16px; min-height:98px;padding:12px 26px;border-radius:var(--radius-pill); border:4px solid transparent; background:linear-gradient(180deg,#232753,#5A6AB0) padding-box; box-shadow:0 0 0 1.5px #7182C0; color:#fff; } /* the paired tiles join like a split stadium: rounded on the OUTER end, near-square on the inner end (brochure p.18) */ .stats .stat:nth-child(odd):not(.stat-wide){border-radius:999px 12px 12px 999px} .stats .stat:nth-child(even):not(.stat-wide){border-radius:12px 999px 999px 12px} .stat-wide{grid-column:1/-1} .st-ic{flex:0 0 auto;width:52px;height:auto} .st-ic[src*="icon-table"]{width:38px} .st-tx{flex:1;display:flex;flex-direction:column;align-items:center;line-height:1.12;gap:1px} .st-tx-l{align-items:flex-start} .st-r .st-tx{padding-left:4px} .st-val{ font-size:2.35rem;font-weight:800;letter-spacing:0; background:linear-gradient(90deg,#FFE9A0,#F0922B); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent; } .st-val sup{font-size:.55em;vertical-align:super} .st-lbl{font-weight:700;font-size:1.05rem;color:#fff} /* time tile: 45' + 30' = 75' with the labels under each number */ .stat-time .st-eq{flex:1;display:flex;align-items:baseline;justify-content:center;gap:16px} .st-seg{display:inline-flex;flex-direction:column;align-items:center;line-height:1.1} .st-seg b{font-size:2.35rem;font-weight:800} .st-seg span{font-weight:700;font-size:1.05rem} .t-op{font-size:2.35rem;font-weight:800;transform:translateY(-5px)} .t-45{color:#FBD98B} .t-30{color:#F09E3D} .t-75{color:#E87817} /* ROI tile: glowing gold */ .stat-gold{ background:linear-gradient(180deg,#B7691E,#6F402D 55%,#372138) padding-box; box-shadow:0 0 0 2px #ED8615; } .stat-gold .st-val{ background:none;color:#fff;-webkit-text-fill-color:#fff;font-size:2.6rem; } .stat-gold .st-val i{font-style:normal;color:#FBD98B;-webkit-text-fill-color:#FBD98B} .st-ic-party{width:46px} /* logo band — "Developed by / The makers of", as on brochure p.3 */ .logo-band{ display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start; margin-top:76px;text-align:center; } .logo-band .eyebrow{display:block;margin-bottom:20px} /* the two marks have very different aspect ratios (JoraVision ~3.2:1, RemarkaBall ~5.4:1), so at equal WIDTH their heights differ and bottom alignment threw the labels out of line. A fixed-height slot centres each mark instead, keeping both sizes as-is but levelling the rows. */ .logo-band .lb-slot{display:grid;place-items:center;height:76px;transition:transform .25s var(--ease),opacity .25s} .logo-band a.lb-slot:hover{transform:translateY(-2px);opacity:.85} .logo-band img{margin:0;width:min(232px,72%);height:auto} /* ---------------------------------------------------------------- footer */ footer{border-top:1px solid var(--line);padding:64px 0 34px;position:relative;overflow:hidden} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;margin-bottom:44px} .foot-logo{width:190px;margin-bottom:18px} .foot-tag{color:var(--muted);max-width:34ch;font-size:.96rem} .foot-col h5{ font-size:.78rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase; color:var(--peri);margin:0 0 16px; } .foot-col a,.foot-col span{display:block;color:var(--muted);font-size:.96rem;margin-bottom:9px;transition:color .25s} .foot-col a:hover{color:var(--cream)} .foot-bottom{ border-top:1px solid var(--line);padding-top:22px; display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between; font-size:.85rem;color:var(--muted); } .foot-legal{display:flex;gap:22px} .foot-legal a:hover{color:var(--cream)} .foot-entity{font-size:.79rem;color:rgba(174,182,228,.72);margin-top:14px;line-height:1.7} /* ---------------------------------------------------------- reveal-on-scroll */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} } /* ═══════════════════════════════════════════════════════════════════ CONTACT PAGE Layout and the booking-embed treatment follow the Stories for Live contact page, retuned for this palette. ═══════════════════════════════════════════════════════════════════ */ .contact-grid{display:grid;grid-template-columns:1fr;gap:36px;max-width:820px;margin:0 auto} @media(min-width:1000px){ .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:none;align-items:start} .contact-inline{grid-column:1/-1} .contact-aside .booking-embed{height:1285px} } .contact-form-panel,.contact-aside{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 32px; } .contact-form-panel h2,.contact-aside h2{font-size:1.45rem;margin-bottom:0} .contact-aside > p{color:var(--muted);font-weight:300;margin:0 0 18px} .contact-form-panel h2{margin-bottom:22px} /* contact strip above the panels */ .contact-inline{display:flex;flex-direction:column;gap:5px} .contact-inline .brand-line{font-size:1.15rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px} .contact-inline .ci-row{display:flex;color:var(--muted);font-weight:300;width:fit-content;transition:color .25s} .contact-inline a.ci-row:hover{color:var(--cream)} .ci-label{flex:0 0 auto;min-width:12.5em;padding-right:12px;color:var(--peri);font-weight:400} /* form fields */ .ff{margin-bottom:16px;display:flex;flex-direction:column;gap:7px} .ff label,.ff .ff-label{font-size:.82rem;font-weight:700;letter-spacing:.06em;color:var(--peri);text-transform:uppercase} .ff input,.ff textarea,.ff select{ width:100%;background:rgba(0,3,66,.55);border:1px solid var(--line);border-radius:12px; padding:13px 15px;color:var(--text);font:inherit;font-weight:300; transition:border-color .25s,background .25s; } .ff input:focus,.ff textarea:focus,.ff select:focus{ border-color:var(--peri);outline:none;background:rgba(0,3,66,.8); } .ff textarea{resize:vertical;min-height:132px} .ff-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} /* multi-select chips */ .chip-group{display:flex;flex-wrap:wrap;gap:10px} .chip{ font-weight:400;font-size:.9rem;color:var(--muted); background:rgba(0,3,66,.55);border:1px solid var(--line);border-radius:var(--radius-pill); padding:9px 18px;min-height:44px;cursor:pointer; transition:border-color .25s,background .25s,color .25s,transform .25s var(--ease); } .chip:hover{border-color:var(--peri);color:var(--text);transform:translateY(-1px)} .chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:700} /* phone + country dial code. The select is sized to its content so long country names do not squeeze the number field; the native dropdown is kept (rather than a custom listbox) because it gives free keyboard type-ahead - typing "net" jumps to Netherlands - across 248 entries. */ .phone-row{display:flex;gap:10px} /* Custom country picker. The native