/*! * SRS UI Color System (Final) * Generated: 2026-01-20 * * Usage notes: * - Add `.srs-theme-dark` on dark sections (or body) and `.srs-theme-light` on light sections. * - If you can’t add theme classes everywhere, set body class once and override locally as needed. */ /* ========================================================================== 1) Core Tokens ========================================================================== */ :root { /* Championship Red (Primary) */ /*--srs-red: #991F1F;*/ --srs-red: #AA0406; --srs-red-hover: #8F0305; --srs-red-active: #760203; --srs-red-soft: #C63A3C; /* subtle accents only */ /* Metallic / Neutral Structure */ --srs-silver: #C9CDD3; /* for dark backgrounds */ --srs-silver-hover: #AEB3B9; --srs-silver-muted: #8E9399; /* Steel (accessibility-safe on white) */ --srs-steel: #2F3A45; /* for light backgrounds */ --srs-steel-hover: var(--srs-red); --srs-steel-muted: #5A6672; /* Trophy / Award Accent (optional) */ --srs-gold: #B09A4A; /* Text */ --srs-text-dark: #111111; --srs-text-light: #F5F6F7; /* Backgrounds */ --srs-bg-dark: #0E0F11; --srs-bg-light: #FFFFFF; /* Default “semantic” aliases */ --color-primary: var(--srs-red); --link-light: var(--srs-steel); --link-dark: var(--srs-silver); } /* ========================================================================== 2) Theme Helpers (apply these classes to scope behavior) ========================================================================== */ .srs-theme-light { --srs-link: var(--link-light); --srs-link-hover: var(--srs-red); --srs-text: var(--srs-text-dark); --srs-bg: var(--srs-bg-light); } .srs-theme-dark { --srs-link: var(--link-dark); --srs-link-hover: var(--srs-red); --srs-text: var(--srs-text-light); --srs-bg: var(--srs-bg-dark); } /* Optional: If you want the whole page default, add one of these to */ body.srs-theme-light, body.srs-theme-dark { color: var(--srs-text); background: var(--srs-bg); } /* ========================================================================== 3) Links (readable on white, clean on dark) ========================================================================== */ .srs-theme-light a, body.srs-theme-light a { color: var(--srs-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .srs-theme-dark a, body.srs-theme-dark a { color: var(--srs-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .srs-theme-light a:hover, body.srs-theme-light a:hover, .srs-theme-dark a:hover, body.srs-theme-dark a:hover { color: var(--srs-link-hover); } .srs-theme-light a:active, body.srs-theme-light a:active, .srs-theme-dark a:active, body.srs-theme-dark a:active { color: var(--srs-red-active); } /* If you have “button links” (anchors styled as buttons) */ a.srs-btn-link { text-decoration: none; } /* ========================================================================== 4) Bars / Headers (your red “section bars”) ========================================================================== */ .srs-bar, .srs-section-bar { background: var(--srs-red); color: var(--srs-text-light); } .srs-bar:hover, .srs-section-bar:hover { background: var(--srs-red-hover); } .srs-bar:active, .srs-section-bar:active { background: var(--srs-red-active); } /* Optional: subtle bottom border for bars on light sections */ .srs-theme-light .srs-bar, .srs-theme-light .srs-section-bar { border-bottom: 1px solid rgba(0,0,0,0.12); } /* ========================================================================== 5) Buttons (generic) ========================================================================== */ .srs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--srs-red); color: var(--srs-text-light); border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; padding: 0.6rem 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer; user-select: none; } .srs-btn:hover { background: var(--srs-red-hover); } .srs-btn:active { background: var(--srs-red-active); } .srs-btn--ghost { background: transparent; color: var(--srs-red); border: 1px solid rgba(153,31,31,0.55); } .srs-btn--ghost:hover { background: rgba(153,31,31,0.10); } .srs-btn--ghost:active { background: rgba(153,31,31,0.16); } /* ========================================================================== 6) Badges / Awards (use gold sparingly) ========================================================================== */ .srs-badge--award, .srs-award { background: var(--srs-gold); color: var(--srs-text-dark); border-radius: 999px; padding: 0.15rem 0.55rem; font-weight: 700; font-size: 0.85rem; display: inline-block; } .srs-color--award { color: var(--srs-gold); } /* ========================================================================== 7) Table helper accents (works well for dense scoreboards) ========================================================================== */ .srs-theme-light .srs-table th, .srs-theme-light .srs-table thead th { background: var(--srs-red); color: var(--srs-text-light); } .srs-theme-dark .srs-table th, .srs-theme-dark .srs-table thead th { background: var(--srs-red); color: var(--srs-text-light); } /* subtle row hover */ .srs-table tbody tr:hover { background: rgba(153,31,31,0.06); } /* ========================================================================== 8) Utilities ========================================================================== */ .srs-text-silver { color: var(--srs-silver); } .srs-text-steel { color: var(--srs-steel); } .srs-text-red { color: var(--srs-red); } .srs-text-gold { color: var(--srs-gold); } .srs-bg-red { background: var(--srs-red); color: var(--srs-text-light); } .srs-bg-dark { background: var(--srs-bg-dark); color: var(--srs-text-light); } .srs-bg-light { background: var(--srs-bg-light); color: var(--srs-text-dark); } /* ============================================================ SRS HOME "CARDS" (GoodLayers) — Full CSS (all changes) ============================================================ IMPORTANT: 1) Add this class to the GoodLayers WRAPPER that contains the 5 columns: srs-home-cards-row (Wrapper / Section / Row "Extra Class" field in GoodLayers) 2) Keep your per-card class on each column content margin: srs-home-card */ /* ------------------------------------------------------------ 1) Make the 5 columns equal-height (remove white bottom gap) ------------------------------------------------------------ */ @media (min-width: 992px){ /* Turn the wrapper container into a flex row */ .srs-home-cards-row .gdlr-core-pbf-wrapper-container{ display: flex; align-items: stretch; } /* Each GoodLayers column becomes a flex item that stretches */ .srs-home-cards-row .gdlr-core-pbf-column{ display: flex; /* allows children to stretch vertically */ flex: 1 1 0; } /* Your card element fills the full column height */ .srs-home-cards-row .srs-home-card{ flex: 1 1 auto; width: 100%; } } /* ------------------------------------------------------------ 2) Card base + GoodLayers parallax background behavior ------------------------------------------------------------ */ /*.srs-home-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 0px; color: #fff; margin: 1px 1px; }*/ .srs-home-card { position: relative; overflow: hidden; display: flex; flex-direction: column; /* min-height: 480px; */ /* padding: 20px 10px 0; */ padding: 0px; color: #fff; margin: 1px 2px; border: 1px solid #272727 !important; } /* Make the link overlays on top of everything else. */ .srs-home-card .gdlr-core-pbf-column-link { z-index: 5; } /* Make GoodLayers background-wrap behave like a true background layer */ .srs-home-card > .gdlr-core-pbf-background-wrap{ position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* Keep content above background and use flex column for vertical alignment */ .srs-home-card > .gdlr-core-pbf-column-content{ position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; } /* ------------------------------------------------------------ 3) Readability overlay (between bg and content) ------------------------------------------------------------ */ /*.srs-home-card::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.20)); background: linear-gradient( rgba(0,0,0,.45) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.05) 100% ); z-index: 1; pointer-events: none; }*/ /* ------------------------------------------------------------ 4) Top label styling ------------------------------------------------------------ */ .srs-home-card .srs-label { text-transform: uppercase; font-size: 13px; letter-spacing: 0.12em; opacity: 0.85; margin-bottom: 0px; padding-top: 10px; font-weight: bold; } /* ------------------------------------------------------------ 5) Normalize "logo / hero image" region (different image sizes) ------------------------------------------------------------ */ /* Create a consistent slot for the logo/hero image */ .srs-home-card .gdlr-core-image-item{ min-height: 150px; /* same visual rhythm across cards */ display: flex; align-items: center; justify-content: center; } /* Make images behave consistently within the slot */ .srs-home-card .gdlr-core-image-item img{ max-height: 150px; width: auto; height: auto; object-fit: contain; } /* ------------------------------------------------------------ 6) Prevent text-heavy cards from pushing layout around (Publications title + Shop stunning text) ------------------------------------------------------------ */ .srs-home-card .gdlr-core-title-item, .srs-home-card .gdlr-core-stunning-text-item{ max-height: 180px; /* tweak if you want more/less room */ overflow: hidden; } /* Optional: keep text from getting too wide and awkward */ .srs-home-card .gdlr-core-text-box-item-content{ max-width: 26ch; margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------ 7) Button pinned to bottom + consistent sizing ------------------------------------------------------------ */ .srs-home-card .gdlr-core-button-item{ margin-top: auto; /* pins to bottom */ /*padding-top: 22px;*/ padding-top: 0px; } .srs-home-card .gdlr-core-button{ padding: 14px 28px; font-weight: 600; width: 100%; } /* ------------------------------------------------------------ 9) Optional: If you DON'T want the lightbox/magnifier overlay on your logo images, uncomment this block. ------------------------------------------------------------ */ /* .srs-home-card .gdlr-core-ilightbox{ pointer-events: none; cursor: default; } .srs-home-card .gdlr-core-image-overlay{ display: none !important; } */ /* Make the element stack a true flex column */ .srs-home-card > .gdlr-core-pbf-column-content{ display: flex !important; flex-direction: column !important; height: 100% !important; } /* Push the button's wrapper (last element) to the bottom */ .srs-home-card > .gdlr-core-pbf-column-content > .gdlr-core-pbf-element:last-child{ margin-top: auto !important; } /* Safety: remove any spacer items if they exist in other cards */ .srs-home-card .gdlr-core-space-item{ display: none !important; } .srs-home-card.srs-leaderboard img { max-height: max-content; } .srs-home-card.srs-training img { padding-top: 14px; max-height: max-content; } .srs-home-card.srs-podcast img { padding-top: 14px; max-height: max-content; } .srs-home-card.srs-publications img { max-height: max-content; } .srs-home-card.srs-store img { max-height: max-content; } /* Optional overlay — ONLY when this class is present */ .srs-home-card.srs-overlay::before{ content: ""; position: absolute; inset: 0; background: linear-gradient( rgba(0,0,0,.45), rgba(0,0,0,.15) ); z-index: 1; pointer-events: none; } /* Strong overlay */ .srs-home-card.srs-overlay-strong::before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.25)); z-index:1; } /* Light overlay */ .srs-home-card.srs-overlay-light::before{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.08)); z-index:1; } /* Center the middle content between top label and bottom button */ .srs-home-card.srs-center-mid > .gdlr-core-pbf-column-content{ display: flex !important; flex-direction: column !important; height: 100% !important; } /* Keep first element (label) at the top */ .srs-home-card.srs-center-mid > .gdlr-core-pbf-column-content > .gdlr-core-pbf-element:first-child{ margin-top: 0 !important; } /* Keep last element (button) pinned to bottom */ .srs-home-card.srs-center-mid > .gdlr-core-pbf-column-content > .gdlr-core-pbf-element:last-child{ margin-top: auto !important; } /* Center all “middle” elements (everything between first and last) by giving them auto margins as a group: */ .srs-home-card.srs-center-mid > .gdlr-core-pbf-column-content > .gdlr-core-pbf-element:not(:first-child):not(:last-child){ /* This causes the middle block to soak up space above and below */ margin-top: auto; margin-bottom: auto; } /* ------------------------------------------------------------ 8) OPTIONAL OVERLAYS / BACKGROUND EFFECTS (opt-in) IMPORTANT: Only ONE srs-bg-* class per card. All effects use ::before, layered between bg (0) and content (2). ------------------------------------------------------------ */ /* Legacy simple overlay (if you want it) */ .srs-home-card.srs-overlay::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.15)); } /* 1) Soft Blur + Darken */ .srs-home-card.srs-bg-blur::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: rgba(0,0,0,.35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* 2) Muted / Desaturated (editorial) */ .srs-home-card.srs-bg-muted::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: rgba(0,0,0,.45); filter: grayscale(70%); } /* 3) Color Wash Overlay (Teal) */ .srs-home-card.srs-bg-teal::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: rgba(0,97,92,.65); } /* 3b) Color Wash Overlay (Red) */ .srs-home-card.srs-bg-red::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: rgba(160,0,0,.75); } /* 4) Gradient Mask (top-heavy) */ .srs-home-card.srs-bg-gradient::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient( rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.08) 100% ); } /* 5) Light Bottom Grounding */ .srs-home-card.srs-bg-ground::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient( rgba(255,255,255,0.00) 0%, rgba(0,0,0,0.10) 100% ); } /* 6) Cinematic (blur + gradient) */ .srs-home-card.srs-bg-cinematic::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: linear-gradient( rgba(0,0,0,.55), rgba(0,0,0,.25) ); } /* Ensure the card can layer children */ .srs-home-card{ transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .srs-home-card:hover{ transform: translateY(-2px); box-shadow: 0 20px 45px rgba(0,0,0,.25); } /* --- Subtle background zoom (optional but nice) --- */ .srs-home-card .gdlr-core-pbf-background{ transition: transform 400ms ease; will-change: transform; } .srs-home-card:hover .gdlr-core-pbf-background{ transform: scale(1.06); } /* --- Button: make it feel obviously interactive on hover --- */ .srs-home-card .gdlr-core-button{ transition: all 180ms ease; } /* When hovering the CARD, the button perks up */ .srs-home-card:hover .gdlr-core-button{ transform: translateY(-2px); filter: brightness(1.08) contrast(1.05); box-shadow: 0 10px 22px rgba(0,0,0,.22); /*background-color: var(--srs-red) !important;*/ /*color: #fff;*/ } /* When hovering the BUTTON specifically, give it a stronger response */ .srs-home-card .gdlr-core-button:hover{ transform: translateY(-3px) scale(1.02); filter: brightness(1.12) contrast(1.08); box-shadow: 0 14px 28px rgba(0,0,0,.28); /*background-color: var(--srs-red) !important;*/ } /* Optional: make the arrow shift slightly to signal "click" */ .srs-home-card .gdlr-core-button i.fa { transition: transform 180ms ease; } .srs-home-card:hover .gdlr-core-button i.fa { transform: translateX(4px); } /* Button Stuff */ /*.srs-home-card .gdlr-core-button{ border: 1px solid rgba(0,0,0,.08); } .srs-home-card .gdlr-core-button{ padding: 16px 32px; } .srs-home-card:hover .gdlr-core-button{ background-color: #ffffff; } .srs-home-card .gdlr-core-button .gdlr-core-content { color: var(--srs-red); } .srs-home-card:hover .gdlr-core-button .gdlr-core-content { color: var(--srs-red-hover); } .srs-home-card .gdlr-core-button .gdlr-core-content i { color: var(--srs-red) !important; } .srs-home-card:hover .gdlr-core-button .gdlr-core-content i { color: var(--srs-red-hover) !important; }*/ /* ============================================================ RESPONSIVE LAYOUT (GoodLayers) — 768px to 1280px+ Paste at END of srscards.css ============================================================ */ /* ------------------------------------------------------------ 8) Responsive adjustments ------------------------------------------------------------ */ /*@media (max-width: 1024px){ .srs-home-card{ min-height: 460px; padding: 26px 20px; } .srs-home-card .gdlr-core-image-item{ min-height: 130px; } .srs-home-card .gdlr-core-image-item img{ max-height: 130px; } }*/ /* Hacky. */ /*@media (max-width: 1080px) { .srs-home-card .gdlr-core-stunning-text-caption-above-title .gdlr-core-stunning-text-item-title { font-size: 32px !important; } .gdlr-core-stunning-text-item-content h5 { font-size: 20px !important; } }*/ /* ============================================================ 10) RESPONSIVE GRID (UPDATED BREAKPOINTS) ============================================================ */ /* Tablet & small desktop: allow wrapping */ @media (min-width: 768px) and (max-width: 1279px){ .srs-home-cards-row .gdlr-core-pbf-wrapper-container{ display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; } .srs-home-cards-row .gdlr-core-pbf-column{ float: none !important; display: flex !important; } .srs-home-cards-row .srs-home-card{ width: 100% !important; } } /* 768–991px: 3-up */ @media (min-width: 768px) and (max-width: 991px) { .srs-home-cards-row .gdlr-core-pbf-column{ flex: 0 0 25% !important; max-width: 25% !important; } /* Make the 5th card span 2 columns */ .srs-home-cards-row .gdlr-core-pbf-column:nth-child(5){ flex: 0 0 100% !important; max-width: 100% !important; } .srs-home-card .gdlr-core-button .gdlr-core-content { font-size: 12px; } .srs-home-card .gdlr-core-button .gdlr-core-content i { display: block; margin-left: 0; margin-top: 4px; font-size: 14px; } .srs-home-card .gdlr-core-button .gdlr-core-content i::before { /*display: block;*/ /* Box with arrow up to right */ content: '\f08e'; /* Link */ /*content: '\f0c1'; */ } } /* 992–1279px: 4-up */ @media (min-width: 992px) and (max-width: 1279px) { /*.srs-home-cards-row .gdlr-core-pbf-column{ flex: 0 0 25% !important; max-width: 25% !important; }*/ .srs-home-card .gdlr-core-stunning-text-caption-above-title .gdlr-core-stunning-text-item-title { font-size: 26px !important; } .srs-home-card .gdlr-core-stunning-text-item-content h5 { font-size: 18px !important; } .srs-home-card .gdlr-core-button .gdlr-core-content { font-size: 12px; } .srs-home-card .gdlr-core-button .gdlr-core-content i { display: block; margin-left: 0; margin-top: 4px; font-size: 14px; } .srs-home-card .gdlr-core-button .gdlr-core-content i::before { /*display: block;*/ /* Box with arrow up to right */ content: '\f08e'; /* Link */ /*content: '\f0c1'; */ } /*f08e*/ } /* 1280px+: 5-up */ @media (min-width: 1280px){ .srs-home-cards-row .gdlr-core-pbf-wrapper-container{ display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; } .srs-home-cards-row .gdlr-core-pbf-column{ float: none !important; display: flex !important; flex: 0 0 20% !important; max-width: 20% !important; } } /* ============================================================ <768px: 2-up grid ============================================================ */ @media (max-width: 767px){ .srs-home-cards-row .gdlr-core-pbf-wrapper-container{ display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; } .srs-home-cards-row .gdlr-core-pbf-column{ float: none !important; display: flex !important; flex: 0 0 50% !important; max-width: 50% !important; } .srs-home-cards-row .gdlr-core-pbf-column:nth-child(5){ flex: 0 0 100% !important; max-width: 100% !important; } .srs-home-cards-row .srs-home-card{ width: 100% !important; } } /* ============================================================ 11) MOBILE TWEAKS ============================================================ */ @media (max-width: 767px){ .srs-home-card .gdlr-core-button .gdlr-core-content { font-size: 13px; } /*.srs-home-card .gdlr-core-button .gdlr-core-content i { display: block; margin-left: 0; margin-top: 4px; font-size: 18px; }*/ .srs-home-card .gdlr-core-button .gdlr-core-content i::before { /*display: block;*/ /* Box with arrow up to right */ /*content: '\f08e';*/ /* Link */ /*content: '\f0c1'; */ } .srs-home-card{ /*min-height: 380px;*/ /*padding: 22px 18px;*/ } .srs-home-card .gdlr-core-image-item{ /*min-height: 130px;*/ } .srs-home-card .gdlr-core-image-item img{ /*max-height: 130px;*/ } } .gdlr-core-pbf-wrapper.srs-home-cards-row { background: #0f0f0f; /* or rgba(0,0,0,.92) if you want transparency */ padding: 32px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); } .srs-home-card .gdlr-core-button { /*font-family: Roboto; font-size: 14px; font-weight: 500; color: rgb(17, 17, 17); text-transform: none; text-decoration: none; letter-spacing: 0px; line-height: 18px; text-align: left; white-space: nowrap; padding: 14px 22px; border-radius: 8px; vertical-align: top; transform-origin: 50% 50%; width: auto; height: auto; display: block; visibility: inherit; background: rgb(255, 255, 255); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px); pointer-events: auto; border-width: 0px; border-style: none; border-color: rgb(230, 230, 230);*/ } .srs-home-card .gdlr-core-button .gdlr-core-content { /*font-family: Roboto; font-size: 14px; font-weight: 500; color: #111111; text-transform: none; text-decoration: none; letter-spacing: 0px; line-height: 18px; text-align: left; white-space: nowrap; padding: 14px 22px; border-radius: 8px; vertical-align: top; transform-origin: 50% 50%; width: auto; height: auto; display: block; visibility: inherit; background: rgb(255, 255, 255); translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px); pointer-events: auto; border-width: 0px; border-style: none; border-color: rgb(230, 230, 230);*/ } /* Vertically center columns inside wrapper */ .srs-home-meet-sponsors .gdlr-core-pbf-wrapper-container { display: flex; align-items: center; } /* Disable GoodLayers floats for flexbox */ .srs-home-meet-sponsors .gdlr-core-pbf-column { float: none; } /* Center content inside each column */ .srs-home-meet-sponsors .gdlr-core-pbf-column-content-margin { display: flex; align-items: center; height: 100%; } /* Upcoming section surface */ .srs-upcoming-section { background: #0f0f0f; padding: 56px 0 70px; border-top: 1px solid rgba(255,255,255,.08); } /* Title legibility */ .srs-upcoming-section h2, .srs-upcoming-section .gdlr-core-title-item-title{ color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,.45); } /* Make the event card feel consistent with your new cards */ .srs-upcoming-section .your-event-card-class{ border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.28); } /* Reduce Logo Size, A lot */ /* ================================ SRS Header Logo Sizing (GoodLayers / Big Slam) Target: combined logo image (SRS + Presented By) ================================ */ /* Desktop default */ .gdlr-core-header-wrap .gdlr-core-logo img, .gdlr-core-header-wrap .gdlr-core-logo a img, .gdlr-core-header-wrap .gdlr-core-logo img.gdlr-core-logo { height: 115px !important; width: auto !important; max-height: 115px !important; } .bigslam-logo-inner img { height: 115px; width: auto; /*max-width: 330px;*/ } /* Tablet */ @media (max-width: 1032px) { .gdlr-core-header-wrap .gdlr-core-logo img, .gdlr-core-header-wrap .gdlr-core-logo a img, .gdlr-core-header-wrap .gdlr-core-logo img.gdlr-core-logo, .bigslam-logo-inner img { height: 100px !important; margin-top: 9px; } } /* Mobile */ @media (max-width: 767px) { .gdlr-core-header-wrap .gdlr-core-logo img, .gdlr-core-header-wrap .gdlr-core-logo a img, .gdlr-core-header-wrap .gdlr-core-logo img.gdlr-core-logo, .bigslam-logo-inner img { height: 76px !important; max-height: 76px !important; } } /* ================================ Tighten header vertical padding ================================ */ /* Main header bar */ .gdlr-core-header-wrap .gdlr-core-header-container, .gdlr-core-header-wrap .gdlr-core-header-container-inner { padding-top: 10px !important; padding-bottom: 10px !important; } /* Logo block itself (helps when theme adds extra padding/margins) */ .gdlr-core-header-wrap .gdlr-core-logo { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* ================================ Align logo + nav vertically ================================ */ .gdlr-core-header-wrap .gdlr-core-header-container-inner { display: flex !important; align-items: center !important; } /* Prevent nav from pushing header taller */ .gdlr-core-header-wrap .gdlr-core-navigation, .gdlr-core-header-wrap .gdlr-core-navigation-wrapper { padding-top: 0 !important; padding-bottom: 0 !important; } /* ================================ Optional: shrink top utility bar ================================ */ .gdlr-core-top-bar, .gdlr-core-top-bar-container { padding-top: 6px !important; padding-bottom: 6px !important; line-height: 1.1 !important; } /* ========= M E N U ========= */ .sf-menu > .bigslam-normal-menu ul { margin-left: -56px !important; } @media only screen and (max-width: 1250px) { body .sf-menu > .bigslam-normal-menu ul { margin-left: -45px!important; } } @media only screen and (max-width: 1500px) { /* About */ body .sf-menu > .menu-item-7957.bigslam-normal-menu ul { margin-left: -162px!important; } /* MEDIA */ body .sf-menu > .menu-item-7947.bigslam-normal-menu ul { margin-left: -162px!important; } } @media only screen and (max-width: 1140px) { body .sf-menu > .bigslam-normal-menu ul { margin-left: -42px!important; } } /* Slider Revolution Specific */ .srs-blur-halo { background: rgba(0,0,0,0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 12px; } .srs-fake-halo { background: rgba(0,0,0,0.55); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); } /* !Slider Revolution */ /* WPDataTable fixes */ /* Bootstrap adds a border triangle, so we need to remove it on wpDataTables as they do it ::before */ .wpdt-c .wpDataTablesWrapper .dataTables_length .bootstrap-select .dropdown-toggle:after { border: none; } /* !WPDataTable fixes */ /* Top Bar */ .bigslam-body .bigslam-top-bar a { color: var(--srs-silver-muted); } /* !Top Bar */ .srs-official-partners-label { position: relative; display: flex; align-items: center; gap: 14px; margin: 0px; padding: 0px; padding-left: 10px !important; padding-right: 10px !important; } /*.gdlr-core-page-builder-body .srs-official-partners-label p { margin: 0px; line-height: 1; font-size: 14px; font-weight: 700; line-height: 1; font-style: normal; letter-spacing: 1.2px; text-transform: none; }*/ .gdlr-core-page-builder-body .srs-official-partners-label p { margin: 0px; line-height: 1; font-size: 20px; font-weight: 600; line-height: 1; font-style: normal; } .srs-official-partners-label::before { content: ""; flex: 0 0 5px; height: 1.2em; background-color: var(--srs-gold, #B09A4A); } /* 768–991px: 3-up */ @media (min-width: 768px) and (max-width: 991px) { .srs-official-partners-label { padding: 10px !important; } .gdlr-core-page-builder-body .srs-official-partners-label p { margin: 0px; line-height: 1; font-size: 14px; font-weight: 600; line-height: 1; font-style: italic; } } .srs-title { position: relative; display: flex; align-items: center; gap: 20px; /* space between vertical line and text */ font-size: 28px; font-weight: 600; line-height: 1; margin: 48px 0 12px; font-style: italic; } /* Vertical accent line */ .srs-title::before { content: ""; flex: 0 0 5px; height: 1.2em; background-color: var(--srs-red, #aa0406); } /* Horizontal divider line */ .srs-title::after { content: ""; flex: 1 1 auto; height: 1px; background-color: #e6e6e6; opacity: 0.6; margin-left: 20px; } /*.gdlr-core-text-box-item-content h1 + p, .gdlr-core-text-box-item-content h2 + p, .gdlr-core-text-box-item-content h3 + p, .gdlr-core-text-box-item-content h4 + p { text-indent: 1.5em; }*/ /* Lead paragraph after section headings */ .gdlr-core-text-box-item-content h3 + p, .gdlr-core-text-box-item-content h4 + p { font-size: 1.05em; /*font-weight: 500;*/ color: #2f3a45; margin-top: 0.75em; } /*.gdlr-core-text-box-item-content p { margin-bottom: 1.25em; }*/ /* Applies to text box content blocks */ /*.gdlr-core-text-box-item-content{ max-width: 66ch; margin-left: auto; margin-right: auto; }*/ /*.srs-editorial .gdlr-core-text-box-item-content h4:last-of-type { margin-bottom: 2.5em; }*/ /*h4 + p { margin-top: 1em; } .srs-major-section { margin-top: 80px; }*/ /*.gdlr-core-text-box-item-content{ max-width: 66ch; } @media (min-width: 1200px){ .gdlr-core-text-box-item-content{ max-width: 74ch; } }*/ /* ========================================================= SRS Editorial Pages Add class "srs-editorial" to text-heavy pages ========================================================= */ .srs-editorial { --srs-editorial-width: 80ch; } /* Center the TITLE block container to the same reading column */ .srs-editorial .gdlr-core-pbf-wrapper-container.gdlr-core-container{ /* keep GoodLayers container behavior */ } .srs-editorial .gdlr-core-title-item, .srs-editorial .gdlr-core-divider-item{ max-width: var(--srs-editorial-width); /*margin-left: auto;*/ /*margin-right: auto;*/ } /* If GoodLayers adds side padding via item-pdlr, keep it */ .srs-editorial .gdlr-core-title-item.gdlr-core-item-pdlr, .srs-editorial .gdlr-core-divider-item.gdlr-core-item-pdlr{ /* no changes needed; just ensuring same column */ } /* Center all TEXT BOX content to the same column */ .srs-editorial .gdlr-core-text-box-item-content{ max-width: var(--srs-editorial-width); /*margin-left: auto;*/ /*margin-right: auto;*/ } /* Mobile: allow full width */ @media (max-width: 768px){ .srs-editorial .gdlr-core-title-item, .srs-editorial .gdlr-core-divider-item, .srs-editorial .gdlr-core-text-box-item-content{ max-width: 100%; } } /* Paragraph spacing */ .srs-editorial .gdlr-core-text-box-item-content p{ margin: 0 0 1.25em; } /* Lead paragraph after a heading */ .srs-editorial .gdlr-core-text-box-item-content h2 + p, .srs-editorial .gdlr-core-text-box-item-content h3 + p, .srs-editorial .gdlr-core-text-box-item-content h4 + p{ /*font-weight: 600;*/ margin-top: .75em; } /* Major section spacing */ .srs-editorial .gdlr-core-text-box-item-content h2, .srs-editorial .gdlr-core-text-box-item-content h3{ margin-top: 2.25em; } /* ========================================= SRS Competition Formats (GoodLayers-safe) ========================================= */ .srs-formats{ max-width: 980px; margin: 0 auto; } .srs-formats-intro{ margin: 0 0 18px 0; } .srs-formats-intro p{ margin: 0 0 10px 0; font-size: 18px; line-height: 1.75; color: #2f2f2f; } .srs-formats-intro-note{ font-size: 15px !important; color: #6a6a6a; } /* Jump pills */ .srs-formats-nav{ display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 26px 0; } .srs-pill{ display: inline-flex; align-items: center; justify-content: center; padding: 9px 12px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--srs-steel, #2F3A45); background: #f3f4f6; border: 1px solid rgba(0,0,0,0.08); transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; } .srs-pill:hover{ transform: translateY(-1px); background: #ffffff; border-color: rgba(0,0,0,0.14); box-shadow: 0 8px 20px rgba(0,0,0,0.08); color: var(--srs-red, #AA0406); } /* Cards */ .srs-card{ background: #fafafa; border: 1px solid rgba(0,0,0,0.08); border-left: 5px solid var(--srs-red, #AA0406); border-radius: 10px; padding: 22px 24px; margin: 0 0 18px 0; box-shadow: 0 1px 0 rgba(0,0,0,0.02); } .srs-card-title{ margin: 0 0 10px 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: #1a1a1a; } .srs-card-body p{ margin: 0 0 12px 0; line-height: 1.75; color: #2a2a2a; } .srs-card-body ul{ margin: 10px 0 0 0; padding: 0; list-style: none; /* we’ll build our own bullets */ } .srs-card-body li{ position: relative; padding-left: 18px; margin: 0 0 10px 0; line-height: 1.65; color: #2a2a2a; } .srs-card-body li:before{ content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 99px; background: var(--srs-red, #AA0406); transform: translateY(-50%); opacity: 0.9; } /* Featured Crown card */ .srs-card-featured{ background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%); border-left-width: 6px; } .srs-featured-top{ display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .srs-featured-badge{ display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(176,154,74,0.14); /* srs-gold-ish */ border: 1px solid rgba(176,154,74,0.25); font-size: 18px; } /* Learn More band */ .srs-learn-more{ margin-top: 26px; padding: 22px 24px; background: #f3f4f6; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); } .srs-learn-more-title{ margin: 0 0 10px 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; } .srs-learn-more-list{ margin: 0; padding: 0; list-style: none; } .srs-learn-more-list li{ margin: 0 0 10px 0; } .srs-learn-more-list a{ text-decoration: none; font-weight: 700; color: var(--srs-red, #AA0406); } .srs-learn-more-list a:hover{ text-decoration: underline; color: var(--srs-red-hover, #8F0305); } /* Responsive */ @media (max-width: 767px){ .srs-formats{ max-width: 100%; } .srs-card{ padding: 18px 16px; border-radius: 12px; } .srs-card-title{ font-size: 20px; } .srs-formats-intro p{ font-size: 16px; } } .srs-section h4 { padding-bottom: 6px; border-bottom: 1px solid rgba(0,0,0,0.08); margin-bottom: 10px; } .srs-section .gdlr-core-icon-item{ position: relative; top: -1px; } .srsu-dates { margin: 1.5em 0 2.5em; font-weight: 600; } .srsu-dates li { margin-left: 0; list-style: none; } /* Events Page */ .bigslam-page-wrapper[class*="srs-bg"]{ background-position: center top; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } .bigslam-page-wrapper.srs-bg01{ background-image: url(/wp-content/uploads/2026/01/srs_score_background_01.jpg); } .bigslam-page-wrapper.srs-bg02{ background-image: url(/wp-content/uploads/2026/01/srs_score_background_02.jpg); } .bigslam-page-wrapper.srs-bg03a{ background-image: url(/wp-content/uploads/2026/01/srs_score_background_03a.jpg); } .bigslam-page-wrapper.srs-bg03b{ background-image: url(/wp-content/uploads/2026/01/srs_score_background_03b.jpg); } .bigslam-page-wrapper.srs-bg04{ background-image: url(/wp-content/uploads/2026/01/srs_score_background_04.jpg); } /* ---- Make the background compete less (if your table sits on a hero image) ---- Only applies if your table is overlaying a background image area. If this feels too strong, reduce the alpha. */ /*.wpDataTablesWrapper table.wpDataTable::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.35); pointer-events: none; }*/ /* .wpDataTableID-9.srs-bg-blur::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(0, 0, 0, .35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }*/ /* ========================================================= SRS SCOREBOARD (scoped) ========================================================= */ .srs-scoreboard-page .wpDataTablesWrapper{ /*border: 1px solid rgba(255,255,255,0.10);*/ border-radius: 14px; padding: 18px 18px 12px !important; } /* Make the table itself NOT transparent */ .srs-scoreboard-page .wpDataTablesWrapper table.wpDataTable{ border-radius: 10px; overflow: hidden; } /* Header row: cleaner, intentional */ /*.srs-scoreboard-page .wpDataTablesWrapper table.wpDataTable > thead > tr > th{ background: rgba(10,10,10,0.98) !important; color: rgba(255,255,255,0.92) !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; border-right: 1px solid rgba(255,255,255,0.06) !important; text-transform: uppercase; letter-spacing: .05em; font-size: 14px !important; }*/ /* Body grid */ .srs-scoreboard-page .wpDataTablesWrapper table.wpDataTable tbody td{ border-top: 1px solid rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.88) !important; } /* FixedColumns should NEVER be white (this is a major “eww” source) */ .srs-scoreboard-page table.wpDataTable thead tr > .dtfc-fixed-start, .srs-scoreboard-page table.wpDataTable thead tr > .dtfc-fixed-end, .srs-scoreboard-page table.wpDataTable tbody tr > .dtfc-fixed-start, .srs-scoreboard-page table.wpDataTable tbody tr > .dtfc-fixed-end{ background: rgba(0,0,0,0.92) !important; } /* Buttons */ .srs-scoreboard-page .wpDataTablesWrapper .dt-buttons .DTTT_button, .srs-scoreboard-page .wpDataTablesWrapper .dt-buttons button{ background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 10px !important; } .srs-scoreboard-page .wpDataTablesWrapper .dt-buttons .DTTT_button:hover, .srs-scoreboard-page .wpDataTablesWrapper .dt-buttons button:hover{ background: rgba(170, 4, 6, 0.28) !important; border-color: rgba(170, 4, 6, 0.45) !important; } /* SRS Home — Meet Our Sponsors gallery: keep multiple columns on mobile */ .gdlr-core-pbf-wrapper.srs-home-meet-sponsors, .gdlr-core-pbf-wrapper.srs-home-second-sponsors { border-top: 1px solid #303030; border-bottom: 1px solid #303030; } @media (max-width: 767px) { /* make the gallery holder use flex so columns can wrap */ .srs-home-meet-sponsors .gdlr-core-gallery-item-holder{ display: flex !important; flex-wrap: wrap; } /* 2 columns on mobile (default) */ /*.srs-home-meet-sponsors .gdlr-core-gallery-column{ width: 50% !important; float: none !important; clear: none !important; }*/ /* optional: tighten spacing a bit */ /*.srs-home-meet-sponsors .gdlr-core-item-pdlr { padding: 20px 10px !important; }*/ .srs-home-meet-sponsors .gdlr-core-gallery-column { width: 25% !important; float: none !important; clear: none !important; } .srs-home-meet-sponsors .gdlr-core-item-pdlr { padding: 8px 4px !important; } /* Second sponsors row on home page */ .srs-home-second-sponsors .gdlr-core-gallery-column{ width: 33.333% !important; float: none !important; clear: none !important; } .srs-home-second-sponsors .gdlr-core-item-pdlr { padding: 20px 10px !important; } } /* OPTIONAL: 3 columns on small phones / wide phones (tweak breakpoint as you like) */ /*@media (max-width: 767px) and (min-width: 480px){ .srs-home-meet-sponsors .gdlr-core-gallery-column{ width: 33.333% !important; } }*/ /* ========================================================= SRS Home — Meet Our Sponsors block ========================================================= */ /* Make wrapper a positioning context for the absolute label */ .srs-home-meet-our-sponsors-wrapper{ position: relative; } /* Add top padding so the absolute label doesn't overlap logos */ .srs-home-meet-our-sponsors-wrapper .gdlr-core-pbf-wrapper-container{ position: relative; padding-top: 0px; } /* The "Meet Our Sponsors" label */ .srs-home-meet-our-sponsors-wrapper .srs-meet_our_sponsors_label { position: absolute; top: -10px; left: 20px; z-index: 5; padding: 0 !important; margin: 0 !important; } .srs-home-meet-our-sponsors-wrapper .srs-meet_our_sponsors_label p { margin: 0 !important; font-family: Roboto, sans-serif; font-size: 13px; font-weight: 700; height: 22.0938px; letter-spacing: 1.56px; line-height: 22.1px; text-transform: uppercase; color: #dbdbdb; } /* --------------------------------------------------------- Force grid behavior: 4 columns desktop + tablet, 2 mobile --------------------------------------------------------- */ /* Ensure the columns align nicely (GoodLayers sometimes floats) */ .srs-home-meet-our-sponsors-wrapper .gdlr-core-pbf-wrapper-container{ display: flex; flex-wrap: wrap; align-items: center; } /* The label should take the full row, but remain absolutely positioned */ .srs-home-meet-our-sponsors-wrapper .srs-meet_our_sponsors_label{ width: auto; } /* Base: 4 columns (desktop + tablet) */ .srs-home-meet-our-sponsors-wrapper .gdlr-core-pbf-column.gdlr-core-column-15{ width: 25% !important; flex: 0 0 25%; } /* Mobile: 2 columns */ @media (max-width: 767px){ .srs-home-meet-our-sponsors-wrapper .gdlr-core-pbf-column.gdlr-core-column-15{ width: 50% !important; flex: 0 0 50%; } } /* --------------------------------------------------------- Logo sizing: max 150px on desktop (and generally behave) --------------------------------------------------------- */ /* Center the image and limit its size */ .srs-home-meet-our-sponsors-wrapper .gdlr-core-image-item-wrap img{ max-height: 150px; width: 100%; height: auto; display: inline-block; } /* Optional: reduce max size slightly on smaller screens */ @media (max-width: 767px){ .srs-home-meet-our-sponsors-wrapper .gdlr-core-image-item-wrap img{ max-width: 150px; /* keep 150 if you want; drop to 130 if needed */ } } /* Remove extra bottom padding GoodLayers adds around the image items */ .srs-home-meet-our-sponsors-wrapper .gdlr-core-image-item{ padding-bottom: 0 !important; } /* Optional: tighten column spacing a bit */ .srs-home-meet-our-sponsors-wrapper .srs-meet-sponsors-column{ padding-top: 10px; padding-bottom: 10px; } /* Footer */ div#block-4.bigslam-widget { margin-bottom: 30px; } .srs-scoreboard-page .wpDataTablesWrapper .dt-buttons .DTTT_button, .srs-scoreboard-page .wpDataTablesWrapper .dt-buttons button { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 10px !important; margin-left: 4px!important; margin-right: 4px !important; } .srs-scoreboard-page .wpDataTablesWrapper .dt-buttons button:first-child { margin-left: 6px; margin-right: 6px; } .srs-scoreboard-page .wpDataTablesWrapper .dt-buttons .DTTT_button, .srs-scoreboard-page .wpDataTablesWrapper .dt-buttons button { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 10px !important; margin: 0px 4px 10px !important; }