/* Course Orbit — shared design system Loaded on every page across all three audiences. Per-audience accent colors are set via [data-audience] on . */ :root { --color-ink: #14181f; --color-ink-soft: #3a4150; --color-paper: #ffffff; --color-paper-alt: #f4f6f8; --color-border: #d7dce2; --color-focus: #1a4fd6; --color-link: #144fc4; --color-link-visited: #5b3aa8; --color-success-bg: #e6f4ea; --color-success-ink: #1e4620; --color-danger-bg: #fbe9e9; --color-danger-ink: #7a1f1f; /* Brand colors, taken from the Course Orbit crescent logo. --color-brand is the logo's vivid orange (decorative use only); --color-brand-strong is a darkened orange that holds 4.5:1+ contrast with white text, so it is the only orange allowed on buttons/text. */ --color-brand: #f94d00; --color-brand-strong: #c03d00; --color-brand-deep: #8f2e00; --color-charcoal: #3f3f3f; /* Default (neutral) accent, overridden per audience below */ --color-accent: #144fc4; --color-accent-dark: #0d3894; --color-accent-ink: #ffffff; --color-accent-soft: #eaf0fd; --font-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --max-content-width: 72rem; --radius: 10px; --radius-sm: 6px; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4.5rem; --shadow-sm: 0 1px 3px rgba(20, 24, 31, 0.08), 0 1px 2px rgba(20, 24, 31, 0.06); --shadow-md: 0 8px 24px rgba(20, 24, 31, 0.10), 0 2px 6px rgba(20, 24, 31, 0.06); --shadow-lg: 0 16px 40px rgba(20, 24, 31, 0.14), 0 4px 10px rgba(20, 24, 31, 0.08); } /* Operational content added by the file-based publishing and form workflows. */ .form-honeypot { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; } .article-body { max-width: 48rem; } .article-body h2, .article-body h3 { scroll-margin-top: 8rem; } .table-scroll { overflow-x: auto; } .table-scroll:focus-visible { outline: 3px solid var(--color-brand-strong); outline-offset: 3px; } /* ---------- Audience accents ---------- */ /* Teachers: deep professional blue — efficiency, trust */ body[data-audience="teachers"] { --color-accent: #1a3d8f; --color-accent-dark: #122a66; --color-accent-ink: #ffffff; --color-accent-soft: #e8edfb; } /* Institutions: restrained violet/slate — review, governance, procurement */ body[data-audience="institutions"] { --color-accent: #56428f; --color-accent-dark: #3d2d6c; --color-accent-ink: #ffffff; --color-accent-soft: #eeeaf8; } /* Students: warm engaging teal — approachable, energetic, AA-safe */ body[data-audience="students"] { --color-accent: #0d6e5e; --color-accent-dark: #094e42; --color-accent-ink: #ffffff; --color-accent-soft: #e2f4f0; } /* Bookstores: structured amber/bronze — B2B, procurement */ body[data-audience="bookstores"] { --color-accent: #8a5a10; --color-accent-dark: #613e08; --color-accent-ink: #ffffff; --color-accent-soft: #f7f0e0; } * { box-sizing: border-box; } html { font-size: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--font-sans); color: var(--color-ink); background: var(--color-paper); line-height: 1.6; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } svg { display: block; } a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:visited { color: var(--color-link-visited); } a:hover { text-decoration-thickness: 2px; } /* Visible, high-contrast focus ring on every interactive element */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; } /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-ink); color: #fff; padding: 0.75rem 1.25rem; z-index: 1000; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } /* ---------- Layout ---------- */ .container { max-width: var(--max-content-width); margin-inline: auto; padding-inline: var(--space-3); } .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(6px); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: 0.9rem; flex-wrap: wrap; } .site-header__brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--color-ink); text-decoration: none; } .site-header__brand:visited { color: var(--color-ink); } .logo-mark { width: 30px; height: 30px; flex: none; color: var(--color-accent); animation: none !important; transform: none !important; } .audience-nav { display: flex; gap: var(--space-1); flex-wrap: wrap; } .audience-nav a { display: inline-block; padding: 0.5rem 0.9rem; border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--color-ink-soft); border: 1px solid transparent; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .audience-nav a[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); } .audience-nav a:not([aria-current="page"]):hover { border-color: var(--color-border); background: var(--color-paper-alt); } .section-nav { display: flex; gap: var(--space-3); flex-wrap: wrap; padding-block: 0.65rem; border-top: 1px solid var(--color-border); } .section-nav a { font-weight: 600; text-decoration: none; color: var(--color-ink-soft); padding-block: 0.15rem; border-bottom: 2px solid transparent; } .section-nav a[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-accent); } .section-nav a:hover { color: var(--color-ink); } main { display: block; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding-block: var(--space-5); background: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-paper) 100%); border-bottom: 1px solid var(--color-border); } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; opacity: 0.35; pointer-events: none; } .hero::before { width: 26rem; height: 26rem; right: -9rem; top: -11rem; background: radial-gradient(circle at 30% 30%, var(--color-accent) 0%, transparent 70%); } .hero::after { width: 16rem; height: 16rem; right: 6rem; bottom: -8rem; border: 2px solid var(--color-accent); background: transparent; opacity: 0.18; } .hero .container { position: relative; z-index: 1; } .hero h1 { font-size: clamp(2.1rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--space-2); max-width: 40ch; } .hero p.lede { font-size: 1.2rem; max-width: 58ch; color: var(--color-ink-soft); } .hero .btn { margin-top: var(--space-2); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.4rem; border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; border: 2px solid var(--color-accent); cursor: pointer; font-size: 1rem; font-family: inherit; transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease; } .btn--primary { background: var(--color-brand-strong); border-color: var(--color-brand-strong); color: #ffffff; box-shadow: var(--shadow-sm); } .btn--primary:visited { color: #ffffff; } .btn--primary:hover { filter: brightness(1.08); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn--secondary { background: var(--color-paper); color: var(--color-accent); } .btn--secondary:visited { color: var(--color-accent); } .btn--secondary:hover { background: var(--color-accent-soft); transform: translateY(-1px); } /* ---------- Icon-led feature cards ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: var(--space-3); margin-block: var(--space-4); } .card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); background: var(--color-paper); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .card:hover, .card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-accent); } .card h3 { margin-top: 0; } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); margin-bottom: var(--space-2); } .card__icon svg { width: 1.5rem; height: 1.5rem; } /* ---------- Numbered steps ---------- */ .steps { list-style: none; margin: var(--space-3) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); counter-reset: co-step; } .steps li { counter-increment: co-step; position: relative; padding: var(--space-3) var(--space-3) var(--space-3) 3.6rem; background: var(--color-paper-alt); border: 1px solid var(--color-border); border-radius: var(--radius); } .steps li::before { content: counter(co-step); position: absolute; left: var(--space-2); top: var(--space-2); width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; } .steps h3 { margin: 0 0 0.3rem; font-size: 1.05rem; } .steps p { margin: 0; color: var(--color-ink-soft); } /* ---------- Badges & callouts ---------- */ .badge { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; background: var(--color-accent-soft); color: var(--color-accent-dark); } .callout { display: flex; gap: var(--space-2); align-items: flex-start; border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); background: var(--color-paper-alt); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-block: var(--space-3); } .callout__icon { color: var(--color-accent); flex: none; width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; } .callout p { margin: 0; } .callout p + p { margin-top: 0.4rem; } /* ---------- Lesson layout (course catalog disclosure) ---------- */ .lesson-layout { margin: var(--space-3) 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-paper-alt); } .lesson-layout summary { cursor: pointer; padding: var(--space-2) var(--space-3); font-weight: 600; color: var(--color-accent); } .lesson-layout summary:hover { color: var(--color-accent-dark); } .lesson-layout[open] summary { border-bottom: 1px solid var(--color-border); } .lesson-layout ol { margin: 0; padding: var(--space-2) var(--space-3) var(--space-2) 3rem; } .lesson-layout li { margin: 0.35rem 0; break-inside: avoid; } .lesson-layout p { margin: 0; padding: 0 var(--space-3) var(--space-2); color: var(--color-ink-soft); } @media (min-width: 56rem) { .lesson-layout ol { columns: 2; column-gap: var(--space-4); } } /* ---------- Stat row ---------- */ .stat-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-block: var(--space-3); } .stat { min-width: 8rem; } .stat strong { display: block; font-size: 1.9rem; font-weight: 800; color: var(--color-accent); } .stat span { color: var(--color-ink-soft); font-size: 0.92rem; } /* ---------- Sections ---------- */ section { padding-block: var(--space-4); } section.alt { background: var(--color-paper-alt); } section > .container > h2:first-child, section > .container > h2.section-title { margin-top: 0; } /* ---------- Tables ---------- */ table { border-collapse: collapse; width: 100%; margin-block: var(--space-3); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } caption { text-align: left; font-weight: 700; margin-bottom: var(--space-1); } th, td { border: 1px solid var(--color-border); padding: 0.7rem 0.9rem; text-align: left; } th { background: var(--color-accent-soft); color: var(--color-ink); } tbody tr:nth-child(even) { background: var(--color-paper-alt); } /* ---------- Forms ---------- */ form { max-width: 40rem; } .form-row { margin-bottom: var(--space-3); } label { display: block; font-weight: 600; margin-bottom: 0.3rem; } .hint { color: var(--color-ink-soft); font-size: 0.9rem; margin-top: 0.25rem; } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; background: var(--color-paper); color: var(--color-ink); } fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2); margin-bottom: var(--space-3); } legend { font-weight: 700; padding-inline: 0.3rem; } .required-mark { color: #7a1f1f; } .alert { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); margin-block: var(--space-3); border: 1px solid transparent; } .alert--success { background: var(--color-success-bg); color: var(--color-success-ink); border-color: #b7ddc0; } .alert--error { background: var(--color-danger-bg); color: var(--color-danger-ink); border-color: #eec4c4; } /* ---------- Instructor profile assessment ---------- */ .assessment-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr); gap: var(--space-4); align-items: start; } .assessment-intro h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0 0 var(--space-2); } .assessment-intro p { max-width: 62ch; } .benefit-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.55rem; padding: 0; margin: var(--space-3) 0; } .benefit-list li { border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent-dark); font-size: 0.9rem; font-weight: 700; padding: 0.35rem 0.7rem; } .assessment-quote { border-left: 4px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-paper-alt); margin: var(--space-3) 0 var(--space-2); padding: var(--space-2) var(--space-3); } .assessment-quote p { font-family: var(--font-serif); font-size: 1.35rem; margin: 0 0 0.25rem; color: var(--color-ink); } .assessment-quote cite { color: var(--color-ink-soft); font-style: normal; } .assessment-note { color: var(--color-ink); } .assessment-card { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-paper); box-shadow: var(--shadow-md); padding: var(--space-3); } .assessment-start h3, .assessment-results h3 { margin-top: 0; } .assessment-card form { max-width: none; } .assessment-progress { margin-bottom: var(--space-3); } .assessment-progress__track { height: 0.55rem; overflow: hidden; border-radius: 999px; background: var(--color-paper-alt); border: 1px solid var(--color-border); } .assessment-progress__bar { width: 0; height: 100%; border-radius: inherit; background: var(--color-accent); transition: width 0.22s ease; } .assessment-progress p { color: var(--color-ink-soft); font-size: 0.92rem; margin: 0.45rem 0 0; } .assessment-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .assessment-option { display: flex; align-items: flex-start; gap: 0.65rem; min-height: 3.4rem; padding: 0.8rem 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-paper); cursor: pointer; font-weight: 600; line-height: 1.35; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .assessment-option:hover, .assessment-option:focus-within { border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: var(--shadow-sm); } .assessment-option input { width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; flex: none; accent-color: var(--color-accent); } .assessment-actions { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); } .assessment-message { min-height: 1.4rem; margin: var(--space-2) 0 0; font-weight: 700; } .assessment-message--error { color: var(--color-danger-ink); } .assessment-message--success { color: var(--color-success-ink); } .profile-summary { display: grid; gap: var(--space-2); margin-block: var(--space-3); } .profile-summary section { padding-block: var(--space-2); border-top: 1px solid var(--color-border); } .profile-summary h4, .email-capture h4 { margin: 0 0 0.35rem; font-size: 1rem; } .profile-summary__style { margin: 0; color: var(--color-accent-dark); font-weight: 800; font-size: 1.15rem; } .profile-summary ul { margin: 0; padding-left: 1.25rem; } .email-capture { max-width: none; border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-3); } .email-capture .form-row { max-width: 28rem; } .btn:disabled { cursor: not-allowed; filter: grayscale(0.2); opacity: 0.62; transform: none; box-shadow: none; } /* ---------- Progressive instructor-copy request flow ---------- */ .request-flow { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-paper); box-shadow: var(--shadow-md); padding: var(--space-3); max-width: 44rem; } .request-flow__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); } .request-flow__meta .assessment-progress { flex: 1; margin-bottom: 0; } .request-flow h3 { margin-top: var(--space-2); } .request-saved { flex: none; margin: 0; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--color-success-soft, var(--color-accent-soft)); color: var(--color-success-ink); font-size: 0.85rem; font-weight: 700; opacity: 0; transition: opacity 0.2s ease; } .request-saved.is-visible { opacity: 1; } .request-saved::before { content: "\2713\00a0"; } .callout--slim { border-left-width: 4px; padding: var(--space-2) var(--space-3); margin-block: var(--space-2); } /* ---------- Calm reassurance block (instructor lobby footer) ---------- */ .reassurance { max-width: 46rem; } .reassurance h2 { margin-top: 0; } .reassurance__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; font-weight: 600; } .reassurance__sep { color: var(--color-ink-soft); } /* ---------- CTA band (brand charcoal-to-orange, matching the logo) ---------- */ .cta-band { background: linear-gradient(135deg, #2a2d33 0%, var(--color-brand-deep) 60%, var(--color-brand-strong) 100%); color: #fff; text-align: center; padding-block: var(--space-4); } .cta-band h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 0.5rem; } .cta-band p { color: rgba(255,255,255,0.9); font-size: 1.1rem; max-width: 50ch; margin: 0 auto var(--space-3); } .cta-band .btn--primary { background: #fff; color: var(--color-brand-strong); border-color: #fff; } .cta-band .btn--primary:hover { filter: none; background: var(--color-paper-alt); } .cta-band .btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); } .cta-band .btn--secondary:hover { background: rgba(255,255,255,0.12); } /* ---------- Feature grid (icon + short phrase, marketing style) ---------- */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-3); margin-block: var(--space-3); } .feature { text-align: center; padding: var(--space-2); } .feature .card__icon { margin-inline: auto; } .feature h3 { font-size: 1.05rem; margin: 0 0 0.25rem; } .feature p { margin: 0; color: var(--color-ink-soft); font-size: 0.95rem; } /* ---------- Section heading with kicker ---------- */ .kicker { display: block; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin-bottom: 0.4rem; } .section-head { text-align: center; max-width: 44rem; margin: 0 auto var(--space-4); } .section-head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--color-border); background: var(--color-ink); color: #c9cfd9; margin-top: var(--space-5); padding-block: var(--space-4); font-size: 0.95rem; } .site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3); } .site-footer h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: #ffffff; margin-bottom: var(--space-1); } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: 0.45rem; } .site-footer a { color: #c9cfd9; } .site-footer a:visited { color: #c9cfd9; } .site-footer a:hover { color: #ffffff; } .site-footer__legal { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.85rem; } .site-footer__legal a { color: #e4e7ec; } /* ---------- Scroll reveal (JS-gated; no-JS pages render fully static) ---------- */ .will-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; } .will-reveal.is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .will-reveal { opacity: 1; transform: none; transition: none; } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (max-width: 40rem) { .site-header__inner { flex-direction: column; align-items: flex-start; } .hero::before, .hero::after { display: none; } .assessment-options { grid-template-columns: 1fr; } .assessment-actions .btn { width: 100%; justify-content: center; } } @media (max-width: 56rem) { .assessment-layout { grid-template-columns: 1fr; } } /* ========================================================================== Motion layer — ambient, purposeful animation. Everything here is wrapped in prefers-reduced-motion: no-preference, so reduced-motion users get a completely still page. No JS required for any of it except the --parallax variable (set by site.js). ========================================================================== */ @media (prefers-reduced-motion: no-preference) { /* ----- Living hero background ----- */ @keyframes co-drift { 0% { transform: translate3d(0, calc(var(--parallax, 0px) * 0.4), 0) scale(1); } 50% { transform: translate3d(-2.5rem, calc(1.5rem + var(--parallax, 0px) * 0.4), 0) scale(1.12); } 100% { transform: translate3d(1.5rem, calc(-1rem + var(--parallax, 0px) * 0.4), 0) scale(0.96); } } .hero::before { animation: co-drift 26s ease-in-out infinite alternate; will-change: transform; } .hero { background: linear-gradient(160deg, var(--color-accent-soft) 0%, var(--color-paper) 55%, var(--color-accent-soft) 100%); background-size: 220% 220%; animation: co-hero-wash 18s ease-in-out infinite alternate; } @keyframes co-hero-wash { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } /* Rotating dashed ring: reads as a quiet orbit */ .hero::after { border-style: dashed; animation: co-spin 60s linear infinite; will-change: transform; } @keyframes co-spin { to { transform: rotate(360deg); } } /* ----- Orbit system decoration: rings rotate ----- */ .orbit-decor__ring { transform-origin: 50% 50%; animation: co-spin 44s linear infinite; } .orbit-decor__ring--inner { animation-duration: 26s; animation-direction: reverse; } /* ----- CTA sheen: a light sweep across the primary action ----- */ body[data-audience="teachers"] .hero .btn--primary, .cta-band .btn--primary { position: relative; overflow: hidden; } body[data-audience="teachers"] .hero .btn--primary::after, .cta-band .btn--primary::after { content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%); transform: skewX(-18deg); animation: co-sheen 5.5s ease-in-out infinite; } @keyframes co-sheen { 0%, 74% { left: -80%; } 88% { left: 130%; } 100% { left: 130%; } } /* ----- CTA band: slow gradient life ----- */ .cta-band { background: linear-gradient(135deg, #2a2d33 0%, var(--color-brand-deep) 45%, var(--color-brand-strong) 70%, var(--color-brand-deep) 100%); background-size: 240% 240%; animation: co-band 16s ease-in-out infinite alternate; } @keyframes co-band { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* ----- Assessment card: gentle levitation draws the eye ----- */ .assessment-card { animation: co-float 7s ease-in-out infinite; will-change: transform; } @keyframes co-float { 0%, 100% { transform: translateY(0); box-shadow: var(--shadow-md); } 50% { transform: translateY(-8px); box-shadow: var(--shadow-lg); } } .assessment-progress__bar { transition: width 0.4s ease; } /* ----- Card icons wake up on card hover ----- */ .card:hover .card__icon, .feature:hover .card__icon { transform: scale(1.12) rotate(-4deg); } .card__icon { transition: transform 0.25s ease; } } /* Orbit decoration layout: outside the motion gate so reduced-motion users see a well-placed, still illustration instead of an unstyled one. Two-tone to echo the logo: orange outer ring, charcoal inner ring. */ .orbit-decor { position: absolute; right: clamp(-6rem, 2vw, 4rem); top: 50%; width: 22rem; height: 22rem; margin-top: -11rem; pointer-events: none; opacity: 0.5; color: var(--color-brand); } .orbit-decor__ring--inner { color: var(--color-charcoal); } /* Gradient headline for the inviting pages (safe fallback: solid ink). Ink fading into brand orange — the accessible dark shade, not the decorative one, since this is body-adjacent text on white. */ body[data-audience="teachers"] .hero h1 { background: linear-gradient(100deg, var(--color-ink) 30%, var(--color-brand-strong) 75%, var(--color-brand-deep) 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--color-ink); } @supports not (background-clip: text) { body[data-audience="teachers"] .hero h1 { background: none; -webkit-text-fill-color: currentColor; } } @media (max-width: 56rem) { .orbit-decor { display: none; } } /* ---------- Printable institutional review package ---------- */ .print-only { display: none; } .print-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .review-meta { color: var(--color-ink-soft); font-size: 0.92rem; margin-top: var(--space-3); } .review-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-block: var(--space-3); } .review-facts > div, .review-status-grid > article { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--color-paper); } .review-facts h3, .review-status-grid h3 { margin: 0 0 0.35rem; font-size: 1.05rem; } .review-facts p, .review-status-grid p { margin: 0; } .review-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } .document-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); list-style: none; padding: 0; } .document-index li { border-left: 3px solid var(--color-accent); padding: 0.35rem 0 0.35rem var(--space-2); } .document-index a, .document-index span { display: block; } .document-index span { color: var(--color-ink-soft); font-size: 0.92rem; } .review-checklist { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); padding: 0; } .review-checklist li { position: relative; padding-left: 1.8rem; } .review-checklist li::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 0.9rem; height: 0.9rem; border: 2px solid var(--color-accent); border-radius: 2px; } .review-contact address { font-style: normal; } @media (max-width: 56rem) { .review-status-grid { grid-template-columns: 1fr; } } @media (max-width: 40rem) { .review-facts, .document-index, .review-checklist { grid-template-columns: 1fr; } } @page { margin: 0.55in; } @media print { :root { --color-ink: #000000; --color-ink-soft: #222222; --color-paper: #ffffff; --color-paper-alt: #ffffff; --color-border: #777777; } html { font-size: 9.5pt; scroll-behavior: auto; } body { background: #ffffff; color: #000000; line-height: 1.38; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .site-header, .site-footer, .skip-link, .no-print { display: none !important; } .print-only { display: block; } .container { max-width: none; padding-inline: 0; } .hero, section, section.alt { background: #ffffff !important; } .hero { border-bottom: 2px solid #000000; padding-block: 0 0.2in; } .hero::before, .hero::after { display: none; } .hero h1, body[data-audience] .hero h1 { background: none; color: #000000; font-size: 22pt; -webkit-text-fill-color: currentColor; } .hero p.lede { font-size: 11pt; } .badge { background: transparent; border: 1px solid #555555; color: #000000; } section { padding-block: 0.16in; } h2 { font-size: 15pt; margin-bottom: 0.08in; } h3 { font-size: 11pt; } h1, h2, h3, caption { break-after: avoid; } p, li { orphans: 3; widows: 3; } a, a:visited { color: #000000; } .review-meta { margin-bottom: 0; } .document-location, .print-url { color: #333333 !important; font-size: 8pt !important; } .review-facts, .review-status-grid, .document-index, .review-checklist { gap: 0.08in 0.18in; } .review-facts > div, .review-status-grid > article, .callout, .document-index li { background: #ffffff; border-color: #555555; box-shadow: none; break-inside: avoid; } .review-facts > div, .review-status-grid > article { padding: 0.1in; } .callout { margin-block: 0.1in; } .review-checklist li { break-inside: avoid; } .review-checklist li::before { border-color: #000000; } table { margin-block: 0.08in; border-radius: 0; box-shadow: none; font-size: 8.2pt; } th, td { padding: 0.05in 0.07in; } th { background: #eeeeee; } tr { break-inside: avoid; } .table-scroll { overflow: visible; } .review-contact { border-top: 1px solid #555555; break-inside: avoid; } }