/* 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; --tint-blue: #E3F0FA; /* light blue plate: date chips, About photo */ --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: "Fjalla One", "Oswald", sans-serif; /* one weight: 400 */ --font-body: "Cantarell", "Helvetica Neue", sans-serif; /* 400 and 700 */ /* 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, .event-hero .kicker, .value-strip-items, .action-card, .month-label, .featured h2, .date-chip .mon { font-family: var(--font-display); font-weight: 400; font-size: 14px; letter-spacing: .07em; text-transform: uppercase; } /* ---- Page-top and section headings: Fjalla One, uppercase --------- */ .page-hero h1, .event-hero h1, .hero-content h1, .section-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; } /* ---- Display headings --------------------------------------------- Heavy uppercase display type. Sizes are set per-use below. */ .featured-card h3, .event-main h3, .date-chip .day { font-family: var(--font-display); font-weight: 400; 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 { 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: relative; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 104px; } .brand img { height: 80px; width: auto; max-width: none; } .site-nav { display: flex; align-items: center; gap: 28px; } .site-nav a:not(.btn) { color: var(--ink); } .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: var(--ink); 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; /* Fjalla One's capitals sit high in their line box, so the padding is weighted to the top to centre them optically. */ padding: 12px 18px 8px; border-radius: var(--radius-sm); border: 1px solid transparent; line-height: 1.2; cursor: pointer; transition: background var(--tr), color var(--tr); } .btn-red { background: var(--red); color: #fff; } .btn-red:hover { background: var(--red-dark); color: #fff; } .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-blue { border-color: var(--blue); color: var(--blue); background: transparent; } .btn-outline-blue:hover { background: var(--blue); color: #fff; } .btn-outline-dark { border-color: var(--ink); color: var(--ink); background: transparent; } .btn-outline-dark:hover { background: var(--ink); color: #fff; } /* ---- Page hero band: pale blue wash, dark text ---- */ .page-hero { background: linear-gradient(160deg, #eaf4fb, #d9ecf8 60%, #c9e3f5); color: var(--ink); padding: 72px 0 56px; } .page-hero h1 { font-size: 46px; } .page-hero .lede { margin-top: 8px; color: var(--muted); font-size: 16px; } .page-hero .eyebrow.on-dark { color: var(--muted); margin-bottom: 12px; } /* With a photo behind it (set by the view as --hero-image) the band goes dark and the text white. */ .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; color: #fff; } .page-hero.has-image .lede, .page-hero.has-image .eyebrow.on-dark { color: var(--text-on-dark); } /* ---- 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: 700; } /* ---- 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-blue); color: var(--blue-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: linear-gradient(160deg, #eaf4fb, #d9ecf8 60%, #c9e3f5); /* 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: var(--ink); padding: 64px 0 56px; 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); color: #fff; } .event-hero > .wrap { width: 100%; } .event-hero .kicker { font-weight: 700; letter-spacing: .12em; color: var(--blue); } .event-hero h1 { font-size: 48px; margin-top: 8px; } .event-hero .meta { margin-top: 16px; font-size: 20px; color: var(--muted); } .event-hero.has-image .kicker { color: rgba(255,255,255,.75); } .event-hero.has-image .meta { 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: 700; 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; } .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: 700; font-size: 15px; } .download-meta { margin-top: 2px; font-size: 12.5px; color: var(--muted); } /* ---- Home hero (video background) ---- */ .hero { position: relative; min-height: clamp(560px, 85vh, 820px); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--blue); /* 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(110deg, rgba(237,28,36,.82), rgba(120,40,120,.7) 50%, rgba(0,99,176,.82)); } .hero-content { position: relative; z-index: 1; text-align: center; color: #fff; } .hero-content h1 { font-size: 60px; } .hero-sub { margin-top: 14px; font-size: 17px; letter-spacing: .02em; text-transform: none; color: #fff; } /* ---- Value strip (red bar under the hero) ---- */ .value-strip { background: var(--blue); color: #fff; padding: 24px 0; } .value-strip-items { display: flex; justify-content: center; gap: 80px; flex-wrap: wrap; font-size: 20px; letter-spacing: .1em; } .value-strip-items i { margin-right: 10px; font-size: 15px; } /* ---- 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-size: 38px; color: var(--ink); } .section-title.muted { color: var(--muted); font-weight: 500; } .section-lede { margin-top: 14px; font-size: 19px; line-height: 1.6; color: var(--muted); } .section-heading.on-dark .section-title { color: #fff; } .section-heading.on-dark .section-lede { color: #e6e6ea; } /* ---- 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; } /* ---- Care section ---- */ /* Generic light band, used by the about, bids and partners pages. */ .section.shade { background: var(--bg-element); } /* 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; } /* ---- Footer ---- */ .site-footer { margin-top: 0; background: var(--blue) url('/img/footer-bg.svg') center / cover no-repeat; color: #fff; padding: 72px 0 0; } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; } .footer-blurb { max-width: 560px; font-size: 16px; font-weight: 700; line-height: 1.7; color: #fff; } .footer-nav { display: flex; flex-direction: row; justify-content: center; flex-wrap: nowrap; gap: 12px; min-width: 0; } .footer-nav .btn:hover { background: #fff; color: var(--blue); } .footer-parent img { height: 96px; width: auto; } .footer-parent { margin-top: 24px; } .footer-logo { height: 170px; width: auto; margin: 0 auto 18px; } .footer-social { display: flex; justify-content: center; gap: 14px; margin-top: 14px; } /* Bordered square tiles, as on the old site; the hover fills brand red. */ .footer-social a { display: grid; place-items: center; width: 54px; height: 54px; border: 2px solid #0084FF; /* the light blue from the old site */ border-radius: 6px; color: #fff; font-size: 26px; transition: background var(--tr), border-color var(--tr); } .footer-social a:hover { background: var(--red); border-color: var(--red); } .footer-colophon { width: 100%; border-top: 1px solid rgba(255,255,255,.2); margin-top: 24px; padding: 22px 0; text-align: center; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.75); } .footer-colophon div + div { margin-top: 6px; } .footer-colophon a { color: #fff; } .footer-colophon a:hover { color: #fff; } /* 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 { max-width: 820px; margin: 0 auto; } .testimonial-who { margin-bottom: 14px; font-size: 13px; color: var(--muted); } .testimonial-who strong { display: block; font-size: 15px; color: var(--ink); } .testimonial blockquote { font-size: 16px; line-height: 1.7; color: var(--muted); } .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: 400; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .news-card-title { font-family: var(--font-body); font-weight: 700; 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: 700; 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: 400; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .press-title { font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--ink); } .dateline { font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .02em; } /* ---- 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: 700; 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; } /* 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: 700; font-size: 15px; color: var(--red); } .article-back i { font-size: 12px; } /* ---- Home: event grid ------------------------------------------------ */ .prepare .section-heading { max-width: 900px; margin-left: auto; margin-right: auto; } .event-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .event-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 18px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr); } .event-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.06); } .event-card-logo { width: 130px; height: 110px; object-fit: contain; margin-bottom: 8px; } .event-card-name { font-family: var(--font-display); font-weight: 400; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; } .event-card-city { color: var(--blue); font-weight: 700; font-size: 15px; } .event-card-date { font-size: 13px; color: var(--muted); } /* ---- Home: "This is your event" band ------------------------------- */ .your-event { background: var(--blue); color: #fff; } .your-event .section-heading { max-width: 720px; margin-left: auto; margin-right: auto; } .feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; max-width: 760px; margin: 0 auto 40px; text-align: left; font-size: 15px; } .feature-list li { display: flex; align-items: flex-start; gap: 12px; } .feature-list li i { font-size: 13px; margin-top: 4px; } .video-thumb.event-video { width: 100%; max-width: 820px; margin: 0 auto; border-radius: var(--radius-lg); } .video-thumb.event-video img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* ---- About -------------------------------------------------------- */ .about-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 56px; align-items: start; } .about-photo { padding: 12px; background: var(--tint-blue); } .about-photo img { display: block; width: 100%; } .about-copy .section-title { font-size: 34px; margin-bottom: 20px; } .about-copy p { font-size: 16px; line-height: 1.7; color: var(--muted); } .about-copy p + p { margin-top: 18px; } .about-copy p a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; } .about-subtitle { margin-top: 28px; font-size: 22px; } .team-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font-size: 16px; color: var(--muted); } .team-list strong { color: var(--ink); margin-right: 8px; } .cta-pair.start { justify-content: flex-start; } /* ---- Request form ---------------------------------------------------- */ .request-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; margin-top: 24px; } .request-form .field { display: flex; flex-direction: column; gap: 6px; } .request-form .field.full { grid-column: 1 / -1; } .request-form label { font-family: var(--font-display); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .request-form label span { color: var(--red); } .request-form input { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); } .request-form input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); } .request-form .has-error input { border-color: var(--red); } .field-error { font-size: 13px; color: var(--red); } .form-errors { grid-column: 1 / -1; font-size: 14px; color: var(--red); } .request-form .btn { justify-self: start; } .request-form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-success { display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; padding: 20px 22px; border-radius: var(--radius); background: var(--tint-blue); color: var(--blue-dark); } .form-success i { font-size: 22px; margin-top: 2px; } .form-success strong { display: block; } .form-success span { color: var(--muted); font-size: 14px; } /* ---- Home: planning ------------------------------------------------- */ .planning { background: var(--bg-element); } .planning-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; } .planning-photo img { display: block; width: 100%; border-radius: var(--radius-lg); } @media (prefers-reduced-motion: reduce) { .testimonial { transition: none; } } /* 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; } .video-thumb .play i { transition: background var(--tr), border-color var(--tr); } .video-modal { /* margin: auto is how a modal