/* Minification failed. Returning unminified contents. (9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (38,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (39,23): run-time error CSS1039: Token not allowed after unary operator: '-ir-font' (55,41): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (57,41): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent-hover' (58,41): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (59,53): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (65,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (77,58): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (100,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (161,27): run-time error CSS1039: Token not allowed after unary operator: '-focus' (178,31): run-time error CSS1039: Token not allowed after unary operator: '-focus-sm' (178,47): run-time error CSS1039: Token not allowed after unary operator: '-focus' (183,31): run-time error CSS1039: Token not allowed after unary operator: '-focus-md' (183,47): run-time error CSS1039: Token not allowed after unary operator: '-focus-sm' (183,63): run-time error CSS1039: Token not allowed after unary operator: '-focus' (197,31): run-time error CSS1039: Token not allowed after unary operator: '-focus-lg' (197,47): run-time error CSS1039: Token not allowed after unary operator: '-focus-md' (197,63): run-time error CSS1039: Token not allowed after unary operator: '-focus-sm' (197,79): run-time error CSS1039: Token not allowed after unary operator: '-focus' (202,31): run-time error CSS1039: Token not allowed after unary operator: '-focus-xl' (202,47): run-time error CSS1039: Token not allowed after unary operator: '-focus-lg' (202,63): run-time error CSS1039: Token not allowed after unary operator: '-focus-md' (202,79): run-time error CSS1039: Token not allowed after unary operator: '-focus-sm' (202,95): run-time error CSS1039: Token not allowed after unary operator: '-focus' (321,14): run-time error CSS1039: Token not allowed after unary operator: '-ir-club-lightblue' (322,14): run-time error CSS1039: Token not allowed after unary operator: '-ir-club-lightblue' (325,14): run-time error CSS1039: Token not allowed after unary operator: '-ir-club-red' (326,14): run-time error CSS1039: Token not allowed after unary operator: '-ir-club-red' (330,14): run-time error CSS1039: Token not allowed after unary operator: '-ir-club-lightblue' (331,14): run-time error CSS1039: Token not allowed after unary operator: '-ir-club-lightblue' (334,14): run-time error CSS1039: Token not allowed after unary operator: '-ir-club-red' (335,14): run-time error CSS1039: Token not allowed after unary operator: '-ir-club-red' (345,56): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (367,56): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (368,37): run-time error CSS1039: Token not allowed after unary operator: '-ir-text-muted' (369,39): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (415,117): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (422,32): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (424,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-text-muted' (475,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (483,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (488,35): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (546,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (584,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (589,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary-light' (604,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (609,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (612,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-row-hover-bg' (613,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (674,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (675,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (679,22): run-time error CSS1039: Token not allowed after unary operator: '-ir-shadow' (689,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (737,24): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (743,35): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (861,23): run-time error CSS1039: Token not allowed after unary operator: '-ir-font' (864,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (866,22): run-time error CSS1039: Token not allowed after unary operator: '-ir-shadow' (874,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-table-header-fg' (885,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-table-header-bg' (888,65): run-time error CSS1039: Token not allowed after unary operator: '-ir-male-bg' (888,93): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (889,65): run-time error CSS1039: Token not allowed after unary operator: '-ir-female-bg' (889,93): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (895,69): run-time error CSS1039: Token not allowed after unary operator: '-ir-male-bg' (895,97): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (896,69): run-time error CSS1039: Token not allowed after unary operator: '-ir-female-bg' (896,97): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (918,35): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (921,70): run-time error CSS1039: Token not allowed after unary operator: '-ir-row-stripe' (922,70): run-time error CSS1039: Token not allowed after unary operator: '-ir-row-hover-bg' (930,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (935,69): run-time error CSS1039: Token not allowed after unary operator: '-ir-male-bg' (936,69): run-time error CSS1039: Token not allowed after unary operator: '-ir-female-bg' (937,84): run-time error CSS1039: Token not allowed after unary operator: '-ir-male-bg' (938,84): run-time error CSS1039: Token not allowed after unary operator: '-ir-female-bg' (941,35): run-time error CSS1039: Token not allowed after unary operator: '-ir-male-bg' (942,35): run-time error CSS1039: Token not allowed after unary operator: '-ir-female-bg' (970,35): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (975,70): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (1015,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (1025,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (1036,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (1037,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1042,74): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (1050,102): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1055,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (1067,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-table-header-bg' (1073,62): run-time error CSS1039: Token not allowed after unary operator: '-ir-row-stripe' (1074,51): run-time error CSS1039: Token not allowed after unary operator: '-ir-text-muted' (1075,51): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (1081,62): run-time error CSS1039: Token not allowed after unary operator: '-ir-row-hover-bg' (1102,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-text-muted' (1108,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (1109,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-row-hover-bg' (1127,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1127,46): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1130,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (1131,27): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1131,44): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1136,67): run-time error CSS1039: Token not allowed after unary operator: '-ir-row-hover-bg' (1140,89): run-time error CSS1039: Token not allowed after unary operator: '-ir-text-muted' (1158,54): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1158,105): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (1158,137): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (1160,64): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (1160,96): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (1170,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (1171,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (1172,23): run-time error CSS1039: Token not allowed after unary operator: '-ir-font' (1177,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1181,24): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (1186,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (1188,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-text-muted' (1190,30): run-time error CSS1039: Token not allowed after unary operator: '-ir-font' (1196,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (1199,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1201,23): run-time error CSS1039: Token not allowed after unary operator: '-ir-font' (1211,39): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary-light' (1218,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (1219,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1221,23): run-time error CSS1039: Token not allowed after unary operator: '-ir-font' (1224,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (1271,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (1272,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1273,36): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (1296,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (1297,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1310,42): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (1310,75): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1317,63): run-time error CSS1039: Token not allowed after unary operator: '-ir-row-stripe' (1324,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (1325,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1332,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (1349,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-text-muted' (1358,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-row-hover-bg' (1360,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (1364,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (1369,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-row-stripe' (1372,75): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1381,33): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (1382,37): run-time error CSS1039: Token not allowed after unary operator: '-ir-text-muted' (1385,35): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (1393,42): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (1394,42): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (1398,55): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (1399,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1404,48): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (1405,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1408,88): run-time error CSS1039: Token not allowed after unary operator: '-ir-text-muted' (1457,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (1458,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (1461,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-text' (1469,24): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (1472,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (1475,41): run-time error CSS1039: Token not allowed after unary operator: '-ir-male-bg' (1476,41): run-time error CSS1039: Token not allowed after unary operator: '-ir-female-bg' (1628,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-row-stripe' (1631,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-row-hover-bg' (1638,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-table-header-bg' (1645,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1646,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1647,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1698,29): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (1705,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-text-muted' (1745,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1746,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1827,27): run-time error CSS1030: Expected identifier, found '>' (1827,41): run-time error CSS1031: Expected selector, found ')' (1827,41): run-time error CSS1025: Expected comma or open brace, found ')' (2003,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (2004,33): run-time error CSS1039: Token not allowed after unary operator: '-ir-accent' (2005,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (2008,22): run-time error CSS1039: Token not allowed after unary operator: '-ir-shadow' (2055,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (2103,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (2104,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (2105,22): run-time error CSS1039: Token not allowed after unary operator: '-ir-shadow' (2114,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-text-muted' (2120,17): run-time error CSS1039: Token not allowed after unary operator: '-ir-primary' (2134,28): run-time error CSS1039: Token not allowed after unary operator: '-ir-border' (2135,25): run-time error CSS1039: Token not allowed after unary operator: '-ir-radius' (2137,22): run-time error CSS1039: Token not allowed after unary operator: '-ir-shadow' */ /* =============================================== Ivanhoe Runners – Site Styles (modernised) =============================================== */ /* ----------------------------------------------- CSS Custom Properties (Design Tokens) ----------------------------------------------- */ :root { --ir-primary: #1a3c6e; --ir-primary-light: #2155a0; --ir-accent: #1a7fd4; --ir-accent-hover: #1464aa; --ir-table-header-bg: #1a7fd4; --ir-table-header-fg: #ffffff; --ir-row-stripe: #f4f8fc; --ir-row-hover-bg: #d6eaf8; --ir-male-bg: #cfe8fc; --ir-female-bg: #fce4ec; --ir-border: #dee2e6; --ir-text: #212529; --ir-text-muted: #6c757d; --ir-shadow: 0 1px 4px rgba(0,0,0,.1); --ir-radius: 6px; --ir-font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, sans-serif; /* Club colours – used in banner accents and elsewhere */ --ir-club-lightblue: #7ec8f2; --ir-club-red: #d62828; } /* ----------------------------------------------- Base ----------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { color: var(--ir-text); font-family: var(--ir-font); font-size: .9rem; line-height: 1.6; background-color: #f0f4f8; background-image: url("../Images/linear-gradient-bk.gif"); background-repeat: repeat-x; } /* ----------------------------------------------- Links ----------------------------------------------- */ /* Exclude anchors styled as Bootstrap buttons (.btn) – they get their text colour from Bootstrap's button variants (.btn-primary, .btn-danger, etc.) and our accent-blue link colour would clash with the button background (e.g. blue text on a blue .btn-primary). The outline-focus rule still applies to .btn anchors for keyboard accessibility. */ a:not(.btn) { color: var(--ir-accent); text-decoration: none; } a:not(.btn):hover, a:not(.btn):focus { color: var(--ir-accent-hover); text-decoration: underline; } a:not(.btn):visited { color: var(--ir-accent); } a:focus { outline: 3px solid var(--ir-accent); outline-offset: 2px; } /* ----------------------------------------------- Headings ----------------------------------------------- */ h1, h2, h3, h4, h5, h6 { color: var(--ir-primary); font-weight: 700; line-height: 1.3; margin-top: 0; margin-bottom: .5rem; } h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.1rem; } h5, h6 { font-size: 1rem; } h2 a, h2 a:link, h2 a:visited, h2 a:active { color: var(--ir-primary); text-decoration: none; } h2 a:hover { text-decoration: underline; } h5 a, h5 a:link, h5 a:visited, h5 a:active { text-decoration: none; padding: 0; } mark { background-color: #b3d9f7; padding: 2px 5px; border-radius: 3px; } /* ----------------------------------------------- HR ----------------------------------------------- */ hr { border: none; /* Brand-tinted slate so the divider reads cleanly on the white page body without looking like a heavy black rule. */ border-top: 1px solid rgba(26, 60, 110, .55); margin: 1rem 0; opacity: 1; /* Bootstrap 5 sets opacity:.25 on
– undo it */ } /* ----------------------------------------------- Header Banner ----------------------------------------------- */ .header-background { position: relative; background-color: var(--ir-primary); overflow: hidden; width: 100%; /* Mobile-first fixed banner height – images get cropped to fit */ height: 160px; } /* Tablet / desktop banner heights (kept modest so the photo isn't too tall) */ @media (min-width: 576px) { .header-background { height: 220px; } } @media (min-width: 992px) { .header-background { height: 280px; } } @media (min-width: 1400px) { .header-background { height: 320px; } } /* Force the carousel and ALL its inner wrappers to fill the banner. Without this, Bootstrap's .carousel-inner has no height, so height:100% on the image collapses and the escapes at its natural size. */ .header-background .carousel, .header-background .carousel-inner, .header-background .carousel-item, .header-background .carousel-item.active { height: 100%; width: 100%; } /* Stack fade slides on top of each other so the banner height is constant regardless of which image is active. */ .header-background .carousel-item { position: absolute; inset: 0; display: block; /* override Bootstrap's display:none for fade */ opacity: 0; transition: opacity .6s ease-in-out; } .header-background .carousel-item.active { opacity: 1; z-index: 1; } /* Banner images – any size/aspect ratio works; cover crops to fit. Focal point is driven by CSS custom properties so each image can be tuned per breakpoint directly from the markup: style="--focus: 50% 85%; --focus-md: 50% 42%; --focus-xl: 50% 30%;" --focus is the mobile-first default (required) --focus-sm overrides at >=576px (optional) --focus-md overrides at >=768px (optional) --focus-lg overrides at >=992px (optional) --focus-xl overrides at >=1200px (optional) Each breakpoint falls back to the previous one if not set. The left edge is masked to transparent so the photo fades into the solid --ir-primary banner background, giving the logo a clean, image-agnostic area to sit on (no vignette / no overlap with faces). */ .header-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, center 35%); /* Mobile-first: long, gentle fade – no visible seam between the navy panel and the photo. */ -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,1) 58%, rgba(0,0,0,1) 100%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,1) 58%, rgba(0,0,0,1) 100%); } @media (min-width: 576px) { .header-image { object-position: var(--focus-sm, var(--focus, center 35%)); } } @media (min-width: 768px) { .header-image { object-position: var(--focus-md, var(--focus-sm, var(--focus, center 35%))); /* Tablet+: more horizontal room, so a shorter, softer fade is enough. */ -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,1) 100%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,1) 100%); } } @media (min-width: 992px) { .header-image { object-position: var(--focus-lg, var(--focus-md, var(--focus-sm, var(--focus, center 35%)))); } } @media (min-width: 1200px) { .header-image { object-position: var(--focus-xl, var(--focus-lg, var(--focus-md, var(--focus-sm, var(--focus, center 35%))))); /* Large desktop: tighten the fade further – the logo is proportionally smaller. */ -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 100%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 100%); } } /* Logo overlay – sits ABOVE the carousel. No background panel: the visual separation comes from a soft halo on the logo image itself (see .header-logo below) plus the subtle top-left vignette on .header-background, so the gold filigree reads cleanly against any photo without looking like a sticker. */ .header-logo-link { position: absolute; top: 6px; left: 6px; z-index: 20; line-height: 0; display: inline-block; } @media (min-width: 576px) { .header-logo-link { top: 10px; left: 10px; } } .header-logo { /* Bumped up on mobile so the "ASHBY-DE-LA-ZOUCH" subtext is actually legible at phone sizes. Desktop sizes pulled up a touch to keep the progression smooth. */ height: 110px; width: auto; max-width: 55vw; /* Halo on the gold filigree — needed even though the logo now sits on the solid --ir-primary panel, because gold-on-navy has low edge contrast (both are mid-luminance). Keep it tighter than the original "lift off the photo" version: 1) Tight bright halo – sharpens the filigree edges 2) Medium soft glow – gentle separation from the navy 3) Subtle dark shadow – grounds the logo, adds depth */ filter: drop-shadow(0 0 2px rgba(255, 255, 255, .7)) drop-shadow(0 0 4px rgba(255, 255, 255, .35)) drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); } @media (min-width: 576px) { .header-logo { height: 120px; } } @media (min-width: 992px) { .header-logo { height: 140px; } } /* Facebook icon – top-right overlay. Same halo philosophy as the logo: no panel, just a soft glow on the icon itself so it reads cleanly against any photo. */ .header-fb-link { position: absolute; top: 6px; right: 6px; z-index: 20; line-height: 0; } .header-fb-link img { border: none; display: block; width: 26px; height: 26px; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95)) drop-shadow(0 0 6px rgba(255, 255, 255, .6)) drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); } @media (min-width: 576px) { .header-fb-link { top: 10px; right: 10px; } .header-fb-link img { width: 30px; height: 30px; } } /* Banner motto / tagline – overlaid on the bottom of the carousel */ .header-motto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; margin: 0; padding: 8px 14px 6px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; font-family: Georgia, "Times New Roman", "Palatino Linotype", serif; font-style: italic; font-weight: 400; font-size: clamp(.8rem, 2.6vw, 1.2rem); letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0,0,0,.7); background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%); pointer-events: none; } /* Wrap the words in a span so the flex children stay clean. (Plain text nodes inside flex containers can be tricky to whitespace-style.) */ .header-motto > .motto-text { white-space: nowrap; flex: 0 0 auto; } /* Accent bars – fill all remaining horizontal space on each side */ .header-motto::before, .header-motto::after { content: ""; flex: 1 1 0; min-width: 16px; max-width: 220px; /* cap on very wide screens so they don't dominate */ height: 2px; border-radius: 1px; background: linear-gradient(to right, var(--ir-club-lightblue) 0%, var(--ir-club-lightblue) 33%, #fff 33%, #fff 66%, var(--ir-club-red) 66%, var(--ir-club-red) 100%); } .header-motto::after { background: linear-gradient(to left, var(--ir-club-lightblue) 0%, var(--ir-club-lightblue) 33%, #fff 33%, #fff 66%, var(--ir-club-red) 66%, var(--ir-club-red) 100%); } @media (min-width: 576px) { .header-motto { padding: 12px 20px 10px; gap: 16px; } } @media (min-width: 992px) { .header-motto { padding: 16px 24px 12px; gap: 20px; } } @media (min-width: 1400px) { .header-motto { padding: 18px 28px 14px; gap: 24px; } } /* ----------------------------------------------- Page Layout ----------------------------------------------- */ .content-wrapper { background-color: #fff; color: var(--ir-text); } .site-body { background-color: #fff; padding-top: 0 !important; } .site-body > .row { margin-top: 0; } .main-content { min-width: 0; } .featured { background-color: transparent; min-width: 0; } /* Ensure responsive tables inside columns can shrink. The bespoke tables (results-table, pb-table, etc.) and the dynamic-page table rules further down both set explicit widths; this is just a global safety cap. */ .main-content .table-responsive { max-width: 100%; } /* Force the featured sidebar to sit on the right at md+ */ @media (min-width: 768px) { .site-body > .row { flex-wrap: nowrap; } } /* ----------------------------------------------- hgroup.title (breadcrumb row) ----------------------------------------------- */ hgroup.title { margin-bottom: .75rem; } hgroup.title h2 { font-size: 1.4rem; color: var(--ir-primary); } hgroup.title h2 a { color: var(--ir-text-muted); font-weight: 400; } hgroup.title h2 a:hover { color: var(--ir-primary); } /* Keep the title and edit-page icon on the same line */ .page-title-row { margin-bottom: .75rem; } .page-title-row hgroup.title, .page-title-row hgroup.title h1, .page-title-row hgroup.title h2, .page-title-row hgroup.title h3 { display: inline; margin: 0; } .edit-page-link { display: inline-block; margin-left: .35rem; vertical-align: baseline; line-height: 0; white-space: nowrap; /* keeps the icon glued to the previous word */ } .edit-page-link img { opacity: .65; transition: opacity .15s ease; vertical-align: middle; } .edit-page-link:hover img { opacity: 1; } /* Dynamic-page header divider spacing. The title +
render in their own `.page-header` row, while the body starts in a SEPARATE `.main-content pt-3` row (1rem top padding). Because the two sit in different flex rows their vertical margins don't collapse, so the
's default 1rem bottom margin stacked on top of the body row's 1rem top padding – leaving ~2rem of dead space between the divider and the first line of content (the page intro / motto). Pull the divider's own margins in so the gap above and below it is tight and even; the body row's pt-3 still provides the breathing room beneath it. Applies to every dynamic page that uses the pageHeader slot (Worthington 6, Ashby 20, etc.). */ .page-header hr { margin-top: .5rem; margin-bottom: 0; } /* ----------------------------------------------- Float helpers ----------------------------------------------- */ .float-left { float: left; } .float-right { float: right; } .float-centre { text-align: center; } .clear-fix::after { content: ""; clear: both; display: block; } /* Medium image (home page) */ .main-content .medium-image { overflow: hidden; position: relative; margin-bottom: 1rem; } .main-content .medium-image img { width: 180px; height: auto; float: left; padding-right: 12px; border-radius: var(--ir-radius); } /* ----------------------------------------------- Footer ----------------------------------------------- */ footer { background-color: #e9ecef; border-top: 1px solid var(--ir-border); font-size: .8rem; color: var(--ir-text-muted); } /* Old #menu hidden – replaced by Bootstrap navbar */ ul#menu { display: none; } /* ----------------------------------------------- Navbar – tab styling & colour overrides ----------------------------------------------- */ /* Base nav link */ .navbar .nav-link { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,.85) !important; border-radius: 4px 4px 0 0; padding: .5rem .75rem; transition: background-color .15s ease, color .15s ease; white-space: nowrap; } /* At the navbar's expand breakpoint (xl = 1200px) the full menu has to fit on a single row. The "Members" item is currently disabled (see NavMenu.Items), which freed up enough horizontal room that we no longer need the aggressive squeeze that used to be needed here to keep 13 items on one line at exactly 1200px - we can keep the default 1rem font size and only trim the horizontal padding a touch. If "Members" comes back, restore the tighter font-size: .92rem so the full menu still fits at 1200px without wrapping. */ @media (min-width: 1200px) and (max-width: 1399.98px) { .navbar .nav-link { padding: .5rem .6rem; } } /* Fix visited links going blue inside the navbar */ .navbar .nav-link:visited { color: rgba(255,255,255,.85) !important; } /* Hover state */ .navbar .nav-link:hover, .navbar .nav-link:focus { color: #fff !important; background-color: rgba(255,255,255,.15); text-decoration: none; } /* Active "tab" – white background connecting to the page body */ .navbar .nav-link.active { background-color: #fff !important; color: var(--ir-primary) !important; font-weight: 700; border-radius: 4px 4px 0 0; border-bottom: 3px solid #fff; margin-bottom: -3px; padding-bottom: calc(.5rem + 3px); } .navbar .nav-link.active:visited { color: var(--ir-primary) !important; } /* Bottom accent line on the navbar itself */ .navbar { border-bottom: 3px solid var(--ir-accent); padding-bottom: 0; /* let the active tab sit flush with the body */ } /* Make sure nav items align to the bottom of the navbar so the active tab visually connects to the white page body below */ .navbar .navbar-nav { align-items: flex-end; } .navbar .nav-item { display: flex; } /* Navbar brand – breadcrumb style, only visible when the navbar is collapsed (hidden via .d-xl-none in the markup at the xl breakpoint). */ .navbar-brand { /* Fluidly scale between .85rem on ~320px screens and 1.1rem on ~480px+ so the brand always fits alongside the account dropdown + toggler. */ font-size: clamp(.85rem, 3.2vw, 1.1rem); color: #fff !important; letter-spacing: .01em; /* Remove Bootstrap's default vertical padding & right margin so the chip can align flush with the bottom of the navbar / top of the page body. */ padding-top: 0; padding-bottom: 0; margin-right: .5rem; /* Stick to the bottom of the navbar regardless of the navbar's height, so the white "current page" chip visually connects to the body below. */ align-self: flex-end; display: inline-flex; align-items: flex-end; gap: .35rem; line-height: 1; /* Allow the brand to shrink past its content width so the account dropdown + toggler always stay on the same row as the brand. */ min-width: 0; flex: 0 1 auto; /* NOTE: deliberately NO overflow:hidden here. The chip uses margin-bottom:-3px to overhang and cover the navbar's blue accent border; clipping the brand would let that blue strip show through. */ } .navbar-brand .brand-crumb { color: rgba(255, 255, 255, .85); font-weight: 500; padding-bottom: .5rem; flex: 0 0 auto; } .navbar-brand .brand-separator { color: rgba(255, 255, 255, .55); font-weight: 400; padding-bottom: .5rem; flex: 0 0 auto; } /* The current-page chip – matches .navbar .nav-link.active exactly so the white background sits flush over the navbar's 3px blue accent border. Allowed to shrink and truncate with an ellipsis if the page name is ridiculously long for the viewport. */ .navbar-brand .brand-current { background-color: #fff; color: var(--ir-primary); font-weight: 700; border-radius: 4px 4px 0 0; border-bottom: 3px solid #fff; margin-bottom: -3px; padding: .5rem .6rem calc(.5rem + 3px); line-height: 1; min-width: 0; flex: 0 1 auto; max-width: 100%; white-space: nowrap; overflow: hidden; /* truncation lives on the chip itself */ text-overflow: ellipsis; } /* On narrow phones, drop the "Home /" prefix so the page chip + account + toggler all fit on one row. The active chip alone is still a fine "you are here" indicator at those sizes. */ @media (max-width: 400px) { .navbar-brand .brand-crumb, .navbar-brand .brand-separator { display: none; } } /* Brand crumb + chip render as links on mobile, but must keep the navbar palette (no global accent-blue colour, no underline). */ .navbar-brand a.brand-crumb, .navbar-brand a.brand-crumb:visited { color: rgba(255, 255, 255, .85); text-decoration: none; } .navbar-brand a.brand-crumb:hover, .navbar-brand a.brand-crumb:focus { color: #fff; text-decoration: underline; } .navbar-brand a.brand-current, .navbar-brand a.brand-current:visited { color: var(--ir-primary); text-decoration: none; } .navbar-brand a.brand-current:hover, .navbar-brand a.brand-current:focus { color: var(--ir-primary-light); text-decoration: none; background-color: #fff; /* keep the white chip background */ } /* Make sure the account block + toggler don't shrink, so it's the brand that gives way when space is tight (not the login/menu controls). */ .navbar-account, .navbar > .container-fluid > .navbar-toggler { flex: 0 0 auto; } /* Dropdown menu for user account */ .navbar .dropdown-menu { min-width: 180px; border-radius: var(--ir-radius); box-shadow: 0 4px 12px rgba(0,0,0,.15); } .navbar .dropdown-item { font-size: .9rem; color: var(--ir-text); } .navbar .dropdown-item:hover { background-color: var(--ir-row-hover-bg); color: var(--ir-primary); } /* Account/login item - always visible, even when navbar is collapsed. (flex sizing handled by the .navbar-account, .navbar-toggler rule above.) */ .navbar-account .nav-link { padding: .35rem .6rem; } /* Desktop (xl+): account sits at far right of the navbar, so right-aligning the menu to its own toggle is exactly what we want. */ .navbar-account .dropdown-menu { right: 0; left: auto; } /* Mobile / collapsed navbar (< xl): the account toggle sits BETWEEN the brand chip and the hamburger, so right-aligning the menu to the toggle makes it overlap the hamburger. Promote the positioning context to the .navbar itself and right-align the menu to the navbar's right edge so it lands cleanly past the toggler. data-bs-display="static" on the toggle (see _LoginPartial.cshtml) disables Popper, so these CSS rules actually apply. */ @media (max-width: 1199.98px) { .navbar-account .nav-item.dropdown { position: static; } .navbar-account .dropdown-menu { position: absolute; top: 100%; right: .5rem; /* matches the navbar's container-fluid gutter */ left: auto; margin-top: .25rem; min-width: 12rem; max-width: calc(100vw - 1rem); } } /* Truncate over-long usernames so they can't push the toggler onto a second row on narrow phones. The dropdown toggle text is whatever _LoginPartial renders (typically the username); capping its width with ellipsis keeps the row tidy regardless of name length. */ .navbar-account .dropdown-toggle { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } @media (max-width: 400px) { .navbar-account .dropdown-toggle { max-width: 7.5rem; } .navbar-account .nav-link { padding: .35rem .4rem; } } @media (max-width: 360px) { .navbar-account .dropdown-toggle { max-width: 5rem; } } /* When the login is the "Log in" button variant outside the collapse, keep its small style without overflowing into the toggler. */ .navbar-account .btn { white-space: nowrap; } /* ----------------------------------------------- Fieldset / Legend (sidebar widgets) ----------------------------------------------- */ fieldset { border: 1px solid var(--ir-border); border-radius: var(--ir-radius); padding: 1rem; margin-bottom: 1rem; background-color: #fff; box-shadow: var(--ir-shadow); } /* Restore the classic "notched into the top border" legend look that Bootstrap 5's reset breaks (it forces float:left + width:100%, which pushes the legend above the border as a full-width block). */ legend { float: none; width: auto; font-size: 1rem; font-weight: 700; color: var(--ir-primary); padding: 0 .5rem; margin-bottom: 0; line-height: inherit; } /* ----------------------------------------------- Misc helpers ----------------------------------------------- */ #logoutForm { display: inline; } #login { display: block; font-size: .85em; margin: 0 0 10px; text-align: right; } #login a { background-color: #d3dce0; margin-left: 10px; padding: 2px 6px; text-decoration: none; border-radius: 3px; } #login ul { margin: 0; } #login li { display: inline; list-style: none; } .label { font-weight: 700; } .site-title { color: #fff; font-size: 1.5rem; font-weight: 700; margin: 0; } .site-title a, .site-title a:hover, .site-title a:active { color: #fff; text-decoration: none; } /* =============================================== TABLES – general =============================================== */ table { border-collapse: collapse; } table input[type="checkbox"] { padding: 0; margin: 3px 0 0; } th a { position: relative; } th.ascdesc a::after { content: ' \25B2\25BC'; font-size: .6em; margin-left: 2px; } /* --- Dynamic page tables (editor output) -------------------------------- The rich-text editor used on dynamic pages and news articles emits plain markup without Bootstrap's .table class. Apply Bootstrap-equivalent styling to every UNCLASSED table that appears inside the rendered body so committee-authored tables look consistent with the rest of the site without editors needing to set classes manually. The `:not([class])` filter is important - it stops these rules bleeding onto bespoke tables (results-table, pb-table, crecord-table, runners-table, etc.) which have their own carefully tuned styling. */ .main-content table:not([class]) { width: 100%; max-width: 100%; margin-bottom: 1rem; color: inherit; vertical-align: top; border-color: var(--ir-border); border-collapse: collapse; } .main-content table:not([class]) > :not(caption) > * > * { padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--ir-border); } .main-content table:not([class]) > thead { vertical-align: bottom; background-color: #f8f9fa; font-weight: 600; } .main-content table:not([class]) > tbody > tr:nth-of-type(odd) > * { background-color: rgba(0, 0, 0, 0.03); } .main-content table:not([class]) > tbody > tr:hover > * { background-color: rgba(0, 0, 0, 0.06); } /* Stop any inline width:500px (set by an editor's table dialog or left over in legacy content) shrinking the table on mobile. Inline styles still trump CSS, so we use !important here only - it's the single legitimate use of !important needed to undo legacy inline styles. */ .main-content table:not([class])[style*="width"] { max-width: 100% !important; height: auto !important; } /* --- Dynamic page media (editor output) --------------------------------- Committee-authored bodies frequently contain iframes (embedded maps, YouTube), images and other media that carry hard-coded width/height attributes set when the page was originally authored on a desktop. On mobile these overflow the column, which in turn makes the whole page horizontally scrollable and reveals the blue body background. Force every embedded media element inside the main content area (where dynamic-page bodies are rendered) to shrink to fit its container while preserving its aspect ratio. */ .main-content iframe, .main-content img, .main-content video, .main-content embed, .main-content object { max-width: 100%; height: auto; /* let height follow the scaled width */ } /* iframes don't have an intrinsic aspect ratio, so `height: auto` would collapse them. Re-assert a sensible default height for iframes and let any inline `height="…"` attribute or aspect-ratio style win. */ .main-content iframe { height: revert; aspect-ratio: 16 / 10; /* used only when no explicit height is set */ width: 100%; max-width: 680px; /* matches the existing .map-embed cap */ } /* If the author set an inline width via the HTML width="…" attribute, the browser converts that to a presentational hint that loses to CSS. This rule makes that explicit and stops fixed pixel widths leaking through. Inline `style="width:…px"` is still handled via max-width above. */ .main-content [width] { max-width: 100%; } /* Editor-authored body images are frequently pasted with an inline pixel HEIGHT (e.g. style="height:510px;width:680px") captured when the page was first authored on a wide desktop screen. An inline style beats the generic `.main-content img { height:auto }` rule above (inline declarations outrank any stylesheet selector), so on a narrow phone the WIDTH scales down to fit the column while the HEIGHT stays pinned at 510px – squashing / distorting the photo. Re-assert height:auto with !important whenever a body image carries an inline height so the height always follows the scaled width and the aspect ratio is preserved. This is the same single-purpose !important pattern already used for legacy inline table widths above. */ .main-content img[style*="height"] { height: auto !important; } /* …with one exception: the multi-image gallery thumbnails (produced by NewsContentSanitizer.GroupGalleryAnchors when a body contains a run of 2+ pasted images) deliberately fill a fixed 4:3 box via height:100%. Re-assert that at a higher specificity than the safety net above so grouped galleries keep their uniform grid even though their s also carry the editor's inline height. A lone pasted image is NOT wrapped in .news-gallery, so the safety net still fixes single distorted photos. */ .main-content .news-gallery a img { height: 100% !important; } /* ----------------------------------------------- Global horizontal-overflow safety net ----------------------------------------------- */ /* Belt-and-braces: even if one element manages to overflow, prevent the whole page from becoming horizontally scrollable so the blue body background can't be revealed to the right of the content column. `overflow-x: clip` is preferred over `hidden` because it doesn't create a new scroll container and doesn't break `position: sticky`. */ html, body { overflow-x: clip; } /* ----------------------------------------------- Records table ----------------------------------------------- */ table.results-table td.record-medal-cell { width: 28px; text-align: center; } table.results-table td.record-new-cell { width: 36px; text-align: center; } /* ----------------------------------------------- Results table ----------------------------------------------- */ table.results-table { border-collapse: collapse; border-spacing: 0; width: 100%; font-family: var(--ir-font); font-size: .875rem; background-color: #fff; border-radius: var(--ir-radius); overflow: hidden; box-shadow: var(--ir-shadow); margin-bottom: 1rem; } table.results-table#racerun, #distances, #malecat, #femalecat, #terrains { width: auto; } table.results-table thead { color: var(--ir-table-header-fg); vertical-align: bottom; } table.results-table thead th { /* Paint the header background on the cells themselves, NOT on , so utility columns (PB badge, row-actions) can override to a transparent/white background. No bottom border on the header cells – the solid blue band is its own separator, and a bottom border was painting a faint "silver" line over the blue (rgba(0,0,0,.15)) plus creating a vertical step where the blue cells met the white pb-col / row-actions-col cells. */ background-color: var(--ir-table-header-bg); border-bottom: 0 !important; } table.results-table#malecat thead th { background-color: var(--ir-male-bg); color: var(--ir-text); } table.results-table#femalecat thead th { background-color: var(--ir-female-bg); color: var(--ir-text); } /* Same male/female header colouring exposed as a class, so pages that want the colour but NOT the auto-width behaviour of the standards- page id selectors can opt in independently. Used by the All Runners page (_AllRunnersGenderTable.cshtml). */ table.results-table.runners-cat-M thead th { background-color: var(--ir-male-bg); color: var(--ir-text); } table.results-table.runners-cat-F thead th { background-color: var(--ir-female-bg); color: var(--ir-text); } table.results-table th { font-size: .875rem; font-weight: 600; text-align: left; padding: 8px 6px; letter-spacing: .02em; } table.results-table th.standardh1 { font-size: .85rem; } table.results-table th.standardh2 { font-size: .78rem; } table.results-table th a:link, table.results-table th a:visited, table.results-table th a:active, table.results-table th a:hover { color: #fff; text-decoration: none; } table.results-table th a:hover { color: #ddeeff; text-decoration: underline; } table.results-table td { padding: 5px 6px; vertical-align: middle; } table.results-table td.worldstd { font-weight: bold; } table.results-table tbody tr { border-bottom: 1px solid var(--ir-border); transition: background-color .12s ease; } table.results-table tbody tr.highlighted { background-color: var(--ir-row-stripe); } table.results-table.rowhover tbody tr:hover { background-color: var(--ir-row-hover-bg); cursor: pointer; } /* Gender category rows (stats pages) */ table.results-table tbody tr.statcategoryM, table.results-table tbody tr.statcategoryF { font-weight: bold; font-size: .94rem; cursor: default; color: var(--ir-text); text-align: center; border-top: 2px solid rgba(0,0,0,.15); border-bottom: 2px solid rgba(0,0,0,.15); } table.results-table tbody tr.statcategoryM { background-color: var(--ir-male-bg); } table.results-table tbody tr.statcategoryF { background-color: var(--ir-female-bg); } table.results-table.rowhover tbody tr.statcategoryM:hover { background-color: var(--ir-male-bg); cursor: default; } table.results-table.rowhover tbody tr.statcategoryF:hover { background-color: var(--ir-female-bg); cursor: default; } /* Gender helpers */ table .M { background-color: var(--ir-male-bg); } table .F { background-color: var(--ir-female-bg); } /* New PB badge */ table.results-table td.newpb { text-align: right; white-space: nowrap; } table.results-table td.newpb span { font-size: .7rem; } table.results-table.rowhover tbody tr:hover td.newpb span { display: inline-block; } /* County standards colours */ table.results-table td.countystd { font-weight: bold; } table.results-table td.countystd img.countyflag { width: 53px; height: 32px; } table.results-table td.countystd span.countyrhodium { color: purple; } table.results-table td.countystd span.countyplatinum { color: palevioletred; } table.results-table td.countystd span.countydiamond { color: #35b5cc; } table.results-table td.countystd span.countygold { color: #c8950a; } table.results-table td.countystd span.countysilver { color: #888; } table.results-table td.countystd span.countybronze { color: saddlebrown; } table.results-table td.countystd span.countycopper { color: #ad4f2c; } table.results-table td span.countypewter { color: #928978; } table.results-table td span.countytungsten { color: #555; } /* ----------------------------------------------- Admin – Manage User Accounts (legacy table – kept for back-compat with any other view that still uses the #manage-user-accounts id) ----------------------------------------------- */ table#manage-user-accounts { border-collapse: collapse; border-spacing: 0; width: 100%; } table#manage-user-accounts th { font-size: 1rem; text-align: left; border-bottom: 2px solid var(--ir-primary); padding: 6px 5px; } table#manage-user-accounts td { padding: 5px; } table#manage-user-accounts td.rborder, table#manage-user-accounts th.rborder { border-right: 1px solid var(--ir-border); vertical-align: text-top; } table#manage-user-accounts .user-table { width: 100%; } /* ----------------------------------------------- Admin – Manage User Accounts (card layout) ----------------------------------------------- The role selector and the user list now live in side-by-side Bootstrap cards. The role buttons share a left-aligned icon column so the labels start at a consistent x-position regardless of the icon (people / pencil / person) and regardless of whether the label wraps (e.g. "Content Provider"). */ .manage-user-accounts .role-selector .role-selector-btn { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; text-align: left; white-space: normal; line-height: 1.25; padding: .55rem .85rem; min-height: 2.75rem; } .manage-user-accounts .role-selector .role-selector-btn i.bi { flex: 0 0 1.25rem; /* fixed icon column => labels line up */ font-size: 1.05rem; text-align: center; line-height: 1; } .manage-user-accounts .role-selector .role-selector-btn span { flex: 1 1 auto; min-width: 0; } /* Role descriptions list – swaps the loose

rows for a clean

so each role's icon, name and description read as one item with proper indentation. */ .role-descriptions dt { font-weight: 700; color: var(--ir-primary); margin-top: .5rem; } .role-descriptions dt:first-child { margin-top: 0; } .role-descriptions dt i.bi { margin-right: .35rem; vertical-align: -.1em; } .role-descriptions dd { margin: .15rem 0 .75rem 1.6rem; color: var(--ir-text); } .role-descriptions dd:last-child { margin-bottom: 0; } /* ----------------------------------------------- Runners grid (Runner/Index) ----------------------------------------------- */ table.runners-table { border: none; border-collapse: separate; border-spacing: 4px; } table.runners-table td { padding: 0; width: 137px; border: 1px solid var(--ir-border); border-radius: var(--ir-radius); text-align: center; font-weight: 600; transition: box-shadow .15s ease, border-color .15s ease; } table.runners-table tbody td:hover { cursor: pointer; border-color: var(--ir-accent); box-shadow: 0 2px 8px rgba(26,127,212,.3); } table.runners-table tbody td img { width: 115px; height: 115px; margin-top: 3px; border: 2px solid #fff; border-radius: 4px; } table.runners-table tr { height: 139px; } /* ----------------------------------------------- Runner name table (sidebar on Runner/Detail) ----------------------------------------------- */ table.runnername-table { border-spacing: 0; width: 100%; } table.runnername-table th { font-size: 1.1rem; text-align: center; padding: 8px; border-radius: var(--ir-radius); } img.runner { width: 128px; height: 128px; border-radius: 50%; border: 3px solid var(--ir-accent); display: block; margin: 4px auto; } /* ----------------------------------------------- Personal Bests / Season Bests table ----------------------------------------------- */ table.pb-table { border-spacing: 0; width: 100%; border-collapse: collapse; } table.pb-table input.input-validation-error { margin-right: 0; } table.pb-table thead th { font-size: .875rem; background-color: var(--ir-table-header-bg); color: #fff; width: 40px; text-align: center; padding: 6px 4px; } table.pb-table thead td.highlighted { background-color: var(--ir-row-stripe); } table.pb-table thead td.userdefined { color: var(--ir-text-muted); } table.pb-table thead td a { color: var(--ir-text); } table.pb-table thead td .time { text-align: center; font-size: .9rem; } table.pb-table thead td .time.userdefined { padding-left: 16px; } table.pb-table thead td .race { text-align: center; font-size: .7rem; } table.pb-table thead td .name { text-align: center; } table.pb-table thead td .date { text-align: center; font-size: .7rem; } table.pb-table thead td.hover:hover { background-color: var(--ir-row-hover-bg); text-decoration: underline; cursor: pointer; } table.pb-table-inner { width: 100%; } table.pb-table-inner.hover:hover { text-decoration: underline; } /* Small info button used inside the PB / Season Bests cards. Positioned absolutely to the right of the .time cell so the time (and the race name on the row below) stay properly centred regardless of the icon. The button itself uses a generous min size (~36px) so it offers a comfortable touch target on mobile even though the glyph itself is small. */ table.pb-table thead td .time { position: relative; } table.pb-table .pb-info-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); min-width: 36px; min-height: 36px; padding: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--ir-text-muted); line-height: 1; border-radius: 50%; } table.pb-table .pb-info-btn:hover, table.pb-table .pb-info-btn:focus-visible { color: var(--ir-text); background-color: var(--ir-row-hover-bg); text-decoration: none; } table.pb-table .pb-info-btn i { font-size: .9rem; } /* ----------------------------------------------- Club Records table ----------------------------------------------- */ table.crecord-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; } table.crecord-table a { color: inherit; text-decoration: none; } table.crecord-table thead th { font-size: 1rem; font-weight: 700; color: #fff; width: 28px; text-align: center; padding: 8px 4px; border-radius: var(--ir-radius) 0 0 var(--ir-radius); } table.crecord-table thead td.frame { border: 1px solid var(--ir-border); border-radius: 0 var(--ir-radius) var(--ir-radius) 0; background-color: #fff; padding: 4px 8px; transition: background-color .12s ease; } table.crecord-table thead td.frame:hover { background-color: var(--ir-row-hover-bg); } table.crecord-table thead td .time { text-align: center; font-size: .95rem; font-weight: 700; } table.crecord-table thead td .name { text-align: center; font-size: .875rem; font-weight: 600; } table.crecord-table thead td .date { text-align: center; font-size: .75rem; color: var(--ir-text-muted); } table.crecord-table-inner { width: 100%; } table.crecord-table-inner.hover:hover { text-decoration: underline; } /* ----------------------------------------------- Contact table ----------------------------------------------- */ table.contact-table { border-collapse: collapse; width: 100%; } table.contact-table td { padding: 3px 0; } /* =============================================== PAGINATION (PagedList) =============================================== */ .pagination ul { padding: 0; } ul.pager { padding: 0; } tr.pager td { padding: 0 .25em 0 0; } .pagedList { margin-top: .75rem; } .pagedList .pagination li a, .pagedList .pagination li span { border-radius: var(--ir-radius) !important; margin: 0 2px; color: var(--ir-accent); border-color: var(--ir-border); } .pagedList .pagination li.active a, .pagedList .pagination li.active span { background-color: var(--ir-accent); border-color: var(--ir-accent); color: #fff; } /* =============================================== FORMS & INPUTS =============================================== */ label { display: block; font-size: .95rem; font-weight: 600; margin-bottom: .25rem; } label.checkbox { display: inline; } label.select { display: inline; } input, textarea { border: 1px solid var(--ir-border); color: var(--ir-text); font-family: var(--ir-font); font-size: .95rem; margin: 4px 0 8px; padding: 6px 10px; width: 280px; border-radius: var(--ir-radius); transition: border-color .15s ease, box-shadow .15s ease; } input:focus, textarea:focus { border-color: var(--ir-accent); outline: none; box-shadow: 0 0 0 3px rgba(26,127,212,.2); } input.locked-out, input.locked-out:focus { border: 1px solid var(--ir-border); background-color: #f8f9fa; color: var(--ir-text-muted); } textarea { font-family: var(--ir-font); width: 500px; } input[type="checkbox"] { background: transparent; border: inherit; width: auto; } input[type="submit"], input[type="button"], button { background-color: var(--ir-primary); color: #fff; border: none; border-radius: var(--ir-radius); cursor: pointer; font-family: var(--ir-font); font-size: .9rem; font-weight: 600; padding: 8px 16px; margin-right: 8px; width: auto; transition: background-color .15s ease; } input[type="submit"]:hover, input[type="button"]:hover, button:hover { background-color: var(--ir-primary-light); } td input[type="submit"], td input[type="button"], td button { font-size: .85rem; padding: 4px 10px; margin-right: 4px; } select { border: 1px solid var(--ir-border); border-radius: var(--ir-radius); padding: 5px 8px; font-family: var(--ir-font); font-size: .9rem; margin: 4px 8px 6px 0; color: var(--ir-text); } select.input-validation-error { border: 1px solid #dc3545; } select.time { margin: 5px 4px 0 0; width: 42px; } input[type="text"].time { margin: 5px 4px 0 0; padding: 2px 3px; width: 36px; } /* Social login buttons */ #loginForm { margin-left: 25px; } #loginForm .validation-error { display: block; margin-left: 15px; } #loginForm .validation-summary-errors ul { margin: 0; padding: 0; } #loginForm .validation-summary-errors li { display: inline; list-style: none; margin: 0; } #loginForm input { width: 250px; } #loginForm input[type="checkbox"], #loginForm input[type="submit"], #loginForm input[type="button"], #loginForm button { width: auto; } #socialLoginForm { margin-left: 25px; } /* The Login page wraps the form in a Bootstrap card so the legacy margin-left and the fixed 250px input width above are no longer appropriate - they push the inputs past the right edge of the card on narrow desktops / tablets (notably ~768px where the two cards sit side by side and each column is barely wider than 250px) and indent the form awkwardly off the card's own padding. Inside the card, fall back to fluid full-width inputs and drop the indent. */ #loginForm.card, #socialLoginForm.card { margin-left: 0; } #loginForm.card .form-control, #loginForm.card input[type="text"], #loginForm.card input[type="email"], #loginForm.card input[type="password"] { width: 100%; max-width: 100%; box-sizing: border-box; } #loginForm.card input[type="checkbox"], #loginForm.card input[type="submit"], #loginForm.card input[type="button"], #loginForm.card button { width: auto; } #loginForm.card .d-grid > .btn, #loginForm.card .d-grid > input[type="submit"] { width: 100%; } #socialLoginList button { position: relative; margin: 0; padding-left: 40px; width: 130px; height: 46px; text-align: left; background: #f8f9fa; border: 1px solid var(--ir-border); border-radius: var(--ir-radius); font-size: .85rem; color: var(--ir-text); transition: background-color .15s ease; } #socialLoginList button:hover, #socialLoginList button:focus { background: #e9ecef; border-color: #adb5bd; } #socialLoginList button::before { content: ''; position: absolute; top: 11px; left: 10px; display: inline-block; width: 24px; height: 24px; background-size: 100%; } #socialLoginList button.google-button::before { background-image: url('../Images/login-google.png?width=32'); background-repeat: no-repeat; } #socialLoginList button.facebook-button::before { background-image: url('../Images/login-facebook.png?width=32'); background-repeat: no-repeat; } #socialLoginList button.twitter-button::before { background-image: url('../Images/login-twitter.png?width=32'); background-repeat: no-repeat; } /* =============================================== VALIDATION =============================================== */ .field-validation-error { color: #dc3545; font-weight: bold; } .field-validation-valid { display: none; } input.input-validation-error { border: 1px solid #dc3545; margin-right: 5px; } input[type="checkbox"].input-validation-error { border: 0 none; } .validation-summary-errors { color: #dc3545; font-weight: bold; font-size: 1rem; } .validation-summary-valid { display: none; } /* =============================================== MESSAGES / ALERTS =============================================== */ .message-info { border: 1px solid var(--ir-accent); border-radius: var(--ir-radius); background-color: #e8f4fd; clear: both; padding: 10px 20px; margin-bottom: 1rem; } .message-error { clear: both; color: #dc3545; font-size: 1rem; font-weight: bold; margin: 16px 0 8px; } .message-success { color: #198754; font-size: 1.1rem; font-weight: bold; margin: 16px 0 8px; } .error { color: #dc3545; } /* =============================================== CONTACT PAGE =============================================== */ .contact h3 { font-size: 1.1rem; } .contact p { margin: 5px 0 0 10px; } .contact iframe { border: 1px solid var(--ir-border); border-radius: var(--ir-radius); margin: 5px 0 0 10px; max-width: 100%; } /* =============================================== FEATURED SIDEBAR PANELS =============================================== */ .featured fieldset ol { padding: 0; list-style: none; } .featured fieldset ol li { text-align: left; } .featured fieldset ol li.highlighted { background-color: var(--ir-row-stripe); } .featured fieldset ol li a.resultitem { display: flex; align-items: center; gap: .5rem; padding: .5rem; color: var(--ir-text); border-radius: var(--ir-radius); transition: background-color .12s, transform .08s; min-height: 40px; /* comfortable mobile tap target */ text-decoration: none; } .featured fieldset ol li a.resultitem .resultitem-icon { color: var(--ir-accent); font-size: 1rem; flex: 0 0 auto; width: 1.25rem; text-align: center; line-height: 1; } .featured fieldset ol li a.resultitem .resultitem-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .featured fieldset ol li a.resultitem .resultitem-chevron { color: var(--ir-text-muted); font-size: .9rem; flex: 0 0 auto; line-height: 1; transition: transform .12s, color .12s; } .featured fieldset ol li a.resultitem:hover, .featured fieldset ol li a.resultitem:focus { background-color: var(--ir-row-hover-bg); text-decoration: none; color: var(--ir-primary); } .featured fieldset ol li a.resultitem:hover .resultitem-chevron, .featured fieldset ol li a.resultitem:focus .resultitem-chevron { color: var(--ir-primary); transform: translateX(2px); } .featured fieldset ol li a.resultitem:active { transform: scale(.99); background-color: var(--ir-row-stripe); } .featured img.advert { width: 100%; max-width: 250px; border-radius: var(--ir-radius); } /* =============================================== CKEDITOR CONTENT STYLES =============================================== */ blockquote { margin: 24px 32px; position: relative; font-family: Georgia, "Times New Roman", serif; font-size: .95rem; font-style: italic; border-left: 3px solid var(--ir-accent); padding-left: 16px; color: var(--ir-text-muted); } blockquote::before { content: "\201C"; color: var(--ir-accent); display: block; font-family: Georgia, serif; font-size: 3rem; font-style: normal; font-weight: bold; line-height: 1; margin-bottom: -10px; } img.right { border: none; float: right; margin-left: 15px; } img.left { border: none; float: left; margin-right: 15px; } img.rightstyled { border: 1px solid var(--ir-border); float: right; margin-left: 15px; padding: 5px; border-radius: 3px; } img.leftstyled { border: 1px solid var(--ir-border); float: left; margin-right: 15px; padding: 5px; border-radius: 3px; } pre { white-space: pre-wrap; word-wrap: break-word; background-color: #f8f9fa; border: 1px solid var(--ir-border); border-radius: var(--ir-radius); padding: .75rem 1rem; font-size: .875rem; } .marker { background-color: #ffe066; border-radius: 3px; } figure { text-align: center; border: 1px solid var(--ir-border); border-radius: var(--ir-radius); background: rgba(0,0,0,.03); padding: 10px; margin: 10px 20px; display: block; } figure figcaption { text-align: center; display: block; font-size: .85rem; color: var(--ir-text-muted); } .cke_editable.cke_editable_inline { cursor: pointer; } .cke_editable.cke_editable_inline.cke_focus { box-shadow: inset 0 0 20px 3px #ddd, inset 0 0 1px #000; outline: none; background: #eee; cursor: text; } .cke_editable_inline pre { white-space: pre-wrap; word-wrap: break-word; } /* =============================================== ARTICLE / ASIDE (legacy - removed) =============================================== */ aside ul { list-style: none; padding: 0; } aside ul li { background: url("../Images/bullet.png") no-repeat 0 50%; padding: 2px 0 2px 20px; } /* Quick-links list (e.g. the Membership page sidebar). Opt OUT of the default aside bullet.png marker so an author-supplied emoji at the start of each item reads as the list marker instead of doubling up with the bullet image. Slightly roomier vertical padding gives the emoji + link a comfortable tap target on mobile. Apply via
works in all evergreen browsers; falls back gracefully if unsupported. */ position: sticky; right: 0; z-index: 2; } /* Separator line on the LEFT edge of the sticky column — removed. The white background of the sticky column already provides enough visual separation from the blue header band, and on narrow viewports the 6px gradient read as a stray vertical line right next to the last data column (Cat / Club). */ /* Striped rows keep their stripe colour even on the sticky cell */ table.results-table tbody tr.highlighted td.row-actions { background-color: var(--ir-row-stripe); } table.results-table.rowhover tbody tr:hover td.row-actions { background-color: var(--ir-row-hover-bg); } /* Header cell for the actions column – paint the blue header band so the header reads as one continuous bar across the whole table. (Body cells below stay white via position:sticky + white bg.) */ table.results-table th.row-actions-col { background-color: var(--ir-table-header-bg); border-bottom: 0 !important; } /* The button cluster inside the cell */ .row-actions .btn-group .btn { /* Comfortable tap target without dominating the row visually */ --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .85rem; line-height: 1; } .row-actions .btn-group .btn i.bi { font-size: 1rem; vertical-align: -.125em; } /* ----------------------------------------------- PB / badge column (shared) ----------------------------------------------- Used on both the Race Results table (#ResultTable) and the Runner profile results table (#runnerResultsTable). Keyed off the class rather than the id so both pick it up. */ table.results-table th.pb-col, table.results-table td.pb-col { width: 52px; min-width: 52px; max-width: 52px; text-align: right; padding: 4px 2px; } /* PB / debut badge as a popover trigger – tap-friendly on mobile, hover-friendly on desktop. Strip default button chrome so it still looks like the original inline icon. */ .pb-badge-btn { background: transparent; border: 0; padding: 0 2px; margin: 0; color: inherit; font: inherit; line-height: 1; cursor: pointer; /* Default layout: row (icon next to delta) – used by the desktop column copy. The inline-mobile copy switches to column below. */ display: inline-flex; align-items: center; justify-content: center; gap: 2px; /* NO min-height here – on desktop the badge sits in its own dedicated narrow column (the whole cell is effectively the click target), so forcing a 44px button would just push the row taller than its neighbours. The mobile inline copy sets its own min-height via .pb-badge-inline below. */ position: relative; vertical-align: middle; } .pb-badge-btn:focus-visible { outline: 2px solid var(--ir-accent); outline-offset: 2px; border-radius: 3px; } .pb-badge-btn .pb-delta { font-size: .55rem; line-height: 1; color: var(--ir-text-muted); white-space: nowrap; } /* Let the medal images render at (close to) natural size – they're non-square, so a strict 16x16 box was clipping/squashing them. max-height caps the worst case and width:auto preserves the ratio. */ .pb-badge-btn img { max-height: 16px; width: auto; display: block; } /* Inline (mobile) copy sits next to the Time text. Absolutely positioned so the 44px tap target doesn't grow the cell's line box (which would push the Time text out of vertical alignment with the Pos number in the previous cell). The td is given right-padding to reserve room for the badge to sit in. */ .pb-badge-inline { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); margin: 0; flex-direction: column; gap: 1px; min-width: 28px; min-height: 32px; /* enough room for icon + delta stacked */ } .pb-badge-inline img { max-height: 14px; } .pb-badge-inline .pb-delta { font-size: .6rem; } /* On phones, bump up the tap target a touch and tighten spacing so the cluster still fits inside the sticky right edge. */ @media (max-width: 767px) { .row-actions .btn-group .btn { --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .55rem; } .row-actions .btn-group .btn i.bi { font-size: 1.05rem; } /* Trim cell padding so the sticky column doesn't eat too much width on narrow viewports. */ table.results-table td.row-actions, table.results-table th.row-actions-col { padding: 3px 4px; } /* The badge is shown inline next to the Time cell on mobile, so the dedicated PB column would just be wasted horizontal scroll space. Hide it entirely below the md breakpoint on any results table. */ table.results-table th.pb-col, table.results-table td.pb-col { display: none; } /* Make the Time cell a positioning context for the inline badge, and reserve right-padding so the badge has somewhere to live without overlapping the time text. Only applied when the table actually has badges to show (.has-pb-badges marker class set server-side from Model.AtLeastOnePB / AtLeastOneFirst) so we don't waste horizontal space on pages where no row has a PB. #ResultTable: col 2 = Time #runnerResultsTable: col 3 = Time (after Dist + Date) */ table.results-table.has-pb-badges#ResultTable tbody tr > td:nth-child(2), #runnerResultsTable table.results-table.has-pb-badges tbody tr > td:nth-child(3) { position: relative; padding-right: 36px; } } /* ----------------------------------------------- Responsive tables on small screens ----------------------------------------------- */ @media (max-width: 767px) { .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Tighten up results table cells on mobile */ table.results-table th, table.results-table td { padding: 4px; font-size: .8rem; } /* Runner cards: slightly smaller minimum so 2 cards always fit on the narrowest phones without the last column overflowing. */ .runners-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } /* -------- Wide results tables – horizontal-scroll mode ------------- Without these rules the cells wrap (a long race name / club name splits onto 2–3 lines), so the table never overflows its column and the wrapping .table-responsive container never triggers a horizontal scrollbar. Forcing nowrap on every cell lets the table grow past the viewport and the container scrolls left/right instead, which keeps each row on one line. Applied to: #raceTableIndex – Races index (_RaceTableIndex.cshtml) #ResultTable – Race results (_ResultDetailTable.cshtml) #runnerResultsTable – Runner profile results (_RunnerResultsTable.cshtml) NOTE: #ResultTable IS the ; the other two ids sit on the wrapping
. The selectors below target both shapes so the rules work either way. */ /* Scroll containers */ #raceTableIndex.table-responsive, #runnerResultsTable.table-responsive, #ResultTable.table-responsive, /* future-proof if id moves */ .table-responsive:has(> #ResultTable) { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; position: relative; /* Subtle right-edge fade as a "swipe me" affordance on touch devices that hide scrollbars by default. */ background: linear-gradient(to left, #fff, rgba(255,255,255,0) 24px) right center / 24px 100% no-repeat, #fff; } /* The tables themselves – let them widen to natural content width rather than collapsing to 100% of the (narrow) viewport. */ #raceTableIndex table.results-table, #runnerResultsTable table.results-table, table.results-table#ResultTable { width: auto; min-width: 100%; } /* One row per record – nowrap on every cell */ #raceTableIndex table.results-table th, #raceTableIndex table.results-table td, #runnerResultsTable table.results-table th, #runnerResultsTable table.results-table td, table.results-table#ResultTable th, table.results-table#ResultTable td { white-space: nowrap; } /* Race-name column on the Races index (col 1) – cap at the documented 32-character maximum so one rogue row can't push the table to a silly width. */ #raceTableIndex table.results-table th:first-child, #raceTableIndex table.results-table td:first-child { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; } /* Race results (#ResultTable): col 4 = Full Name – cap to keep rows tidy col 7 = Running Club – cap, club names can be long */ table.results-table#ResultTable td:nth-child(4), table.results-table#ResultTable th:nth-child(4) { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; } table.results-table#ResultTable td:nth-child(7), table.results-table#ResultTable th:nth-child(7) { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; } /* Runner profile (#runnerResultsTable): col 5 = Race Name – 32-char cap (same as Races index) col 6 = Running Club – cap */ #runnerResultsTable table.results-table td:nth-child(5), #runnerResultsTable table.results-table th:nth-child(5) { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; } #runnerResultsTable table.results-table td:nth-child(6), #runnerResultsTable table.results-table th:nth-child(6) { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; } } /* ----------------------------------------------- Admin - PB verification count badges ----------------------------------------------- */ .pb-count-none { color: #7ac0da; } .pb-count-pending { color: orangered; font-weight: 600; } /* ----------------------------------------------- Admin index - tool button grid Buttons stretch to fill the column and stack icon + label nicely so the longer "Manage Editable Page Attachments" doesn't wrap awkwardly compared to its shorter siblings on mid-width breakpoints. ----------------------------------------------- */ .admin-tools .admin-tool-btn { display: inline-flex; align-items: center; gap: .5rem; white-space: normal; line-height: 1.2; padding: .55rem .75rem; min-height: 2.5rem; } .admin-tools .admin-tool-btn i { flex: 0 0 auto; font-size: 1.1rem; } /* ----------------------------------------------- Admin - Role label (replaces inline text-decoration) ----------------------------------------------- */ .role-label { text-decoration: underline; } /* ----------------------------------------------- Admin - Users role grid (chip layout) ----------------------------------------------- CSS Grid with auto-fill tracks gives us a tidy aligned grid of "remove/add user" chips. Each chip is a flex row of [icon-button + name] that truncates with an ellipsis if the name is unusually long, so columns stay perfectly aligned regardless of name length. */ .users-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 10px; padding: 4px 0; margin: 0; list-style: none; } .users-role-chip { display: flex; align-items: center; gap: 6px; min-width: 0; /* lets the name truncate inside the grid track */ } .users-role-chip > a:not(.btn) { /* The user-name link */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; } .users-role-chip > .btn { flex: 0 0 auto; /* the icon button keeps its natural width */ line-height: 1; } .users-role-chip > .btn i.bi { font-size: 1rem; vertical-align: -.125em; } /* Tighter columns on the narrower sidebar (Add Users panel) */ .featured .users-role-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } /* On phones, single-column to avoid cramped chips */ @media (max-width: 575px) { .users-role-grid { grid-template-columns: 1fr; } } /* ----------------------------------------------- Dynamic page – aside / callout blocks ----------------------------------------------- These classes replace the old "featured sidebar" column on dynamic editable pages. Committee authors apply them through TinyMCE's Style Formats menu so a block of body content can be visually pulled aside on wide screens, while still appearing in the natural reading order on mobile (where a separate sidebar column was awkward to edit and ended up sitting underneath the "Page last updated…" footer). .page-aside – floats right on md+, full-width inline on mobile. Body text wraps around it on wide screens. .page-callout – never floats; stays as a full-width highlighted box at any breakpoint, for pull-quotes / notices. */ .page-aside, .page-callout { background-color: #f4f8fc; /* var(--ir-row-stripe) value */ border: 1px solid var(--ir-border); border-left: 4px solid var(--ir-accent); border-radius: var(--ir-radius); padding: .85rem 1rem; margin: 0 0 1rem 0; box-shadow: var(--ir-shadow); } .page-aside > :first-child, .page-callout > :first-child { margin-top: 0; } .page-aside > :last-child, .page-callout > :last-child { margin-bottom: 0; } /* Headings inside the aside read as panel titles, not page headings, so dial them back a touch. */ .page-aside h1, .page-aside h2, .page-aside h3, .page-callout h1, .page-callout h2, .page-callout h3 { font-size: 1.05rem; margin-top: .25rem; } /* Wide screens: float the aside to the right and let body text wrap under it. 32% width gives roughly the same visual proportion as the old col-md-4 featured sidebar. */ @media (min-width: 768px) { .page-aside { float: right; width: 32%; max-width: 380px; margin: 0 0 1rem 1.25rem; clear: right; } } /* Don't let floated asides bleed past the page bottom – any element that follows .page-aside in the same flow can opt in via .clearfix, and the dynamic-page view also wraps its body in a clearing container (see .main-content .page-content::after). */ .main-content .page-content::after { content: ""; display: block; clear: both; } /* Allow images embedded inside an aside to scale to fit. */ .page-aside img, .page-callout img { max-width: 100%; height: auto; } /* ----------------------------------------------- Contact page ----------------------------------------------- */ .ir-card-header { background-color: var(--ir-primary); color: #fff; } .address-block { font-style: normal; line-height: 1.8; } .map-embed { max-width: 680px; } /* Committee grid – replaces the old deeply-nested
layout (a table-of-tables, one per role) with a simple responsive card grid. auto-fill tracks give 2 cards per row on a phone and as many as fit on desktop, all the same size and properly aligned regardless of how long the role title or member name is. Authored as a plain