/* ══════════════════════════════════════════════════════════════════════ RIGLIFE prototype — the shared sheet One sheet for the whole Riglife world — the club page and the nomination page — because two pages in one visual world cannot each own a copy of it: the moment they do, a token moves in one and not the other and the two pages stop being the same place. Loaded from riglife-header.php; the `rl` body class the templates opt into is what switches it on. Everything here is world-level — tokens, the fence that keeps these rules out of the legacy chalkboards, the plate, the buttons, the form vocabulary, the motion. Page-specific rules stay in the page. ══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ RIGLIFE — Master Driller Club The visual world is not invented here. It is the one already built for the Riglife store's Master Driller Club page (riglife.store), lifted token for token so the two pages read as one brand: near-black ground, hairline rules, Barlow Condensed set tight and uppercase, stamped-steel plates with corner rivets, hazard stripes, and a single stamp red. The chalkboards are the exception and they are untouched. The page treats them as what they are — trophies — and gives them a wall to hang on. A note on specificity, because this file loads the theme's css/type.css: that file sizes `h1`-`h4`, `p`, `a`, `li` and `span` with bare element selectors at !important. Every rule here that sets a font-size therefore carries a `.rl` ancestor AND !important — (0,1,1) beats (0,0,1) at equal importance. Without that the display type silently collapses to body size. ═══════════════════════════════════════════════════════════════ */ .rl { /* ── the store's tokens, verbatim ── */ --bg: #08090a; --surface: #121517; --surface-2: #1e2327; --line: #23282c; --line-2: #333a40; --fg: #eef1f2; --dim: #b9c2c7; --muted: #8b969d; --stamp: #f03a2f; --ease: cubic-bezier(.16, 1, .3, 1); --h: 78px; /* was 64, carrying a 21px mark */ --display: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif; --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; --gut: clamp(18px, 4vw, 56px); --max: 1440px; } /* The ground. sass/style.css paints the body from a legacy id-scoped rule, so this is stated on the wrapper rather than fought for on . */ .rl { background: var(--bg); color: var(--fg); font-family: var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; /* clip, not hidden: hidden would make this a scroll container and freeze any view() timeline inside it */ } .rl *, .rl *::before, .rl *::after { box-sizing: border-box; } /* * ── THE FENCE ───────────────────────────────────────────────────────── * Every element-level rule in this file is fenced out of `.rl-hang`, the * wrapper around each chalkboard. Without the fence these rules reach * inside the boards and restyle them: `.rl h2` is (0,1,1) with !important, * which outranks both css/type.css and the board's own class rules, so the * chalk headings grew until "GEOTHERMAL DRILLER" collided with the skulls, * and `.rl p` repainted the chalk body copy grey. * * The brief says leave the boards as they are. This is what makes that * true rather than merely intended. * ─────────────────────────────────────────────────────────────────────── */ /* The fence has two jobs now, not one. The first is the original: keep these element-level rules out of the legacy chalkboards, which style themselves and break when this world reaches them. The second arrived when the prototype became the real page — `.rl` moved onto , which put the site's own Riglife footer inside the world and restyled its headings in Barlow Condensed. Scoping the element rules to `main` keeps them on the page this world owns and off the chrome around it. The bar keeps its own two lines below, because it needs them and has no element-level rules of its own. */ .rl-head a { color: inherit; text-decoration: none; } .rl main p:not(.rl-hang *), .rl main li:not(.rl-hang *) { font-family: var(--body) !important; color: var(--dim); } .rl main a:not(.rl-hang *) { color: inherit; text-decoration: none; } .rl main h1:not(.rl-hang *), .rl main h2:not(.rl-hang *), .rl main h3:not(.rl-hang *), .rl main h4:not(.rl-hang *) { font-family: var(--display) !important; font-weight: 900; text-transform: uppercase; color: var(--fg); margin: 0; } .rl main h1:not(.rl-hang *) { font-size: clamp(46px, 8.4vw, 128px) !important; line-height: .84; letter-spacing: -.025em; } .rl main h2:not(.rl-hang *) { font-size: clamp(30px, 4.6vw, 62px) !important; line-height: .9; letter-spacing: -.018em; } .rl main h3:not(.rl-hang *) { font-size: clamp(19px, 1.7vw, 26px) !important; line-height: 1; letter-spacing: .01em; font-weight: 800; } .rl__in { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); } /* The header is sticky, so an in-page jump used to land with the section heading tucked underneath it. Three buttons and a nav item now point at #submit, so every anchored section reserves the header's height. */ .rl #clubs, .rl #board, .rl #submit, .rl #master, .rl #doty, .rl #gear { scroll-margin-top: calc(var(--h) + 16px); } /* sass/style.css puts 90px of top padding on `main`, which pushed a "full screen" hero 90px down and left a black band under the header. */ .rl main { padding-top: 0; } /* ── the micro label. Used everywhere a value needs naming. ── */ .rl-lab { font-family: var(--display) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); line-height: 1; } .rl-lede strong { color: var(--fg); font-weight: 700; } .rl-lede { color: var(--dim) !important; max-width: 68ch; font-size: clamp(15px, 1.4vw, 18px) !important; line-height: 1.62; } /* ── buttons: square, tracked, two weights only ── */ .rl-btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display) !important; font-size: 13px !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 15px 22px; border: 1px solid var(--fg); background: var(--fg); color: #0a0b0c !important; transition: background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); } .rl-btn svg { width: 15px; height: 15px; flex: 0 0 auto; } .rl-btn:hover { background: #fff; transform: translateY(-1px); } .rl-btn--ghost { background: transparent; color: var(--fg) !important; border-color: var(--line-2); } .rl-btn--ghost:hover { background: transparent; border-color: var(--fg); } .rl-btn:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; } /* ── the steel plate: the world's load-bearing component ── */ /* The plate stays CSS rather than a raster asset because the store's own plate is CSS — its .mdc-hero__plate and .mdc-btn-steel rules are gradients and borders, nothing loaded. What was wrong was the strength: at .055 the sheen and at .34 the rivets were both below perception, so the world's load-bearing component read as a slightly lighter rectangle. Brushed grain, a real top bevel, a floor shade, and rivets that catch light. */ .rl-plate { position: relative; background: /* the brush, running with the plate */ repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px), /* the sheen, from the upper left like every other light on this page */ linear-gradient(152deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 34%, rgba(255,255,255,0) 58%), linear-gradient(180deg, #1b1f22 0%, #141719 52%, #0e1012 100%); border: 1px solid #3a4248; box-shadow: inset 0 1px 0 rgba(255,255,255,.13), /* the bevel catching the light */ inset 0 -1px 0 rgba(0,0,0,.6), /* and the floor of it */ 0 26px 60px -30px rgba(0,0,0,.95); } /* Four rivets. Drawn as one background, not four elements. */ .rl-plate::before { content: ""; position: absolute; inset: 6px; pointer-events: none; /* A rivet is a dome: lit top-left, shadowed bottom-right, seated in a ring. Three stops in one gradient does that; a flat dot at .34 did not. */ background-image: radial-gradient(circle at 35% 32%, rgba(255,255,255,.85) 0 12%, rgba(255,255,255,.42) 38%, rgba(0,0,0,.72) 76%, transparent 78%), radial-gradient(circle at 35% 32%, rgba(255,255,255,.85) 0 12%, rgba(255,255,255,.42) 38%, rgba(0,0,0,.72) 76%, transparent 78%), radial-gradient(circle at 35% 32%, rgba(255,255,255,.85) 0 12%, rgba(255,255,255,.42) 38%, rgba(0,0,0,.72) 76%, transparent 78%), radial-gradient(circle at 35% 32%, rgba(255,255,255,.85) 0 12%, rgba(255,255,255,.42) 38%, rgba(0,0,0,.72) 76%, transparent 78%); background-position: 0 0, 100% 0, 0 100%, 100% 100%; background-size: 7px 7px; background-repeat: no-repeat; } .rl-plate__row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); } .rl-plate__cell { padding: 13px 18px; min-width: 0; } .rl-plate__cell + .rl-plate__cell { border-left: 1px solid var(--line); } .rl-plate__cell strong { display: block; margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .01em; text-transform: uppercase; color: var(--fg); line-height: 1.1; } /* ── hazard stripes: the plate's footer, and nothing else ── */ .rl-hazard { display: flex; align-items: center; gap: 14px; padding: 9px 12px 9px 12px; border-top: 1px solid var(--line-2); overflow: clip; /* Hazard striping, not grain: at .05 over 6/13px this was invisible. */ background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 7px, rgba(255,255,255,.02) 7px 16px); } .rl-chip { font-family: var(--display) !important; font-size: 11px !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: var(--fg); color: #0a0b0c; padding: 5px 9px; white-space: nowrap; } .rl-chip--ghost { background: transparent; color: var(--dim); border: 1px solid var(--line-2); } /* The hazard footer's right-hand note sat directly on the striping once the stripes were raised to a strength that actually read. It gets a flat band of its own — the stripes still run between the two, which is where the device does its work. */ .rl-hazard > .rl-lab:last-child { position: relative; background: #14171a; box-shadow: 0 0 0 6px #14171a; color: var(--dim); } /* ── section furniture ── */ .rl-sec { padding-block: clamp(56px, 8vw, 116px); border-top: 1px solid var(--line); } .rl-sec__head { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(20px, 4vw, 72px); align-items: end; } .rl-sec__head .rl-lab { margin-bottom: 18px; } @media (max-width: 860px) { .rl-sec__head { grid-template-columns: minmax(0,1fr); } } /* ═══════════ HEADER ═══════════ */ .rl-head { /* The fallback matters: the Riglife sub-page and shop templates share this header without opting into the `rl` scope, so --h is undefined there. */ position: sticky; top: 0; z-index: 60; height: var(--h, 78px); display: flex; align-items: center; background: rgba(8,9,10,.82); backdrop-filter: blur(10px); } /* Below the hero — once the red cut has scrolled away — the header needs its own edge back, or it floats off the content. */ .rl-head.is-stuck { border-bottom: 1px solid var(--line); } .rl-head__in { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); } /* * The marks. RIGLIFE was set at 21px and GTD at 26px — and because the RIGLIFE * file is 800×316 rather than the 340×21 its attributes claimed, 21px of height * rendered it 53px wide: the club's own name came out smaller than the company * mark beside it, on the club's own page. It leads now, and the bar grew to * hold it. */ .rl-head img.rl-mark { height: 44px; width: auto; display: block; } .rl-head img.rl-gtd { height: 30px; width: auto; display: block; opacity: .85; } .rl-nav { display: flex; gap: clamp(14px, 2vw, 28px); margin-left: auto; } .rl-nav a { font-family: var(--display) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); padding-block: 6px; border-bottom: 1px solid transparent; transition: color .16s, border-color .16s; } .rl-nav a:hover, .rl-nav a:focus-visible { color: var(--fg); border-bottom-color: var(--stamp); outline: none; } .rl-head__sep { width: 1px; height: 22px; background: var(--line); } /* Five items no longer fit beside two logos before 1010px. The rule drops the middle two and keeps the last, which is now "Submit a record". */ @media (max-width: 1010px) { .rl-nav a:nth-child(n+3):not(:last-child) { display: none; } } @media (max-width: 560px) { .rl-nav { display: none; } .rl-head__in { justify-content: space-between; } .rl-head__in > .rl-head__sep { display: none; } /* With the nav gone the bar carries two marks and nothing else, so it does not need the height the desktop one does. --h flows through to every scroll-margin-top and to the hero's min-height on its own. */ .rl { --h: 64px; } .rl-head img.rl-mark { height: 34px; } .rl-head img.rl-gtd { height: 24px; } } /* ═══════════ HERO — full screen, like the homepage ═══════════ */ .rl-hero { position: relative; isolation: isolate; min-height: calc(100svh - var(--h)); display: grid; align-content: center; overflow: clip; border-bottom: 1px solid var(--line); } .rl-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; /* Never a black rectangle: the video weighs 25 MB and takes a moment, so what sits behind it is the brand's own dark surface — hex lattice at hairline weight, lit from the upper left — rather than nothing. */ background-color: #0b1414; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='0.8'/%3E%3C/svg%3E"), linear-gradient(158deg, #172323 0%, #101a1a 46%, #0a0f0f 100%); } .rl-hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; /* * The store grades its hero to full greyscale. This one stops short of * that on purpose: the whole point of the control top-right is to get * people to turn the sound on, and a dead grey picture does not read as * something worth listening to. Graded enough to belong to the world, * alive enough to be worth un-muting. */ filter: grayscale(.58) contrast(1.14) brightness(.66) saturate(.9); transform: scale(1.04); } /* Two scrims, not one: a side wash so the type has a ground, and a floor so the plate and the scroll cue sit on something. */ .rl-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(8,9,10,.86) 0%, rgba(8,9,10,.66) 34%, rgba(8,9,10,.18) 62%, rgba(8,9,10,.4) 100%), linear-gradient(0deg, rgba(8,9,10,.92) 0%, rgba(8,9,10,.25) 26%, transparent 52%); } /* The horizon: a hairline of stamp red along the very top of the video, the same cut the GTD site puts above its dark bands. */ .rl-hero__cut { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--stamp); z-index: 3; } .rl-hero__in { align-self: center; width: 100%; max-width: var(--max); margin-inline: auto; padding: clamp(28px, 6vh, 64px) var(--gut) clamp(26px, 5vh, 48px); display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 440px); justify-content: space-between; gap: clamp(24px, 4vw, 56px); align-items: end; } @media (max-width: 1040px) { .rl-hero__in { grid-template-columns: minmax(0,1fr); } } .rl-hero h1 { margin-bottom: 22px; } .rl-hero h1 em { font-style: normal; color: var(--stamp); } .rl-hero__lede { margin: 0 0 28px; } .rl-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; } /* ── the board-record plate ──────────────────────────────────────────── It carried the number and the facts and nothing that said whose record it was or where it stood, which made it a hero-metric card: big figure, small labels, accent. Two things fixed that, and both are devices this page already owns rather than new ones. A rank badge riveted to the top-left corner, in the stamp red the page uses for state. And the driller's polaroid pinned to the top-right, the same photograph on the same pin as the fifty below it — which is also what puts a face on the record. Both sit *outside* the plate's rectangle. A plate that merely contains a number is a card; one that things are fixed to is a trophy. */ .rl-rec { position: relative; } .rl-rec__head { padding: 20px 18px 15px; } .rl-rec__ft { display: flex; align-items: baseline; gap: 9px; margin-top: 11px; } .rl-rec__ft b { font-family: var(--display); font-weight: 900; font-size: clamp(58px, 7vw, 96px); line-height: .8; letter-spacing: -.035em; color: #fff; } .rl-rec__ft span { font-family: var(--display) !important; font-weight: 800; font-size: 21px !important; letter-spacing: .06em; color: var(--dim); } .rl-rec__sub { display: flex; gap: 16px; margin-top: 11px; flex-wrap: wrap; } /* the rank, riveted on. Square and straight — a badge is bolted, not tossed; the polaroid opposite it brings the tilt. */ .rl-rec__rank { position: absolute; z-index: 3; left: -13px; top: -15px; width: clamp(54px, 5.2vw, 70px); height: clamp(54px, 5.2vw, 70px); display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: center; gap: 1px; background: var(--stamp); border: 1px solid #ff6b60; box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -2px 0 rgba(0,0,0,.28), 0 14px 26px -12px rgba(0,0,0,.95); } .rl .rl-rec__rank b { font-family: var(--display) !important; font-weight: 900; font-size: clamp(34px, 3.3vw, 44px) !important; line-height: 1; letter-spacing: -.04em; color: #fff; } .rl .rl-rec__rank span { font-family: var(--display) !important; font-weight: 800; font-size: clamp(11px, 1vw, 13px) !important; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.82); } /* the polaroid. The board's own device — white frame, marker caption, hung from the same pin — quoted onto the steel. */ .rl-pola { position: relative; margin: 0; background: #f4f2ee; padding: 7px 7px 0; box-shadow: 0 18px 34px -16px rgba(0,0,0,.95), 0 2px 5px rgba(0,0,0,.4); } .rl-pola__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; filter: contrast(1.04); } .rl-pola__pin { position: absolute; z-index: 2; top: -13px; left: 50%; width: 26px; height: auto; transform: translateX(-50%) rotate(6deg); } .rl .rl-pola figcaption { font-family: "permanent-marker", var(--display) !important; font-size: 12px !important; line-height: 1.9; text-align: center; color: #1b1b1b; padding: 2px 4px 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rl-rec__pola { position: absolute; z-index: 3; right: -12px; top: -22px; width: clamp(84px, 8.6vw, 116px); transform: rotate(4deg); } /* the margin. It is the reason a leaderboard is worth reading and it was a grey label; it speaks in the plate's own voice now. */ .rl .rl-rec__gap { font-family: var(--display) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); position: relative; background: #14171a; box-shadow: 0 0 0 6px #14171a; white-space: nowrap; } .rl .rl-rec__gap b { color: #fff; font-weight: 900; } /* screen-reader only — the badge is decorative to anyone who can see it and silent to anyone who cannot */ .rl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Only the label has to clear the badge. Indenting the whole head pushed the figure off the left edge the four cells below it line up on, which is the one alignment on this plate a reader actually uses — the number belongs over the column, not beside the badge. */ .rl-rec .rl-rec__head > .rl-lab { padding-left: clamp(40px, 4.2vw, 54px); } /* ═══════════ the unmute control ═══════════ The brief asks for animation that encourages people to listen, so this is three things rather than one: rings that travel out of the speaker on a loop, a border that breathes with them, and a single knock at 3.5s and again at 11s for anyone who has not looked at the corner yet. All three stop the instant the button is used — an attention device that keeps pulsing after it has been obeyed is just noise. */ .rl-sound { position: absolute; z-index: 5; top: clamp(16px, 3vh, 30px); right: var(--gut); display: inline-flex; align-items: center; gap: 14px; padding: 11px 16px 11px 13px; background: rgba(8,9,10,.56); backdrop-filter: blur(8px); border: 1px solid var(--line-2); color: var(--fg); font-family: var(--display) !important; font-size: 13px !important; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; animation: rl-knock 9s var(--ease) 3.5s 2 both, rl-breathe 2.4s var(--ease) 8 both; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .rl-sound:hover { border-color: var(--fg); background: rgba(8,9,10,.78); } .rl-sound:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; } .rl-sound__ico { position: relative; width: 28px; height: 18px; flex: 0 0 auto; display: block; } .rl-sound__ico svg { position: absolute; left: 0; top: 0; width: 18px; height: 18px; display: block; } /* the travelling rings */ .rl-sound__ring { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; margin-top: -9px; border: 1.4px solid var(--stamp); border-radius: 50%; clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); /* right half only — a wave, not a bubble */ opacity: 0; transform: scale(.35); pointer-events: none; /* * Eight cycles, not infinite. An attention device that is still pulsing * twenty seconds after a visitor has seen it and chosen not to press it has * stopped asking and started nagging; after eight it rests on the border * state and the control is simply available. */ animation: rl-ring 2.4s var(--ease) 8 both; } .rl-sound__ring:nth-child(3) { animation-delay: .4s; } .rl-sound__ring:nth-child(4) { animation-delay: .8s; } @keyframes rl-ring { 0% { opacity: 0; transform: scale(.35); } 18% { opacity: .95; } 70% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } } /* the border breathing with the rings — described in the note above and, until now, never actually written */ @keyframes rl-breathe { 0%, 100% { border-color: var(--line-2); } 20% { border-color: rgba(255,255,255,.42); } } @keyframes rl-knock { 0%, 4%, 100% { transform: none; } 1% { transform: translateX(-3px); } 2% { transform: translateX(3px); } 3% { transform: translateX(-2px); } } /* resting state, once the visitor has done the thing */ .rl-sound.is-on { animation: none !important; color: var(--dim); border-color: var(--line); background: rgba(8,9,10,.42); } .rl-sound.is-on .rl-sound__ring { display: none; } .rl-sound .rl-sound__off { display: block; } .rl-sound .rl-sound__on { display: none; } .rl-sound.is-on .rl-sound__off { display: none; } .rl-sound.is-on .rl-sound__on { display: block; } /* the scroll cue */ .rl-hero__scroll { position: absolute; left: 50%; bottom: 14px; z-index: 4; transform: translateX(-50%); display: grid; justify-items: center; gap: 9px; } .rl-hero__scroll span { font-family: var(--display) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .rl-hero__scroll i { display: block; width: 1px; height: 40px; background: linear-gradient(180deg, var(--line-2), transparent); position: relative; overflow: hidden; } .rl-hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--fg); animation: rl-drip 2.2s var(--ease) infinite; } @keyframes rl-drip { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } } @media (max-width: 1040px) { .rl-hero__scroll { display: none; } } /* Below 700px the control was landing on top of the eyebrow and clipping it. It goes to the foot of the hero instead — still the first thing in view, and on a phone it is now where the thumb already is. */ /* On a phone the hero is full of copy and the record plate, so a floating control has nowhere to float that is not on top of something. It joins the flow under the two buttons instead — unmissable, never overlapping, and on a phone that is already where the hand is. */ @media (max-width: 700px) { .rl-sound { position: static; transform: none; width: 100%; justify-content: center; background: rgba(18,21,23,.9); } /* * The first viewport promises a driller sees a real record with a real name * before he does anything. On a phone the headline, lede, buttons and the * sound control added up to more than the screen, and the plate — the proof * — fell below the fold. So on a phone the plate comes second, right after * the headline, and it carries the number, the name and the club; the four * supporting cells wait until he has scrolled. */ .rl-hero__in { display: flex; flex-direction: column; align-items: stretch; } .rl-hero__in > div:not(.rl-plate) { display: contents; } .rl-hero h1 { order: 1; } .rl-hero .rl-plate { order: 2; margin: 0 0 24px; width: 100%; } .rl-hero__lede { order: 3; } .rl-hero__cta { order: 4; } .rl-sound { order: 0; margin: 0 0 22px; } /* the number, the name, the club — and the club is already in the hazard footer, so the phone keeps the driller and drops the rest */ .rl-hero .rl-plate__row--where { display: none; } .rl-hero .rl-plate__cell--rig { display: none; } .rl-hero .rl-plate__row--who { grid-template-columns: 1fr; } } /* ═══════════ CLUBS — three depths, one working day ═══════════ */ .rl-clubs__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: clamp(28px, 4vw, 54px); } .rl-club { padding: 0 clamp(14px, 2vw, 30px); } .rl-club + .rl-club { border-left: 1px solid var(--line); } .rl-club img { width: 100%; max-width: 220px; height: auto; display: block; margin-bottom: 18px; /* the store shows product photography desaturated outside the gear shot */ filter: grayscale(.82) contrast(1.1) brightness(.95); transition: filter .4s var(--ease), transform .4s var(--ease); } .rl-club:hover img { filter: grayscale(0) contrast(1.04); transform: translateY(-3px); } .rl-club h3 { margin-bottom: 8px; } .rl-club p { font-size: 13px !important; color: var(--muted) !important; margin: 0; letter-spacing: .04em; } @media (max-width: 760px) { .rl-clubs__grid { grid-template-columns: minmax(0,1fr); } .rl-club { padding: 22px 0; } .rl-club + .rl-club { border-left: 0; border-top: 1px solid var(--line); } .rl-club img { max-width: 150px; } } /* ═══════════ THE WALL — where the chalkboards hang ═══════════ The one idea this page owns. The boards are warm wood and chalk; the world around them is cold steel. Rather than sand either one down to meet in the middle, the page becomes the workshop wall and the boards become what they already are — trophies mounted on it, lit from above. Nothing inside the boards is touched. Everything here is behind and around them: the ground, the light, the plate that names them. */ .rl-wall { position: relative; border-top: 1px solid var(--line); overflow: clip; } .rl-wall::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: /* * The fitting, aimed at the BOARD rather than at the label row above it. * Anchored at 50% -8% the source sat above the label and had decayed to * nothing by the time the frame began 120px lower, so the wall read as * flat. 20% down the section is where the board actually is. */ /* the fitting itself: a tight, bright pool in the strip of wall ABOVE the frame, so the light has somewhere to come from */ radial-gradient(34% 13% at 50% 5%, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 52%, transparent 78%), /* and the broad throw that actually lights the board */ radial-gradient(95% 52% at 50% 22%, rgba(255,255,255,.12) 0%, rgba(255,255,255,.045) 38%, transparent 72%), /* * The bounce. A warm wooden frame lit from in front throws warm light * back onto the wall it hangs on, and without it the boards were pasted * onto the page rather than mounted on it. This is the whole junction * between the chalk world and the steel one. */ radial-gradient(74% 44% at 50% 42%, rgba(171, 106, 58, .2) 0%, rgba(171, 106, 58, .06) 46%, transparent 76%), /* the wall itself: brushed, vertical, almost not there */ repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px), linear-gradient(180deg, #101214 0%, #0b0d0e 62%, #08090a 100%); } .rl-wall__in { position: relative; z-index: 1; } .rl-wall__label { display: flex; align-items: center; gap: 14px; padding-block: clamp(30px, 4vw, 52px) 0; } .rl-wall__label i { flex: 1 1 auto; height: 1px; background: var(--line); display: block; } /* The boards themselves. sass/style.css already sizes and frames them; this only gives them air and a ceiling, which is the "move it, don't redraw it" the brief allows. */ .rl-boards { padding-block: clamp(26px, 4vw, 48px) clamp(46px, 7vw, 92px); } .rl-boards > .content-area { margin-top: 0; padding-top: 0; } /* No max-width: the board's chalk art is fixed-size and it collides with itself below its native width. It gets the theme's own container, exactly as the live page gives it. */ .rl-hang { display: block; } /* * The hanging shadow, which the previous comment promised and the rule below * it never wrote. The board is an object with a frame a couple of inches off * the wall, so the shadow is offset downwards and soft — not a halo. * * It goes on #leaderboard rather than on the table, because the wooden frame * is drawn as that element's own background and the shadow has to follow the * frame, not the chalk inside it. */ .rl-hang { filter: drop-shadow(0 34px 46px rgba(0, 0, 0, .68)) drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); } .rl-boards .container { max-width: none; } /* The two award partials carry their intro copy welded to their chalkboard. The prototype shows the redesigned intro above and the board below, so the partial's own legacy intro row is hidden here rather than edited out of a file the live page still uses. In production the partial splits in two. */ .rl-hide-legacy-intro #master-driller-award-block, .rl-hide-legacy-intro #contractor-award-block, .rl-hide-legacy-intro .contractor-award-block { display: none !important; } /* ═══════════ MASTER DRILLER ═══════════ */ .rl-md { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(26px, 4vw, 44px); } .rl-md h2 { margin-bottom: 18px; } .rl-md__holder { display: inline-grid; gap: 7px; padding: 14px 18px; margin: 26px 0; } .rl-md__holder strong { font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: .01em; text-transform: uppercase; color: #fff; line-height: 1; } .rl-md__fig { position: relative; } .rl-md__fig img { width: 100%; height: auto; display: block; filter: contrast(1.06) brightness(1.02); } @media (max-width: 900px) { .rl-md { grid-template-columns: minmax(0,1fr); } .rl-md__fig { order: -1; max-width: 420px; } } /* ═══════════ DRILLERS OF THE YEAR ═══════════ */ .rl-doty { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(26px, 4vw, 44px); } .rl-doty__card { padding: clamp(20px, 2.6vw, 34px); display: grid; gap: 16px; justify-items: start; } .rl-doty__card img { width: 100%; max-width: 230px; height: auto; display: block; filter: grayscale(.7) contrast(1.08); transition: filter .4s var(--ease); } .rl-doty__card:hover img { filter: grayscale(0); } @media (max-width: 700px) { .rl-doty { grid-template-columns: minmax(0,1fr); } } /* ═══════════ WHAT WINNERS RECEIVE ═══════════ */ .rl-gear { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; border: 1px solid var(--line-2); } .rl-gear__fig { position: relative; min-height: 340px; background: #14171a center/cover no-repeat; } /* full colour, deliberately: it is the only colour photograph on the page and it is the thing being offered */ .rl-gear__body { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; } .rl-gear h2 { margin-bottom: 12px; } .rl-gear__sub { color: var(--stamp) !important; font-family: var(--display) !important; font-weight: 800; font-size: clamp(15px, 1.5vw, 19px) !important; letter-spacing: .05em; text-transform: uppercase; line-height: 1.2; margin: 0 0 26px; } /* nowrap rather than a wider column: the tracking on these labels makes "THE BUCKLE" wider than it looks, and it kept breaking over two lines. */ .rl-spec .rl-lab { white-space: nowrap; } .rl-spec { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); align-items: start; } .rl-spec:last-of-type { border-bottom: 1px solid var(--line); } .rl-spec p { margin: 0; font-size: 15px !important; color: var(--dim) !important; } .rl-spec a { color: #fff !important; text-decoration: underline; text-decoration-color: var(--stamp); text-decoration-thickness: 2px; text-underline-offset: 3px; } .rl-chips { display: flex; flex-wrap: wrap; gap: 7px; } .rl-gear .rl-btn { margin-top: 28px; align-self: start; } @media (max-width: 900px) { .rl-gear { grid-template-columns: minmax(0,1fr); } .rl-gear__fig { min-height: 260px; } } /* ═══════════ CLOSE ═══════════ */ .rl-close { position: relative; isolation: isolate; overflow: clip; border-top: 1px solid var(--line); min-height: clamp(420px, 62vh, 640px); display: grid; align-items: center; } .rl-close__bg { position: absolute; inset: 0; z-index: -2; background: #0a0b0c center/cover no-repeat; filter: grayscale(.9) contrast(1.16) brightness(.5); } .rl-close::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(92deg, rgba(8,9,10,.94) 0%, rgba(8,9,10,.7) 46%, rgba(8,9,10,.35) 100%); } .rl-close h2 { font-size: clamp(38px, 6.6vw, 92px) !important; line-height: .88; margin-bottom: 26px; } .rl-close .rl-hero__cta { margin-top: 4px; } /* ═══════════ FOOTER ═══════════ */ .rl-foot { border-top: 1px solid var(--line); padding-block: 34px; } .rl-foot__in { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .rl-foot img { height: 20px; width: auto; opacity: .72; } .rl-foot p { margin: 0; font-size: 11px !important; color: var(--muted) !important; letter-spacing: .05em; } .rl-foot__sp { flex: 1 1 auto; } /* ═══════════ SUBMIT — the log, filled in on the page ═══════════ The store keeps its record form on the club page, with the pending plate beside it, rather than sending a driller to a second page for it. Same arrangement here, and the plate is this page's own .rl-plate rather than a copy of the store's — so the two sites agree without either imitating the other. The control tokens ARE the store's, measured off it: 12px/14px padding, a square corner, #1e2327 on a #333a40 stroke, body face at 16px. A driller who fills one form then the other should not be able to tell they were built by different hands. */ .rl-log { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: clamp(26px, 4vw, 64px); align-items: start; margin-top: clamp(30px, 4vw, 52px); } .rl-log__form { min-width: 0; } /* the honeypot. Off-screen rather than display:none, which the cheaper bots read as a field to skip. */ .rl-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ── fieldsets: a tracked display label over a full hairline ── */ .rl-set { border: 0; padding: 0; margin: 0; min-width: 0; } .rl-set + .rl-set { margin-top: clamp(28px, 3.6vw, 46px); } .rl .rl-set legend { width: 100%; float: none; padding: 0 0 11px; margin: 0 0 20px; border-bottom: 1px solid var(--line-2); font-family: var(--display) !important; font-weight: 900; font-size: 15px !important; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); line-height: 1; } /* ── one field ── */ .rl-f { display: grid; gap: 8px; min-width: 0; align-content: start; } .rl-f > label, .rl-f > .rl-lab { display: block; } .rl .rl-f label em { font-style: normal; color: var(--line-2); letter-spacing: .1em; } .rl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .rl-set > * + * { margin-top: 16px; } .rl .rl-hint { font-size: 12px !important; color: var(--muted) !important; margin: 0; line-height: 1.5; letter-spacing: .01em; } .rl .rl-hint--lead { margin-bottom: 14px; } /* ── controls ── */ .rl-log input[type=text], .rl-log input[type=email], .rl-log input[type=tel], .rl-log input[type=date], .rl-log input[type=number], .rl-log select, .rl-log textarea { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; display: block; font-family: var(--body); font-size: 16px; line-height: 1.35; padding: 12px 14px; border-radius: 0; background: #1e2327; border: 1px solid var(--line-2); color: var(--fg); transition: border-color .18s var(--ease), background-color .18s var(--ease); } .rl-log textarea { resize: vertical; min-height: 84px; } .rl-log ::placeholder { color: #6d777d; opacity: 1; } .rl-log input:hover, .rl-log select:hover, .rl-log textarea:hover { border-color: #4a545b; } .rl-log input:focus, .rl-log select:focus, .rl-log textarea:focus { outline: none; border-color: var(--fg); background: #22282c; box-shadow: inset 0 0 0 1px var(--fg); } /* the native select chrome is light-on-light inside a dark field */ .rl-log select { padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23b9c2c7' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px 8px; } .rl-log select:required:invalid { color: #6d777d; } .rl-log option { color: var(--fg); background: #1e2327; } .rl-log input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .55; cursor: pointer; } .rl-log input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* the running total is the readout; the spinners are noise next to it */ .rl-log input[type=number]::-webkit-outer-spin-button, .rl-log input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .rl-log input[type=number] { -moz-appearance: textfield; } /* the error state, and its sentence */ .rl-log .is-bad input, .rl-log .is-bad select, .rl-log .is-bad textarea { border-color: var(--stamp); background: #241a19; } .rl .rl-err { font-size: 12px !important; color: #ff7a70 !important; margin: 0; line-height: 1.45; display: none; } .rl-log .is-bad .rl-err { display: block; } /* ── the segmented control: radios as one stamped strip ── */ .rl-seg { display: flex; flex-wrap: wrap; border: 1px solid var(--line-2); background: #1e2327; } .rl-seg label { position: relative; margin: 0; flex: 1 1 auto; } .rl-seg label + label { border-left: 1px solid var(--line-2); } .rl-seg input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .rl .rl-seg span { display: block; text-align: center; padding: 12px 12px; font-family: var(--display) !important; font-size: 12px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: background-color .16s var(--ease), color .16s var(--ease); } .rl-seg input:hover + span { color: var(--fg); } .rl-seg input:checked + span { background: var(--fg); color: #0a0b0c !important; } .rl-seg input:focus-visible + span { outline: 2px solid var(--stamp); outline-offset: -2px; } /* ── the checkbox: a square that gets stamped ── */ .rl-check { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 13px; align-items: start; margin: 0; cursor: pointer; } .rl-check + .rl-check { margin-top: 13px; } .rl-check input { -webkit-appearance: none; appearance: none; margin: 2px 0 0; width: 20px; height: 20px; border: 1px solid var(--line-2); background: #1e2327; border-radius: 0; display: block; position: relative; cursor: pointer; flex: 0 0 auto; } .rl-check input:hover { border-color: #4a545b; } .rl-check input:checked { background: var(--stamp); border-color: var(--stamp); } .rl-check input:checked::after { content: ""; position: absolute; left: 5px; top: 3px; width: 7px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); } .rl-check input:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; } .rl .rl-check span { font-family: var(--body) !important; font-size: 14px !important; color: var(--dim); line-height: 1.5; letter-spacing: 0; } .rl-check--consent { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); } .rl-log .is-bad .rl-check input, .rl-log fieldset.is-bad .rl-check input { border-color: var(--stamp); } /* ── holes × depth = total, stated as the sum it is ── */ .rl-calc { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1.25fr) auto minmax(0,1fr); gap: 14px; align-items: end; } .rl .rl-calc__op { font-family: var(--display) !important; font-size: 17px !important; font-weight: 800; color: var(--muted); padding-bottom: 13px; } .rl-unitwrap { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; } .rl-seg--unit { flex: 0 0 auto; } .rl .rl-seg--unit span { padding: 12px 13px; } .rl-calc__out { display: block; padding: 12px 14px; border: 1px solid var(--line); background: #14171a; font-family: var(--display) !important; font-weight: 900; font-size: 20px !important; letter-spacing: .01em; color: var(--fg); line-height: 1.35; white-space: nowrap; } /* ── the pending plate: the board seat this day would take ── */ .rl-pending { position: sticky; top: calc(var(--h) + 22px); min-width: 0; display: grid; gap: 14px; } .rl-pending .rl-plate { position: relative; } /* the stamp. Rotated, hairline, and sitting half off the plate's top edge — the one thing on this page that is allowed to look applied rather than built, because that is what a stamp is. */ .rl-stamp { position: absolute; right: -6px; top: -13px; z-index: 2; transform: rotate(-7deg); font-family: var(--display) !important; font-size: 11px !important; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--stamp); padding: 6px 10px; border: 2px solid var(--stamp); background: rgba(8,9,10,.92); box-shadow: 0 8px 20px -12px rgba(0,0,0,.9); } .rl-pending.is-done .rl-stamp { color: var(--fg); border-color: var(--fg); } @media (max-width: 1040px) { .rl-stamp { right: 10px; top: -11px; } } .rl-pending .rl-rec__ft b { transition: color .25s var(--ease); } .rl-pending.is-empty .rl-rec__ft b { color: var(--line-2); } .rl-pending .rl-plate__cell strong { color: var(--fg); } .rl-pending .rl-plate__cell strong:empty::before, .rl-pending .rl-plate__cell strong.is-blank { color: var(--line-2); } .rl-pending .rl-hazard .rl-lab:last-child { white-space: nowrap; } /* the caption tells the reader what to fill in; once it is filled in the plate says it better than the caption does */ .rl-pending:not(.is-empty) > .rl-hint { opacity: 0; visibility: hidden; } .rl-pending > .rl-hint { transition: opacity .3s var(--ease); } .rl-log__after { margin-top: 16px !important; max-width: 56ch; } .rl-log button.rl-btn { margin-top: 26px; cursor: pointer; } /* the sent state: the form steps back and the plate carries the receipt */ .rl-log.is-sent .rl-log__form > *:not(.rl-sent) { display: none; } .rl-sent { display: none; } .rl-log.is-sent .rl-sent { display: block; } .rl-sent h3 { margin-bottom: 12px; } .rl-sent .rl-hint { margin-top: 12px !important; max-width: 58ch; } @media (max-width: 1040px) { .rl-log { grid-template-columns: minmax(0,1fr); } /* On one column the plate leads the form rather than sitting under it, where it would be a preview of something already scrolled past. It does NOT stick here: pinned, it was 110px of an 844px screen and it sat over whichever fieldset legend the reader was working in. The live number is in the form anyway — the Day total readout is two fields from the depth being typed — so the plate can lead, state the empty day it is about to describe, and then let the form have the screen. */ .rl-pending { order: -1; position: static; } .rl-pending .rl-plate { background-color: #14171a; } .rl-pending .rl-rec__ft b { font-size: clamp(46px, 13vw, 62px) !important; } } @media (max-width: 700px) { .rl-row { grid-template-columns: minmax(0,1fr); } .rl-calc { grid-template-columns: minmax(0,1fr); } .rl-calc__op { display: none; } .rl-log button.rl-btn { width: 100%; justify-content: center; } } /* ═══════════ THE STORE — a notice where the link used to be ═══════════ */ .rl-soon { display: inline-grid; gap: 9px; padding: 15px 18px; margin-top: 28px; align-self: start; } .rl-soon strong { font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: .01em; text-transform: uppercase; color: #fff; line-height: 1; } /* the two group-level errors are addressed individually, not by the fieldset, so a missed rule does not redden the consent box as well */ .rl-log .rl-err.is-shown { display: block; } .rl-log .rl-check.is-bad input { border-color: var(--stamp); background: #241a19; } /* ═══════════ MOTION — one orchestrated entrance ═══════════ */ .rl [data-rise] { opacity: 0; transform: translateY(16px); } .rl.is-ready [data-rise] { transition: opacity .72s var(--ease), transform .72s var(--ease); } .rl [data-rise].in { opacity: 1; transform: none; } .rl-hero [data-rise].in:nth-of-type(1) { transition-delay: .05s; } .rl-hero h1.in { transition-delay: .14s; } .rl-hero__lede.in { transition-delay: .22s; } .rl-hero__cta.in { transition-delay: .3s; } .rl-hero .rl-plate.in { transition-delay: .38s; } @media (prefers-reduced-motion: reduce) { .rl [data-rise] { opacity: 1 !important; transform: none !important; transition: none !important; } .rl-sound, .rl-sound__ring, .rl-hero__scroll i::after { animation: none !important; } .rl-sound { border-color: var(--stamp); } /* the control still has to read as "do this" without moving */ .rl-sound { border-color: var(--stamp); } .rl-hero__media video { transform: none; } } /* ═══════════ NOMINATE — page-specific only ═══════════ */ /* The club page's record form is short fields beside a live number, so it splits 1.5 / 1. This form is a piece of writing beside a summary, and at 1.5 / 1 the case for a man was being written in a 47-character column. The writing gets the room; the citation still fits its four cells. */ #nm-form.rl-log { grid-template-columns: minmax(0,1.85fr) minmax(0,1fr); } @media (max-width: 1040px) { #nm-form.rl-log { grid-template-columns: minmax(0,1fr); } } /* ── the opening. Not a full-screen video: the club page owns that move, and a nominator who has clicked through has already been sold. What he needs is the buckle at a size where the engraving reads, the sentence that says how rare it is, and the name currently on it. ── */ .nm-top { border-top: 1px solid var(--line); padding-block: clamp(34px, 5vw, 78px) clamp(30px, 4vw, 56px); } .nm-top__in { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(26px, 4vw, 70px); align-items: center; } .nm-top h1 { margin-bottom: 20px; } .rl .nm-top h1 { font-size: clamp(38px, 6vw, 92px) !important; } .nm-top__fig { position: relative; } .nm-top__fig img { width: 100%; height: auto; display: block; filter: contrast(1.06) brightness(1.02); } .nm-back { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; } .rl .nm-back { font-family: var(--display) !important; font-size: 11px !important; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) !important; } .nm-back:hover { color: var(--fg) !important; } .nm-back svg { width: 13px; height: 13px; transform: rotate(180deg); } .nm-holder { display: inline-grid; gap: 7px; padding: 14px 18px; margin-top: 26px; } .nm-holder strong { font-family: var(--display); font-weight: 900; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: .01em; text-transform: uppercase; color: #fff; line-height: 1; } @media (max-width: 900px) { .nm-top__in { grid-template-columns: minmax(0,1fr); } .nm-top__fig { order: -1; max-width: 380px; } } /* ── what the panel weighs. The page's own .rl-spec rows, because five same-size cards of icon-plus-heading-plus-text would be five cards pretending to be a structure. ── */ .nm-crit { border-top: 1px solid var(--line); padding-block: clamp(34px, 5vw, 72px); } .nm-crit__grid { margin-top: clamp(20px, 3vw, 34px); } .nm-crit__grid .rl-spec { grid-template-columns: minmax(140px, 200px) minmax(0,1fr); gap: clamp(18px, 3vw, 44px); padding: 17px 0; } .rl .nm-crit__grid .rl-spec .rl-lab { font-size: 13px !important; color: var(--fg); white-space: normal; } @media (max-width: 620px) { .nm-crit__grid .rl-spec { grid-template-columns: minmax(0,1fr); gap: 7px; } } /* ── the case. A tall field with the five prompts alongside it and a live word count, because the one thing that kills a nomination is a single line, and the one thing that fixes it is knowing what to write. ── */ .nm-why { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.46fr); gap: clamp(16px, 2.4vw, 30px); align-items: start; } .nm-why textarea { min-height: 220px; } .nm-prompts { border: 1px solid var(--line); padding: 15px 16px; } .nm-prompts ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; } .rl .nm-prompts li { font-size: 13px !important; color: var(--dim) !important; line-height: 1.45; display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 9px; } .nm-prompts li i { display: block; width: 6px; height: 6px; margin-top: 6px; background: var(--stamp); } .nm-count { display: flex; align-items: baseline; gap: 7px; } .rl .nm-count b { font-family: var(--display) !important; font-size: 13px !important; font-weight: 900; color: var(--fg); font-style: normal; } .nm-count.is-short b { color: var(--stamp); } @media (max-width: 860px) { .nm-why { grid-template-columns: minmax(0,1fr); } .nm-prompts { order: -1; } } /* ── the rigs he runs. Multi-select, because plenty of drillers run two. A row of chips that fill in rather than a stack of checkboxes: the answer is a short list from a known set, and it should look like one. ── */ .nm-picks { display: flex; flex-wrap: wrap; gap: 8px; } .nm-pick { position: relative; margin: 0; } .nm-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; } .rl .nm-pick span { display: block; padding: 10px 14px; border: 1px solid var(--line-2); background: #1e2327; font-family: var(--display) !important; font-size: 12px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); } .nm-pick input:hover + span { border-color: #4a545b; color: var(--fg); } .nm-pick input:checked + span { background: var(--fg); border-color: var(--fg); color: #0a0b0c !important; } .nm-pick input:focus-visible + span { outline: 2px solid var(--stamp); outline-offset: 2px; } /* ── the photographs. A real drop target, real thumbnails, real removal, and real refusals — a 40 MB phone photo and a PDF both have to be turned away by name, on the page, before anybody presses submit. ── */ .nm-drop { position: relative; display: grid; place-items: center; gap: 10px; text-align: center; padding: clamp(24px, 4vw, 40px) 20px; border: 1px dashed var(--line-2); background: #14171a; transition: border-color .18s var(--ease), background-color .18s var(--ease); } .nm-drop.is-over { border-color: var(--fg); background: #1b2023; border-style: solid; } .nm-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .nm-drop svg { width: 26px; height: 26px; color: var(--muted); } .rl .nm-drop strong { font-family: var(--display) !important; font-size: 13px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fg); } .nm-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 14px; } .nm-thumbs:empty { display: none; } .nm-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line-2); background: #0e1012; } .nm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.25) contrast(1.04); } .nm-thumb figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 7px; font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); background: linear-gradient(180deg, transparent, rgba(8,9,10,.92) 58%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nm-thumb button { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(8,9,10,.84); color: var(--fg); cursor: pointer; padding: 0; } .nm-thumb button:hover { background: var(--stamp); border-color: var(--stamp); } .nm-thumb button svg { width: 11px; height: 11px; } .nm-rejects { margin-top: 12px; display: grid; gap: 6px; } .nm-rejects:empty { display: none; } /* ── the citation. The record form's plate, carrying a case instead of a number: the stamp reads NOMINATION, the cells are the man rather than the day, and the photographs he arrives with are along the bottom. ── */ .nm-card__head { padding: 16px 18px 15px; } .nm-card__name { display: block; margin-top: 12px; font-family: var(--display); font-weight: 900; font-size: clamp(28px, 3.4vw, 44px); line-height: .94; letter-spacing: -.01em; text-transform: uppercase; color: #fff; } .nm-card__name.is-blank { color: var(--line-2); } .nm-card__for { margin-top: 11px; } .nm-strip { display: flex; gap: 4px; padding: 10px 12px; border-top: 1px solid var(--line); } .nm-strip i { display: block; width: 26px; height: 26px; background: #1e2327 center/cover no-repeat; border: 1px solid var(--line-2); flex: 0 0 auto; } .nm-strip.is-empty i { background-image: none; } /* the one authored moment: the stamp lands when the driller is first named */ .nm-card .rl-stamp { transition: transform .5s var(--ease), opacity .4s var(--ease); } .nm-card.is-named .rl-stamp { animation: nm-land .55s var(--ease) 1; } /* The overshoot lands rather than arrives: a stamp is pressed down, so it comes in a little large and a little crooked and settles. It used to start at 1.5 and -22deg, which is a rubber stamp in a cartoon and, at the right gutter, 22px of horizontal scroll for any phone that sampled frame zero. */ @keyframes nm-land { 0% { transform: rotate(-13deg) scale(1.14); opacity: 0; } 55% { transform: rotate(-5deg) scale(1); opacity: 1; } 100% { transform: rotate(-7deg) scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .nm-card.is-named .rl-stamp { animation: none; } } /* ═══════════ THE STORE — coming soon, and the list ═══════════ /riglife-store/ was WooCommerce's shop base, not a page. Woo is going, so this is a real page at the address Google already has, and its whole job is one field. The band is banded on purpose. The club page's hero is 100svh because the footage IS the argument there; here the argument is "leave an address", and a full-height hero would put the field below the fold on every laptop. So the video runs as a band and the form's plate rises into its bottom edge — the field is the first solid thing on the page, sitting half in the footage. ═══════════════════════════════════════════════════════════ */ .rs-band { position: relative; isolation: isolate; min-height: clamp(300px, 44vh, 460px); display: grid; align-content: end; overflow: clip; padding-bottom: clamp(64px, 9vh, 116px); } /* The same ground the club hero uses. The file is 25 MB and takes a moment, so what sits behind it is the brand's own dark surface — hex lattice at hairline weight — rather than a black rectangle. */ .rs-band__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background-color: #0b1414; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='0.8'/%3E%3C/svg%3E"), linear-gradient(158deg, #172323 0%, #101a1a 46%, #0a0f0f 100%); } .rs-band__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; filter: grayscale(.62) contrast(1.14) brightness(.6) saturate(.9); transform: scale(1.04); } /* Two scrims: a side wash so the type has a ground, and a floor the plate overlaps into without the video fighting it. */ .rs-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(96deg, rgba(8,9,10,.88) 0%, rgba(8,9,10,.62) 38%, rgba(8,9,10,.2) 70%, rgba(8,9,10,.45) 100%), linear-gradient(0deg, var(--bg) 0%, rgba(8,9,10,.55) 24%, transparent 62%); } /* The measure belongs on the text, not on .rl__in's own box: a max-width here shrinks the centred wrapper and parks the heading in the middle of the screen, which is what the first build did. */ .rs-band__in { padding-block: clamp(40px, 7vh, 72px) 0; } .rs-band__in > * { max-width: 46ch; } .rl .rs-band h1 { max-width: 14ch; } .rs-band .rl-lab { margin-bottom: 14px; } .rl .rs-band h1 { font-size: clamp(52px, 9vw, 132px) !important; line-height: .82; letter-spacing: -.03em; } .rs-band h1 em { font-style: normal; color: var(--stamp); display: block; } .rs-band .rl-lede { margin-top: 22px; } /* ── the field ── */ .rs-sign { padding-block: 0 clamp(64px, 9vw, 128px); } .rs-sign__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(24px, 3.5vw, 56px); align-items: start; /* The lift into the band. */ margin-top: clamp(-104px, -8vh, -56px); position: relative; z-index: 2; } @media (max-width: 900px) { .rs-sign__in { grid-template-columns: minmax(0,1fr); margin-top: clamp(-72px, -6vh, -40px); } } .rs-form { min-width: 0; } /* * The form is the page. At --surface on --bg it was ten values off the ground * and read as the quietest object on screen, under a plate it was meant to * outrank — on a page whose only job is this field. It sits above the ground * now, with the world's red cut along its top edge, and the fields sit INTO it * rather than floating above it. */ .rs-log { position: relative; /* .rl-log is a two-column grid on the club page — the form, then the plate that fills in as it is typed. This page has no plate inside the form, so the inherited second column left the fields in 367px of a 757px panel. */ grid-template-columns: minmax(0, 1fr); background: #171c20; border: 1px solid var(--line-2); padding: clamp(22px, 3vw, 40px); } .rs-log::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--stamp); } .rs-log .rl-f input { background: #0e1114; } .rs-log .rl-f input:focus { border-color: var(--fg); } .rs-log .rl-check input { background: #0e1114; } .rs-log .rl-set { border: 0; padding: 0; margin: 0; } .rs-log legend { font-family: var(--display) !important; font-size: 22px !important; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; color: var(--fg); padding: 0; margin-bottom: 22px; } /* The error the server sends back, above the fields it concerns. */ .rs-alert { margin: 0 0 20px; padding: 13px 16px; border-left: 3px solid var(--stamp); background: rgba(240,58,47,.09); color: var(--fg) !important; font-size: 14px !important; line-height: 1.5; } .rs-check.is-bad input { border-color: var(--stamp); } .rs-check__err { display: none; } .rs-go { margin-top: 24px; } .rl .rs-small { margin-top: 16px; font-size: 12px !important; } /* font-size: inherit !important — css/type.css sets `a { font-size: … }` with !important, so this link rendered at 21px inside a 12px line. */ .rl .rs-small a { font-size: inherit !important; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; } .rl .rs-small a:hover { color: var(--fg); } /* ── done ── */ .rs-done { padding: clamp(26px, 3.5vw, 44px); } .rs-done__mark { display: grid; place-items: center; width: 46px; height: 46px; background: var(--stamp); color: #0a0b0c; margin-bottom: 20px; } .rs-done__mark svg { width: 22px; height: 22px; } .rl .rs-done strong { display: block; font-family: var(--display) !important; font-size: clamp(30px, 3.4vw, 46px) !important; font-weight: 900; text-transform: uppercase; line-height: .95; letter-spacing: -.02em; color: var(--fg); margin: 6px 0 14px; } .rs-done .rl-hazard { margin-top: 26px; } /* ── the aside ── */ .rs-aside { display: grid; gap: clamp(20px, 2.5vw, 32px); min-width: 0; } .rs-pack { padding: clamp(20px, 2.4vw, 30px); } .rs-pack .rl-chips { margin: 14px 0 0; } .rs-pack .rl-hazard { margin-top: 22px; } .rs-meanwhile { border-top: 1px solid var(--line); padding-top: clamp(22px, 2.6vw, 32px); } .rl .rs-meanwhile h2 { font-size: clamp(26px, 2.6vw, 38px) !important; line-height: .92; margin: 12px 0 14px; } .rs-meanwhile .rl-hero__cta { margin-top: 20px; } @media (max-width: 560px) { .rs-band { min-height: clamp(260px, 38vh, 340px); padding-bottom: clamp(48px, 7vh, 72px); } .rs-log { padding: 20px 18px; } .rs-meanwhile .rl-hero__cta { flex-direction: column; align-items: stretch; } .rs-meanwhile .rl-btn { justify-content: center; } } @media (prefers-reduced-motion: reduce) { .rs-band__media video { display: none; } }