@layer pages { /* ============================================================================ SOUS-SITE DU TRAIL Memes formes que le reste du site : memes boutons, memes cartes, memes rayons, meme header, meme pied de page. SEULE la couleur change — celle du logo du Trail de Beaumont. Les tokens semantiques sont reassignes sur `body` et non sur `.trail-page` (qui vit sur ) : .theme-dark est pose sur et gagnerait sinon. La couche `pages` passant apres la couche `tokens`, ces quelques lignes suffisent a recolorer TOUT le sous-site sans reecrire un seul composant. ========================================================================= */ .trail-page { /* Relevees sur le logo. Contrastes mesures sur le fond #0B0B0E : cyan 7,8:1 et orange 6,2:1 — les deux passent AA en texte courant. */ --c-trail-300: #7FD1F2; --c-trail-500: #29ABE2; --c-trail-700: #0E7AAE; --c-trail-orange: #EF6C1E; --c-trail-yellow: #F2E421; --c-trail-green: #5C9A2E; } .trail-page body { --c-accent: var(--c-trail-500); --c-accent-2: var(--c-trail-orange); --c-link: var(--c-trail-500); --c-link-hover: var(--c-trail-300); /* Trois etapes et non deux : un orange qui vire au cyan sur toute la largeur passe par un gris sale au milieu. On bascule tot, et on finit sur le cyan clair. */ --g-brand: linear-gradient(100deg, var(--c-trail-orange) 0%, var(--c-trail-500) 45%, var(--c-trail-300) 100%); --sh-brand: 0 10px 34px rgb(41 171 226 / .35); --sh-gold: 0 10px 34px rgb(41 171 226 / .30); --sh-glow: 0 0 0 1px rgb(41 171 226 / .28), 0 18px 60px rgb(41 171 226 / .16); } /* Les deux seuls endroits du socle ou l'or du club est code en dur. */ .trail-page :focus-visible { outline-color: var(--c-accent); } .trail-page ::selection { background: var(--c-accent); color: var(--c-ink-900); } /* Chevrons decoratifs : le jaune et l'orange du logo, puis son cyan. */ .trail-page .chevrons .chevron:nth-child(1) { --chevron-c: var(--c-trail-yellow); } .trail-page .chevrons .chevron:nth-child(2) { --chevron-c: var(--c-trail-orange); } .trail-page .chevrons .chevron:nth-child(3) { --chevron-c: var(--c-trail-500); } /* Pied de page : footer.css code l'or et le rouge du club en dur. */ .trail-page .site-footer__wordmark-bottom { color: var(--c-trail-orange); } .trail-page .site-footer__baseline, .trail-page .site-footer__title, .trail-page .site-footer__address a, .trail-page .site-footer__todo { color: var(--c-accent); } .trail-page .site-footer__todo { border-color: var(--c-trail-700); } .trail-page .site-footer__list a:hover, .trail-page .site-footer__legal a:hover { color: var(--c-accent); } /* ---- Marque du header ---------------------------------------------------- */ .trail-header__brand { display: flex; align-items: center; flex: none; margin-right: auto; } /* Le logo est tres large (3,4:1) : on le cale en hauteur, la largeur suit. */ .trail-header__logo { height: 54px; width: auto; } @media (min-width: 1024px) { .trail-header__logo { height: 80px; } } /* Le bouton de retour reste compact : six liens de navigation occupent deja la barre, et le theme sombre pousse sinon tous les boutons au grand format. */ .trail-header__back { --btn-pad-x: 1.25rem; --btn-fs: var(--fs-base); } @media (min-width: 1024px) { .trail-nav .site-nav__list { gap: var(--sp-4); } .trail-nav .site-nav__link { font-size: var(--fs-base); } } /* ---- Hero ---------------------------------------------------------------- */ .trail-hero { position: relative; display: grid; align-items: center; min-height: min(92svh, 820px); isolation: isolate; overflow: clip; padding-bottom: var(--sp-16); text-align: center; } .trail-hero__bg { position: absolute; inset: 0; z-index: -3; background: var(--c-bg) url('/img/trail/carnelle.jpg') center / cover no-repeat; opacity: .22; filter: grayscale(.35) contrast(1.1); } /* Le voile prend le cyan du logo : la forêt de Carnelle reste lisible dessous. */ .trail-hero__scrim { position: absolute; inset: 0; z-index: -2; background: radial-gradient(90% 70% at 50% 42%, rgb(11 11 14 / .25) 0%, rgb(11 11 14 / .68) 60%, var(--c-bg) 100%), linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 22%, rgb(11 11 14 / .85)) 0%, rgb(11 11 14 / .4) 50%, var(--c-bg) 100%); } /* Durees premieres entre elles (23 s / 31 s) : les deux halos ne repassent jamais ensemble par leur point de depart. */ .trail-hero .glow--a { top: -20rem; left: 50%; translate: -50% 0; --glow-size: 44rem; --glow-op: .26; --glow-blur: 160px; --glow-dx: 10%; --glow-dy: 9%; --glow-dur: 23s; } .trail-hero .glow--b { bottom: -18rem; left: -10rem; --glow-c: var(--c-trail-orange); --glow-size: 34rem; --glow-op: .24; --glow-dx: 22%; --glow-dy: -14%; --glow-dur: 31s; } .trail-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); max-width: 54rem; margin-inline: auto; } .trail-hero__title { font-family: var(--ff-display); font-size: var(--fs-3xl); line-height: .95; letter-spacing: var(--ls-tightest); text-transform: none; color: var(--c-text); } .trail-hero__date { display: inline-block; padding: .5em 1.4em; border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-ink-900); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; font-size: var(--fs-sm); } .trail-hero__lead { max-width: 52ch; font-size: var(--fs-md); color: var(--c-text-muted); } .trail-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; } /* Meme entree en cascade que les autres en-tetes du site. */ html.js .trail-hero__content > * { animation: intro-rise var(--dur-reveal) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 110ms + 120ms); } .trail-hero__content > :nth-child(2) { --i: 1; } .trail-hero__content > :nth-child(3) { --i: 2; } .trail-hero__content > :nth-child(4) { --i: 3; } .trail-hero__content > :nth-child(5) { --i: 4; } @media (prefers-reduced-motion: reduce) { html.js .trail-hero__content > * { animation: none; } } /* ---- Compte a rebours ---------------------------------------------------- */ .countdown { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; } .countdown__unit { min-width: 6rem; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-xl); background: color-mix(in srgb, var(--c-surface) 70%, transparent); backdrop-filter: blur(6px); border: var(--bw-hair) solid var(--c-border); } .countdown__value { font-family: var(--ff-display); font-size: var(--fs-xl); line-height: 1; color: var(--c-accent); font-variant-numeric: tabular-nums; } .countdown__label { margin-top: var(--sp-2); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--c-text-muted); } /* ---- L'AFFICHE ------------------------------------------------------------ Hauteur automatique et `contain` : une affiche ne se recadre pas. */ .poster { display: grid; gap: var(--sp-8); align-items: center; } @media (min-width: 900px) { .poster { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: var(--sp-12); } } .poster__media { margin: 0; border-radius: var(--r-2xl); overflow: hidden; border: var(--bw-hair) solid var(--c-border); background: var(--c-bg-alt); box-shadow: var(--sh-4); } .poster__media a { display: block; } .poster__media img { display: block; width: 100%; height: auto; object-fit: contain; transition: transform var(--dur-slow) var(--ease-out); } .poster__media a:hover img { transform: scale(1.03); } .poster__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); } .poster__facts { display: grid; gap: var(--sp-4); width: 100%; } .poster__fact { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); padding-bottom: var(--sp-4); border-bottom: var(--bw-hair) solid var(--c-border); } .poster__fact:last-child { border-bottom: none; padding-bottom: 0; } .poster__fact-value { font-family: var(--ff-display); font-size: var(--fs-xl); line-height: 1; color: var(--c-accent); } .poster__fact-label { font-size: var(--fs-xs); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--c-text-muted); } /* ---- Selecteur d'edition -------------------------------------------------- */ .edition-picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-2xl); background: var(--c-bg-alt); border: var(--bw-hair) solid var(--c-border); } .edition-picker__label { font-weight: var(--fw-bold); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-wide); } .edition-picker .select { width: auto; min-width: 16rem; } .edition-picker__status { font-size: var(--fs-sm); color: var(--c-text-muted); margin-left: auto; } /* ---- Parcours -------------------------------------------------------------- */ .course-card { border-top: var(--bw-thick) solid var(--c-accent); } .course-card__distance { font-family: var(--ff-display); font-size: var(--fs-2xl); line-height: 1; color: var(--c-accent); } .course-card__specs { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); color: var(--c-text-muted); } /* ---- Partenaires ------------------------------------------------------------ */ .partner { display: grid; place-items: center; min-height: 7rem; padding: var(--sp-5); border-radius: var(--r-2xl); background: var(--c-surface); border: var(--bw-hair) solid var(--c-border); font-weight: var(--fw-bold); text-align: center; color: var(--c-text); transition: var(--t-all); } .partner:hover { border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); transform: translateY(-4px); } .partner a { color: inherit; text-decoration: none; } .marquee .partner { min-width: 13rem; } /* ---- Galerie ----------------------------------------------------------------- */ .gallery { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); } .gallery__item { border-radius: var(--r-2xl); overflow: hidden; aspect-ratio: 4/3; background: var(--c-bg-alt); margin: 0; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .gallery__item:hover img { transform: scale(1.06); } }