/* Theme Name: Salient Child Template: salient Author: GKTuition Description: Child theme for Salient. All gktuition.ie customisations live here so parent-theme updates never overwrite them. Created 10 June 2026. Version: 1.0.0 Text Domain: salient-child */ /* IMPORTANT — Salient-specific behaviour: Salient registers its 'main-styles' handle against get_stylesheet_directory_uri() (nectar/helpers/enqueue-styles.php), which points at THIS child theme once it is active. The @import below pulls in the full parent stylesheet so the site renders identically. Do not remove it, and keep it as the first rule in this file. */ @import url("../salient/style.css"); /* --------------------------------------------------------------------------- gktuition.ie custom styles — add overrides below this line. --------------------------------------------------------------------------- */ /* ════ Lesson template v2 (single-sfwd-topic.php, pilot-gated) ════ */ .gkt-lesson-wrap { background: #faf8f5; padding: 32px 0 64px; } .gkt-lesson { --gkt-accent: #8d27a5; /* GKTuition purple */ --gkt-accent-soft: #f3e8f6; --gkt-ink: #1c1c24; --gkt-muted: #6b6b76; --gkt-ok: #1d8a4a; max-width: 860px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 32px clamp(20px, 4vw, 44px) 0; box-shadow: 0 1px 3px rgba(20,16,28,.07), 0 8px 28px rgba(20,16,28,.06); color: var(--gkt-ink); font-size: 16px; line-height: 1.55; } /* Breadcrumb + badges + title */ .gkt-crumb { font-size: 13px; color: var(--gkt-muted); margin-bottom: 12px; } .gkt-crumb a { color: var(--gkt-muted); text-decoration: none; } .gkt-crumb a:hover { color: var(--gkt-accent); } .gkt-crumb span[aria-hidden] { margin: 0 6px; } .gkt-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; } .gkt-badge { font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 999px; } .gkt-badge--strand { background: var(--gkt-accent-soft); color: var(--gkt-accent); } .gkt-badge--exam { background: #fdf3e3; color: #9a6312; } .gkt-badge--plain { background: none; color: var(--gkt-muted); font-weight: 500; padding: 4px 0; } .gkt-lesson__title { font-size: clamp(24px, 3.2vw, 30px); line-height: 1.25; margin: 0 0 18px; } .gkt-progress { height: 6px; background: #ececf1; border-radius: 999px; overflow: hidden; margin-bottom: 24px; } .gkt-progress span { display: block; height: 100%; background: var(--gkt-accent); border-radius: 999px; } /* Video facade */ .gkt-video { margin-bottom: 20px; } .gkt-video__facade { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border: 0; padding: 0; cursor: pointer; border-radius: 12px; overflow: hidden; background: #10131c; } .gkt-video__facade img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s, transform .3s; } .gkt-video__facade:hover img { opacity: 1; transform: scale(1.02); } .gkt-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 4px 18px rgba(0,0,0,.35); } .gkt-video__play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #1c1c24; } .gkt-video__meta { position: absolute; left: 12px; bottom: 10px; color: #fff; font-size: 13px; background: rgba(0,0,0,.55); padding: 3px 10px; border-radius: 6px; } .gkt-video iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; display: block; } /* Action buttons */ .gkt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; } .gkt-btn { display: inline-block; font-size: 14.5px; font-weight: 600; line-height: 1; padding: 12px 18px; border: 1.5px solid #d9d9e0; border-radius: 10px; color: var(--gkt-ink) !important; text-decoration: none; background: #fff; cursor: pointer; } .gkt-btn:hover { border-color: var(--gkt-accent); color: var(--gkt-accent) !important; } .gkt-btn--solid { background: var(--gkt-accent); border-color: var(--gkt-accent); color: #fff !important; } .gkt-btn--solid:hover { opacity: .92; color: #fff !important; } .gkt-btn--done { border-color: var(--gkt-ok); color: var(--gkt-ok) !important; cursor: default; } /* Restyle LearnDash's own Mark Complete form button to match */ .gkt-mark-complete input[type="submit"] { font-size: 14.5px; font-weight: 600; line-height: 1; padding: 12px 18px; border: 1.5px solid #d9d9e0; border-radius: 10px; background: #fff; color: var(--gkt-ink); cursor: pointer; } .gkt-mark-complete input[type="submit"]:hover { border-color: var(--gkt-ok); color: var(--gkt-ok); } /* Objectives */ .gkt-objectives { background: #f7f4ec; border-radius: 12px; padding: 18px 22px; margin-bottom: 22px; } .gkt-objectives h2 { font-size: 13.5px; font-weight: 700; color: var(--gkt-muted); margin: 0 0 10px; text-transform: none; letter-spacing: 0; } .gkt-objectives ul { margin: 0; padding: 0; list-style: none; } .gkt-objectives li { position: relative; padding-left: 26px; margin-bottom: 7px; font-size: 15.5px; } .gkt-objectives li::before { content: "✓"; position: absolute; left: 2px; color: var(--gkt-ok); font-weight: 700; } /* Ask-the-tutor */ .gkt-tutor { border: 1.5px solid #e4e4ea; border-radius: 12px; padding: 18px 22px; margin-bottom: 22px; } .gkt-tutor h2 { font-size: 15px; font-weight: 700; margin: 0 0 12px; } .gkt-tutor__form { display: flex; gap: 10px; } .gkt-tutor__form input[type="text"] { flex: 1; font-size: 14.5px; padding: 11px 14px; border: 1.5px solid #d9d9e0; border-radius: 10px; background: #fff; margin: 0; } .gkt-tutor__form input[type="text"]:focus { border-color: var(--gkt-accent); outline: none; } .gkt-tutor__sub { font-size: 13px; color: var(--gkt-muted); margin: 10px 0 0; } /* Exam questions slot */ .gkt-examq { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #f4f4f7; border-radius: 12px; padding: 18px 22px; margin-bottom: 26px; } .gkt-examq h2 { font-size: 15.5px; font-weight: 700; margin: 0 0 2px; } .gkt-examq p { font-size: 13.5px; color: var(--gkt-muted); margin: 0; } .gkt-examq__link { font-weight: 700; color: var(--gkt-accent) !important; white-space: nowrap; text-decoration: none; } /* Prev / next footer */ .gkt-pn { display: flex; border-top: 1px solid #ececf1; margin: 0 calc(clamp(20px,4vw,44px) * -1); border-radius: 0 0 16px 16px; overflow: hidden; } .gkt-pn a { flex: 1; padding: 18px 24px; text-decoration: none; color: var(--gkt-ink) !important; } .gkt-pn a:hover { background: #faf8f5; } .gkt-pn small { display: block; font-size: 12.5px; color: var(--gkt-muted); margin-bottom: 3px; } .gkt-pn span { font-weight: 600; font-size: 15px; } .gkt-pn__next { text-align: right; border-left: 1px solid #ececf1; } .gkt-pn__prev:only-child { border-right: none; } /* New sections: formula / learning work / exam refs / related / pdf embed */ .gkt-formula h2, .gkt-learning h2, .gkt-examrefs h2, .gkt-related h2 { font-size: 17px; font-weight: 700; margin: 0 0 10px; } .gkt-formula, .gkt-learning, .gkt-examrefs, .gkt-related { margin-bottom: 22px; } .gkt-formula__box { background: #fff; border: 1.5px solid var(--gkt-accent); border-radius: 12px; padding: 18px 22px; text-align: center; } .gkt-formula__name { font-size: 15px; font-weight: 700; color: var(--gkt-accent); margin: 0 0 10px; } .gkt-formula__box p { font-size: 18px; margin: 0 0 8px; color: var(--gkt-ink); } .gkt-formula__box small { color: var(--gkt-muted); font-style: italic; } .gkt-learning ul { background: var(--gkt-accent-soft); border-radius: 12px; padding: 18px 22px 18px 40px; margin: 0; } .gkt-learning li { margin-bottom: 6px; font-size: 15.5px; } .gkt-examrefs ul { margin: 0; padding: 0; list-style: none !important; display: flex; flex-wrap: wrap; gap: 8px; } .gkt-examrefs li::before, .gkt-related li::before { display: none !important; } .gkt-examrefs li, .gkt-related li { list-style: none !important; } .gkt-examrefs li { background: #fdf3e3; color: #9a6312; font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px; } .gkt-related ul { margin: 0; padding: 0; list-style: none; } .gkt-related li { padding: 10px 0; border-bottom: 1px solid #ececf1; } .gkt-related li:last-child { border-bottom: 0; } .gkt-related a { font-weight: 700; color: var(--gkt-accent) !important; text-decoration: none; } .gkt-related span { display: block; font-size: 13.5px; color: var(--gkt-muted); } .gkt-pdf { display: none; margin-bottom: 22px; } .gkt-pdf object { width: 100%; height: 640px; border: 1.5px solid #e4e4ea; border-radius: 12px; } /* Desktop: wider card + decorative maths gutters */ @media (min-width: 1100px) { .gkt-lesson { max-width: 1080px; } .gkt-pdf { display: block; } } @media (min-width: 1340px) { .gkt-lesson-wrap { position: relative; } .gkt-lesson-wrap::before, .gkt-lesson-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 130px; opacity: .55; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='420' viewBox='0 0 130 420'%3E%3Cg fill='none' stroke='%23d9b8e3' stroke-width='2'%3E%3Ccircle cx='40' cy='50' r='22'/%3E%3Cpath d='M20 160 l30 -40 l30 40 z'/%3E%3Cpath d='M30 240 q20 -36 40 0'/%3E%3C/g%3E%3Cg fill='%23d9b8e3' font-family='Georgia, serif' font-size='34'%3E%3Ctext x='66' y='120'%3E∑%3C/text%3E%3Ctext x='20' y='320'%3E∫%3C/text%3E%3Ctext x='70' y='300'%3Eπ%3C/text%3E%3Ctext x='34' y='392'%3E√x%3C/text%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat-y; background-position: center top; } .gkt-lesson-wrap::before { left: 28px; } .gkt-lesson-wrap::after { right: 28px; transform: scaleX(-1); } } /* ════ Homepage rebuild (approved mock-up, 11 Jun 2026) ═════════════════════ All selectors are opt-in via "Extra class name" in WPBakery, so this block is inert until the builder changes are made. Tokens match the lesson template (--gkt-accent #8d27a5). Schoolbook feel: cream paper + faint grid, chapter kickers, ruled copybook review cards, exercise-box CTA. */ /* Page paper: add class gkt-paper to each content row below the hero */ .gkt-paper { background: repeating-linear-gradient(0deg, transparent 0 23px, #eef0e9 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, #eef0e9 23px 24px), #faf7f0 !important; } /* Hero: add class gkt-home-hero to the hero row (keep the existing image; set Salient's row overlay to #221a3a at ~55% in the row Design options) */ .gkt-home-hero h1 { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-size: clamp(32px, 4vw, 50px) !important; line-height: 1.1 !important; color: #fff !important; letter-spacing: -.01em; text-transform: none !important; } .gkt-home-hero img { border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.5); } .gkt-home-hero h1 em { font-style: normal; border-bottom: 4px solid #46b8b0; } .gkt-home-hero p { color: #eae4f4; font-size: 18px; max-width: 54ch; } .gkt-home-hero p b { color: #fff; } .gkt-hero-kicker { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #9be3dd !important; margin-bottom: 14px; } .gkt-cta, .gkt-cta:visited { display: inline-block; background: var(--gkt-accent, #8d27a5); color: #fff !important; text-decoration: none; font-weight: 600; padding: 15px 30px; border-radius: 10px; font-size: 17px; box-shadow: 0 6px 18px rgba(0,0,0,.3); } .gkt-cta:hover { opacity: .92; color: #fff !important; } .gkt-cta-sub { margin-left: 18px; color: #bfe9e5 !important; font-size: 14.5px; } .gkt-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.22); font-size: 14.5px; color: #ddd6ec; } .gkt-trust b { color: #fff; font-variant-numeric: tabular-nums; } .gkt-trust .gkt-stars { color: #f0b429; letter-spacing: 2px; } /* Chapter kicker: apply to a text block containing e.g. Chapter 01 · What students say */ .gkt-chapter { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .gkt-chapter small { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gkt-accent, #8d27a5); white-space: nowrap; } .gkt-chapter::after { content: ""; height: 1px; background: #e8e2d4; flex: 1; } /* White section card behind each chapter (set on the chapter row's column) */ .gkt-section-card { background: #fff; border: 1.5px solid #ded5c2; border-radius: 14px; padding: 28px clamp(18px, 3vw, 38px) 26px; box-shadow: 0 3px 14px rgba(34, 26, 58, .07); } /* Review cards: ruled copybook paper with red margin line. Apply gkt-review-card to each column's text block wrapper. */ .gkt-review-card { background: repeating-linear-gradient(0deg, #fff 0 27px, #f3efe6 27px 28px) #fff; border: 1.5px solid #ded5c2; border-radius: 8px; padding: 20px 18px 16px 26px; position: relative; box-shadow: 0 2px 8px rgba(34,26,58,.06); font-size: 15px; height: 100%; } .gkt-review-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 14px; width: 1.5px; background: rgba(212,84,79,.45); } .gkt-review-card .gkt-stars { color: #f0b429; font-size: 13px; letter-spacing: 2px; } .gkt-review-card h3 { font-family: Georgia, serif; font-size: 16.5px; margin: 6px 0; } .gkt-review-card p { color: #4c4365; margin: 0; } .gkt-review-card footer { margin-top: 10px; font-size: 13px; color: #8a82a0; } /* How-it-works step cards (gkt-step on each column's text block wrapper) */ .gkt-step { background: #fdfcf8; border: 1.5px solid #ded5c2; border-radius: 8px; padding: 22px; height: 100%; } .gkt-step .gkt-num { font-family: Georgia, serif; font-size: 15px; color: #46b8b0; font-weight: 700; margin-bottom: 8px; } .gkt-step h3 { font-family: Georgia, serif; font-size: 18px; margin-bottom: 8px; } .gkt-step p { font-size: 15px; color: #4c4365; margin: 0; } /* Ask-the-tutor teacher's-note box (gkt-home-note) */ .gkt-home-note { max-width: 640px; background: #fffdf6; border: 1.5px dashed var(--gkt-accent, #8d27a5); border-radius: 10px; padding: 26px 28px; position: relative; } .gkt-home-note h3 { font-family: Georgia, serif; font-size: 20px; margin-bottom: 8px; } .gkt-home-note p { font-size: 15.5px; color: #4c4365; margin: 0; } .gkt-home-note .gkt-tag { position: absolute; top: -12px; left: 22px; background: #46b8b0; color: #fff; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 12px; border-radius: 999px; } /* Course cards (choose-online-maths-courses) */ .gkt-course-card { background: #fff; border: 1.5px solid #ded5c2; border-radius: 14px; padding: 30px 26px 26px; text-align: center; height: 100%; box-shadow: 0 3px 14px rgba(34, 26, 58, .07); transition: transform .15s ease, box-shadow .15s ease; } .gkt-course-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(34, 26, 58, .12); } .gkt-course-card h2 { font-family: Georgia, serif; font-size: 26px; margin: 0 0 2px; } .gkt-course-card h2 span { color: var(--gkt-accent, #8d27a5); } .gkt-course-card .gkt-course-count { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: #46b8b0; font-weight: 700; margin-bottom: 16px; } .gkt-course-card ul { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; } .gkt-course-card li { position: relative; padding-left: 24px; margin-bottom: 7px; font-size: 14.5px; color: #4c4365; } .gkt-course-card li::before { content: "\2713"; position: absolute; left: 0; color: #1d8a4a; font-weight: 700; } .gkt-price { font-family: Georgia, serif; font-size: 30px; margin-bottom: 16px; } .gkt-price small { font-size: 14px; color: #8a82a0; font-family: -apple-system, sans-serif; } .gkt-course-free { display: block; margin-top: 12px; font-size: 13.5px; } /* Final CTA exercise box (gkt-exercise) */ .gkt-exercise { background: #fff; border: 2px solid #221a3a; border-radius: 10px; padding: 34px 30px; text-align: center; box-shadow: 6px 6px 0 rgba(141,39,165,.18); } .gkt-exercise h2 { font-family: Georgia, serif; font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 8px; } .gkt-exercise p { color: #4c4365; margin-bottom: 22px; } @media (max-width: 640px) { .gkt-cta-sub { display: block; margin: 14px 0 0; } } /* ════ Decorative maths gutters — LCHL course page (10155), wide desktop only ════ Faint curves/formulae in the empty side margins. Fixed to the viewport edges, behind content, pointer-events off. Only shows ≥1400px so it never crowds the centred content on laptops/phones (where the gutters are small anyway). */ @media (min-width: 1400px) { body.page-id-10155 .container-wrap { position: relative; } body.page-id-10155::before, body.page-id-10155::after { content: ""; position: fixed; top: 120px; bottom: 0; width: 120px; z-index: 0; opacity: .30; pointer-events: none; background-repeat: repeat-y; background-position: center top; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='620' viewBox='0 0 120 620'%3E%3Cg fill='none' stroke='%23bd93cf' stroke-width='2'%3E%3Cpath d='M12 70 q34 -70 68 0' /%3E%3Cpath d='M10 250 q22 -52 40 0 q18 52 40 0' /%3E%3Ccircle cx='42' cy='430' r='28' /%3E%3Ccircle cx='66' cy='448' r='28' /%3E%3Cpath d='M20 560 l34 -52 l34 52 z' /%3E%3C/g%3E%3Cg fill='%23bd93cf' font-family='Georgia, serif' font-size='34'%3E%3Ctext x='40' y='160'%3E%E2%88%91%3C/text%3E%3Ctext x='16' y='350'%3E%E2%88%AB%3C/text%3E%3Ctext x='72' y='350'%3E%CF%80%3C/text%3E%3Ctext x='30' y='610'%3E%E2%88%9Ax%3C/text%3E%3C/g%3E%3C/svg%3E"); } body.page-id-10155::before { left: 6px; } body.page-id-10155::after { right: 6px; transform: scaleX(-1); } } /* Mobile: sticky prev/next bar (~80% of users are on iPhone) */ @media (max-width: 690px) { .gkt-lesson { border-radius: 12px; padding-top: 22px; } .gkt-tutor__form { flex-direction: column; } .gkt-pn { position: sticky; bottom: 0; background: #fff; z-index: 90; box-shadow: 0 -4px 16px rgba(20,16,28,.08); border-radius: 0; } .gkt-pn a { padding: 12px 16px; } .gkt-pn span { font-size: 13.5px; } } /* ════ Strand navigation (Task E): course-page funnel + My Account quick-nav ════ Brand-styled strand cards that funnel students into the redesigned strand pages, with "Learn off" markers mirroring the strand pages. Loaded site-wide (via main-styles) so it covers BOTH the course page (shortcode, non-Woo) and the /my-account/ dashboard. Colours match topic-page-templates/build_all.py: navy #1f4068, purple #6b2d8e, learn-off orange #ea580c, done green #27ae60. */ .gkt-strandnav-wrap { margin: 8px 0 4px; } .gkt-strandnav__intro { color: #4b5563; font-size: 15px; line-height: 1.55; margin: 0 0 16px; max-width: 70ch; } .gkt-strandnav { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } /* Paper 1 / Paper 2 section headings inside the funnel. */ .gkt-strandnav__section { font-family: Georgia, serif; color: #1f4068; font-size: 19px; margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 2px solid #ece9f1; } .gkt-strandnav-wrap .gkt-strandnav__section:first-of-type, .gkt-strandnav__section:first-child { margin-top: 8px; } .gkt-strand { position: relative; display: flex; flex-direction: column; gap: 4px; background: #f5f6f8; border: 1px solid #e5e7eb; border-left: 4px solid #6b2d8e; border-radius: 10px; padding: 14px 16px; text-decoration: none; color: #1f2937; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; } .gkt-strand:hover { background: #eef0f4; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(31, 64, 104, .10); } .gkt-strand__name { font-weight: 700; font-size: 15.5px; color: #1f4068; line-height: 1.3; } .gkt-strand__meta { font-size: 13px; color: #6b7280; } /* Per-strand completion tracker (shown only for logged-in students). */ .gkt-strand__track { display: block; height: 6px; border-radius: 3px; background: #e6e3ec; overflow: hidden; margin-top: 7px; } .gkt-strand__track span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #6b2d8e, #1f4068); } .gkt-strand__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .gkt-strand__free { background: #e7f6f2; color: #0f6e56; border: 1px solid #9fdfd2; border-radius: 12px; padding: 2px 9px; font-size: 11px; font-weight: 700; white-space: nowrap; } .gkt-strand__learn { background: #fff7ed; color: #c2410c; border: 1px solid #fdba74; border-radius: 12px; padding: 2px 9px; font-size: 11px; font-weight: 700; white-space: nowrap; } /* Inline "key" badges used inside intro/hint prose. */ .gkt-strand__learn--key, .gkt-strand__free--key { display: inline-block; vertical-align: baseline; } /* Free-strand banner — LOGGED-OUT visitors only, sits above the strand grid. The grid itself is untouched; this is purely additive (see gkt_free_strand_banner()). */ .gkt-freebanner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: #f2fbf8; border: 1px solid #9fdfd2; border-left: 5px solid #0f6e56; border-radius: 10px; padding: 16px 20px; margin: 0 0 22px; text-decoration: none; color: inherit; } .gkt-freebanner:hover { background: #eaf8f3; border-color: #5dcaa5; } .gkt-freebanner__text { display: block; flex: 1 1 260px; } .gkt-freebanner__title { display: block; font-size: 18px; font-weight: 700; color: #0d5c48; margin-bottom: 3px; } .gkt-freebanner__sub { display: block; font-size: 14.5px; color: #4c4365; line-height: 1.45; } .gkt-freebanner__cta { background: #0f6e56; color: #fff; border-radius: 8px; padding: 11px 20px; font-size: 15px; font-weight: 700; white-space: nowrap; } .gkt-freebanner:hover .gkt-freebanner__cta { background: #0b5442; } @media (max-width: 520px) { .gkt-freebanner { padding: 14px 16px; } .gkt-freebanner__cta { width: 100%; text-align: center; } } .gkt-strand--learn { border-left-color: #ea580c; } .gkt-strand--done { background: #eafaf1; border-left-color: #27ae60; } .gkt-strand__check { position: absolute; top: 12px; right: 14px; color: #27ae60; font-weight: 700; font-size: 16px; } /* Continue-where-you-left-off banner on the /my-account/ dashboard. */ .gkt-account__continue { display: flex; flex-direction: column; gap: 2px; background: linear-gradient(135deg, #1f4068, #6b2d8e); color: #fff; border-radius: 14px; padding: 18px 22px; margin: 4px 0 24px; text-decoration: none; box-shadow: 0 8px 24px rgba(31, 64, 104, .18); } .gkt-account__continue:hover { opacity: .96; color: #fff; } .gkt-account__continue-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .85; } .gkt-account__continue-title { font-size: 20px; font-weight: 700; line-height: 1.25; color: #fff; } .gkt-account__continue-go { font-size: 14px; font-weight: 600; margin-top: 6px; opacity: .95; } /* Section headings + hint text inside the dashboard. */ .gkt-account__h { font-family: Georgia, serif; color: #1f4068; font-size: 19px; margin: 26px 0 10px; padding-top: 4px; } .gkt-account__hint { color: #6b7280; font-size: 14px; margin: 0 0 14px; } /* The dashboard is wider than Task D's default once the strand grid is in. */ .gkt-account { max-width: 920px; } @media (max-width: 480px) { .gkt-strandnav { grid-template-columns: 1fr; } .gkt-account__continue-title { font-size: 18px; } } /* Backlog item 9(a) — LCHL exam-solutions index (page 8355): the Salient row-bg-overlay is transparent but has pointer-events:auto and z-index:2, so it sits over the Paper 1 / Paper 2 buttons and eats every click. The overlay is decorative; it never needs pointer events. */ .page-id-8355 .row-bg-overlay { pointer-events: none; } /* WooCommerce ERROR notices must look like errors (Paul, 2026-07-08: the "account is already registered" checkout error rendered in Salient's teal info style and was invisible during pre-prod testing). Errors go red; info/success notices ("Returning customer?", "added to cart") keep the theme's teal. Site-wide on purpose — an error is an error everywhere. */ ul.woocommerce-error, .woocommerce-notices-wrapper ul.woocommerce-error, .woocommerce-NoticeGroup ul.woocommerce-error { background: #fdecea !important; border-left: 5px solid #c0392b !important; color: #7b241c !important; } ul.woocommerce-error li { color: #7b241c !important; font-weight: 600; } ul.woocommerce-error li::before { content: "\26A0\FE0F "; /* ⚠️ */ } ul.woocommerce-error a { color: #7b241c !important; text-decoration: underline; } /* Course-page Class Feed card ([gkt_class_feed_card], under the intro video). Only renders for post-launch purchasers — see inc/class-feed.php §8. */ .gkt-cfcard { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px; border: 1px solid #e5e7eb; border-left: 5px solid #6b2d8e; border-radius: 10px; background: #faf8fc; text-align: left; } .gkt-cfcard__text { flex: 1 1 220px; display: flex; flex-direction: column; gap: 3px; } .gkt-cfcard__text b { color: #1f4068; font-size: 15px; } .gkt-cfcard__text span { color: #6b7280; font-size: 13px; line-height: 1.45; } .gkt-cfcard__btn { background: #6b2d8e; color: #fff !important; padding: 9px 16px; border-radius: 24px; font-size: 14px; font-weight: 600; white-space: nowrap; } .gkt-cfcard__btn:hover { background: #59247a; color: #fff; } /* Checkout "What year are you in?" — make the dropdown look like the other checkout inputs instead of a bare browser select (Paul, 2026-07-08). */ .woocommerce-checkout #gkt_school_year_field select, select.gkt-year-select { display: block; width: 100%; padding: 11px 14px; line-height: 1.4; border: 1px solid #d4d7dc; border-radius: 6px; background-color: #fff; color: #1f4068; font-size: 14px; -webkit-appearance: menulist; appearance: menulist; } .woocommerce-checkout #gkt_school_year_field select:focus, select.gkt-year-select:focus { border-color: #6b2d8e; outline: none; } /* Checkout "Your order" per-item Remove link (inc/checkout-ux.php §3b). */ .woocommerce-checkout a.gkt-co-remove { display: inline-block; margin-top: 2px; color: #c0392b !important; font-size: 12px; font-weight: 600; text-decoration: none; } .woocommerce-checkout a.gkt-co-remove:hover { text-decoration: underline; } /* ── Logged-out /my-account/ login — "Option B with Pi" (Paul, 2026-07-09; template override woocommerce/myaccount/form-login.php). ─────────────── */ .gkt-login { max-width: 680px; margin: 0 auto; padding: 40px 16px 60px; } .gkt-login__pi-wrap { text-align: center; margin-bottom: 10px; } .gkt-login__pi { background: none; border: none; cursor: pointer; padding: 0; color: #6b2d8e; width: 76px; height: 76px; display: inline-block; animation: gkt-pi-bob 3s ease-in-out infinite; } .gkt-login__pi svg { width: 100%; height: 100%; } .gkt-login__pi:hover { color: #59247a; transform: scale(1.06); } .gkt-login__pi-eyes { animation: gkt-pi-blink 4s infinite; transform-origin: center 32px; } @keyframes gkt-pi-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes gkt-pi-blink { 0%,92%,100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } } .gkt-login__bubble { background: #f6effc; border-radius: 12px; padding: 9px 14px; font-size: 13px; color: #1f4068; max-width: 300px; margin: 0 auto 14px; text-align: center; } .gkt-login__card { background: #fff; border-top: 6px solid #6b2d8e; border: 1px solid #e5e7eb; border-top: 6px solid #6b2d8e; border-radius: 14px; max-width: 440px; margin: 0 auto; padding: 38px 40px; box-shadow: 0 10px 34px rgba(31,64,104,.08); } .gkt-login__title { font-size: 30px; text-align: center; margin: 0 0 2px; } .gkt-login__sub { text-align: center; color: #6b7280; font-size: 14.5px; margin-bottom: 8px; } .gkt-login__card .input-text { width: 100%; padding: 13px 15px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 15px; } .gkt-login__card .input-text:focus { border-color: #6b2d8e; outline: none; } .gkt-login__card label { font-size: 13.5px; font-weight: 700; } .gkt-login__btn, .gkt-login__card button.gkt-login__btn { display: block; width: 100%; background: #6b2d8e; color: #fff; border: none; border-radius: 26px; padding: 14px; font-size: 15.5px; font-weight: 700; } .gkt-login__btn:hover { background: #59247a; } .gkt-login__aux { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #6b7280; margin: 14px 0 0; } .gkt-login__aux a.gkt-login__lost { color: #6b2d8e; font-weight: 600; text-decoration: none; } .gkt-login__links { display: flex; gap: 10px; max-width: 660px; margin: 26px auto 0; flex-wrap: wrap; } .gkt-login__links > a, .gkt-login__links > span { flex: 1 1 180px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 15px 13px; text-decoration: none; color: #1f4068; font-size: 13.5px; text-align: center; } .gkt-login__links > a:hover { border-color: #6b2d8e; } .gkt-login__links b { display: block; color: #6b2d8e; font-size: 14.5px; margin-bottom: 3px; } .gkt-login__free a { color: #6b2d8e; font-weight: 700; text-decoration: none; } .gkt-login__free a:hover { text-decoration: underline; } /* Members-video gate on MOBILE (Paul, 2026-07-09, phone screenshot): the locked box takes its height from the 4:3 poster while the text overlay is absolutely centred inside overflow:hidden — on narrow screens the heading clips at the top and the Subscribe CTA is cut off at the bottom. Below 640px, let the TEXT define the height and stretch the gradient poster behind it. !important needed: the template carries a later inline