/* ═══════════════════════════════════════════════════════════════════════════
Rotaract Club of Hong Kong Island East · components.css
The film's furniture and everything a page is built from. All of it comes from the
logo (DIRECTION 4a): its two colours, its heavy-over-light lettering, the lockup as
the layout of every title, and the parts of its wheel as every small shape:
the tooth bullets, ticks, the slate mark, the seam
the window small pictures, the pointer of the current page
the ring progress, radio buttons, focus
the keyway the loading mark, the tick of a checkbox
the outline the cog frame, medals
Everything is in @layer components, so wheel.css and page CSS (unlayered) win.
Components read the semantic tokens of base.css (--bg --fg --fg-muted --rule
--focus --row --field …), never the raw palette, so a tone can re-point them.
Nothing here animates a layout property: transforms, opacity, clip-path, masks.
═══════════════════════════════════════════════════════════════════════════ */
@layer components {
/* ─────────────────────────────────────────────────────── 1 Tones ──
Dark throughout. A tone only shifts the ground one step and re-points what reads it. */
.section--night, .tone-night { --bg: var(--night); --row: var(--night-2); --row-hover: var(--black); --field: var(--black); }
.section--black, .tone-black { --bg: var(--black); --row: var(--night); --row-hover: var(--night-2); --field: var(--night); }
/* A large dim field of cranberry: bone text (7.8), bone focus ring, no cranberry-lit on it. */
.section--lit, .tone-lit, .panel--lit {
--bg: var(--cranberry-deep); --fg: var(--bone); --fg-muted: var(--bone); --link: var(--bone); --focus: var(--bone); --accent: var(--white);
--rule: rgb(242 236 230 / .28); --row: rgb(11 8 9 / .28); --field: var(--black);
--btn-bg: var(--bone); --btn-fg: var(--black); --btn-bg-hover: var(--white); --btn-line: var(--bone);
}
.tone-night, .tone-black, .tone-lit { background: var(--bg); color: var(--fg); }
/* A pool of cranberry light: part of a scene, behind the wheel or at an edge. Decorative.
Place it with --x / --y (the centre) and --size. */
.pool {
position: absolute;
inset-block-start: var(--y, 50%);
inset-inline-start: var(--x, 50%);
inline-size: var(--size, min(110vmin, 62rem));
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: radial-gradient(closest-side, var(--light), var(--light-0));
pointer-events: none;
}
.pool--dim { opacity: .5; }
/* ─────────────────────────────── 2 Icons, the wheel and its parts ── */
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.sprite symbol[id^="i-"] :is(path, circle, rect, line, polyline, polygon, ellipse) { vector-effect: non-scaling-stroke; }
.icon { flex: none; inline-size: 1.5rem; block-size: 1.5rem; }
.icon--line { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--solid { fill: currentColor; }
.icon--up { rotate: -90deg; }
.icon--down { rotate: 90deg; }
.icon--back { rotate: 180deg; }
/* The wheel inline: one colour, the current one. Never stretched: it keeps its square. */
.wheel { display: block; aspect-ratio: 1; fill: currentColor; overflow: visible; }
.wheel__window { fill: transparent; }
.wheel__window.is-lit { fill: var(--cranberry); }
/* The tooth: one round-topped tooth of the rim, standing up. The bullet of every list, the tick of
every scale, the mark that opens a slate line. Its size follows the text beside it. */
.tooth, .slate::before, .tooth-list > li::before, .field__error::before, .site-menu__link::before {
flex: none;
inline-size: calc(.78em * var(--tooth-ratio, 1.2));
block-size: .78em;
background: var(--accent);
-webkit-mask: var(--tooth-mask) center / 100% 100% no-repeat;
mask: var(--tooth-mask) center / 100% 100% no-repeat;
}
.tooth { display: inline-block; }
.tooth--white { background: var(--white); }
/* The window: the wedge between two spokes, upright (its point is down, towards the hub).
A small picture or emblem sits in it (.frame--window); alone it is a pointer. */
.window-mark {
display: inline-block;
flex: none;
inline-size: calc(.8em * var(--window-ratio, 1.1));
block-size: .8em;
background: var(--accent);
-webkit-mask: var(--window-mask) center / 100% 100% no-repeat;
mask: var(--window-mask) center / 100% 100% no-repeat;
}
.window-mark--up { rotate: 180deg; }
/* The keyway: the hub's "C" channel. Still, it is the tick of a checkbox; turning, it is the loading mark. */
.keyway, .loading-mark {
display: inline-block;
flex: none;
inline-size: 1.15em;
block-size: 1.15em;
background: currentColor;
-webkit-mask: var(--keyway-mask) center / contain no-repeat;
mask: var(--keyway-mask) center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) { .loading-mark { animation: rac-turn 1.2s linear infinite; } }
@keyframes rac-turn { to { rotate: 360deg; } }
/* The ring: the inner ring of the wheel, in its own thickness. A progress ring:
*/
.ring { display: block; inline-size: var(--ring-size, 3.5rem); aspect-ratio: 1; rotate: -90deg; overflow: visible; }
.ring circle { fill: none; stroke-width: calc(20px * var(--ring-share, .1226)); }
.ring__track { stroke: var(--line-strong); }
.ring__value { stroke: var(--accent); stroke-dasharray: calc(var(--p, 0) * 100) 100; transition: stroke-dasharray var(--dur-4) var(--ease-out); }
/* Six spokes make every six-way layout: six things round a centre in 60 degree steps, the first at the
first window (30 degrees past twelve o'clock, as in the wheel). A plain folding grid under 56rem. */
.six { display: grid; gap: var(--gap, 1rem); grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
.six > :nth-child(1) { --i: 0; } .six > :nth-child(2) { --i: 1; } .six > :nth-child(3) { --i: 2; }
.six > :nth-child(4) { --i: 3; } .six > :nth-child(5) { --i: 4; } .six > :nth-child(6) { --i: 5; }
@media (min-width: 56rem) {
.six--round { position: relative; display: block; inline-size: min(100%, var(--six-size, 44rem)); aspect-ratio: 1; margin-inline: auto; }
.six--round > * {
--a: calc(var(--i) * 60deg + var(--six-turn, 30deg));
position: absolute;
inset-block-start: calc(50% - cos(var(--a)) * var(--six-r, 37%));
inset-inline-start: calc(50% + sin(var(--a)) * var(--six-r, 37%));
inline-size: var(--six-item, 26%);
translate: -50% -50%;
}
.six--round > .six__hub { inset-block-start: 50%; inset-inline-start: 50%; inline-size: var(--six-hub, 30%); }
}
/* ─────────────────────────────────────────────── 3 Buttons and links ──
Pills, 48px high at least. Primary = cranberry with a white label (5.1) and a small cog that turns.
Secondary = a bone outline. The label says what happens. */
.btn {
--pad: 1.5rem;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6em;
min-block-size: var(--btn-h);
padding: .55rem var(--pad);
border: 1px solid transparent;
border-radius: var(--r-full);
font-family: var(--font-text);
font-size: 1.0625rem;
font-weight: var(--fw-strong);
line-height: var(--lh-ui);
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease;
}
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primary::before {
content: "";
flex: none;
inline-size: 1.15em;
block-size: 1.15em;
background: currentColor;
-webkit-mask: var(--wheel-full-mask) center / contain no-repeat;
mask: var(--wheel-full-mask) center / contain no-repeat;
transition: rotate var(--dur-5) var(--ease-out);
}
.btn--primary:focus-visible::before { rotate: 120deg; }
.btn--primary:active, .btn--primary.is-pressed { background: var(--cranberry-deep); }
.btn--secondary { border-color: var(--btn-line); color: var(--fg); }
.btn--secondary:active, .btn--secondary.is-pressed { background: var(--bone-a10); }
.btn--sm { --btn-h: 2.75rem; --pad: 1.125rem; font-size: 1rem; }
.btn--lg { --btn-h: 3.5rem; --pad: 2rem; font-size: 1.125rem; }
.btn--block { display: flex; inline-size: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: default; }
.btn .loading-mark { display: none; }
@media (hover: hover) and (pointer: fine) {
.btn--primary:hover { background: var(--btn-bg-hover); }
.btn--primary:hover::before { rotate: 120deg; }
.btn--secondary:hover { border-color: var(--fg); background: var(--bone-a06); }
}
/* A text link that stands alone: bone, on a cranberry hairline. */
.link {
display: inline-flex;
align-items: center;
gap: .4em;
min-inline-size: var(--target);
min-block-size: var(--target);
color: var(--fg);
font-weight: var(--fw-strong);
line-height: var(--lh-ui);
text-decoration: underline;
text-decoration-color: var(--accent);
text-decoration-thickness: 1px;
text-underline-offset: .35em;
transition: text-decoration-thickness var(--dur-1) ease;
}
.link .icon { inline-size: 1.25rem; block-size: 1.25rem; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-thickness: 2px; } }
/* Round 48px control and the quiet buttons of the bars. */
.round-btn {
display: inline-grid;
place-items: center;
inline-size: 3rem;
block-size: 3rem;
border: 1px solid var(--btn-line);
border-radius: 50%;
color: var(--fg);
transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease;
}
.tool-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
min-inline-size: var(--target);
min-block-size: var(--target);
padding-inline: .5rem;
border-radius: var(--r-full);
color: var(--ash);
font-size: 1rem;
font-weight: var(--fw-strong);
line-height: var(--lh-ui);
text-decoration: none;
cursor: pointer;
transition: color var(--dur-2) ease;
}
.tool-btn:active, .tool-btn.is-pressed, .round-btn:active, .round-btn.is-pressed { color: var(--bone); background: var(--bone-a10); }
@media (hover: hover) and (pointer: fine) {
.tool-btn:hover { color: var(--bone); }
.round-btn:hover { border-color: var(--fg); background: var(--bone-a06); }
}
/* A pause / play pair inside one button. */
[data-motion-toggle] .icon--play { display: none; }
[data-motion-toggle][aria-pressed="true"] .icon--play { display: block; }
[data-motion-toggle][aria-pressed="true"] .icon--pause { display: none; }
/* ───────────────────────────────── 4 The letterbox, the grain, the bars ──
Two fixed bars frame the picture. The header lies on the top one, the HUD on the bottom one.
Each bar is a tall panel of the page's own black, moved by transform alone; --lb-top / --lb-bot say
how much of it shows (core.js sets them on .letterbox; without scripts they are the thin bands). */
.letterbox { position: fixed; inset: 0; z-index: var(--z-bars); pointer-events: none; }
.letterbox__bar {
position: absolute;
inset-inline: 0;
block-size: 52vh;
background: var(--black);
pointer-events: auto;
transition: transform var(--dur-5) var(--ease-film);
}
.letterbox__bar--top {
inset-block-start: 0;
border-block-end: 1px solid var(--line);
transform: translate3d(0, calc(var(--lb-top, var(--bar-top)) - 100%), 0);
}
.letterbox__bar--bottom {
inset-block-end: 0;
transform: translate3d(0, calc(100% - var(--lb-bot, var(--bar-bot))), 0);
}
.letterbox.is-live .letterbox__bar { transition: none; }
@media (prefers-reduced-motion: reduce) { .letterbox__bar { transition: none; } }
.letterbox__probe { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; visibility: hidden; pointer-events: none; }
.letterbox__probe--film { block-size: var(--film-bar); }
.letterbox__probe--closed { block-size: var(--closed-bar); }
/* The playhead: the edge of the bottom bar is its line, a small cog rolls along it, and each tick is a tooth. */
.playhead {
position: absolute;
inset-inline: 0;
inset-block-start: -1rem;
block-size: 1.5rem;
cursor: pointer;
touch-action: none;
-webkit-user-select: none;
user-select: none;
outline-offset: -3px;
}
.playhead__line { position: absolute; inset-inline: 0; inset-block-start: 1rem; block-size: 1px; background: var(--line); }
.playhead__done { position: absolute; inset: 0; background: var(--cranberry); transform-origin: 0 50%; transform: scaleX(0); }
.playhead__ticks { position: absolute; inset-inline: 0; inset-block-start: 1rem; block-size: 0; }
.playhead__ticks > span {
position: absolute;
inset-block-start: 0;
inset-inline-start: calc(var(--at) * 100%);
inline-size: calc(.4rem * var(--tooth-ratio, 1.2));
block-size: .4rem;
translate: -50% 0;
rotate: 180deg;
background: var(--ash);
-webkit-mask: var(--tooth-mask) center / 100% 100% no-repeat;
mask: var(--tooth-mask) center / 100% 100% no-repeat;
}
.playhead__cog {
position: absolute;
inset-inline-start: 0;
inset-block-start: calc(1rem - var(--cog, 1.125rem));
inline-size: var(--cog, 1.125rem);
block-size: var(--cog, 1.125rem);
color: var(--cranberry);
pointer-events: none;
}
.playhead__cog .wheel { inline-size: 100%; block-size: 100%; }
.playhead:focus-visible .playhead__cog { color: var(--white); }
/* Grain and vignette: one fixed overlay over the picture, under the bars. Plain opacity only.
The grain is a small tile of noise (the art producer's img/art/grain-1.png when it exists: the build
points --grain at it; otherwise the turbulence below) moved in steps, eight to the second. It holds
still under reduced motion, when motion is paused, and when a scene asks (RAC.grain.still). */
.film { position: fixed; inset: 0; z-index: var(--z-film); overflow: hidden; pointer-events: none; contain: strict; }
.film__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 125% 95% at 50% 50%, rgb(11 8 9 / 0) 52%, rgb(11 8 9 / .6) 100%); }
.film__grain {
position: absolute;
inset: -4rem;
background-image: var(--grain, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.7 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"));
background-size: var(--grain-size, 200px) var(--grain-size, 200px);
opacity: var(--grain-opacity, .16);
}
@media (prefers-reduced-motion: no-preference) {
html.js .film__grain { animation: rac-grain 1s steps(1) infinite; }
}
html.is-grain-still .film__grain, html.is-motion-paused .film__grain { animation-play-state: paused; }
@keyframes rac-grain {
0% { transform: translate3d(0, 0, 0); }
12.5% { transform: translate3d(-23px, 17px, 0); }
25% { transform: translate3d(31px, -9px, 0); }
37.5% { transform: translate3d(-11px, -27px, 0); }
50% { transform: translate3d(19px, 29px, 0); }
62.5% { transform: translate3d(-33px, 5px, 0); }
75% { transform: translate3d(7px, -19px, 0); }
87.5% { transform: translate3d(-17px, 23px, 0); }
}
/* The page-change wipe grows from the wheel of the header logo (base.css). Its box is 60vmax across,
centred on that wheel; nothing in it is ever seen outside a page change. */
.wipe-anchor {
position: fixed;
inset-block-start: calc(var(--wipe-y) - 30vmax);
inset-inline-start: calc(var(--wipe-x) - 30vmax);
inline-size: 60vmax;
block-size: 60vmax;
pointer-events: none;
view-transition-name: rac-wipe;
}
/* The header, on the top bar. */
.site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header); block-size: var(--header-h); pointer-events: none; }
.site-header__bar {
display: flex;
align-items: center;
column-gap: clamp(.5rem, 1.6vw, 1.75rem);
block-size: 100%;
padding-inline: var(--gutter);
pointer-events: auto;
}
.brand { display: inline-flex; flex: none; align-items: center; min-block-size: var(--target); }
.brand__logo { inline-size: auto; block-size: var(--logo-h); max-inline-size: none; }
.brand__standin { display: block; inline-size: var(--logo-h); block-size: var(--logo-h); color: var(--white); }
.brand__standin .wheel { inline-size: 100%; block-size: 100%; }
.site-nav { margin-inline-start: auto; }
.site-nav__list { display: flex; align-items: center; gap: clamp(0rem, .9vw, 1rem); }
.site-nav__link {
display: inline-flex;
align-items: center;
min-block-size: var(--target);
padding-inline: .7rem;
color: var(--ash);
font-size: 1rem;
font-weight: var(--fw-strong);
line-height: var(--lh-ui);
text-decoration: none;
white-space: nowrap;
transition: color var(--dur-2) ease;
}
.site-nav__link > span { position: relative; padding-block: .6rem; }
/* The current page, and the link under the pointer, is pointed at by one window of the wheel. */
.site-nav__link > span::after {
content: "";
position: absolute;
inset-inline-start: 50%;
inset-block-end: -.1rem;
inline-size: calc(.55rem * var(--window-ratio, 1.1));
block-size: .55rem;
margin-inline-start: calc(.55rem * var(--window-ratio, 1.1) / -2);
background: var(--cranberry);
-webkit-mask: var(--window-mask) center / 100% 100% no-repeat;
mask: var(--window-mask) center / 100% 100% no-repeat;
rotate: 180deg;
opacity: 0;
transform: translate3d(0, -.35rem, 0);
transition: opacity var(--dur-2) ease, transform var(--dur-3) var(--ease-out);
}
.site-nav__link[aria-current="page"] { color: var(--bone); }
.site-nav__link[aria-current="page"] > span::after { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
.site-nav__link:hover { color: var(--bone); }
.site-nav__link:hover > span::after { opacity: 1; transform: none; }
}
.site-tools { display: flex; flex: none; align-items: center; gap: .25rem .5rem; }
.site-header__cta { margin-inline-start: .25rem; white-space: nowrap; }
.lang-btn .icon, .menu-btn .icon { inline-size: 1.375rem; block-size: 1.375rem; }
.menu-btn { display: none; }
/* What fits is measured (header.html): data-level 0 … 4. */
.site-header:is([data-level="1"], [data-level="2"], [data-level="3"], [data-level="4"]) .lang-btn__name { display: none; }
.site-header:is([data-level="2"], [data-level="3"], [data-level="4"]) .site-nav { display: none; }
.site-header:is([data-level="2"], [data-level="3"], [data-level="4"]) .menu-btn { display: inline-flex; }
.site-header:is([data-level="2"], [data-level="3"], [data-level="4"]) .site-tools { margin-inline-start: auto; }
.site-header:is([data-level="3"], [data-level="4"]) .menu-btn__label { display: none; }
.site-header[data-level="4"] .site-header__cta { display: none; }
/* Without scripts nothing is measured: a plain breakpoint, and the two buttons lead to the footer's lists. */
@media (max-width: 61.99rem) {
html:not(.js) .site-nav, html:not(.js) .lang-btn__name { display: none; }
html:not(.js) .menu-btn { display: inline-flex; }
html:not(.js) .site-tools { margin-inline-start: auto; }
}
@media (max-width: 27.99rem) {
html:not(.js) .menu-btn__label { display: none; }
}
/* The HUD, on the bottom bar: where you are, the sound switch, "Skip to joining". Slate type. */
.hud {
position: fixed;
inset-block-end: 0;
inset-inline: 0;
z-index: var(--z-header);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
block-size: var(--bar-bot);
padding-inline: var(--gutter);
padding-block-end: var(--safe-b);
color: var(--ash);
font-size: var(--fs-slate); /* lint-ok: the HUD is slate furniture */
font-weight: var(--fw-slate);
line-height: var(--lh-ui);
letter-spacing: var(--tracking-slate);
text-transform: var(--case-slate);
font-variant-numeric: tabular-nums lining-nums;
pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud__where { display: flex; align-items: center; gap: .7em; min-inline-size: 0; max-inline-size: none; white-space: nowrap; }
.hud__tooth { flex: none; inline-size: calc(.78em * var(--tooth-ratio, 1.2)); block-size: .78em; background: var(--cranberry); -webkit-mask: var(--tooth-mask) center / 100% 100% no-repeat; mask: var(--tooth-mask) center / 100% 100% no-repeat; }
.hud__part { flex: none; color: var(--bone); font-weight: var(--fw-text); }
.hud__title { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.hud__part:not([hidden]) + .hud__title { padding-inline-start: .7em; border-inline-start: 1px solid var(--line-strong); }
.hud__tools { display: flex; flex: none; align-items: center; gap: .25rem clamp(.5rem, 2vw, 1.5rem); }
.hud__btn {
display: inline-flex;
align-items: center;
gap: .5em;
min-block-size: var(--target);
padding-inline: .25rem;
color: var(--bone);
font: inherit;
font-weight: var(--fw-text);
letter-spacing: inherit;
text-transform: inherit;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.hud__skip { text-decoration: underline; text-decoration-color: var(--cranberry); text-decoration-thickness: 1px; text-underline-offset: .4em; }
/* Play / Pause: the film scrolls by itself (RAC.film). The words change with the state; on a phone the icon stands alone. */
.hud__play { color: var(--white); font-weight: var(--fw-strong); }
.hud__play .icon { inline-size: 1.25rem; block-size: 1.25rem; color: var(--cranberry-lit); }
.hud__play .hud__play-stop { display: none; }
.hud__play[data-film-state="playing"] .hud__play-stop { display: block; }
.hud__play[data-film-state="playing"] .hud__play-go { display: none; }
.hud__sound .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.hud__sound .hud__sound-on { display: none; }
.hud__sound[aria-pressed="true"] .hud__sound-on { display: block; color: var(--cranberry-lit); }
.hud__sound[aria-pressed="true"] .hud__sound-off { display: none; }
.hud__sound-state { color: var(--ash); font-weight: var(--fw-slate); }
@media (hover: hover) and (pointer: fine) { .hud__skip:hover { text-decoration-thickness: 2px; } }
@media (max-width: 40rem) {
.hud { gap: .5rem; }
.hud__sound-label { display: none; }
.hud__where { gap: .5em; }
.hud__play { min-inline-size: var(--target); justify-content: center; }
.hud__play-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* ───────────────────────────────────── 5 Overlays: the menu, the languages ──
Native