/* * Muslim.Red: the shell's one stylesheet. Phone first (one column at 390 px with a 16 px gutter), light and dark. * The tokens are the family's (commons Design, the same values commons Legal\Theme 'red' reads), so the legal pages * share the site's look. Headings are Literata, served by this site with the tokens; nothing is fetched from another site. * * Phase U (the experience floor): body text 17 px on a phone and 18 px from 960 px, paragraphs held near 68 characters, * nothing a person reads under 14 px, every link and control 44 px or more with 8 px between neighbors, one form kit for * every section (48 px fields with 17 px text, selects drawn the same in Safari), whole cards tappable, picture slots * with fixed shapes, and a compact frame for deep pages. */ :root { /* * Phase V (V1): Red's names for the family's tokens (commons assets/design/family-red.css, linked before this file by * Shell\Head; built by tools/design_tokens.mjs, the same values commons Legal\Theme 'red' reads). The family file * switches them for dark itself, so nothing here is a copy. Headings are Literata; body text stays the system face. */ --r-bg: var(--mc-bg); --r-surface: var(--mc-surface); --r-surface-2: var(--mc-surface-2); --r-ink: var(--mc-ink); --r-ink-soft: var(--mc-ink-soft); --r-muted: var(--mc-muted); --r-line: var(--mc-line); --r-accent: var(--mc-accent); --r-accent-2: var(--mc-accent-strong); --r-on-accent: var(--mc-on-accent); --r-tint: var(--mc-tint); --r-band: var(--mc-band); --r-band-deep: var(--mc-band-strong); --r-on-band: var(--mc-on-band); --r-on-band-soft: var(--mc-on-band-soft); --r-focus: var(--mc-focus); --r-display: var(--mc-font-display); --r-text: var(--mc-font-text); --r-radius: var(--mc-radius); --r-wrap: 1120px; --r-gutter: 16px; --r-cta-h: 0px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } :root[data-theme="dark"] { color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; } body { margin: 0; background: var(--r-bg); color: var(--r-ink); font: 17px/1.6 var(--r-text); overflow-wrap: anywhere; padding-bottom: var(--r-cta-h); } img, svg { max-width: 100%; height: auto; } a { color: var(--r-accent); text-underline-offset: 0.15em; } a:hover { color: var(--r-accent-2); } :focus-visible { outline: 3px solid var(--r-focus); outline-offset: 2px; border-radius: 2px; } /* Safari focuses a date or time field's own parts and never marks the field :focus-visible, so it takes the ring on :focus. */ input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):focus { outline: 3px solid var(--r-focus); outline-offset: 2px; border-radius: 2px; } h1, h2, h3 { font-family: var(--r-display); font-weight: var(--mc-heading-weight); line-height: 1.2; color: var(--r-ink); margin: 0 0 0.5em; } h2 { font-size: var(--mc-h2); line-height: var(--mc-h2-leading); } h3 { font-family: var(--mc-font-h3); font-weight: var(--mc-h3-weight); font-size: var(--mc-h3); line-height: var(--mc-h3-leading); } p { margin: 0 0 1em; } ul, ol { padding-left: 1.25em; margin: 0 0 1em; } li { margin: 0.25em 0; } .rd-skip { position: absolute; left: 8px; top: -60px; z-index: 30; background: var(--r-surface); color: var(--r-ink); padding: 10px 14px; border-radius: var(--r-radius); border: 2px solid var(--r-accent); text-decoration: none; font-weight: 600; } .rd-skip:focus { top: 8px; } /* frame:start. Shell\LegalHead inlines the rules from here to frame:end on Red's legal pages (commons Legal), so the header, its menu and the breadcrumbs there are these very rules. */ .rd-wrap { max-width: var(--r-wrap); margin: 0 auto; padding: 0 var(--r-gutter); } /* Header: the brand and the account link, then the seven sections. */ .rd-top { background: var(--r-surface); border-bottom: 1px solid var(--r-line); } .rd-top__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; } .rd-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--r-ink); text-decoration: none; font: 700 1.3rem/1 var(--r-display); padding: 6px 0; } .rd-brand:hover { color: var(--r-ink); } /* The horizontal lockup (design/brand/red/): the light one by default, the dark one on a dark theme. */ .rd-brand__lockup { display: block; width: auto; height: 32px; flex: none; } .rd-brand__lockup--dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-brand__lockup--light { display: none; } :root:not([data-theme="light"]) .rd-brand__lockup--dark { display: block; } } :root[data-theme="dark"] .rd-brand__lockup--light { display: none; } :root[data-theme="dark"] .rd-brand__lockup--dark { display: block; } .rd-top__account { font-weight: 600; font-size: 0.95rem; white-space: nowrap; padding: 10px 4px; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; } .rd-top__bar > .rd-jump + .rd-top__account { margin-left: 0; } /* All seven sections stay in view at every width: the list wraps onto a second line on phones, never off the screen. */ .rd-nav { border-top: 1px solid var(--r-line); } .rd-nav ul { list-style: none; margin: 0; padding: 4px var(--r-gutter); display: flex; flex-wrap: wrap; gap: 8px; max-width: var(--r-wrap); margin-inline: auto; } .rd-nav li { margin: 0; flex: none; } .rd-nav a { display: block; padding: 10px 6px; color: var(--r-ink-soft); text-decoration: none; font-size: 0.9rem; font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; min-height: 44px; min-width: 44px; text-align: center; } @media (min-width: 720px) { .rd-nav a { padding: 11px 10px; font-size: 0.95rem; } } .rd-nav a:hover { color: var(--r-accent); } .rd-nav a[aria-current="page"] { color: var(--r-accent); border-bottom-color: var(--r-accent); } /* Deep pages (Frame::page compact): on a phone the seven sections fold behind one 48 px "Sections" button in the brand bar, so the first screen goes to the page; from 720 px the full menu shows as everywhere else. No script:
. */ .rd-jump { display: none; position: relative; margin-left: auto; } .rd-jump summary { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 14px; cursor: pointer; list-style: none; white-space: nowrap; border: 1px solid var(--r-line); border-radius: var(--r-radius); font-weight: 700; color: var(--r-ink); background: var(--r-surface); } .rd-jump summary::-webkit-details-marker { display: none; } .rd-jump summary::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); } .rd-jump[open] summary::after { transform: translateY(2px) rotate(-135deg); } .rd-jump__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; min-width: 15rem; background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--r-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); padding: 6px; } .rd-jump__menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rd-jump__menu li { margin: 0; } .rd-jump__menu a { display: block; min-height: 44px; padding: 11px 12px; border-radius: 6px; color: var(--r-ink); text-decoration: none; font-weight: 600; } .rd-jump__menu a:hover, .rd-jump__menu a[aria-current="page"] { background: var(--r-tint); color: var(--r-accent); } .rd-jump__account { border-top: 1px solid var(--r-line); padding-top: 8px; } /* Every page (critique FI-7, PH-5): on a phone one "Menu" button, a bar of 64 px at most; from 720 px the full row. */ @media (max-width: 719.98px) { .rd-jump { display: block; } .rd-nav { display: none; } .rd-top__account { display: none; } .rd-top__bar { min-height: 56px; max-height: 64px; } .rd-jump summary { min-height: 44px; padding: 8px 12px; } } .rd-tag--coming { font-size: 0.875rem; padding: 1px 8px; margin-left: 4px; background: var(--r-tint); vertical-align: middle; white-space: nowrap; } .rd-jump__menu .rd-tag--coming { margin-left: 8px; } .rd-nav li { display: flex; align-items: center; } /* The home page's sticky bar waits until the hero's own button has scrolled out of view (shell/late.js adds .is-late). */ .rd-sticky.is-late { transform: translateY(120%); visibility: hidden; } @media (prefers-reduced-motion: no-preference) { .rd-sticky[data-rd-late] { transition: transform 0.2s ease, visibility 0.2s; } } /* Breadcrumbs. */ .rd-crumbs { font-size: 0.9rem; color: var(--r-muted); } .rd-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 auto; padding-top: 18px; padding-bottom: 0; } .rd-crumbs li { margin: 0; } .rd-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--r-muted); } .rd-crumbs a { color: var(--r-muted); display: inline-block; padding: 11px 0; margin: -11px 0; min-width: 44px; } .rd-crumbs ol { row-gap: 12px; } /* On a phone the breadcrumb is one 44 px link back to the page above (the H1 already names this page), so it never wraps into rows of small links (R-04, R-19). The whole trail stays for wider screens and in the BreadcrumbList markup. */ @media (max-width: 719.98px) { .rd-crumbs li { display: none; } .rd-crumbs li:nth-last-child(2) { display: block; } .rd-crumbs li:nth-last-child(2)::before { content: none; } .rd-crumbs li:nth-last-child(2) a { display: inline-flex; align-items: center; gap: 8px; } .rd-crumbs li:nth-last-child(2) a::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg); } } /* frame:end */ /* The hero: a deep red band, never a shape of its own. */ .rd-hero { background: linear-gradient(160deg, var(--r-band) 0%, var(--r-band-deep) 100%); color: var(--r-on-band); } .rd-hero .rd-wrap { padding-top: 28px; padding-bottom: 32px; } /* REVIEW-WAVE2 P2-19: the home page's band carries the family's sparse dot field at its right, in the band's own light ink, quiet behind the words (Frame::page 'field'). */ .rd-hero--field { position: relative; isolation: isolate; overflow: hidden; } .rd-hero__field { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; z-index: -1; color: var(--r-on-band); opacity: 0.16; } .rd-hero h1 { color: var(--r-on-band); font-size: var(--mc-display); line-height: var(--mc-display-leading); max-width: 22ch; } .rd-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.875rem; font-weight: 700; color: var(--r-on-band-soft); margin: 0 0 0.6em; } .rd-lead { font-size: max(1.1rem, 18px); color: var(--r-on-band-soft); max-width: 34em; } /* Deep pages: a slimmer band, so the thing a person came to do starts on the first screen. */ .rd-hero--compact .rd-wrap { padding-top: 16px; padding-bottom: 20px; } .rd-hero--compact h1 { font-size: var(--mc-h1); line-height: var(--mc-h1-leading); max-width: 28ch; } .rd-hero--compact .rd-lead { margin-bottom: 0.5em; } .rd-hero--compact .rd-actions { margin-top: 12px; } .rd-hero a { color: var(--r-on-band); } .rd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .rd-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; border-radius: var(--r-radius); font-weight: 700; text-decoration: none; border: 2px solid transparent; line-height: 1.2; } .rd-btn--primary { background: var(--r-accent); color: var(--r-on-accent); } .rd-btn--primary:hover { background: var(--r-accent-2); color: var(--r-on-accent); } .rd-hero .rd-btn--primary { background: var(--r-on-band); color: var(--r-band-deep); } .rd-hero .rd-btn--primary:hover { background: var(--r-on-band-soft); color: var(--r-band-deep); } .rd-btn--quiet { border-color: currentColor; color: var(--r-accent); background: transparent; } .rd-hero .rd-btn--quiet { color: var(--r-on-band); } .rd-hero .rd-btn--quiet:hover { color: var(--r-on-band); background: rgba(255, 255, 255, 0.12); } /* A form's button that looks like the links above (a module's part on the account page, say). */ button.rd-btn { font: inherit; font-weight: 700; cursor: pointer; } /* Body. */ .rd-main { display: block; } .rd-main:focus { outline: none; } .rd-body { padding-top: 28px; padding-bottom: 40px; } .rd-section { margin: 0 0 36px; } .rd-muted { color: var(--r-muted); } .rd-note { background: var(--r-tint); border-left: 4px solid var(--r-accent); padding: 14px 16px; border-radius: var(--r-radius); color: var(--r-ink); } .rd-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 12px; } .rd-card { background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--r-radius); padding: 18px; margin: 0; display: flex; flex-direction: column; gap: 6px; position: relative; } .rd-card h3 { margin: 0; font-size: var(--mc-h3); } .rd-card h3 a { color: var(--r-ink); text-decoration: none; display: block; padding: 11px 0; margin: -11px 0; } .rd-card h3 a:hover { color: var(--r-accent); text-decoration: underline; } /* The whole card is the title's link (R-06): its ::after covers the card, and any other link or control in the card sits above it. The ring goes round the whole card. */ .rd-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-radius); } .rd-card :is(a, button, input, select, textarea, label, summary):not(h3 a) { position: relative; z-index: 1; } .rd-card:hover { border-color: var(--r-accent); } .rd-card h3 a:focus-visible { outline: none; } .rd-card h3 a:focus-visible::after { outline: 3px solid var(--r-focus); outline-offset: 2px; } .rd-card p { margin: 0; color: var(--r-ink-soft); } .rd-card__more { margin-top: auto; padding-top: 6px; font-weight: 600; } /* Picture slots (R-05): a fixed shape, so nothing moves while a photo loads; with no photo, Red's artwork (Phase V, V6, Shell\Art): a designed piece from assets/art/ at the slot's own size, which cuts to any shape and turns dark with the device; for a person, their initials on the tint, the dot pattern growing to the corners, and the period. */ .rd-media { position: relative; display: block; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-radius); background: var(--r-tint); } .rd-media--4x3 { aspect-ratio: 4 / 3; } .rd-media--2x3 { aspect-ratio: 2 / 3; } .rd-media--1x1 { aspect-ratio: 1 / 1; } .rd-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .rd-media--mono::before { content: ""; position: absolute; inset: 0; /* The family's dot weave (V1's motif: a dot at each corner and one at each center), fading in toward the corners. */ --rd-weave: color-mix(in srgb, var(--r-accent) 26%, transparent); background-image: radial-gradient(circle, var(--rd-weave) 1.5px, transparent 1.8px), radial-gradient(circle, var(--rd-weave) 1.5px, transparent 1.8px); background-size: 12px 12px; background-position: 0 0, 6px 6px; -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 40%, #000 78%); mask-image: radial-gradient(circle at 50% 50%, transparent 40%, #000 78%); } .rd-media--mono svg { position: relative; display: block; width: 100%; height: 100%; max-width: none; } .rd-mono__i { font: 700 40px/1 var(--r-display); fill: var(--r-accent-2); letter-spacing: -0.01em; } .rd-mono__i--one { font-size: 50px; } .rd-mono__dot { fill: var(--r-accent); } .rd-figure { margin: 0 0 20px; } /* A fold for a page's longer explanations (Phase U, R-37): one 48 px button, closed until asked. */ .rd-fold { margin: 0 0 24px; border-top: 1px solid var(--r-line); border-bottom: 1px solid var(--r-line); } .rd-fold > summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 0; font-weight: 700; color: var(--r-accent); cursor: pointer; list-style: none; } .rd-fold > summary::-webkit-details-marker { display: none; } .rd-fold > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } .rd-fold[open] > summary::after { transform: rotate(-135deg); } .rd-fold[open] > summary { margin-bottom: 8px; } .rd-figure figcaption { font-size: 0.875rem; color: var(--r-muted); margin-top: 6px; } .rd-card > .rd-media:first-child { margin: -18px -18px 6px; border-radius: var(--r-radius) var(--r-radius) 0 0; } /* Wave 2: its width said outright, so WebKit takes the slot's shape from the full width (it took it from the width inside the card's padding, and a 4:3 slot drew at 3:2). */ .rd-card > .rd-media:first-child { width: calc(100% + 36px); flex: none; } /* Wave 2: a featured slot's piece (Art::FEATURE) waits on the band's own red, the featured composition's ground. */ .rd-media--feature { background: var(--r-band); } /* Wave 2: in a list on a phone, a card with no photo shows its piece as a 96 px square at the left (the 1:1 cut of the main composition) instead of a full-width tile, so places, the Red Table and events are not a wall of pale tiles (Html::thumb_class). The words keep the rest of the row; from 720 px the card is a tile again. REVIEW-WAVE2 P2-8: the choice is the list's, not the card's. When any card in a list is a thumbnail row, every card in it with a picture is one too (a photo cut 1:1 like the pieces), so a photo tile never alternates with a thumbnail row. A featured slot (the promoted box) keeps its tile. */ @media (max-width: 719.98px) { .rd-card.rd-card--thumb, :is(ul, ol):has(> .rd-card--thumb) > .rd-card:has(> .rd-media:first-child:not(.rd-media--feature)) { padding-left: calc(18px + 96px + 14px); min-height: calc(96px + 36px); } .rd-card.rd-card--thumb > .rd-media:first-child, :is(ul, ol):has(> .rd-card--thumb) > .rd-card > .rd-media:first-child:not(.rd-media--feature) { position: absolute; left: 18px; top: 18px; width: 96px; height: 96px; aspect-ratio: 1 / 1; margin: 0; border-radius: var(--r-radius); } } @media (min-width: 720px) { .rd-figure--side { float: right; width: min(42%, 420px); margin: 0 0 16px 24px; } } .rd-list li::marker { color: var(--r-accent); } /* REVIEW-WAVE2 P2-19: the family's three-dot rule between a long page's chapters, on the column's left edge. */ .rd-body > .mc-rule { margin: 4px 0 32px; } .rd-dates { display: grid; gap: 10px; grid-template-columns: 1fr; list-style: none; padding: 0; } .rd-dates li { background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--r-radius); padding: 12px 14px; margin: 0; } .rd-dates strong { display: block; font-family: var(--r-display); font-size: 1.05rem; } .rd-faq dt { font-family: var(--r-display); font-weight: 700; font-size: 1.1rem; margin-top: 18px; } .rd-faq dd { margin: 6px 0 0; color: var(--r-ink-soft); } /* Paragraphs held near 68 characters a line on wide screens (R-17); cards, tables and the hero keep their own widths. */ .rd-body :is(p, li, dd, blockquote) { max-width: 34em; } .rd-body :is(.rd-cards, .rd-rows, table) :is(p, li, dd, blockquote), .rd-body :is(.rd-cards, .rd-rows, .rd-dates) > li { max-width: none; } /* A link standing alone in its paragraph or list item is a 44 px target (R-19); a link inside a sentence stays inline. */ /* In a paragraph it stays inline (padding grows the target without moving a line); in a list item it is a block of its own. */ .rd-body p > a:only-child { padding-block: 12px; } .rd-body p:has(> a:only-child):not(:last-child) { margin-bottom: 26px; } .rd-body li > a:only-child { display: inline-block; padding: 10px 0; min-width: 44px; } .rd-body li:has(> a:only-child) { margin: 8px 0; } .rd-more { margin: 4px 0 16px; } .rd-more a { display: inline-block; padding: 10px 0; font-weight: 600; } .rd-panel { background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--r-radius); padding: 20px; } .rd-panel > :last-child { margin-bottom: 0; } /* One form kit for every section (R-10, R-20, R-21): 48 px fields with 17 px text (iOS never zooms), selects drawn the same in Safari as everywhere (no 25 px native pill), check and radio rows 44 px tall, hints at body size, and an error under its own field. A section's form only adds layout. */ .rd-main :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="file"], [type="range"], [type="color"]), select, textarea) { font: inherit; font-size: max(1rem, 17px); line-height: 1.4; min-height: 48px; padding: 10px 12px; max-width: 100%; border: 1px solid var(--r-muted); border-radius: var(--r-radius); background-color: var(--r-surface); color: var(--r-ink); } .rd-main textarea { min-height: 7.5em; } .rd-main select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--r-ink) 50%), linear-gradient(135deg, var(--r-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .rd-main select[multiple] { background-image: none; padding-right: 12px; } .rd-main input:is([type="checkbox"], [type="radio"]) { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--r-accent); } .rd-main label:has(> input:is([type="checkbox"], [type="radio"])) { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 6px 0; margin: 8px 0; font-weight: 400; } .rd-main label:has(> input:is([type="checkbox"], [type="radio"])) > input { margin-top: 2px; } .rd-main :is(.rd-hint, .rl-hint, .rp-hint, .fr-hint, .rs-hint, .rd-field__hint) { font-size: 1em; color: var(--r-muted); margin: 4px 0 0; } .rd-main button:not(.rd-btn) { font: inherit; } .rd-main [aria-invalid="true"] { border-color: var(--r-accent); border-width: 2px; } .rd-field { margin: 0 0 18px; } .rd-field > label, .rd-field > legend { display: block; font-weight: 700; margin: 0 0 6px; } .rd-field__error { color: var(--r-accent); font-weight: 700; margin: 6px 0 0; } .rd-field__error::before { content: "! "; } .rd-errors { border: 2px solid var(--r-accent); border-radius: var(--r-radius); padding: 14px 16px; margin: 0 0 20px; background: var(--r-tint); color: var(--r-ink); } .rd-errors:focus { outline: 3px solid var(--r-focus); outline-offset: 2px; } .rd-errors h2 { font-size: 1.15rem; margin: 0 0 6px; } .rd-errors ul { margin: 0; } .rd-errors a { display: inline-block; padding: 10px 0; font-weight: 700; } /* A money form's open "What you pay and the rules" panel (R-07, R-08): shown before buying, out of the way of the button. */ .rd-terms { border: 1px solid var(--r-line); border-radius: var(--r-radius); background: var(--r-surface); margin: 24px 0; } .rd-terms > summary { min-height: 48px; padding: 12px 16px; font: 700 1.15rem/1.3 var(--r-display); cursor: pointer; } .rd-terms > :not(summary) { margin-left: 16px; margin-right: 16px; } .rd-terms > :last-child { margin-bottom: 16px; } .rd-terms h2 { font-size: 1.2rem; margin-top: 18px; } .rd-terms .rd-section { margin-bottom: 12px; } /* A chip row that scrolls sideways inside its own box (a category row), never the page. */ .rd-chips { list-style: none; margin: 0 0 16px; padding: 2px 0 6px; display: flex; gap: 8px; overflow-x: auto; } .rd-chips li { margin: 0; flex: none; } .rd-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--r-line); border-radius: 999px; background: var(--r-surface); color: var(--r-ink); text-decoration: none; font-weight: 600; white-space: nowrap; } .rd-chips a[aria-current="page"], .rd-chips a:hover { border-color: var(--r-accent); color: var(--r-accent); } /* A small label that says who paid or where a thing stands ("Sponsored", "Live now"): 14.4 px, bold, never smaller. */ .rd-tag { display: inline-block; font-size: 0.9rem; font-weight: 700; line-height: 1.3; padding: 4px 10px; border-radius: 999px; background: var(--r-surface-2); color: var(--r-ink); } .rd-tag--paid { background: var(--r-tint); color: var(--r-ink); } /* Directions, Call and Add to calendar: quiet 48 px buttons in a row. */ .rd-do { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px; } .rd-do .rd-btn { min-height: 48px; } /* Footer. */ .rd-foot { --mc-foot-max: var(--r-wrap); --mc-foot-gutter: var(--r-gutter); } /* the family's footer (commons .mc-foot, Phase V W-F), on Red's column */ /* The sticky call to action on phones (Launch Floor item 14): it never covers the footer, since the body leaves room. */ .rd-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--r-surface); border-top: 1px solid var(--r-line); padding: 10px var(--r-gutter) calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); } .rd-sticky .rd-btn { width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align: center; } /* The bar is 76 px with one line of label and 90 px with two (a long film title); two lines is its most. */ body.rd-has-sticky { --r-cta-h: 92px; } /* Tab never leaves a link under the bar (WCAG 2.4.11): the page scrolls a focused link clear of it. */ html:has(> body.rd-has-sticky) { scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom)); } /* REVIEW-WAVE2 P2-7: as many columns as fit (two from 720 px, three on a desktop), and a list with fewer cards than columns shares the row among them, so a lone card or a pair never leaves an empty third. */ @media (min-width: 720px) { .rd-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .rd-dates { grid-template-columns: repeat(2, 1fr); } .rd-hero .rd-wrap { padding-top: 48px; padding-bottom: 52px; } } @media (min-width: 960px) { body { font-size: 18px; } .rd-dates { grid-template-columns: repeat(4, 1fr); } .rd-sticky { display: none; } body.rd-has-sticky { --r-cta-h: 0px; } html:has(> body.rd-has-sticky) { scroll-padding-bottom: 0; } } /* REVIEW-WAVE2 P2-7: from 64rem a list's lone card lies on its side, its picture filling the left 40% and its words at the right, so one card reads as a feature rather than a third of a row with the rest missing. */ @media (min-width: 64rem) { .rd-cards > .rd-card:only-child:not(.rd-card--thumb):has(> .rd-media:first-child) { padding-left: calc(40% + 28px); min-height: 15rem; justify-content: center; } .rd-cards > .rd-card:only-child:not(.rd-card--thumb) > .rd-media:first-child { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; height: auto; aspect-ratio: auto; margin: 0; border-radius: var(--r-radius) 0 0 var(--r-radius); } .rd-cards > .rd-card:only-child > :not(.rd-media) { max-width: 40rem; } /* "Right now" with two cards (the Red Table pick beside the live games): the pick's picture takes a wide cut, so the pair stays a row and not two towers. */ .rd-now__cards:not(:has(> :nth-child(3))) .rd-card:not(.rd-card--thumb) .rd-media { aspect-ratio: 16 / 9; } } /* Wave B (FI-1): on the home page's "Right now" a card with no photo is a compact row at every width (its drawing as a 96 px square at the left), never a full tile of artwork; a card with a photo keeps the photo, first. */ @media (min-width: 720px) { .rd-now .rd-card.rd-card--thumb { padding-left: calc(18px + 96px + 14px); min-height: calc(96px + 36px); } .rd-now .rd-card.rd-card--thumb > .rd-media:first-child { position: absolute; left: 18px; top: 18px; width: 96px; height: 96px; aspect-ratio: 1 / 1; margin: 0; border-radius: var(--r-radius); } } /* Wave B (FI-8): a card is as tall as its words, never stretched empty beside a taller neighbor; the home's eight sections make two columns (four rows) then four columns (two rows), never an orphan last row. */ .rd-now__cards { align-items: start; } @media (min-width: 720px) { .rd-cards--eight { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { .rd-cards--eight { grid-template-columns: repeat(4, 1fr); } } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media print { .rd-top, .rd-nav, .rd-sticky, .rd-foot nav, .rd-skip { display: none; } .rd-hero { background: none; color: #000; } .rd-hero h1, .rd-lead, .rd-eyebrow { color: #000; } body { padding-bottom: 0; background: #fff; color: #000; } } /* The family's Sample pill at Red's 14 px text floor (the family style is 12 px). */ .mc-sample { font-size: 14px; line-height: 20px; } /* Inside a sentence the pill takes the sentence's own size, so a line of body text is one size (floor: 17/18 px, 1.5). */ .rd-main :is(p, li) > .mc-sample { font-size: 1em; line-height: inherit; }