/* ========================================================================= DANCE ADDICTION — PETERS HILL OPENING One page, one stylesheet. Distilled from version 01 "LONG EXPOSURE": same tokens, same signature light trail, same photographic treatment — with every rule the opening page does not use taken out. Palette rule (inherited): colour is LIGHT, never paint. --brass and --rose appear only where a lamp would fall. --brass is a solid fill in one place only: .btn. ========================================================================= */ :root{ --petrol: #0c2531; /* the field — deliberately blue-green, not near-black */ --petrol-lift: #123943; /* raised surfaces */ --chalk: #eef2f0; /* primary text */ --chalk-dim: #a8bcc0; /* secondary text 8.5:1 on petrol */ --brass: #e8a13c; /* tungsten 7.7:1 on petrol */ --rose: #d4726a; /* stage-lit skin 5.2:1 on petrol */ --rose-lit: #e59b93; /* rose lifted for small text on --petrol-lift */ --hair: rgba(238,242,240,.14); --hair-warm: rgba(232,161,60,.42); --f-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --f-body: 'Public Sans', system-ui, -apple-system, sans-serif; --f-mono: 'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace; --gut: clamp(20px, 5vw, 56px); --max: 1280px; --ease: cubic-bezier(.16,.84,.3,1); } *,*::before,*::after{ box-sizing:border-box } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px } body{ margin:0; background:var(--petrol); color:var(--chalk); font:400 17px/1.62 var(--f-body); letter-spacing:.005em; overflow-x:hidden; /* Lamps left on in the room: no "empty" area is ever flat black. */ background-image: radial-gradient(110vw 70vh at 4% -6%, rgba(232,161,60,.13), transparent 62%), radial-gradient(85vw 62vh at 100% 22%, rgba(212,114,106,.10), transparent 64%), radial-gradient(100vw 80vh at 55% 108%, rgba(111,185,201,.09), transparent 66%); background-attachment:fixed; } img{ max-width:100%; display:block } a{ color:inherit } h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:800; line-height:.86; letter-spacing:-.02em; text-transform:uppercase; } p{ margin:0 0 1em } p:last-child{ margin-bottom:0 } ::selection{ background:var(--brass); color:var(--petrol) } :where(a,button,[tabindex],summary):focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:2px; } /* =========================== UTILITY ================================== */ .mono{ font-family:var(--f-mono); font-weight:400; font-size:.82rem; letter-spacing:.04em; font-variant-numeric:tabular-nums; } .nowrap{ white-space:nowrap } .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; } /* =========================== LAYOUT =================================== */ .wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); } .wrap--wide{ max-width:1560px } .band{ padding-block:clamp(46px,6.4vw,88px); position:relative } .band--lift{ background:var(--petrol-lift) } .bleed{ width:100%; position:relative } /* ======================= SIGNATURE: LIGHT TRAIL ======================= */ /* A streak of blurred light under every heading. Zero-width until .is-lit lands on an ancestor, then the exposure "keeps opening". */ .trail{ position:relative; height:16px; width:min(620px,100%); margin:26px 0 0; overflow:visible; pointer-events:none; } /* Drawn by default; only a page that reports it can run JS () is allowed to start it at zero — otherwise the site's one signature element would not exist for a reader with scripting off. */ .trail::before, .trail::after{ content:''; position:absolute; left:0; top:50%; height:3px; width:100%; transform:translateY(-50%) scaleX(1); transform-origin:left center; transition:transform 1.3s var(--ease); } .js .trail::before, .js .trail::after{ transform:translateY(-50%) scaleX(0) } .trail::before{ background:linear-gradient(90deg, rgba(232,161,60,0) 0%, var(--brass) 8%, #fff6e6 32%, var(--brass) 54%, var(--rose) 78%, rgba(212,114,106,0) 100%); filter:blur(.5px); } .trail::after{ /* the bloom around the streak */ height:22px; background:linear-gradient(90deg, rgba(232,161,60,0) 0%, rgba(232,161,60,.62) 20%, rgba(255,246,230,.7) 36%, rgba(212,114,106,.48) 78%, rgba(212,114,106,0) 100%); filter:blur(13px); transition-duration:1.7s; } .js .is-lit .trail::before, .js .is-lit .trail::after{ transform:translateY(-50%) scaleX(1) } .trail--short{ width:min(340px,72%) } .trail--hero{ width:min(760px,100%); margin-top:30px } .trail--hero::before{ height:4px } .trail--hero::after{ height:30px; filter:blur(18px) } /* ============================ NAV ===================================== */ .nav{ position:sticky; top:0; z-index:60; background:rgba(11,31,42,.72); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--hair); } .nav > .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; max-width:1560px; } .nav__brand{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:1.55rem; letter-spacing:-.01em; line-height:1; text-decoration:none; color:var(--chalk); white-space:nowrap; } .nav__brand span{ color:var(--brass) } .nav__links{ display:flex; gap:clamp(14px,2.2vw,34px); align-items:center } .nav__link{ font-family:var(--f-mono); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; text-decoration:none; color:var(--chalk-dim); padding:8px 0; position:relative; transition:color .25s var(--ease); } .nav__link:hover{ color:var(--chalk) } .nav__link::after{ content:''; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); } .nav__link:hover::after{ transform:scaleX(1) } .nav__toggle{ display:none; background:none; border:1px solid var(--hair); color:var(--chalk); font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:9px 13px; border-radius:2px; cursor:pointer; } /* ============================ BUTTONS ================================= */ .btn{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--f-mono); font-weight:500; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding:14px 22px; border-radius:2px; border:1px solid var(--brass); background:var(--brass); color:var(--petrol); transition:box-shadow .3s var(--ease), transform .3s var(--ease); } .btn:hover{ box-shadow:0 0 26px rgba(232,161,60,.45); transform:translateY(-1px) } .btn--ghost{ background:transparent; color:var(--chalk); border-color:var(--hair) } .btn--ghost:hover{ border-color:var(--brass); color:var(--chalk); box-shadow:0 0 20px rgba(232,161,60,.16) } .textlink{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); text-decoration:none; border-bottom:1px solid var(--hair-warm); padding-bottom:3px; transition:border-color .25s var(--ease); } .textlink:hover{ border-color:var(--brass) } /* ====================== PHOTOGRAPHY: .shot ============================ */ /* Every photograph is boxed here: aspect ratio reserved (no reflow), duotone treatment, and a scrim so any overlaid text measures clean. */ .shot{ position:relative; overflow:hidden; background:var(--petrol-lift); isolation:isolate; } .shot__img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.58) contrast(1.08) brightness(.72); } .shot--duo::before{ /* petrol wash: pulls everything blue-green */ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(200deg,#0b1f2a,#123742 55%,#0b1f2a); mix-blend-mode:color; opacity:.86; } .shot--duo::after{ /* tungsten bloom back into the highlights */ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(70% 90% at 22% 18%, rgba(232,161,60,.34), transparent 62%), radial-gradient(60% 80% at 88% 82%, rgba(212,114,106,.24), transparent 60%); mix-blend-mode:screen; } .shot__cap{ position:absolute; z-index:5; left:0; bottom:0; right:0; padding:56px clamp(16px,3vw,28px) 14px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; color:var(--chalk); text-transform:uppercase; background:linear-gradient(0deg, rgba(5,17,24,.94) 0%, rgba(5,17,24,.88) 34%, rgba(5,17,24,.4) 68%, rgba(5,17,24,0) 100%); } .letterbox{ aspect-ratio:21/9 } @media (max-width:700px){ .letterbox{ aspect-ratio:16/10 } } /* Peters Hill was photographed under full LED houselights on a bright day: white ceiling, white walls, pale floor. Straight into the field those frames are 2–3 stops hotter than anything else here and the page stops reading as a lit room. This exposes them back down rather than swapping the picture out — the rooms are the whole point of the page and they stay. */ .shot--print-down .shot__img{ filter:saturate(.42) contrast(1.14) brightness(.44) } /* ============================= HERO =================================== */ .hero{ position:relative; min-height:min(92svh,880px); display:flex; align-items:flex-end; overflow:hidden; } .hero__media{ position:absolute; inset:0; z-index:0 } .hero__media .shot{ width:100%; height:100% } .hero__media .shot__img{ object-position:50% 46%; transform:scale(1.05); /* the hero frame is the bright Peters Hill class shot, so it is exposed harder than a stock long-exposure frame would need */ filter:saturate(.5) contrast(1.1) brightness(.5) blur(14px); transition:filter 1.9s var(--ease), transform 2.4s var(--ease); } .is-exposed .hero__media .shot__img{ filter:saturate(.56) contrast(1.12) brightness(.54) blur(0px); transform:scale(1.005); } .hero__media .shot--duo::before{ opacity:.62 } .hero__media .shot--duo::after{ background:radial-gradient(64% 84% at 70% 44%, rgba(232,161,60,.34), transparent 66%), radial-gradient(48% 64% at 96% 88%, rgba(212,114,106,.24), transparent 62%); } /* The scrim the headline is measured against. A WEDGE, not a wash: dense behind the type, gone by two-thirds across so the room is genuinely on show. */ .hero__scrim{ position:absolute; inset:0; z-index:3; pointer-events:none; background: radial-gradient(78% 86% at 6% 88%, rgba(5,17,24,.9) 0%, rgba(5,17,24,.62) 46%, rgba(5,17,24,0) 78%), linear-gradient(96deg, rgba(6,20,28,.92) 0%, rgba(7,22,30,.84) 26%, rgba(8,26,34,.52) 46%, rgba(10,32,41,.16) 66%, rgba(12,37,49,0) 82%), linear-gradient(0deg, rgba(6,20,28,.88) 0%, rgba(6,20,28,.18) 34%, rgba(6,20,28,0) 56%), linear-gradient(180deg, rgba(6,20,28,.72) 0%, rgba(6,20,28,0) 22%); } .hero__body{ position:relative; z-index:5; width:100%; max-width:1560px; margin-inline:auto; padding:clamp(56px,8vw,96px) var(--gut) clamp(40px,5.5vw,66px); } .hero__eyebrow{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin:0 0 clamp(14px,2vw,22px); display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .hero__eyebrow i{ width:26px; height:1px; background:var(--hair-warm); display:block } .hero__title{ font-size:clamp(3rem,9.6vw,8.4rem); max-width:14ch; text-wrap:balance; } /* the second clause is the answer, spoken quieter and lit warm */ .hero__title em{ font-style:normal; color:var(--brass); display:block; font-size:.58em; letter-spacing:-.012em; margin-top:.1em; text-shadow:0 0 42px rgba(232,161,60,.28); } .hero__sub{ margin:clamp(22px,3vw,32px) 0 0; max-width:50ch; font-size:clamp(1rem,1.35vw,1.16rem); color:var(--chalk); } .hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3vw,34px) } /* ===================== THE COUNT — first night ======================== */ /* The one number the page exists to deliver, set in the mono face against the condensed display. Rendered from the date in the markup, so it degrades to the date itself with scripting off. */ .count{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px clamp(18px,2.6vw,34px); margin-top:clamp(26px,3.4vw,38px); padding-top:20px; border-top:1px solid var(--hair); } .count__n{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.6rem,5vw,3.9rem); color:var(--brass); letter-spacing:-.01em; line-height:.8; display:flex; align-items:baseline; gap:.28em; } .count__n small{ font-family:var(--f-mono); font-weight:400; font-size:.24em; letter-spacing:.16em; text-transform:uppercase; color:var(--chalk-dim); } .count__t{ font-family:var(--f-mono); font-size:.86rem; letter-spacing:.07em; color:var(--chalk); text-transform:uppercase; line-height:1.5; } .count__t b{ color:var(--brass); font-weight:500 } /* ========================= SECTION HEADS ============================== */ .sechead{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:14px clamp(24px,5vw,80px); align-items:end; margin-bottom:clamp(30px,4vw,52px); } .sechead__kick{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rose-lit); display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:12px; } .sechead__title{ font-size:clamp(2.1rem,5.4vw,4.1rem); max-width:22ch; text-wrap:balance } .sechead__side{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding-bottom:6px; } .sechead__lede{ margin:0; max-width:46ch; color:var(--chalk-dim); font-size:1.04rem } @media (max-width:860px){ .sechead{ grid-template-columns:1fr; gap:20px } } /* ======================= THE NIGHTS — two frames ====================== */ /* Two confirmed nights, so two frames rather than a seven-frame rail. They are deliberately large: on a page with this little content, small cards read as the summary of something bigger that is missing. */ .nights{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,30px) } @media (max-width:860px){ .nights{ grid-template-columns:1fr } } .night{ position:relative; display:flex; flex-direction:column; background:var(--petrol-lift); border-radius:2px; overflow:hidden; } .night__media{ position:relative; aspect-ratio:16/10 } .night__media .shot{ position:absolute; inset:0 } /* the date sits straight on the photograph, so the frame carries its own shade */ .night__media::after{ content:''; position:absolute; inset:0; z-index:4; pointer-events:none; background: linear-gradient(180deg, rgba(5,17,24,.9) 0%, rgba(5,17,24,.44) 30%, rgba(5,17,24,0) 52%), linear-gradient(0deg, rgba(5,17,24,.88) 0%, rgba(5,17,24,.34) 24%, rgba(5,17,24,0) 44%); } .night__date{ position:absolute; z-index:6; left:clamp(16px,2vw,22px); top:clamp(14px,1.8vw,18px); display:flex; flex-direction:column; gap:4px; } .night__day{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(2rem,3.4vw,2.9rem); line-height:.8; letter-spacing:-.015em; color:var(--chalk); text-shadow:0 2px 18px rgba(6,17,24,.9); } .night__from{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); text-shadow:0 2px 14px rgba(6,17,24,.95); } .night__first{ position:absolute; z-index:6; right:clamp(14px,1.8vw,18px); top:clamp(14px,1.8vw,18px); font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--petrol); background:var(--brass); padding:4px 9px; border-radius:2px; } .night__body{ padding:clamp(20px,2.6vw,30px); display:flex; flex-direction:column; gap:12px; flex:1 } .night__head{ font-size:clamp(1.6rem,2.8vw,2.2rem); color:var(--chalk) } .night__tag{ margin:0; color:var(--chalk-dim); font-size:.98rem; max-width:42ch } /* the class times: a small mono table, not prose */ .times{ list-style:none; margin:0; padding:0; display:grid; gap:0; margin-top:auto; padding-top:8px } .times li{ display:flex; gap:14px; align-items:baseline; font-family:var(--f-mono); font-size:.86rem; letter-spacing:.03em; color:var(--chalk); padding:10px 0; border-top:1px solid var(--hair); } .times b{ color:var(--brass); font-weight:500; flex:none; min-width:4.4em } .times span{ color:var(--chalk-dim) } .times--tbc li b{ color:var(--chalk-dim) } /* ========================= LOCATION BLOCKS ============================ */ .locblock{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(20px,3.4vw,52px); align-items:center; } .locblock + .locblock{ margin-top:clamp(38px,5vw,68px); padding-top:clamp(38px,5vw,68px); border-top:1px solid var(--hair); } /* min-height reserves the box (the photo is absolutely positioned inside, so nothing reflows) and lets the picture run the full height of the column */ .locblock__media{ position:relative; min-height:clamp(280px,32vw,540px); border-radius:2px; overflow:hidden } .locblock__media .shot{ position:absolute; inset:0 } .locblock__body{ display:flex; flex-direction:column; gap:16px } .locblock__name{ font-size:clamp(1.9rem,3.6vw,2.9rem); color:var(--chalk) } .locblock__badge{ display:inline-flex; align-self:flex-start; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; padding:5px 10px; border-radius:2px; background:var(--brass); color:var(--petrol); } .locblock__badge--open{ background:transparent; color:var(--chalk); border:1px solid var(--hair-warm) } .locblock__addr{ font-style:normal; color:var(--chalk-dim); font-size:1.02rem; line-height:1.6; max-width:44ch; } @media (max-width:880px){ .locblock{ grid-template-columns:1fr } .locblock__media{ aspect-ratio:4/3; min-height:0 } } /* arrow list — a brass tick of light, not a bullet */ .arrows{ list-style:none; margin:0; padding:0; display:grid; gap:11px } .arrows li{ position:relative; padding-left:26px; color:var(--chalk-dim); font-size:.97rem; line-height:1.55; } .arrows li::before{ content:''; position:absolute; left:0; top:.62em; width:14px; height:1px; background:linear-gradient(90deg,var(--brass),rgba(232,161,60,0)); } /* ===================== NOT CONFIRMED YET — the gap ==================== */ /* An honest gap, drawn as one. It is set in the dim tone and carries no brass fill, so it never competes with a fact — but it is on the page, because a visitor asking "how much is it?" needs an answer, and "ask us" is one. */ .gap{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,30px); border-top:1px solid var(--hair); padding-top:clamp(26px,3.4vw,40px); } @media (max-width:820px){ .gap{ grid-template-columns:1fr } } .gap__item h3{ font-size:clamp(1.2rem,1.9vw,1.5rem); color:var(--chalk-dim); margin-bottom:9px; line-height:1; } .gap__item p{ margin:0; color:var(--chalk-dim); font-size:.95rem } /* ------- closing call to action: a picture that also asks you in ------- */ .pband{ position:relative; min-height:clamp(340px,42vw,520px); display:flex; align-items:flex-end; overflow:hidden } .pband .shot{ position:absolute; inset:0 } .pband__scrim{ position:absolute; inset:0; z-index:3; pointer-events:none; background: radial-gradient(72% 84% at 8% 86%, rgba(5,17,24,.92), rgba(5,17,24,0) 76%), linear-gradient(96deg, rgba(5,17,24,.9) 0%, rgba(5,17,24,.62) 40%, rgba(5,17,24,.12) 72%, rgba(5,17,24,0) 88%), linear-gradient(0deg, rgba(5,17,24,.84) 0%, rgba(5,17,24,0) 48%); } .pband__body{ position:relative; z-index:5; width:100%; max-width:1560px; margin-inline:auto; padding:clamp(48px,7vw,88px) var(--gut) clamp(34px,4.4vw,54px); } .pband__t{ font-size:clamp(2rem,5vw,3.6rem); max-width:16ch; color:var(--chalk); text-wrap:balance } .pband__p{ margin:16px 0 0; color:var(--chalk); max-width:44ch } .pband .btn{ margin-top:clamp(20px,2.6vw,30px) } /* ============================== FOOTER ================================ */ .foot{ border-top:1px solid var(--hair); padding-block:clamp(44px,6vw,76px); background:linear-gradient(0deg, rgba(6,17,24,.6), transparent); } .foot > .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,40px); max-width:1560px; } .foot__col h2{ font-size:1.16rem; color:var(--brass); margin-bottom:12px; letter-spacing:0; } .foot__col p{ color:var(--chalk-dim); font-size:.95rem; line-height:1.66 } .foot__col a{ color:var(--chalk-dim); text-decoration:none; border-bottom:1px solid var(--hair); transition:color .25s var(--ease) } .foot__col a:hover{ color:var(--chalk); border-color:var(--hair-warm) } .foot__stamp{ grid-column:1/-1; margin-top:clamp(20px,2.6vw,30px); padding-top:18px; border-top:1px solid var(--hair); font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--chalk-dim); } @media (max-width:860px){ .foot > .wrap{ grid-template-columns:1fr 1fr } } @media (max-width:460px){ .foot > .wrap{ grid-template-columns:1fr } } /* ============================ RESPONSIVE ============================== */ @media (max-width:900px){ .nav__toggle{ display:block } .nav__links{ display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:flex-start; gap:0; background:rgba(9,26,35,.98); backdrop-filter:blur(14px); border-bottom:1px solid var(--hair); padding:8px var(--gut) 18px; } .nav.is-open .nav__links{ display:flex } .nav__link{ padding:12px 0; width:100%; font-size:.82rem } } /* On a phone the wedge is useless — there is no "right of the frame" — so the scrim runs bottom-up instead: the photograph keeps the top of the hero and the type gets a floor dense enough to measure against. */ @media (max-width:760px){ .hero__scrim{ background:linear-gradient(0deg, rgba(5,17,24,.96) 0%, rgba(5,17,24,.93) 52%, rgba(5,17,24,.86) 76%, rgba(5,17,24,.64) 90%, rgba(5,17,24,.2) 100%); } .hero{ min-height:min(96svh,880px) } } @media (max-width:560px){ body{ font-size:16px } .hero__title{ font-size:clamp(2.6rem,12vw,3.5rem) } .hero__cta{ gap:10px } .btn{ flex:1 1 auto; justify-content:center } .count{ gap:14px 24px } } /* ========================= REDUCED MOTION ============================= */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .trail::before,.trail::after{ transform:translateY(-50%) scaleX(1) } .hero__media .shot__img{ filter:saturate(.56) contrast(1.12) brightness(.54); transform:scale(1.01) } .btn:hover{ transform:none } html{ scroll-behavior:auto } }