/* Redline Championships — site styles ================================================================== Brand tokens mirror redline-app's theme.ts. No build step: this file is served as-is from /css/site.css, so everything here is plain CSS. Custom properties carry the design tokens; shared looks are grouped selectors, not repeated blocks. BREAKPOINTS — the site uses exactly two, both max-width: 820px multi-column grids collapse to one; footer stacks 640px phone: display type scales down, rows wrap Every responsive rule lives in the two blocks at the END of this file. Please don't add media queries inline. ================================================================== */ :root { /* Brand */ --red: #ED1C24; --red-dark: #C4151C; --blue: #0063B0; --blue-dark: #004E8C; /* Neutrals */ --ink: #161616; --muted: #636466; --line: #E0DEE3; --tint-weak: #FDEAEA; --bg: #ffffff; --bg-element: #F0F0F3; --surface-dark: #1d1d1f; /* footer + mobile nav panel */ /* Paid-bid programmes — each is its own championship brand, so these sit outside the Redline palette. */ --aswc: #C026D3; --aswc-dark: #9D1BAB; --prgn: #0D9488; --prgn-dark: #0B766C; --spmn: #7C3AED; --spmn-dark: #5F2BC4; --rcsn: #E11D2A; --rcsn-dark: #B3141F; --text-on-dark: #cfcfd4; /* secondary copy on dark panels */ --rule-dark: #333338; /* dividers inside the footer */ /* Type */ --font-display: "Jost", "Futura", sans-serif; --font-body: "Montserrat", "Helvetica Neue", sans-serif; /* Shape + motion */ --wrap-max: 1180px; --radius: 12px; --radius-sm: 4px; --radius-lg: 14px; --shade-dark: linear-gradient(160deg, #1a1a1c, #2b2b2e); --tr: .15s ease; } * { box-sizing: border-box; margin: 0; padding: 0; } /* The canvas takes the footer's colour, so a page too short to fill the viewport shows dark below the footer rather than white. Giving a background also stops 's from propagating to the canvas, so body's white paints only as far as the content goes. */ html { background: var(--surface-dark); } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 24px; } /* ---- Display caps ------------------------------------------------- The site's small uppercase label style: nav, buttons, eyebrows, kickers, chips, CTAs. This group carries the five shared properties — each rule further down overrides only what differs (usually just weight, size, tracking, or color). */ .site-nav a, .nav-panel a, .btn, .eyebrow, .hero-sub, .hero-login, .event-hero .kicker, .value-strip-items, .action-card, .season-title, .variant-label, .month-label, .featured h2, .date-chip .mon, .footer-centered .footer-nav a, .footer-navfirst .footer-nav a { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; } /* ---- Display headings --------------------------------------------- Heavy uppercase display type. Sizes are set per-use below. */ .page-hero h1, .event-hero h1, .featured-card h3, .event-main h3, .date-chip .day { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; } /* ---- Bordered panels ---------------------------------------------- Event rows, the venue card, action tiles and download rows all share one outline; the hoverable ones share one hover. */ .event-row, .venue-block, .action-card, .download-row, .news-card { border: 1px solid var(--line); border-radius: var(--radius); } .event-row, .action-card, .download-row, .news-card { transition: border-color var(--tr), box-shadow var(--tr), color var(--tr); } .event-row:hover, .action-card:hover, .download-row:hover, .news-card:hover { border-color: var(--red); } /* ---- Icon medallion — fronts each download and each event perk ---- */ .download-icon, .perk-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; background: var(--tint-weak); color: var(--red); font-size: 17px; } /* ---- Header (transparent, overlays each page's hero) ---- */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 88px; } .brand img { height: 48px; width: auto; max-width: none; } .site-nav { display: flex; align-items: center; gap: 28px; } .site-nav a { color: #fff; } .site-nav a:not(.btn):hover, .site-nav a.active:not(.btn) { color: var(--red); } /* ---- Mobile navigation -------------------------------------------- A

disclosure, so the toggle needs no JavaScript and gets keyboard support and aria-expanded for free. Hidden above the tablet breakpoint, where .site-nav takes over; the swap lives in the 820px block at the end of this file. */ .nav-toggle { display: none; position: relative; } .nav-toggle summary { display: grid; place-items: center; width: 44px; height: 44px; color: #fff; font-size: 22px; cursor: pointer; list-style: none; /* Firefox marker */ } .nav-toggle summary::-webkit-details-marker { display: none; } /* Safari */ /* Suppress the UA's pointer-focus highlight, keep a real keyboard ring. */ .nav-toggle summary:focus { outline: none; } .nav-toggle summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: var(--radius-sm); } .nav-toggle .fa-xmark { display: none; } .nav-toggle[open] .fa-bars { display: none; } .nav-toggle[open] .fa-xmark { display: block; } .nav-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; min-width: 250px; display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--surface-dark); border: 1px solid var(--rule-dark); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(10, 10, 12, .45); } .nav-panel a:not(.btn) { padding: 12px 14px; border-radius: var(--radius-sm); color: #fff; } .nav-panel a:not(.btn):hover, .nav-panel a.active:not(.btn) { color: var(--red); background: rgba(255, 255, 255, .06); } .nav-panel .btn { margin-top: 8px; text-align: center; } /* ---- Buttons ---- */ .btn { display: inline-block; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid transparent; line-height: 1.2; cursor: pointer; transition: background var(--tr), color var(--tr); } .btn-blue { background: var(--blue); color: #fff; } .btn-blue:hover { background: var(--blue-dark); color: #fff; } .btn-outline { border-color: #fff; color: #fff; background: transparent; } .btn-outline:hover { background: #fff; color: var(--ink); } .btn-outline-dark { border-color: var(--ink); color: var(--ink); background: transparent; } .btn-outline-dark:hover { background: var(--ink); color: #fff; } /* ---- Page hero band (dark region behind the transparent header) ---- */ .page-hero { background: var(--shade-dark); color: #fff; padding: 150px 0 56px; } .page-hero h1 { font-size: 44px; letter-spacing: .02em; } .page-hero .lede { margin-top: 8px; color: var(--text-on-dark); font-size: 16px; } /* With a photo behind it, set by the view as --hero-image. */ .page-hero.has-image { background-image: linear-gradient(180deg, rgba(10, 10, 12, .6), rgba(10, 10, 12, .8)), var(--hero-image); background-size: cover; background-position: center; } .page-hero .eyebrow.on-dark { color: var(--text-on-dark); margin-bottom: 12px; } /* Compact variant — the internal design-review pages. */ .page-hero.compact { padding-bottom: 32px; } .page-hero.compact h1 { font-size: 32px; } /* ---- Featured deck ---- */ .featured { margin: 32px 0 8px; } .featured h2, .month-label { font-weight: 700; font-size: 14px; letter-spacing: .12em; color: var(--red); margin-bottom: 16px; } .featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .featured-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; padding: 24px; border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--ink), #2b2b2e); color: #fff; overflow: hidden; transition: transform var(--tr); } .featured-card:hover { transform: translateY(-3px); } /* In flow rather than absolutely positioned: an absolute logo is a fixed obstacle that a long event name eventually runs into. The auto margin holds it at the top with the name and date on the card's floor. */ .featured-card .logo { align-self: flex-end; margin-bottom: auto; height: 92px; width: 92px; object-fit: contain; opacity: .95; } .featured-card h3 { margin-top: 14px; font-size: 24px; line-height: 1.05; } .featured-card .meta { margin-top: 8px; font-size: 13px; color: var(--text-on-dark); } .featured-card .meta strong { color: #fff; font-weight: 600; } /* ---- Event list ---- */ .month-block { margin: 40px 0; } .event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .event-row { display: flex; align-items: center; gap: 20px; padding: 18px 20px; background: var(--bg); } .event-row:hover { box-shadow: 0 2px 12px rgba(22,22,22,.06); } .date-chip { flex: 0 0 76px; text-align: center; border-radius: 10px; background: var(--tint-weak); color: var(--red-dark); padding: 10px 0; } .date-chip .mon { font-weight: 700; font-size: 12px; letter-spacing: .1em; } /* nowrap is the point: a range that wraps collides with itself at line-height 1, so multi-day chips step the type down to stay on one line. */ .date-chip .day { font-size: 24px; line-height: 1; white-space: nowrap; } .date-chip .day-range { font-size: 20px; } .event-main { flex: 1; min-width: 0; } .event-main h3 { font-weight: 700; font-size: 19px; letter-spacing: .01em; } .event-main .venue { margin-top: 3px; color: var(--muted); font-size: 14px; } .event-logo { flex: 0 0 48px; height: 48px; object-fit: contain; } /* ---- Empty / notice ---- */ .notice { margin: 48px 0; padding: 32px; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; color: var(--muted); } /* ---- Event detail ---- */ .event-hero { background: var(--shade-dark); /* cover, not "100% auto": a width-fitted image leaves the box uncovered on narrow screens, where it is much taller than the scaled image. */ background-size: cover; background-repeat: no-repeat; background-position: center center; color: #fff; padding: 150px 0 72px; min-height: 560px; display: flex; align-items: flex-end; } /* With a photo: scrim over the image, set by the view as --hero-image. --shade-dark sits underneath as a third layer so a hero_url pointing at a deleted file degrades to the ordinary dark band rather than leaving the scrim floating over nothing, which reads as washed-out grey. */ .event-hero.has-image { background-image: linear-gradient(180deg, rgba(10, 10, 12, .55), rgba(10, 10, 12, .78)), var(--hero-image), var(--shade-dark); } .event-hero > .wrap { width: 100%; } .event-hero .kicker { font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.75); } .event-hero h1 { font-size: 48px; line-height: 1.05; margin-top: 8px; } .event-hero .meta { margin-top: 16px; font-size: 22px; color: var(--text-on-dark); } /* slightly under the text size so the glyph reads level with it */ .event-hero .meta i { margin-right: 10px; font-size: .85em; } .event-hero .hero-flex { display: flex; align-items: center; gap: 32px; } .event-hero-text { min-width: 0; } /* The logos are square PNGs whose artwork fills anywhere from 52% to 95% of the file, so the plate stays square and object-fit does the work. Padding is modest because most of them already carry their own. */ .event-logo-plate { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 16px; border-radius: var(--radius); background: #fff; } .event-logo-plate img { height: 180px; width: 180px; object-fit: contain; } /* ---- Event detail body ---- */ .event-body { padding-bottom: 48px; } .event-body .eyebrow { margin: 48px 0 16px; } /* Venue hub: live map beside the address and the ways out to it. */ .venue-block { display: grid; grid-template-columns: 1.15fr 1fr; margin-top: 32px; overflow: hidden; } .venue-map { min-height: 340px; width: 100%; border: 0; display: block; background: var(--bg-element); } .venue-detail { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; } .venue-detail .eyebrow { margin-bottom: 8px; } .venue-name { font-family: var(--font-body); font-weight: 600; font-size: 22px; line-height: 1.25; } .venue-address { margin-top: 10px; font-style: normal; font-size: 15px; line-height: 1.6; color: var(--muted); } .venue-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 24px; } /* ---- "What this event offers" ------------------------------------ One blue band carrying two halves: the event's own paid bids, and the perks every Redline event includes. The panels stay white — the bid tiles are four saturated colours of their own and need a neutral ground to sit on. */ .offers { background: var(--blue); color: #fff; padding: 76px 0; } .offers .section-heading { max-width: 720px; margin: 0 auto 36px; text-align: center; } .offers-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .offers-panel { display: flex; flex-direction: column; align-items: flex-start; padding: 26px; border-radius: var(--radius); background: var(--bg); color: var(--ink); } .offers-panel .eyebrow { margin-bottom: 16px; } .offers-panel .bid-tiles { width: 100%; } /* auto margin keeps the CTA on the panel's floor, so the two halves stay level however many perks or bids there are. Nothing may set margin-top on it afterwards, or the anchor is lost. */ .offers-panel .btn { margin-top: auto; } .offers-panel .bid-tiles, .offers-panel .bid-notice { margin-bottom: 16px; } .offers-panel .bid-standing-note { margin-bottom: 20px; } .perk-list { list-style: none; display: flex; flex-direction: column; gap: 15px; width: 100%; } .perk-list li { display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.4; } /* One colour pair per programme, so tiles and pills read from --bid. */ .bid-aswc { --bid: var(--aswc); --bid-dark: var(--aswc-dark); } .bid-prgn { --bid: var(--prgn); --bid-dark: var(--prgn-dark); } .bid-spmn { --bid: var(--spmn); --bid-dark: var(--spmn-dark); } .bid-rcsn { --bid: var(--rcsn); --bid-dark: var(--rcsn-dark); } /* The four counts. Shared by the bids page and the event detail page. */ .bid-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .bid-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 78px; padding: 12px 6px; border-radius: 10px; background: linear-gradient(160deg, var(--bid), var(--bid-dark)); color: #fff; } .bid-tile-code { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } .bid-tile-count { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; } .bid-notice { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--muted); } .action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 24px; } .action-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 12px 18px; letter-spacing: .06em; color: var(--ink); } .action-card i { font-size: 22px; color: var(--red); } .action-card:hover { color: var(--red); } .event-about p { font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 720px; } .event-about p + p { margin-top: 14px; } .event-about a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; } .download-row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 10px; } .download-row > .fa-download { color: var(--red); } .download-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .download-title { font-weight: 600; font-size: 15px; } .download-meta { margin-top: 2px; font-size: 12.5px; color: var(--muted); } /* ---- Home hero (video background) ---- */ .hero { position: relative; min-height: 72vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--shade-dark); /* the band itself; a video or photo sits over this when there is one */ background: var(--ink); /* paints before the video loads */ } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.55), rgba(10,10,12,.35) 45%, rgba(10,10,12,.6)); } .hero-content { position: relative; z-index: 1; text-align: center; color: #fff; padding-top: 40px; } .hero-content h1 { font-family: var(--font-body); font-weight: 400; font-size: 46px; letter-spacing: .01em; } .hero-sub { margin-top: 14px; font-size: 15px; letter-spacing: .22em; color: #e9e9ec; } .hero-login { margin-top: 22px; font-size: 12px; letter-spacing: .14em; color: #d5d5da; } .hero-login a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .hero-login a:hover { color: var(--red); } /* ---- Value strip (red bar under the hero) ---- */ .value-strip { background: var(--red); color: #fff; padding: 20px 0; } .value-strip-items { display: flex; justify-content: center; gap: 72px; flex-wrap: wrap; letter-spacing: .12em; } .value-strip-items i { margin-right: 10px; font-size: 15px; } /* ---- "You deserve" section (photo background) ---- */ .deserve { background: linear-gradient(180deg, rgba(10,10,12,.72), rgba(10,10,12,.55)), url('/img/redline-thumbs-up-scaled.jpg') center / cover no-repeat; color: #fff; padding: 200px 0; text-align: center; } /* ---- Type system: consistent section headings ---- */ .section-heading { margin-bottom: 36px; } .eyebrow { font-weight: 700; letter-spacing: .14em; color: var(--red); margin-bottom: 10px; } .section-title { font-family: var(--font-body); font-weight: 600; font-size: 34px; line-height: 1.25; color: var(--ink); } .section-title.muted { color: var(--muted); font-weight: 500; } .section-lede { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--muted); } .section-heading.on-dark .section-title { color: #fff; } .section-heading.on-dark .section-lede { color: #e6e6ea; } .deserve .section-heading, .experience .section-heading { margin-left: auto; margin-right: auto; max-width: 720px; } /* ---- Generic section + CTA pair ---- */ .section { padding: 160px 0; } .section.centered { text-align: center; } .cta-pair { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ---- Triple columns (proof points / steps) ---- */ .triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 48px; text-align: center; } .triple h3 { font-family: var(--font-body); font-weight: 600; font-size: 17px; margin-bottom: 10px; } .triple p { font-size: 14px; line-height: 1.65; color: var(--muted); } .triple.on-dark h3 { color: #fff; } .triple.on-dark p { color: rgba(255,255,255,.82); } /* ---- Care section ---- */ /* Generic light band, used by the about, bids and partners pages. */ .section.shade { background: var(--bg-element); } /* The home page's "we care about you" section runs dark. */ .care { background: var(--surface-dark); color: #fff; } .care .section-title { color: #fff; } .care .section-title.muted { color: var(--text-on-dark); font-weight: 500; } .care .care-list i { color: var(--text-on-dark); } .care-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; } .care-list { list-style: none; display: flex; flex-direction: column; gap: 22px; } /* flex, not an inline icon: a wrapping item would otherwise run back under its own icon on the second line. */ .section-heading + .care-list { margin-top: 28px; } .care-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.5; color: inherit; } .care-list i { flex: 0 0 22px; color: var(--muted); font-size: 17px; line-height: inherit; text-align: center; } /* ---- Get it (founder) section ---- */ .getit { /* Matches the old site: #F1F1F1 base, R-tile at native size, fixed so the content scrolls over the pattern. (iOS ignores fixed — scrolls.) */ background: #F1F1F1 url('/img/r-tile-small-2.png') center center repeat; background-attachment: fixed; } .getit-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; } .getit-grid p { margin-top: 16px; font-size: 15px; line-height: 1.7; color: var(--muted); } .getit-grid .section-heading { margin-bottom: 4px; } .getit-grid .cta-pair { justify-content: flex-start; } .getit-photo { margin: 0; } .getit-photo img { width: 100%; border-radius: var(--radius-sm); box-shadow: 0 10px 40px rgba(22,22,22,.18); } .getit-photo figcaption { margin-top: 12px; text-align: center; font-size: 13px; color: var(--muted); } /* ---- Experience section (brand blue) ---- */ .experience { background: var(--blue); color: #fff; } .experience-video { position: relative; max-width: 560px; margin: 0 auto; } .experience-video img { border-radius: var(--radius-sm); } /* Play badge over a video still. Shared by the home page's experience image and the about page's video gallery. */ .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .play i { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); background: rgba(10,10,12,.25); color: #fff; font-size: 20px; padding-left: 4px; } .experience .triple { text-align: center; max-width: 920px; margin-left: auto; margin-right: auto; } /* ---- Season band (red CTA) ---- */ .season-band { background: var(--red); color: #fff; padding: 34px 0; } .season-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .season-band .cta-pair { margin: 0; } .season-title { font-weight: 700; font-size: 19px; letter-spacing: .1em; } /* ---- Footer ---- */ .site-footer { margin-top: 0; background: var(--surface-dark); color: #fff; padding: 56px 0 0; } .footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; } .footer-brand { text-align: center; } .footer-logo { height: 110px; width: auto; margin: 0 auto 18px; } .footer-social { display: flex; justify-content: center; gap: 16px; } .footer-social a { color: #fff; font-size: 15px; opacity: .85; } .footer-social a:hover { opacity: 1; color: var(--red); } .footer-nav { display: flex; flex-direction: column; gap: 10px; text-align: center; min-width: 200px; } .footer-nav a { font-family: var(--font-body); font-size: 13px; color: #e6e6e9; } .footer-nav a:hover, .footer-nav a.active { color: var(--red); } .footer-colophon { margin-top: 48px; padding: 22px 0; text-align: center; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #9a9aa0; } .footer-colophon div + div { margin-top: 6px; } .footer-colophon a { color: #c5c5cb; } .footer-colophon a:hover { color: #fff; } /* ---- Footer variant: centered ---- Everything on one axis: logo, socials, nav as a wrapping row, colophon. */ .footer-centered .footer-grid { flex-direction: column; align-items: center; gap: 28px; } .footer-centered .footer-logo { height: 88px; } .footer-centered .footer-nav { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 28px; row-gap: 12px; max-width: 720px; min-width: 0; } .footer-centered .footer-colophon { border-top: 1px solid var(--rule-dark); margin-top: 40px; } /* ---- Footer variant: columns ---- Brand block left, nav split into two balanced columns right of center. */ .footer-columns .footer-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 64px; justify-content: space-between; align-items: start; } .footer-columns .footer-brand { text-align: left; } .footer-columns .footer-logo { margin: 0 0 18px; } .footer-columns .footer-social { justify-content: flex-start; } .footer-columns .footer-nav { display: grid; grid-template-columns: repeat(2, auto); grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: 64px; row-gap: 12px; text-align: left; min-width: 0; } .footer-columns .footer-colophon { border-top: 1px solid var(--rule-dark); display: flex; justify-content: space-between; text-align: left; } .footer-columns .footer-colophon div + div { margin-top: 0; } /* ---- Footer variant: navfirst ---- Centered like B, flipped: nav row on top, divider, then logo + socials + colophon, on a roomier vertical rhythm. */ .footer-navfirst { padding-top: 96px; } .footer-navfirst .footer-grid { flex-direction: column; align-items: center; gap: 32px; } .footer-navfirst .footer-nav { order: 1; flex-direction: column; align-items: center; gap: 14px; width: 100%; padding-bottom: 36px; border-bottom: 1px solid var(--rule-dark); min-width: 0; } .footer-navfirst .footer-nav-row { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 28px; row-gap: 12px; } .footer-navfirst .footer-brand { order: 2; } .footer-navfirst .footer-logo { height: 88px; } .footer-navfirst .footer-colophon { margin-top: 28px; padding-bottom: 64px; } /* ---- Footer review page (/design/footers) ---- */ .variant-label { font-weight: 700; letter-spacing: .12em; color: var(--red); padding: 40px 24px 12px; max-width: var(--wrap-max); margin: 0 auto; } .variant-label span { color: var(--muted); font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 400; } /* ---- Bids page ----------------------------------------------------- */ /* Legend band: what each bid type is, on the dark surface. */ .bid-legend { background: var(--surface-dark); color: #fff; padding: 44px 0; } /* Shared standing note (). Quiet body copy by default; the legend band recasts it as centred light type on the dark surface. */ .bid-standing-note { font-size: 13px; line-height: 1.6; color: var(--muted); } .bid-standing-note strong { font-weight: 600; color: var(--ink); } .bid-legend .bid-standing-note { max-width: 780px; margin: 0 auto 28px; text-align: center; font-size: 14px; line-height: 1.65; color: #e6e6e9; } .bid-legend .bid-standing-note strong { color: #fff; } /* Each card is as wide as the logos it carries — RCSN holds three, so it takes roughly triple the room. The view sets --logos from the config. */ .bid-legend-grid { display: flex; flex-wrap: wrap; gap: 16px; } .bid-legend-item { flex: var(--logos, 1) 1 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px 18px 20px; text-align: center; border: 1px solid var(--rule-dark); border-radius: var(--radius); background: rgba(255, 255, 255, .03); } .bid-legend-logos { display: flex; justify-content: center; align-items: center; gap: 14px; width: 100%; padding-bottom: 18px; border-bottom: 1px solid var(--rule-dark); } /* The badges are square PNGs with transparent padding, so the box is square and object-fit keeps them honest when the card narrows. drop-shadow, not box-shadow: it follows the badge's silhouette rather than the transparent square around it, which is what lifts them off the dark band. Same value as the old site. */ .bid-legend-logos img { height: 140px; width: 140px; min-width: 0; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); } .bid-legend-name { font-size: 13px; line-height: 1.45; color: var(--text-on-dark); } /* Programme marker: a colour chip beside the code, not a filled pill. Inherits its text colour so it works on the dark legend and the light scales section alike. */ .bid-code { display: inline-flex; align-items: center; gap: 9px; color: inherit; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; } .bid-code::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--bid); } .bid-legend .bid-code { color: #fff; } /* One card per event awarding bids. */ .bid-event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .bid-event { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); } .bid-event-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bid-event-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color var(--tr); } .bid-event-link:hover { color: var(--red); } .bid-event-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: var(--radius-sm); } .bid-event-link i { font-size: 10px; transition: transform var(--tr); } .bid-event-link:hover i { transform: translateX(2px); } .bid-event-date { padding: 5px 10px; border-radius: 6px; background: var(--tint-weak); color: var(--red-dark); font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .bid-event-name { margin-top: 12px; font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.1; text-transform: uppercase; } .bid-event-place { margin-top: 6px; font-size: 13.5px; color: var(--muted); } .bid-event-place i { margin-right: 6px; color: var(--red); } /* auto margin keeps the tiles on one line across a row of cards */ .bid-event .bid-tiles { margin-top: auto; padding-top: 16px; } .bid-event-notice { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--red); color: #fff; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; } .bid-key { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; font-size: 14px; color: var(--muted); } .bid-key .bid-event-notice { margin-top: 0; } /* At-Large / Partial scales. ASWC has six rows, so it takes the left column on its own and the other three stack beside it. */ .bid-scale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .bid-scale { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); } .bid-scale:first-child { grid-row: span 3; } .bid-scale-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .bid-scale-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; } .bid-scale-rows { margin-top: 14px; } .bid-scale-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); } .bid-scale-row dt { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .bid-scale-row dd { font-weight: 600; font-size: 14px; color: var(--bid); } .bid-footnote { margin-top: 24px; text-align: center; font-size: 13px; color: var(--muted); } /* ---- Partners ------------------------------------------------------ */ .partner-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .partner-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 18px 20px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--tr), box-shadow var(--tr); } .partner-card:hover { border-color: var(--red); box-shadow: 0 2px 12px rgba(22, 22, 22, .06); } /* The logos are mixed shapes and mixed backgrounds, so a fixed box with contain keeps every card's badge on the same optical line. */ .partner-logo { display: flex; align-items: center; justify-content: center; height: 96px; width: 100%; margin-bottom: 10px; } .partner-logo img { max-height: 96px; max-width: 100%; width: auto; object-fit: contain; } .partner-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); } .partner-role { font-size: 12.5px; line-height: 1.4; color: var(--muted); } /* ---- Pull quote / testimonials ------------------------------------- */ .pull-quote { max-width: 760px; margin: 0 auto; text-align: center; } .pull-quote blockquote { font-family: var(--font-body); font-weight: 500; font-size: 22px; line-height: 1.5; color: var(--ink); } .pull-quote blockquote::before { content: "\201C"; } .pull-quote blockquote::after { content: "\201D"; } /* Every slide shares one grid cell, so the box is as tall as the longest quote and nothing shifts as they cross-fade. */ .testimonials { display: flex; flex-direction: column; align-items: center; gap: 24px; } .testimonial-track { display: grid; width: 100%; } .testimonial { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; } .testimonial.is-active { opacity: 1; visibility: visible; } .testimonial-dots { display: flex; justify-content: center; gap: 10px; } .testimonial-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; transition: background var(--tr), transform var(--tr); } .testimonial-dot:hover { background: var(--muted); } .testimonial-dot.is-active { background: var(--red); transform: scale(1.25); } .testimonial-dot:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } /* ---- News ---------------------------------------------------------- */ .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .news-card { display: flex; flex-direction: column; overflow: hidden; /* clips the image to the card's corners */ background: var(--bg); color: inherit; } /* The media box owns the aspect ratio so a portrait or a panorama both crop to the same card height rather than setting it. */ .news-card-media { display: block; aspect-ratio: 16 / 9; background: var(--bg-element); } .news-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--tr); } .news-card:hover .news-card-media img { transform: scale(1.03); } .news-card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; /* equal-height cards across the row */ } .news-date { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .news-card-title { font-family: var(--font-body); font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--ink); } .news-excerpt { font-size: 15px; line-height: 1.6; color: var(--muted); } /* Pushed to the card's floor so the link sits on one line across a row of cards whose excerpts differ in length. */ .news-more { margin-top: auto; padding-top: 4px; font-weight: 600; font-size: 14px; color: var(--red); } .news-more i { font-size: 12px; transition: transform var(--tr); } .news-card:hover .news-more i { transform: translateX(3px); } /* The newest article, laid out wide with the image beside the copy. */ .news-card-lead { flex-direction: row; } .news-card-lead + .news-grid { margin-top: 24px; } .news-card-lead .news-card-media { flex: 0 0 55%; aspect-ratio: auto; /* height comes from the copy alongside it */ min-height: 320px; } .news-card-lead .news-card-body { justify-content: center; padding: 40px; gap: 12px; } .news-card-lead .news-card-title { font-size: 27px; } .news-card-lead .news-excerpt { font-size: 16px; } .news-card-lead .news-more { margin-top: 8px; } /* Press-release PDF list on the news index's shaded band. */ .press-list { display: flex; flex-direction: column; gap: 14px; } .press-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 26px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); } .press-row .btn { flex-shrink: 0; } .press-date { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .press-title { font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--ink); } /* ---- News article -------------------------------------------------- */ .article-media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 40px; } /* Held to a reading measure rather than the full 1180px wrap. */ .article-body { max-width: 720px; font-size: 17px; line-height: 1.75; color: var(--ink); } .article-body > * + * { margin-top: 22px; } .article-body h2 { font-family: var(--font-body); font-weight: 600; font-size: 24px; line-height: 1.3; margin-top: 40px; } .article-body ul { padding-left: 22px; list-style: disc; } .article-body li + li { margin-top: 8px; } .article-body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; } .article-body code { font-size: 15px; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--bg-element); } /* Press-release furniture: the attributed quotes and the city/date opener that every release leads with. */ .article-body blockquote { margin-top: 32px; padding-left: 22px; border-left: 3px solid var(--red); font-size: 18px; line-height: 1.65; color: var(--ink); } .article-body blockquote p + p { margin-top: 16px; } .dateline { font-weight: 600; text-transform: uppercase; font-size: 15px; letter-spacing: .02em; } /* Video still at the foot of an article, playing in the site's modal. Held to the body's reading measure so it reads as part of the text. */ .video-thumb.article-video { width: 100%; max-width: 720px; margin-top: 40px; border-radius: var(--radius-lg); } .video-thumb.article-video img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .article-back { display: inline-block; margin-top: 48px; font-weight: 600; font-size: 15px; color: var(--red); } .article-back i { font-size: 12px; } @media (prefers-reduced-motion: reduce) { .testimonial { transition: none; } } /* ---- About --------------------------------------------------------- */ .about-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; } .about-gallery img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); } /* Each still is a button, so it needs the button chrome stripped. */ .video-thumb { position: relative; display: block; padding: 0; border: 0; border-radius: var(--radius); background: none; cursor: pointer; overflow: hidden; } .video-thumb img { transition: transform var(--tr); } .video-thumb:hover img { transform: scale(1.03); } .video-thumb:hover .play i { background: var(--red); border-color: var(--red); } .video-thumb:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } /* the home page's still is wider and keeps the softer corner it had */ .video-thumb.experience-video { border-radius: var(--radius-sm); } .video-thumb .play i { transition: background var(--tr), border-color var(--tr); } .video-modal { /* margin: auto is how a modal