/* ============================================================ Overtly design system: environments 6 October 2026, from the approved visual handoff kept in design-resources/overtly/ (IMPLEMENTATION-PROMPT.md, DESIGN-RULES.md). WHAT AN ENVIRONMENT IS. Mint is the platform. A page is in one of two environments and says which on its element: every public page a learner reads Creator Studio Since 6 October 2026 (decision 454) every public page declares one: the dashboard, the account, sign-in, the lesson pages, Insights, the tool pages and the legal pages joined the landing, the catalogue and the course pages. The console (/admin/ and /studio/) does not: it is a working tool with its own density, and it keeps the earlier palette. The environment belongs to the PAGE, never to the person. A creator reading a learner's course is on a learner page and sees the learner theme. Nothing here reads who is signed in. WHY A FILE OF ITS OWN. The handoff's palette reuses names tokens.css already owns (--ov-ink, --ov-paper, --ov-mint, --ov-coral) with new values. Setting them at :root would restyle every page on the site at once, including the console, which the handoff does not cover, and the body of a course-built tool, which belongs to its course thread and carries its own palette. So they are set here, on the element that carries the attribute, and a page opts in by carrying it and loading this file after components.css. tools/check-design-tokens.mjs reads tokens.css only, which is the other reason these do not live there. Custom properties that are defined with var() resolve where they are declared, not where they are used. So every token that depends on a colour changed here is declared again here, or it would keep the :root value it was computed with. Contrast, measured on the rendered pages by tools/check-contrast.mjs and stated in the handoff's CONTRAST.md: ink on paper 11.74 muted on paper 5.24 muted on pale mint 4.88 muted on pale coral 4.98 white on learner action 5.46 (hover 6.73) white on creator action 4.82 (hover 5.79) coral text on pale coral 5.23 ink on mint 8.65 learner link on pale mint 4.84 ============================================================ */ [data-ov-environment] { /* ---- Palette ---- */ --ov-ink: #303632; /* Charcoal. The reading colour. */ --ov-paper: #fbf9f4; --ov-white: #ffffff; --ov-mint: #a5e5ce; /* Platform mint. Bars, learner steps, APPLY IT. */ --ov-pale: #e8f4ed; /* Pale mint. Learner process band, practice modules. */ --ov-coral: #ff6475; /* Bright coral. DECORATION ONLY: bars and art. White on it is 2.9:1, so it never carries small text. */ --ov-coral-pale: #fff0f1; /* Pale coral. Creator process band. */ --ov-coral-ink: #c4213c; /* The coral that is legible as text on light. */ --ov-yolk: #f7c948; /* Occasional warmth. Never an action, never progress. */ --ov-forest: #0b4b3c; /* Dark green. The wordmark and the focus ring. */ --ov-forest-accent: #28765e; /* ---- Roles that were computed from the palette at :root ---- */ --ov-text: var(--ov-ink); --ov-text-muted: #626b65; --ov-text-on-dark: var(--ov-paper); --ov-divider: #dfe4df; --ov-control-border: #758078; /* 3.9:1 on white: a real input boundary. */ --ov-focus: var(--ov-forest); --ov-bg: var(--ov-paper); --ov-surface: var(--ov-white); --ov-surface-soft: var(--ov-pale); --ov-radius-control: 6px; --ov-radius-card: 8px; --radius-sm: 6px; /* styles.css sets every input and button radius from this */ /* The large panels of the dashboard, the account and sign-in were 18 and 20px. A reading surface is 8px everywhere in an environment. */ --ov-radius-panel: 8px; --radius-lg: 8px; /* ---- The environment's roles. Learner is the default. ---- */ --ov-env-action: var(--ov-learn-action); --ov-env-action-hover: var(--ov-learn-hover); --ov-env-link: var(--ov-learn-action); --ov-env-accent: var(--ov-mint); --ov-env-process-bg: var(--ov-pale); --ov-env-step-bg: var(--ov-mint); --ov-env-step-text: var(--ov-ink); --ov-env-practice-bg: var(--ov-pale); --ov-action-bg: var(--ov-env-action); --ov-action-text: var(--ov-white); /* ---- The same decisions for the shared chrome, which is still written against the bare names in assets/styles.css: the header, the footer, .btn and .pill. Without these a page would have a charcoal body under a green-ink header. ---- */ --ink: #303632; --body-gray: #626b65; --muted: #626b65; --ivory: #fbf9f4; --line: #dfe4df; --mint: #a5e5ce; --mint-soft: #e8f4ed; --evergreen: var(--ov-env-action); --evergreen-deep: var(--ov-env-action-hover); /* The lesson pages, sign-in and the quizzes are written against these. */ --forest: #0b4b3c; --mint-accent: #a5e5ce; --coral: #ff6475; --coral-soft: #fff0f1; --coral-ink: #c4213c; --coral-deep: #c4213c; } [data-ov-environment="creator"] { --ov-env-action: var(--ov-create-action); --ov-env-action-hover: var(--ov-create-hover); --ov-env-link: var(--ov-create-hover); --ov-env-accent: var(--ov-coral); --ov-env-process-bg: var(--ov-coral-pale); /* White numerals need the strong coral, not the light accent. */ --ov-env-step-bg: var(--ov-create-action); --ov-env-step-text: var(--ov-white); --ov-forest-accent: var(--ov-create-hover); /* Declared again: each was computed from the learner roles one rule up. */ --ov-action-bg: var(--ov-env-action); /* The older stylesheet uses this one name for fills and for small text. As text the action coral is 4.4:1 on the pale band, so here it is the coral that reads: 5.2:1 as text, 5.8:1 under white as a fill. */ --evergreen: var(--ov-create-hover); --evergreen-deep: #a81b33; --mint-soft: #fff0f1; } /* ---- The page ---- */ [data-ov-environment], [data-ov-environment] body { background: var(--ov-paper); color: var(--ov-text-muted); } /* The platform's mint, once, at the very top of every environment. */ [data-ov-environment] body { border-top: 4px solid var(--ov-mint); } [data-ov-environment] .ov-platform { background: transparent; } [data-ov-environment] .ov-hero-split { background: transparent; } /* ---- Primary actions. Compact, filled, no outline and no shadow at rest, and never smaller than a 44px target. One rule for the three classes the site grew: .btn-primary, .ov-btn and the header's start button. The radius is !important only because assets/styles.css sets every button's radius with !important. ---- */ [data-ov-environment] :is(.btn-primary, .ov-btn) { min-height: var(--ov-target-min); padding: 0.625rem 1.125rem; border: 0; border-radius: var(--ov-radius-control) !important; box-shadow: none; background: var(--ov-env-action); color: var(--ov-white); font-size: 0.9375rem; font-weight: 700; line-height: 1.2; transition: background var(--ov-motion-fast) var(--ov-motion-ease); } [data-ov-environment] :is(.btn-primary, .ov-btn):is(:hover, :active):not(:disabled):not([aria-disabled="true"]) { background: var(--ov-env-action-hover); color: var(--ov-white); } /* Disabled is a grey with its own readable text, not the action colour at half opacity: 55 percent of white on coral is under 3:1. */ [data-ov-environment] :is(.btn-primary, .ov-btn):is(:disabled, [aria-disabled="true"]) { background: #e4e7e3; color: #626b65; opacity: 1; cursor: not-allowed; } [data-ov-environment] :is(.btn-primary, .ov-btn)[data-loading="true"] { cursor: progress; } [data-ov-environment] :is(.btn-primary, .ov-btn):focus-visible { outline: var(--ov-focus-width) solid var(--ov-focus); outline-offset: var(--ov-focus-offset); } [data-ov-environment] .site-header .header-nav .header-auth .nav-start { border-radius: var(--ov-radius-control) !important; /* The header's one filled action is a primary action too: 44px. */ min-height: var(--ov-target-min); display: inline-flex; align-items: center; } [data-ov-environment] .site-header { background: var(--ov-paper); } /* One filled action in the header. On Creator Studio the current page's own nav item was filled too, in the same colour as Start learning: two competing buttons. It is marked as current with the pale band instead. */ [data-ov-environment] .site-header .header-nav a.nav-creator.active { background: var(--ov-env-process-bg); border-color: transparent; color: var(--ov-env-link); } [data-ov-environment] .site-header .header-nav a.nav-creator { color: var(--ov-text); } /* The illustrations are drawn on their own off-white. Multiply lays that ground into the paper so the art has no visible box. It does not fade or tint the people: multiplying by the paper changes a mid-tone by under 2%. */ [data-ov-environment] .ov-hero-split--art .ov-hero-split__art img { mix-blend-mode: multiply; } /* ---- Secondary links take the environment's link colour. ---- */ [data-ov-environment] .ov-hero-split__link { color: var(--ov-env-link); border-bottom-color: currentColor; min-height: var(--ov-target-min); display: inline-flex; align-items: center; } /* A text link is still a target: 44px tall, with the underline kept close to the words by drawing it on the text and not on the box. */ [data-ov-environment] .ov-text-link { color: var(--ov-env-link); font-weight: 600; min-height: var(--ov-target-min); border-bottom: 0; padding-bottom: 0; text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; } [data-ov-environment] .ov-text-link:hover { text-decoration-color: transparent; } [data-ov-environment] .ov-hero-split__link { border-bottom: 0; padding: 0; text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; } [data-ov-environment] .ov-hero-split__link:hover { text-decoration-color: transparent; } [data-ov-environment] .ov-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--ov-target-min); } [data-ov-environment] .ov-breadcrumb { padding-block: var(--ov-space-3); } [data-ov-environment] .ov-related a { color: var(--ov-env-link); } /* The second line of a headline is not a second colour any more. */ [data-ov-environment] .ov-accent { color: inherit; } /* ---- Eyebrows. Small caps in the environment's text colour; in a hero they sit on a pale chip. Coral text is the dark coral, 5.2:1 on pale coral, never the bright accent. ---- */ [data-ov-environment] .ov-eyebrow { color: var(--ov-env-link); letter-spacing: 0.08em; } [data-ov-environment] :is(.ov-hero-split__copy, .ov-course-hero__copy) > .ov-eyebrow { padding: 5px var(--ov-space-3); border-radius: var(--ov-radius-pill); background: var(--ov-env-process-bg); line-height: 1.4; } /* ---- The enrollment panel's facts and the one start action ---- */ [data-ov-environment] .ov-enroll .btn-primary { width: 100%; justify-content: flex-start; } /* ---- The review badge and statement are words about the course, in the learner's green on its pale ground: 4.84:1. ---- */ [data-ov-environment] .pill-verified { background: var(--ov-pale); color: var(--ov-learn-action); } [data-ov-environment] .ovt-review-statement { color: var(--ov-text-muted); } /* ---- The single held-back caveat on Creator Studio. Quiet: an icon in the warm yellow's readable partner and the sentence in reading colour. ---- */ [data-ov-environment] .ov-note { background: transparent; padding: 0; color: var(--ov-text); font-weight: 500; } [data-ov-environment] .ov-note svg { color: var(--ov-env-link); } [data-ov-environment] .ov-disclosure > summary:hover { color: var(--ov-env-link); } [data-ov-environment] .ov-closing .ov-text-link, [data-ov-environment] .ov-creator-door a { color: var(--ov-env-link); } /* ---- Forms keep their boundaries. A field is a white surface with a 3.9:1 edge; consent keeps the platform's own checkbox. ---- */ [data-ov-environment] .ov-check input { accent-color: var(--ov-env-action); } /* ---- The footer. Open, on the paper, with the dark green wordmark. The dark slab it replaced is gone from these pages. ---- */ [data-ov-environment] .site-footer { background: transparent; color: var(--ov-text-muted); border-top: 1px solid var(--ov-divider); margin-top: var(--ov-space-9); } [data-ov-environment] .site-footer__nav a { color: var(--ov-text); } [data-ov-environment] .site-footer__nav a:hover { color: var(--ov-env-link); } [data-ov-environment] .site-footer__nav a:focus-visible { outline: var(--ov-focus-width) solid var(--ov-focus); outline-offset: 2px; } /* ---- The sensitive-topic notice reads in the ink, on the pale coral. Inside the review column it had inherited the muted grey, 4.3:1. ---- */ [data-ov-environment] .ovt-sensitive-notice { color: var(--ov-ink); background: var(--ov-coral-pale); border-radius: var(--radius-sm); } /* ---- The catalogue toolbar and its closing link are 44px targets, like every other control in an environment. They measured 41, 35 and 22. ---- */ [data-ov-environment] .ov-filter, [data-ov-environment] .ov-sort select { min-height: 44px; } [data-ov-environment] .ov-catalog-note a { display: inline-flex; align-items: center; min-height: 44px; } /* ============================================================ The rest of the learner's pages (decision 454) Same decisions as the landing and the course page: a white reading surface with a short accent bar where there was a tinted slab, mint for practice and never for "selected", yellow never for progress. ============================================================ */ /* ---- Dashboard. The next-step card was a mint slab and the tip was a yellow one that also carried the lesson count, since removed. Both are white surfaces now; the accent bar says which is which. ---- */ [data-ov-environment] .ov-next, [data-ov-environment] .ov-next--forest, [data-ov-environment] .ov-next--pale { background: var(--ov-white); color: var(--ov-ink); min-height: 0; } [data-ov-environment] .ov-next::before, [data-ov-environment] .ov-metric--tip::before, [data-ov-environment] .ov-panel--mint::before, [data-ov-environment] .ov-lesson__card::before { content: ""; display: block; flex: none; width: 2.625rem; height: 4px; border-radius: 2px; background: var(--ov-env-accent); } [data-ov-environment] .ov-next::before { margin-bottom: var(--ov-space-5); } [data-ov-environment] .ov-next__text, [data-ov-environment] .ov-next__meta { color: var(--ov-text-muted); } [data-ov-environment] .ov-next--forest :focus-visible { outline-color: var(--ov-focus); } [data-ov-environment] .ov-metric { border: 0; } [data-ov-environment] .ov-metric--tip { background: var(--ov-white); min-height: 0; } [data-ov-environment] .ov-metric--tip::before { background: var(--ov-yolk); } [data-ov-environment] .ov-metric--tip p, [data-ov-environment] .ov-metric--tip .ov-metric__note { color: var(--ov-text-muted); } /* Progress is the learner's green on a neutral track, on any surface. */ [data-ov-environment] .progress-fill, [data-ov-environment] .ov-progress__fill { background: var(--ov-env-action); } /* In Creator Studio the action colour is a red, and a red bar reads as a fault. Progress there is the ink, and a course title is the ink too. */ [data-ov-environment="creator"] :is(.progress-fill, .ov-progress__fill) { background: var(--ov-ink); } [data-ov-environment] #course-title { color: var(--ov-ink) !important; } /* ---- The console. A destructive action is outlined in the coral that reads, so it is findable before it is armed; its pale border had vanished on white. ---- */ [data-ov-environment] .btn-danger { border-color: var(--coral-ink); } /* ---- Account. The profile panel was the same mint slab. ---- */ [data-ov-environment] .ov-panel--mint { background: var(--ov-white); color: var(--ov-ink); --ov-text-muted: #626b65; --ov-coral-ink: #c4213c; --ov-forest-accent: #28765e; } [data-ov-environment] .ov-panel--mint::before { margin-bottom: var(--ov-space-5); } [data-ov-environment] .ov-enrolled { border: 0; } /* ---- Fields, on every page that has one. A white surface with a 3.9:1 edge, and a focus ring in the dark green. ---- */ [data-ov-environment] :is(.input, .ov-input) { border-color: var(--ov-control-border); background-color: var(--ov-white); } [data-ov-environment] .ovt-ex-input { border-color: var(--ov-control-border); border-radius: var(--ov-radius-control); min-height: var(--ov-target-min); } [data-ov-environment] .ovt-ex-input:focus { outline: var(--ov-focus-width) solid var(--ov-focus); outline-offset: 1px; border-color: var(--ov-forest); } [data-ov-environment] .input:focus { border-color: var(--ov-forest); box-shadow: 0 0 0 3px rgb(165 229 206 / 0.6); } [data-ov-environment] :is(.input, .ov-input):is(:disabled, [readonly]) { background-color: #f1f3f0; color: var(--ov-text-muted); } /* ---- Sign-in. One white card, no outline, the same field and button. ---- */ [data-ov-environment] .av-card { border: 0; } [data-ov-environment] .av-seg { background: var(--ov-pale); } [data-ov-environment] .av-seg button { min-height: var(--ov-target-min); border-radius: 4px; } [data-ov-environment] .av-seg button[aria-selected="true"] { box-shadow: none; } [data-ov-environment] .av-foot a, [data-ov-environment] .av-check a { color: var(--ov-env-link); } [data-ov-environment] .av-choice { border-color: var(--ov-control-border); } /* ---- Lesson pages: the rail. The module's name is not in a box: it keeps its short mint bar and sits on the page. Only the lesson being read is marked, with a faint mint ground and a narrow edge; the others are plain lines. (Orlando's refinement brief, 6 October, decision 460. It replaces 454's white card and white current-lesson row.) ---- */ [data-ov-environment] .ov-lesson__card { background: transparent; color: var(--ov-ink); padding: 0; border-radius: 0; } [data-ov-environment] .ov-lesson__card::before { margin-bottom: var(--ov-space-4); } [data-ov-environment] .ov-lesson__card p { color: var(--ov-text-muted); } [data-ov-environment] .ov-lesson__nav a, [data-ov-environment] .lesson-list .lesson-item { background: transparent; border: 0; border-radius: var(--ov-radius-control); } [data-ov-environment] .ov-lesson__nav a.current, [data-ov-environment] .lesson-list .lesson-item.current { background: var(--ov-pale); box-shadow: inset 3px 0 0 var(--ov-mint); } [data-ov-environment] .ov-lesson__nav a:hover:not(.current), [data-ov-environment] .lesson-list .lesson-item:hover:not(.current), [data-ov-environment] .ov-lesson__aside-btn:hover { background: transparent; color: var(--ov-ink); } /* ---- Durations. One small pill wherever a lesson or a module says how long it is, always "8 min". It takes the size and weight of the text it replaces; only the ground and the padding are new. On the current lesson's own faint ground the pill is white, or it would vanish. ---- */ [data-ov-environment] .ov-dur { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 8px; border-radius: var(--ov-radius-pill); background: var(--ov-pale); color: var(--ov-text-muted); white-space: nowrap; line-height: 1.5; margin-left: 0; } [data-ov-environment] :is(.lesson-item.current, a.current) .ov-dur { background: var(--ov-white); } [data-ov-environment] .lesson-meta { margin-top: 0.5rem; } /* ---- The set pieces inside a lesson. Three treatments, one padding and one corner between them: Reinforcement a mint line down the side, no ground Try it now the same line on a faint mint ground Notes a neutral line, because a note is an aside to the text and not a thing to do Citations keep their faint neutral ground and stay small. ---- */ [data-ov-environment] .lesson-aside { margin-top: 1.75rem; padding: 0.15rem 0 0.15rem 1.25rem; border-left: 3px solid var(--ov-mint); } [data-ov-environment] .lesson-aside > .lesson-h3:first-child { margin-top: 0; } [data-ov-environment] .lesson-aside > .lesson-p:last-child { margin-bottom: 0; } [data-ov-environment] :is(.lesson-aside[data-kind="try"], .try-it-now) { padding: 1rem 1.25rem; background: var(--ov-pale); border-left: 3px solid var(--ov-mint); border-radius: 0 var(--ov-radius-control) var(--ov-radius-control) 0; } [data-ov-environment] .lesson-notes { padding: 0.15rem 0 0.15rem 1.25rem; border-left: 3px solid var(--ov-divider); } [data-ov-environment] .cite-list { padding: 1rem 1.25rem; border-radius: var(--ov-radius-control); } [data-ov-environment] .deep-callout { padding: 1rem 1.25rem; border-radius: 0 var(--ov-radius-control) var(--ov-radius-control) 0; } /* ---- Quizzes and Apply it. One white surface each, no outline, and nothing boxed inside it that does not need to be: a question is divided from the next by a rule, not put in a box of its own. A chosen answer is marked in the ink on a neutral ground. Green and coral are kept for what the check says afterwards, so "I picked this" never looks like "this is right". ---- */ [data-ov-environment] .frame { border: 0; box-shadow: none; border-radius: var(--ov-radius-card); } [data-ov-environment] .quiz-card { border: 0; border-top: 1px solid var(--ov-divider); border-radius: 0; padding: 1.25rem 0 0.25rem; background: transparent; } [data-ov-environment] .quiz-card:first-child { border-top: 0; padding-top: 0.25rem; } [data-ov-environment] .quiz-option { border-color: var(--ov-divider); border-radius: var(--ov-radius-control); min-height: var(--ov-target-min); } [data-ov-environment] .quiz-option:hover { border-color: var(--ov-control-border); background: var(--ov-white); } [data-ov-environment] .quiz-option.selected { border-color: var(--ov-ink); background: #f3f4f1; color: var(--ov-ink); } [data-ov-environment] .quiz-option.selected:not(.correct):not(.incorrect) .quiz-option-letter { background: var(--ov-ink); color: var(--ov-white); } [data-ov-environment] .quiz-option.correct { border-color: var(--ov-learn-action); background: var(--ov-pale); } [data-ov-environment] .quiz-option.correct .quiz-option-letter { background: var(--ov-learn-action); color: var(--ov-white); } [data-ov-environment] .quiz-option.incorrect { border-color: var(--coral-ink); background: var(--ov-coral-pale); } /* The answer the learner chose keeps a heavier edge once it is marked, so after a wrong answer "the one I picked" and "the right one" are told apart by more than colour. */ [data-ov-environment] .quiz-option.selected.correct { box-shadow: inset 0 0 0 1px var(--ov-learn-action); } [data-ov-environment] .quiz-option.selected.incorrect { box-shadow: inset 0 0 0 1px var(--coral-ink); } [data-ov-environment] .ovt-ex-item { border-radius: var(--ov-radius-control); padding: 1rem 1.25rem; } [data-ov-environment] .ovt-ex-pick { border-color: var(--ov-control-border); } [data-ov-environment] .ovt-ex-pick-wide { border-radius: var(--ov-radius-control); } [data-ov-environment] .ovt-ex-pick:hover { border-color: var(--ov-ink); } [data-ov-environment] .ovt-ex-pick:focus-within { outline-color: var(--ov-focus); } [data-ov-environment] .ovt-ex-pick input { accent-color: var(--ov-ink); } [data-ov-environment] .ovt-ex-pick:has(input:checked) { border-color: var(--ov-ink); background: #f3f4f1; } [data-ov-environment] .ovt-ex-working { border-radius: var(--ov-radius-control); padding: 1rem 1.25rem; } [data-ov-environment] .ovt-ex-answers { border: 0; background: #f3f4f1; border-radius: var(--ov-radius-control); padding: 1rem 1.25rem; } /* ---- Resources and downloads. One container: the white surface the exercise and the quiz use. The tool and its worksheet are buttons; the manifest and the readme are quiet links on the line below. Size and version stay small and grey. A module's list of sources is rows on that surface, divided by rules, not boxes inside a box. ---- */ [data-ov-environment] .takeaway { background: var(--ov-white); border: 0; border-radius: var(--ov-radius-card); padding: 1.5rem; } [data-ov-environment] .takeaway-file { background: var(--ov-pale); border-color: transparent; color: var(--ov-ink); } [data-ov-environment] .takeaway-file:hover { background: var(--ov-pale); border-color: var(--ov-env-link); color: var(--ov-env-link); } [data-ov-environment] .takeaway-files--support { margin-top: 0.25rem; gap: 0 1.25rem; } [data-ov-environment] .takeaway-file--support { background: transparent; padding-inline: 0; font-weight: 400; color: var(--ov-text-muted); text-decoration: underline; text-underline-offset: 3px; } [data-ov-environment] .takeaway-file--support:hover { background: transparent; border-color: transparent; color: var(--ov-env-link); } [data-ov-environment] .takeaway-disclaimer { color: var(--ov-text-muted); } [data-ov-environment] .resource-item { border: 0; border-top: 1px solid var(--ov-divider); border-radius: 0; padding: 0.85rem 0; background: transparent; } [data-ov-environment] .resource-item:first-child { border-top: 0; } [data-ov-environment] a.resource-item:hover { border-color: var(--ov-divider); } [data-ov-environment] a.resource-item:hover .resource-title { color: var(--ov-env-link); } [data-ov-environment] .resources-panel .resources-list { gap: 0; } /* With no outline, two white surfaces one after the other need air between them or they read as one. */ [data-ov-environment] .resources-panel { margin-top: 1.5rem; } [data-ov-environment] .takeaway-file--support .takeaway-size { display: inline-block; margin-left: 2px; } [data-ov-environment] .module-complete-card, [data-ov-environment] .enroll-card { border-color: transparent; } [data-ov-environment] .quiz-toggle { color: var(--ov-env-link); } [data-ov-environment] .exhibit-markers { color: var(--ov-env-link); } [data-ov-environment] .legal-doc a { color: var(--ov-env-link); } /* ---- The module's video. It was a dark green slab, the last one on a learner page. It is the pale band, and the play control is the one filled thing on it. The eyebrow had taken the link green on the dark ground, which was 2.1:1. ---- */ [data-ov-environment] .ov-media { background: var(--ov-pale); color: var(--ov-ink); } [data-ov-environment] .ov-media .ov-eyebrow { color: var(--ov-env-link); opacity: 1; } [data-ov-environment] .ov-media :focus-visible { outline-color: var(--ov-focus); } [data-ov-environment] .ov-media__note { opacity: 1; color: var(--ov-text-muted); } [data-ov-environment] .ov-media__open { background: var(--ov-white); border-color: transparent; color: var(--ov-ink); } [data-ov-environment] .ov-media__open:hover { background: var(--ov-white); border-color: var(--ov-env-link); box-shadow: none; } [data-ov-environment] .ov-media__open .walkthrough-play-icon { color: var(--ov-white); background: var(--ov-env-action); } [data-ov-environment] .ov-media__open .walkthrough-collapsed-sub, [data-ov-environment] .ov-media__open .walkthrough-chevron { color: var(--ov-text-muted); } [data-ov-environment] .ov-media__transcript { background: var(--ov-white); color: var(--ov-text); } [data-ov-environment] .ov-media__frame { background: #1d2420; } /* The depth switch marks the chosen depth in the action green. */ [data-ov-environment] .ov-depth button[aria-pressed="true"], [data-ov-environment] .ov-depth .pill-mint { background: var(--ov-env-action); color: var(--ov-white); } [data-ov-environment] .ov-depth button { min-height: 36px; } /* ---- The exercise. APPLY IT is the same mint label it is on the course page, so a learner meets one sign for practice, not two. ---- */ [data-ov-environment] .ovt-ex-eyebrow { display: inline-block; padding: 4px var(--ov-space-3); border-radius: var(--ov-radius-pill); background: var(--ov-mint); color: var(--ov-ink); font-weight: 700; margin-bottom: var(--ov-space-3); } /* ---- Small labels. Free is a fact about a course, in the learner's green on its pale ground, as it is on a catalogue card. ---- */ [data-ov-environment] .pill-free { background: var(--ov-pale); color: var(--ov-learn-action); } [data-ov-environment] .course-card:hover { border-color: var(--ov-control-border); box-shadow: none; } /* ---- Insights. The closing "ask" was a dark green slab; it is the pale band with the reading colour. Links take the environment's link. ---- */ [data-ov-environment] :is(.insight-doc, .insight-index) a:not(.btn-primary):not(.btn) { color: var(--ov-env-link); } [data-ov-environment] .insight-card h2 a { color: var(--ov-text); } [data-ov-environment] :is(.insight-type, .insight-kicker) { color: var(--ov-env-link); } [data-ov-environment] .insight-stat b { color: var(--ov-ink); } [data-ov-environment] .insight-ask { background: var(--ov-pale); color: var(--ov-ink); } [data-ov-environment] .insight-ask .k { color: var(--ov-env-link); } [data-ov-environment] .insight-doc .insight-ask p { color: var(--ov-ink); } [data-ov-environment] :is(.insight-card, .insight-related, .insight-next > div) { border-color: transparent; } [data-ov-environment] .insight-formula .frac span:first-child { border-bottom-color: var(--ov-ink); } /* ---- Targets. Every standing control on these pages is 44px tall, the same rule the landing and the catalogue follow. A link inside a sentence or a table cell is not a standing control and is left alone. ---- */ [data-ov-environment] .btn { min-height: var(--ov-target-min); } [data-ov-environment] .ov-depth button { min-height: var(--ov-target-min); padding-inline: var(--ov-space-4); } [data-ov-environment] :is(.ov-lesson__back, .takeaway-file, .insight-next a, .insight-related a, .section-pad > a[href$="courses/"]:first-child) { display: inline-flex; align-items: center; min-height: var(--ov-target-min); } [data-ov-environment] .takeaway-file { align-items: baseline; padding-block: 0.7rem; } /* Creator Studio's working pages: the same floor for their own controls. */ [data-ov-environment] :is(.back-link, .edit-toggle-btn, .mini-toggle button) { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ov-target-min); } [data-ov-environment] .mini-toggle button { min-width: var(--ov-target-min); } [data-ov-environment] .icon-btn { min-width: var(--ov-target-min); min-height: var(--ov-target-min); } [data-ov-environment] .lesson-list .lesson-item { min-height: var(--ov-target-min); } @media (prefers-reduced-motion: reduce) { [data-ov-environment] :is(.btn-primary, .ov-btn) { transition: none; } } /* ============================================================ Organizations (decision 463, 8 October 2026) The invitation, the member line, the account section, an organization's own page, and the notice on a members-only module. Same surfaces as the consent card: white, a hairline, the panel radius. The disclosure is a plain list, because it is what the learner agrees to. ============================================================ */ .ov-org-box { display: flex; flex-direction: column; gap: var(--ov-space-4); max-width: 760px; } .ov-org-box[hidden] { display: none; } .ov-org-invite, .ov-org-note, .ov-members-only { padding: var(--ov-space-6); border: 1px solid var(--ov-divider); border-radius: var(--ov-radius-panel); background: var(--ov-surface); box-shadow: inset 4px 0 0 var(--ov-mint); } .ov-org-invite h2 { margin: 0 0 var(--ov-space-2); font-size: var(--ov-size-card); } .ov-org-invite > p { margin: 0 0 var(--ov-space-3); color: var(--ov-text-muted); } .ov-org-invite__list, .ov-org-row__sees { margin: 0 0 var(--ov-space-4); padding-left: 1.2em; display: grid; gap: var(--ov-space-2); } .ov-org-invite .ov-form { display: flex; flex-direction: column; gap: var(--ov-space-3); } .ov-org-invite [hidden] { display: none !important; } .ov-org-invite__actions { display: flex; gap: var(--ov-space-3); flex-wrap: wrap; } .ov-org-invite__actions .btn { min-height: 44px; } .ov-org-member { display: flex; justify-content: space-between; align-items: center; gap: var(--ov-space-3); flex-wrap: wrap; padding: var(--ov-space-4) var(--ov-space-5); border: 1px solid var(--ov-divider); border-radius: var(--ov-radius-panel); background: var(--ov-surface); } .ov-org-member p { margin: 0; } .ov-org-row { padding: var(--ov-space-4) 0; border-top: 1px solid var(--ov-divider); display: grid; gap: var(--ov-space-3); } .ov-org-row:first-child { border-top: 0; padding-top: 0; } .ov-org-row p { margin: 0; } .ov-org-row .ov-btn { justify-self: start; } .ov-org-row__sees { color: var(--ov-text-muted); font-size: var(--ov-size-label); margin: 0; } .ov-org-joined { margin: 0 0 var(--ov-space-5); padding: var(--ov-space-4) var(--ov-space-5); border-radius: var(--ov-radius-panel); background: var(--ov-pale); font-weight: 600; } .ov-org-joined.is-error { background: var(--ov-coral-pale); color: var(--ov-coral-ink); } .ov-org-joined a, .ov-org-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .ov-org-space { padding-block: var(--ov-space-8); } .ov-org-space__head { max-width: 760px; margin-bottom: var(--ov-space-6); } .ov-org-space__head h1 { margin: var(--ov-space-2) 0; } .ov-org-space__tagline { font-size: var(--ov-size-card); margin: 0 0 var(--ov-space-3); } .ov-org-space__intro { color: var(--ov-text-muted); margin: 0; } .ov-org-space__you { max-width: 760px; } .ov-org-space__you:empty { display: none; } .ov-org-note p { margin: 0 0 var(--ov-space-3); } .ov-org-note p:last-child { margin-bottom: 0; } .ov-org-course { display: flex; flex-direction: column; gap: var(--ov-space-2); } .ov-org-course__access { font-size: var(--ov-size-label); font-weight: 600; color: var(--ov-text-muted); } .ov-members-only { max-width: 680px; } .ov-members-only p { margin: 0 0 var(--ov-space-3); } .ov-members-only p:last-child { margin-bottom: 0; } .ov-members-only__title { font-size: var(--ov-size-card); font-weight: 600; }