/* ═══════════════════════════════════════════════════════════ KENT AXELL — Psychological Illusionist Dark theatre green · antique gold · cream ═══════════════════════════════════════════════════════════ */ :root{ /* ground */ --ink: #0B120E; --ink-2: #0F1913; --ink-3: #131F18; --panel: #33473C; --panel-2: #3B5245; /* accent */ --gold: #D9A94B; --gold-lite: #F0CE82; --gold-deep: #A9762B; --teal: #6FB6C8; /* echo of Kent's stage logo — used sparingly */ /* type */ --cream: #F4EFE4; /* Dim tints are floored at ratios that clear WCAG AA on --ink (#0B120E): 70% ≈ 8.0:1 · 55% ≈ 5.6:1 · 52% ≈ 5.1:1. Nothing dimmer is used for text. */ --cream-70: rgba(244,239,228,.70); --cream-55: rgba(244,239,228,.55); --cream-40: rgba(244,239,228,.52); --line: rgba(244,239,228,.13); --line-gold: rgba(217,169,75,.30); --f-disp: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --f-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --wrap: 1200px; --pad: clamp(20px, 5vw, 40px); --r: 4px; --ease: cubic-bezier(.22,.61,.36,1); } /* ── fonts ────────────────────────────────────────────── */ /* Path is relative to THIS file (assets/css/), so it needs ../ to reach assets/fonts/. Space is %20-encoded for stricter static hosts. */ @font-face { font-family: "Cloudster"; src: url('../fonts/Cloudsters%20Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } /* ── reset ─────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box } /* No `hidden` fallback here on purpose: on Safari < 16 that would create a scroll container on the root and break the sticky header. Those browsers fall back to the rule below; modern ones get `clip` on both. */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; overflow-x:clip } body{ margin:0; background:var(--ink); color:var(--cream); font-family:var(--f-body); font-size:16px; line-height:1.68; font-weight:400; -webkit-font-smoothing:antialiased; font-optical-sizing:auto; /* The tilted marquee bands are deliberately wider than the viewport. `hidden` on alone does not stop mobile browsers letting the viewport itself drag sideways, so both elements are clipped. `clip` is used over `hidden` because it does NOT create a scroll container — which is what keeps the sticky header working. */ overflow-x:hidden; /* fallback: Safari < 16 */ overflow-x:clip; } img{ max-width:100%; display:block } a{ color:inherit; text-decoration:none } ul{ margin:0; padding:0; list-style:none } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer } h1,h2,h3,h4{ margin:0; font-family:var(--f-disp); font-weight:300; letter-spacing:-.01em } p{ margin:0 0 1.05em } p:last-child{ margin-bottom:0 } ::selection{ background:var(--gold); color:var(--ink) } :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* Honeypot. Off-canvas rather than display:none — some bots skip anything that is not rendered. Never give this a label. */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; } .skip{ position:absolute; left:-999px; top:0; z-index:200; background:var(--gold); color:var(--ink); padding:10px 18px; font-weight:600; } .skip:focus{ left:8px; top:8px } .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) } /* ── scroll reveal ─────────────────────────────────────── */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease), transform .75s var(--ease); transition-delay:calc(var(--d, 0) * 110ms); } .reveal[data-d="1"]{ --d:1 } .reveal[data-d="2"]{ --d:2 } .reveal[data-d="3"]{ --d:3 } .reveal[data-d="4"]{ --d:4 } .reveal.in{ opacity:1; transform:none } /* ═══════════ TYPOGRAPHIC SYSTEM ═══════════ */ /* Headings alternate light + heavy word-groups, matching the reference rhythm. Light words are the base weight; carries the punch. */ .hero__title, .sechead h2, .signup__title{ font-family:var(--f-disp); font-weight:300; text-transform:uppercase; letter-spacing:.004em; line-height:.98; text-wrap:balance; } /* heavy weights close up on their own — caps still need a hair of air */ .hero__title strong, .sechead h2 strong, .signup__title strong{ font-weight:800; letter-spacing:-.014em } /* little gold diamond divider */ .fleuron{ display:block; margin:22px auto 0; width:100%; max-width:140px; position:relative; height:9px } .fleuron::before{ content:""; position:absolute; inset-block:50%; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--line-gold) 22%,var(--line-gold) 78%,transparent); } .fleuron::after{ content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; translate:-50% -50%; rotate:45deg; background:var(--gold); } .sechead--left .fleuron{ margin-inline:0 } .sechead{ text-align:center; margin-bottom:clamp(40px,6vw,68px) } .sechead--left{ text-align:left } .sechead h2{ font-size:clamp(28px,4vw,50px) } .sechead--sm h2{ font-size:clamp(24px,3.1vw,38px) } .sechead__sub{ margin:14px 0 0; font-family:var(--f-disp); font-size:clamp(12px,1.4vw,15px); font-weight:500; text-transform:uppercase; letter-spacing:.18em; color:var(--cream-55); } .lead{ font-size:clamp(17px,1.9vw,20px); color:var(--cream); font-weight:400 } /* ── sections ──────────────────────────────────────────── */ .sec{ padding-block:clamp(64px,9vw,118px) } .sec--tight{ padding-top:0 } /* ═══════════ BUTTONS ═══════════ */ .btn{ --bg:var(--gold); display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 30px; font-family:var(--f-disp); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.13em; border-radius:var(--r); position:relative; overflow:hidden; transition:transform .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease), color .28s var(--ease); will-change:transform; } .btn--sm{ padding:12px 22px; font-size:11px; letter-spacing:.14em } /* No colored glow: gold on near-black already separates. The inset top highlight gives the cap a lit edge; depth comes from a neutral shadow, not a halo. */ .btn--gold{ background:var(--gold); color:#14100A; box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 6px 18px -10px rgba(0,0,0,.75); } .btn--gold:hover{ background:var(--gold-lite); transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 12px 26px -12px rgba(0,0,0,.85) } .btn--gold:active{ transform:translateY(0) } .btn--ghost{ background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px rgba(244,239,228,.35); } .btn--ghost:hover{ background:rgba(244,239,228,.07); box-shadow:inset 0 0 0 1px var(--gold); color:var(--gold-lite); transform:translateY(-2px) } .ctarow{ text-align:center; margin-top:clamp(34px,4vw,52px) } /* ═══════════ UTILITY BAR ═══════════ */ .utilitybar{ background:var(--ink-2); border-bottom:1px solid var(--line); font-size:12.5px; position:relative; z-index:60; } .utilitybar__in{ display:flex; align-items:center; justify-content:flex-end; gap:26px; padding-block:9px; flex-wrap:wrap; } .utilitybar__item{ display:inline-flex; align-items:center; gap:7px; color:var(--cream-55); letter-spacing:.02em; transition:color .22s var(--ease); } .utilitybar__item:hover{ color:var(--cream) } .utilitybar__item .i{ width:13px; height:13px; fill:var(--gold); flex:none } .utilitybar__item--gold{ color:var(--gold) } .utilitybar__item--gold:hover{ color:var(--gold-lite) } .pulse{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; position:relative } .pulse::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--gold); animation:pulse 2.4s var(--ease) infinite; } @keyframes pulse{ 0%{ transform:scale(1); opacity:.7 } 70%,100%{ transform:scale(3.2); opacity:0 } } /* ═══════════ HEADER ═══════════ */ .header{ position:sticky; top:0; z-index:70; background:rgba(11,18,14,0); transition:background-color .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease); } .header.stuck{ background:rgba(11,18,14,.93); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line), 0 18px 40px -30px #000; } .header__in{ display:flex; align-items:center; gap:24px; min-height:76px; } .brand{ display:inline-flex; align-items:center; gap:11px; margin-right:auto } .brand__mark{ width:38px; height:38px; flex:none } .brand__mark svg{ width:100%; height:100%; fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round } .brand__mark rect{ stroke-width:1.2; opacity:.85 } .brand__type{ display:flex; flex-direction:column; line-height:1.1 } .brand__type[alt]{ width:auto; height:auto; max-width:240px; max-height:80px; display:block; flex-direction:initial; } .brand__name{ font-family: "Cloudster", sans-serif; font-weight:400; font-size:16px; text-transform:uppercase; letter-spacing:.12em; color:var(--cream); font-feature-settings:'liga'; } .brand__sub{ font-family:var(--f-disp); font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:.10em; color:var(--gold); margin-top:3px; } .nav{ display:flex; align-items:center; gap:30px } .nav > a:not(.btn){ font-family:var(--f-disp); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.15em; color:var(--cream-70); padding-block:6px; position:relative; transition:color .22s var(--ease); } .nav > a:not(.btn)::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold); transition:right .32s var(--ease); } .nav > a:not(.btn):hover{ color:var(--cream) } .nav > a:not(.btn):hover::after{ right:0 } .nav__cta{ display:none } .burger{ display:none; width:38px; height:38px; flex-direction:column; justify-content:center; gap:5px; padding:0 6px } .burger span{ display:block; height:1.5px; background:var(--cream); transition:transform .32s var(--ease), opacity .2s var(--ease) } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0 } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) } /* ═══════════ HERO ═══════════ */ .hero{ position:relative; min-height:clamp(560px, 92vh, 900px); display:flex; align-items:flex-end; margin-top:-76px; /* slide under the transparent sticky header */ padding-top:76px; overflow:hidden; } .hero__media{ position:absolute; inset:0 } .hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; animation:heroDrift 26s var(--ease) infinite alternate; } @keyframes heroDrift{ from{ transform:scale(1.04) } to{ transform:scale(1.12) } } .hero__scrim{ position:absolute; inset:0; background: radial-gradient(120% 78% at 50% 34%, rgba(11,18,14,0) 0%, rgba(11,18,14,.55) 62%, rgba(11,18,14,.9) 100%), linear-gradient(to bottom, rgba(11,18,14,.72) 0%, rgba(11,18,14,.18) 32%, rgba(11,18,14,.86) 76%, var(--ink) 100%); } .hero__in{ position:relative; z-index:2; text-align:center; padding-bottom:clamp(96px,13vh,150px); padding-top:clamp(60px,10vh,110px); } .hero__title{ font-family: "Centra No. 2", "Helvetica Neue", Arial, sans-serif; font-weight:800; font-size:clamp(40px,8vw,98px); margin:0; text-shadow:0 2px 40px rgba(0,0,0,.55); } .hero__kicker{ margin:20px 0 0; font-family:var(--f-disp); font-size:clamp(12px,1.7vw,16px); font-weight:500; text-transform:uppercase; letter-spacing:.26em; color:var(--cream-70); } .hero__body{ margin:26px auto 0; max-width:620px; color:var(--cream-70); font-size:15px; font-weight:400; } .hero__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px } .scrolldown{ position:absolute; left:50%; bottom:26px; translate:-50% 0; z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--f-disp); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.20em; color:var(--cream-40); transition:color .25s var(--ease); } .scrolldown:hover{ color:var(--gold) } .scrolldown svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; animation:bob 2.6s var(--ease) infinite } @keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.65 } 50%{ transform:translateY(5px); opacity:1 } } /* ═══════════ MARQUEE BANDS ═══════════ */ .marquee{ background:var(--gold); color:#14100A; padding-block:13px; width:114%; margin-inline:-7%; position:relative; z-index:5; box-shadow:0 14px 44px -22px rgba(0,0,0,.85); overflow:hidden; user-select:none; } .marquee--tilt-a{ rotate:-2.4deg; margin-top:-38px; margin-bottom:14px } .marquee--tilt-b{ rotate:2deg; margin-block:clamp(30px,5vw,54px) } .marquee__track{ display:flex; width:max-content; animation:slide 34s linear infinite } .marquee__track--rev{ animation-direction:reverse } @keyframes slide{ to{ transform:translateX(-50%) } } .marquee__set{ display:flex; align-items:center; gap:34px; padding-right:34px; flex:none } .marquee__set span{ font-family:var(--f-disp); font-size:clamp(18px,2.6vw,33px); font-weight:800; text-transform:uppercase; letter-spacing:-.016em; white-space:nowrap; } .marquee__set i{ font-style:normal; font-size:13px; opacity:.55 } /* ═══════════ INTRO ═══════════ */ .intro__grid{ display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(32px,5vw,64px); align-items:center; } .intro__copy p{ color:var(--cream-70); font-weight:400 } .intro__copy .lead{ color:var(--cream); margin-bottom:1.1em } .intro__copy .btn{ margin-top:12px } .ticks{ display:grid; gap:12px; margin:28px 0 } .ticks li{ position:relative; padding-left:32px; font-size:14.5px; color:var(--cream); } .ticks li::before{ content:""; position:absolute; left:0; top:.42em; width:16px; height:16px; border-radius:50%; background:var(--gold); } .ticks li::after{ content:""; position:absolute; left:4.5px; top:calc(.42em + 4.8px); width:7px; height:3.5px; border-left:1.7px solid #14100A; border-bottom:1.7px solid #14100A; rotate:-45deg; } .ticks--sm li{ font-size:14px; color:var(--cream-70) } .ticks--sm li::before{ width:14px; height:14px } .ticks--sm li::after{ left:4px; top:calc(.42em + 4.2px); width:6px; height:3px } .intro__fig{ margin:0; position:relative; border-radius:var(--r); overflow:hidden } .intro__fig img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .9s var(--ease); } .intro__fig:hover img{ transform:scale(1.035) } .intro__fig::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px var(--line-gold); border-radius:var(--r); } .intro__fig figcaption{ position:absolute; left:16px; bottom:14px; font-family:var(--f-disp); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.15em; color:var(--cream-70); background:rgba(11,18,14,.6); backdrop-filter:blur(6px); padding:6px 12px; border-radius:2px; } /* ═══════════ SHOWREEL ═══════════ */ .reelgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px) } .reel{ position:relative; display:block; border-radius:var(--r); overflow:hidden; background:var(--ink-2); } .reel img{ width:100%; aspect-ratio:16/10; object-fit:cover; filter:brightness(.72) saturate(.9); transition:transform .8s var(--ease), filter .5s var(--ease); } .reel:hover img{ transform:scale(1.06); filter:brightness(.85) saturate(1) } .reel::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .35s var(--ease); } .reel:hover::after{ box-shadow:inset 0 0 0 1px var(--line-gold) } .reel__play{ position:absolute; left:50%; top:50%; translate:-50% -50%; width:56px; height:56px; border-radius:50%; background:#E03B2E; display:grid; place-items:center; box-shadow:0 10px 30px -10px rgba(0,0,0,.8); transition:transform .35s var(--ease), background-color .35s var(--ease); } .reel__play svg{ width:24px; height:24px; fill:#fff; margin-left:2px } .reel:hover .reel__play{ transform:scale(1.12); background:#F04437 } .reel__label{ position:absolute; left:14px; top:12px; font-family:var(--f-disp); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--cream); background:rgba(11,18,14,.66); backdrop-filter:blur(6px); padding:6px 11px; border-radius:2px; } /* ═══════════ GREEN PANELS (references / faq) ═══════════ */ .panelwrap{ padding-block:clamp(28px,4vw,52px) } .panel{ background:var(--panel); border-radius:6px; padding:clamp(34px,5.4vw,66px) clamp(22px,4.4vw,58px); box-shadow:0 30px 70px -50px #000; } .panel .sechead{ margin-bottom:clamp(30px,4vw,46px) } .panel .sechead h2{ color:var(--cream) } /* the panel is lighter than --ink, so dim text needs lifting to hold AA on it */ .panel .sechead__sub, .panel .faq__body{ color:var(--cream-70) } .logos{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.6vw,18px) } .logos li{ display:grid; place-items:center; aspect-ratio:2.5/1; background:rgba(11,18,14,.28); border:1px solid rgba(244,239,228,.10); border-radius:3px; font-family:var(--f-disp); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--cream-70); transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .logos li:hover{ border-color:var(--line-gold); color:var(--gold); transform:translateY(-2px) } /* ═══════════ CLIENT WALL ═══════════ */ /* The one light section on the site. Brand logos are drawn for white grounds — several of these (Chase, Capital One) are near-black and would disappear on --ink, so the panel inverts to paper and curves into a deep gold band. --gold is too light to carry cream text (1.9:1), hence the darker --gold-band at 4.6:1. */ .clients{ --paper:#F3EEE3; /* Two related golds, both pinned by contrast rather than taste: the band is the richest gold that still clears 4.5:1 against white text (4.68:1); the eyebrow sits on paper, which needs a darker value to clear the same bar (4.61:1). */ --gold-band:#9A6B15; --gold-ink:#8F6220; background:var(--gold-band); position:relative; } .clients__panel{ background:var(--paper); padding-block:clamp(56px,8vw,104px) clamp(78px,11vw,150px); /* shallow ellipse: panel is full height at centre, shorter at the edges */ border-radius:0 0 50% 50% / 0 0 clamp(28px,5vw,72px) clamp(28px,5vw,72px); } .clients__in{ text-align:center } .clients .eyebrow{ color:var(--gold-ink) } .clients__title{ font-family:var(--f-disp); font-weight:300; font-size:clamp(27px,4.2vw,52px); line-height:1.08; letter-spacing:-.018em; color:var(--ink); max-width:24ch; margin:0 auto; text-wrap:balance; } /* ── continuous left-scrolling logo loop ── */ .logoloop{ /* Centred window rather than full-bleed: shows ~5 logos at desktop and loops the rest through, so it reads as a curated set, not a banner. */ max-width:min(860px, 100%); margin:clamp(38px,5.5vw,64px) auto 0; overflow:hidden; /* Fade the ends so logos dissolve rather than getting chopped at the edge. Wider fade than full-bleed needed — in a narrow window a hard edge is much more noticeable. */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent); mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent); } .logoloop__track{ display:flex; width:max-content; animation:logoloop 42s linear infinite; } /* -50% lands set 2 exactly where set 1 began, so the restart is invisible. */ @keyframes logoloop{ to{ transform:translateX(-50%) } } /* Pause on hover so a logo can actually be looked at (and hovered). */ .logoloop:hover .logoloop__track, .logoloop:focus-within .logoloop__track{ animation-play-state:paused } .logoloop__set{ display:flex; align-items:center; flex:none; gap:clamp(26px,3.2vw,44px); padding-right:clamp(26px,3.2vw,44px); /* keeps spacing even across the seam */ } .logoloop__set li{ display:flex; align-items:center; justify-content:center } .logoloop__set img{ height:clamp(26px,3.2vw,38px); /* Cap the wide wordmarks (Chase, ConEd, Make-A-Wish run ~200px uncapped) so no single logo dominates the narrower window. */ width:auto; max-width:150px; object-fit:contain; /* resting: desaturated so the row reads as one texture, not a clip-art wall */ filter:grayscale(1); opacity:.52; transition:filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease); } .logoloop__set li:hover img, .logoloop__set li:focus-within img{ filter:grayscale(0); opacity:1; transform:scale(1.12); } /* ── pull quote on the gold band ── */ .pullquote{ padding-block:clamp(52px,7.5vw,96px) clamp(56px,8vw,104px); text-align:center; } .pullquote blockquote{ /* px, not ch: the blockquote inherits 16px, so a ch value here would be measured against that rather than the 40px quote text inside it. */ margin:0 auto; max-width:660px; } .pullquote p{ font-family:var(--f-disp); font-weight:300; font-size:clamp(21px,3.4vw,40px); line-height:1.16; letter-spacing:-.014em; color:#fff; margin:0; text-wrap:balance; } .pullquote cite{ display:block; margin-top:20px; font-family:var(--f-body); font-style:normal; font-size:13px; font-weight:500; letter-spacing:.04em; color:#fff; opacity:.88; } @media (prefers-reduced-motion: reduce){ /* Stop the loop and let the row wrap statically instead. */ .logoloop__track{ animation:none; width:100%; flex-wrap:wrap; justify-content:center } .logoloop__set{ flex-wrap:wrap; justify-content:center } .logoloop__set + .logoloop__set{ display:none } /* the duplicate is only for looping */ .logoloop{ -webkit-mask-image:none; mask-image:none } .logoloop__set li:hover img, .logoloop__set li:focus-within img{ transform:none } } /* ═══════════ SERVICE ROWS ═══════════ */ .srow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4.2vw,56px); align-items:center; margin-bottom:clamp(46px,6vw,88px); } .srow:last-child{ margin-bottom:0 } .srow--flip .srow__fig{ order:2 } .srow__fig{ margin:0; border-radius:var(--r); overflow:hidden; position:relative } .srow__fig img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .9s var(--ease); } .srow:hover .srow__fig img{ transform:scale(1.04) } .srow__fig::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px var(--line); } .srow__copy h3{ font-size:clamp(19px,2.35vw,27px); font-weight:800; text-transform:uppercase; line-height:1.12; letter-spacing:-.014em; margin-bottom:16px; } .srow__copy > p{ color:var(--cream-70); font-weight:400; font-size:15px } .srow__copy .btn{ margin-top:8px } /* ═══════════ ABOUT BAND ═══════════ */ .about{ background: linear-gradient(to bottom, var(--ink) 0%, #171E12 40%, #1C2314 100%); padding-block:clamp(56px,8vw,104px); position:relative; } .about::before, .about::after{ content:""; position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--line-gold),transparent); } .about::before{ top:0 } .about::after{ bottom:0 } .about__in{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,70px); align-items:center; } .about__fig{ margin:0; position:relative; isolation:isolate } /* glow sits behind the cut-out portrait — ::before so it paints first, no negative z-index */ .about__fig::before{ content:""; position:absolute; left:50%; bottom:-4%; translate:-50% 0; width:76%; height:30%; border-radius:50%; background:radial-gradient(ellipse at center, rgba(217,169,75,.20), transparent 70%); pointer-events:none; } .about__fig img{ position:relative; width:100%; max-width:400px; margin-inline:auto; filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)); mask-image: linear-gradient(180deg, black 0%, black 50%, transparent 100%); mask-size: 100% 100%; mask-repeat: no-repeat; } .about__h3{ font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.2em; color:var(--gold); margin-bottom:16px; } .about__copy p{ color:var(--cream-70); font-weight:400; font-size:15.5px } .about__tag{ color:var(--cream) !important } .about__tag strong{ color:var(--gold-lite); font-weight:500 } .about__copy .btn{ margin-top:14px } /* ═══════════ TESTIMONIALS ═══════════ */ .quotes__rail{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); } @media (max-width:1000px) and (min-width:821px){ .quotes__rail{ grid-template-columns:repeat(2,1fr) } } .quote{ margin:0; background:linear-gradient(#141C16, #0E150F); border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:16px; transition:border-color .35s var(--ease), transform .35s var(--ease); } .quote:hover{ border-color:var(--line-gold); transform:translateY(-3px) } .stars{ color:var(--gold); font-size:14px; letter-spacing:.22em } .quote p{ color:var(--cream-70); font-size:14.5px; font-weight:400; line-height:1.75; flex:1 } .quote footer{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line) } /* Generated initials rather than the reviewers' Google profile photos — those are personal images we have no licence to republish, and they are only available at screenshot resolution. Google itself falls back to initials. */ /* Selector must out-rank `.quote footer span` (0,1,2), which otherwise wins and paints the initials in small tracked gold instead of dark. */ .quote footer .avatar{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(145deg, var(--gold) 0%, var(--gold-deep) 100%); color:#14100A; font-family:var(--f-disp); font-size:13px; font-weight:800; letter-spacing:.01em; text-transform:uppercase; box-shadow:0 1px 0 rgba(255,255,255,.25) inset; } .quote__who{ display:flex; flex-direction:column; gap:2px; min-width:0 } .quote footer b{ font-family:var(--f-disp); font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--cream); } .quote footer span{ font-family:var(--f-disp); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.16em; color:var(--gold); } .dots{ display:none; justify-content:center; gap:9px; margin-top:26px } .dots button{ width:7px; height:7px; border-radius:50%; background:rgba(244,239,228,.24); transition:background-color .3s var(--ease), transform .3s var(--ease); } .dots button[aria-current="true"]{ background:var(--gold); transform:scale(1.35) } /* ═══════════ GALLERY ═══════════ */ .grid6{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,18px) } .grid6 figure{ margin:0; border-radius:var(--r); overflow:hidden; position:relative; background:var(--ink-2) } .grid6 img{ width:100%; aspect-ratio:4/3; object-fit:cover; filter:saturate(.86) brightness(.94); transition:transform .85s var(--ease), filter .5s var(--ease); } .grid6 figure:hover img{ transform:scale(1.07); filter:saturate(1.05) brightness(1) } .grid6 figure::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .35s var(--ease); } .grid6 figure:hover::after{ box-shadow:inset 0 0 0 1px var(--line-gold) } /* ═══════════ FAQ ═══════════ */ .faq{ display:grid; gap:10px } .faq details{ background:rgba(11,18,14,.30); border:1px solid rgba(244,239,228,.10); border-radius:3px; transition:border-color .3s var(--ease), background-color .3s var(--ease); } .faq details[open]{ border-color:var(--line-gold); background:rgba(11,18,14,.46) } .faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px clamp(16px,2.4vw,26px); font-family:var(--f-disp); font-size:clamp(14px,1.5vw,15.5px); font-weight:600; letter-spacing:.005em; line-height:1.5; color:var(--cream); transition:color .25s var(--ease); } .faq summary::-webkit-details-marker{ display:none } .faq summary:hover{ color:var(--gold-lite) } .faq summary::after{ content:""; flex:none; width:9px; height:9px; border-right:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold); rotate:45deg; translate:0 -2px; transition:rotate .32s var(--ease), translate .32s var(--ease); } .faq details[open] summary::after{ rotate:225deg; translate:0 2px } .faq__body{ padding:0 clamp(16px,2.4vw,26px) 20px; color:var(--cream-70); font-size:14.5px; font-weight:400; max-width:78ch; } /* ═══════════ BOOKING ═══════════ */ .book{ position:relative; padding-block:clamp(58px,8vw,104px); overflow:hidden; } .book__media{ position:absolute; inset:0 } .book__media img{ width:100%; height:100%; object-fit:cover; object-position:center 40% } .book__scrim{ position:absolute; inset:0; background: linear-gradient(to bottom, var(--ink) 0%, rgba(11,18,14,.94) 22%, rgba(11,18,14,.94) 78%, var(--ink) 100%); } .book__in{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,68px); align-items:start; } .book__copy .sechead{ margin-bottom:26px } .book__copy .lead{ color:var(--cream); margin-bottom:22px } .book__steps{ margin:0 0 30px } .book__direct{ margin:0; display:grid; gap:15px; padding-top:24px; border-top:1px solid var(--line) } .book__direct div{ display:grid; gap:2px } .book__direct dt{ font-family:var(--f-disp); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--gold); } .book__direct dd{ margin:0; font-size:14.5px; color:var(--cream-70) } .book__direct a{ transition:color .22s var(--ease) } .book__direct a:hover{ color:var(--gold-lite) } .book__form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; background:rgba(11,18,14,.60); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:6px; padding:clamp(22px,3.2vw,38px); } .field{ display:grid; gap:7px; min-width:0 } .field--full{ grid-column:1 / -1 } .field label{ font-family:var(--f-disp); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--cream-70); } .field label span{ color:var(--cream-40); letter-spacing:.12em } .field input, .field select, .field textarea{ width:100%; padding:13px 15px; background:rgba(244,239,228,.05); border:1px solid var(--line); border-radius:var(--r); color:var(--cream); font-family:var(--f-body); font-size:14.5px; line-height:1.5; transition:border-color .25s var(--ease), background-color .25s var(--ease); } .field textarea{ resize:vertical; min-height:104px } .field input::placeholder, .field textarea::placeholder{ color:var(--cream-40) } .field select{ appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 19px) 21px, calc(100% - 13px) 21px; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; } .field select option{ background:var(--ink-2); color:var(--cream) } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); background:rgba(244,239,228,.08); } .field input:user-invalid, .field textarea:user-invalid{ border-color:#C9736B } .book__submit{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px } .book__msg{ margin:0; font-size:13px; color:var(--gold-lite); opacity:0; transform:translateY(-3px); transition:opacity .3s var(--ease), transform .3s var(--ease); } .book__msg.show{ opacity:1; transform:none } /* ═══════════ NEWSLETTER ═══════════ */ .signup{ background:var(--ink-2); border-top:1px solid var(--line); padding-block:clamp(44px,6vw,74px); } .signup__in{ display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,50px); align-items:center; } .signup__title{ font-size:clamp(22px,2.9vw,36px) } .signup__sub{ margin:12px 0 0; color:var(--cream-55); font-size:14px; font-weight:400; max-width:46ch } .signup__form{ display:flex; gap:10px; flex-wrap:wrap; position:relative } .signup__form input{ width:min(300px, 60vw); padding:14px 18px; background:rgba(244,239,228,.05); border:1px solid var(--line); border-radius:var(--r); color:var(--cream); font-family:var(--f-body); font-size:14px; transition:border-color .25s var(--ease), background-color .25s var(--ease); } .signup__form input::placeholder{ color:var(--cream-40) } .signup__form input:focus{ outline:none; border-color:var(--gold); background:rgba(244,239,228,.08) } .signup__msg{ position:absolute; top:100%; left:0; margin:8px 0 0; font-size:12.5px; color:var(--gold-lite); opacity:0; transform:translateY(-4px); transition:opacity .3s var(--ease), transform .3s var(--ease); } .signup__msg.show{ opacity:1; transform:none } /* ═══════════ FOOTER ═══════════ */ .footer{ background:var(--ink); padding-top:clamp(46px,6vw,72px) } .footer__in{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(26px,4vw,48px); padding-bottom:clamp(34px,4.5vw,54px); } .footer h3{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.22em; color:var(--gold); margin-bottom:16px; } .footer__brandcol h3{ margin-top:28px } .footer ul li{ margin-bottom:9px } .footer ul a, .footer ul li{ font-size:13.5px; color:var(--cream-55); font-weight:400; transition:color .22s var(--ease); } .footer ul a:hover{ color:var(--gold) } .brand--footer .brand__mark{ width:42px; height:42px } .footer__base{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:20px; border-top:1px solid var(--line); } .footer__base p{ margin:0; font-size:12px; color:var(--cream-40) } .footer__base a{ transition:color .22s var(--ease) } .footer__base a:hover{ color:var(--gold) } /* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ @media (max-width: 1000px){ .intro__grid, .srow, .about__in, .book__in, .signup__in{ grid-template-columns:1fr } .book__copy .sechead--left, .book__copy{ text-align:left } .book__copy .sechead--left .fleuron{ margin-inline:0 } .srow--flip .srow__fig{ order:0 } .about__fig img{ max-width:290px } .sechead--left{ text-align:center } .sechead--left .fleuron{ margin-inline:auto } .about__copy{ text-align:center } .about__copy .ticks{ text-align:left } .signup__sub{ max-width:none } .reelgrid, .grid6{ grid-template-columns:repeat(2,1fr) } .logos{ grid-template-columns:repeat(4,1fr) } .footer__in{ grid-template-columns:1fr 1fr } } @media (max-width: 820px){ html{ scroll-padding-top:70px } .utilitybar__in{ justify-content:center; gap:16px; font-size:11.5px } .header__cta{ display:none } .burger{ display:flex } .nav{ position:fixed; inset:0 0 auto; top:0; flex-direction:column; align-items:stretch; gap:0; background:rgba(11,18,14,.985); backdrop-filter:blur(18px); padding:88px var(--pad) 34px; height:100dvh; transform:translateY(-101%); transition:transform .5s var(--ease); overflow-y:auto; } .nav.open{ transform:none } .nav > a:not(.btn){ font-size:15px; letter-spacing:.14em; padding:19px 0; border-bottom:1px solid var(--line); color:var(--cream); } .nav > a:not(.btn)::after{ display:none } .nav__cta{ display:inline-flex; margin-top:26px; align-self:flex-start } .hero{ min-height:auto; padding-bottom:0 } .hero__in{ padding-block:clamp(88px,20vh,140px) clamp(110px,16vh,150px) } .marquee--tilt-a{ margin-top:-26px } .quotes__rail{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82%; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; } .quotes__rail::-webkit-scrollbar{ display:none } .quote{ scroll-snap-align:center } .dots{ display:flex } } @media (max-width: 620px){ .reelgrid, .grid6{ grid-template-columns:1fr } .logos{ grid-template-columns:repeat(3,1fr) } .footer__in{ grid-template-columns:1fr; text-align:center } .footer .brand{ justify-content:center } .footer__base{ justify-content:center; text-align:center } .hero__cta{ flex-direction:column; align-items:stretch } .hero__cta .btn{ width:100% } .book__form{ grid-template-columns:1fr } .book__submit .btn{ width:100% } .signup__form input{ width:100% } .signup__form .btn{ width:100% } .marquee{ padding-block:10px } } /* ═══════════ VIDEO MODAL ═══════════ */ .video-modal{ position:fixed; inset:0; z-index:100; background:rgba(11,18,14,.95); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s var(--ease); } .video-modal.open{ opacity:1; pointer-events:auto; } .video-modal__content{ position:relative; width:90%; max-width:900px; aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden; } .video-modal__video{ width:100%; height:100%; object-fit:contain; } .video-modal__close{ position:absolute; top:16px; right:16px; z-index:10; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:rgba(244,239,228,.1); border-radius:4px; color:var(--cream); transition:background .2s var(--ease); } .video-modal__close:hover{ background:rgba(244,239,228,.2); } .video-modal__close svg{ width:24px; height:24px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; } /* ═══════════ REDUCED MOTION ═══════════ */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .reveal{ opacity:1; transform:none } .marquee__track{ animation:none } .hero__media img{ animation:none; transform:scale(1.04) } } /* ═══════════ PRINT ═══════════ */ @media print{ .utilitybar,.header,.marquee,.scrolldown,.signup__form{ display:none } body{ background:#fff; color:#000 } } /* ═══════════════════════════════════════════════════════════ LEGAL PAGES (/privacy-policy, /terms-and-conditions) ═══════════════════════════════════════════════════════════ */ .legalhead{ background:var(--ink-2); border-bottom:1px solid var(--line); padding-block:clamp(56px,8vw,96px) clamp(30px,4vw,44px); } .legalhead h1{ font-family:var(--f-disp); font-weight:300; font-size:clamp(28px,4.4vw,52px); text-transform:uppercase; letter-spacing:.004em; line-height:1.0; text-wrap:balance; } .legalhead h1 strong{ font-weight:800; letter-spacing:-.014em } .legalhead__meta{ margin:16px 0 0; font-size:13.5px; color:var(--cream-55); } .legal{ padding-block:clamp(44px,6vw,76px) clamp(60px,9vw,110px) } .legal__body{ max-width:74ch; margin-inline:auto } .legal__body h2{ font-family:var(--f-disp); font-size:clamp(17px,2vw,22px); font-weight:800; text-transform:uppercase; letter-spacing:-.008em; line-height:1.2; color:var(--cream); margin:clamp(38px,5vw,56px) 0 14px; padding-top:clamp(22px,3vw,30px); border-top:1px solid var(--line); } .legal__body h2:first-child{ margin-top:0; border-top:0; padding-top:0 } .legal__body h3{ font-family:var(--f-disp); font-size:14.5px; font-weight:700; letter-spacing:.02em; color:var(--gold-lite); margin:26px 0 8px; } .legal__body p, .legal__body li{ color:var(--cream-70); font-size:15.5px } .legal__body a{ color:var(--gold-lite); text-decoration:underline; text-underline-offset:3px } /* buttons are links inside .legal__body too — they must not inherit the rule above */ .legal__body a.btn{ text-decoration:none } .legal__body a.btn--gold{ color:#14100A } .legal__body a.btn--ghost{ color:var(--cream) } .legal__body a:hover{ color:var(--gold) } .legal__body ul{ margin:0 0 1.05em; display:grid; gap:9px } .legal__body ul li{ position:relative; padding-left:20px } .legal__body ul li::before{ content:""; position:absolute; left:2px; top:.62em; width:5px; height:5px; rotate:45deg; background:var(--gold); } .legal__body dl{ margin:0 0 1.05em; display:grid; gap:14px } .legal__body dt{ font-family:var(--f-disp); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--cream); } .legal__body dd{ margin:4px 0 0; color:var(--cream-70); font-size:15px } /* Scrollable on small screens — legal tables get wide. */ .legal__tablewrap{ overflow-x:auto; margin:0 0 1.05em; border:1px solid var(--line); border-radius:var(--r) } .legal__body table{ border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px } .legal__body th, .legal__body td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); color:var(--cream-70); vertical-align:top; } .legal__body th{ font-family:var(--f-disp); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--cream); background:rgba(244,239,228,.04); } .legal__body tr:last-child td{ border-bottom:0 } .legal__toc{ margin:0 0 clamp(34px,5vw,52px); padding:clamp(20px,3vw,28px); background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); } .legal__toc h2{ margin:0 0 14px !important; padding:0 !important; border:0 !important; font-size:11px !important; letter-spacing:.18em; color:var(--gold); } .legal__toc ol{ margin:0; padding:0; list-style:none; counter-reset:toc; display:grid; gap:7px } .legal__toc li{ counter-increment:toc; font-size:14.5px } .legal__toc li::before{ content:counter(toc) ". "; color:var(--cream-40) } .legal__toc a{ color:var(--cream-70); text-decoration:none } .legal__toc a:hover{ color:var(--gold-lite); text-decoration:underline } .legal__back{ display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; font-family:var(--f-disp); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--cream-55); } .legal__back:hover{ color:var(--gold) } /* ═══════════ FORM CONSENT ═══════════ */ .consent{ gap:14px !important } /* The generic `.field label` rule is uppercase, 10px and heavily tracked — fine for "EVENT DATE", unreadable for a sentence of consent text. Consent has to be in clear, plain, normally-cased language, so reset all of it. */ .consent__notice{ margin:0; font-size:13px; line-height:1.6; color:var(--cream-55); } .consent__notice a{ color:var(--gold-lite); text-decoration:underline; text-underline-offset:2px; } .consent__notice a:hover{ color:var(--gold) } .signup__consent{ flex-basis:100%; max-width:52ch; margin-top:4px; }