/* Theme Name: KiaraHub Theme URI: https://kiarahub.com Author: KiaraHub Author URI: https://kiarahub.com Description: An EdTech theme for KiaraHub.com — connecting students with teachers through video courses, assignments, quizzes and computer-based exams. Version: 2.0.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: kiarahub Tags: education, e-learning, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, dark-mode, pwa Changelog 2.0.0 — "The Bridge, refined" - Deeper, richer navy/gold/teal palette with gradient + glass surfaces - Full dark mode (auto + manual toggle, persisted, no-flash) - Scroll-reveal micro-animations, animated stat counters, button ripple - Installable PWA (manifest + offline service worker + app icons) */ /* ========================================================= KIARAHUB DESIGN SYSTEM Concept: "The Bridge" — a visible path connecting a learner to a teacher through milestones: video lesson, assignment, quiz, exam, certificate. That path motif (dots + connecting line) recurs as the site's signature element in the hero, course progress and section dividers. ========================================================= */ :root{ /* --- Color tokens --- */ --kh-ink: #16233F; /* primary text / headers, deep academic navy */ --kh-ink-soft: #3C4B6B; /* secondary text */ --kh-paper: #F3F4EF; /* page background, warm-cool off white */ --kh-paper-raised: #FFFFFF; /* card background */ --kh-line: #DEDFD6; /* hairline borders */ --kh-navy-deep: #0E1830; /* footer / dark sections */ --kh-navy-deeper: #080E1E; --kh-teal: #1F6F6B; /* secondary accent — live/video */ --kh-teal-bright: #2C9C93; --kh-teal-tint: #E4F0EE; --kh-gold: #E3A857; /* primary accent — achievement/CTA */ --kh-gold-bright: #F0BE73; --kh-gold-deep: #C4872F; --kh-coral: #E4572E; /* sparing use — alerts, exam timer */ --kh-coral-tint: #FCE7E0; /* --- Gradients (new) --- */ --kh-gradient-gold: linear-gradient(135deg, var(--kh-gold-bright), var(--kh-gold-deep)); --kh-gradient-teal: linear-gradient(135deg, var(--kh-teal-bright), var(--kh-teal)); --kh-gradient-navy: linear-gradient(160deg, var(--kh-navy-deep) 0%, var(--kh-navy-deeper) 60%, #101c3c 100%); --kh-gradient-mesh: radial-gradient(circle at 12% 18%, rgba(227,168,87,.16), transparent 42%), radial-gradient(circle at 85% 8%, rgba(31,111,107,.16), transparent 40%), radial-gradient(circle at 60% 92%, rgba(227,168,87,.10), transparent 45%); --kh-glass-bg: rgba(255,255,255,.62); --kh-glass-border: rgba(255,255,255,.55); /* --- Type tokens --- */ --kh-font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --kh-font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --kh-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; /* --- Scale --- */ --kh-radius: 14px; --kh-radius-sm: 8px; --kh-radius-lg: 22px; --kh-shadow: 0 6px 24px rgba(22,35,63,0.08); --kh-shadow-lg: 0 18px 48px rgba(22,35,63,0.14); --kh-shadow-glow: 0 10px 34px rgba(227,168,87,0.28); --kh-max: 1180px; --kh-ease: cubic-bezier(.22,.9,.32,1.12); color-scheme: light; } /* ========================================================= DARK MODE — auto (prefers-color-scheme) + manual override via [data-theme] on , set by the header toggle and persisted in localStorage (see assets/js/main.js). ========================================================= */ html[data-theme="dark"], html:not([data-theme="light"]) body.kh-auto-dark{ color-scheme: dark; } html[data-theme="dark"]{ --kh-ink: #EDEFE7; --kh-ink-soft: #AEB6CC; --kh-paper: #0B1226; --kh-paper-raised: #131C36; --kh-line: #263056; --kh-navy-deep: #060A16; --kh-navy-deeper: #04060F; --kh-teal-tint: rgba(44,156,147,.14); --kh-coral-tint: rgba(228,87,46,.16); --kh-glass-bg: rgba(19,28,54,.6); --kh-glass-border: rgba(255,255,255,.08); --kh-shadow: 0 6px 24px rgba(0,0,0,0.35); --kh-shadow-lg: 0 18px 48px rgba(0,0,0,0.45); color-scheme: dark; } @font-face{ font-family:'Fraunces'; src:local('Fraunces'); font-display:swap; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--kh-paper); color:var(--kh-ink); font-family:var(--kh-font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background-color .25s ease, color .25s ease; } ::selection{ background:var(--kh-gold); color:var(--kh-navy-deep); } ::-webkit-scrollbar{ width:11px; height:11px; } ::-webkit-scrollbar-track{ background:var(--kh-paper); } ::-webkit-scrollbar-thumb{ background:var(--kh-line); border-radius:20px; border:3px solid var(--kh-paper); } ::-webkit-scrollbar-thumb:hover{ background:var(--kh-teal); } img{ max-width:100%; display:block; } a{ color:var(--kh-teal); text-decoration:none; transition:color .15s ease; } html[data-theme="dark"] a{ color:var(--kh-teal-bright); } a:hover{ color:var(--kh-gold-deep); } h1,h2,h3,h4{ font-family:var(--kh-font-display); color:var(--kh-ink); line-height:1.15; margin:0 0 .5em; font-weight:600; } h1{ font-size:clamp(2.1rem,4vw,3.4rem); font-weight:500; } h2{ font-size:clamp(1.6rem,2.6vw,2.3rem); } h3{ font-size:1.3rem; } p{ margin:0 0 1em; color:var(--kh-ink-soft); } .container{ max-width:var(--kh-max); margin:0 auto; padding:0 24px; } .eyebrow{ font-family:var(--kh-font-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--kh-teal); display:inline-block; margin-bottom:.75em; } :focus-visible{ outline:3px solid var(--kh-gold); outline-offset:2px; } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* Buttons */ .btn{ position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--kh-font-body); font-weight:600; font-size:.95rem; padding:.85em 1.6em; border-radius:100px; border:2px solid transparent; cursor:pointer; transition:transform .2s var(--kh-ease), box-shadow .2s ease, background .2s ease, color .2s ease; -webkit-tap-highlight-color:transparent; } .btn .ripple{ position:absolute; border-radius:50%; transform:scale(0); pointer-events:none; background:rgba(255,255,255,.55); animation:kh-ripple .6s ease-out forwards; z-index:0; } @keyframes kh-ripple{ to{ transform:scale(2.6); opacity:0; } } .btn > *{ position:relative; z-index:1; } .btn-primary{ background:var(--kh-gradient-gold); color:var(--kh-navy-deep); box-shadow:0 2px 10px rgba(196,135,47,.25); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--kh-shadow-glow); color:var(--kh-navy-deep); } .btn-primary:active{ transform:translateY(0) scale(.98); } .btn-outline{ border-color:var(--kh-ink); color:var(--kh-ink); } .btn-outline:hover{ background:var(--kh-ink); color:#fff; transform:translateY(-2px); } html[data-theme="dark"] .btn-outline{ border-color:var(--kh-ink); } html[data-theme="dark"] .btn-outline:hover{ background:var(--kh-ink); color:var(--kh-navy-deep); } .btn-ghost-light{ border-color:rgba(255,255,255,.4); color:#fff; } .btn-ghost-light:hover{ background:#fff; color:var(--kh-navy-deep); transform:translateY(-2px); } /* Theme toggle */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--kh-line); background:var(--kh-paper-raised); color:var(--kh-ink); cursor:pointer; transition:transform .3s var(--kh-ease), background .2s ease, border-color .2s ease; flex:none; } .theme-toggle:hover{ border-color:var(--kh-gold); transform:rotate(-14deg) scale(1.06); } .theme-toggle svg{ width:19px; height:19px; display:block; } .theme-toggle .icon-moon{ display:none; } html[data-theme="dark"] .theme-toggle .icon-sun{ display:none; } html[data-theme="dark"] .theme-toggle .icon-moon{ display:block; } /* Scroll progress bar */ .kh-scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0%; z-index:70; background:var(--kh-gradient-gold); transition:width .1s linear; } /* Back to top */ .kh-back-to-top{ position:fixed; right:22px; bottom:22px; z-index:60; width:46px; height:46px; border-radius:50%; border:none; cursor:pointer; background:var(--kh-navy-deep); color:var(--kh-gold); display:flex; align-items:center; justify-content:center; box-shadow:var(--kh-shadow-lg); opacity:0; transform:translateY(14px) scale(.9); pointer-events:none; transition:opacity .25s ease, transform .25s var(--kh-ease); } .kh-back-to-top.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .kh-back-to-top:hover{ background:var(--kh-gradient-gold); color:var(--kh-navy-deep); } /* Site header */ .site-header{ position:sticky; top:0; z-index:50; background:var(--kh-glass-bg); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); border-bottom:1px solid var(--kh-glass-border); transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease, height .2s ease; } .site-header.is-scrolled{ box-shadow:0 8px 30px rgba(22,35,63,.08); } html[data-theme="dark"] .site-header.is-scrolled{ box-shadow:0 8px 30px rgba(0,0,0,.4); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; height:76px; transition:height .2s ease; } .site-header.is-scrolled .container{ height:66px; } .site-branding a{ display:flex; align-items:center; gap:.5em; color:var(--kh-ink); font-family:var(--kh-font-display); font-size:1.4rem; font-weight:600; } .site-branding .mark{ width:34px; height:34px; border-radius:50%; background:conic-gradient(from 220deg, var(--kh-gold), var(--kh-teal) 60%, var(--kh-gold)); display:inline-block; animation:kh-spin 10s linear infinite; box-shadow:0 0 0 3px rgba(227,168,87,.15); } @keyframes kh-spin{ to{ transform:rotate(360deg); } } .primary-nav ul{ list-style:none; display:flex; gap:2rem; margin:0; padding:0; } .primary-nav a{ color:var(--kh-ink); font-weight:600; font-size:.95rem; position:relative; } .primary-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--kh-gradient-gold); transition:right .22s var(--kh-ease); border-radius:2px; } .primary-nav a:hover::after{ right:0; } .header-actions{ display:flex; align-items:center; gap:1rem; } .menu-toggle{ display:none; background:none; border:0; font-size:1.6rem; cursor:pointer; color:var(--kh-ink); } /* Hero: the Bridge */ .hero{ padding:88px 0 60px; position:relative; overflow:hidden; } .hero::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--kh-gradient-mesh); animation:kh-mesh-drift 18s ease-in-out infinite alternate; } @keyframes kh-mesh-drift{ 0%{ background-position:0% 0%, 0% 0%, 0% 0%; } 100%{ background-position:6% 4%, -4% -6%, 3% -3%; } } .hero .container{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; } .hero h1{ margin-bottom:.4em; } .hero h1 em{ font-style:normal; color:var(--kh-teal); background:var(--kh-gradient-teal); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero-lede{ font-size:1.15rem; max-width:46ch; } .hero-cta{ display:flex; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; } .hero-stats{ display:flex; gap:2.2rem; margin-top:2.4rem; } .hero-stats div strong{ display:block; font-family:var(--kh-font-display); font-size:1.6rem; color:var(--kh-ink); font-variant-numeric:tabular-nums; } .hero-stats div span{ font-size:.8rem; color:var(--kh-ink-soft); } .bridge{ position:relative; height:360px; z-index:1; } .bridge svg{ width:100%; height:100%; } .bridge .node-label{ font-family:var(--kh-font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; fill:var(--kh-ink-soft); } .bridge .bridge-path-bg{ stroke-dasharray:4 7; } .bridge .bridge-path-fg{ stroke-dasharray:340; stroke-dashoffset:340; animation:kh-draw 2.4s var(--kh-ease) .3s forwards; } @keyframes kh-draw{ to{ stroke-dashoffset:0; } } .bridge circle{ animation:kh-pop .5s var(--kh-ease) backwards; } .bridge circle:nth-of-type(1){ animation-delay:.1s; } .bridge circle:nth-of-type(2){ animation-delay:1.1s; } .bridge circle:nth-of-type(3){ animation-delay:1.4s; } .bridge circle:nth-of-type(4){ animation-delay:1.7s; } .bridge circle:nth-of-type(5){ animation-delay:2.0s; } .bridge circle:nth-of-type(6){ animation-delay:2.3s; } @keyframes kh-pop{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } } .bridge circle{ transform-box:fill-box; transform-origin:center; } @media (prefers-reduced-motion: reduce){ .hero::before{ animation:none; } .bridge .bridge-path-fg{ stroke-dashoffset:0; animation:none; } .bridge circle{ animation:none; opacity:1; transform:none; } } /* Section framing */ .section{ padding:76px 0; } .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2.6rem; flex-wrap:wrap; } .section-alt{ background:var(--kh-paper-raised); border-top:1px solid var(--kh-line); border-bottom:1px solid var(--kh-line); } .section-dark{ background:var(--kh-gradient-navy); color:#EDEFE7; position:relative; overflow:hidden; } .section-dark::before{ content:""; position:absolute; inset:0; background:var(--kh-gradient-mesh); opacity:.5; pointer-events:none; } .section-dark .container{ position:relative; z-index:1; } .section-dark h2, .section-dark h3{ color:#fff; } .section-dark p{ color:#B7BFD3; } /* Path divider - signature element reused between sections */ .path-divider{ display:flex; align-items:center; gap:10px; margin:0 0 2.2rem; } .path-divider .dot{ width:9px; height:9px; border-radius:50%; background:var(--kh-gold); flex:none; box-shadow:0 0 0 5px rgba(227,168,87,.18); } .path-divider .line{ flex:1; height:1px; background:linear-gradient(90deg, var(--kh-line), transparent); } /* Cards grid */ .grid{ display:grid; gap:28px; } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } .card{ background:var(--kh-paper-raised); border:1px solid var(--kh-line); border-radius:var(--kh-radius); overflow:hidden; transition:transform .28s var(--kh-ease), box-shadow .28s ease, border-color .28s ease; position:relative; } .card::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:var(--kh-gradient-gold); opacity:0; transition:opacity .28s ease; -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .card:hover{ transform:translateY(-6px); box-shadow:var(--kh-shadow-lg); border-color:transparent; } .card:hover::after{ opacity:1; } /* Course card */ .course-card .thumb{ position:relative; aspect-ratio:16/10; background:var(--kh-teal-tint); overflow:hidden; } .course-card .thumb img{ width:100%; height:100%; object-fit:cover; } .course-card .thumb .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .course-card .thumb .play span{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; color:var(--kh-ink); } .course-card .body{ padding:20px; } .course-card .cat{ font-family:var(--kh-font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--kh-gold-deep); } .course-card h3{ margin:.35em 0; font-size:1.12rem; } .course-card .teacher{ display:flex; align-items:center; gap:.5em; font-size:.85rem; color:var(--kh-ink-soft); margin-bottom:.8em; } .course-card .teacher img{ width:24px; height:24px; border-radius:50%; object-fit:cover; } .course-card .meta-row{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--kh-line); padding-top:.9em; } .course-card .price{ font-weight:700; font-family:var(--kh-font-display); } .badge{ display:inline-flex; align-items:center; gap:.35em; font-size:.72rem; font-weight:600; padding:.3em .7em; border-radius:100px; background:var(--kh-teal-tint); color:var(--kh-teal); } .badge-quiz{ background:#FBEFDA; color:var(--kh-gold-deep); } .badge-exam{ background:var(--kh-coral-tint); color:var(--kh-coral); } /* Teacher card */ .teacher-card{ text-align:center; padding:28px 20px; } .teacher-card img.avatar{ width:88px; height:88px; border-radius:50%; object-fit:cover; margin:0 auto 14px; border:3px solid var(--kh-paper); box-shadow:0 0 0 1px var(--kh-line); } .teacher-card .subject{ font-family:var(--kh-font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--kh-teal); } .teacher-card .stats{ display:flex; justify-content:center; gap:1.4rem; margin-top:14px; font-size:.8rem; color:var(--kh-ink-soft); } /* Path / steps (how it works) */ .path-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; } .path-steps::before{ content:""; position:absolute; top:22px; left:10%; right:10%; height:1px; background:var(--kh-line); } .path-step{ position:relative; text-align:center; padding:0 16px; } .path-step .num{ width:44px; height:44px; border-radius:50%; background:var(--kh-paper-raised); border:2px solid var(--kh-gold); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-family:var(--kh-font-mono); font-weight:700; position:relative; z-index:1; } /* Exam / quiz UI blocks */ .exam-panel{ background:var(--kh-navy-deep); border-radius:var(--kh-radius); padding:32px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; } .exam-panel .timer{ font-family:var(--kh-font-mono); font-size:2rem; background:rgba(255,255,255,.08); padding:.4em .8em; border-radius:10px; } .quiz-progress{ display:flex; gap:6px; margin:1.2em 0; } .quiz-progress span{ height:6px; flex:1; border-radius:3px; background:var(--kh-line); } .quiz-progress span.done{ background:var(--kh-teal); } .quiz-progress span.current{ background:var(--kh-gold); } /* Pricing / CTA band */ .cta-band{ background:var(--kh-gradient-navy); color:#fff; border-radius:var(--kh-radius-lg); padding:56px; text-align:center; position:relative; overflow:hidden; } .cta-band::before{ content:""; position:absolute; inset:0; background:var(--kh-gradient-mesh); } .cta-band::after{ content:""; position:absolute; top:0; bottom:0; width:40%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.08), transparent); animation:kh-shine 6s ease-in-out infinite; } @keyframes kh-shine{ 0%{ left:-50%; } 100%{ left:120%; } } .cta-band > *{ position:relative; z-index:1; } .cta-band h2{ color:#fff; } .cta-band p{ color:#B7BFD3; max-width:50ch; margin-inline:auto; } @media (prefers-reduced-motion: reduce){ .cta-band::after{ animation:none; } } /* Content / single pages */ .entry-content{ max-width:76ch; } .entry-content h2{ margin-top:1.6em; } .entry-content img{ border-radius:var(--kh-radius); } /* Footer */ .site-footer{ background:var(--kh-navy-deep); color:#C4CADB; padding:64px 0 28px; } .footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:2.4rem; } .site-footer h4{ color:#fff; font-size:1rem; font-family:var(--kh-font-body); font-weight:700; } .site-footer a{ color:#C4CADB; } .site-footer a:hover{ color:var(--kh-gold); } .footer-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; font-size:.82rem; flex-wrap:wrap; gap:1rem; } /* Widgets / sidebar */ .widget{ margin-bottom:2.2rem; } .widget h2.widget-title{ font-size:1rem; font-family:var(--kh-font-body); text-transform:uppercase; letter-spacing:.05em; } /* Utility */ .text-center{ text-align:center; } .mt-0{ margin-top:0; } /* Learning Loop dashboard */ .kh-loop-stages{ display:flex; gap:10px; margin-top:1.2em; flex-wrap:wrap; } .kh-loop-stage{ display:flex; align-items:center; gap:.5em; font-family:var(--kh-font-body); font-weight:600; font-size:.85rem; padding:.6em 1em; border-radius:100px; border:1.5px solid var(--kh-line); background:var(--kh-paper-raised); color:var(--kh-ink-soft); cursor:pointer; transition:all .15s ease; } .kh-loop-stage .dot{ width:8px; height:8px; border-radius:50%; background:var(--kh-line); flex:none; } .kh-loop-stage:hover{ border-color:var(--kh-teal); } .kh-loop-stage.is-done{ background:var(--kh-teal-tint); border-color:var(--kh-teal); color:var(--kh-teal); } .kh-loop-stage.is-done .dot{ background:var(--kh-teal); } .kh-loop-stage:disabled{ opacity:.6; cursor:wait; } /* PeerSpark — peer-taught explainer clips */ .kh-peerspark-form{ display:grid; gap:14px; } .kh-peerspark-form label{ font-weight:600; font-size:.85rem; display:block; margin-bottom:.3em; } .kh-peerspark-form input, .kh-peerspark-form select{ width:100%; padding:.65em .8em; border-radius:var(--kh-radius-sm); border:1.5px solid var(--kh-line); font-family:var(--kh-font-body); font-size:.92rem; background:var(--kh-paper-raised); color:var(--kh-ink); } .kh-peerspark-form input:focus, .kh-peerspark-form select:focus{ outline:none; border-color:var(--kh-teal); } .kh-peerspark-note{ font-size:.85rem; color:var(--kh-teal); min-height:1.2em; } .kh-peerspark-note.is-error{ color:var(--kh-coral); } .kh-clip-card{ padding:20px; } .kh-clip-card .concept{ font-weight:700; margin:.3em 0; } .kh-clip-card .meta{ font-size:.8rem; color:var(--kh-ink-soft); margin-bottom:.8em; } .kh-clip-card a.watch{ font-family:var(--kh-font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; } .kh-clip-helpful{ display:inline-flex; align-items:center; gap:.4em; margin-top:.9em; padding:.5em .9em; border-radius:100px; border:1.5px solid var(--kh-line); background:transparent; color:var(--kh-ink-soft); font-size:.8rem; font-weight:600; cursor:pointer; transition:all .15s ease; } .kh-clip-helpful:hover{ border-color:var(--kh-gold); } .kh-clip-helpful.is-voted{ background:var(--kh-teal-tint); border-color:var(--kh-teal); color:var(--kh-teal); cursor:default; } .kh-clip-helpful .count{ font-family:var(--kh-font-mono); } /* Bridge indicator — reuses the .path-divider dot/line motif to show peer-teaching credit lighting up alongside a student's closed loops */ .kh-bridge-row{ display:flex; align-items:center; gap:6px; margin-top:.6em; flex-wrap:wrap; } .kh-bridge-dot{ width:9px; height:9px; border-radius:50%; background:var(--kh-line); flex:none; } .kh-bridge-dot.is-lit{ background:var(--kh-gold); } /* ========================================================= NEW TECH: scroll-reveal micro-animations Applied via IntersectionObserver in assets/js/main.js — progressive enhancement, content is visible with no JS. ========================================================= */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--kh-ease), transform .6s var(--kh-ease); } .reveal.is-visible{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } } /* Animated counters (stat numbers) */ [data-count-to]{ font-variant-numeric:tabular-nums; } /* Skeleton shimmer for lazy/loading media */ .kh-skeleton{ position:relative; overflow:hidden; background:var(--kh-line); } .kh-skeleton::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform:translateX(-100%); animation:kh-shimmer 1.4s ease-in-out infinite; } @keyframes kh-shimmer{ 100%{ transform:translateX(100%); } } /* PWA install prompt */ .kh-install-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:80; max-width:420px; margin-inline:auto; background:var(--kh-paper-raised); border:1px solid var(--kh-line); border-radius:var(--kh-radius); box-shadow:var(--kh-shadow-lg); padding:16px 18px; display:flex; align-items:center; gap:14px; transform:translateY(120%); transition:transform .35s var(--kh-ease); } .kh-install-banner.is-visible{ transform:translateY(0); } .kh-install-banner p{ margin:0; font-size:.85rem; color:var(--kh-ink); flex:1; } .kh-install-banner strong{ display:block; font-family:var(--kh-font-display); font-size:1rem; margin-bottom:.15em; } .kh-install-banner .btn{ padding:.6em 1.1em; font-size:.82rem; } .kh-install-dismiss{ background:none; border:none; color:var(--kh-ink-soft); cursor:pointer; font-size:1.2rem; line-height:1; padding:4px; } /* Offline banner */ .kh-offline-banner{ position:fixed; top:0; left:0; right:0; z-index:90; text-align:center; background:var(--kh-coral); color:#fff; font-size:.82rem; font-weight:600; padding:.5em; transform:translateY(-100%); transition:transform .3s ease; } .kh-offline-banner.is-visible{ transform:translateY(0); } /* Footer dark-mode polish */ html[data-theme="dark"] .site-footer{ background:var(--kh-gradient-navy); } /* Responsive */ @media (max-width: 960px){ .hero .container{ grid-template-columns:1fr; } .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); } .path-steps{ grid-template-columns:repeat(2,1fr); gap:32px 0; } .path-steps::before{ display:none; } .footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width: 640px){ .primary-nav{ display:none; } .menu-toggle{ display:block; } .grid-3, .grid-4{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr; } .cta-band{ padding:36px 22px; } .exam-panel{ flex-direction:column; text-align:center; } .kh-back-to-top{ right:14px; bottom:14px; width:42px; height:42px; } }