/* ========================================================= CERTIFICATE IN MARKETING — design system Brand palette: deep teal (trust, growth, communication) with a warm gold accent shared with the certificate documents, on a clean warm-neutral background. Mobile-first, minimal dependency (no external UI framework) — this file is the whole system. ========================================================= */ :root { --brand: #0E5C52; --brand-dark: #083E37; --brand-light: #E4F1EE; --accent: #C9932E; --accent-light: #F8ECD6; --ink: #1B241F; --text: #2B332F; --muted: #6B776F; --border: #E1E6E2; --bg: #F7F8F6; --card: #FFFFFF; --success: #1F9D66; --success-bg: #E5F6ED; --warning: #B9791A; --warning-bg: #FCF1DE; --danger: #D6483F; --danger-bg: #FBE9E7; --info: #2A72B5; --info-bg: #E8F1FA; --radius: 12px; --radius-sm: 8px; --shadow: 0 2px 10px rgba(20, 40, 34, .06); --shadow-lg: 0 12px 34px rgba(20, 40, 34, .12); --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-head: Georgia, 'Times New Roman', serif; --ease: cubic-bezier(.22, 1, .36, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; line-height: 1.55; } img { max-width: 100%; display: block; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; margin: 0 0 .5em; } h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); } h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); } h3 { font-size: 1.2rem; } p { margin: 0 0 1em; } .muted { color: var(--muted); } .small { font-size: .85em; } .text-danger { color: var(--danger); } .text-success { color: var(--success); } .center { text-align: center; } code, kbd { font-family: 'SFMono-Regular', Consolas, monospace; background: var(--brand-light); padding: 2px 6px; border-radius: 4px; font-size: .9em; } .container { max-width: 1160px; margin: 0 auto; padding: 0 20px; } .container-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; } .section { padding-top: 56px; padding-bottom: 56px; } .section-tight { padding-top: 16px; padding-bottom: 16px; } /* ---- Icons ---- Base .icon sets a sane default size so an s (see includes/header_public.php), not a ☰/✕ character swap, so it animates smoothly regardless of font glyph support. 7px = the line's own 2px height plus the 5px gap between lines (adjacent block-margins collapse to 5px, not 10) — the exact pitch between line centers. */ .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s var(--ease), opacity .2s var(--ease); } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .public-nav-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .public-nav-links > a, .nav-dropdown-toggle { font-weight: 600; color: var(--text); font-size: .93rem; background: none; border: none; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 4px; } .public-nav-links > a:hover, .nav-dropdown-toggle:hover { color: var(--brand); text-decoration: none; } .nav-dropdown { position: relative; } .nav-dropdown-menu { display: none; position: absolute; top: calc(100% + 12px); left: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); min-width: 220px; padding: 8px; z-index: 50; } .nav-dropdown-menu a { display: block; padding: 9px 12px; border-radius: 6px; font-size: .9rem; color: var(--text); font-weight: 500; } .nav-dropdown-menu a:hover { background: var(--brand-light); text-decoration: none; } .nav-dropdown.open .nav-dropdown-menu { display: block; } /* Programmes dropdown ("mega menu") — as the programme list grows past 5, this wraps into a new column to the right instead of one long scroll of links. grid-auto-flow:column + a fixed row count is what does it: the first 5 items fill column 1 top-to-bottom, the 6th starts column 2, etc. With 5 or fewer programmes it renders exactly like the plain single-column dropdown above. */ .nav-dropdown-menu-mega { grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-auto-columns: 220px; column-gap: 4px; min-width: 260px; } .nav-dropdown.open .nav-dropdown-menu-mega { display: grid; } .nav-dropdown-toggle .icon { transition: transform .2s var(--ease); } .nav-dropdown.open .nav-dropdown-toggle .icon { transform: rotate(180deg); } /* "Professional, distinctive" pass on the public nav dropdowns: icons per link, a top accent bar, small section eyebrows, and a hover slide-in accent instead of a flat background swap. */ .nav-dropdown-menu-fancy { padding-top: 10px; border-top: 3px solid var(--brand); } .nav-dropdown-menu-fancy a { display: flex; align-items: center; gap: 9px; position: relative; padding-left: 14px; } .nav-dropdown-menu-fancy a .icon { width: 15px; height: 15px; color: var(--accent); flex: none; } .nav-dropdown-menu-fancy a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 60%; background: var(--accent); border-radius: 2px; transition: transform .15s var(--ease); } .nav-dropdown-menu-fancy a:hover::before { transform: translateY(-50%) scaleY(1); } .nav-dropdown-menu-fancy a.nav-dropdown-all { font-weight: 700; color: var(--brand-dark); border-bottom: 1px solid var(--border); border-radius: 0; padding-bottom: 11px; margin-bottom: 4px; } .nav-dropdown-eyebrow { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 6px 12px 4px; } .nav-dropdown-divider { display: block; height: 1px; background: var(--border); margin: 6px 4px; } .nav-account { display: flex; align-items: center; gap: 12px; } /* Login and Apply Now are ordinary items in nav_menu_items now (see superuser/nav_menu.php) — the superuser can drag them anywhere among Programmes/Subjects/etc., so their "looks like a button" treatment is given by an explicit .nav-cta / .nav-cta-toggle class directly on the element rather than by an ancestor wrapper (which only worked while they were guaranteed to sit in one fixed spot at the end of the menu). Login keeps its outline-button look from the site-wide .btn/.btn-outline classes already on its — those two classes together already outrank the flat ".public-nav-links > a" reset above on specificity alone, this comment is just the paper trail. The Apply Now toggle needs its own rule: .nav-dropdown-toggle's flat styling has equal specificity and comes first in the file, so without a scoped override here it would win and the button would look like a plain link — .nav-cta-toggle below is that override, kept separate from the plain Programmes/ Certificates dropdown toggles so only Apply Now gets the solid look. */ .nav-dropdown-toggle.nav-cta-toggle { background: var(--brand); border: 1px solid transparent; color: #fff; font-size: .95rem; gap: 8px; } .nav-dropdown-toggle.nav-cta-toggle.btn-sm { font-size: .82rem; } .nav-dropdown-toggle.nav-cta-toggle:hover { background: var(--brand-dark); color: #fff; } /* ---- Mobile nav: off-canvas drawer sliding in from the left, matching Quiz_Platform_4's includes/header_public.php + assets/css/style.css pattern (same off-canvas approach as the mobile-nav-drawer skill, which that project's own CSS comments cite directly) rather than a dropdown-below-header panel. Three things dodge its classic traps: longhand top/left/bottom below (never the `inset` shorthand, which has inconsistent support and can silently fail to apply fixed positioning); no backdrop-filter/filter/transform on any ancestor the drawer sits inside, so its fixed positioning resolves against the viewport instead of collapsing into a tiny box sized by that ancestor; and .public-nav gets z-index:2001 below — permanently while this media query is active, not just while the drawer is open — because that header is itself position:sticky with its own z-index, making it a stacking context whose z-index (not the drawer's, nested inside it) is what counts when compared against .nav-overlay, a separate element appended straight to (see site.js) rather than written here as a pseudo-element, so it's an actual click target. ---- */ @media (max-width: 900px) { .nav-toggle { display: inline-flex; } .public-nav { z-index: 2001; } .public-nav-links { position: fixed; top: 0; left: 0; bottom: 0; right: auto; width: 82%; max-width: 320px; /* Subtle brand-tinted wash instead of flat white, plus a thin two-tone top edge so the drawer reads as a designed surface. */ background: linear-gradient(180deg, #ffffff 0%, var(--accent-light) 100%); display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; padding: 84px 18px 20px; gap: 3px; transform: translateX(-100%); transition: transform .3s var(--ease); box-shadow: var(--shadow-lg); z-index: 2000; overflow-y: auto; overflow-x: hidden; } .public-nav-links::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brand), var(--accent)); } .public-nav-links.open { transform: translateX(0); } /* Each row reads as a soft "pill" — a colored accent bar grows in on hover/tap on the left edge, with a gentle tinted background so the tap target itself is visually obvious. Login and Apply Now are ordinary draggable items in this same list now (see superuser/nav_menu.php), so this rule reaches them too by default — the .nav-cta override just below restores their button look. */ .public-nav-links > a { display: flex; align-items: center; width: 100%; padding: 13px 14px; margin: 0; border-radius: 12px; font-weight: 600; color: var(--text); position: relative; transition: background .15s var(--ease), color .15s var(--ease), padding-left .15s var(--ease); } .public-nav-links > a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; border-radius: 3px; background: var(--accent); transition: height .15s var(--ease); } .public-nav-links > a:hover, .public-nav-links > a:active { background: rgba(14, 92, 82, .08); color: var(--brand-dark); padding-left: 18px; text-decoration: none; } .public-nav-links > a:hover::before, .public-nav-links > a:active::before { height: 20px; } /* Login keeps a full-width, centered "button row" layout wherever it's dragged to — its actual colors/border come from the site-wide .btn.btn-outline classes on the element itself, which already win over the plain .public-nav-links > a rule above on specificity alone (two classes beats one class + element), same reasoning as the desktop stylesheet. This class only carries the layout part. */ .public-nav-links > a.nav-cta { justify-content: center; text-align: center; margin-top: 4px; } .public-nav-links > a.nav-cta::before { display: none; } .nav-dropdown { width: 100%; } .nav-dropdown-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 14px; margin: 0; border-radius: 12px; background: none; border: none; font: inherit; font-weight: 600; text-align: left; color: var(--text); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .nav-dropdown-toggle:hover, .nav-dropdown.open .nav-dropdown-toggle { background: rgba(14, 92, 82, .08); color: var(--brand-dark); } .nav-dropdown.open .nav-dropdown-toggle .icon { transform: rotate(180deg); color: var(--accent); } /* Apply Now keeps its solid CTA look wherever it's dragged to — same reasoning as the desktop .nav-dropdown-toggle.nav-cta-toggle rule near the top of this file, needed again here because the flat .nav-dropdown-toggle rule just above would otherwise win by being an ordinary item in this list now instead of living inside .nav-account. */ .nav-dropdown-toggle.nav-cta-toggle { background: var(--brand); color: #fff; justify-content: center; margin-top: 4px; border-radius: 999px; } .nav-dropdown-toggle.nav-cta-toggle:hover, .nav-dropdown.open .nav-dropdown-toggle.nav-cta-toggle { background: var(--brand-dark); color: #fff; } .nav-dropdown-toggle.nav-cta-toggle .icon { margin-left: 2px; } /* Collapsed by default — a tap on the toggle above adds .open (see site.js), the same "tap to reveal" pattern as every other collapsible list on this platform, instead of dumping every submenu open at once. */ .nav-dropdown-menu { position: static; display: none; box-shadow: none; border: none; background: transparent; padding: 4px 0 6px 20px; margin: 2px 0 4px; min-width: 0; border-left: 2px solid rgba(14, 92, 82, .25); } .nav-dropdown.open .nav-dropdown-menu { display: block; } .nav-dropdown-menu a { color: var(--muted); padding: 9px 10px; border-radius: 9px; font-weight: 500; } .nav-dropdown-menu a:hover { background: rgba(14, 92, 82, .08); color: var(--brand-dark); } .nav-dropdown-menu-mega { grid-template-rows: none; grid-auto-flow: row; grid-auto-columns: auto; column-gap: 0; min-width: 0; } .nav-dropdown.open .nav-dropdown-menu-mega { display: block; } /* Account actions (Portal / Log out once signed in) sit visually apart from the primary nav — a top divider plus margin-top:auto pins the group toward the bottom of the drawer when there's spare height, the pattern most people recognise from native app menus. Login and Apply Now are ordinary draggable items now (see superuser/nav_menu.php) and no longer live in here — their CTA look is handled by the .nav-cta / .nav-cta-toggle rules above instead. */ .nav-account { width: 100%; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; } .nav-account a.btn { width: 100%; padding: 13px 14px; justify-content: center; margin-top: 4px; font-size: 1em; } /* Dim backdrop behind the open drawer — injected by site.js. Faded in via opacity rather than an abrupt display swap so opening the menu feels like one smooth motion; still a real element the whole time (not display:none while "hidden"), so it can never end up intercepting clicks meant for the drawer above it. */ .nav-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(15, 23, 42, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 1999; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s var(--ease), visibility 0s linear .25s; } .nav-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s var(--ease), visibility 0s linear 0s; } } .public-main { min-height: 60vh; } .hero { background: linear-gradient(155deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; padding: 72px 25px 84px; text-align: center; } .hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14); padding: 6px 16px; border-radius: 999px; font-size: .82rem; font-weight: 700; letter-spacing: .03em; margin-bottom: 18px; } .hero h1 { color: #fff; max-width: 780px; margin: 0 auto .4em; } .hero p { max-width: 620px; margin: 0 auto 28px; color: rgba(255,255,255,.88); font-size: 1.08rem; } .hero .btn-group { justify-content: center; } .hero-stats { display: flex; gap: 34px; justify-content: center; margin-top: 40px; flex-wrap: wrap; } .hero-stat-value { font-family: var(--font-head); font-size: 1.8rem; font-weight: 700; } .hero-stat-label { font-size: .8rem; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .04em; } .section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; } .section-eyebrow { color: var(--accent); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; } /* margin-bottom matches p's own rhythm (margin:0 0 1em) — headings carry no margin-top of their own (h1-h4 { margin: 0 0 .5em }), so any content that follows a grid relies entirely on the grid's bottom margin for spacing. A CSS grid never lets a child's margin collapse through it, so without this a heading placed right after a grid (e.g. "Lessons" after programme.php's subjects grid) sits noticeably tighter than the same heading would after a plain paragraph. Sibling block margins collapse as normal, so this never doubles up with a following element's own margin-top. */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 1em; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 1em; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 1em; } /* CSS Grid tracks default to min-width:auto, so a child with a long unbroken string (a title, a URL) can force the whole grid wider than its container and cause page-level horizontal scroll — allow tracks to shrink below content size instead. */ .grid-3 > *, .grid-2 > *, .grid-4 > * { min-width: 0; } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } } .feature-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand); } .feature-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-light); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .feature-icon .icon { width: 24px; height: 24px; } .link-arrow { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--brand); text-decoration: none; font-size: .92rem; } .link-arrow:hover { text-decoration: underline; } .subject-locked-out { opacity: .4; filter: grayscale(.4); } .subject-locked-out:hover { border-color: var(--border); } /* Live-search match highlighting — used sitewide wherever a data-live-search or data-live-search-cards input is present. */ mark.js-hl { background: #FFE8A3; color: inherit; padding: 0 1px; border-radius: 2px; } .subject-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; transition: transform .15s ease, box-shadow .15s ease; } .subject-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .subject-card .subject-number { font-family: var(--font-head); color: var(--accent); font-weight: 700; font-size: .85rem; letter-spacing: .06em; } .subject-card h3 { margin-bottom: 4px; } .subject-card .subject-price { font-weight: 800; color: var(--brand); font-size: 1.15rem; margin-top: auto; } /* ---- programme.php: subjects rendered as cards (linked whole-card), with a richer hover treatment than the plain .subject-card — an accent top bar that slides in, the title tinting brand-green, and the CTA arrow nudging right, on top of the usual lift + shadow. ---- */ .programme-subjects-grid { grid-template-columns: repeat(2, 1fr); } @media (max-width: 640px) { .programme-subjects-grid { grid-template-columns: 1fr; } } .programme-subject-card { position: relative; text-decoration: none; color: inherit; cursor: pointer; border-top: 3px solid transparent; transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease), border-color .18s var(--ease, ease); } .programme-subject-card:hover { border-top-color: var(--accent); text-decoration: none; } .programme-subject-card:hover h3 { color: var(--brand); } .programme-subject-card h3 { transition: color .15s ease; } .programme-subject-card-cta { align-self: flex-start; pointer-events: none; transition: gap .15s ease, background .15s ease, color .15s ease; } .programme-subject-card-cta .icon { transition: transform .18s ease; } .programme-subject-card:hover .programme-subject-card-cta { background: var(--brand); color: #fff; border-color: var(--brand); } .programme-subject-card:hover .programme-subject-card-cta .icon { transform: translateX(4px); } .lesson-sponsor-line { display: flex; align-items: center; gap: 6px; } .sponsor-card .card-header { display: flex; align-items: center; gap: 8px; } .lesson-sponsor-line { border-top: 1px dashed var(--border); margin-top: 18px; padding-top: 14px; } .subject-card { overflow: hidden; } .sponsor-banner { background: var(--brand); color: #fff; font-weight: 700; font-size: .92rem; padding: 10px 24px; display: flex; align-items: center; gap: 8px; margin: 0 -24px; width: calc(100% + 48px); cursor: pointer; transition: background .12s ease; border: none; } .sponsor-banner:hover, .sponsor-banner:focus-visible { background: var(--brand-dark); outline: none; } .sponsor-banner .icon { flex: 0 0 auto; } .sponsor-card .card-header[role="button"] { cursor: pointer; } .sponsor-card .card-header[role="button"]:hover { background: var(--brand-light); } .subject-pager { display: flex; align-items: stretch; justify-content: space-between; gap: 14px; margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--border); flex-wrap: wrap; } .subject-pager a { display: flex; align-items: center; gap: 8px; text-align: left; } .subject-pager-prev .icon { transform: scaleX(-1); } .subject-pager-prev, .subject-pager-next { max-width: 300px; } .subject-pager-next { margin-left: auto; text-align: right; } .subject-pager-next span { text-align: right; } @media (max-width: 720px) { .subject-pager { flex-direction: column; } .subject-pager-next { margin-left: 0; } } .cv-video-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .cv-video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand); } .cv-video-card h4 { margin: 14px 16px 4px; } .cv-video-card p { margin: 0 16px 16px; } .video-embed { position: relative; width: 100%; padding-top: 56.25%; background: #000; } .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .guide-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand); } .guide-card-image { position: relative; width: 100%; padding-top: 70%; background: var(--brand-light); } .guide-card-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .guide-card-badge { position: absolute; top: 10px; left: 10px; } .guide-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; gap: 6px; } .guide-card-body, .guide-card-body * { overflow-wrap: break-word; } .guide-card-body h4 { margin: 0; } .subject-select-card { border: 2px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px; cursor: pointer; background: #fff; transition: border-color .12s ease, background .12s ease; } .subject-select-card:hover { border-color: var(--accent); } .subject-select-card:has(input:checked) { border-color: var(--brand); background: var(--brand-light); } .subject-select-card:has(input:checked):hover { border-color: var(--brand); } .subject-select-card input { width: auto; margin: 3px 0 0; } .subject-select-card .subject-select-title { font-weight: 700; color: var(--ink); } .subject-select-card .subject-select-price { color: var(--brand); font-weight: 700; } .career-service-card input[type="checkbox"] { width: auto; margin: 0; } /* Apply Now, step 2 — "Pick subjects individually" vs "Pay for a whole programme" segmented toggle (see apply.php). Two equal-width pill buttons in a rounded track, matching the site's radius/shadow tokens rather than reusing .tabs-nav (which only styles