/* ========================================================================== WORDPRESS BUILD Differences from the standalone stylesheet: 1. Design tokens live on .hype-page instead of :root, so nothing leaks into your theme or collides with theme variables of the same name. 2. The body rules are applied to .hype-page as well, so the block styles itself without needing to restyle . 3. An admin-bar offset keeps the fixed header clear of the WP toolbar. ========================================================================== */ /* ========================================================================== HYPE365 — DESIGN SYSTEM One stylesheet drives all six Dalton pages. Every page is assembled from the same parts, in the same order, so the set reads as one product: header → hero (+ spec strip) → ticker → content sections → CTA band → footer Location theming is a single body class (.loc-dalton / .loc-smyrna), so the same system drops onto Smyrna without touching any component rule. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ .hype-page{ /* surfaces — a real elevation ladder, not one flat black */ --bg: #08080a; --surface-1: #0e0e12; --surface-2: #15151b; --surface-3: #1d1d25; --surface-4: #262630; /* ink */ --ink: #f5f5f2; --ink-2: rgba(245,245,242,.66); --ink-3: rgba(245,245,242,.42); --ink-4: rgba(245,245,242,.22); /* hairlines */ --line: rgba(245,245,242,.10); --line-2: rgba(245,245,242,.06); /* brand accents */ --dalton: #ff8a1f; --dalton-2: #ffb020; --smyrna: #4fd8e8; --smyrna-2: #2fa8d8; /* active location accent — rebound by the body class */ --accent: var(--dalton); --accent-2: var(--dalton-2); --accent-ink:#1a0e00; --a08: rgba(255,138,31,.08); --a16: rgba(255,138,31,.16); --a40: rgba(255,138,31,.40); /* type */ --display: 'Anton','Arial Narrow',Impact,sans-serif; --body: 'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --mono: 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* fluid scale */ --fs-hero: clamp(2.6rem, 1.1rem + 6.4vw, 6.4rem); --fs-h2: clamp(1.9rem, 1.1rem + 3.2vw, 3.6rem); --fs-h3: clamp(1.15rem, 1rem + .9vw, 1.5rem); --fs-lede: clamp(1rem, .95rem + .38vw, 1.22rem); --fs-body: clamp(.94rem, .91rem + .18vw, 1.02rem); --fs-label: clamp(.62rem, .59rem + .14vw, .72rem); /* space + shape */ --pad: clamp(1.1rem, 4vw, 4rem); --section: clamp(3.5rem, 8vw, 7rem); --max: 1280px; --r-lg: 22px; --r-md: 16px; --r-sm: 10px; --pill: 999px; --header-h:70px; --ease: cubic-bezier(.19,1,.22,1); --ease2: cubic-bezier(.65,0,.35,1); } .loc-dalton{ --accent:#ff8a1f; --accent-2:#ffb020; --accent-ink:#1a0e00; --a08:rgba(255,138,31,.08); --a16:rgba(255,138,31,.16); --a40:rgba(255,138,31,.40); } .loc-smyrna{ --accent:#4fd8e8; --accent-2:#2fa8d8; --accent-ink:#00161a; --a08:rgba(79,216,232,.08); --a16:rgba(79,216,232,.16); --a40:rgba(79,216,232,.40); } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ .hype-page *,.hype-page *::before,.hype-page *::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 1.5rem); } .hype-page{ background:var(--bg); color:var(--ink); font-family:var(--body); font-size:var(--fs-body); line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; isolation:isolate; } /* Elementor Canvas gives us the whole viewport; make sure nothing shows through. */ body.hype-body{ margin:0; background:var(--bg,#08080a); overflow-x:hidden; } .hype-page :where(img,svg){ display:block; max-width:100%; } .hype-page a{ color:inherit; text-decoration:none; } .hype-page :where(ul,ol){ margin:0; padding:0; list-style:none; } .hype-page :where(h1,h2,h3,h4,p,figure){ margin:0; } .hype-page :where(button,input,select,textarea){ font:inherit; color:inherit; } .hype-page button{ background:none; border:0; cursor:pointer; } .hype-page :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; } .hype-page ::selection{ background:var(--accent); color:var(--accent-ink); } .wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); } .wrap-narrow{ max-width:860px; } .section{ padding-block:var(--section); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .skip{ position:absolute; left:.6rem; top:-4rem; z-index:999; background:var(--accent); color:var(--accent-ink); padding:.7rem 1.1rem; font:700 var(--fs-label)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; border-radius:var(--pill); transition:top .25s var(--ease2); } .skip:focus{ top:.6rem; } /* grain — keeps the flat fields from reading as vector art */ .grain{ position:fixed; inset:0; z-index:900; pointer-events:none; opacity:.045; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- 3. TYPE -------------------------------------------------------------------------- */ .display{ font-family:var(--display); font-weight:400; text-transform:uppercase; line-height:.9; letter-spacing:-.005em; } .h1{ font-size:var(--fs-hero); line-height:.86; } .h2{ font-size:var(--fs-h2); } .h3{ font-size:var(--fs-h3); line-height:1.05; } .lede{ font-size:var(--fs-lede); color:var(--ink-2); max-width:60ch; } .muted{ color:var(--ink-2); } .grad{ -webkit-text-fill-color:transparent; background-clip:text; -webkit-background-clip:text; background-image:linear-gradient(94deg,var(--accent) 0%,var(--accent-2) 55%,var(--accent) 100%); } /* chip — the small pill label used above every heading */ .chip{ display:inline-flex; align-items:center; gap:.55em; width:fit-content; align-self:flex-start; justify-self:start; font:500 var(--fs-label)/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); background:var(--a08); border:1px solid var(--a40); border-radius:var(--pill); padding:.62em 1em; } .chip::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; } .chip--plain{ color:var(--ink-3); background:transparent; border-color:var(--line); } /* section header — index number + label + heading, identical on every page */ .shead{ display:flex; flex-direction:column; gap:1rem; margin-bottom:clamp(2rem,4.5vw,3.2rem); } .shead__top{ display:flex; align-items:center; gap:1rem; } .shead__n{ font:500 var(--fs-label)/1 var(--mono); letter-spacing:.14em; color:var(--ink-4); flex:none; } .shead__rule{ height:1px; background:var(--line); flex:1; } .shead .lede{ max-width:56ch; } /* -------------------------------------------------------------------------- 4. BUTTONS -------------------------------------------------------------------------- */ .btn{ --btn-bg:var(--ink); --btn-fg:var(--bg); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.65em; font:700 var(--fs-label)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; padding:1.05em 1.7em; border-radius:var(--pill); background:var(--btn-bg); color:var(--btn-fg); border:1px solid transparent; overflow:hidden; isolation:isolate; transition:transform .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease2); } .btn::after{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--ink); opacity:0; transition:opacity .35s var(--ease2); } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn .ar{ transition:transform .3s var(--ease2); } .btn:hover .ar{ transform:translateX(4px); } .btn--primary{ background:linear-gradient(94deg,var(--accent),var(--accent-2)); color:var(--accent-ink); box-shadow:0 6px 22px -8px var(--a40); } .btn--primary:hover{ box-shadow:0 12px 30px -10px var(--a40); } .btn--primary::after{ background:var(--ink); } .btn--primary:hover::after{ opacity:1; } .btn--primary:hover{ color:var(--bg); } .btn--outline{ background:transparent; color:var(--ink); border-color:var(--line); } .btn--outline::after{ background:var(--ink); } .btn--outline:hover::after{ opacity:1; } .btn--outline:hover{ color:var(--bg); } .btn--ghost{ background:transparent; color:var(--accent); border-color:var(--a40); } .btn--ghost::after{ background:var(--accent); } .btn--ghost:hover::after{ opacity:1; } .btn--ghost:hover{ color:var(--accent-ink); } .btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; } .btn-row--center{ justify-content:center; } /* -------------------------------------------------------------------------- 5. HEADER -------------------------------------------------------------------------- */ .progress{ position:fixed; inset:0 auto auto 0; z-index:400; height:2px; width:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--accent),var(--accent-2)); } .header{ position:fixed; inset:0 0 auto 0; z-index:350; padding-block:.85rem; transition:padding .3s var(--ease2), background .3s var(--ease2), border-color .3s var(--ease2); border-bottom:1px solid transparent; } .header.stuck{ padding-block:.55rem; background:rgba(8,8,10,.82); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); border-bottom-color:var(--line-2); } .header__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; } .brand{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--display); text-transform:uppercase; line-height:1; font-size:clamp(1.1rem,.95rem + .7vw,1.4rem); } .brand__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; } .brand__loc{ font:500 .6rem/1 var(--mono); letter-spacing:.18em; color:var(--accent); align-self:center; } /* pill nav — the whole nav sits inside one rounded container */ .nav{ display:none; align-items:center; gap:.15rem; background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--pill); padding:.3rem; } .nav a{ position:relative; font-size:.82rem; color:var(--ink-2); padding:.55em 1em; border-radius:var(--pill); transition:color .25s var(--ease2), background .25s var(--ease2); } .nav a:hover{ color:var(--ink); background:var(--surface-3); } .nav a[aria-current="page"]{ color:var(--accent-ink); background:linear-gradient(94deg,var(--accent),var(--accent-2)); } .header__cta{ display:none; } .burger{ width:44px; height:44px; margin-right:-8px; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; } .burger span{ width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .28s var(--ease2), opacity .2s; } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .mnav{ position:fixed; inset:0; z-index:340; background:var(--surface-1); display:flex; flex-direction:column; justify-content:center; gap:1.6rem; padding:calc(var(--header-h) + 2rem) var(--pad) 2rem; clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease); overflow-y:auto; } .mnav.open{ clip-path:inset(0 0 0 0); } .mnav__list{ display:flex; flex-direction:column; gap:.4rem; } .mnav__list a{ display:flex; align-items:baseline; gap:.8em; font-family:var(--display); text-transform:uppercase; font-size:clamp(1.5rem,7vw,2.2rem); line-height:1.2; padding:.15em 0; transition:color .25s var(--ease2), transform .25s var(--ease2); } .mnav__list a:hover,.mnav__list a[aria-current="page"]{ color:var(--accent); transform:translateX(6px); } .mnav__list em{ font:500 .68rem/1 var(--mono); font-style:normal; color:var(--ink-4); } .mnav__foot{ padding-top:1.4rem; border-top:1px solid var(--line-2); display:grid; gap:.8rem; } .mnav__switch{ font:500 .7rem/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); } .mnav__switch a{ color:var(--ink); text-decoration:underline; text-underline-offset:4px; } /* -------------------------------------------------------------------------- 6. HERO -------------------------------------------------------------------------- */ .hero{ position:relative; isolation:isolate; overflow:hidden; padding-top:calc(var(--header-h) + clamp(2.6rem,7vw,5.5rem)); padding-bottom:clamp(2rem,5vw,3.5rem); } .hero__glow{ position:absolute; inset:0; z-index:-1; background: radial-gradient(58% 52% at 12% 8%, var(--a16), transparent 62%), radial-gradient(46% 44% at 88% 0%, rgba(255,255,255,.04), transparent 62%), linear-gradient(180deg,var(--surface-1),var(--bg) 62%); } /* subtle grid, gives the dark field structure */ .hero__grid{ position:absolute; inset:0; z-index:-1; opacity:.5; background-image: linear-gradient(to right, var(--line-2) 1px, transparent 1px), linear-gradient(to bottom, var(--line-2) 1px, transparent 1px); background-size:clamp(48px,7vw,90px) clamp(48px,7vw,90px); mask-image:radial-gradient(80% 70% at 50% 0%, #000, transparent 78%); -webkit-mask-image:radial-gradient(80% 70% at 50% 0%, #000, transparent 78%); } .hero__in{ position:relative; display:grid; gap:clamp(1.1rem,2.4vw,1.6rem); } .hero .h1{ max-width:16ch; } .hero .lede{ max-width:54ch; } .hero__crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font:500 var(--fs-label)/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); } .hero__crumb a{ color:var(--ink-3); transition:color .25s var(--ease2); } .hero__crumb a:hover{ color:var(--ink); } /* spec strip — 3–4 facts under every hero, keeps the pages rhythmically identical */ .specs{ display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--surface-1); overflow:hidden; margin-top:clamp(.8rem,2vw,1.4rem); } .spec{ padding:clamp(.9rem,2.2vw,1.3rem); border-bottom:1px solid var(--line-2); } .spec:nth-child(odd){ border-right:1px solid var(--line-2); } .spec:nth-last-child(-n+2){ border-bottom:0; } .spec__k{ font:500 var(--fs-label)/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); } .spec__v{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.1rem,.95rem + .9vw,1.5rem); line-height:1; margin-top:.5rem; } .spec__v .u{ color:var(--accent); } /* The location home is the entry point, so its hero runs larger and taller than the sub-page heroes while using the identical structure. */ .hero--home{ padding-top:calc(var(--header-h) + clamp(3.2rem,9vw,7rem)); padding-bottom:clamp(2.4rem,6vw,4rem); } .hero--home .h1{ font-size:clamp(3rem,1.2rem + 8vw,7.4rem); max-width:14ch; } .hero--home .lede{ max-width:58ch; } /* -------------------------------------------------------------------------- 7. TICKER -------------------------------------------------------------------------- */ .ticker{ border-block:1px solid var(--line-2); background:var(--surface-1); overflow:hidden; padding-block:clamp(.7rem,1.8vw,1rem); } .ticker__track{ display:flex; width:max-content; animation:tick 38s linear infinite; } .ticker__track > span{ display:inline-flex; align-items:center; gap:clamp(1rem,2.6vw,2rem); padding-right:clamp(1rem,2.6vw,2rem); font-family:var(--display); text-transform:uppercase; white-space:nowrap; font-size:clamp(1.05rem,.8rem + 1.6vw,2rem); line-height:1; color:transparent; -webkit-text-stroke:1px var(--ink-4); } .ticker__track b{ font-weight:400; color:var(--ink); -webkit-text-stroke:0; } .ticker__track i{ font-style:normal; color:var(--accent); -webkit-text-stroke:0; font-size:.5em; } @keyframes tick{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} } .ticker:hover .ticker__track{ animation-play-state:paused; } /* -------------------------------------------------------------------------- 8. BENTO + CARDS The spotlight follows the cursor via --mx/--my set in JS. -------------------------------------------------------------------------- */ .bento{ display:grid; gap:clamp(.7rem,1.6vw,1rem); grid-template-columns:1fr; } .card{ position:relative; isolation:isolate; overflow:hidden; background:var(--surface-1); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(1.25rem,2.8vw,1.9rem); display:flex; flex-direction:column; gap:.7rem; transition:border-color .4s var(--ease2), transform .4s var(--ease), background .4s var(--ease2); } .card::before{ content:''; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; pointer-events:none; background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%), var(--a16), transparent 70%); opacity:0; transition:opacity .4s var(--ease2); } .card:hover{ border-color:var(--a40); transform:translateY(-4px); background:var(--surface-2); } .card:hover::before{ opacity:1; } .card__n{ font:500 var(--fs-label)/1 var(--mono); letter-spacing:.16em; color:var(--accent); } .card p{ color:var(--ink-2); font-size:.95rem; } .card__icon{ width:44px; height:44px; border-radius:var(--r-sm); flex:none; display:grid; place-items:center; color:var(--accent); background:var(--a08); border:1px solid var(--a40); } .card__icon svg{ width:22px; height:22px; } .card__link{ margin-top:auto; padding-top:.5rem; display:inline-flex; align-items:center; gap:.5em; font:700 var(--fs-label)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); } .card__link .ar{ transition:transform .3s var(--ease2); } .card:hover .card__link .ar{ transform:translateX(4px); } /* bento spans — used on Sports and Trainers to break the uniform grid */ .card--wide{ grid-column:span 1; } .card--tall{ grid-row:span 1; } /* feature card with art panel */ .card--feature{ padding:0; } .card--feature .card__art{ aspect-ratio:16/10; } .card--feature .card__body{ padding:clamp(1.15rem,2.6vw,1.7rem); display:flex; flex-direction:column; gap:.6rem; flex:1; } /* art panels — documented swap points for real photography */ .art{ position:relative; overflow:hidden; } .art::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,8,10,.55), transparent 60%); } .art--basketball{ background:radial-gradient(70% 62% at 32% 96%, rgba(255,138,31,.42), transparent 66%), repeating-linear-gradient(58deg, rgba(255,255,255,.05) 0 1px, transparent 1px 44px), linear-gradient(150deg,#34220a,#160f06 62%,#0a0a0b); } .art--football{ background:radial-gradient(70% 60% at 66% 96%, rgba(255,176,32,.36), transparent 66%), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 32px), linear-gradient(168deg,#2a2109,#140f05 62%,#0a0a0b); } .art--paintball{ background:radial-gradient(66% 58% at 24% 92%, rgba(255,122,31,.40), transparent 64%), repeating-linear-gradient(122deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px), linear-gradient(140deg,#301f08,#170f05 60%,#0a0a0b); } .art--pickleball{ background:radial-gradient(70% 60% at 74% 94%, rgba(255,160,28,.34), transparent 66%), repeating-linear-gradient(38deg, rgba(255,255,255,.05) 0 1px, transparent 1px 50px), linear-gradient(162deg,#2b1e0a,#150e06 60%,#0a0a0b); } .art--volleyball{ background:radial-gradient(74% 62% at 46% 100%, rgba(255,138,31,.36), transparent 64%), repeating-linear-gradient(76deg, rgba(255,255,255,.05) 0 1px, transparent 1px 38px), linear-gradient(155deg,#37220b,#180f06 60%,#0a0a0b); } .art--coach{ background:radial-gradient(70% 62% at 30% 98%, rgba(255,150,30,.38), transparent 66%), repeating-linear-gradient(64deg, rgba(255,255,255,.05) 0 1px, transparent 1px 48px), linear-gradient(146deg,#31210a,#160f06 60%,#0a0a0b); } .art--facility{ background:radial-gradient(72% 62% at 52% 98%, rgba(255,138,31,.32), transparent 66%), repeating-linear-gradient(84deg, rgba(255,255,255,.045) 0 1px, transparent 1px 58px), linear-gradient(178deg,#2d1f0b,#150e05 62%,#0a0a0b); } .art--class{ background:radial-gradient(70% 60% at 40% 98%, rgba(255,170,40,.34), transparent 66%), repeating-linear-gradient(46deg, rgba(255,255,255,.05) 0 1px, transparent 1px 46px), linear-gradient(190deg,#33230c,#160f06 62%,#0a0a0b); } .art--speed{ background:radial-gradient(66% 58% at 22% 94%, rgba(255,138,31,.40), transparent 64%), repeating-linear-gradient(122deg, rgba(255,255,255,.06) 0 2px, transparent 2px 24px), linear-gradient(142deg,#33210a,#170f05 60%,#0a0a0b); } .art--plyo{ background:radial-gradient(64% 56% at 60% 96%, rgba(255,176,32,.36), transparent 64%), repeating-linear-gradient(28deg, rgba(255,255,255,.05) 0 1px, transparent 1px 30px), linear-gradient(172deg,#2e2009,#160f06 60%,#0a0a0b); } .art--strength{ background:radial-gradient(72% 62% at 44% 100%, rgba(255,150,30,.34), transparent 66%), repeating-linear-gradient(52deg, rgba(255,255,255,.045) 0 1px, transparent 1px 54px), linear-gradient(158deg,#2b1e0a,#150e06 60%,#0a0a0b); } .art--compete{ background:radial-gradient(78% 66% at 50% 102%, rgba(255,122,31,.44), transparent 64%), repeating-linear-gradient(104deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px), linear-gradient(158deg,#3a2409,#180f06 60%,#0a0a0b); } .media{ position:relative; overflow:hidden; border:1px solid var(--line-2); border-radius:var(--r-lg); aspect-ratio:4/3; min-height:220px; display:flex; align-items:flex-end; padding:clamp(1rem,2.4vw,1.5rem); } .media__art{ position:absolute; inset:0; z-index:-1; transition:transform 1.4s var(--ease); } .media:hover .media__art{ transform:scale(1.05); } .media__cap{ font:500 var(--fs-label)/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); background:rgba(8,8,10,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:var(--pill); padding:.6rem .95rem; } .media--tall{ aspect-ratio:3/4; } /* -------------------------------------------------------------------------- 9. SPLIT (copy beside media) -------------------------------------------------------------------------- */ .split{ display:grid; gap:clamp(1.6rem,4vw,3rem); align-items:center; } /* -------------------------------------------------------------------------- 10. LIST ROWS — numbered benefit rows, used on 4 of the 6 pages -------------------------------------------------------------------------- */ .rows{ border-top:1px solid var(--line-2); } .row{ position:relative; display:flex; align-items:center; gap:clamp(.9rem,2.4vw,1.6rem); padding:clamp(1rem,2.4vw,1.35rem) 0; border-bottom:1px solid var(--line-2); transition:padding-left .45s var(--ease), background .45s var(--ease2); } .row::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); transform:scaleY(0); transform-origin:bottom; transition:transform .45s var(--ease); } .row:hover{ padding-left:clamp(.7rem,1.8vw,1.2rem); background:linear-gradient(90deg,var(--a08),transparent 60%); } .row:hover::before{ transform:scaleY(1); transform-origin:top; } .row__n{ font:500 var(--fs-label)/1 var(--mono); letter-spacing:.14em; color:var(--ink-4); flex:none; width:2.2em; } .row__t{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.05rem,.95rem + 1vw,1.6rem); line-height:1.05; flex:1; transition:color .3s var(--ease2); } .row:hover .row__t{ color:var(--accent); } .row__ar{ color:var(--ink-4); flex:none; transition:transform .3s var(--ease2), color .3s var(--ease2); } .row:hover .row__ar{ transform:translateX(4px); color:var(--accent); } /* -------------------------------------------------------------------------- 11. CHIPS / FILTERS -------------------------------------------------------------------------- */ .tags{ display:flex; flex-wrap:wrap; gap:.5rem; } .tag{ font:500 var(--fs-label)/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:.75em 1.05em; border:1px solid var(--line); border-radius:var(--pill); color:var(--ink-2); transition:border-color .25s var(--ease2), color .25s var(--ease2), background .25s var(--ease2), transform .25s var(--ease2); } .tag:hover{ transform:translateY(-2px); color:var(--ink); border-color:var(--a40); } .tag[aria-pressed="true"]{ background:var(--a16); border-color:var(--accent); color:var(--accent); } .is-hidden{ display:none !important; } .empty{ padding:2.4rem 1rem; text-align:center; color:var(--ink-3); border:1px dashed var(--line); border-radius:var(--r-md); } /* -------------------------------------------------------------------------- 12. PLACEHOLDERS — unconfirmed client info, deliberately conspicuous -------------------------------------------------------------------------- */ .ph{ border:1px dashed var(--line); border-radius:var(--r-md); background:var(--surface-1); padding:clamp(1.1rem,2.6vw,1.5rem); color:var(--ink-3); font-size:.92rem; } .ph strong{ color:var(--ink-2); } .ph-tag{ display:inline-block; font:500 .7rem/1 var(--mono); color:var(--accent); background:var(--a08); border:1px solid var(--a40); padding:.42em .62em; border-radius:6px; } /* -------------------------------------------------------------------------- 13. INFO PANEL (contact details) -------------------------------------------------------------------------- */ .info{ display:grid; gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; } .info__b{ background:var(--surface-1); padding:clamp(1.2rem,2.8vw,1.7rem); display:flex; gap:1rem; align-items:flex-start; } .info__ico{ width:38px; height:38px; border-radius:var(--r-sm); flex:none; display:grid; place-items:center; color:var(--accent); background:var(--a08); border:1px solid var(--a40); } .info__ico svg{ width:19px; height:19px; } .info__k{ font:500 var(--fs-label)/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); } .info__v{ margin-top:.45rem; font-size:.98rem; } .map{ border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--surface-1); min-height:clamp(230px,32vw,380px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; text-align:center; padding:2rem 1.2rem; color:var(--ink-3); } .map svg{ width:30px; height:30px; color:var(--ink-4); } /* -------------------------------------------------------------------------- 14. FORMS -------------------------------------------------------------------------- */ .form{ display:grid; gap:1.05rem; } .form__row{ display:grid; gap:1.05rem; } .field{ display:grid; gap:.45rem; } .field__l{ font:500 var(--fs-label)/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); } .field__l .req{ color:var(--accent); } .field input,.field textarea,.field select{ width:100%; background:var(--surface-2); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm); padding:.92rem 1rem; font-size:.96rem; transition:border-color .25s var(--ease2), background .25s var(--ease2); } .field input::placeholder,.field textarea::placeholder{ color:var(--ink-4); } .field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--accent); background:var(--surface-3); } .field textarea{ min-height:9.5rem; resize:vertical; } .field--err input,.field--err textarea,.field--err select{ border-color:#ff5f5f; } .field__err{ display:none; font:500 .74rem/1.4 var(--mono); color:#ff8080; } .field--err .field__err{ display:block; } .note{ border:1px dashed var(--line); border-radius:var(--r-md); background:var(--surface-1); padding:1rem 1.15rem; font-size:.86rem; color:var(--ink-3); } .note strong{ color:var(--accent); } .btn.loading{ pointer-events:none; opacity:.7; } .btn.loading::before{ content:''; width:13px; height:13px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; animation:spin .7s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } .toasts{ position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%); z-index:800; display:grid; gap:.5rem; width:min(92vw,25rem); } .toast{ display:flex; gap:.7rem; align-items:flex-start; background:var(--surface-3); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r-sm); padding:.9rem 1rem; font-size:.9rem; animation:toastIn .4s var(--ease) both; } .toast--ok{ border-left-color:#4fe0a0; } .toast--err{ border-left-color:#ff5f5f; } .toast__x{ margin-left:auto; color:var(--ink-4); } @keyframes toastIn{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} } /* -------------------------------------------------------------------------- 15. CTA BAND — closes every page -------------------------------------------------------------------------- */ .cta{ position:relative; overflow:hidden; padding-block:clamp(3.4rem,8vw,6rem); text-align:center; border-top:1px solid var(--line-2); } .cta__glow{ position:absolute; inset:0; z-index:-1; background: radial-gradient(52% 62% at 20% 108%, var(--a16), transparent 64%), radial-gradient(52% 62% at 80% 108%, var(--a16), transparent 64%); } .cta .h2{ max-width:20ch; margin-inline:auto; } .cta .lede{ margin:1rem auto 0; max-width:52ch; } .cta .btn-row{ margin-top:clamp(1.5rem,3.4vw,2.2rem); } /* -------------------------------------------------------------------------- 16. FOOTER -------------------------------------------------------------------------- */ .footer{ border-top:1px solid var(--line-2); background:var(--surface-1); padding-block:clamp(2.6rem,6vw,4rem) 1.5rem; } .footer__top{ display:grid; gap:clamp(1.8rem,4vw,2.6rem); padding-bottom:clamp(1.8rem,4vw,2.6rem); border-bottom:1px solid var(--line-2); } .footer__brand{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.6rem,1.2rem + 1.6vw,2.1rem); line-height:1; } .footer__tag{ margin-top:.8rem; color:var(--ink-3); font-size:.9rem; max-width:32ch; } .footer__h{ font:500 var(--fs-label)/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); margin-bottom:1rem; } .footer__list{ display:grid; gap:.6rem; } .footer__list a,.footer__list span{ color:var(--ink-2); font-size:.92rem; transition:color .25s var(--ease2); } .footer__list a:hover{ color:var(--ink); } .footer__pip{ width:6px; height:6px; border-radius:50%; display:inline-block; margin-right:.5rem; transform:translateY(-1px); } .footer__pip--d{ background:var(--dalton); } .footer__pip--s{ background:var(--smyrna); } .footer__soc{ display:flex; flex-wrap:wrap; gap:.5rem; } .footer__soc a{ font:500 var(--fs-label)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line); border-radius:var(--pill); padding:.7em .95em; color:var(--ink-2); transition:border-color .25s var(--ease2), color .25s var(--ease2); } .footer__soc a:hover{ border-color:var(--ink); color:var(--ink); } .footer__bot{ display:grid; gap:.9rem; padding-top:1.5rem; font:500 .66rem/1.7 var(--mono); letter-spacing:.06em; color:var(--ink-4); } .totop{ position:fixed; right:clamp(.9rem,2.4vw,1.6rem); bottom:clamp(.9rem,2.4vw,1.6rem); z-index:300; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:rgba(8,8,10,.8); color:var(--ink-2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .3s var(--ease2), visibility .3s, transform .3s var(--ease2), border-color .3s var(--ease2); } .totop.on{ opacity:1; visibility:visible; transform:none; } .totop:hover{ border-color:var(--accent); color:var(--accent); } /* -------------------------------------------------------------------------- 17. REVEAL -------------------------------------------------------------------------- */ [data-rv]{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); } [data-rv="fade"]{ transform:none; } [data-rv].vis{ opacity:1; transform:none; } [data-rvg] > *{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease); } [data-rvg].vis > *{ opacity:1; transform:none; } [data-rvg].vis > *:nth-child(1){ transition-delay:0ms; } [data-rvg].vis > *:nth-child(2){ transition-delay:65ms; } [data-rvg].vis > *:nth-child(3){ transition-delay:130ms; } [data-rvg].vis > *:nth-child(4){ transition-delay:195ms; } [data-rvg].vis > *:nth-child(5){ transition-delay:260ms; } [data-rvg].vis > *:nth-child(6){ transition-delay:325ms; } /* -------------------------------------------------------------------------- 18. BREAKPOINTS -------------------------------------------------------------------------- */ @media (min-width:560px){ .form__row--2{ grid-template-columns:1fr 1fr; } .bento--2{ grid-template-columns:repeat(2,1fr); } } @media (min-width:760px){ .specs{ grid-template-columns:repeat(4,1fr); } .spec{ border-bottom:0; border-right:1px solid var(--line-2); } .spec:last-child{ border-right:0; } .spec:nth-child(odd){ border-right:1px solid var(--line-2); } .info{ grid-template-columns:1fr 1fr; } .footer__top{ grid-template-columns:1.6fr 1fr 1fr 1.1fr; } .footer__bot{ grid-template-columns:1fr auto; align-items:center; } .footer__bot .legal{ text-align:right; } .bento--3{ grid-template-columns:repeat(2,1fr); } } @media (min-width:860px){ .split{ grid-template-columns:1fr 1fr; } .split--wide{ grid-template-columns:1.12fr .88fr; } .split--flip .split__copy{ order:2; } .split--flip .split__media{ order:1; } .hero__in{ grid-template-columns:1fr; } } @media (min-width:1000px){ :root{ --header-h:78px; } .nav{ display:flex; } .header__cta{ display:inline-flex; } .burger{ display:none; } .mnav{ display:none; } .bento--3{ grid-template-columns:repeat(3,1fr); } /* Sports bento: first card spans two columns for a real editorial break */ .bento--sports{ grid-template-columns:repeat(3,1fr); } .bento--sports .card--wide{ grid-column:span 2; } /* the wide card is twice as wide, so its art needs a wider ratio or it towers over its neighbours and breaks the row rhythm */ .bento--sports .card--wide .card__art{ aspect-ratio:24/9; } .bento--sports .card--wide .h3{ font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem); } } /* -------------------------------------------------------------------------- 19. MOTION PREFERENCES -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } [data-rv],[data-rvg] > *{ opacity:1 !important; transform:none !important; } .ticker__track{ animation:none; } } /* -------------------------------------------------------------------------- 20. PRINT -------------------------------------------------------------------------- */ @media print{ .header,.mnav,.totop,.grain,.progress,.toasts,.ticker,.map{ display:none !important; } body{ background:#fff; color:#000; } .card,.info,.media{ border-color:#ccc; } } /* -------------------------------------------------------------------------- 21. WORDPRESS ADMIN BAR The toolbar is 32px tall (46px under 782px) and sits above everything, so the fixed header has to move down by the same amount when it is showing. -------------------------------------------------------------------------- */ body.admin-bar .header{ top:32px; } body.admin-bar .progress{ top:32px; } @media screen and (max-width:782px){ body.admin-bar .header{ top:46px; } body.admin-bar .progress{ top:46px; } }