/* ============================================================ BROADSHEET — the public-site design system. Newsprint set for the web: near-black serif on paper white, cyan as the one working accent, magenta rare, minimal radius and shadow. Scoped entirely under body.marketing-site so it never touches the logged-in application (kabinet) styling in style.css. Ported from the "Digital Campus" design handoff. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&display=swap'); body.marketing-site { /* Force light native-widget rendering (radios, checkboxes, selects, scrollbars) even when the app-wide dark toggle has set color-scheme: dark on — Broadsheet has no dark surface, so dark-rendered native controls on this light paper background would look broken (e.g. solid black radio dots). */ color-scheme: light; --bw-bg: #f3f2f2; --bw-surface: #eae9e9; --bw-text: #201e1d; --bw-accent: #0088b0; --bw-accent-2: #d6006c; --bw-accent-700: #006786; --bw-accent-100: #e9f8ff; --bw-accent-600: #1186ac; --bw-divider: rgba(32, 30, 29, 0.14); --bw-neutral-300: #d7d3d3; --bw-neutral-400: #bab6b6; /* shared so full-bleed children (.hero-gradient) can negate exactly this, instead of the classic 50vw trick — which overflows by the scrollbar's width wherever the platform reserves layout space for one. */ --bw-container-pad: clamp(1.6rem, 4vw, 2.4rem); --bw-neutral-700: #605d5d; --bw-font-heading: "Source Serif 4", Georgia, serif; --bw-font-body: "Source Serif 4", Georgia, serif; --bw-radius: 3px; --bw-shadow-sm: 0 1px 2px rgba(45, 43, 43, 0.14); --bw-shadow-md: 0 3px 14px rgba(45, 43, 43, 0.14); background: var(--bw-bg); color: var(--bw-text); font-family: var(--bw-font-body); /* Some shared templates set color via inline style="color: var(--text-on-dark)" for text that used to sit on a dark band — redefine those variables here so they resolve correctly now that the surface underneath is Broadsheet paper. */ --text-on-dark: var(--bw-text); --text-on-dark-muted: var(--bw-neutral-700); } [data-bs-theme="dark"] body.marketing-site { /* Broadsheet has no dark surface by design — the paper stays paper regardless of the app-wide theme toggle; only the toggle icon differs. */ background: var(--bw-bg); color: var(--bw-text); } /* Broadsheet has no dark surface — force every Bootstrap text/background utility back to the paper palette regardless of the app-wide light/dark toggle, since those utilities carry !important and would otherwise win with dark-theme values that read as low-contrast (or invisible) on paper. */ .marketing-site .text-body, .marketing-site .text-dark, .marketing-site .text-black { color: var(--bw-text) !important; } .marketing-site .text-muted { color: var(--bw-neutral-700) !important; } .marketing-site .text-white { color: var(--bw-text) !important; } .marketing-site .bg-white, .marketing-site .bg-light { background: var(--bw-surface) !important; } .marketing-site .border-top, .marketing-site .border-bottom { border-color: var(--bw-divider) !important; } .marketing-site .bg-secondary-subtle { background: var(--bw-surface) !important; color: var(--bw-text) !important; } .marketing-site .bg-primary-subtle { background: var(--bw-accent-100) !important; color: var(--bw-accent-700) !important; } .marketing-site .bg-info-subtle { background: var(--bw-accent-100) !important; color: var(--bw-accent-700) !important; } .marketing-site .bg-success-subtle { background: #e7f5ea !important; color: #1e6b34 !important; } .marketing-site .bg-warning-subtle { background: #fdf3d9 !important; color: #8a6200 !important; } .marketing-site .bg-danger-subtle { background: #fbe3e6 !important; color: #a3273a !important; } .marketing-site .card, .marketing-site .card-body { color: var(--bw-text); } .marketing-site .list-group-item { background: transparent !important; color: var(--bw-text) !important; border-color: var(--bw-divider) !important; } .marketing-site .accordion-item, .marketing-site .accordion-button, .marketing-site .accordion-body { background: transparent !important; } .marketing-site .progress { background: var(--bw-neutral-300) !important; } body.marketing-site h1, body.marketing-site h2, body.marketing-site h3, body.marketing-site h4, body.marketing-site h5, body.marketing-site h6 { font-family: var(--bw-font-heading); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--bw-text); text-wrap: balance; } body.marketing-site p { text-wrap: pretty; } body.marketing-site a { color: var(--bw-accent-700); } body.marketing-site ::selection { background: rgba(0, 136, 176, 0.25); } body.marketing-site :focus-visible { outline: 2px solid var(--bw-accent); outline-offset: 2px; } /* — kicker / eyebrow — */ .bw-kicker { display: inline-block; font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bw-accent-700); margin-bottom: 0.9rem; } /* — section rhythm — .bw-container sets horizontal padding, .bw-section/.bw-hero set vertical — using the *-inline/*-block logical longhands (rather than the `padding` shorthand on both) so a section that carries both classes on one element never has one silently zero out the other via cascade order. Combining the shorthand on two same-specificity classes was doing exactly that — zero horizontal padding on every section, which broke every viewport. */ .bw-container { /* min bound comfortably clears Bootstrap's largest gutter in use (.g-5 = 24px negative row margin) so no combination of container padding + row gutter can overflow at any viewport width — see the responsive checklist. */ max-width: 1320px; margin: 0 auto; padding-inline: var(--bw-container-pad); } .bw-section { padding-block: clamp(3.5rem, 8vh, 6rem); } .bw-section + .bw-section { border-top: none; } .bw-section-title { font-size: clamp(1.7rem, 4.4vw, 3.2rem); max-width: 20ch; margin-bottom: 0.6rem; } .bw-section-lead { font-size: clamp(0.95rem, 1.1vw, 1.15rem); line-height: 1.55; max-width: 52ch; color: var(--bw-neutral-700); } /* — nav (carries the scroll-progress bar as its own bottom edge, so the two never fight over the same sticky offset) — */ .bw-nav { position: sticky; top: 0; z-index: 40; background: var(--bw-bg); border-bottom: 1px solid var(--bw-divider); } .bw-progress-track { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--bw-neutral-300, #d7d3d3); } .bw-progress-fill { height: 100%; width: 0; background: var(--bw-accent); } @media (prefers-reduced-motion: reduce) { .bw-progress-track { display: none; } } .bw-nav-inner { display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(0.6rem, 3vw, 2.4rem); padding: 0.8rem clamp(0.9rem, 4vw, 2rem); max-width: 1320px; margin: 0 auto; } .bw-nav-brand { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-family: var(--bw-font-heading); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--bw-text); text-decoration: none; margin-right: auto; } .bw-nav-brand img { height: 24px; flex-shrink: 0; } .bw-nav-links { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.6rem); flex-wrap: wrap; } .bw-nav-links a { font-size: 0.86rem; color: var(--bw-text); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; } .bw-nav-links a:hover, .bw-nav-links a.active { color: var(--bw-accent-700); border-color: var(--bw-accent); } .bw-nav-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .bw-nav-actions .btn { white-space: nowrap; } .bw-nav-toggle { display: none; background: none; border: 1px solid var(--bw-divider); border-radius: var(--bw-radius); width: 38px; height: 38px; align-items: center; justify-content: center; color: var(--bw-text); flex-shrink: 0; } @media (max-width: 900px) { .bw-nav-links { display: none; } .bw-nav-toggle { display: inline-flex; } .bw-nav-links.is-open { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; position: absolute; top: 100%; left: 0; right: 0; background: var(--bw-bg); border-bottom: 1px solid var(--bw-divider); padding: 1.2rem clamp(1rem, 4vw, 2rem); z-index: 39; } } @media (max-width: 480px) { .bw-nav-brand-text { display: none; } .bw-nav-actions { gap: 0.35rem; } .bw-nav-actions .btn { padding: 0.5rem 0.75rem; font-size: 0.78rem; } } /* — buttons — */ .marketing-site .btn { font-family: var(--bw-font-heading); font-weight: 600; font-size: 0.9rem; border-radius: var(--bw-radius); padding: 0.6rem 1.35rem; border: 1px solid transparent; transition: none; } .marketing-site .btn:hover, .marketing-site .btn:focus { transform: none; } .marketing-site .btn-primary, .marketing-site .btn-cta-pill { background: var(--bw-accent); border-color: var(--bw-accent); color: #fff; } .marketing-site .btn-primary:hover, .marketing-site .btn-cta-pill:hover { background: var(--bw-accent-600); border-color: var(--bw-accent-600); color: #fff; box-shadow: none; } .marketing-site .btn-outline-light, .marketing-site .btn-secondary { background: transparent; border-color: var(--bw-divider); color: var(--bw-text); } .marketing-site .btn-outline-light:hover, .marketing-site .btn-secondary:hover { background: rgba(32, 30, 29, 0.06); color: var(--bw-text); } /* — cards / tags — */ .marketing-site .card { background: var(--bw-surface); border: none; border-radius: var(--bw-radius); box-shadow: none; } .marketing-site .card.shadow-sm { box-shadow: var(--bw-shadow-sm) !important; } .marketing-site .card-body h1, .marketing-site .card-body h2, .marketing-site .card-body h3, .marketing-site .card-body h4, .marketing-site .card-body h5, .marketing-site .card-body h6 { color: var(--bw-text); } .marketing-site .badge { font-family: var(--bw-font-heading); font-weight: 600; border-radius: 2px; } .bw-tag { display: inline-flex; align-items: center; font-size: 0.72rem; letter-spacing: 0.02em; padding: 3px 10px; border: 1px solid var(--bw-accent); color: var(--bw-accent-700); border-radius: 2px; background: transparent; } /* — forms — */ .marketing-site .form-control, .marketing-site .form-select { background: #fff; border: 1px solid var(--bw-divider); border-radius: var(--bw-radius); color: var(--bw-text); font-family: var(--bw-font-body); } .marketing-site .form-control:focus, .marketing-site .form-select:focus { border-color: var(--bw-accent); box-shadow: 0 0 0 3px rgba(0, 136, 176, 0.14); } /* Bootstrap's dark-theme CSS variables (--bs-body-bg etc.) stay active on even inside .marketing-site, and form-check-input/radio inputs are fully custom-painted (appearance:none + background-color), so they pick up the dark --bs-body-bg (near-black) unless forced back to paper here. */ .marketing-site .form-check-input { background-color: #fff !important; border: 1px solid var(--bw-neutral-400) !important; } .marketing-site .form-check-input:checked { background-color: var(--bw-accent) !important; border-color: var(--bw-accent) !important; } .marketing-site .form-check-input:focus { box-shadow: 0 0 0 3px rgba(0, 136, 176, 0.14) !important; border-color: var(--bw-accent) !important; } .marketing-site .form-check-label { color: var(--bw-text); text-transform: none; letter-spacing: normal; font-size: 0.9rem; } .marketing-site label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bw-neutral-700); } /* — image treatments — */ .halftone { position: relative; filter: grayscale(0.35) contrast(1.15); overflow: hidden; background: var(--bw-surface); } .halftone img { width: 100%; height: 100%; object-fit: cover; display: block; } .halftone::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(0,0,0,0.22) 30%, transparent 32%); background-size: 3px 3px; mix-blend-mode: multiply; } .cmyk { position: relative; overflow: hidden; background: var(--bw-surface); } .cmyk img { width: 100%; height: 100%; object-fit: cover; display: block; } .cmyk::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(0,0,0,0.16) 30%, transparent 32%); background-size: 3px 3px; mix-blend-mode: multiply; } .bw-media-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; min-height: 160px; background: var(--bw-surface); color: var(--bw-neutral-700); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px dashed var(--bw-neutral-400); padding: 1rem; } .cmyk .bw-media-placeholder, .halftone .bw-media-placeholder { font-size: clamp(2rem, 6vw, 3.2rem); letter-spacing: 0; text-transform: none; border: none; background: transparent; } /* — zone list (directions / courses) — */ .bw-zone-list { display: flex; flex-direction: column; } .bw-zone { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.8rem, 4vh, 2.6rem) 0; border-top: 1px solid var(--bw-divider); text-decoration: none; color: inherit; } .bw-zone:first-child { border-top: 1px solid var(--bw-divider); } .bw-zone-num { font-family: var(--bw-font-heading); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--bw-neutral-400); line-height: 1; margin-bottom: 0.4rem; } .bw-zone-title { font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin-bottom: 0.4rem; } .bw-zone-desc { color: var(--bw-neutral-700); max-width: 42ch; margin-bottom: 0.8rem; font-size: 0.92rem; } .bw-zone-meta { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--bw-neutral-700); } .bw-zone-figure { aspect-ratio: 3/2; border-radius: var(--bw-radius); } @media (max-width: 760px) { .bw-zone { grid-template-columns: 1fr; } .bw-zone-figure { order: -1; } } /* — values row — */ .bw-values { display: flex; flex-wrap: wrap; gap: 0 clamp(1.4rem, 4vw, 3rem); } .bw-value { font-size: clamp(1rem, 2vw, 1.4rem); font-weight: 600; font-family: var(--bw-font-heading); padding-bottom: 0.6rem; margin-bottom: 1rem; border-bottom: 1px solid var(--bw-accent); } /* — testimonial wall — */ .bw-testimonial { display: flex; flex-direction: column; gap: 0.6rem; } .bw-testimonial-figure { aspect-ratio: 4/3; border-radius: var(--bw-radius); margin-bottom: 0.6rem; overflow: hidden; } .bw-testimonial-kicker { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bw-accent-700); } .bw-testimonial-name { font-weight: 600; } .bw-testimonial-role { color: var(--bw-neutral-700); font-size: 0.86rem; } .bw-testimonial-quote { font-style: italic; max-width: 34ch; } /* — enrolment coupon — */ .bw-coupon { position: relative; border: 1px dashed var(--bw-neutral-400); padding: clamp(1.6rem, 3.4vw, 2.4rem); max-width: 34rem; border-radius: 0; } .bw-coupon-label { position: absolute; top: -0.6rem; left: 1.4rem; background: var(--bw-bg); padding: 0 0.55rem; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bw-neutral-700); } .bw-coupon .form-control, .bw-coupon .form-select { background: transparent; border: 0; border-bottom: 1px solid var(--bw-text); border-radius: 0; padding: 0.5rem 0; font-size: 1.05rem; } .bw-coupon .form-control:focus, .bw-coupon .form-select:focus { box-shadow: none; border-color: var(--bw-accent); } .bw-coupon .input-group-text { background: transparent; border: 0; border-bottom: 1px solid var(--bw-text); border-radius: 0; padding-left: 0; } /* — hero — */ .bw-hero { padding-block: clamp(3rem, 9vh, 6rem) clamp(2rem, 6vh, 4rem); } .bw-hero-headline { font-size: clamp(2rem, 6vw, 4.6rem); max-width: 16ch; margin-bottom: 1.2rem; } .bw-hero-headline em { color: var(--bw-accent-700); font-style: italic; } /* — footer — */ .bw-footer { border-top: 1px solid var(--bw-divider); padding: clamp(2rem, 5vh, 3.5rem) 0 2rem; color: var(--bw-neutral-700); font-size: 0.86rem; } .bw-footer a { color: var(--bw-text); text-decoration: none; } .bw-footer a:hover { color: var(--bw-accent-700); } .bw-footer-phone { font-family: var(--bw-font-heading); font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 700; color: var(--bw-text); text-decoration: none; display: inline-block; margin-bottom: 0.4rem; } /* — reskin the shared decorative classes used by the other public pages (course/direction detail, lists, testimonials, contact, apply) so they don't need a structural rewrite — same markup, Broadsheet colours. — */ .marketing-site .hero-gradient { background: var(--bw-bg); color: var(--bw-text); border-bottom: 1px solid var(--bw-divider); border-radius: 0 !important; margin-inline: calc(-1 * var(--bw-container-pad)); padding-inline: var(--bw-container-pad) !important; } .marketing-site .hero-gradient .badge { background: transparent !important; border: none !important; color: var(--bw-accent-700) !important; font-family: var(--bw-font-heading); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.72rem; padding: 0; } .marketing-site .hero-gradient h2, .marketing-site .hero-gradient h1 { color: var(--bw-text) !important; font-size: clamp(1.9rem, 5vw, 3.2rem); } .marketing-site .hero-gradient p { color: var(--bw-neutral-700) !important; } .marketing-site .hero-grid-texture::before { display: none; } .marketing-site .hero-gradient-text { background: none; -webkit-text-fill-color: unset; color: var(--bw-accent-700); } .marketing-site .dark-band { background: var(--bw-surface); border-radius: 0 !important; padding: clamp(1.5rem, 4vw, 2.4rem) !important; border-top: 1px solid var(--bw-divider); border-bottom: 1px solid var(--bw-divider); } .marketing-site .dark-band h5, .marketing-site .dark-band h4, .marketing-site .dark-band h3 { color: var(--bw-text) !important; } .marketing-site .dark-band p { color: var(--bw-neutral-700) !important; } .marketing-site .indigo-card { background: var(--bw-surface); color: var(--bw-text); border: 1px solid var(--bw-divider); } .marketing-site .indigo-card:hover { color: var(--bw-accent-700); } .marketing-site .indigo-card .text-muted { color: var(--bw-neutral-700) !important; } .marketing-site .why-card { background: #fff; box-shadow: var(--bw-shadow-sm); border-radius: var(--bw-radius); } .marketing-site .stat-icon-gradient, .marketing-site .card-cover-icon { background: var(--bw-accent-100) !important; color: var(--bw-accent-700) !important; box-shadow: none; } .marketing-site .card-cover { background: var(--bw-surface) !important; } .marketing-site .card-cover-icon { backdrop-filter: none; } .marketing-site .testimonial-card-header { background: var(--bw-surface); border-bottom: 1px solid var(--bw-divider); } .marketing-site .testimonial-card-header .fw-semibold, .marketing-site .testimonial-card-header div { color: var(--bw-text) !important; } .marketing-site .testimonial-card-header .avatar-fallback { background: var(--bw-accent-100); } .marketing-site .outcome-pill { background: transparent; border: 1px solid var(--bw-accent); color: var(--bw-accent-700); border-radius: 2px; } .marketing-site .filter-pill { background: transparent; border-radius: 2px; border: 1px solid var(--bw-divider); color: var(--bw-text); } .marketing-site .filter-pill:hover { border-color: var(--bw-accent); } .marketing-site .filter-pill.active { background: var(--bw-accent); color: #fff; border-color: var(--bw-accent); } .marketing-site .lead-form-card { background: var(--bw-surface); box-shadow: none; border: 1px dashed var(--bw-neutral-400); border-radius: 0; } .marketing-site .lead-form-card label { color: var(--bw-neutral-700); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; } .marketing-site .lead-form-card .call-hint a { color: var(--bw-accent-700); } .marketing-site .accordion-item { background: transparent; border: none; border-bottom: 1px solid var(--bw-divider); border-radius: 0 !important; } .marketing-site .accordion-button { background: transparent; font-family: var(--bw-font-heading); color: var(--bw-text); box-shadow: none !important; } .marketing-site .accordion-button:not(.collapsed) { background: transparent; color: var(--bw-accent-700); } .marketing-site .accordion-body { color: var(--bw-neutral-700); } .marketing-site .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .marketing-site .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .marketing-site .reveal { opacity: 1; transform: none; transition: none; } } /* campus-scroll.js repaints [data-fx] elements' inline opacity/transform every animation frame while scrolling — a CSS transition on the same properties (inherited from .reveal, kept here only as the safe pre-JS default) would queue a fresh 0.6s tween on every frame and turn the 1:1 scroll tracking into a laggy, mushy follow instead of the crisp response the rig expects. */ .marketing-site [data-fx] { transition: none; } .marketing-site .bw-split-line { display: block; will-change: transform; }