/* ========================================================= theme.css — Unified site theme ("Redwood"-inspired: single accent, flat bordered cards, sober sans-serif typography). Shared by index.html, bdda, scbdd and sawm. Loaded LAST in so it overrides any page-specific accent set by course.css / main.css. ========================================================= */ :root { /* Single brand accent, shared across the whole site (tech blue) */ --accent: #0b5fff; --accent-light: #3b82f6; --accent-dark: #0a46bf; --accent-muted: #e1eafe; /* Neutral tokens */ --ink: #211e1c; --ink-muted: #5b5652; --surface: #ffffff; --surface-2: #f7f5f3; --border: #e4e0db; /* Single sans-serif family everywhere (no serif display font) */ --font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius: 8px; --shadow-sm: 0 1px 3px rgba(33, 30, 28, .08); --shadow-md: 0 6px 20px rgba(33, 30, 28, .10); /* Homepage (main.css) legacy tokens mapped to the same accent */ --brand: var(--accent); --brand-2: var(--accent-dark); /* Bootstrap 5.3 variable overrides: .btn-primary / .text-primary / .alert-primary / .border-primary / .link-primary follow the accent */ --bs-primary: var(--accent); --bs-primary-rgb: 11, 95, 255; --bs-primary-text-emphasis: var(--accent-dark); --bs-primary-bg-subtle: var(--accent-muted); --bs-primary-border-subtle: #a9c6fb; --bs-link-color: var(--accent); --bs-link-color-rgb: 11, 95, 255; --bs-link-hover-color: var(--accent-dark); --bs-link-hover-color-rgb: 10, 70, 191; } body { font-family: var(--font-body); } .navbar-brand, h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); } /* ───── Buttons — flat, solid, Redwood-style ───── */ .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-dark); --bs-btn-hover-border-color: var(--accent-dark); --bs-btn-active-bg: var(--accent-dark); --bs-btn-active-border-color: var(--accent-dark); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); --bs-btn-focus-shadow-rgb: 11, 95, 255; border-radius: 6px; font-weight: 600; box-shadow: none; } .btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-bg: var(--accent-dark); --bs-btn-active-border-color: var(--accent-dark); border-radius: 6px; } /* ───── Homepage course-selection cards: flatter, border-led ───── */ .card.course-card { box-shadow: none; border-radius: var(--radius); } .card.course-card:hover { border-color: var(--accent); box-shadow: 0 .5rem 1.25rem rgba(33, 30, 28, .08), 0 2px 12px rgba(11, 95, 255, .18); } .card.course-card:focus, .card.course-card:focus-visible, .card.course-card:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 .25rem rgba(11, 95, 255, .25); } .course-card.active { outline-color: var(--accent-dark); box-shadow: 0 .75rem 1.5rem rgba(11, 95, 255, .18); } .course-card.active .btn.btn-primary { filter: none; } .card-illus { background: var(--surface-2); } /* Hero background: subtle tech-blue tint */ .hero { background: radial-gradient(1200px 500px at 10% -10%, rgba(11, 95, 255, .10), transparent), radial-gradient(1200px 500px at 110% 110%, rgba(11, 95, 255, .08), transparent); } .badge-inprep { background-color: var(--accent); border-color: var(--accent-dark); } #lang-switch .btn:focus-visible, .navbar .navbar-toggler:focus-visible, .navbar .nav-link:focus-visible { box-shadow: 0 0 0 .25rem rgba(11, 95, 255, .35); } /* ───── "Nouveau Programme" announcement cards ───── Flat bordered style (no filled alert-info/alert-primary colors) */ .info-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 1.25rem 1.5rem; } .info-card + .info-card { margin-top: 1rem; } .info-card svg { color: var(--accent); } .info-card strong:first-of-type { color: var(--accent); font-size: 1.05rem; } /* ───── Direct-access banner (homepage) ───── */ .direct-access-banner { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: .85rem 0; } .direct-access-banner__text { font-size: .875rem; color: var(--ink-muted); } .direct-access-banner__links { display: flex; flex-wrap: wrap; gap: .5rem .75rem; } .direct-access-chip { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-size: .8125rem; font-weight: 700; color: var(--accent); background: var(--accent-muted); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 6px; padding: .3rem .65rem; min-width: 230px; text-decoration: none; transition: background .2s, transform .15s; } .direct-access-chip:hover { background: color-mix(in srgb, var(--accent-muted) 60%, var(--accent) 15%); color: var(--accent-dark); transform: translateY(-1px); } .direct-access-chip__url { font-weight: 400; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: inherit; opacity: .85; } /* ───── Course-page section headers (course.css): drop italic serif look ───── */ .section-title h2 { font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 1rem; letter-spacing: .06em; }