/** * Template Name: MyResume * Template URL: https://bootstrapmade.com/free-html-bootstrap-template-my-resume/ * Updated: Jun 29 2024 with Bootstrap v5.3.3 * Author: BootstrapMade.com * License: https://bootstrapmade.com/license/ */ /*-------------------------------------------------------------- # Font & Color Variables # Help: https://bootstrapmade.com/color-system/ --------------------------------------------------------------*/ /* Fonts */ :root { --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --heading-font: "Raleway", sans-serif; --nav-font: "Poppins", sans-serif; } /* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */ :root { --background-color: #ffffff; /* Background color for the entire website, including individual sections */ --default-color: #272829; /* Default color used for the majority of the text content across the entire website */ --heading-color: #45505b; /* Color for headings, subheadings and title throughout the website */ --accent-color: #0563bb; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */ --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */ --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */ } /* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */ :root { --nav-color: #45505b; /* The default color of the main navmenu links */ --nav-hover-color: #0563bb; /* Applied to main navmenu links when they are hovered over or active */ --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */ --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */ --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */ --nav-dropdown-hover-color: #0563bb; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */ } /* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */ .light-background { --background-color: #f9f9f9; --surface-color: #ffffff; } .dark-background { --background-color: #060606; --default-color: #ffffff; --heading-color: #ffffff; --surface-color: #252525; --contrast-color: #ffffff; } /* Smooth scroll */ :root { scroll-behavior: smooth; } /*-------------------------------------------------------------- # General Styling & Shared Classes --------------------------------------------------------------*/ body { color: var(--default-color); background-color: var(--background-color); font-family: var(--default-font); font-family: 'Poppins', 'Tenorite', sans-serif; } a { color: var(--accent-color); text-decoration: none; transition: 0.3s; } a:hover { color: color-mix(in srgb, var(--accent-color), transparent 25%); text-decoration: none; } h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-family: var(--heading-font); } /* PHP Email Form Messages ------------------------------*/ .php-email-form .error-message { display: none; background: #df1529; color: #ffffff; text-align: left; padding: 15px; margin-bottom: 24px; font-weight: 600; } .php-email-form .sent-message { display: none; color: #ffffff; background: #059652; text-align: center; padding: 15px; margin-bottom: 24px; font-weight: 600; } .php-email-form .loading { display: none; background: var(--surface-color); text-align: center; padding: 15px; margin-bottom: 24px; } .php-email-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid var(--accent-color); border-top-color: var(--surface-color); animation: php-email-form-loading 1s linear infinite; } @keyframes php-email-form-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*-------------------------------------------------------------- # Global Header --------------------------------------------------------------*/ .header { color: var(--default-color); position: fixed; top: 0; left: 0; bottom: 0; padding: 0 15px; transition: all ease-in-out 0.3s; overflow-y: auto; z-index: 997; min-width: 200px; } @media (max-width: 1199px) { .header { background-color: var(--background-color); border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); width: 300px; left: -100%; } } @media (min-width: 1200px) and (max-width: 1600px) { .header~main { margin-left: 160px; } .header~main .hero { margin-left: -160px; width: 100vw; } } /* When header is present, keep profile-page aligned with main content */ .header~main .profile-page { margin-left: 0; width: 100%; } .header.header-show { left: 0; } .header .header-toggle { color: var(--contrast-color); background-color: var(--accent-color); font-size: 22px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; position: fixed; top: 15px; right: 15px; z-index: 9999; transition: background-color 0.3s; } @media (min-width: 1200px) { .header .header-toggle { display: none !important; } } .header .header-toggle:hover { color: var(--contrast-color); background-color: color-mix(in srgb, var(--accent-color) 90%, white 15%); } /*-------------------------------------------------------------- # Navigation Menu --------------------------------------------------------------*/ .navmenu { display: flex; flex-direction: column; padding: 0; z-index: 9997; } .navmenu ul { list-style: none; padding: 0 0 20px 0; margin: 0; width: 140px; } .navmenu a, .navmenu a:focus { color: var(--nav-color); font-family: var(--nav-font); display: flex; align-items: center; padding: 10px 18px; margin-bottom: 8px; font-size: 15px; border-radius: 50px; background: color-mix(in srgb, var(--default-color), transparent 92%); height: 56px; width: 100%; overflow: hidden; transition: 0.3s; } .navmenu a i, .navmenu a:focus i { font-size: 20px; } .navmenu a span, .navmenu a:focus span { padding: 0 5px 0 7px; font-size: calc(15px + (100% - 36px) / 20); } @media (min-width: 992px) { .navmenu a, .navmenu a:focus { max-width: 56px; } .navmenu a span, .navmenu a:focus span { display: none; } } .navmenu a:hover, .navmenu .active, .navmenu .active:focus, .navmenu li:hover>a { color: var(--contrast-color); background: var(--nav-hover-color); } .navmenu a:hover, .navmenu li:hover>a { max-width: 100%; color: var(--contrast-color); } /* Admin page overrides - highlight nav in admin color */ body.admin-page { --nav-hover-color: #fcba03; --accent-color: #fcba03; } body.admin-page section, body.admin-page .section { background-color: transparent; } .navmenu a:hover span, .navmenu li:hover>a span { display: block; } @media (max-width: 768px) { .navmenu ul { width: 100%; } } /*-------------------------------------------------------------- # Global Footer --------------------------------------------------------------*/ .footer { color: var(--default-color); background-color: var(--background-color); font-size: 14px; text-align: center; padding: 30px 0; position: relative; } .footer h3 { font-size: 36px; font-weight: 700; position: relative; padding: 0; margin: 0 0 15px 0; } .footer p { font-size: 15; font-style: italic; padding: 0; margin: 0 0 30px 0; } .footer .social-links { margin: 0 0 30px 0; } .footer .social-links a { font-size: 16px; display: flex; align-items: center; justify-content: center; background: var(--accent-color); color: var(--contrast-color); line-height: 1; margin: 0 4px; border-radius: 50%; text-align: center; width: 36px; height: 36px; transition: 0.3s; } .footer .social-links a:hover { background: color-mix(in srgb, var(--accent-color), transparent 20%); text-decoration: none; } .footer .copyright { padding-top: 25px; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); } .footer .credits { font-size: 13px; padding-top: 5px; } /*-------------------------------------------------------------- # Preloader --------------------------------------------------------------*/ #preloader { position: fixed; inset: 0; z-index: 999999; overflow: hidden; background: var(--background-color); transition: all 0.6s ease-out; } /* Leaderboard overrides moved from leaderboard.astro */ .table > :not(caption) > * > * { padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 6px !important; padding-right: 6px !important; box-shadow: none !important; background-clip: padding-box !important; line-height: 1 !important; height: auto !important; } .table td, .table th { padding-top: 0 !important; padding-bottom: 0 !important; height: auto !important; } /* Compare selects and pop-out — scoped to statistics page */ .statistics-main .compare-row { display:flex; align-items:center; justify-content:center; } .statistics-main .statistics__compare { width: 100%; padding: 8px 12px; border-radius: 8px; min-width: 160px; } .statistics-main .statistics__compare-a { border: 2px solid rgba(5,99,187,0.9); box-shadow: 0 0 0 3px rgba(5,99,187,0.08); } .statistics-main .statistics__compare-b { border: 2px solid rgba(220,53,69,0.9); box-shadow: 0 0 0 3px rgba(220,53,69,0.06); } .statistics-main .statistics__compare:focus { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 12%, transparent); } /* BEM-scoped compare selects used in the template */ .statistics__compare { width: 100%; padding: 8px 12px; border-radius: 8px; min-width: 160px; } .statistics__compare-a { border: 2px solid rgba(5,99,187,0.9); box-shadow: 0 0 0 3px rgba(5,99,187,0.08); } .statistics__compare-b { border: 2px solid rgba(220,53,69,0.9); box-shadow: 0 0 0 3px rgba(220,53,69,0.06); } .statistics__compare:focus { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 12%, transparent); } .statistics-main .compare-vs { font-weight:700; color: #333; padding: 0 6px; } @media (max-width: 576px) { .statistics-main .compare-row { flex-direction: column; } .statistics-main .compare-select { width: 100%; margin-bottom: 6px; } .statistics-main .compare-vs { margin: 6px 0; } } /* stacked compare controls */ .statistics-main .compare-stack { display:flex; flex-direction:column; align-items:center; } /* center panel pop-out animation */ .statistics-main #stats-center-card.pop-out { transform: translateY(-6px) scale(1.02); box-shadow: 0 8px 24px rgba(15,23,42,0.12); transition: transform 220ms ease, box-shadow 220ms ease; } .statistics-main #stats-center-card { transition: transform 220ms ease, box-shadow 220ms ease; } .table > thead > tr > th { min-height: 18px !important; height: 18px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Force 19px line-height/height for leaderboard rows (override bootstrap/reset rules) */ #leaderboard .table > tbody > tr > td, #leaderboard .table > thead > tr > th { line-height: 19px !important; min-height: 19px !important; height: 19px !important; } /* Stronger override: pin exact cell box sizing and remove extra vertical padding from nested elements */ #leaderboard .lb-table tbody tr, #leaderboard .lb-table tbody tr td, #leaderboard .lb-table thead tr th, #leaderboard .lb-table tbody tr .expand-cell, #leaderboard .lb-table tbody tr .rank-cell, #leaderboard .lb-table tbody tr .points-cell, #leaderboard .lb-table tbody tr .roster-cell { box-sizing: border-box !important; line-height: 19px !important; height: 19px !important; min-height: 19px !important; padding-top: 2px !important; padding-bottom: 2px !important; vertical-align: middle !important; } /* Also explicitly target the season and tournament tables in case vendor styles are applied by id */ #tournament-table tbody tr, #tournament-table tbody tr td, #season-table tbody tr, #season-table tbody tr td { line-height: 19px !important; height: 19px !important; min-height: 19px !important; } /* Prevent inner elements (svg, div, p) from expanding row height */ #leaderboard .lb-table tbody td * { line-height: 19px !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .table .details-table td, .table .details-table th { padding-top: 2px !important; padding-bottom: 2px !important; height: auto !important; } /* -------------------------------------------------- Statistics animations (issue #17) - Use opacity + transform only to avoid layout thrash - Respect prefers-reduced-motion -------------------------------------------------- */ .statistics__table-container, .statistics__metric-row { transition: opacity 200ms ease, transform 200ms ease; will-change: opacity, transform; } /* Outgoing state: fade/slide up slightly */ .statistics__table-container.anim-out, .statistics__metric-row.anim-out { opacity: 0; transform: translateY(-8px); pointer-events: none; } .profile-page { --profile-hero-height: 420px; position: relative; overflow: visible; min-height: var(--profile-hero-height); /* Do not pad top: allow content to flow over the fixed hero */ } .profile-page__bg { position: absolute; left: 0; top: 0; width: 100%; height: var(--profile-hero-height); object-fit: cover; display: block; filter: brightness(0.65); z-index: 1; pointer-events: none; } .profile-page .section-title { position: absolute; left: 0; top: 0; right: 0; height: var(--profile-hero-height); display: flex; align-items: center; justify-content: center; text-align: center; z-index: 3; pointer-events: none; } .profile-page-shell { display:flex; align-items:center; justify-content:flex-start; margin-top: calc(var(--profile-hero-height) * -0.5); } .profile-page-tabs { display:flex; gap:8px; } .profile-page-tab { background: color-mix(in srgb, var(--surface-color) 96%, transparent); border: 1px solid color-mix(in srgb, var(--default-color) 92%, transparent); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-weight:600; } .profile-page-tab.active { background: var(--accent-color); color: var(--contrast-color); box-shadow: 0 6px 18px rgba(5,99,187,0.12); } .profile-page-panel { margin-top: 18px; } .profile-page-pane { background: var(--surface-color); padding: 18px; border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,0.06); } @media (max-width: 991px) { .profile-page .section-title { left: 24px; top: 28px } .profile-page__bg { height: 200px } .profile-page-shell { margin-top: -28px } } /* Page-scoped profile hero styles (do not modify global .profile selectors) */ .profile-page { --profile-hero-height: 420px; position: relative; overflow: visible; min-height: var(--profile-hero-height); } .profile-page .profile__bg { position: absolute; left: 0; top: 0; width: 100%; height: var(--profile-hero-height); object-fit: cover; display: block; filter: brightness(0.65); z-index: 1; pointer-events: none; } .profile-page .section-title { position: absolute; left: 0; top: 0; right: 0; height: var(--profile-hero-height); display: flex; align-items: center; justify-content: center; text-align: center; z-index: 3; pointer-events: none; } .profile-page .container, .profile-page .profile-shell { position: relative; z-index: 3; } @media (max-width: 991px) { .profile-page { --profile-hero-height: 200px; padding-top: var(--profile-hero-height); } .profile-page .section-title { position: relative; inset: auto; text-align: left; padding: 12px 20px; height: auto; } .profile-page .profile__bg { height: var(--profile-hero-height); position: fixed; top: 0; left: 0; } .profile-page .profile-shell { margin-top: calc(var(--profile-hero-height) * -0.14); } } /* Incoming state: start slightly lower and invisible, then remove .show to animate in */ .statistics__table-container.anim-in, .statistics__metric-row.anim-in { opacity: 0; transform: translateY(8px); } .statistics__table-container.anim-in.show, .statistics__metric-row.anim-in.show { opacity: 1; transform: none; } /* Faster micro-duration for center card pop-out interaction already defined; align durations */ .statistics-main #stats-center-card.pop-out { transition-duration: 220ms; } @media (prefers-reduced-motion: reduce) { .statistics__table-container, .statistics__metric-row, .statistics-main #stats-center-card { transition: none !important; transform: none !important; opacity: 1 !important; } } /* Statistics page: enforce 60/40 layout on large screens and equal-height cards */ /* Layout for statistics main row (also apply to unscoped classes used in the template) */ .statistics-main .statistics__main-row, .statistics__main-row { display: flex; gap: 20px; align-items: stretch; } .statistics-main .statistics__left, .statistics__left { flex: 0 0 60%; max-width: 60%; } .statistics-main .statistics__right, .statistics__right { flex: 0 0 40%; max-width: 40%; } .statistics-main .statistics__left .card, .statistics-main .statistics__right .card, .statistics__left .card, .statistics__right .card { height: 100%; display: flex; flex-direction: column; } .statistics-main .statistics__left .table-responsive, .statistics__left .table-responsive { flex: 1 1 auto; overflow: auto; } /* Ensure compare radar and table line up visually */ #radar-container { min-height: 360px; } .statistics-main .statistics__table-container { height: 100%; display: flex; flex-direction: column; } /* Table font sizing for compact stats view */ .statistics-main table { font-size: 0.78rem; } .statistics-main table td, .statistics-main table th { padding: 6px 8px; } @media (max-width: 991.98px) { /* small screens: stack the columns */ .statistics-main .statistics__main-row, .statistics__main-row { flex-direction: column; } .statistics-main .statistics__left, .statistics-main .statistics__right, .statistics__left, .statistics__right { max-width: 100%; flex: 0 0 100%; } } .statistics__metric-row { display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; } .statistics__metric-card { background: var(--surface-color); border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; padding: 10px 12px; min-width: 140px; flex: 1 1 160px; box-shadow: 0 6px 18px rgba(15,23,42,0.04); display: flex; flex-direction: column; align-items: center; text-align: center; } .statistics__metric-card .mc-label { font-size: 0.78rem; color:#444; margin-bottom:6px; font-weight:600; } .statistics__metric-card .mc-value { font-size:1.25rem; font-weight:700; color: #17202a; } .statistics__metric-card .mc-sub { font-size:0.82rem; color: #2a9d45; margin-top:6px; } .statistics__metric-card .mc-bar { width:100%; height:8px; background:#eee; border-radius:4px; margin-top:8px; position:relative; } .statistics__metric-card .mc-bar .mc-fill { position:absolute; left:0; top:0; bottom:0; height:100%; background:linear-gradient(90deg,#198754,#20c997); border-radius:4px; transition: width 220ms ease, left 220ms ease; } .statistics__metric-card .mc-bar .mc-fill--red { background: linear-gradient(90deg,#dc3545,#b02a37); } .statistics__metric-card .mc-bar .mc-fill--green { background: linear-gradient(90deg,#198754,#20c997); } /* Metric card rank (large ordinal) and green value styling to match design */ .statistics__metric-card .mc-rank { font-size: 2.6rem; font-weight: 800; color: #17202a; /* keep ordinal rank dark */ margin-bottom: 4px; } .statistics__metric-card .mc-value--green { color: #198754; /* bootstrap success green */ font-size: 1.6rem; font-weight: 800; margin-top: 6px; } .statistics__metric-card .mc-value--red { color: #dc3545; /* bootstrap danger red */ font-size: 1.6rem; font-weight: 800; margin-top: 6px; } /* Average marker: slim vertical bar placed relative to the .mc-bar */ .statistics__metric-card .mc-average { position: absolute; top: 50%; transform: translateY(-50%); left: 50%; width: 2px; height: 18px; background: rgba(0,0,0,0.22); border-radius: 2px; } /* metric tooltip */ .metric-tooltip { position: fixed; z-index: 99999; background: rgba(0,0,0,0.85); color: #fff; padding: 8px 10px; border-radius: 6px; font-size: 13px; display: none; width: 200px; pointer-events: none; } /* Small tweak: ensure the rank doesn't push layout on small screens */ @media (max-width: 575.98px) { .statistics__metric-card .mc-rank { font-size: 1.6rem; } .statistics__metric-card .mc-value--green { font-size: 1.1rem; } .statistics__metric-card .mc-value--red { font-size: 1.1rem; } .statistics__metric-card .mc-average { top: -4px; height: 16px; width: 10px; } } @media (max-width: 575.98px) { .statistics__metric-row { gap:8px; } .statistics__metric-card { padding:8px; min-width: 120px; font-size: 0.9rem; } .statistics__metric-card .mc-value { font-size:1rem; } } /* Statistics page font scoping: use site-designated fonts for consistency */ .statistics-main { font-family: var(--default-font); color: var(--default-color); } .statistics-main h2, .statistics-main h3, .statistics-main h4, .statistics-main h5, .statistics-main h6 { font-family: var(--heading-font); color: var(--heading-color); margin-bottom: 0.5rem; } /* Cards and metric labels should use heading/font weights similar to leaderboard */ .statistics-main .card, .statistics-main .statistics__card, .statistics-main .leaderboard-title { font-family: var(--default-font); } .statistics-main .statistics__card > div:first-child, .statistics-main #stats-center-card h5, .statistics-main .leaderboard-title { font-family: var(--heading-font); font-weight: 600; } /* Table headings and cells use compact sizing but site fonts */ .statistics-main table, .statistics-main table th, .statistics-main table td { font-family: var(--default-font); color: var(--default-color); } /* Slightly increase table header weight for readability */ .statistics-main table thead th { font-weight: 600; color: var(--heading-color); } .leaderboard-panel { background: rgba(5, 99, 187, 0.06); border-radius: 12px; padding: 10px; border: 1px solid rgba(5, 99, 187, 0.12); margin-bottom: 12px; } /* Compact user-only leaderboard panel */ #user-leaderboard-compact { padding: 8px; } #user-leaderboard-compact .table.lb-table.compact { margin-bottom: 0; border: none; } #user-leaderboard-compact .user-compact-row td { vertical-align: middle; padding-top: 6px !important; padding-bottom: 6px !important; } #user-leaderboard-compact .table.lb-table.compact thead th { font-size: 0.72rem; padding: 6px 8px; } #user-leaderboard-compact .small { font-size: 0.72rem !important; } /* Headings: make My Rosters and Leaderboard 1.25rem */ .event-card__meta h4, .leaderboard-title { font-size: 1.25rem; margin: 0 0 6px 0; } /* Ensure single-line small summaries (like Most Money) do not wrap */ .single-line-summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; max-width: 100%; } /* Center the chevron vertically within the expand cell */ .expand-cell .expand-toggle, #leaderboard .expand-cell .expand-toggle { display: inline-flex; align-items: center; height: 19px; } /* Ensure compact panel rows mimic main table layout but tighter */ #user-leaderboard-compact .lb-table.compact tbody tr.compact-user-row, #user-leaderboard-compact .lb-table.compact tbody tr.compact-user-row td { line-height: 19px !important; min-height: 19px !important; height: 19px !important; padding-top: 2px !important; padding-bottom: 2px !important; } #user-leaderboard-compact .lb-table.compact td.expand-cell { width: 30px; } #leaderboard .lb-table td.expand-cell { padding-left: 8px !important; padding-right: 4px !important; } #user-leaderboard-compact .lb-table.compact td.rank-cell { width: 60px; font-weight: 600; } #user-leaderboard-compact .lb-table.compact td.points-cell { width: 80px; text-align: right; } #user-leaderboard-compact .expand-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; } #leaderboard .expand-toggle { margin-left: 2px; } #user-leaderboard-compact .caret-icon { width: 14px; height: 14px; } /* Accent column: very slim, default to surface so it blends with rows; use accent color for user's rows */ #leaderboard .lb-table td.accent-cell, #user-leaderboard-compact .lb-table td.accent-cell { width: 4px; min-width: 4px; padding: 0; border: 0; background: var(--surface-color); } /* Stronger enforcement: prevent vendor/table auto-layout from expanding the accent column */ #leaderboard .lb-table, #user-leaderboard-compact .lb-table { table-layout: fixed !important; } #leaderboard .lb-table th.accent-cell, #leaderboard .lb-table td.accent-cell, #user-leaderboard-compact .lb-table th.accent-cell, #user-leaderboard-compact .lb-table td.accent-cell { width: 4px !important; min-width: 4px !important; max-width: 4px !important; padding: 0 !important; border: 0 !important; font-size: 0 !important; line-height: 0 !important; } /* Color the accent for rows that belong to the current user using the theme accent */ #leaderboard .lb-table tbody tr.is-my-roster:not(.golfer-details-row) td.accent-cell, #user-leaderboard-compact .lb-table tbody tr.is-my-roster:not(.golfer-details-row) td.accent-cell { background: var(--accent-color); /* #0563bb */ width: 4px !important; min-width: 4px !important; max-width: 4px !important; } /* Ensure the caret SVG is vertically centered relative to the 19px row height */ #leaderboard .expand-toggle svg.caret-icon, #user-leaderboard-compact .expand-toggle svg.caret-icon { display: inline-block; vertical-align: middle; transform: translateY(0.5px); } /* Lighter row separators for leaderboard tables */ #leaderboard .lb-table tbody tr { border-bottom: 1px solid rgba(0,0,0,0.06); /* very light black */ } #leaderboard .lb-table tbody tr:hover { border-bottom-color: rgba(0,0,0,0.09); } /* Align header cells by shared class names so compact and main tables match */ #leaderboard thead th.expand-cell, #leaderboard thead th.rank-cell, #leaderboard thead th.movement-cell, #leaderboard thead th.roster-cell, #leaderboard thead th.points-cell { padding: 6px 8px !important; } #leaderboard thead th.expand-cell { width: 30px; } #leaderboard thead th.rank-cell { width: 60px; } #leaderboard thead th.movement-cell { width: 80px; } /* Issue #18: On smaller screens hide the movement column to avoid overlap and give more horizontal space to roster name and points. */ @media (max-width: 768px) { /* hide movement header and cells */ #leaderboard thead th.movement-cell, #leaderboard .lb-table tbody tr td:nth-child(4) { display: none !important; } /* compress rank and points columns slightly to accommodate space */ #leaderboard thead th.rank-cell { width: 48px; } #leaderboard thead th.points-cell, #leaderboard .lb-table tbody tr td.points-cell { width: 120px !important; min-width: 120px !important; } } /* Center the Points header and its data so header aligns with table cells */ /* Points column sizing and alignment: widen to fit ~20 characters and center content */ #leaderboard thead th.points-cell, #leaderboard .lb-table tbody tr td.points-cell, #tournament-table thead th.points-cell, #tournament-table tbody tr td.points-cell, #season-table thead th.points-cell, #season-table tbody tr td.points-cell, #user-leaderboard-compact .lb-table.compact thead th.points-cell, #user-leaderboard-compact .lb-table.compact tbody tr td.points-cell { width: 160px !important; min-width: 160px !important; text-align: center !important; } /* Visual highlight for user's rows: subtle left accent and soft background */ /* Use an inset left accent on the first cell instead of a ::before on the TR (some browsers create anonymous table cells for tr::before which can shift layout). */ #leaderboard .lb-table tbody tr.is-my-roster:not(.golfer-details-row) { background: rgba(5,99,187,0.04); /* slightly more visible light blue tint */ } #leaderboard .lb-table tbody tr.is-my-roster:not(.golfer-details-row) td { font-weight: 600; } /* Apply the inset accent to both main and compact user tables, but never to inserted detail rows */ /* legacy first-child accent removed in favor of dedicated .accent-cell column */ .leaderboard-shell { background: #f5f7fb; border-radius: 14px; padding: 14px; border: 1px solid rgba(208, 214, 229, 0.7); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06); } .leaderboard-tabs { display: inline-flex; gap: 8px; margin-bottom: 14px; background: rgba(5, 99, 187, 0.08); padding: 4px; border-radius: 999px; } .leaderboard-tab { appearance: none; border: none !important; background: transparent; color: #0563bb; font-weight: 600; font-size: 0.76rem; letter-spacing: 0.04em; padding: 6px 18px; border-radius: 999px; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } .leaderboard-tab.active { background: #0563bb; color: #ffffff; box-shadow: 0 4px 10px rgba(5, 99, 187, 0.25); } .leaderboard-tab:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; } .event-card { background: #ffffff; border-radius: 12px; border: 1px solid #dfe3ee; padding: 12px; display: flex; flex-direction: column; gap: 12px; } .event-card__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .event-select-group { display: flex; flex-wrap: wrap; gap: 8px; } .event-card .dropdown { position: relative; } .event-card .form-select { min-width: 160px; border-radius: 999px; border: 1px solid #d4daea; background-color: #ffffff; font-size: 0.78rem; padding: 0.35rem 1.8rem 0.35rem 0.85rem; box-shadow: none !important; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none; } .event-card .form-select:focus { border-color: #0563bb; box-shadow: 0 0 0 0.2rem rgba(5, 99, 187, 0.12); } .event-card .dropdown::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border: 2px solid #4a5364; border-top: none; border-left: none; transform: translateY(-50%) rotate(45deg); pointer-events: none; transition: border-color 0.2s ease; } .event-card .dropdown:focus-within::after { border-color: #0563bb; } .search-box { max-width: 220px; width: 100%; } .search-box input { border-radius: 999px; padding: 0.38rem 0.9rem; border: 1px solid #d4daea; background-color: #ffffff; font-size: 0.78rem; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .search-box input::placeholder { color: #7a8394; } .search-box input:focus { border-color: #0563bb; box-shadow: 0 0 0 0.2rem rgba(5, 99, 187, 0.12); } /* ...rest of moved CSS omitted in this patch preview... */ #preloader:before { content: ""; position: fixed; top: calc(50% - 30px); left: calc(50% - 30px); border: 6px solid #ffffff; border-color: var(--accent-color) transparent var(--accent-color) transparent; border-radius: 50%; width: 60px; height: 60px; animation: animate-preloader 1.5s linear infinite; } @keyframes animate-preloader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*-------------------------------------------------------------- # Scroll Top Button --------------------------------------------------------------*/ .scroll-top { position: fixed; visibility: hidden; opacity: 0; right: 15px; bottom: -15px; z-index: 99999; background-color: var(--accent-color); width: 44px; height: 44px; border-radius: 50px; transition: all 0.4s; } .scroll-top i { font-size: 24px; color: var(--contrast-color); line-height: 0; } /* ----------------------------- Admin / shared table styles ----------------------------- */ .ns-table, .ns-table th, .ns-table td { font-family: 'Poppins', 'Tenorite', var(--default-font); font-size: 0.95rem; } .ns-table thead th { background: #d5dbe6; background: color-mix(in srgb, #0b2447 25%, #ffffff 75%); color: #0b2447; font-weight: 600; border-bottom: 1px solid color-mix(in srgb, #0b2447 35%, #ffffff 65%); } /* Responsive adjustments for admin users table */ @media (max-width: 768px) { #users-table thead th:nth-child(3), #users-table thead th:nth-child(5), #users-table thead th:nth-child(6), #users-table tbody td:nth-child(3), #users-table tbody td:nth-child(5), #users-table tbody td:nth-child(6) { display: none; } #users-table thead th:nth-child(4), #users-table tbody td:nth-child(4), #users-table thead th:nth-child(7), #users-table tbody td:nth-child(7) { text-align: center; } #users-table tbody td:nth-child(7) .btn { padding: 6px 10px; } .admin-hero .section-title h2, .admin-hero .section-title p { display: none; } } /* compact search container used on admin tables */ .search-container { width: 20%; min-width: 160px; } .user-search { background: #f2f2f4; border: 1px solid #ccc; } .users-debug { min-height: 18px; color: #c53030; } /* badge for admin role */ .badge-admin { background: #fcba03; color: #000; } /* header fill for admin pages */ /* Admin header color is opt-in via a utility class to avoid globally forcing a dark header This keeps non-admin pages unaffected while still allowing admin pages to opt-in. */ .admin-header-theme header#header { background: #0b2447; color: #ffffff; } .admin-header-theme header#header .nav-link, .admin-header-theme header#header .nav-link span, .admin-header-theme header#header .nav-link i { color: #ffffff !important; } .admin-header-theme header#header .nav-link.active { color: #fcba03 !important; } /* Admin hero image container: constrains big background images so they don't push content down */ .admin-hero { position: relative; width: 100%; min-height: 260px; /* allow space for headings and filter controls */ height: auto; overflow: visible; border-radius: 6px; margin-bottom: 2rem; padding: 3rem 0 3rem; display: flex; align-items: flex-start; justify-content: center; } @media (max-width: 768px) { .admin-hero { min-height: 220px; padding: 2.5rem 0 2rem; } } .admin-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0.9; } /* Lightweight modal helpers used by admin pages */ .ns-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1050; align-items: flex-start; justify-content: center; padding-top: 4rem; } .ns-modal[aria-hidden="false"] { display: flex; } #add-user-modal[aria-hidden="false"] { align-items: center; /* center vertically */ } #edit-modal[aria-hidden="false"] { align-items: center; } .ns-modal-dialog { max-width: 600px; margin: 0 auto; pointer-events: auto; } /* Larger dialog for the Add User register-style modal */ #add-user-modal .ns-modal-dialog { max-width: 760px; pointer-events: auto; } /* Ensure the dialog is a positioning context and position the modal-level close button inside the dialog */ #add-user-modal > .ns-modal-dialog { position: relative; } #add-user-modal .middle { position: relative; } #add-user-modal .middle > #add-modal-close { position: absolute; right: 12px; top: 12px; z-index: 3000; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,0.98); box-shadow: 0 4px 10px rgba(0,0,0,0.12); padding: 0; } #add-user-modal .middle > #add-modal-close i { font-size: 16px; } /* Make the add-user modal centered and single-column (no logo) */ #add-user-modal .register-container, #add-user-modal .register-form-wrapper { display: block; } #edit-modal .register-container, #edit-modal .register-form-wrapper { display: block; } #edit-modal .register-container, #edit-modal .register-form-wrapper { display: block; } #add-user-modal .middle { width: 416px; /* reduced ~20% for tighter layout */ max-width: 92%; margin: 0 auto; background-color: rgba(255,255,255,0.98); border-radius: 12px; padding: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); } #edit-modal .middle { width: 416px; max-width: 92%; margin: 0 auto; background-color: rgba(255,255,255,0.98); border-radius: 12px; padding: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); position: relative; } #edit-modal .middle { width: 416px; max-width: 92%; margin: 0 auto; background-color: rgba(255,255,255,0.98); border-radius: 12px; padding: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); position: relative; } /* Admin-specific: remove the default 1em margin applied to auth inputs so the add-user modal fields sit flush with their icons/buttons */ #add-user-modal .middle #register-box form input[type="email"], #add-user-modal .middle #register-box form input[type="password"] { margin-bottom: 0; } #edit-modal .middle #edit-box form input[type="email"], #edit-modal .middle #edit-box form input[type="text"] { margin-bottom: 0; } /* Center form contents and submit button inside the add-user modal */ #add-user-modal .middle #register-box form { display: flex; flex-direction: column; align-items: center; gap: 12px; } #add-user-modal .middle #register-box form fieldset { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; } #add-user-modal .middle #register-box form .d-flex { justify-content: center; } #add-user-modal .middle #register-box form p { width: 100%; } #add-user-modal .middle #register-box form p input { width: calc(100% - 60px); } #edit-modal .middle #edit-box form { display: flex; flex-direction: column; align-items: center; gap: 12px; } #edit-modal .middle #edit-box form fieldset { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; } #edit-modal .middle #edit-box form .d-flex { justify-content: center; } #edit-modal .middle #edit-box form p { width: 100%; } #edit-modal .middle #edit-box form p input { width: calc(100% - 60px); } /* Scoped leaderboard overrides to restore compact header and icon sizes These rules are intentionally specific and scoped to #leaderboard so they don't affect other tables on the site and to beat framework overrides. */ #leaderboard .lb-table { font-size: 0.78rem; /* compact base size for leaderboard */ border-collapse: separate !important; border-spacing: 0 6px !important; } #leaderboard .lb-table thead th { font-size: 0.78rem !important; /* ensure header text stays compact */ line-height: 1.05 !important; padding: 6px !important; height: auto !important; vertical-align: middle !important; } /* Make sure body/heading rules (like h4 at large breakpoints) don't inflate header cells inside leaderboard */ #leaderboard .lb-table thead th h4, #leaderboard .lb-table thead th h3, #leaderboard .lb-table thead th h2 { font-size: 0.78rem !important; margin: 0 !important; line-height: 1 !important; } /* SVG/caret/icon sizing: SVGs within leaderboard header should be small */ #leaderboard .lb-table thead th svg, #leaderboard .lb-table thead th .chakra-icon, #leaderboard .lb-table thead th .bi { width: 16px !important; height: 16px !important; font-size: 16px !important; vertical-align: middle !important; } /* Expand toggle (row chevron) sizing and reset to avoid global button styles */ #leaderboard .lb-table td .expand-toggle, #leaderboard .lb-table td .expand-toggle svg { width: 18px !important; height: 18px !important; } /* Reduce any accidental large line-height in cells */ #leaderboard .lb-table td, #leaderboard .lb-table th { line-height: 1 !important; font-size: 0.78rem !important; padding-top: 6px !important; padding-bottom: 6px !important; } /* Make sure the leaderboard font-family and sizing remain scoped */ #leaderboard, #leaderboard * { font-family: Poppins, Tenorite, var(--default-font) !important; } /* End of leaderboard scoped overrides */ /* Roster builder: align table typography with leaderboard compact sizing */ #roster-builder .table, #roster-builder .table th, #roster-builder .table td { font-size: 0.78rem !important; line-height: 1 !important; } /* Center table cell content vertically and remove outer borders for leaderboard/roster tables */ #leaderboard .lb-table tbody td, #leaderboard .lb-table thead th, #roster-builder .table tbody td, #roster-builder .table thead th { vertical-align: middle !important; } /* Remove external table borders to create card-like rows */ #leaderboard .lb-table, #roster-builder .table { border: none !important; } /* Alternate rows: white and very light blue/grey */ #leaderboard .lb-table tbody tr:nth-child(odd), #roster-builder .table tbody tr:nth-child(odd) { background: #ffffff; } #leaderboard .lb-table tbody tr:nth-child(even), #roster-builder .table tbody tr:nth-child(even) { background: rgba(235, 242, 249, 0.6); /* very light blue/grey */ } /* Keep hover subtle and not override alternating background too aggressively */ #leaderboard .lb-table tbody tr:hover, #roster-builder .table tbody tr:hover { background: rgba(5, 99, 187, 0.06) !important; } #edit-modal .middle #modal-title { margin: 12px 40px 18px 40px; font-weight: 600; color: var(--nav-color); text-align: center; } #edit-modal .middle > #edit-modal-close { position: absolute; right: 12px; top: 12px; z-index: 3000; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,0.98); box-shadow: 0 4px 10px rgba(0,0,0,0.12); padding: 0; } #edit-modal .middle #edit-box form { display: flex; flex-direction: column; align-items: center; gap: 12px; } #edit-modal .middle #edit-box form fieldset { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; } #edit-modal .middle #edit-box form .d-flex { justify-content: center; } #edit-modal .middle #edit-box form p { width: 100%; } #edit-modal .middle #edit-box form p input { width: calc(100% - 60px); } #edit-modal .middle > #edit-modal-close { position: absolute; right: 12px; top: 12px; z-index: 3000; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,0.98); box-shadow: 0 4px 10px rgba(0,0,0,0.12); padding: 0; } /* Hide the logo and the register vertical divider inside the add-user modal */ #add-user-modal .logo { display: none !important; } #add-user-modal .register-form-wrapper #register-box::after { display: none !important; } /* When an admin table overlays the hero image, give it a readable background */ .hero .table-responsive { background: rgba(255,255,255,0.92); padding: 0.75rem; border-radius: 8px; box-shadow: 0 6px 18px rgba(11,36,71,0.12); } .scroll-top:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 20%); color: var(--contrast-color); } .scroll-top.active { visibility: visible; opacity: 1; bottom: 15px; } /*-------------------------------------------------------------- # Disable aos animation delay on mobile devices --------------------------------------------------------------*/ @media screen and (max-width: 768px) { [data-aos-delay] { transition-delay: 0 !important; } } /*-------------------------------------------------------------- # Global Page Titles & Breadcrumbs --------------------------------------------------------------*/ .page-title { --background-color: color-mix(in srgb, var(--default-color), transparent 96%); color: var(--default-color); background-color: var(--background-color); padding: 20px 0; position: relative; } .page-title h1 { font-size: 28px; font-weight: 700; margin: 0; } .page-title .breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0 0 10px 0; margin: 0; font-size: 14px; font-weight: 400; } .page-title .breadcrumbs ol li+li { padding-left: 10px; } .page-title .breadcrumbs ol li+li::before { content: "/"; display: inline-block; padding-right: 10px; color: color-mix(in srgb, var(--default-color), transparent 70%); } /*-------------------------------------------------------------- # Global Sections --------------------------------------------------------------*/ section, .section { color: var(--default-color); background-color: var(--background-color); padding: 60px 0; overflow: clip; } /*-------------------------------------------------------------- # Global Section Titles --------------------------------------------------------------*/ .section-title { text-align: center; padding-bottom: 60px; position: relative; } .section-title h2 { font-size: 32px; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; position: relative; } .section-title h2:before { content: ""; position: absolute; display: block; width: 160px; height: 1px; background: color-mix(in srgb, var(--default-color), transparent 60%); left: 0; right: 0; bottom: 1px; margin: auto; } .section-title h2::after { content: ""; position: absolute; display: block; width: 60px; height: 3px; background: var(--accent-color); left: 0; right: 0; bottom: 0; margin: auto; } .section-title p { margin-bottom: 0; } /*-------------------------------------------------------------- # Hero Section --------------------------------------------------------------*/ .hero { width: 100%; min-height: 100vh; position: relative; padding: 80px 0; display: flex; align-items: center; justify-content: center; } .hero > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; /* object-fit: cover; */ z-index: 1; } .hero::before { content: ""; background: color-mix(in srgb, var(--background-color), transparent 30%); position: absolute; inset: 0; z-index: 2; } .hero .container { position: relative; z-index: 3; } .hero h2 { margin: 0; font-size: 64px; font-weight: 700; } .hero p { margin: 5px 0 0 0; font-size: 26px; } .hero p span { letter-spacing: 1px; border-bottom: 2px solid var(--accent-color); } .hero .social-links { margin-top: 25px; } .hero .social-links a { font-size: 20px; display: inline-block; color: color-mix(in srgb, var(--default-color), transparent 30%); line-height: 1; margin-right: 20px; transition: 0.3s; } .hero .social-links a:hover { color: var(--accent-color); } @media (max-width: 768px) { .hero h2 { font-size: 32px; } .hero p { font-size: 20px; } } /*-------------------------------------------------------------- # Auth hero overrides --------------------------------------------------------------*/ .login-main { padding: 0; margin: 0; } .login-main .hero, .register-hero { position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 0; margin: 0; min-height: 100vh; overflow: hidden; width: auto; margin-left: 0 !important; } .login-main .hero > img, .register-hero > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } /* Standardized hero background utility Use this class on hero/section containers to apply the shared background image and a consistent translucent overlay. This avoids per-page markup that caused overlay inconsistencies. */ /* removed .hero-background utility - hero images are controlled by per-page markup */ /* translucent overlay tuned for auth pages */ .login-main .hero::before, .register-hero::before { background: color-mix(in srgb, var(--background-color), transparent 30%); z-index: 5; pointer-events: none; } /* Statistics page hero - reuse auth hero behavior but allow content to be positioned in a container */ .statistics-main .hero { /* Statistics page should scroll with the document instead of pinning to the viewport. Using relative positioning preserves the background image overlay while allowing the content to extend and the page to scroll on smaller viewports. */ position: relative; padding: 80px 0; margin: 0; min-height: auto; overflow: visible; width: 100%; margin-left: 0 !important; } /* Ensure statistics content fills the site container and isn't constrained by any flex parents */ .statistics-main .statistics__container { display: block !important; width: 100% !important; box-sizing: border-box; } .statistics-main .hero { display: block !important; } .statistics-main .hero > img { /* Fix the image to viewport so it spans the full height of the site and stays behind content */ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; z-index: 1; } .statistics-main .hero::before { content: ''; /* Use fixed positioning so the overlay covers the entire viewport and stays aligned with the background image (which is fixed). */ position: fixed; inset: 0; background: color-mix(in srgb, var(--background-color), transparent 30%); /* Place overlay above the image but beneath page content. Keep it lower than the container's z-index so content remains interactive. */ z-index: 2; pointer-events: none; } /* Ensure the statistics content sits above the overlay */ .statistics-main .statistics__container { position: relative; z-index: 3; } /* Ensure Statistics section title font-size matches leaderboard's section title for parity */ .statistics-main .section-title h2 { font-size: 32px; /* match .section-title h2 */ margin-bottom: 20px; padding-bottom: 20px; } /* Leaderboard background image styling */ .leaderboard.section { position: relative; overflow: visible; } .leaderboard .leaderboard-bg { position: absolute; top: 0; left: 0; width: 100%; min-height: 100vh; height: 100%; object-fit: cover; z-index: 1; } .leaderboard .container, .leaderboard .leaderboard-shell { position: relative; z-index: 3; } /* Add translucent overlay to leaderboard like other hero sections */ .leaderboard::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--background-color), transparent 32%); z-index: 2; pointer-events: none; } /* Hide leaderboard background image to avoid stretching on long tables */ .leaderboard .leaderboard-bg { display: none !important; } /* Pagination control styles for leaderboard */ .pagination-controls { font-size: 0.9rem; } .pagination-controls .form-select-sm { width: auto; display: inline-block; } .pagination-controls .btn-group .btn { min-width: 64px; } /* Profile-page background mirrors leaderboard behavior without touching global .profile selectors */ .profile-page { position: relative; overflow: hidden; } .profile-page .profile-page__bg, .profile-page__bg { position: absolute; top: 0; left: 0; width: 100%; min-height: 50vh; height: 100%; object-fit: cover; z-index: 1; } .profile-page::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--background-color), transparent 32%); z-index: 2; pointer-events: none; } .profile-page .container, .profile-page .profile-page-shell { position: relative; z-index: 3; } /* Mirror leaderboard background behavior for Statistics page */ .statistics.section { position: relative; overflow: visible; } .statistics .statistics-bg { position: absolute; top: 0; left: 0; width: 100%; min-height: 100vh; height: 100%; object-fit: cover; z-index: 1; } .statistics .container, .statistics .stats-left, .statistics .stats-right { position: relative; z-index: 3; } /* Add translucent overlay to statistics like leaderboard */ .statistics::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--background-color), transparent 32%); z-index: 2; pointer-events: none; } /* Ensure radar labels can extend beyond svg without being clipped */ #radar-container { overflow: visible; } /* Radar tooltip (positioned inside #radar-container) */ #radar-tooltip { pointer-events: none; position: absolute; background: rgba(0,0,0,0.8); color: #fff; padding: 6px 8px; border-radius: 6px; font-size: 12px; z-index: 1050; display: none; max-width: 320px; white-space: nowrap; } /* Cap the left stats panel so the right radar can stay visible; allow internal scrolling for the table */ .statistics-main .statistics__left { max-height: 64vh; overflow: hidden; } .statistics-main .statistics__left .table-responsive { max-height: calc(64vh - 120px); overflow: auto; } /* Ensure selected row is visually distinct and keyboard-focusable */ .selected-row { background: rgba(5,99,187,0.08) !important; outline: 2px solid rgba(5,99,187,0.12); } .selected-row:focus { outline: 3px solid rgba(5,99,187,0.16); } /* BEM-scoped container for statistics; keep legacy .stats-container as alias */ .statistics__container { position: relative; z-index: 10; padding-top: 56px; padding-bottom: 28px; padding-left: 8px; padding-right: 8px; } .stats-container { position: relative; z-index: 10; padding-top: 56px; padding-bottom: 28px; padding-left: 8px; padding-right: 8px; } /* clickable small panels on left */ .statistics__card { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .statistics__card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); } .statistics__card.active { outline: 3px solid rgba(5,99,187,0.12); box-shadow: 0 8px 22px rgba(5,99,187,0.12); } /* Responsive: ensure statistics panels stack and fit on small screens */ @media (max-width: 991.98px) { /* Top widgets: ensure they wrap and have consistent spacing */ .statistics-main .row.mb-3 { gap: 8px; } .statistics-main .row.mb-3 .col-6 { flex: 0 0 50%; max-width: 50%; } /* Center table and compare pane should stack vertically on smaller viewports */ .statistics-main .row > .col-lg-8, .statistics-main .row > .col-lg-4 { flex: 0 0 100% !important; max-width: 100% !important; } /* Make center card full width with consistent padding and allow table to scroll horizontally */ #stats-center-card { margin-bottom: 12px; } #stats-center-card .table-responsive { overflow-x: auto; } /* Compare stack: center controls and reduce padding */ .compare-stack { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; } .statistics__compare { min-width: 0 !important; width: 48% !important; } .compare-vs { width: auto; padding: 6px 4px; font-weight:600 } /* Radar container: make responsive and reduce min-height */ #radar-container { min-height: 220px; padding: 8px; } #radar { height: 220px !important; } /* Reduce font size inside table so rows fit better */ #stats-table td, #stats-table th { font-size: 13px; padding: .45rem .4rem; } } @media (max-width: 575.98px) { /* Very small screens: stack widgets single column */ .statistics-main .row.mb-3 .col-6 { flex: 0 0 100%; max-width: 100%; } .compare-select { width: 100% !important; } .compare-stack { flex-direction: column; align-items: stretch; } #radar { height: 200px !important; } /* ensure the hero overlay doesn't crowd top padding */ .stats-container { padding-top: 56px; } } /* (removed large-screen cap to allow site-wide container sizing to control widths) */ .login-container, .register-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; width: auto; } /* Custom form styling */ .login-form-wrapper, .register-form-wrapper { display: flex; justify-content: center; align-items: center; } .login-form-wrapper .middle, .register-form-wrapper .middle { display: flex; width: 720px; max-width: 92%; background-color: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 30px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .login-form-wrapper #login-box, .register-form-wrapper #register-box { /* gradient divider drawn with pseudo-element */ border-right: none; padding: 0px 24px; width: 52%; position: relative; } .login-form-wrapper .logo, .register-form-wrapper .logo { color: #333; font-size: 50px; line-height: 125px; font-weight: bold; width: 48%; text-align: center; display: flex; align-items: center; justify-content: center; padding-left: 16px; } .login-form-wrapper .logo img, .register-form-wrapper .logo img { max-width: 275px; max-height: 275px; width: auto; height: auto; display: block; } /* Ensure only the logo inside the form's .logo shows; hide other copies */ .register-hero img[src$="nflogo_transparent.png"] { display: none !important; } .register-hero .logo img[src$="nflogo_transparent.png"] { display: block !important; position: relative !important; z-index: 25 !important; margin: 0 auto !important; max-width: 275px !important; width: auto !important; height: auto !important; } /* make sure the .logo area centers nicely within the middle layout */ .register-hero .middle { align-items: center; } .register-hero .logo { display: flex; align-items: center; justify-content: center; } /* Gradient divider: thick in the middle, fading toward ends */ .login-form-wrapper #login-box::after, .register-form-wrapper #register-box::after { content: ""; position: absolute; right: -6px; /* allow extra breathing room after increasing logo width */ top: 12%; bottom: 12%; width: 4px; border-radius: 2px; background: linear-gradient(to bottom, rgba(5,99,187,0) 0%, rgba(5,99,187,0.0) 10%, rgba(5,99,187,0.85) 45%, rgba(5,99,187,0.85) 55%, rgba(5,99,187,0.0) 90%, rgba(5,99,187,0) 100%); z-index: 20; } .login-form-wrapper #login-box form, .register-form-wrapper #register-box form { width: 250px; } .login-form-wrapper #login-box form span.fa, .register-form-wrapper #register-box form span.fa { background-color: #0563bb; border-radius: 3px 0px 0px 3px; color: #fff; display: block; float: left; height: 50px; font-size: 24px; line-height: 50px; text-align: center; width: 50px; } .login-form-wrapper #login-box form input, .register-form-wrapper #register-box form input { height: 50px; border: none; font-family: inherit; font-size: 14px; } .login-form-wrapper fieldset, .register-form-wrapper fieldset { padding: 0; border: 0; margin: 0; } .login-form-wrapper #login-box form input[type="email"], .login-form-wrapper #login-box form input[type="password"], .register-form-wrapper #register-box form input[type="email"], .register-form-wrapper #register-box form input[type="password"] { background-color: color-mix(in srgb, var(--default-color), transparent 92%); border-radius: 0px 3px 3px 0px; color: var(--nav-color); margin-bottom: 1em; padding: 0 16px; width: 200px; } .login-form-wrapper #login-box form input[type="submit"], .register-form-wrapper #register-box form input[type="submit"] { border-radius: 3px; background-color: #0563bb; color: #fff; font-weight: bold; text-transform: uppercase; padding: 5px 10px; height: 30px; cursor: pointer; border: none; } .login-form-wrapper #login-box form input[type="submit"]:hover, .register-form-wrapper #register-box form input[type="submit"]:hover { background-color: #0450a0; } .login-form-wrapper .small-text, .register-form-wrapper .small-text { font-size: 12px; color: #333; } .login-form-wrapper a, .register-form-wrapper a { color: #0563bb; text-decoration: none; } .login-form-wrapper a:hover, .register-form-wrapper a:hover { text-decoration: underline; } .login-form-wrapper .clearfix, .register-form-wrapper .clearfix { zoom: 1; } .login-form-wrapper .clearfix:before, .login-form-wrapper .clearfix:after, .register-form-wrapper .clearfix:before, .register-form-wrapper .clearfix:after { content: ' '; display: table; } .login-form-wrapper .clearfix:after, .register-form-wrapper .clearfix:after { clear: both; } .register-form-wrapper .text-center { text-align: center; margin-top: 1em; } @media (max-width: 768px) { .login-form-wrapper .middle, .register-form-wrapper .middle { flex-direction: column; width: 100%; } .login-form-wrapper #login-box, .register-form-wrapper #register-box { border-right: none; border-bottom: none; /* mobile divider handled by pseudo-element */ width: 100%; padding-bottom: 20px; margin-bottom: 20px; } /* create a horizontal gradient divider for stacked layout */ .login-form-wrapper #login-box::after, .register-form-wrapper #register-box::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -2px; height: 4px; border-radius: 2px; background: linear-gradient(to right, rgba(5,99,187,0) 0%, rgba(5,99,187,0.0) 10%, rgba(5,99,187,0.85) 45%, rgba(5,99,187,0.85) 55%, rgba(5,99,187,0.0) 90%, rgba(5,99,187,0) 100%); z-index: 20; } .login-form-wrapper .logo, .register-form-wrapper .logo { width: 100%; font-size: 30px; line-height: 60px; } } .about .content h2 { font-weight: 700; font-size: 24px; } .about .content ul { list-style: none; padding: 0; } .about .content ul li { margin-bottom: 20px; display: flex; align-items: center; } .about .content ul strong { margin-right: 10px; } .about .content ul i { font-size: 16px; margin-right: 5px; color: var(--accent-color); line-height: 0; } /*-------------------------------------------------------------- # Stats Section --------------------------------------------------------------*/ .stats i { background-color: var(--accent-color); color: var(--contrast-color); width: 54px; height: 54px; font-size: 24px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .stats .stats-item { margin-top: 10px; width: 100%; position: relative; text-align: center; z-index: 0; } .stats .stats-item span { font-size: 36px; display: block; font-weight: 700; color: color-mix(in srgb, var(--default-color), transparent 20%); } .stats .stats-item p { padding: 0; margin: 0; color: color-mix(in srgb, var(--default-color), transparent 50%); font-size: 16px; } /*-------------------------------------------------------------- # Skills Section --------------------------------------------------------------*/ .skills .progress { height: 60px; display: block; background: none; border-radius: 0; } .skills .progress .skill { color: var(--heading-color); padding: 0; margin: 0 0 6px 0; text-transform: uppercase; display: block; font-weight: 600; font-family: var(--heading-font); } .skills .progress .skill .val { float: right; font-style: normal; } .skills .progress-bar-wrap { background: color-mix(in srgb, var(--default-color), transparent 90%); height: 10px; } .skills .progress-bar { width: 1px; height: 10px; transition: 0.9s; background-color: var(--accent-color); } /*-------------------------------------------------------------- # Resume Section --------------------------------------------------------------*/ .resume .resume-title { color: var(--heading-color); font-size: 26px; font-weight: 700; margin-top: 20px; margin-bottom: 20px; } .resume .resume-item { padding: 0 0 20px 20px; margin-top: -2px; border-left: 2px solid var(--accent-color); position: relative; } .resume .resume-item h4 { line-height: 18px; font-size: 18px; font-weight: 600; text-transform: uppercase; color: color-mix(in srgb, var(--default-color), transparent 20%); margin-bottom: 10px; } .resume .resume-item h5 { font-size: 16px; padding: 5px 15px; display: inline-block; font-weight: 600; margin-bottom: 10px; } .resume .resume-item ul { padding-left: 20px; } .resume .resume-item ul li { padding-bottom: 10px; } .resume .resume-item:last-child { padding-bottom: 0; } .resume .resume-item::before { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50px; left: -9px; top: 0; background: var(--background-color); border: 2px solid var(--accent-color); } /*-------------------------------------------------------------- # Portfolio Section --------------------------------------------------------------*/ .portfolio .portfolio-filters { padding: 0; margin: 0 auto 20px auto; list-style: none; text-align: center; } .portfolio .portfolio-filters li { cursor: pointer; display: inline-block; padding: 8px 20px 10px 20px; margin: 0; font-size: 15px; font-weight: 500; line-height: 1; margin-bottom: 5px; border-radius: 50px; transition: all 0.3s ease-in-out; font-family: var(--heading-font); } .portfolio .portfolio-filters li:hover, .portfolio .portfolio-filters li.filter-active { color: var(--contrast-color); background-color: var(--accent-color); } .portfolio .portfolio-filters li:first-child { margin-left: 0; } .portfolio .portfolio-filters li:last-child { margin-right: 0; } @media (max-width: 575px) { .portfolio .portfolio-filters li { font-size: 14px; margin: 0 0 10px 0; } } .portfolio .portfolio-item { position: relative; overflow: hidden; } .portfolio .portfolio-item .portfolio-info { opacity: 0; position: absolute; left: 12px; right: 12px; bottom: -100%; z-index: 3; transition: all ease-in-out 0.5s; background: color-mix(in srgb, var(--background-color), transparent 10%); padding: 15px; } .portfolio .portfolio-item .portfolio-info h4 { font-size: 18px; font-weight: 600; padding-right: 50px; } .portfolio .portfolio-item .portfolio-info p { color: color-mix(in srgb, var(--default-color), transparent 30%); font-size: 14px; margin-bottom: 0; padding-right: 50px; } .portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .details-link { position: absolute; right: 50px; font-size: 24px; top: calc(50% - 14px); color: color-mix(in srgb, var(--default-color), transparent 30%); transition: 0.3s; line-height: 0; } .portfolio .portfolio-item .portfolio-info .preview-link:hover, .portfolio .portfolio-item .portfolio-info .details-link:hover { color: var(--accent-color); } .portfolio .portfolio-item .portfolio-info .details-link { right: 14px; font-size: 28px; } .portfolio .portfolio-item:hover .portfolio-info { opacity: 1; bottom: 0; } /*-------------------------------------------------------------- # Services Section --------------------------------------------------------------*/ .services .service-item { background-color: var(--surface-color); box-shadow: 0px 5px 90px 0px rgba(0, 0, 0, 0.1); height: 100%; padding: 60px 30px; text-align: center; transition: 0.3s; border-radius: 5px; } .services .service-item .icon { margin: 0 auto; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; transition: ease-in-out 0.3s; position: relative; } .services .service-item .icon i { font-size: 36px; transition: 0.5s; position: relative; } .services .service-item .icon svg { position: absolute; top: 0; left: 0; } .services .service-item .icon svg path { transition: 0.5s; fill: color-mix(in srgb, var(--default-color), transparent 95%); } .services .service-item h3 { font-weight: 700; margin: 10px 0 15px 0; font-size: 22px; } .services .service-item p { line-height: 24px; font-size: 14px; margin-bottom: 0; } .services .service-item:hover { box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.1); } .services .service-item.item-cyan i { color: #0dcaf0; } .services .service-item.item-cyan:hover .icon i { color: #fff; } .services .service-item.item-cyan:hover .icon path { fill: #0dcaf0; } .services .service-item.item-orange i { color: #fd7e14; } .services .service-item.item-orange:hover .icon i { color: #fff; } .services .service-item.item-orange:hover .icon path { fill: #fd7e14; } .services .service-item.item-teal i { color: #20c997; } .services .service-item.item-teal:hover .icon i { color: #fff; } .services .service-item.item-teal:hover .icon path { fill: #20c997; } .services .service-item.item-red i { color: #df1529; } .services .service-item.item-red:hover .icon i { color: #fff; } .services .service-item.item-red:hover .icon path { fill: #df1529; } .services .service-item.item-indigo i { color: #6610f2; } .services .service-item.item-indigo:hover .icon i { color: #fff; } .services .service-item.item-indigo:hover .icon path { fill: #6610f2; } .services .service-item.item-pink i { color: #f3268c; } .services .service-item.item-pink:hover .icon i { color: #fff; } .services .service-item.item-pink:hover .icon path { fill: #f3268c; } /*-------------------------------------------------------------- # Testimonials Section --------------------------------------------------------------*/ .testimonials .testimonials-carousel, .testimonials .testimonials-slider { overflow: hidden; } .testimonials .testimonial-item .testimonial-content { border-left: 3px solid var(--accent-color); padding-left: 30px; } .testimonials .testimonial-item .testimonial-img { border-radius: 50%; border: 4px solid var(--background-color); margin: 0 auto; } .testimonials .testimonial-item h3 { font-size: 20px; font-weight: bold; margin: 10px 0 5px 0; } .testimonials .testimonial-item h4 { font-size: 14px; color: color-mix(in srgb, var(--default-color), transparent 40%); margin: 0 0 10px 0; } .testimonials .testimonial-item .stars i { color: #ffc107; margin: 0 1px; } .testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right { color: color-mix(in srgb, var(--accent-color), transparent 50%); font-size: 26px; line-height: 0; } .testimonials .testimonial-item .quote-icon-left { display: inline-block; left: -5px; position: relative; } .testimonials .testimonial-item .quote-icon-right { display: inline-block; right: -5px; position: relative; top: 10px; transform: scale(-1, -1); } .testimonials .testimonial-item p { font-style: italic; } .testimonials .swiper-wrapper { height: auto; } .testimonials .swiper-pagination { margin-top: 30px; position: relative; } .testimonials .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background-color: color-mix(in srgb, var(--default-color), transparent 85%); opacity: 1; } .testimonials .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--accent-color); } /*-------------------------------------------------------------- # Contact Section --------------------------------------------------------------*/ .contact .info-item+.info-item { margin-top: 40px; } .contact .info-item i { color: var(--accent-color); background: color-mix(in srgb, var(--accent-color), transparent 92%); font-size: 20px; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; border-radius: 50px; transition: all 0.3s ease-in-out; margin-right: 15px; } .contact .info-item h3 { padding: 0; font-size: 18px; font-weight: 700; margin-bottom: 5px; } .contact .info-item p { padding: 0; margin-bottom: 0; font-size: 14px; } .contact .info-item:hover i { background: var(--accent-color); color: var(--contrast-color); } .contact .php-email-form { height: 100%; } .contact .php-email-form input[type=text], .contact .php-email-form input[type=email], .contact .php-email-form textarea { font-size: 14px; padding: 10px 15px; box-shadow: none; border-radius: 0; color: var(--default-color); background-color: color-mix(in srgb, var(--background-color), transparent 50%); border-color: color-mix(in srgb, var(--default-color), transparent 80%); } .contact .php-email-form input[type=text]:focus, .contact .php-email-form input[type=email]:focus, .contact .php-email-form textarea:focus { border-color: var(--accent-color); } .contact .php-email-form input[type=text]::placeholder, .contact .php-email-form input[type=email]::placeholder, .contact .php-email-form textarea::placeholder { color: color-mix(in srgb, var(--default-color), transparent 70%); } .contact .php-email-form button[type=submit] { color: var(--contrast-color); background: var(--accent-color); border: 0; padding: 10px 30px; transition: 0.4s; border-radius: 50px; } .contact .php-email-form button[type=submit]:hover { background: color-mix(in srgb, var(--accent-color), transparent 25%); } /*-------------------------------------------------------------- # Portfolio Details Section --------------------------------------------------------------*/ .portfolio-details .portfolio-details-slider img { width: 100%; } .portfolio-details .swiper-wrapper { height: auto; } .portfolio-details .swiper-button-prev, .portfolio-details .swiper-button-next { width: 48px; height: 48px; } .portfolio-details .swiper-button-prev:after, .portfolio-details .swiper-button-next:after { color: rgba(255, 255, 255, 0.8); background-color: rgba(0, 0, 0, 0.15); font-size: 24px; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; transition: 0.3s; } .portfolio-details .swiper-button-prev:hover:after, .portfolio-details .swiper-button-next:hover:after { background-color: rgba(0, 0, 0, 0.3); } @media (max-width: 575px) { .portfolio-details .swiper-button-prev, .portfolio-details .swiper-button-next { display: none; } } .portfolio-details .swiper-pagination { margin-top: 20px; position: relative; } .portfolio-details .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background-color: color-mix(in srgb, var(--default-color), transparent 85%); opacity: 1; } .portfolio-details .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--accent-color); } .portfolio-details .portfolio-info h3 { font-size: 22px; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; position: relative; } .portfolio-details .portfolio-info h3:after { content: ""; position: absolute; display: block; width: 50px; height: 3px; background: var(--accent-color); left: 0; bottom: 0; } .portfolio-details .portfolio-info ul { list-style: none; padding: 0; font-size: 15px; } .portfolio-details .portfolio-info ul li { display: flex; flex-direction: column; padding-bottom: 15px; } .portfolio-details .portfolio-info ul strong { text-transform: uppercase; font-weight: 400; color: color-mix(in srgb, var(--default-color), transparent 50%); font-size: 14px; } .portfolio-details .portfolio-info .btn-visit { padding: 8px 40px; background: var(--accent-color); color: var(--contrast-color); border-radius: 50px; transition: 0.3s; } .portfolio-details .portfolio-info .btn-visit:hover { background: color-mix(in srgb, var(--accent-color), transparent 20%); } .portfolio-details .portfolio-description h2 { font-size: 26px; font-weight: 700; margin-bottom: 20px; } .portfolio-details .portfolio-description p { padding: 0; } .portfolio-details .portfolio-description .testimonial-item { padding: 30px 30px 0 30px; position: relative; background: color-mix(in srgb, var(--default-color), transparent 97%); margin-bottom: 50px; } .portfolio-details .portfolio-description .testimonial-item .testimonial-img { width: 90px; border-radius: 50px; border: 6px solid var(--background-color); float: left; margin: 0 10px 0 0; } .portfolio-details .portfolio-description .testimonial-item h3 { font-size: 18px; font-weight: bold; margin: 15px 0 5px 0; padding-top: 20px; } .portfolio-details .portfolio-description .testimonial-item h4 { font-size: 14px; color: #6c757d; margin: 0; } .portfolio-details .portfolio-description .testimonial-item .quote-icon-left, .portfolio-details .portfolio-description .testimonial-item .quote-icon-right { color: color-mix(in srgb, var(--accent-color), transparent 50%); font-size: 26px; line-height: 0; } .portfolio-details .portfolio-description .testimonial-item .quote-icon-left { display: inline-block; left: -5px; position: relative; } .portfolio-details .portfolio-description .testimonial-item .quote-icon-right { display: inline-block; right: -5px; position: relative; top: 10px; transform: scale(-1, -1); } .portfolio-details .portfolio-description .testimonial-item p { font-style: italic; margin: 0 0 15px 0 0 0; padding: 0; } /*-------------------------------------------------------------- # Service Details Section --------------------------------------------------------------*/ .service-details .service-box { padding: 20px; box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1); } .service-details .service-box+.service-box { margin-top: 30px; } .service-details .service-box h4 { font-size: 20px; font-weight: 700; border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%); padding-bottom: 15px; margin-bottom: 15px; } .service-details .services-list a { color: color-mix(in srgb, var(--default-color), transparent 20%); background-color: color-mix(in srgb, var(--default-color), transparent 96%); display: flex; align-items: center; padding: 12px 15px; margin-top: 15px; transition: 0.3s; } .service-details .services-list a:first-child { margin-top: 0; } .service-details .services-list a i { font-size: 16px; margin-right: 8px; color: var(--accent-color); } .service-details .services-list a.active { color: var(--contrast-color); background-color: var(--accent-color); } .service-details .services-list a.active i { color: var(--contrast-color); } .service-details .services-list a:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 95%); color: var(--accent-color); } .service-details .download-catalog a { color: var(--default-color); display: flex; align-items: center; padding: 10px 0; transition: 0.3s; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); } .service-details .download-catalog a:first-child { border-top: 0; padding-top: 0; } .service-details .download-catalog a:last-child { padding-bottom: 0; } .service-details .download-catalog a i { font-size: 24px; margin-right: 8px; color: var(--accent-color); } .service-details .download-catalog a:hover { color: var(--accent-color); } .service-details .help-box { background-color: var(--accent-color); color: var(--contrast-color); margin-top: 30px; padding: 30px 15px; } .service-details .help-box .help-icon { font-size: 48px; } .service-details .help-box h4, .service-details .help-box a { color: var(--contrast-color); } .service-details .services-img { margin-bottom: 20px; } .service-details h3 { font-size: 26px; font-weight: 700; } .service-details p { font-size: 15px; } .service-details ul { list-style: none; padding: 0; font-size: 15px; } .service-details ul li { padding: 5px 0; display: flex; align-items: center; } .service-details ul i { font-size: 20px; margin-right: 8px; color: var(--accent-color); } /*-------------------------------------------------------------- # Starter Section Section --------------------------------------------------------------*/ .starter-section { /* Placeholder to avoid empty ruleset lint error */ display: block; } /*-------------------------------------------------------------- # Admin-scoped Auth styles (copied from auth rules but namespaced) # These rules are prefixed with .admin-login so editing them won't # affect the regular login/register pages. --------------------------------------------------------------*/ .admin-login .login-main { padding: 0; margin: 0; } .admin-login .login-main .hero, .admin-login .register-hero { position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 0; margin: 0; min-height: 100vh; overflow: hidden; width: auto; margin-left: 0 !important; } .admin-login .login-main .hero > img, .admin-login .register-hero > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .admin-login .login-main .hero::before, .admin-login .register-hero::before { background: color-mix(in srgb, var(--background-color), transparent 30%); z-index: 5; pointer-events: none; } .admin-login .login-container, .admin-login .register-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; width: auto; } .admin-login .login-form-wrapper, .admin-login .register-form-wrapper { display: flex; justify-content: center; align-items: center; } .admin-login .login-form-wrapper .middle, .admin-login .register-form-wrapper .middle { display: flex; /* Narrower panel for admin login (25% smaller than previous 520px -> 390px) */ width: 390px; max-width: 92%; background-color: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 22px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .admin-login .login-form-wrapper #login-box, .admin-login .register-form-wrapper #register-box { /* gradient divider drawn with pseudo-element */ border-right: none; padding: 0px 24px; /* full width — admin layout does not show logo/side panel */ width: 100%; position: relative; } .admin-login .login-form-wrapper .logo, .admin-login .register-form-wrapper .logo { color: #333; font-size: 50px; line-height: 125px; font-weight: bold; width: 48%; text-align: center; display: flex; align-items: center; justify-content: center; padding-left: 16px; } .admin-login .login-form-wrapper .logo img, .admin-login .register-form-wrapper .logo img { max-width: 275px; max-height: 275px; width: auto; height: auto; display: block; } .admin-login .register-hero img[src$="nflogo_transparent.png"] { display: none !important; } .admin-login .register-hero .logo img[src$="nflogo_transparent.png"] { display: block !important; position: relative !important; z-index: 25 !important; margin: 0 auto !important; max-width: 275px !important; width: auto !important; height: auto !important; } .admin-login .register-hero .middle { align-items: center; } .admin-login .register-hero .logo { display: flex; align-items: center; justify-content: center; } .admin-login .login-form-wrapper #login-box::after, .admin-login .register-form-wrapper #register-box::after { /* remove vertical divider on admin login */ display: none; } .admin-login .login-form-wrapper #login-box form, .admin-login .register-form-wrapper #register-box form { width: 250px; } /* Center the form and sign-in button for admin login */ .admin-login .login-form-wrapper #login-box form { margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; width: auto; /* let inputs control width */ } .admin-login .login-form-wrapper #login-box form p { display: flex; align-items: center; width: 100%; margin: 0 0 12px 0; } .admin-login .login-form-wrapper #login-box form input[type="email"], .admin-login .login-form-wrapper #login-box form input[type="password"] { width: 100%; } .admin-login .login-form-wrapper #login-box form input[type="submit"] { margin: 0 auto; display: block; } .admin-login .login-form-wrapper #login-box .submit-wrapper { width: 100%; display: flex; justify-content: center; margin-top: 6px; } .admin-login .login-form-wrapper #login-box .admin-signin-btn { width: 160px; } .admin-login .register-form-wrapper #register-box form span.fa { background-color: #0563bb; border-radius: 3px 0px 0px 3px; color: #fff; display: block; float: left; height: 50px; font-size: 24px; line-height: 50px; text-align: center; width: 50px; } .admin-login .login-form-wrapper #login-box form span.fa { background-color: #0563bb; border-radius: 3px 0 0 3px; color: #fff; display: inline-flex; align-items: center; justify-content: center; height: 50px; width: 50px; font-size: 22px; margin-right: 0; } .admin-login .login-form-wrapper #login-box form input, .admin-login .register-form-wrapper #register-box form input { height: 50px; border: none; font-family: inherit; font-size: 14px; } .admin-login .login-form-wrapper #login-box form input { width: calc(100% - 50px); margin: 0; border-radius: 0 3px 3px 0; padding: 0 16px; background-color: color-mix(in srgb, var(--default-color), transparent 92%); color: var(--nav-color); } .admin-login .login-form-wrapper fieldset, .admin-login .register-form-wrapper fieldset { padding: 0; border: 0; margin: 0; } .admin-login .login-form-wrapper #login-box form input[type="email"], .admin-login .login-form-wrapper #login-box form input[type="password"], .admin-login .register-form-wrapper #register-box form input[type="email"], .admin-login .register-form-wrapper #register-box form input[type="password"] { background-color: color-mix(in srgb, var(--default-color), transparent 92%); border-radius: 0px 3px 3px 0px; color: var(--nav-color); padding: 0 16px; width: 200px; } .admin-login .login-form-wrapper #login-box form input[type="submit"], .admin-login .register-form-wrapper #register-box form input[type="submit"] { border-radius: 3px; background-color: #0563bb; color: #fff; font-weight: bold; text-transform: uppercase; padding: 5px 10px; height: 30px; cursor: pointer; border: none; } .admin-login .login-form-wrapper #login-box form input[type="submit"]:hover, .admin-login .register-form-wrapper #register-box form input[type="submit"]:hover { background-color: #0450a0; } .admin-login .login-form-wrapper .small-text, .admin-login .register-form-wrapper .small-text { font-size: 12px; color: #333; } .admin-login .login-form-wrapper a, .admin-login .register-form-wrapper a { color: #0563bb; text-decoration: none; } .admin-login .login-form-wrapper a:hover, .admin-login .register-form-wrapper a:hover { text-decoration: underline; } .admin-login .login-form-wrapper .clearfix, .admin-login .register-form-wrapper .clearfix { zoom: 1; } .admin-login .login-form-wrapper .clearfix:before, .admin-login .login-form-wrapper .clearfix:after, .admin-login .register-form-wrapper .clearfix:before, .admin-login .register-form-wrapper .clearfix:after { content: ' '; display: table; } .admin-login .login-form-wrapper .clearfix:after, .admin-login .register-form-wrapper .clearfix:after { clear: both; } .admin-login .register-form-wrapper .text-center { text-align: center; margin-top: 1em; } @media (max-width: 768px) { .admin-login .login-form-wrapper .middle, .admin-login .register-form-wrapper .middle { flex-direction: column; width: 100%; } .admin-login .login-form-wrapper #login-box, .admin-login .register-form-wrapper #register-box { border-right: none; border-bottom: none; /* mobile divider handled by pseudo-element */ width: 100%; padding-bottom: 20px; margin-bottom: 20px; } /* create a horizontal gradient divider for stacked layout */ .admin-login .login-form-wrapper #login-box::after, .admin-login .register-form-wrapper #register-box::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -2px; height: 4px; border-radius: 2px; background: linear-gradient(to right, rgba(5,99,187,0) 0%, rgba(5,99,187,0.0) 10%, rgba(5,99,187,0.85) 45%, rgba(5,99,187,0.85) 55%, rgba(5,99,187,0.0) 90%, rgba(5,99,187,0) 100%); z-index: 20; } .admin-login .login-form-wrapper .logo, .admin-login .register-form-wrapper .logo { width: 100%; font-size: 30px; line-height: 60px; } } /* ------------------------------------------------------------------ Admin users page overrides (appended safely) These rules are namespaced to the #hero section and modal helpers so they don't modify the original template rules above. -------------------------------------------------------------------*/ /* Ensure admin-hero content stacks vertically and centers on small screens */ .admin-hero .container { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; position: relative; /* keep z-index context from existing .hero .container */ z-index: 3; } .admin-hero .section-title { display: block; text-align: center; /* center title at all widths */ align-self: center; /* center the title within the hero container */ width: 100%; margin-bottom: 0.5rem; } @media (max-width: 768px) { .admin-hero .container { align-items: center; } .admin-hero .section-title { text-align: center; } } /* Make the table overlay the hero image with a readable background */ .admin-hero .table-responsive { background: rgba(255,255,255,0.94); padding: 0.9rem; border-radius: 10px; box-shadow: 0 10px 30px rgba(11,36,71,0.15); width: 100%; } /* Constrain search container inside the admin hero */ .admin-hero .search-container { width: 320px; max-width: 60%; min-width: 160px; } /* Lightweight modal helpers used by admin pages (safe appended namespace) */ .ns-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1050; align-items: flex-start; justify-content: center; padding-top: 4rem; } .ns-modal[aria-hidden="false"] { display: flex; } .ns-modal-dialog { max-width: 600px; margin: 0 auto; } /* small utility for admin-only badges if needed */ .admin-badge { background: #fcba03; color: #000; padding: 0.25rem 0.5rem; border-radius: 6px; font-weight: 600; } /* Match original section-title H2 sizing for admin hero */ .admin-hero .section-title h2 { font-size: 32px; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; position: relative; } /* Ensure section subtitle inside admin hero uses section-title sizing, not .hero p */ .admin-hero .section-title p { margin-bottom: 0; /* same as .section-title p */ font-size: 16px; /* override larger .hero p (26px) */ font-weight: 400; line-height: 1.4; } /* Admin toolbar filter-like buttons (copy of portfolio filters style but admin-scoped) */ .admin-portfolio-filters li, .admin-portfolio .admin-portfolio-filters li { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 8px 20px 10px 20px; margin: 0; font-size: 15px; font-weight: 500; line-height: 1; margin-bottom: 5px; border-radius: 50px; transition: all 0.3s ease-in-out; font-family: var(--heading-font); text-align: center; color: #0b2447 !important; background-color: rgba(11, 36, 71, 0.08) !important; border: 1px solid rgba(11, 36, 71, 0.15); } .admin-portfolio-filters li + li { margin-left: 12px; } .admin-portfolio .admin-portfolio-filters li:hover { transform: translateY(-2px); } .admin-portfolio .admin-portfolio-filters li[aria-disabled="true"] { opacity: 0.6; pointer-events: none; } /* Keep hover/active rules (no-op visually since base state is active) but keep for specificity */ .admin-portfolio-filters li:hover, .admin-portfolio.admin-portfolio-filters li:hover, .admin-portfolio .admin-portfolio-filters li:hover { background-color: rgba(11, 36, 71, 0.16) !important; border-color: rgba(11, 36, 71, 0.28); } .admin-portfolio-filters li.filter-active, .admin-portfolio.admin-portfolio-filters li.filter-active, .admin-portfolio .admin-portfolio-filters li.filter-active { color: #0b2447 !important; background-color: #fcba03 !important; border-color: color-mix(in srgb, #fcba03 80%, #0b2447 20%); } /* small space between toolbar buttons */ .admin-toolbar .btn-group .btn { margin-right: 8px; } /* Delete pill - make the red bootstrap danger button match pill layout */ .admin-portfolio .delete-pill { display: inline-block; margin: 0; } .admin-portfolio .delete-pill { padding: 0 !important; background: transparent !important; } .admin-portfolio .delete-pill .btn { border-radius: 50px; padding: 6px 12px; display: inline-flex; align-items: center; justify-content: center; } .admin-portfolio .delete-pill .btn .bi { font-size: 1rem; } /* Ensure the delete li doesn't inherit the admin pill accent background */ .admin-portfolio-filters li.delete-pill { background: transparent !important; } /* Icon-only pill style */ .admin-portfolio .icon-pill { padding: 0 !important; background: transparent !important; display: inline-block; } .admin-portfolio .icon-pill .icon-btn { border-radius: 50px; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-width: 36px; height: 36px; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; box-shadow: 0 0 0 rgba(0,0,0,0); } .admin-portfolio .icon-pill .icon-btn:not(:disabled):hover, .admin-portfolio .icon-pill .icon-btn:not(:disabled):focus-visible { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18); } .admin-portfolio .icon-pill .icon-btn:disabled, .admin-portfolio .icon-pill .icon-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.6; box-shadow: none; transform: none; } /* Tooltip for icon buttons: visible only on hover over the button */ .admin-portfolio .icon-pill .icon-btn { position: relative; } .admin-portfolio .icon-pill .icon-btn::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: #fff; padding: 6px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out; transform-origin: bottom center; z-index: 9999; } .admin-portfolio .icon-pill .icon-btn:hover::after { opacity: 1; transform: translateX(-50%) translateY(-4px); } /* Accent-filled button variant for icon pills */ .admin-portfolio .btn-accent { background-color: var(--accent-color) !important; color: var(--contrast-color) !important; border-color: transparent !important; line-height: 1; padding: 6px 10px !important; min-width: 36px; height: 36px; } .admin-portfolio .btn-accent:hover { background-color: color-mix(in srgb, var(--accent-color), black 6%) !important; } /* Make icons bolder/larger for visibility inside icon-only buttons */ .admin-portfolio .icon-btn .bi, .admin-portfolio .delete-pill .btn .bi { font-size: 1.15rem; } /* Make sure delete button matches the icon buttons in size */ .admin-portfolio .delete-pill .btn { padding: 6px 10px !important; line-height: 1; min-width: 36px; height: 36px; } /* Ensure delete button is a filled red danger button and icon is visible */ .admin-portfolio .delete-pill .btn-danger { background-color: #dc3545 !important; /* Bootstrap danger */ color: var(--contrast-color) !important; border-color: transparent !important; box-shadow: none !important; } .admin-portfolio .delete-pill .btn-danger:hover { background-color: color-mix(in srgb, #dc3545, black 6%) !important; } .admin-portfolio .delete-pill .btn .bi { color: var(--contrast-color) !important; } /* Ensure uniform vertical alignment and spacing between pills */ .admin-portfolio .admin-portfolio-filters li { vertical-align: middle; } .admin-portfolio .admin-portfolio-filters li + li { margin-left: 8px !important; } /* Small pill for action buttons that should match modal button sizing */ .admin-portfolio .btn-pill { padding: 0 !important; background: transparent !important; } .admin-portfolio .btn-pill .btn { padding: 4px 10px; height: 32px; font-size: 0.9rem; border-radius: 8px; } .admin-portfolio .btn-pill .btn.btn-success { background-color: #0563bb !important; color: var(--contrast-color) !important; border-color: transparent !important; } .admin-portfolio .btn-pill .btn.btn-success:hover { background-color: color-mix(in srgb, #0563bb, black 6%) !important; } /* League admin dashboard layout */ .league-dashboard { margin-top: 2rem; } .league-filters .admin-portfolio-filters { justify-content: center; flex-wrap: wrap; gap: 12px; } .league-filters .admin-portfolio-filters li { margin: 0 !important; min-width: 110px; text-align: center; } .league-panels { margin-top: 2rem; background: var(--admin-surface, #ffffff); border-radius: 24px; padding: 1.5rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); } .league-section { transition: opacity 0.25s ease, transform 0.25s ease; width: 100%; } .league-section[hidden] { opacity: 0; transform: translateY(10px); pointer-events: none; } .league-section .row { margin-left: 0; margin-right: 0; } .league-card { border: 1px solid rgba(99, 102, 241, 0.12); border-radius: 18px; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04); overflow: hidden; background: #ffffff; } .league-card .card-header { background: transparent; border-bottom: 1px solid rgba(99, 102, 241, 0.1); padding: 1.25rem 1.5rem; } .league-card .card-title { font-weight: 600; } .league-card .badge { font-size: 0.75rem; letter-spacing: 0.02em; } .league-card .form-label { font-weight: 500; } .league-card textarea.font-monospace { font-family: "Fira Code", "Roboto Mono", "Courier New", monospace; font-size: 0.85rem; } .league-card code { font-size: 0.8rem; } .league-card .alert { border-radius: 10px; padding: 0.65rem 0.85rem; } .league-card .list-group-item { border: none; padding-left: 0; padding-right: 0; } .league-card .list-group-item + .list-group-item { border-top: 1px solid rgba(15, 23, 42, 0.08); } .league-card .btn { min-width: 150px; } .schedule-builder-card .table { border: 1px solid rgba(11, 36, 71, 0.12); border-radius: 12px; overflow: hidden; } .schedule-builder-card thead th { background: rgba(11, 36, 71, 0.08); border-bottom: 1px solid rgba(11, 36, 71, 0.12); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(11, 36, 71, 0.8); } .schedule-builder-card tbody td { border-color: rgba(11, 36, 71, 0.08); } .schedule-builder-card .position-col { width: 1%; white-space: nowrap; } .schedule-builder-card .actions-col { width: 1%; white-space: nowrap; } .schedule-builder-card .btn-link { text-decoration: none; padding: 0 4px; } .schedule-builder-card .btn-link:hover { text-decoration: underline; } .schedule-builder-card .form-control-sm { font-size: 0.85rem; } .schedule-builder-card .form-check-input { width: 1.15rem; height: 1.15rem; cursor: pointer; } .schedule-events-table { background: rgba(255, 255, 255, 0.92); border-radius: 12px; } .schedule-builder-card [data-display-position] { font-size: 0.75rem; letter-spacing: 0.05em; } .scoring-template-card .table { border: 1px solid rgba(11, 36, 71, 0.12); border-radius: 12px; overflow: hidden; } .scoring-template-card thead th { background: rgba(11, 36, 71, 0.08); border-bottom: 1px solid rgba(11, 36, 71, 0.12); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(11, 36, 71, 0.8); } .scoring-template-card tbody td { border-color: rgba(11, 36, 71, 0.08); } .scoring-template-card tbody td input { font-family: "Fira Code", "Roboto Mono", "Courier New", monospace; font-size: 0.85rem; } .scoring-template-card .actions-col { width: 1%; white-space: nowrap; } .scoring-template-card tbody tr:hover { background: rgba(11, 36, 71, 0.04); } .scoring-template-card .btn-link { text-decoration: none; } .scoring-template-card .btn-link:hover { text-decoration: underline; } .scoring-template-card .alert { border-radius: 12px; } .scoring-template-table { background: rgba(255, 255, 255, 0.92); border-radius: 12px; } .form-feedback { min-height: 1.25rem; margin-top: 0.75rem; font-size: 0.9rem; } /* Fix alignment between the icon box and the input field in the add-user modal */ #add-user-modal .middle p { position: relative; display: flex; align-items: center; margin: 0 0 12px 0; } /* Use same span.fa markup as register form for icon boxes */ #add-user-modal .middle p span.fa { background-color: #0563bb; border-radius: 3px 0 0 3px; color: #fff; display: inline-flex; align-items: center; justify-content: center; height: 50px; width: 50px; font-size: 24px; } #add-user-modal .middle p input { height: 50px; border: none; padding: 0 16px; width: 100%; box-sizing: border-box; display: inline-flex; align-items: center; line-height: 50px; font-size: 14px; margin: 0; background-color: color-mix(in srgb, var(--default-color), transparent 92%); border-radius: 0 3px 3px 0; color: var(--nav-color); } #edit-modal .middle p { position: relative; display: flex; align-items: center; margin: 0 0 12px 0; } #edit-modal .middle p span.fa { background-color: #0563bb; border-radius: 3px 0 0 3px; color: #fff; display: inline-flex; align-items: center; justify-content: center; height: 50px; width: 50px; font-size: 24px; } #edit-modal .middle p input { height: 50px; border: none; padding: 0 16px; width: 100%; box-sizing: border-box; display: inline-flex; align-items: center; line-height: 50px; font-size: 14px; margin: 0; background-color: color-mix(in srgb, var(--default-color), transparent 92%); border-radius: 0 3px 3px 0; color: var(--nav-color); } /* Ensure no extra vertical spacing caused by form element defaults */ #add-user-modal .middle p input::placeholder { line-height: 1; } /* Mobile actions: hide full toolbar and show compact Actions button */ /* Hidden by default; shown only at mobile widths */ .admin-actions-mobile { display: none; } @media (max-width: 768px) { .admin-portfolio.admin-portfolio-filters { display: none !important; } .admin-actions-mobile { display: inline-block; position: relative; } /* Style the actions toggle like the pill buttons */ .admin-actions-mobile #actions-toggle { background: var(--accent-color); color: var(--contrast-color); border: none; padding: 8px 18px; border-radius: 50px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 6px 18px rgba(11,36,71,0.08); } .admin-actions-mobile .actions-menu { display: none; position: absolute; right: 8px; top: 44px; background: rgba(255,255,255,0.96); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 10px 30px rgba(0,0,0,0.10); border-radius: 10px; padding: 8px; z-index: 2000; } .admin-actions-mobile .actions-menu[aria-hidden="false"] { display: block; } .admin-actions-mobile .actions-item { width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 50px; background: color-mix(in srgb, var(--accent-color), transparent 85%); color: var(--contrast-color); margin-bottom: 8px; border: none; } .admin-actions-mobile .actions-item:last-child { margin-bottom: 0; } /* small circular icon pills matching desktop */ .admin-actions-mobile .actions-menu { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; } .admin-actions-mobile .actions-item { justify-content: center; padding: 0; min-width: 36px; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-color); color: var(--contrast-color); border: none; box-shadow: none; } .admin-actions-mobile .actions-item .actions-icon { display: inline-flex; align-items: center; justify-content: center; background: transparent; width: 100%; height: 100%; border-radius: 50%; color: inherit; } .admin-actions-mobile .actions-item .actions-icon .bi { font-size: 16px; color: currentColor; line-height: 1; } .admin-actions-mobile .actions-item .actions-label { display: none; } /* Ensure delete uses the same icon color and matches sizing/alignment */ .admin-actions-mobile .actions-item.text-danger { background: #dc3545 !important; color: var(--contrast-color) !important; } .admin-actions-mobile .actions-item.text-danger { background: color-mix(in srgb, #dc3545, transparent 85%); } /* Animations: fade + slide-down */ .admin-actions-mobile .actions-menu { opacity: 0; transform: translateY(-8px); transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.9,.2,1); pointer-events: none; } .admin-actions-mobile .actions-menu[aria-hidden="false"] { opacity: 1; transform: translateY(0); pointer-events: auto; } } /*-------------------------------------------------------------- # Admin Dashboard 2025 Refresh --------------------------------------------------------------*/ body.admin-page { --admin-body-bg: #f4f6ff; --admin-sidebar-bg: linear-gradient(195deg, #1f2546 0%, #1a1f3d 48%, #312e81 100%); --admin-sidebar-border: rgba(255, 255, 255, 0.12); --admin-surface: #ffffff; --admin-surface-alt: rgba(255, 255, 255, 0.72); --admin-card-border: rgba(15, 23, 42, 0.06); --admin-text: #1d2144; --admin-text-muted: #6b7094; --admin-primary: #6366f1; --admin-primary-dark: #4f46e5; --admin-primary-soft: rgba(99, 102, 241, 0.12); --admin-success: #22c55e; --admin-danger: #ef4444; --admin-warning: #f59e0b; --admin-shadow: 0 30px 60px -35px rgba(79, 70, 229, 0.55); --admin-panel-shadow: 0 24px 45px -30px rgba(15, 23, 42, 0.45); background: var(--admin-body-bg); color: var(--admin-text); font-family: "Poppins", var(--default-font); } body.admin-page a { color: var(--admin-primary); } body.admin-page .header { background: var(--admin-sidebar-bg); border-right: 1px solid var(--admin-sidebar-border); box-shadow: 0 35px 80px -45px rgba(14, 17, 38, 0.75); width: 260px; left: 0; padding: 1.75rem 1.5rem; backdrop-filter: blur(12px); } body.admin-page .header::after { content: ""; position: absolute; inset: 0; background: linear-gradient(210deg, rgba(255, 255, 255, 0.05) 0%, transparent 45%, rgba(255, 255, 255, 0.08) 100%); pointer-events: none; } body.admin-page .header > * { position: relative; z-index: 1; } body.admin-page .header .navmenu ul { width: 100%; margin-top: 2.5rem; } body.admin-page .header .navmenu li { width: 100%; } body.admin-page .header-toggle { background: var(--admin-primary); color: #ffffff; border: none; box-shadow: 0 15px 40px -10px rgba(99, 102, 241, 0.55); display: flex; } @media (min-width: 1200px) { body.admin-page .header-toggle { display: none !important; } } body.admin-page .navmenu a, body.admin-page .navmenu a:focus { background: transparent; border-radius: 14px; color: rgba(255, 255, 255, 0.78); padding: 12px 16px; margin-bottom: 10px; height: auto; gap: 14px; font-weight: 500; transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease; max-width: 100%; } body.admin-page .navmenu a i { font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); } body.admin-page .navmenu a span { display: inline; font-size: 0.95rem; } body.admin-page .navmenu a:hover, body.admin-page .navmenu li:hover>a { transform: translateX(4px); background: rgba(255, 255, 255, 0.12); box-shadow: 0 15px 40px -25px rgba(8, 17, 61, 0.65); color: #ffffff; } body.admin-page .navmenu .active, body.admin-page .navmenu .active:focus { background: rgba(255, 255, 255, 0.18); color: #ffffff; box-shadow: 0 20px 45px -25px rgba(99, 102, 241, 0.6); } body.admin-page .navmenu .active i { color: #ffffff; } body.admin-page .navmenu .has-submenu { display: flex; flex-direction: column; gap: 0.35rem; } body.admin-page .navmenu .has-submenu > a { margin-bottom: 0; } body.admin-page .navmenu .nav-submenu { list-style: none; margin: 0 0 0 2.6rem; padding: 0; display: none; flex-direction: column; gap: 0.35rem; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.25s ease, max-height 0.3s ease; } body.admin-page .navmenu .has-submenu.is-expanded .nav-submenu { display: flex; opacity: 1; max-height: 500px; } body.admin-page .navmenu .nav-submenu li { width: 100%; } body.admin-page .navmenu .nav-submenu a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.95rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; background: transparent; color: rgba(255, 255, 255, 0.7); transition: transform 0.18s ease, background 0.22s ease, color 0.22s ease; } body.admin-page .navmenu .nav-submenu a i { font-size: 1rem; color: rgba(255, 255, 255, 0.75); } body.admin-page .navmenu .nav-submenu a:hover, body.admin-page .navmenu .nav-submenu a:focus { transform: translateX(4px); background: rgba(255, 255, 255, 0.12); color: #ffffff; } body.admin-page .navmenu .nav-submenu a.is-active, body.admin-page .navmenu .nav-submenu a[aria-current="page"] { background: rgba(255, 255, 255, 0.18); color: #ffffff; box-shadow: 0 16px 38px -24px rgba(99, 102, 241, 0.6); } body.admin-page .navmenu .nav-submenu a.is-active i, body.admin-page .navmenu .nav-submenu a[aria-current="page"] i { color: #ffffff; } body.admin-page .main { margin-left: 260px; padding: 2.75rem clamp(1.75rem, 4vw, 3.5rem) 3.5rem; min-height: 100vh; background: transparent; } @media (max-width: 1199px) { body.admin-page .main { margin-left: 0; padding: 4.5rem 1.5rem 2rem; } } body.admin-page .main .section { padding: 0; } body.admin-page .main .section + .section { margin-top: 2.5rem; } body.admin-page .section .container { padding: 0; max-width: 1240px; } body.admin-page .admin-hero { position: relative; background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 45%, #0ea5e9 100%); border-radius: 28px; padding: clamp(2rem, 4vw, 3.5rem); color: #ffffff; overflow: hidden; box-shadow: var(--admin-shadow); isolation: isolate; } body.admin-page .admin-hero::before { content: ""; position: absolute; top: -25%; right: -22%; width: 60%; height: 130%; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0.65; transform: rotate(15deg); z-index: 0; } body.admin-page .admin-hero img { display: none; } body.admin-page .admin-hero .section-title { margin: 0; position: relative; z-index: 1; } body.admin-page .admin-hero .section-title h2, body.admin-page .admin-hero h1 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 700; color: #ffffff; margin-bottom: 0.65rem; } body.admin-page .admin-hero .section-title p, body.admin-page .admin-hero p { color: rgba(255, 255, 255, 0.82); font-size: clamp(0.95rem, 2vw, 1.05rem); max-width: 620px; margin-bottom: 1.8rem; } .admin-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); color: rgba(255, 255, 255, 0.82); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.5rem; } .admin-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; position: relative; z-index: 1; } .btn-admin-primary, .btn-admin-outline { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; border-radius: 999px; padding: 0.7rem 1.65rem; font-size: 0.95rem; transition: transform 0.22s ease, box-shadow 0.22s ease; border: none; } .btn-admin-primary { background: #ffffff; color: var(--admin-primary-dark); box-shadow: 0 20px 45px -22px rgba(15, 23, 42, 0.55); } .btn-admin-primary:hover { transform: translateY(-2px); box-shadow: 0 28px 60px -25px rgba(15, 23, 42, 0.55); } .btn-admin-outline { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.4); } .btn-admin-outline:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.16); border-color: transparent; } .btn-admin-primary .bi, .btn-admin-outline .bi { font-size: 1.1rem; } .admin-hero__stats { position: relative; z-index: 1; margin-top: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; } .admin-hero__stats > * { flex: 1 1 calc(33.333% - 1rem); min-width: 200px; } .admin-stat-card { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 20px; padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; min-height: 120px; backdrop-filter: blur(8px); } .admin-stat-card .label { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); } .admin-stat-card .value { font-size: 1.75rem; font-weight: 700; color: #ffffff; } .admin-stat-card .trend { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); } .admin-stat-card .trend i { font-size: 0.95rem; } /* Compact horizontal module cards */ .admin-module-card-compact { flex-direction: row; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; min-height: auto; } .admin-module-card-compact .admin-module-card__icon { font-size: 1.8rem; color: var(--admin-primary); background: rgba(255, 255, 255, 0.25); width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .admin-module-card-compact > div { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; } .admin-module-card-compact .admin-module-card__meta { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); font-weight: 600; } .admin-module-card-compact h3 { font-size: 1rem; font-weight: 600; color: #ffffff; margin: 0; } .admin-module-card-compact .admin-module-card__cta { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); text-decoration: none; margin-top: 0.25rem; transition: color 0.2s; } .admin-module-card-compact .admin-module-card__cta:hover { color: #ffffff; } .admin-module-card-compact .admin-module-card__cta i { font-size: 0.75rem; } /* Compact secondary card */ .admin-secondary-card-compact { flex-direction: column; gap: 0.6rem; padding: 1.2rem 1.4rem; } .admin-secondary-card-compact .admin-status-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 8px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.95); width: fit-content; } .admin-secondary-card-compact h4 { font-size: 1rem; font-weight: 600; color: #ffffff; margin: 0.25rem 0 0; } .admin-secondary-card-compact ul { margin-top: 0.5rem; } .admin-secondary-card-compact ul li { font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 0.35rem; } .admin-secondary-card-compact ul li i { color: rgba(255, 255, 255, 0.5); } @media (max-width: 1024px) { .admin-hero__stats > * { flex: 1 1 calc(50% - 0.5rem); } } @media (max-width: 768px) { .admin-hero__stats > * { flex: 1 1 calc(50% - 0.5rem); min-width: 160px; } } @media (max-width: 520px) { .admin-hero__stats { flex-direction: column; } .admin-hero__stats > * { flex: 1 1 100%; min-width: unset; } .btn-admin-primary, .btn-admin-outline { width: 100%; justify-content: center; } } .admin-module-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .admin-module-card { position: relative; background: var(--admin-surface); border-radius: 24px; padding: 1.85rem; border: 1px solid var(--admin-card-border); box-shadow: var(--admin-panel-shadow); display: flex; flex-direction: column; gap: 1rem; transition: transform 0.25s ease, box-shadow 0.25s ease; } .admin-module-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(99, 102, 241, 0.08) 0%, transparent 55%, rgba(14, 165, 233, 0.12) 100%); opacity: 0; transition: opacity 0.25s ease; border-radius: inherit; pointer-events: none; } .admin-module-card:hover { transform: translateY(-6px); box-shadow: 0 30px 80px -45px rgba(16, 24, 40, 0.45); } .admin-module-card:hover::after { opacity: 1; } .admin-module-card__icon { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; background: var(--admin-primary-soft); color: var(--admin-primary-dark); } .admin-module-card h3 { font-size: 1.15rem; font-weight: 600; color: var(--admin-text); } .admin-module-card p { margin: 0; color: var(--admin-text-muted); line-height: 1.6; } .admin-module-card__meta { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 600; color: var(--admin-primary-dark); background: var(--admin-primary-soft); padding: 0.35rem 0.75rem; border-radius: 999px; } .admin-module-card__cta { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--admin-primary-dark); margin-top: auto; } .admin-module-card__cta .bi { transition: transform 0.2s ease; } .admin-module-card:hover .admin-module-card__cta .bi { transform: translateX(4px); } body.admin-page .league-dashboard { margin-top: 2.75rem; } body.admin-page .league-filters .admin-portfolio-filters { background: var(--admin-surface); padding: 0.45rem; border-radius: 999px; box-shadow: var(--admin-panel-shadow); display: inline-flex; gap: 0.75rem; } body.admin-page .admin-portfolio-filters li, body.admin-page .admin-portfolio .admin-portfolio-filters li { background: var(--admin-primary-soft) !important; color: var(--admin-text) !important; border: 1px solid rgba(99, 102, 241, 0.22); border-radius: 999px; padding: 10px 22px; font-weight: 600; letter-spacing: 0.01em; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; } body.admin-page .admin-portfolio-filters li:hover, body.admin-page .admin-portfolio .admin-portfolio-filters li:hover { transform: translateY(-2px); background: rgba(99, 102, 241, 0.18) !important; border-color: rgba(99, 102, 241, 0.4); box-shadow: 0 18px 42px -28px rgba(79, 70, 229, 0.55); } body.admin-page .admin-portfolio-filters li.filter-active, body.admin-page .admin-portfolio .admin-portfolio-filters li.filter-active { background: var(--admin-primary) !important; color: #ffffff !important; border-color: transparent; box-shadow: 0 20px 48px -28px rgba(99, 102, 241, 0.65); } body.admin-page .league-panels { background: var(--admin-surface); border-radius: 28px; padding: 2rem clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--admin-panel-shadow); margin-top: 2.5rem; margin-bottom: 1.5rem; } body.admin-page .league-section { width: 100%; } body.admin-page .league-section .row { margin-left: 0; margin-right: 0; } body.admin-page .league-card, body.admin-page .card.league-card { background: #ffffff; border-radius: 18px; border: 1px solid rgba(99, 102, 241, 0.12); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .admin-tabset { margin-top: clamp(1.5rem, 3vw, 2.4rem); background: var(--admin-surface); border-radius: 28px; box-shadow: var(--admin-panel-shadow); overflow: hidden; } .admin-tabset__nav { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 1.5rem clamp(1.25rem, 3vw, 2.25rem) 1.25rem; background: rgba(99, 102, 241, 0.06); border-bottom: 1px solid rgba(99, 102, 241, 0.12); } .admin-tabset__btn { border: none; border-radius: 18px; background: transparent; color: var(--admin-text-muted); font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1.45rem; transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; } .admin-tabset__btn i { font-size: 1.1rem; color: var(--admin-primary); } .admin-tabset__btn:hover, .admin-tabset__btn:focus { background: rgba(99, 102, 241, 0.12); color: var(--admin-primary-dark); transform: translateY(-2px); } .admin-tabset__btn.is-active { background: linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-primary-dark) 100%); color: #ffffff; box-shadow: 0 24px 56px -26px rgba(99, 102, 241, 0.55); } .admin-tabset__btn.is-active i { color: #ffffff; } .admin-tabset__panels { padding: 2rem clamp(1.5rem, 3vw, 2.75rem) clamp(2rem, 3vw, 2.85rem); } .admin-panel { display: block; } .admin-panel.is-active { animation: adminPanelFadeIn 220ms ease forwards; } .admin-panel[hidden] { display: none !important; } .admin-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.75rem; } .admin-panel__header h3 { margin: 0 0 0.35rem; font-size: 1.35rem; font-weight: 600; color: var(--admin-text); } .admin-panel__header p { margin: 0; color: var(--admin-text-muted); max-width: 620px; } .admin-panel__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; } .admin-panel__chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem; border-radius: 999px; background: rgba(99, 102, 241, 0.12); color: var(--admin-primary-dark); font-weight: 600; font-size: 0.85rem; } .admin-panel__chip i { font-size: 1rem; } @keyframes adminPanelFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 992px) { .admin-panel__header { flex-direction: column; align-items: flex-start; } .admin-panel__meta { justify-content: flex-start; } } @media (max-width: 640px) { .admin-tabset__btn { width: 100%; justify-content: flex-start; } } body.admin-page .league-card:hover, body.admin-page .card.league-card:hover { transform: translateY(-2px); box-shadow: 0 12px 40px -12px rgba(17, 24, 39, 0.25); } body.admin-page .league-card .card-header { background: transparent; border-bottom: 1px solid rgba(99, 102, 241, 0.12); padding: 1.5rem 1.75rem; } body.admin-page .league-card .card-body { padding: 1.5rem; } body.admin-page .league-card .card-title { font-weight: 600; color: var(--admin-text); } body.admin-page .league-card small, body.admin-page .league-card .text-muted { color: var(--admin-text-muted) !important; } body.admin-page .league-card .badge { background: var(--admin-primary-soft); color: var(--admin-primary-dark); border-radius: 999px; padding: 0.4rem 0.75rem; } body.admin-page .league-card .btn, body.admin-page .card .btn { border-radius: 999px; font-weight: 600; padding: 0.6rem 1.3rem; border: none; } body.admin-page .btn-outline-info, body.admin-page .btn-outline-secondary, body.admin-page .btn-outline-primary { background: rgba(99, 102, 241, 0.08); color: var(--admin-primary-dark); border: 1px solid rgba(99, 102, 241, 0.2); } body.admin-page .btn-outline-info:hover, body.admin-page .btn-outline-secondary:hover, body.admin-page .btn-outline-primary:hover { background: var(--admin-primary); color: #ffffff; border-color: transparent; } body.admin-page .btn-success { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); border: none; box-shadow: 0 18px 40px -20px rgba(34, 197, 94, 0.55); } body.admin-page .btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border: none; box-shadow: 0 18px 40px -18px rgba(239, 68, 68, 0.55); } body.admin-page .form-control, body.admin-page .form-select { border-radius: 14px; border: 1px solid rgba(99, 102, 241, 0.18); padding: 0.6rem 0.9rem; background: rgba(255, 255, 255, 0.92); color: var(--admin-text); box-shadow: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* Fillow-inspired Table Styling */ body.admin-page .table-responsive { border-radius: 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); background: #ffffff; } body.admin-page .table { margin-bottom: 0; font-size: 0.875rem; } body.admin-page .table thead.table-light { background-color: #f8f9fa; border-bottom: 2px solid #e9ecef; } body.admin-page .table thead th { font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 1rem 0.75rem; border-bottom: none; color: #6c757d; } body.admin-page .table tbody tr { border-bottom: 1px solid #f1f3f5; transition: background-color 0.2s ease, transform 0.15s ease; } body.admin-page .table-hover tbody tr:hover { background-color: rgba(99, 102, 241, 0.04); transform: translateX(2px); } body.admin-page .table tbody td { padding: 0.875rem 0.75rem; vertical-align: middle; color: #495057; border-bottom: none; } body.admin-page .table tbody tr:last-child { border-bottom: none; } body.admin-page .table .actions-col { width: 100px; } body.admin-page .table .actions-col .btn { min-width: auto; padding: 0.35rem 0.65rem; } /* Golfer Tables Specific Styling */ body.admin-page .golfer-table .table tbody td, body.admin-page .golfer-cost-table .table tbody td { font-size: 0.875rem; } body.admin-page .golfer-table input[type="checkbox"], body.admin-page .golfer-cost-table input[type="number"] { border-radius: 6px; border: 1px solid #dee2e6; } body.admin-page .golfer-table input[type="checkbox"]:checked { background-color: var(--admin-primary); border-color: var(--admin-primary); } /* Enhanced Card Styling for Golfer Panels */ body.admin-page .golfer-builder-card, body.admin-page .golfer-cost-card { border: 1px solid rgba(99, 102, 241, 0.15); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } body.admin-page .golfer-builder-card .card-header, body.admin-page .golfer-cost-card .card-header { background: transparent; border-bottom: 1px solid rgba(99, 102, 241, 0.12); } body.admin-page .golfer-builder-card:hover, body.admin-page .golfer-cost-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); transform: translateY(-2px); transition: all 0.25s ease; } /* Clean Badge Styling */ body.admin-page .golfer-builder-card .badge, body.admin-page .golfer-cost-card .badge { font-weight: 600; font-size: 0.7rem; padding: 0.45rem 0.85rem; letter-spacing: 0.3px; } /* Responsive Table Adjustments */ @media (max-width: 768px) { body.admin-page .table thead th { font-size: 0.75rem; padding: 0.75rem 0.5rem; } body.admin-page .table tbody td { padding: 0.75rem 0.5rem; font-size: 0.8125rem; } body.admin-page .table-hover tbody tr:hover { transform: none; } } body.admin-page .form-control:focus, body.admin-page .form-select:focus { border-color: var(--admin-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); background: #ffffff; } body.admin-page .table.ns-table { background: var(--admin-surface); border-radius: 22px; border: 1px solid var(--admin-card-border); overflow: hidden; box-shadow: var(--admin-panel-shadow); } body.admin-page .table.ns-table thead th { background: var(--admin-primary-soft); border-bottom: 1px solid rgba(99, 102, 241, 0.16); color: var(--admin-text); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; } body.admin-page .table.ns-table tbody tr { transition: background-color 0.2s ease; } body.admin-page .table.ns-table tbody tr:hover { background: rgba(99, 102, 241, 0.08); } body.admin-page .user-search, body.admin-page input.user-search { border-radius: 999px; border: none; background: #ffffff; box-shadow: 0 18px 45px -30px rgba(15, 23, 42, 0.55); padding: 0.72rem 1.4rem; width: min(320px, 100%); } body.admin-page .user-search:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25); } .admin-toolbar { display: flex; align-items: center; gap: 0.75rem; } body.admin-page .admin-toolbar .admin-portfolio-filters { background: transparent; box-shadow: none; padding: 0; } .admin-secondary-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .admin-secondary-card { background: var(--admin-surface); border-radius: 22px; border: 1px solid var(--admin-card-border); box-shadow: var(--admin-panel-shadow); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; } .admin-secondary-card h4 { font-weight: 600; color: var(--admin-text); } .admin-secondary-card p { color: var(--admin-text-muted); margin: 0; } .admin-status-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border-radius: 999px; background: rgba(34, 197, 94, 0.12); color: #15803d; font-weight: 600; } .admin-resource-links { display: flex; flex-wrap: wrap; gap: 0.65rem; } .admin-resource-links a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.1rem; border-radius: 999px; background: rgba(99, 102, 241, 0.12); color: var(--admin-primary-dark); font-weight: 600; } .admin-resource-links a:hover { background: rgba(99, 102, 241, 0.22); } body.admin-page .alert { border-radius: 14px; border: none; box-shadow: 0 18px 45px -28px rgba(15, 23, 42, 0.35); } body.admin-page .scroll-top { background: var(--admin-primary); color: #ffffff; box-shadow: 0 20px 50px -32px rgba(99, 102, 241, 0.65); } body.admin-page .scroll-top:hover { background: var(--admin-primary-dark); } @media (max-width: 1199px) { body.admin-page .header { width: 260px; left: -100%; } /* >>> Profile page styles consolidated from profile-fix.css >>> */ /* Profile Page Background Fix - Clean Solution */ /* Reset any conflicting styles */ .profile-page { position: relative; padding-top: 0; min-height: auto; } /* Background image container */ .profile-page .profile__bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; object-position: center; z-index: 0; filter: brightness(0.7); pointer-events: none; } /* Section title overlays the background */ .profile-page .section-title { /* Place the title near the top like the Leaderboard page */ position: relative; z-index: 2; display: block; height: auto; padding-top: 8px; padding-bottom: 12px; text-align: center; margin-bottom: 0; } .profile-page .section-title h2 { color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); margin: 0; transform: translateY(-6px); } /* Centered underline under the h2 */ .profile-page .section-title h2 { position: relative; text-align: center; } .profile-page .section-title h2::after { content: ''; display: block; width: 120px; height: 4px; background: rgba(255,255,255,0.85); margin: 12px auto 0 auto; border-radius: 2px; } /* Container with content starts below the background */ .profile-page > .container { position: relative; z-index: 2; margin-top: -80px; /* Slight overlap so header aligns near top */ } /* White background for content area */ .profile-page-shell { background: white; border-radius: 12px 12px 0 0; padding: 24px 24px 0 24px; box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1); } /* Responsive adjustments */ @media (max-width: 768px) { .profile-page .profile__bg { height: 250px; } .profile-page .section-title { padding-top: 40px; padding-bottom: 50px; } .profile-page > .container { margin-top: -60px; } .profile-page-shell { padding: 16px 16px 0 16px; } } /* <<< End profile-fix.css consolidation <<< */ body.admin-page .header.header-show { box-shadow: 0 30px 90px -32px rgba(12, 17, 36, 0.8); left: 0; } } @media (max-width: 768px) { .admin-module-grid { grid-template-columns: 1fr; } .admin-toolbar { width: 100%; justify-content: flex-end; } body.admin-page .league-card .card-body { padding: 1.25rem; } body.admin-page .league-card .card-header { padding: 1rem 1.25rem; } } @media (prefers-reduced-motion: reduce) { .btn-admin-primary, .btn-admin-outline, .admin-module-card, body.admin-page .navmenu a, body.admin-page .league-card { transition: none; } } /* Strong override: ensure profile hero background is fixed and covers viewport */ .profile-page .profile__bg { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100vh !important; /* object-fit: cover !important; */ object-position: center !important; z-index: 0 !important; pointer-events: none !important; } /* Also support the alternate page class used in the template (.ppage) */ .profile-page .profile__bg, .ppage .ppage-bg { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100vh !important; /* object-fit: cover !important; */ object-position: center !important; z-index: 0 !important; pointer-events: none !important; } /* Overlay (dim) that covers entire viewport but does not block interactions */ .profile-page::before, .ppage::before { content: "" !important; position: fixed !important; inset: 0 !important; /* Prefer color-mix with theme variable where supported, fall back to rgba */ background: color-mix(in srgb, var(--background-color), transparent 30%) !important; z-index: 1 !important; pointer-events: none !important; } /* Ensure page content stacks above the overlay */ .profile-page .container, .ppage .container, .profile-page .ppage-page-shell, .ppage .ppage-page-shell { position: relative !important; z-index: 2 !important; } .ppage.section { position: relative; overflow: visible; } .ppage .container, .leaderboard .ppage-shell { position: relative; z-index: 3; } /* Add translucent overlay to leaderboard like other hero sections */ .ppage::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--background-color), transparent 32%); z-index: 2; pointer-events: none; }