/* ───────────────────────────────────────────────────────────────────────────── Brown Ballroom Dance Team — site stylesheet Built from the design boards in design/canvas/ (the "v5" system in _motion.css). Desktop-first, matching the 1440-wide boards; the 390-wide mobile board's values are the @media (max-width: 640px) block at the end. No build step, no dependencies. Edit this file directly. ───────────────────────────────────────────────────────────────────────────── */ :root { --ink: #0A0A0B; /* body text */ --black: #07070A; /* dark section grounds */ --red: #CE0E2D; /* accent */ --red-hover: #E4143A; --grad: linear-gradient(96deg, #CE0E2D 0%, #F0442E 44%, #FF9F1C 100%); --body: #48484D; /* secondary text */ --prose: #2A2A2E; /* long-form prose */ --muted: #6E6E73; --footer-grey: #8E8E93; --fine: #8A8A8F; /* was #636366: 3.36:1 on the footer black, under the 4.5:1 floor */ --panel: #F5F5F7; /* Competition levels. Each has the true metal, used for the swatch, and a darker shade of the same hue for the text — real gold and silver are far too light to read at 13px, so the swatch carries the colour and the text carries the contrast. Every -ink shade clears 4.5:1 on white, --panel and --tile. */ --lv-bronze: #CD7F32; --lv-bronze-ink: #9A5F25; --lv-silver: #AEB4BB; --lv-silver-ink: #656E78; --lv-gold: #D4AF37; --lv-gold-ink: #826A1C; --lv-open: #7A4FB5; --lv-open-ink: #7A4FB5; --tile: #EFEFF2; --rule: #EDEDF0; --rule-2: #E4E4E8; --chip-border: #DCDCE1; --pill-border: #D6D6DB; --ease: cubic-bezier(.16, 1, .3, 1); /* entrances, transforms */ --ease-fade: cubic-bezier(.33, 0, .2, 1); /* crossfades */ --gutter: 56px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } body { background: #FFFFFF; color: var(--ink); font-family: "Archivo", "SF Pro Display", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { color: inherit; text-decoration: none; } /* The filter chips hide items with the `hidden` attribute. Any author rule that sets `display` (e.g. `.tile { display: block }`) beats the browser's own `[hidden]` rule, so state it explicitly or filtering silently does nothing. */ [hidden] { display: none !important; } img { border-style: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; color: var(--ink); padding: 14px 20px; border-radius: 0 0 12px 0; font-weight: 600; } .skip:focus { left: 0; } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .fill { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.2) contrast(1.07); } .tight { letter-spacing: -0.045em; line-height: 0.94; font-weight: 700; margin: 0; } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } .muted { color: var(--muted); } .ov { position: absolute; inset: 0; pointer-events: none; } .sec { padding: 0 var(--gutter); max-width: 1552px; margin: 0 auto; } .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Placeholders — everything the team still has to supply. `.ph` on light grounds, `.phw` on dark. Deliberately conspicuous. */ .ph { background: rgba(206,14,45,0.10); color: #9B1028; padding: 0 5px; border-radius: 4px; font-weight: 500; } .phw { background: rgba(255,255,255,0.18); color: #FFFFFF; padding: 0 5px; border-radius: 4px; } /* ── motion ─────────────────────────────────────────────────────────────── */ /* `.armed` is added to by JS, so with JS off everything is simply visible. */ .lines .ln { display: block; overflow: hidden; } .lines .ln > span { display: block; will-change: transform; padding-bottom: 0.1em; } .armed .lines .ln > span { transform: translateY(112%); transition: transform 1250ms var(--ease); } .armed .lines.in .ln > span { transform: none; } .armed .lines.in .ln:nth-child(2) > span { transition-delay: 110ms; } .armed .lines.in .ln:nth-child(3) > span { transition-delay: 220ms; } .armed .lines.in .ln:nth-child(4) > span { transition-delay: 330ms; } .reveal { transition: opacity 1150ms var(--ease), transform 1150ms var(--ease), filter 1150ms var(--ease); } .armed .reveal { opacity: 0; transform: translateY(38px) scale(0.985); filter: blur(6px); } .armed .reveal.in { opacity: 1; transform: none; filter: none; } @keyframes nudge { 0%, 100% { transform: translate(-50%, 0); opacity: .5; } 50% { transform: translate(-50%, 8px); opacity: 1; } } @keyframes fillbar { from { width: 0%; } to { width: 100%; } } /* ── chrome ─────────────────────────────────────────────────────────────── */ #progress { position: fixed; left: 0; top: 0; height: 2px; z-index: 70; width: 0%; background: linear-gradient(90deg, #CE0E2D, #F0442E 45%, #FF9F1C); } #nav { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); background: rgba(10,10,11,0); border-bottom: 1px solid rgba(255,255,255,0); transition: background 700ms var(--ease), backdrop-filter 700ms var(--ease), border-color 700ms ease, color 700ms ease; } #nav .brand { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF; transition: color 700ms ease; } #nav .links { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 500; } #nav .lk { color: #FFFFFF; transition: color 700ms ease; } #nav .lk.on { font-weight: 600; } #nav .join { display: inline-flex; align-items: center; height: 36px; padding: 0 20px; border-radius: 999px; background: var(--red); color: #FFFFFF; font-weight: 600; transition: background 420ms ease; } #nav .join:hover { background: var(--red-hover); } #nav.solid { background: rgba(255,255,255,0.72); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); border-bottom: 1px solid rgba(0,0,0,0.07); } #nav.solid .brand { color: var(--ink); } #nav.solid .lk { color: var(--body); } #nav.solid .lk.on { color: var(--ink); } .burger { display: none; width: 46px; height: 46px; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; } .burger i { display: block; width: 24px; height: 1.5px; background: #FFFFFF; transition: background 700ms ease, transform 420ms var(--ease), opacity 300ms ease; } #nav.solid .burger i { background: var(--ink); } /* ── buttons ────────────────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 34px; border-radius: 999px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; position: relative; overflow: hidden; transition: transform 620ms var(--ease), box-shadow 620ms var(--ease), background 420ms ease, color 420ms ease, border-color 420ms ease; } .pill:hover { transform: translateY(-3px); } .pill-light { background: #FFFFFF; color: var(--ink); } .pill-light:hover { box-shadow: 0 22px 60px rgba(0,0,0,0.34); } .pill-red { background: var(--red); color: #FFFFFF; } .pill-red:hover { background: var(--red-hover); box-shadow: 0 22px 60px rgba(206,14,45,0.42); } .pill-ghost { border: 1px solid rgba(255,255,255,0.34); color: #FFFFFF; } .pill-ghost:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.62); } .pill-dark { border: 1px solid var(--pill-border); color: var(--ink); } .pill-dark:hover { background: var(--black); color: #FFFFFF; border-color: var(--black); } .lnk { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--red); cursor: pointer; } .lnk svg { transition: transform 520ms var(--ease); } .lnk:hover svg { transform: translateX(6px); } .chip { font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--chip-border); color: var(--body); cursor: pointer; background: none; transition: background 300ms ease, color 300ms ease, border-color 300ms ease, transform 420ms var(--ease); } .chip:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); } .chip-on { background: var(--black); border-color: var(--black); color: #FFFFFF; } .chip-on:hover { color: #FFFFFF; } .rnd { width: 58px; height: 58px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.24); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 320ms ease, transform 520ms var(--ease); } .rnd:hover { background: rgba(255,255,255,0.16); transform: scale(1.08); } /* ── tiles ──────────────────────────────────────────────────────────────── */ .tile { overflow: hidden; border-radius: 20px; background: var(--tile); position: relative; display: block; } .tile .fill { transition: transform 1600ms var(--ease), filter 800ms ease; } .tile:hover .fill { transform: scale(1.07); filter: saturate(1.36) contrast(1.1); } .tname { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 16px; background: linear-gradient(to top, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.34) 56%, rgba(0,0,0,0) 100%); transform: translateY(7px); opacity: 0.9; transition: transform 640ms var(--ease), opacity 640ms ease; } .tile:hover .tname { transform: translateY(0); opacity: 1; } .tname b { display: block; font-size: 15px; font-weight: 600; color: #FFFFFF; } .tname i { display: block; font-style: normal; font-size: 12px; color: rgba(255,255,255,0.72); margin-top: 2px; } /* ── home hero ──────────────────────────────────────────────────────────── */ #hero { cursor: pointer; position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--black); } #heroScroll { position: absolute; inset: 0; will-change: transform; } #ohHero { position: absolute; inset: 0; } .glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1800ms var(--ease-fade); mix-blend-mode: screen; } .gw1 { background: radial-gradient(125% 88% at 4% 106%, rgba(214,18,52,0.62), transparent 62%), radial-gradient(88% 66% at 98% 2%, rgba(255,150,26,0.34), transparent 58%); } .gw2 { background: radial-gradient(125% 88% at 8% 106%, rgba(124,42,232,0.56), transparent 62%), radial-gradient(88% 66% at 94% 6%, rgba(232,44,140,0.38), transparent 58%); } .gw3 { background: radial-gradient(125% 88% at 10% 106%, rgba(10,168,140,0.52), transparent 62%), radial-gradient(88% 66% at 92% 2%, rgba(28,150,255,0.32), transparent 58%); } .gw4 { background: radial-gradient(125% 88% at 4% 106%, rgba(255,148,20,0.58), transparent 62%), radial-gradient(88% 66% at 98% 6%, rgba(226,54,26,0.36), transparent 58%); } .gw5 { background: radial-gradient(125% 88% at 8% 106%, rgba(40,74,224,0.58), transparent 62%), radial-gradient(88% 66% at 94% 2%, rgba(0,206,226,0.30), transparent 58%); } .glow.on { opacity: 1; } #hero .scrim-l { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(100deg, rgba(5,4,8,0.82) 0%, rgba(5,4,8,0.55) 26%, rgba(5,4,8,0.10) 52%, rgba(5,4,8,0) 68%); } #heroCopy { cursor: auto; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 196px; will-change: transform, opacity; z-index: 2; } #heroCopy .lines { max-width: 1000px; } #heroCopy .eyebrow { color: rgba(255,255,255,0.70); margin-bottom: 26px; display: block; } #heroCopy .h { font-size: 122px; color: #FFFFFF; } #heroCopy p { margin: 30px 0 40px; max-width: 540px; font-size: 19px; line-height: 1.55; color: rgba(255,255,255,0.84); } #heroCopy .cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* With the depth hero the scene carries a giant "Ballroom", so the heading steps down to one line under it: the eyebrow, then "Brown Ballroom Dance Team" at 44px. Desktop only. */ #hero.depth #heroCopy { bottom: 150px; } #hero.depth #heroCopy .lines { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.26em; font-size: 44px; } #hero.depth #heroCopy .lines .ln:first-child { flex-basis: 100%; font-size: 16px; } #hero.depth #heroCopy .eyebrow { margin-bottom: 16px; } #hero.depth #heroCopy .h { font-size: 44px; padding-bottom: 0.08em; } #hero.depth #heroCopy p { margin: 18px 0 28px; } #heroFoot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 58px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; } #heroFoot .cap-wrap { max-width: 560px; flex: 1; } #heroFoot .rule { height: 1px; background: rgba(255,255,255,0.20); margin-bottom: 16px; } #caption { font-size: 13px; color: rgba(255,255,255,0.76); } #bars { display: flex; align-items: flex-end; gap: 14px; } .dot { cursor: pointer; display: flex; flex-direction: column; gap: 10px; background: none; } .bar { position: relative; height: 2px; width: 58px; border-radius: 2px; background: rgba(255,255,255,0.24); overflow: hidden; } .bar i { position: absolute; left: 0; top: 0; bottom: 0; display: block; width: 0%; background: #FFFFFF; } .num { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.40); transition: color 600ms ease; } .nudge { position: absolute; left: 50%; bottom: 22px; z-index: 2; animation: nudge 2.6s ease-in-out infinite; } /* ── home sections ──────────────────────────────────────────────────────── */ .statement { padding-top: 160px; padding-bottom: 150px; display: grid; grid-template-columns: 1.45fr 1fr; gap: 100px; align-items: start; } .statement h2 { font-size: 66px; } .statement .col2 { padding-top: 14px; } .statement p { margin: 0 0 22px; font-size: 17px; line-height: 1.68; color: var(--body); } .statement p + p { margin-bottom: 30px; } #expand { padding: 0 130px; transition: padding 60ms linear; } #expandInner { position: relative; height: 86vh; overflow: hidden; border-radius: 32px; background: var(--black); } #expandInner .copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); z-index: 2; } #expandInner .eyebrow { color: rgba(255,255,255,0.66); margin-bottom: 20px; display: block; } #expandInner .h { font-size: 76px; color: #FFFFFF; } #expandInner p { margin: 26px 0 0; max-width: 520px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.80); } .styles { padding: 130px 20px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .styles .panel { height: 760px; } .styles .copy { position: absolute; left: 48px; right: 48px; bottom: 48px; z-index: 2; } .styles h3 { font-size: 54px; margin: 0 0 16px; color: #FFFFFF; } .styles p { margin: 0 0 22px; max-width: 420px; font-size: 16px; line-height: 1.62; color: rgba(255,255,255,0.84); } .styles .dances { font-size: 13px; color: rgba(255,255,255,0.58); } /* Hovering a dance name prints its note on a reserved line under the list, rather than expanding the list itself, so the row of names never reflows. The note is absolutely positioned, so a long one cannot push the card around either. */ .dance-list { position: relative; padding-bottom: 24px; } .dance-list .dn { cursor: default; outline: none; transition: color 200ms ease; } .dance-list .dn:hover, .dance-list .dn:focus { color: #FFFFFF; } .dance-list .dn i { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; color: rgba(255,255,255,0.92); opacity: 0; transform: translateY(3px); transition: opacity 220ms var(--ease-fade), transform 220ms var(--ease); pointer-events: none; } .dance-list .dn:hover i, .dance-list .dn:focus i { opacity: 1; transform: none; } .dance-list .dn:focus-visible { outline: 2px solid rgba(255,255,255,0.8); outline-offset: 3px; border-radius: 3px; } /* no hover to give: print every note inline instead of hiding them all */ @media (hover: none) { .dance-list { padding-bottom: 0; line-height: 1.85; } .dance-list .dn i { position: static; opacity: 1; transform: none; } .dance-list .dn i::before { content: " \2014 "; } } .sc-a { background: linear-gradient(to top, rgba(5,9,42,0.95) 0%, rgba(20,30,92,0.36) 50%, rgba(40,58,132,0.12) 100%); } .sc-b { background: radial-gradient(70% 55% at 84% 8%, rgba(60,110,255,0.30), transparent 62%); } .lc-a { background: linear-gradient(to top, rgba(54,3,18,0.95) 0%, rgba(168,14,58,0.36) 50%, rgba(232,40,86,0.14) 100%); } .lc-b { background: radial-gradient(70% 55% at 84% 8%, rgba(255,150,26,0.28), transparent 62%); } .quote { position: relative; height: 88vh; overflow: hidden; background: var(--black); display: flex; align-items: center; justify-content: center; } .quote .inner { position: relative; z-index: 2; padding: 0 220px; text-align: center; max-width: 1552px; } .quote p { margin: 0 0 30px; font-size: 44px; font-weight: 500; line-height: 1.32; letter-spacing: -0.03em; color: #FFFFFF; } /* the byline is a