/* ============================================================================ Brazier Jiu Jitsu Academy — design system for the MatPilot-powered website. One stylesheet for every page. Monochrome, editorial, gallery-white: the academy's own logo is a black monogram, so the site is built from black ink, white paper and hairlines, and photography is the only tone in between. Type: Anton (display, matches the BRAZIER wordmark), Barlow Condensed (sub-display + labels, matches "JIU JITSU ACADEMY"), Inter (reading text). Contrast (WCAG 2.2 AA) is held by the tokens, not by eye: --mute is 5.0:1 on paper and is the lightest grey allowed on small text; --faint is decorative only (rules, disabled glyphs) and never carries meaning on its own. ============================================================================ */ :root { --ink: #0b0b0b; --paper: #ffffff; --wash: #f4f4f2; /* quiet panel */ --wash-2: #ebebe8; --mute: #6f6f6f; /* 5.0:1 on paper — smallest allowed text grey */ --faint: #b4b4b0; /* decorative only */ --line: rgba(11, 11, 11, .13); --line-2: rgba(11, 11, 11, .3); --ok: #0b0b0b; --maxw: 1320px; --gut: clamp(20px, 4vw, 56px); --nav-h: 68px; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* The three type roles. The editor's Fonts panel swaps a whole role by overriding one of these (an uploaded file or a curated family), which is why no rule below names a family directly. */ --font-display: "Anton", Impact, "Arial Narrow Bold", sans-serif; --font-cond: "Barlow Condensed", "Arial Narrow", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: light; } * { box-sizing: border-box; } html { background: var(--paper); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; letter-spacing: -.002em; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, iframe, video { display: block; max-width: 100%; } figure { margin: 0; } /* the browser's 40px figure margin is not wanted anywhere here */ a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } ::selection { background: var(--ink); color: var(--paper); } /* ---------------------------------------------------------------- type ---- */ .display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .88; letter-spacing: -.008em; margin: 0; } .d-xxl { font-size: clamp(46px, 10vw, 140px); } .d-xl { font-size: clamp(38px, 7.4vw, 104px); } .d-lg { font-size: clamp(34px, 5.4vw, 74px); } .d-md { font-size: clamp(26px, 3.4vw, 44px); } .d-sm { font-size: clamp(20px, 2.2vw, 28px); } .cond { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .06em; } .label { font-family: var(--font-cond); font-size: 13px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--mute); line-height: 1.2; } .label.on-ink { color: rgba(255, 255, 255, .9); } .lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--ink); max-width: 62ch; margin: 0; } .body { color: var(--mute); max-width: 62ch; margin: 0; } .body strong { color: var(--ink); font-weight: 600; } .tabular { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------- scaffold ---- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); } .wrap-narrow { max-width: 960px; } .sec { padding: clamp(72px, 10vw, 148px) 0; position: relative; } .sec-tight { padding: clamp(48px, 6vw, 88px) 0; } .rule-top { border-top: 1px solid var(--line); } .ink-bg { background: var(--ink); color: var(--paper); } .ink-bg .body, .ink-bg .label { color: rgba(255, 255, 255, .72); } .wash-bg { background: var(--wash); } /* section eyebrow — "01 / PROGRAMS" with a rule that draws itself in */ .eyebrow { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(28px, 4vw, 54px); } .eyebrow .num { font-family: var(--font-cond); font-size: 13px; letter-spacing: .22em; color: var(--ink); font-weight: 600; } .eyebrow .slash { color: var(--mute); } .eyebrow .rule { flex: 1; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .1s; } .eyebrow.is-in .rule { transform: scaleX(1); } .stack-6 > * + * { margin-top: 6px; } .stack-12 > * + * { margin-top: 12px; } .stack-20 > * + * { margin-top: 20px; } .stack-32 > * + * { margin-top: 32px; } .grid { display: grid; gap: clamp(20px, 3vw, 40px); } .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; } @media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------- reveals ---- */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .95s var(--ease-out), transform .95s var(--ease-out); transition-delay: var(--d, 0ms); } [data-reveal].is-in { opacity: 1; transform: none; } [data-fade] { opacity: 0; transition: opacity 1.3s var(--ease-out) var(--d, 0ms); } [data-fade].is-in { opacity: 1; } /* line-by-line masked wipe for display headings */ .lines { display: block; } .lines > span { display: block; overflow: hidden; } .lines > span > i { display: block; font-style: inherit; transform: translateY(108%); transition: transform 1.05s var(--ease-out) var(--d, 0ms); } .lines.is-in > span > i { transform: none; } /* image reveal: the frame unmasks, the photo settles out of a slow push-in */ .figure { position: relative; display: block; overflow: hidden; background: var(--wash); } .figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.6s var(--ease-out), filter .7s var(--ease); filter: grayscale(1) contrast(1.04); } .figure.is-in img { transform: scale(1); } .figure:hover img { filter: grayscale(0) contrast(1); } .figure.tall { aspect-ratio: 3 / 4; } .figure.wide { aspect-ratio: 16 / 9; } .figure.square { aspect-ratio: 1 / 1; } .figure .cap { position: absolute; left: 0; bottom: 0; padding: 14px 16px; background: var(--paper); font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .22em; font-size: 12px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal], [data-fade], .lines > span > i, .figure img { transition: none !important; opacity: 1 !important; transform: none !important; } } /* ----------------------------------------------------------------- nav ---- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 90; height: var(--nav-h); display: flex; align-items: center; background: rgba(255, 255, 255, 0); border-bottom: 1px solid transparent; transition: background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease); } .nav.solid { background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--line); } .nav.on-media:not(.solid) { color: var(--paper); } .nav-inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; align-items: center; gap: 10px; flex: none; } .brand .mark { width: 30px; height: 30px; color: currentColor; } .brand > span { display: flex; flex-direction: column; line-height: 1; } .brand .name { display: block; font-family: var(--font-display); font-size: 19px; letter-spacing: .04em; text-transform: uppercase; } .brand .sub { display: block; font-family: var(--font-cond); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; opacity: .62; margin-top: 2px; } @media (max-width: 520px) { .brand .sub { display: none; } } .nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); } .nav-links a { font-family: var(--font-cond); text-transform: uppercase; font-size: 14px; letter-spacing: .2em; padding: 4px 0; position: relative; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } @media (max-width: 940px) { .nav-links { display: none; } } .nav-cta { display: flex; align-items: center; gap: 12px; } .burger { display: none; width: 44px; height: 44px; border: 1px solid currentColor; background: none; align-items: center; justify-content: center; gap: 4px; flex-direction: column; cursor: pointer; } .burger span { display: block; width: 16px; height: 1px; background: currentColor; transition: transform .4s var(--ease), opacity .3s var(--ease); } .menu-open .burger span:nth-child(1) { transform: translateY(2.5px) rotate(45deg); } .menu-open .burger span:nth-child(2) { opacity: 0; } .menu-open .burger span:nth-child(3) { transform: translateY(-2.5px) rotate(-45deg); } @media (max-width: 940px) { .burger { display: flex; } .nav-cta .btn { display: none; } } /* full-screen mobile menu */ .menu { position: fixed; inset: 0; z-index: 85; background: var(--paper); padding: calc(var(--nav-h) + 24px) var(--gut) 40px; display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-out); } .menu-open .menu { clip-path: inset(0 0 0 0); } .menu a.m-link { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(34px, 10vw, 58px); line-height: 1.06; padding: 6px 0; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } .menu-open .menu a.m-link { opacity: 1; transform: none; } .menu-open .menu a.m-link:nth-child(1) { transition-delay: .12s; } .menu-open .menu a.m-link:nth-child(2) { transition-delay: .18s; } .menu-open .menu a.m-link:nth-child(3) { transition-delay: .24s; } .menu-open .menu a.m-link:nth-child(4) { transition-delay: .30s; } .menu-open .menu a.m-link:nth-child(5) { transition-delay: .36s; } .menu-foot { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; } /* -------------------------------------------------------------- buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-cond); text-transform: uppercase; font-size: 15px; letter-spacing: .2em; font-weight: 500; padding: 15px 26px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; position: relative; overflow: hidden; transition: color .45s var(--ease), border-color .45s var(--ease); } .btn > span { position: relative; z-index: 1; } .btn::before { content: ""; position: absolute; inset: 0; background: var(--paper); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); } .btn:hover::before { transform: scaleY(1); } .btn:hover { color: var(--ink); } .btn .arw { position: relative; z-index: 1; transition: transform .45s var(--ease); } .btn:hover .arw { transform: translateX(5px); } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost::before { background: var(--ink); } .btn-ghost:hover { color: var(--paper); } .btn-light { background: var(--paper); color: var(--ink); border-color: var(--paper); } .btn-light::before { background: var(--ink); } .btn-light:hover { color: var(--paper); border-color: var(--ink); } .btn-sm { padding: 11px 18px; font-size: 13px; letter-spacing: .18em; } .btn[disabled] { background: var(--wash-2); border-color: var(--wash-2); color: #5b5b5b; cursor: not-allowed; } .btn[disabled]::before { display: none; } .btn-block { width: 100%; } .textlink { border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: border-color .3s var(--ease); } .textlink:hover { border-color: var(--ink); } /* ---------------------------------------------------------------- hero ---- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--paper); overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: 0; background: #111 center/cover no-repeat; } .hero-media img, .hero-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } .hero-media iframe { width: 100vw; height: 56.25vw; min-height: 100svh; min-width: 177.78svh; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); } /* Fully opaque once it plays: at anything less the poster frame underneath ghosts through the video, and both are frames of the same b-roll. The poster stays as the fallback for a blocked or slow iframe. */ .hero-media iframe.ready { opacity: 1; } /* Two washes rather than one flat tint: a side gradient carries the contrast exactly where the type sits, so the film itself stays bright. */ .hero-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.64) 0%, rgba(0,0,0,.3) 42%, rgba(0,0,0,0) 70%), linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 40%, rgba(0,0,0,.62) 100%); } .hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(40px, 7vw, 92px); padding-top: calc(var(--nav-h) + 40px); } .hero .d-xxl { text-shadow: 0 1px 40px rgba(0, 0, 0, .25); } .hero-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; margin-top: 26px; } .hero-scroll { position: absolute; right: var(--gut); bottom: clamp(40px, 7vw, 92px); z-index: 2; display: flex; align-items: center; gap: 12px; } .hero-scroll .bar { width: 1px; height: 54px; background: rgba(255,255,255,.4); overflow: hidden; } .hero-scroll .bar i { display: block; width: 100%; height: 40%; background: #fff; animation: scrollBar 2.1s var(--ease) infinite; } @keyframes scrollBar { 0% { transform: translateY(-100%); } 100% { transform: translateY(250%); } } @media (max-width: 700px) { .hero-scroll { display: none; } } /* ------------------------------------------------------------- marquee ---- */ .marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 18px 0; } .marquee .track { display: flex; gap: 48px; width: max-content; animation: slide 34s linear infinite; } .marquee .track span { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(20px, 2.6vw, 34px); letter-spacing: .01em; display: flex; align-items: center; gap: 48px; white-space: nowrap; } .marquee .track span::after { content: ""; width: 7px; height: 7px; background: var(--ink); border-radius: 50%; } .ink-bg .marquee { border-color: rgba(255,255,255,.18); } .ink-bg .marquee .track span::after { background: var(--paper); } @keyframes slide { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee .track { animation: none; } } /* ---------------------------------------------------------------- card ---- */ .card { border: 1px solid var(--line); padding: clamp(22px, 2.6vw, 34px); background: var(--paper); transition: border-color .4s var(--ease), transform .5s var(--ease-out); } .card:hover { border-color: var(--line-2); } .card-link:hover { transform: translateY(-3px); } .card .k { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } /* numbered program row */ .rowlist { border-top: 1px solid var(--line); } .rowitem { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: clamp(14px, 3vw, 40px); align-items: center; padding: clamp(20px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--line); position: relative; } .rowitem .idx { font-family: var(--font-cond); font-size: 13px; letter-spacing: .2em; color: var(--mute); } .rowitem .ttl { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(22px, 3vw, 40px); line-height: 1; } .rowitem .dsc { color: var(--mute); font-size: 15px; max-width: 46ch; margin-top: 8px; } .rowitem .go { font-family: var(--font-cond); letter-spacing: .2em; text-transform: uppercase; font-size: 13px; white-space: nowrap; } .rowitem::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .rowitem:hover::after { transform: scaleX(1); } @media (max-width: 700px) { .rowitem { grid-template-columns: 40px minmax(0, 1fr); } .rowitem .go { grid-column: 2; justify-self: start; } } /* ---------------------------------------------------------------- stat ---- */ .stat .n { font-family: var(--font-display); font-size: clamp(40px, 6vw, 82px); line-height: .9; } .stat .t { margin-top: 10px; } /* ----------------------------------------------------------- timetable ---- */ .tt { border-top: 1px solid var(--line); } .tt-day { border-bottom: 1px solid var(--line); padding: clamp(16px, 2vw, 26px) 0; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(12px, 3vw, 40px); align-items: start; } .tt-day .d-name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(20px, 2.4vw, 30px); line-height: 1; position: sticky; top: calc(var(--nav-h) + 16px); } .tt-day .d-date { margin-top: 6px; } .tt-rows { display: flex; flex-direction: column; } .tt-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); } .tt-row:last-child { border-bottom: 0; } .tt-row .t { font-family: var(--font-cond); font-size: 18px; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .tt-row .n { font-weight: 600; font-size: 16px; } .tt-row .m { color: var(--mute); font-size: 13.5px; margin-top: 2px; } .tt-row .r { display: flex; align-items: center; gap: 10px; } .tt-row.is-now { background: var(--ink); color: var(--paper); margin: 0 -14px; padding: 13px 14px; } .tt-row.is-now .m { color: rgba(255,255,255,.72); } .chip { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; border: 1px solid var(--line-2); padding: 4px 9px; white-space: nowrap; color: var(--ink); } .chip.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); } .tt-row.is-now .chip { border-color: rgba(255,255,255,.5); color: var(--paper); } .tt-empty { padding: 16px 0; color: var(--mute); font-size: 14px; } @media (max-width: 780px) { .tt-day { grid-template-columns: minmax(0, 1fr); gap: 10px; } .tt-day .d-name { position: static; } .tt-row { grid-template-columns: 74px minmax(0, 1fr); } .tt-row .r { grid-column: 2; } } .filters { display: flex; flex-wrap: wrap; gap: 8px; } .filter { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .18em; font-size: 13px; border: 1px solid var(--line); background: none; padding: 9px 16px; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* --------------------------------------------------------- option cards ---- */ .opts { display: grid; gap: 14px; align-items: stretch; } .opts .opt { display: flex; flex-direction: column; } .opts .opt > .mt-24:last-child { margin-top: auto; padding-top: 24px; } .opts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 780px) { .opts.two, .opts.three { grid-template-columns: minmax(0, 1fr); } } .opt { position: relative; text-align: left; width: 100%; background: var(--paper); border: 1px solid var(--line); padding: clamp(20px, 2.4vw, 30px); cursor: pointer; display: block; transition: border-color .35s var(--ease), background .35s var(--ease), transform .45s var(--ease-out); } .opt:hover { border-color: var(--line-2); } .opt[aria-checked="true"] { border-color: var(--ink); } .opt .radio { position: absolute; top: clamp(20px, 2.4vw, 30px); right: clamp(20px, 2.4vw, 30px); width: 26px; height: 26px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; transition: border-color .3s var(--ease); } .opt .radio i { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .35s var(--ease-out); } .opt[aria-checked="true"] .radio { border-color: var(--ink); } .opt[aria-checked="true"] .radio i { transform: scale(1); } .opt .o-kick { margin-bottom: 14px; padding-right: 34px; } .opt .o-name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(22px, 2.4vw, 32px); line-height: 1; } .opt .o-desc { color: var(--mute); font-size: 14.5px; margin-top: 12px; max-width: 46ch; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .opt .o-price { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 34px); line-height: 1; margin-top: 16px; } .opt .o-price .per { font-family: var(--font-cond); font-size: 14px; letter-spacing: .16em; color: var(--mute); margin-left: 8px; } .opt .o-feats { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .opt .o-feats li { font-size: 14px; color: var(--mute); padding-left: 18px; position: relative; } .opt .o-feats li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1px; background: var(--faint); } /* --------------------------------------------------------------- steps ---- */ .flow { padding-top: calc(var(--nav-h) + clamp(28px, 5vw, 64px)); padding-bottom: clamp(60px, 8vw, 120px); } .flow-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(26px, 4vw, 44px); } .progress { position: fixed; top: var(--nav-h); left: 0; right: 0; height: 2px; background: var(--line); z-index: 80; } .progress i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .7s var(--ease-out); } .step { display: none; } .step.active { display: block; animation: stepIn .6s var(--ease-out) both; } @keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .step-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(28px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--line); } .step-back { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .2em; font-size: 13px; background: none; border: 0; padding: 8px 0; cursor: pointer; color: var(--mute); transition: color .3s var(--ease); } .step-back:hover { color: var(--ink); } .step-back[hidden] { visibility: hidden; display: block; } /* review list */ .review { border-top: 1px solid var(--line); } .review .r-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); } .review .r-val { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.1; } .review .r-edit { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; background: none; border: 0; border-bottom: 1px solid var(--line-2); cursor: pointer; padding: 0 0 2px; } @media (max-width: 620px) { .review .r-row { grid-template-columns: minmax(0, 1fr) auto; } .review .r-row .label { grid-column: 1 / -1; } } /* --------------------------------------------------------------- forms ---- */ .fields { display: grid; gap: 18px; } .fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 700px) { .fields.two { grid-template-columns: minmax(0, 1fr); } } .field label { display: block; margin-bottom: 8px; } .field input, .field select, .field textarea { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 12px 0; transition: border-color .3s var(--ease); -webkit-appearance: none; appearance: none; } .field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 12px) 1.15em, calc(100% - 6px) 1.15em; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 28px; } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--ink); } /* Placeholder text is text: it takes --mute (5:1), never the decorative grey. */ .field input::placeholder, .field textarea::placeholder { color: var(--mute); } .field .hint { color: var(--mute); font-size: 13px; margin-top: 8px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; } .check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #0b0b0b; flex: none; } .check span { font-size: 14.5px; color: var(--mute); } .msg { min-height: 20px; font-size: 14px; color: var(--ink); } .msg.err { color: #a11414; } /* success panel */ .done { text-align: center; padding: clamp(40px, 7vw, 90px) 0; } .done .tick { width: 62px; height: 62px; margin: 0 auto 26px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; animation: tickIn .6s var(--ease-out) both; } .done .tick svg { width: 26px; height: 26px; } /* Drawn state is the DEFAULT and the animation runs from hidden to it, so a browser that skips the animation still shows a tick, never an empty ring. */ .done .tick path { stroke-dasharray: 40; stroke-dashoffset: 0; animation: draw .7s var(--ease-out) .25s backwards; } @keyframes draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } } @keyframes tickIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------ skeleton ---- */ /* The placeholder is the real row minus its value, so nothing jumps when data lands (MatPilot loading-state standard: sheen, never a blink). */ .sk { position: relative; overflow: hidden; background: var(--wash); border-radius: 2px; height: 1em; } .sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: sheen 1.5s infinite; } @keyframes sheen { to { transform: translateX(100%); } } .sk-line { height: 12px; margin: 8px 0; } .sk-w40 { width: 40%; } .sk-w60 { width: 60%; } .sk-w80 { width: 80%; } @media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } } /* ---------------------------------------------------------------- foot ---- */ .foot { border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 86px) 0 34px; } .foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); } @media (max-width: 900px) { .foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .foot .cols { grid-template-columns: minmax(0, 1fr); } } .foot a { color: var(--mute); font-size: 15px; display: inline-block; padding: 4px 0; transition: color .3s var(--ease); } .foot a:hover { color: var(--ink); } .foot .lockup { width: 190px; color: var(--ink); } .foot-base { margin-top: clamp(32px, 5vw, 56px); padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; align-items: center; } .foot-base .mp { display: inline-flex; align-items: center; gap: 8px; } /* ------------------------------------------------------------- loader ---- */ #bz-loader { position: fixed; inset: 0; z-index: 1000; background: var(--ink); display: grid; place-items: center; transition: opacity .7s var(--ease), visibility .7s var(--ease); } #bz-loader.hide { opacity: 0; visibility: hidden; } /* The academy's own stacked logo, animated inside the SVG file itself: the monogram wipes in, BRAZIER arrives letter by letter (each letter is its own path in the original artwork), then the tagline. Sitting above the bar. */ #bz-loader .lmark { width: clamp(120px, 20vw, 170px); height: auto; opacity: 0; animation: lIn .35s var(--ease-out) both; } #bz-loader .lbar { position: absolute; left: 50%; bottom: 26%; transform: translateX(-50%); width: min(200px, 44vw); height: 1px; background: rgba(255,255,255,.2); overflow: hidden; } #bz-loader .lbar i { display: block; height: 100%; width: 0; background: #fff; } @keyframes lIn { from { opacity: 0; } to { opacity: 1; } } /* page-exit wipe */ #bz-wipe { position: fixed; inset: 0; z-index: 999; background: var(--ink); transform: translateY(100%); pointer-events: none; } #bz-wipe.in { transform: translateY(0); transition: transform .55s var(--ease-out); } /* ------------------------------------------------------------ scrollbar ---- */ /* A hairline in the page's own ink instead of the platform's grey slab. Only the standard properties: defining ::-webkit-scrollbar would turn an overlay scrollbar into a permanent gutter for everyone who does not have one today. */ html { scrollbar-width: thin; scrollbar-color: rgba(11, 11, 11, .3) transparent; } /* ------------------------------------------------------------ utilities ---- */ .mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mb-0 { margin-bottom: 0; } .center { text-align: center; } .flexrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .nowrap { white-space: nowrap; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 12px 18px; z-index: 1001; } .skip:focus { left: 12px; top: 12px; } /* ------------------------------------------------ inline-element blocks ---- */ /* Option cards and the programme rows are