/* ========================================================================== eCompliance Training — a Hungry Minds company Design system. Palette and type roles follow the Hungry Minds brand system as rendered on hungryminds.com.au (theme.json), so the two sites match. Signature device: the obligation stamp. Every course exists because a law or regulator says it must, so the jurisdiction and the instrument are structural, not decorative — they sit in mono, in a hairline box, on every card and every course page, and they are the primary way a compliance buyer scans the catalogue. ========================================================================== */ /* fonts.css is linked separately in : an @import here would force the browser to fetch this file, parse it, then discover and fetch the fonts, putting two round trips in series on the critical path. */ :root { /* Brand — pulled from the live Hungry Minds theme */ --red: #ff4b3e; --ink: #1e1414; --cream: #f5eee4; --cream-soft: #faf5ec; --paper: #efe7d9; --forest: #2f6b4e; --blue: #7fb6c7; --mustard: #e8b53a; --pink: #e9a79a; --brown: #a96f4a; --ink-70: rgba(30, 20, 20, 0.7); --ink-45: rgba(30, 20, 20, 0.45); --ink-15: rgba(30, 20, 20, 0.15); --ink-08: rgba(30, 20, 20, 0.08); /* Type. Licensed HM faces are named first so dropping the real files in swaps the whole site over without touching anything else. */ --font-display: "Margo Beuys", "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --font-body: "Gilroy", "Figtree", "Helvetica Neue", Arial, sans-serif; --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace; --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem); --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.09rem); --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.44rem); --step-2: clamp(1.45rem, 1.31rem + 0.7vw, 1.95rem); --step-3: clamp(1.8rem, 1.5rem + 1.4vw, 2.7rem); --step-4: clamp(2.2rem, 1.6rem + 2.9vw, 4rem); --step-5: clamp(2.7rem, 1.6rem + 5.2vw, 6rem); --measure: 68ch; --gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem); --bay: clamp(3rem, 2rem + 5vw, 6rem); --wrap: 76rem; --wrap-narrow: 46rem; --hair: 1px solid var(--ink-15); --hair-strong: 1.5px solid var(--ink); --radius: 3px; } /* --------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 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; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: from-font; } :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 0.5rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--cream); padding: 0.7rem 1.1rem; font-weight: 700; transition: top 0.15s ease; } .skip-link:focus { top: 0.5rem; } /* ----------------------------------------------------------- typography -- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 0.5em; text-wrap: balance; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); line-height: 1.05; } h4 { font-size: var(--step-1); line-height: 1.15; } p, li { text-wrap: pretty; } p { margin: 0 0 1em; max-width: var(--measure); } .lead { font-size: var(--step-1); line-height: 1.45; color: var(--ink-70); } .eyebrow { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-45); margin: 0 0 1rem; display: block; } .hl { color: var(--red); } /* ---------------------------------------------------------------- shell -- */ .wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; } .wrap-narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); margin-inline: auto; } .bay { padding-block: var(--bay); } .bay-tight { padding-block: calc(var(--bay) * 0.55); } .on-ink { background: var(--ink); color: var(--cream); } .on-ink .eyebrow { color: rgba(245, 238, 228, 0.55); } .on-ink .lead { color: rgba(245, 238, 228, 0.75); } .on-red { background: var(--red); color: var(--ink); } .on-red .eyebrow { color: rgba(30, 20, 20, 0.6); } .on-paper { background: var(--paper); } /* --------------------------------------------------------------- header -- */ .masthead { border-bottom: var(--hair-strong); background: var(--cream); position: sticky; top: 0; z-index: 50; } .masthead__inner { display: flex; align-items: center; gap: 1.5rem; padding-block: 0.85rem; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; } .brand__name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); letter-spacing: -0.03em; line-height: 1; } .brand__name .e { color: var(--red); } /* The Hungry Minds wordmark sits beside the eCompliance name, separated by a hairline. Two brands, one lockup, parent on the right. */ .brand__rule { width: 1px; align-self: stretch; min-height: 1.6rem; background: var(--ink-15); flex: none; } .brand__parent { display: flex; align-items: center; flex: none; } .brand__parent img { height: 1.35rem; width: auto; } @media (max-width: 26rem) { .brand__rule { display: none; } .brand__parent img { height: 1.1rem; } } .nav { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.6rem); flex-wrap: wrap; } .nav a { text-decoration: none; font-weight: 600; font-size: var(--step--1); letter-spacing: 0.01em; padding-block: 0.3rem; border-bottom: 2px solid transparent; } .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--red); } /* --------------------------------------------------------------- button -- */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-body); font-weight: 700; font-size: var(--step-0); line-height: 1.2; padding: 0.85rem 1.4rem; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--cream); color: var(--ink); text-decoration: none; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; box-shadow: 3px 3px 0 var(--ink); } .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); } .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); } .btn--primary { background: var(--red); } .btn--quiet { box-shadow: none; background: transparent; border-color: var(--ink-15); } .btn--quiet:hover { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); } .on-ink .btn { border-color: var(--cream); box-shadow: 3px 3px 0 var(--cream); background: transparent; color: var(--cream); } .on-ink .btn--primary { background: var(--red); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--cream); } /* ------------------------------------------------- SIGNATURE: the stamp -- */ /* Jurisdiction + instrument, in mono, in a hairline box. This is the thing a compliance buyer actually scans for, so it gets the structural weight. */ .stamp { display: inline-flex; align-items: stretch; font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.25; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--ink); border-radius: 2px; overflow: hidden; max-width: 100%; } .stamp__key { background: var(--ink); color: var(--cream); padding: 0.28rem 0.45rem; font-weight: 700; white-space: nowrap; } .stamp__val { padding: 0.28rem 0.5rem; background: transparent; overflow: hidden; text-overflow: ellipsis; } /* A hard statutory duty reads red; guidance and good practice stays ink. */ .stamp--duty { border-color: var(--red); } .stamp--duty .stamp__key { background: var(--red); color: var(--ink); } .stamp-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; padding: 0; list-style: none; } /* ----------------------------------------------------------- lane fork -- */ /* The two-lane choice, stated as a choice rather than an upsell. Bespoke always sits first. */ .fork { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-block: 1.5rem; padding: 0; list-style: none; } .fork__lane { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--cream-soft); } .fork__lane--primary { background: var(--red); box-shadow: 5px 5px 0 var(--ink); } .fork__q { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); line-height: 1.05; margin: 0; } .fork__lane p { margin: 0; font-size: var(--step--1); line-height: 1.5; max-width: none; } .fork__lane .btn { margin-top: auto; align-self: flex-start; } .fork__lane--primary .btn { background: var(--cream); } /* -------------------------------------------------------- course cards -- */ .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); padding: 0; list-style: none; margin: 0; } .card { display: flex; flex-direction: column; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--cream-soft); overflow: hidden; transition: transform 0.12s ease, box-shadow 0.12s ease; } .card:hover, .card:focus-within { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); } .card__motif { display: block; width: 100%; aspect-ratio: 3 / 2; border-bottom: 1.5px solid var(--ink); background: var(--paper); } .card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; } .card__title { font-size: var(--step-1); margin: 0; line-height: 1.1; } .card__title a { text-decoration: none; } .card__title a::after { content: ""; position: absolute; inset: 0; } .card { position: relative; } .card__summary { margin: 0; font-size: var(--step--1); line-height: 1.5; color: var(--ink-70); max-width: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card__foot { margin-top: auto; padding-top: 0.4rem; } /* --------------------------------------------------------- course page -- */ .course-head { border-bottom: var(--hair-strong); } /* The course hero sets a narrow measure so the summary does not leave a wide dead column beside it before the two-column layout starts. */ .course-intro { padding-bottom: 1.5rem; } .course-intro .lead { max-width: 46ch; } .course-layout { display: grid; gap: var(--gutter); grid-template-columns: minmax(0, 1fr); } @media (min-width: 60rem) { .course-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } } .rail { position: sticky; top: 5.5rem; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--cream-soft); padding: 1.25rem; } .rail h2 { font-size: var(--step-1); } .spec { margin: 0; display: grid; gap: 0.15rem 0.9rem; grid-template-columns: max-content minmax(0, 1fr); font-size: var(--step--1); } .spec dt { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-45); padding-top: 0.28rem; } .spec dd { margin: 0; padding-bottom: 0.55rem; } .checklist { padding-left: 0; list-style: none; display: grid; gap: 0.5rem; max-width: var(--measure); } .checklist li { position: relative; padding-left: 1.6rem; } .checklist li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.7rem; height: 0.7rem; border: 1.5px solid var(--red); border-radius: 1px; } .outcomes li::before { background: var(--red); } /* --------------------------------------------------------------- prose -- */ .prose > * + * { margin-top: 1rem; } .prose h2 { margin-top: 2.2rem; } .prose h3 { margin-top: 1.8rem; } .prose ul, .prose ol { max-width: var(--measure); padding-left: 1.2rem; } .prose li + li { margin-top: 0.35rem; } /* Callout. Built from the same parts as the obligation stamp: a hairline ink box with the label set as an inverted mono chip, so callouts read as part of the same system rather than as a generic accent bar. */ .answer { border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--cream-soft); padding: 1.3rem; margin: 1.75rem 0; } .answer > :last-child { margin-bottom: 0; } .answer .eyebrow { display: inline-block; background: var(--ink); color: var(--cream); padding: 0.24rem 0.55rem; border-radius: 2px; margin-bottom: 0.85rem; } /* Staging only: claims a lawyer still has to sign off. */ .answer--review { border-color: var(--mustard); background: color-mix(in srgb, var(--mustard) 10%, var(--cream-soft)); } .answer--review .eyebrow { background: var(--mustard); color: var(--ink); } /* -------------------------------------------------------------- tables -- */ .table-scroll { overflow-x: auto; border: var(--hair); border-radius: var(--radius); } table { border-collapse: collapse; width: 100%; font-size: var(--step--1); } th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: var(--hair); vertical-align: top; } th { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--paper); } /* --------------------------------------------------------------- forms -- */ .form { display: grid; gap: 1.1rem; max-width: 34rem; } .field { display: grid; gap: 0.35rem; } .field > label { font-weight: 700; font-size: var(--step--1); } .field .hint { font-size: 0.8rem; color: var(--ink-45); } input[type="text"], input[type="email"], input[type="tel"], select, textarea { font: inherit; font-size: var(--step-0); padding: 0.7rem 0.8rem; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--cream-soft); color: inherit; width: 100%; } textarea { min-height: 8rem; resize: vertical; } fieldset { border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; margin: 0; } legend { font-weight: 700; font-size: var(--step--1); padding-inline: 0.4rem; } .choice { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.7rem; border: 1.5px solid transparent; border-radius: var(--radius); cursor: pointer; } .choice:hover { border-color: var(--ink-15); } .choice input { margin-top: 0.3rem; accent-color: var(--red); width: 1.1rem; height: 1.1rem; flex: none; } .choice strong { display: block; } .choice span { font-size: var(--step--1); color: var(--ink-70); } .honeypot { position: absolute; left: -9999px; } /* ------------------------------------------------------------- footer -- */ .colophon { background: var(--ink); color: var(--cream); padding-block: var(--bay) 2rem; } .colophon a { color: var(--cream); } .colophon__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .colophon h2 { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 238, 228, 0.55); margin-bottom: 0.9rem; line-height: 1.4; letter-spacing: 0.14em; } .colophon ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; font-size: var(--step--1); } .colophon__logo { width: 9.5rem; margin-bottom: 1rem; } .colophon__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(245, 238, 228, 0.2); font-size: 0.78rem; color: rgba(245, 238, 228, 0.6); } .colophon__legal p { max-width: 60ch; } /* ------------------------------------------------------------ utility -- */ .cluster { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; } .stack-sm > * + * { margin-top: 0.5rem; } .crumbs { font-size: var(--step--1); padding: 0.9rem 0; color: var(--ink-45); } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; } .crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--ink-15); } .logo-wall { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; list-style: none; padding: 0; margin: 0; } .logo-wall img { height: 2.2rem; width: auto; filter: grayscale(1); opacity: 0.75; } .count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-45); } /* ---------------------------------------------------------------- video -- */ /* Click-to-load. Nothing is requested from YouTube until the visitor asks for it, so the page makes no third-party contact on load and sets no cookies. The poster is the video's own title set in display type rather than a YouTube thumbnail, which would itself be a third-party request. */ .video { margin: 2rem 0; max-width: 46rem; border: 1.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--ink); } .video__frame { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; aspect-ratio: 16 / 9; width: 100%; margin: 0; padding: clamp(1.25rem, 3vw, 2rem); border: 0; background: var(--ink); color: var(--cream); cursor: pointer; font: inherit; text-align: left; } .video__label { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 0.95; letter-spacing: -0.02em; max-width: 16ch; text-wrap: balance; } .video__play { display: inline-flex; align-items: center; align-self: flex-start; gap: 0.6rem; background: var(--red); color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--cream); padding: 0.75rem 1.2rem; font-weight: 700; font-size: var(--step-0); transition: transform 0.12s ease, box-shadow 0.12s ease; } .video__tri { width: 0.95rem; height: 0.95rem; flex: none; } .video__frame:hover .video__play, .video__frame:focus-visible .video__play { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--cream); } .video__note { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(245, 238, 228, 0.5); } .video iframe, .video video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--ink); } .video__caption { padding: 0.7rem 1rem; background: var(--ink); color: rgba(245, 238, 228, 0.8); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; border-top: 1px solid rgba(245, 238, 228, 0.2); } .video__caption a { color: var(--cream); } .video__fallback { padding: 1rem; background: var(--paper); color: var(--ink); font-size: var(--step--1); margin: 0; } /* Self-hosted pitch video sits beside its copy so the ink band is not mostly empty. Capped at the file's native 640px: upscaling a 640x360 source just makes it soft. */ .pitch { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } @media (min-width: 56rem) { .pitch { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); } } .pitch__media .video { margin: 0; max-width: 640px; } .pitch__copy h2 { max-width: 18ch; } .pitch__copy .lead { max-width: 40ch; } /* Course filter. Hidden until JavaScript enables it, because without it the full catalogue is already rendered and a dead input would just mislead. */ .filter { margin-top: 2rem; display: grid; gap: 0.4rem; max-width: 30rem; } .filter label { font-weight: 700; font-size: var(--step--1); } .filter input { font: inherit; padding: 0.7rem 0.9rem; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--cream-soft); } .card[hidden], section[hidden] { display: none; } /* ------------------------------------------------- tap targets (2.5.8) -- */ /* WCAG 2.2 AA wants standalone targets at 24x24 CSS px. Links sitting inline inside a sentence are exempt, so this only pads the standalone ones: the header lockup, breadcrumbs and the footer navigation. Padding is used rather than height so nothing shifts visually. */ .brand__name, .brand__parent { display: inline-flex; align-items: center; min-height: 24px; } .crumbs a, .colophon ul a, .video__caption a, .spec dd a, .stamp-row a { display: inline-flex; align-items: center; min-height: 24px; } .colophon ul { gap: 0.15rem; } /* Pricing tiers. Same construction as the lane fork but a distinct class: these are price points, not the two-lane choice, and conflating them made the "custom lane comes first" check fire on a pricing table. */ .tiers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); padding: 0; list-style: none; margin: 1.5rem 0 0; } .tier { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.4rem; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--cream-soft); } .tier__name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); line-height: 1.05; margin: 0; } .tier p { margin: 0; max-width: none; } .tier .btn { margin-top: auto; align-self: flex-start; } /* Source-attribution notices. Deliberately not fine print: a liability disclaimer nobody reads protects nobody. Quieter than a callout, still legible, and marked up as an aside so assistive tech announces it as one. */ .disclaimer { border: 1px solid var(--ink-15); border-radius: var(--radius); background: var(--paper); padding: 1rem 1.2rem; margin: 2rem 0; max-width: 52rem; } .disclaimer .eyebrow { margin-bottom: 0.4rem; } .disclaimer p:last-child { margin-bottom: 0; font-size: var(--step--1); line-height: 1.6; color: var(--ink-70); max-width: none; }