/* ============================================================================ Level Up Classroom — Free Teacher Tools — shared design system A crafted, branded toolbox: Bricolage Grotesque display + Inter body, the LUC blue→green→orange triad, tactile gradient tiles on a pegboard workbench, heavy crest branding, and a real dark mode. Theme via [data-theme] on (persisted by toolbox.js), defaulting to prefers-color-scheme. ============================================================================ */ :root { --blue: #4f9fd6; --blue-deep: #2f6fb0; --green: #5aa65f; --green-deep: #3d8a52; --orange: #f5a623; --grad: linear-gradient(135deg, #59a8da, #5fa660); --grad-warm: linear-gradient(135deg, #f5a623, #ef6f53); --display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif; --bg: #f4f6f9; --bg-2: #eef1f6; --surface: #ffffff; --surface-2: #f2f5f9; --text: #0f1b2d; --muted: #5a6b81; --faint: #93a1b3; --border: #e2e8f0; --peg: rgba(20, 50, 90, .05); --shadow: 0 2px 6px rgba(16, 42, 78, .06), 0 1px 2px rgba(16, 42, 78, .04); --shadow-lg: 0 18px 44px rgba(16, 42, 78, .14); --ring: rgba(89, 168, 218, .35); } :root[data-theme="dark"] { --bg: #0a1120; --bg-2: #0d1526; --surface: #141d30; --surface-2: #1b2740; --text: #eef3fb; --muted: #93a4bd; --faint: #5f708c; --border: #263450; --peg: rgba(120, 170, 230, .06); --shadow: 0 2px 8px rgba(0, 0, 0, .4); --shadow-lg: 0 22px 50px rgba(0, 0, 0, .55); --ring: rgba(89, 168, 218, .5); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a1120; --bg-2: #0d1526; --surface: #141d30; --surface-2: #1b2740; --text: #eef3fb; --muted: #93a4bd; --faint: #5f708c; --border: #263450; --peg: rgba(120, 170, 230, .06); --shadow: 0 2px 8px rgba(0, 0, 0, .4); --shadow-lg: 0 22px 50px rgba(0, 0, 0, .55); --ring: rgba(89, 168, 218, .5); } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; /* pegboard workbench: a faint dot grid */ background-image: radial-gradient(var(--peg) 1.4px, transparent 1.4px); background-size: 26px 26px; } h1, h2, h3, h4 { font-family: var(--display); line-height: 1.08; text-wrap: balance; margin: 0; letter-spacing: -.01em; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; } .narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; } .gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .warm-text { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .gradient-bg { background: var(--grad); } /* ── Header ─────────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); } .site-header .bar { max-width: 1160px; margin: 0 auto; padding: 11px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .site-header nav { display: none; gap: 26px; font-size: 14px; font-weight: 600; color: var(--muted); } .site-header nav a:hover { color: var(--text); } @media (min-width: 880px) { .site-header nav { display: flex; } } .logo img { height: 46px; width: auto; display: block; } .header-actions { display: flex; align-items: center; gap: 10px; } .theme-toggle { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; transition: color .15s, border-color .15s, transform .1s; } .theme-toggle:hover { color: var(--text); border-color: var(--faint); } .theme-toggle:active { transform: scale(.94); } .theme-toggle .moon { display: none; } :root[data-theme="dark"] .theme-toggle .sun { display: none; } :root[data-theme="dark"] .theme-toggle .moon { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .moon { display: inline; } } /* ── Buttons ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 20px; border-radius: 13px; font-weight: 700; font-size: 15px; font-family: var(--display); cursor: pointer; border: 1px solid transparent; transition: opacity .15s, transform .06s, box-shadow .15s, border-color .15s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgba(47, 111, 176, .28); } .btn-primary:hover { opacity: .95; box-shadow: 0 10px 26px rgba(47, 111, 176, .36); } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-ghost:hover { border-color: var(--blue); color: var(--blue-deep); } .btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 11px; } .btn-lg { padding: 16px 30px; font-size: 17px; border-radius: 15px; } /* Branded "on LUC" button — carries the crest + gradient wordmark, not a plain pill. */ .btn-luc { background: #fff; color: #0f1b2d; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 8px 22px rgba(0,0,0,.18); gap: 11px; padding-left: 13px; } .btn-luc img { height: 30px; width: auto; } .btn-luc .lbl { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .btn-luc:hover { box-shadow: 0 12px 28px rgba(0,0,0,.24); transform: translateY(-1px); } /* ── Cards / surfaces ──────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); } .pad { padding: 24px; } @media (min-width: 640px) { .pad { padding: 32px; } } .badge-row { display: flex; flex-wrap: wrap; gap: 10px; } .badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--surface); color: var(--muted); border: 1px solid var(--border); box-shadow: var(--shadow); } .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); } .eyebrow { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-deep); } :root[data-theme="dark"] .eyebrow { color: var(--blue); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eyebrow { color: var(--blue); } } /* ── Inputs ────────────────────────────────────────────────────────────── */ input[type="text"], input[type="number"], textarea, select { font-family: inherit; font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; width: 100%; transition: border-color .15s, box-shadow .15s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--ring); } label { font-size: 14px; font-weight: 600; color: var(--text); } .field { display: flex; flex-direction: column; gap: 7px; } .hint { font-size: 13px; color: var(--muted); } /* ── Hero (asymmetric, branded) ────────────────────────────────────────── */ .hero { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; padding: 52px 0 28px; } @media (min-width: 900px) { .hero { grid-template-columns: 1.15fr .85fr; padding: 68px 0 40px; } } .hero h1 { font-size: clamp(38px, 7vw, 64px); font-weight: 800; margin: 16px 0 18px; } .hero .lede { font-size: 19px; color: var(--muted); max-width: 540px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 20px; } /* Dark "trophy case" showcase — frames the crest (which has its own dark glow) so it reads intentionally on both light and dark pages. */ .hero-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 240px; padding: 34px; background: radial-gradient(circle at 50% 38%, #16233a, #0a1120 72%); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow-lg); overflow: hidden; } .hero-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(120,170,230,.10) 1.3px, transparent 1.3px); background-size: 20px 20px; } .hero-art .glow { position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(95,166,96,.4), rgba(89,168,218,.3) 45%, transparent 70%); filter: blur(22px); } .hero-art img { position: relative; width: min(330px, 82%); filter: drop-shadow(0 24px 44px rgba(0,0,0,.4)); } .hero-art .float { position: absolute; z-index: 2; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px rgba(0,0,0,.35); } .hero-art .float svg { width: 23px; height: 23px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .hero-art .f1 { top: 26px; left: 22px; background: linear-gradient(135deg,#59a8da,#2563eb); transform: rotate(-8deg); } .hero-art .f2 { bottom: 30px; right: 24px; background: linear-gradient(135deg,#f59e0b,#f97316); transform: rotate(9deg); } .hero-art .f3 { bottom: 40px; left: 30px; background: linear-gradient(135deg,#34d399,#10b981); transform: rotate(6deg); } .tool-hero { text-align: center; padding: 50px 0 8px; } .tool-hero .crest { height: 78px; width: auto; margin: 0 auto 18px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.28)); } .tool-hero h1 { font-size: clamp(34px, 6.5vw, 52px); font-weight: 800; margin-bottom: 14px; } .tool-hero p.lede { font-size: 18px; color: var(--muted); max-width: 640px; margin: 0 auto; } .tool-stage { padding: 14px 0 8px; } section { scroll-margin-top: 84px; } .section-pad { padding: 46px 0; } .prose { color: var(--text); } .prose p { color: var(--muted); margin: 0 0 16px; font-size: 17px; } .prose h2 { font-size: 30px; font-weight: 800; margin: 0 0 16px; } .prose h3 { font-size: 20px; font-weight: 800; margin: 22px 0 8px; } .prose a { color: var(--blue-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } :root[data-theme="dark"] .prose a { color: var(--blue); } /* ── Tool tiles (the toolbox) ──────────────────────────────────────────── */ .cluster { margin-top: 8px; } .cluster-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 20px; } .cluster-head h2 { font-size: 26px; font-weight: 800; } .cluster-head .kicker { font-size: 14px; color: var(--muted); } .cluster-head .rule { flex: 1; height: 1px; background: var(--border); min-width: 24px; } .tile-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 560px) { .tile-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 940px) { .tile-grid { grid-template-columns: 1fr 1fr 1fr; } } /* Full-gradient tool card — the whole card is washed in the tool's gradient, with a dot pattern + corner light bloom for depth. Bento: .wide spans 2 cols. */ .tile { position: relative; display: flex; flex-direction: column; gap: 13px; overflow: hidden; border-radius: 22px; padding: 24px; min-height: 190px; color: #fff; background: linear-gradient(140deg, var(--g1), var(--g2)); box-shadow: 0 14px 30px color-mix(in srgb, var(--g2) 38%, transparent); transition: transform .18s ease, box-shadow .18s ease; } .tile::before { /* dot texture */ content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.18) 1.3px, transparent 1.3px); background-size: 17px 17px; } .tile::after { /* corner light bloom */ content: ""; position: absolute; top: -45%; right: -18%; width: 68%; height: 130%; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 62%); } .tile > * { position: relative; z-index: 1; } .tile:hover { transform: translateY(-6px); box-shadow: 0 24px 48px color-mix(in srgb, var(--g2) 52%, transparent); } @media (min-width: 940px) { .tile.wide { grid-column: span 2; flex-direction: row; align-items: flex-start; gap: 22px; } .tile.wide .body { display: flex; flex-direction: column; gap: 13px; } } .tile .chip { width: 58px; height: 58px; border-radius: 17px; display: flex; align-items: center; justify-content: center; flex: none; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.32); backdrop-filter: blur(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } .tile .chip svg { width: 30px; height: 30px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .tile h3 { font-size: 20px; font-weight: 800; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.15); } .tile p { font-size: 14.5px; color: rgba(255,255,255,.92); margin: 0; } .tile .ribbon { position: absolute; top: 16px; right: 16px; z-index: 2; font-family: var(--display); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 5px 11px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.36); backdrop-filter: blur(4px); } .tile .ribbon.soft { background: rgba(0,0,0,.16); border-color: rgba(255,255,255,.22); } .tile .go { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 700; font-size: 13.5px; color: #fff; opacity: .96; } .tile:hover .go { gap: 11px; } /* ── Featured carousel (front and centre) ──────────────────────────────── */ .carousel { position: relative; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-lg); } .carousel-track { display: flex; transition: transform .6s cubic-bezier(.62,.05,.2,1); } .carousel-track.no-anim { transition: none; } .cslide { min-width: 100%; box-sizing: border-box; position: relative; overflow: hidden; padding: 46px 48px; min-height: 340px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px; background: linear-gradient(130deg, var(--g1), var(--g2)); color: #fff; } .cslide::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 1.5px); background-size: 22px 22px; } .cslide::after { content: ""; position: absolute; top: -30%; right: -8%; width: 55%; height: 150%; background: radial-gradient(circle, rgba(255,255,255,.3), transparent 60%); } .cslide .c-body { position: relative; z-index: 1; max-width: 580px; } .cslide .kick { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.34); margin-bottom: 16px; } .cslide h2 { font-size: clamp(30px, 5vw, 50px); font-weight: 800; color: #fff; margin-bottom: 12px; text-shadow: 0 2px 14px rgba(0,0,0,.16); } .cslide p { font-size: 18px; color: rgba(255,255,255,.94); margin: 0 0 24px; max-width: 520px; } .cslide .c-cta { display: inline-flex; align-items: center; gap: 9px; background: #fff; color: #0f1b2d; font-family: var(--display); font-weight: 800; font-size: 16px; padding: 13px 24px; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.2); transition: transform .1s; } .cslide .c-cta:hover { transform: translateY(-2px); } .cslide .c-art { position: relative; z-index: 1; width: 168px; height: 168px; border-radius: 34px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(6px); box-shadow: inset 0 2px 0 rgba(255,255,255,.3); } .cslide .c-art svg { width: 88px; height: 88px; stroke: #fff; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 720px) { .cslide { grid-template-columns: 1fr; padding: 34px 28px; min-height: 300px; } .cslide .c-art { display: none; } } .carousel .arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4); color: #fff; cursor: pointer; backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; transition: background .15s; } .carousel .arrow:hover { background: rgba(255,255,255,.36); } .carousel .arrow.prev { left: 16px; } .carousel .arrow.next { right: 16px; } @media (max-width: 720px) { .carousel .arrow { display: none; } } .carousel .dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; } .carousel .dots button { width: 9px; height: 9px; padding: 0; border-radius: 999px; background: rgba(255,255,255,.5); border: none; cursor: pointer; transition: width .2s, background .2s; } .carousel .dots button.on { width: 28px; background: #fff; } /* Small icon chip used inline (funnel, prose) */ .mini-chip { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--g1, #59a8da), var(--g2, #5fa660)); } .mini-chip svg { width: 21px; height: 21px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* ── Funnel / conversion band ──────────────────────────────────────────── */ .funnel { position: relative; overflow: hidden; background: var(--grad); color: #fff; border-radius: 26px; padding: 40px 32px; text-align: center; box-shadow: var(--shadow-lg); } .funnel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1.4px, transparent 1.4px); background-size: 22px 22px; opacity: .5; } .funnel > * { position: relative; } .funnel .crest { height: 62px; margin: 0 auto 16px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.3)); } .funnel h2 { font-size: clamp(25px, 4vw, 34px); font-weight: 800; margin-bottom: 12px; color: #fff; } .funnel p { font-size: 17px; opacity: .96; margin: 0 auto 24px; max-width: 580px; } .funnel-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: 16px; padding: 18px 22px; margin-top: 18px; box-shadow: var(--shadow); } .funnel-mini p { margin: 0; font-weight: 600; font-size: 15px; color: var(--text); } .funnel-mini .mini-copy { display: flex; align-items: center; gap: 14px; } /* ── FAQ ───────────────────────────────────────────────────────────────── */ .faq { display: flex; flex-direction: column; gap: 12px; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 15px; padding: 2px 22px; box-shadow: var(--shadow); } .faq summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 16px; padding: 17px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--blue); font-size: 24px; font-weight: 400; line-height: 1; } .faq details[open] summary::after { content: "\2013"; } .faq details p { color: var(--muted); margin: 0 0 18px; } /* ── Feature strip (why different) ─────────────────────────────────────── */ .why-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 760px) { .why-grid { grid-template-columns: 1fr 1fr 1fr; } } .why { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } .why h3 { font-size: 17px; font-weight: 800; } .why p { font-size: 14px; color: var(--muted); margin: 0; } /* ── Footer ────────────────────────────────────────────────────────────── */ .site-footer { position: relative; background: #08101f; color: #93a4bd; padding: 46px 20px; margin-top: 28px; } .site-footer .inner { max-width: 1160px; margin: 0 auto; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; } .site-footer a:hover { color: #fff; } .site-footer .top { border-bottom: 1px solid #1a2740; padding-bottom: 26px; margin-bottom: 26px; } .site-footer .bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; } .site-footer img { height: 48px; opacity: .92; } .site-footer .fine { font-size: 13px; } .center { text-align: center; } .mt-s { margin-top: 10px; } .mt-m { margin-top: 22px; } .mt-l { margin-top: 40px; } .stack { display: flex; flex-direction: column; } .gap-s { gap: 10px; } .gap-m { gap: 18px; } .gap-l { gap: 32px; } .row { display: flex; flex-wrap: wrap; gap: 12px; } .tabular { font-variant-numeric: tabular-nums; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }