Tudor
accc562b90
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m3s
PR Checks / Backend Smoke (pull_request) Successful in 7s
PR Checks / Build Backend (no push) (pull_request) Successful in 13s
PR Checks / Build Frontend (no push) (pull_request) Successful in 44s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 4m29s
Implements the supplied brand guideline: the pin-and-leaf mark, the lowercase schoolcompare wordmark, Manrope for headings and Inter for everything a person reads a number from, the deep-teal/coral/mustard/sage palette, and the rounder geometry the guideline asks for. The landing hero is rebuilt to the concept: a Sand panel carrying the proposition, the search and a trust line, with the brand landscape bleeding to the panel's right edge, followed by the four value props. Concept vs reality — where the guideline describes something this product does not have, the real feature takes its place and the decision is recorded in a code comment next to it: - The Thriving Score is not implemented. Four of its five sub-scores (pastoral, enrichment, community, facilities) have no source in DfE or Ofsted data, and its band names are Ofsted's own, which would sit beside the real Ofsted grade and be indistinguishable from it. - Guides, About, Favourites and Sign in are not added to the nav — there are no such pages and no accounts system. Rankings and Admissions, which the guideline omits, keep their places because they exist. - The fourth value prop is "Never miss a deadline" rather than "Save & revisit", which would need shortlisting. Two deviations from the supplied swatches, both forced by contrast and both confined to text and fills. Coral #F97360 under a white label measures 2.75:1 against a 4.5 floor, so --action is a darkened #BE3C27 and the original coral survives as --coral for tints, borders and illustration. Mustard #F2C94C is 1.5:1 as text, so --mustard-ink carries labels while --mustard stays exact for fills and rings. Every token clears AA on all three light grounds; Sand is the binding one, so several values sit a step darker than white alone would need. The guideline is light-only, but the site already ships a dark theme, so it is rebuilt from the same tokens rather than dropped. Verified: tsc clean, 159/159 unit tests, production build green, and the generated share card and app icon render from the new mark. The hero and the site chrome were rendered from the compiled CSS and the prerendered markup to confirm Manrope and Inter actually resolve — a font token that silently falls back has shipped here before.
1574 lines
30 KiB
CSS
1574 lines
30 KiB
CSS
.homeView {
|
||
width: 100%;
|
||
}
|
||
|
||
/* ── Hero ──────────────────────────────────────────────────────────────────
|
||
A Sand panel: proposition and search on the left, the brand landscape
|
||
bleeding to the panel's right edge. The illustration is decorative, so on
|
||
phones it drops to a short band under the content rather than competing
|
||
with the search for the fold. */
|
||
.heroPanel {
|
||
display: grid;
|
||
grid-template-columns: 1.12fr 0.88fr;
|
||
align-items: stretch;
|
||
background: var(--bg-secondary);
|
||
border-radius: var(--radius-xl);
|
||
overflow: hidden;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.heroContent {
|
||
align-self: center;
|
||
padding: 3rem 1.5rem 3rem 3rem;
|
||
min-width: 0;
|
||
}
|
||
|
||
.heroArt {
|
||
position: relative;
|
||
min-width: 0;
|
||
/* The scene needs height to read; without a floor it collapses to the
|
||
content column's height on short viewports. */
|
||
min-height: 24rem;
|
||
}
|
||
|
||
.heroArt svg {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.heroTrust {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.7rem;
|
||
margin-top: 1.4rem;
|
||
font-size: var(--step--1);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.heroTrustDots {
|
||
display: inline-flex;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.heroTrustDot {
|
||
width: 1.6rem;
|
||
height: 1.6rem;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--bg-secondary);
|
||
margin-right: -0.55rem;
|
||
}
|
||
.heroTrustDot:nth-child(1) { background: var(--sage); }
|
||
.heroTrustDot:nth-child(2) { background: var(--mustard); }
|
||
.heroTrustDot:nth-child(3) { background: var(--sky); }
|
||
|
||
.heroEyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
font-size: 0.72rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--brand);
|
||
background: rgba(var(--brand-rgb), 0.1);
|
||
padding: 0.3rem 0.7rem;
|
||
border-radius: 999px;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.heroEyebrowDot {
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--brand);
|
||
}
|
||
|
||
.heroTitle {
|
||
font-size: var(--step-4);
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: 0.75rem;
|
||
line-height: 1.12;
|
||
letter-spacing: -0.03em;
|
||
font-family: var(--font-display);
|
||
max-width: 18ch;
|
||
}
|
||
|
||
/* The em is a colour change, not an emphasis change — Manrope has no italic
|
||
in the loaded weights, so leaving font-style alone would synthesise a slant. */
|
||
.heroEmph {
|
||
color: var(--brand);
|
||
font-style: normal;
|
||
}
|
||
|
||
.heroDescription {
|
||
font-size: var(--step-1);
|
||
color: var(--text-secondary);
|
||
margin: 0 0 1.5rem;
|
||
max-width: 46ch;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.heroDescription strong {
|
||
color: var(--text-primary);
|
||
font-weight: 600;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.heroContent {
|
||
padding: 2.25rem 1.5rem 2.25rem 2rem;
|
||
}
|
||
.heroArt {
|
||
min-height: 20rem;
|
||
}
|
||
}
|
||
|
||
/* One column: content first, then a short band of landscape. */
|
||
@media (max-width: 860px) {
|
||
.heroPanel {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.heroContent {
|
||
padding: 2rem 1.5rem 1.75rem;
|
||
}
|
||
.heroArt {
|
||
min-height: 11rem;
|
||
order: 2;
|
||
}
|
||
.heroTitle {
|
||
font-size: var(--step-3);
|
||
max-width: none;
|
||
}
|
||
.heroDescription {
|
||
font-size: var(--step-0);
|
||
max-width: none;
|
||
}
|
||
}
|
||
|
||
/* Above the fold on phones, every line costs. Drop the eyebrow tag and the
|
||
long coverage sentence, leaving the proposition and the search — a
|
||
first-time visitor still gets the trust line beneath the box, which carries
|
||
the data provenance the coverage sentence used to (audit P1.7, feeds the
|
||
46% home exit rate). */
|
||
@media (max-width: 640px) {
|
||
.heroPanel {
|
||
margin-bottom: 1rem;
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
.heroContent {
|
||
padding: 1.25rem 1.1rem 1.5rem;
|
||
}
|
||
.heroEyebrow,
|
||
.heroDescriptionFull {
|
||
display: none;
|
||
}
|
||
.heroDescription {
|
||
font-size: 0.9rem;
|
||
line-height: 1.45;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.heroTitle {
|
||
font-size: 1.75rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.heroTrust {
|
||
margin-top: 1rem;
|
||
font-size: var(--step--2);
|
||
}
|
||
.heroArt {
|
||
min-height: 8.5rem;
|
||
}
|
||
}
|
||
|
||
/* ── Value props ───────────────────────────────────────────────────────────
|
||
Four reasons, straight from the guideline. The fourth is ours rather than
|
||
theirs — see the comment on VALUE_PROPS in HomeView.tsx. */
|
||
.valueProps {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 1.25rem;
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 0 2rem;
|
||
}
|
||
|
||
.valueProp {
|
||
display: flex;
|
||
gap: 0.8rem;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.propIcon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 0 0 2.6rem;
|
||
width: 2.6rem;
|
||
height: 2.6rem;
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.propIconTrust {
|
||
background: var(--brand-bg);
|
||
color: var(--brand);
|
||
}
|
||
.propIconCompare {
|
||
background: rgba(var(--sage-rgb), 0.42);
|
||
color: var(--status-above);
|
||
}
|
||
.propIconContext {
|
||
background: rgba(242, 201, 76, 0.26);
|
||
color: var(--mustard-ink);
|
||
}
|
||
.propIconDeadline {
|
||
background: rgba(221, 216, 245, 0.6);
|
||
color: var(--phase-nursery);
|
||
}
|
||
|
||
.propTitle {
|
||
font-family: var(--font-display);
|
||
font-size: var(--step-0);
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin: 0 0 0.15rem;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.propBody {
|
||
font-size: var(--step--1);
|
||
color: var(--text-muted);
|
||
line-height: 1.5;
|
||
margin: 0;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.valueProps {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1rem 1.25rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 560px) {
|
||
.valueProps {
|
||
grid-template-columns: 1fr;
|
||
gap: 0.85rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
}
|
||
|
||
/* View Toggle */
|
||
.viewToggle {
|
||
display: flex;
|
||
gap: 0.2rem;
|
||
background: var(--bg-secondary);
|
||
padding: 0.2rem;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.viewToggleBtn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
padding: 0.375rem 0.625rem;
|
||
font-size: 0.8125rem;
|
||
font-weight: 500;
|
||
background: transparent;
|
||
border: none;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
color: var(--text-secondary);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.viewToggleBtn:hover {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.viewToggleBtn.active {
|
||
background: var(--bg-card);
|
||
color: var(--brand-strong);
|
||
box-shadow: 0 2px 4px rgba(var(--shadow-rgb), 0.08);
|
||
}
|
||
|
||
.viewToggleBtn svg {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.results {
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.mapViewResults {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* Map View Layout */
|
||
.mapViewContainer {
|
||
display: grid;
|
||
grid-template-columns: 1fr 340px;
|
||
gap: 1rem;
|
||
height: calc(100dvh - 280px);
|
||
min-height: 520px;
|
||
max-height: 800px;
|
||
}
|
||
|
||
.mapContainer {
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--border);
|
||
height: 100%;
|
||
}
|
||
|
||
.compactList {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
overflow-y: auto;
|
||
height: 100%;
|
||
padding-right: 0.375rem;
|
||
}
|
||
|
||
.compactList::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.compactList::-webkit-scrollbar-track {
|
||
background: var(--bg-secondary);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.compactList::-webkit-scrollbar-thumb {
|
||
background: var(--border);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.compactList::-webkit-scrollbar-thumb:hover {
|
||
background: var(--text-muted);
|
||
}
|
||
|
||
/* Compact School Item */
|
||
.compactItem {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
padding: 0.625rem 0.75rem;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.compactItem:hover {
|
||
border-color: var(--brand);
|
||
box-shadow: 0 2px 6px rgba(var(--shadow-rgb), 0.05);
|
||
}
|
||
|
||
.compactItemContent {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.compactItemHeader {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
margin-bottom: 0.125rem;
|
||
}
|
||
|
||
.compactItemName {
|
||
font-weight: 600;
|
||
font-size: 0.8125rem;
|
||
color: var(--text-primary);
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.compactItemName:hover {
|
||
color: var(--brand-strong);
|
||
}
|
||
|
||
.distanceBadge {
|
||
flex-shrink: 0;
|
||
padding: 0.0625rem 0.375rem;
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
background: var(--brand);
|
||
color: var(--brand-on);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.compactItemMeta {
|
||
display: flex;
|
||
gap: 0.375rem;
|
||
font-size: 0.6875rem;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.compactItemMeta span:not(:last-child)::after {
|
||
content: '·';
|
||
margin-left: 0.375rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.compactItemStats {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
font-size: 0.6875rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.compactStat strong {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.compactItemActions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.25rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
.sectionHeader {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.sectionHeader h2 {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
margin-bottom: 0.5rem;
|
||
color: var(--text-primary);
|
||
font-family: var(--font-display);
|
||
}
|
||
|
||
/* Decorative coral bar under section headings */
|
||
.sectionHeader h2::after {
|
||
content: '';
|
||
display: block;
|
||
width: 50px;
|
||
height: 2px;
|
||
background: var(--brand);
|
||
border-radius: 1px;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.sectionDescription {
|
||
font-size: 0.9375rem;
|
||
color: var(--text-secondary);
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.schoolList {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
/* Staggered fade-in for rows */
|
||
.schoolList > *:nth-child(1) { animation-delay: 0ms; }
|
||
.schoolList > *:nth-child(2) { animation-delay: 30ms; }
|
||
.schoolList > *:nth-child(3) { animation-delay: 60ms; }
|
||
.schoolList > *:nth-child(4) { animation-delay: 90ms; }
|
||
.schoolList > *:nth-child(5) { animation-delay: 120ms; }
|
||
.schoolList > *:nth-child(6) { animation-delay: 150ms; }
|
||
.schoolList > *:nth-child(7) { animation-delay: 180ms; }
|
||
.schoolList > *:nth-child(8) { animation-delay: 210ms; }
|
||
.schoolList > *:nth-child(9) { animation-delay: 240ms; }
|
||
.schoolList > *:nth-child(n+10) { animation-delay: 270ms; }
|
||
|
||
.emptyState {
|
||
text-align: center;
|
||
padding: 2.5rem 1.5rem;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.emptyStateTitle {
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 0.375rem;
|
||
font-family: var(--font-display);
|
||
}
|
||
|
||
.emptyStateDescription {
|
||
font-size: 0.9375rem;
|
||
color: var(--text-secondary);
|
||
max-width: 380px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.resultsHeader {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.resultsHeaderActions {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.viewToggle {
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* The sort <select> sizes to its widest option ("Highest Reading, Writing
|
||
& Maths %"), which overflows a phone viewport — beside the view toggle it
|
||
ran off the right edge. Let it flex into the remaining space and shrink;
|
||
the selected label truncates instead of pushing past the screen. */
|
||
.sortSelect {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.mapViewContainer {
|
||
grid-template-columns: 1fr;
|
||
grid-template-rows: 260px auto;
|
||
height: auto;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.mapContainer {
|
||
height: 260px;
|
||
}
|
||
|
||
.compactList {
|
||
height: auto;
|
||
max-height: 350px;
|
||
padding-right: 0;
|
||
}
|
||
|
||
.compactItem {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.compactItemActions {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.compactItemActions > * {
|
||
flex: 1;
|
||
}
|
||
|
||
.emptyState {
|
||
padding: 2rem 1.25rem;
|
||
}
|
||
}
|
||
|
||
/* Highlighted List Item */
|
||
.highlightedItem .compactItem {
|
||
border-color: var(--brand);
|
||
box-shadow: 0 0 0 1px var(--brand);
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
/* Mobile Bottom Sheet */
|
||
.bottomSheetWrapper {
|
||
display: none;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.bottomSheetWrapper {
|
||
display: block;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 1000;
|
||
padding: 1rem;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.bottomSheet {
|
||
position: relative;
|
||
background: var(--bg-card);
|
||
border-radius: 12px;
|
||
box-shadow: 0 -4px 24px rgba(var(--shadow-rgb), 0.15);
|
||
pointer-events: auto;
|
||
animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||
}
|
||
|
||
.bottomSheet .compactItem {
|
||
border: none;
|
||
box-shadow: none;
|
||
background: transparent;
|
||
padding: 1rem;
|
||
}
|
||
|
||
.bottomSheet .compactItem:hover {
|
||
box-shadow: none;
|
||
}
|
||
|
||
.closeSheetBtn {
|
||
position: absolute;
|
||
top: -12px;
|
||
right: -12px;
|
||
width: 30px;
|
||
height: 30px;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.25rem;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.1);
|
||
z-index: 10;
|
||
}
|
||
|
||
@keyframes slideUpSheet {
|
||
from {
|
||
transform: translateY(120%);
|
||
}
|
||
to {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* When map view on mobile, expand map and hide list */
|
||
.mapViewContainer {
|
||
grid-template-columns: 1fr;
|
||
grid-template-rows: 1fr;
|
||
height: calc(100dvh - 280px);
|
||
min-height: 400px;
|
||
}
|
||
|
||
.mapContainer {
|
||
height: 100%;
|
||
}
|
||
|
||
.compactList {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.quickSearches {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.quickSearchLabel {
|
||
font-size: 0.875rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.quickSearchChip {
|
||
padding: 0.375rem 0.875rem;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
font-size: 0.875rem;
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
transition: all var(--transition);
|
||
}
|
||
|
||
.quickSearchChip:hover {
|
||
background: var(--brand-strong);
|
||
color: var(--brand-on);
|
||
border-color: var(--brand-strong);
|
||
}
|
||
|
||
.exploringRow {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.exploringLabel {
|
||
font-size: 0.72rem;
|
||
color: var(--text-muted);
|
||
font-weight: 500;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.exploringChips {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.exploringChip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
padding: 0.5rem 0.95rem;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
font-size: 0.82rem;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
transition: all 0.15s ease;
|
||
}
|
||
|
||
.exploringChip:hover {
|
||
border-color: var(--brand);
|
||
color: var(--brand-strong);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.chipDot {
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: currentColor;
|
||
opacity: 0.55;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ── How it works section ─────────────────────────────── */
|
||
|
||
.howItWorks {
|
||
padding: 3rem 0 1rem;
|
||
}
|
||
|
||
.hiwHeader {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.hiwHeading {
|
||
font-family: var(--font-display);
|
||
font-size: 1.75rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin: 0;
|
||
}
|
||
|
||
.hiwSub {
|
||
font-size: 0.875rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.hiwGrid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1rem;
|
||
}
|
||
|
||
.hiwCard {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 14px;
|
||
padding: 1.25rem;
|
||
box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.06);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.9rem;
|
||
}
|
||
|
||
.hiwVisual {
|
||
background: var(--bg-secondary);
|
||
border-radius: 10px;
|
||
padding: 0.9rem;
|
||
min-height: 180px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.hiwPhaseBlock {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
.hiwPhaseLabel {
|
||
font-size: 0.58rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.hiwPhaseLabel strong {
|
||
color: var(--brand);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.hiwCardBody {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.3rem;
|
||
}
|
||
|
||
.hiwStep {
|
||
font-size: 0.65rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--brand-strong);
|
||
}
|
||
|
||
.hiwTitle {
|
||
font-family: var(--font-display);
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.hiwDesc {
|
||
font-size: 0.86rem;
|
||
color: var(--text-secondary);
|
||
line-height: 1.45;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Mini cascade (performance card) */
|
||
.miniCascade {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
.miniCascadeCol {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.15rem;
|
||
min-width: 0;
|
||
}
|
||
|
||
.miniSubj {
|
||
font-size: 0.5rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
margin-bottom: 0.1rem;
|
||
}
|
||
|
||
.miniRowHead {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
gap: 0.2rem;
|
||
font-size: 0.44rem;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.01em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.miniRowHead strong {
|
||
font-family: var(--font-display);
|
||
font-size: 0.62rem;
|
||
color: var(--text-primary);
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
text-transform: none;
|
||
}
|
||
|
||
.miniTrack {
|
||
height: 5px;
|
||
border-radius: 2px;
|
||
background: rgba(var(--status-above-rgb), 0.08);
|
||
position: relative;
|
||
overflow: visible;
|
||
}
|
||
|
||
.miniBarExp {
|
||
height: 100%;
|
||
border-radius: 2px;
|
||
background: var(--brand);
|
||
}
|
||
|
||
.miniBarExc {
|
||
height: 100%;
|
||
border-radius: 2px;
|
||
background: var(--brand);
|
||
}
|
||
|
||
.miniNatPill {
|
||
position: absolute;
|
||
top: -9px;
|
||
transform: translateX(-50%);
|
||
background: var(--brand);
|
||
color: var(--text-inverse);
|
||
font-size: 0.4rem;
|
||
font-weight: 700;
|
||
padding: 0.05rem 0.2rem;
|
||
border-radius: 3px;
|
||
z-index: 2;
|
||
white-space: nowrap;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Attainment 8 mini bar */
|
||
.att8Row {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
gap: 0.6rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.att8BarWrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.2rem;
|
||
}
|
||
|
||
.att8BarHead {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 0.5rem;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.att8Track {
|
||
height: 7px;
|
||
background: rgba(var(--status-above-rgb), 0.08);
|
||
border-radius: 3px;
|
||
position: relative;
|
||
}
|
||
|
||
.att8Fill {
|
||
height: 100%;
|
||
background: var(--brand);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.att8NatLine {
|
||
position: absolute;
|
||
top: -2px;
|
||
bottom: -2px;
|
||
width: 1.5px;
|
||
background: rgba(var(--brand-rgb), 0.6);
|
||
z-index: 2;
|
||
}
|
||
|
||
.att8Score {
|
||
font-variant-numeric: tabular-nums;
|
||
text-align: right;
|
||
}
|
||
|
||
.att8Value {
|
||
font-variant-numeric: tabular-nums;
|
||
font-family: var(--font-display);
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--status-above);
|
||
line-height: 1;
|
||
}
|
||
|
||
.att8Delta {
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: 0.55rem;
|
||
color: var(--status-above);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
margin-top: 0.15rem;
|
||
}
|
||
|
||
/* Ofsted preview */
|
||
.ofstedPreview {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
width: 100%;
|
||
padding: 0.4rem 0.2rem;
|
||
}
|
||
|
||
.ofstedHead {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding-bottom: 0.4rem;
|
||
border-bottom: 1.5px solid var(--border);
|
||
}
|
||
|
||
.ofstedBullet {
|
||
display: block;
|
||
width: 3px;
|
||
height: 1em;
|
||
background: var(--brand);
|
||
border-radius: 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ofstedTitle {
|
||
font-family: var(--font-display);
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.ofstedFramework {
|
||
align-self: flex-start;
|
||
padding: 0.15rem 0.5rem;
|
||
border-radius: 4px;
|
||
background: rgba(var(--phase-secondary-rgb), 0.12);
|
||
color: var(--phase-secondary-text);
|
||
font-size: 0.5rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.rcList {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.3rem;
|
||
}
|
||
|
||
.rcRow {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.rcArea {
|
||
font-size: 0.62rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.rcChip {
|
||
padding: 0.1rem 0.4rem;
|
||
border-radius: 3px;
|
||
font-size: 0.52rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.03em;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.rcChipGood {
|
||
background: rgba(var(--status-above-rgb), 0.12);
|
||
color: var(--status-above);
|
||
}
|
||
|
||
.rcChipNeutral {
|
||
background: var(--status-below-bg);
|
||
color: var(--status-below);
|
||
}
|
||
|
||
/* Safeguarding is a separate binary met/not-met judgement, not a graded area,
|
||
so it sits below the five-point list behind a divider with its own chip. */
|
||
.rcSafeguarding {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.5rem;
|
||
margin-top: 0.05rem;
|
||
padding-top: 0.35rem;
|
||
border-top: 1px dashed var(--border);
|
||
}
|
||
|
||
.rcSep {
|
||
color: var(--text-muted);
|
||
font-style: italic;
|
||
}
|
||
|
||
.rcChipMet {
|
||
background: transparent;
|
||
color: var(--status-above);
|
||
border: 1px solid rgba(var(--status-above-rgb), 0.4);
|
||
}
|
||
|
||
.ofstedMeta {
|
||
font-size: 0.6rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Compare preview */
|
||
.comparePreview {
|
||
width: 100%;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
font-size: 0.6rem;
|
||
}
|
||
|
||
.compareHead {
|
||
display: grid;
|
||
grid-template-columns: 1fr repeat(2, 1fr);
|
||
background: rgba(var(--status-above-rgb), 0.1);
|
||
padding: 0.35rem 0.5rem;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
.compareHeadCell {
|
||
font-family: var(--font-display);
|
||
font-size: 0.62rem;
|
||
font-weight: 700;
|
||
color: var(--status-above);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.compareHeadLabel {
|
||
font-family: inherit;
|
||
font-size: 0.48rem;
|
||
color: var(--text-muted);
|
||
font-weight: 500;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.compareRow {
|
||
display: grid;
|
||
grid-template-columns: 1fr repeat(2, 1fr);
|
||
padding: 0.3rem 0.5rem;
|
||
gap: 0.35rem;
|
||
border-top: 1px solid var(--border);
|
||
align-items: baseline;
|
||
}
|
||
|
||
.compareRowLabel {
|
||
font-size: 0.55rem;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.compareRowVal {
|
||
font-family: var(--font-display);
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.compareRowValHi {
|
||
color: var(--status-above);
|
||
}
|
||
|
||
.compareFoot {
|
||
font-size: 0.52rem;
|
||
color: var(--text-muted);
|
||
padding: 0.35rem 0.5rem;
|
||
background: var(--bg-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
text-align: center;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.hiwGrid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.hiwHeader {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
.hiwHeading {
|
||
font-size: 1.4rem;
|
||
}
|
||
}
|
||
|
||
/* On phones, hide the scaled-down preview visuals (text becomes illegible
|
||
at this size) and let the explanatory text carry each card. */
|
||
@media (max-width: 640px) {
|
||
.hiwVisual {
|
||
display: none;
|
||
}
|
||
.hiwCard {
|
||
padding: 1rem 1.1rem;
|
||
gap: 0.45rem;
|
||
}
|
||
.hiwTitle {
|
||
font-size: 1.05rem;
|
||
}
|
||
.hiwDesc {
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
|
||
/* ── Editorial section ───────────────────────────────── */
|
||
|
||
.editorial {
|
||
padding: 2rem 0 3rem;
|
||
}
|
||
|
||
.editorialGrid {
|
||
display: grid;
|
||
grid-template-columns: 1.4fr 1fr;
|
||
gap: 2rem;
|
||
padding: 1.75rem;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 14px;
|
||
}
|
||
|
||
.editorialText {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.65rem;
|
||
}
|
||
|
||
.editorialKicker {
|
||
font-size: 0.68rem;
|
||
color: var(--brand-strong);
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.editorialHeading {
|
||
font-family: var(--font-display);
|
||
font-size: 1.35rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin: 0;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
/* Running prose is the one place the serif appears. Slightly larger than the
|
||
UI around it because Literata's x-height sits lower than the grotesque's. */
|
||
.editorialText p {
|
||
font-family: var(--font-prose);
|
||
font-size: 0.97rem;
|
||
color: var(--text-secondary);
|
||
line-height: 1.65;
|
||
margin: 0;
|
||
max-width: 62ch;
|
||
}
|
||
|
||
.factbox {
|
||
background: var(--bg-secondary);
|
||
border-radius: 10px;
|
||
padding: 1.25rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
|
||
.factboxHeading {
|
||
font-family: var(--font-display);
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin: 0 0 0.85rem;
|
||
}
|
||
|
||
.factRow {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
padding: 0.5rem 0;
|
||
border-bottom: 1px solid var(--border);
|
||
font-size: 0.85rem;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.factRow:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.factKey {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.factVal {
|
||
font-family: var(--font-display);
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
text-align: right;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.editorialGrid {
|
||
grid-template-columns: 1fr;
|
||
padding: 1.25rem;
|
||
gap: 1.25rem;
|
||
}
|
||
}
|
||
|
||
.resultsHeader {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
padding: 0 0 1rem;
|
||
}
|
||
|
||
.resultsHeaderActions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sortSelect {
|
||
padding: 0.375rem 0.75rem;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
background: var(--bg-card);
|
||
color: var(--text-secondary);
|
||
font-size: 0.875rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.activeFilters {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.filterChip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
padding: 0.25rem 0.625rem;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
font-size: 0.8rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.chipRemove {
|
||
color: var(--text-muted);
|
||
text-decoration: none;
|
||
font-size: 0.9rem;
|
||
line-height: 1;
|
||
transition: color var(--transition, 0.2s ease);
|
||
}
|
||
|
||
.chipRemove:hover {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.loadMoreSection {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
padding: 1.5rem 0;
|
||
}
|
||
|
||
.loadMoreCount {
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: 0.875rem;
|
||
color: var(--text-muted);
|
||
margin: 0;
|
||
}
|
||
|
||
.loadMoreButton {
|
||
min-width: 160px;
|
||
}
|
||
|
||
/* =========================================================
|
||
Admissions Countdown Strip
|
||
========================================================= */
|
||
|
||
.admissionsStrip {
|
||
padding: 1.5rem 0 2rem;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
.stripHeader {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
margin-bottom: 1rem;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.stripLabel {
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.stripCta {
|
||
font-size: 0.82rem;
|
||
color: var(--brand);
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.stripCta:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.countdownRail {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.countdownChip {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 1rem 1.1rem 0.9rem;
|
||
box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.06);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.2rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.countdownChip::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
border-radius: 12px 12px 0 0;
|
||
}
|
||
|
||
.countdownChipDeadline::before {
|
||
background: var(--brand);
|
||
}
|
||
|
||
.countdownChipOffer::before {
|
||
background: var(--status-above);
|
||
}
|
||
|
||
.countdownChipUrgent {
|
||
border-color: rgba(var(--status-below-rgb), 0.4);
|
||
background: rgba(var(--status-below-rgb), 0.04);
|
||
}
|
||
|
||
.chipTrack {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
font-size: 0.6rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 0.15rem;
|
||
}
|
||
|
||
.chipTrackDeadline {
|
||
color: var(--brand-strong);
|
||
}
|
||
|
||
.chipTrackOffer {
|
||
color: var(--status-above);
|
||
}
|
||
|
||
.chipTrackDot {
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
background: currentColor;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chipDays {
|
||
font-variant-numeric: tabular-nums;
|
||
font-family: var(--font-display);
|
||
font-size: 2.6rem;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.countdownChipDeadline .chipDays,
|
||
.countdownChipUrgent .chipDays {
|
||
color: var(--status-below);
|
||
}
|
||
|
||
.countdownChipOffer .chipDays {
|
||
color: var(--status-above);
|
||
}
|
||
|
||
.chipDaysUnit {
|
||
font-family: var(--font-ui);
|
||
font-size: 0.78rem;
|
||
font-weight: 500;
|
||
color: var(--text-muted);
|
||
margin-left: 0.2rem;
|
||
vertical-align: bottom;
|
||
line-height: 2;
|
||
}
|
||
|
||
.chipMilestone {
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
line-height: 1.25;
|
||
margin-top: 0.1rem;
|
||
}
|
||
|
||
.chipDate {
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted);
|
||
margin-top: 0.05rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.countdownRail {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
/* On phones the 2×2 grid cramped each chip so badly the "Secondary ·
|
||
Deadline" track label dropped to 9.6px. Switch to a horizontal
|
||
snap-scroller — each card is full-width-ish and stays readable,
|
||
and the rightmost card peeks past the edge to signal there's more. */
|
||
@media (max-width: 640px) {
|
||
.countdownRail {
|
||
display: flex;
|
||
grid-template-columns: none;
|
||
overflow-x: auto;
|
||
scroll-snap-type: x mandatory;
|
||
scrollbar-width: none;
|
||
gap: 0.75rem;
|
||
padding-right: 1.25rem;
|
||
margin-inline: -1rem;
|
||
padding-inline: 1rem;
|
||
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
|
||
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
|
||
}
|
||
.countdownRail::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.countdownChip {
|
||
flex: 0 0 auto;
|
||
width: 78%;
|
||
min-width: 220px;
|
||
scroll-snap-align: start;
|
||
}
|
||
.chipTrack {
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|