/* =================================================================== Template layer — presentation only. Everything here reads the tokens the active template wrote into :root, or keys off the data-* attributes on . No rule in this file knows anything about a session, a quiz or a task, so a template can never change what a trainee is taught — only how it looks. =================================================================== */ /* ---------- density ---------- One scale drives padding, gaps and the reading measure, so "compact" and "spacious" stay coherent instead of being a pile of one-off overrides. */ body { line-height: var(--line-height, 1.6); } .card { padding: calc(22px * var(--density, 1)) calc(24px * var(--density, 1)); } .card.pad-lg { padding: calc(28px * var(--density, 1)) calc(30px * var(--density, 1)); } .content { padding: calc(clamp(20px, 4vw, 46px) * var(--density, 1)); } section.block { margin-bottom: calc(34px * var(--density, 1)); } .page-head { margin-bottom: calc(30px * var(--density, 1)); } .nav-item { padding: calc(10px * var(--density, 1)) 12px; } .tcards { gap: calc(18px * var(--density, 1)); } .callout { padding: calc(18px * var(--density, 1)) calc(20px * var(--density, 1)); } :root[data-density="spacious"] .content { max-width: 820px; } :root[data-density="compact"] .content { max-width: 1040px; } /* ---------- card style ---------- */ :root[data-cards="flat"] .card, :root[data-cards="flat"] .tcard, :root[data-cards="flat"] .mini-row { box-shadow: none; } :root[data-cards="raised"] .card, :root[data-cards="raised"] .tcard { border-color: transparent; box-shadow: var(--shadow-lg); } :root[data-cards="outlined"] .card, :root[data-cards="outlined"] .tcard { box-shadow: none; border-width: 1.5px; } /* ---------- button style ---------- */ :root[data-buttons="pill"] .btn { border-radius: 999px; } :root[data-buttons="outline"] .btn-primary { background: none; color: var(--brand-ink); border: 1.5px solid var(--brand-ink); box-shadow: none; } :root[data-buttons="outline"] .btn-primary:hover { background: var(--accent-soft); } :root[data-buttons="outline"] .continue-card { background: var(--bg-elev); color: var(--ink); border: 1.5px solid var(--line-strong); box-shadow: none; } :root[data-buttons="outline"] .continue-card p, :root[data-buttons="outline"] .continue-card .cc-kicker { color: var(--ink-soft); opacity: 1; } :root[data-buttons="outline"] .continue-card .cc-go { color: var(--brand-ink); } /* ---------- quiet navigation ---------- The sidebar collapses to a rail of numbers and opens on hover or focus, so a lesson gets the width and the menu is still one movement away. */ @media (min-width: 901px) { :root[data-nav="quiet"] { --sidebar-w: 74px; } :root[data-nav="quiet"] .sidebar { transition: width .18s ease; overflow: visible; } :root[data-nav="quiet"] .sidebar:hover, :root[data-nav="quiet"] .sidebar:focus-within { width: 300px; box-shadow: var(--shadow-lg); z-index: 45; } :root[data-nav="quiet"] .sidebar .brand-name, :root[data-nav="quiet"] .sidebar .nav-group-title, :root[data-nav="quiet"] .nav-item > span:not(.ni-num), :root[data-nav="quiet"] .nav-item .ni-check, :root[data-nav="quiet"] .nav-item .ni-lock { opacity: 0; transition: opacity .12s; white-space: nowrap; } :root[data-nav="quiet"] .sidebar:hover .brand-name, :root[data-nav="quiet"] .sidebar:hover .nav-group-title, :root[data-nav="quiet"] .sidebar:hover .nav-item > span:not(.ni-num), :root[data-nav="quiet"] .sidebar:hover .nav-item .ni-check, :root[data-nav="quiet"] .sidebar:hover .nav-item .ni-lock, :root[data-nav="quiet"] .sidebar:focus-within .brand-name, :root[data-nav="quiet"] .sidebar:focus-within .nav-group-title, :root[data-nav="quiet"] .sidebar:focus-within .nav-item > span:not(.ni-num), :root[data-nav="quiet"] .sidebar:focus-within .nav-item .ni-check, :root[data-nav="quiet"] .sidebar:focus-within .nav-item .ni-lock { opacity: 1; } :root[data-nav="quiet"] .sidebar .nav { overflow: hidden; } :root[data-nav="quiet"] .sidebar:hover .nav, :root[data-nav="quiet"] .sidebar:focus-within .nav { overflow-y: auto; } } /* ---------- performance: numbers first ---------- */ :root[data-template="performance"] .stat-num, :root[data-template="performance"] .comp-score, :root[data-template="performance"] .score-ring { font-variant-numeric: tabular-nums; letter-spacing: -1px; } :root[data-template="performance"] .comp .comp-score { font-size: 1.9rem; } :root[data-template="performance"] .page-title { letter-spacing: -.8px; } /* ---------- focus: a calmer reading page ---------- */ :root[data-template="focus"] .page-kicker { text-transform: none; letter-spacing: 0; font-weight: 600; } :root[data-template="focus"] p.para, :root[data-template="focus"] .bullets li { font-size: 1.02rem; } /* ---------- the preview bar ---------- */ .theme-preview-bar { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px clamp(12px, 4vw, 28px); background: var(--ink); color: var(--bg-elev); font-size: .9rem; } .theme-preview-bar .tpb-txt { flex: 1; min-width: 200px; } .theme-preview-bar form { display: inline; } /* ---------- the gallery on the branding page ---------- */ .tpl-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .tpl-card { border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg-elev); } .tpl-card.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--accent-soft); } .tpl-mock { height: 116px; padding: 12px; display: flex; gap: 8px; } .tpl-mock .m-side { width: 26%; border-radius: 6px; } .tpl-mock .m-main { flex: 1; display: flex; flex-direction: column; gap: 6px; } .tpl-mock .m-bar { height: 12px; border-radius: 4px; } .tpl-mock .m-card { flex: 1; border-radius: 8px; } .tpl-body { padding: 14px 16px; } .tpl-body h4 { margin: 0 0 4px; font-size: 1rem; } .tpl-body .tpl-best { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-mute); margin-bottom: 6px; } .tpl-body p { font-size: .85rem; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.6; } .tpl-actions { display: flex; gap: 8px; flex-wrap: wrap; } .tpl-swatches { display: flex; gap: 5px; margin-bottom: 8px; } .tpl-swatches i { width: 18px; height: 18px; border-radius: 5px; display: block; border: 1px solid rgba(0,0,0,.12); } .tpl-live { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); } /* =================================================================== LAYOUT VARIANTS — the part that makes a design a redesign. =================================================================== */ /* ---------- stepper: the steps run across the top, no rail at all ---------- */ .stepper-wrap { position: sticky; top: 0; z-index: 29; background: var(--bg-elev); border-bottom: 1px solid var(--line); } .stepper { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px clamp(10px, 3vw, 26px); } .stepper::-webkit-scrollbar { display: none; } .step { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 40px; padding: 6px 14px 6px 8px; border-radius: 999px; text-decoration: none; color: var(--ink-soft); font-size: .86rem; font-weight: 600; border: 1px solid transparent; max-width: 260px; } html[dir="rtl"] .step { padding: 6px 8px 6px 14px; } .step:hover { background: var(--bg-soft); color: var(--ink); } .step .step-n { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--bg-soft); font-size: .78rem; font-weight: 800; color: var(--ink-soft); } .step .step-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .step.active { background: var(--accent-soft); color: var(--brand-ink); border-color: var(--brand); } .step.active .step-n { background: var(--brand); color: var(--btn-ink); } .step.done .step-n { background: var(--ok); color: #fff; } .step.locked { opacity: .5; } .stepper-bar { height: 3px; background: var(--bg-soft); } .stepper-fill { height: 100%; background: var(--accent); transition: width .4s; } /* the sidebar becomes a drawer that only opens on demand */ .sidebar.drawer { position: fixed; inset-inline-start: 0; top: 0; height: 100vh; width: 300px; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-lg); z-index: 68; } html[dir="rtl"] .sidebar.drawer { transform: translateX(100%); } .sidebar.drawer.open { transform: translateX(0); } .sidebar.drawer .sidebar-close { display: inline-flex; } .app-wide .main-wrap { width: 100%; } .hamburger.always { display: inline-flex; } /* ---------- the right rail: an outline of the page you are reading ---------- */ .content.has-rail { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 34px; max-width: 1180px; } .content.has-rail .content-main { min-width: 0; } .page-rail { position: sticky; top: 82px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; } .rail-block { border-inline-start: 2px solid var(--line); padding-inline-start: 14px; } .rail-block h4 { font-size: .72rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 10px; } .rail-toc { list-style: none; margin: 0; padding: 0; } .rail-toc li { margin: 0 0 3px; } .rail-toc li.lvl-h3 { padding-inline-start: 12px; } .rail-toc a { display: block; padding: 5px 0; font-size: .84rem; line-height: 1.45; color: var(--ink-soft); text-decoration: none; } .rail-toc a:hover { color: var(--brand-ink); } .rail-toc a.current { color: var(--brand-ink); font-weight: 700; } @media (max-width: 1080px) { .content.has-rail { display: block; } .page-rail { display: none; } } /* ---------- focus: nothing on screen but the lesson ---------- */ :root[data-layout="focus"] .content { max-width: 760px; } :root[data-layout="focus"][data-density="spacious"] .content { max-width: 820px; } :root[data-layout="focus"] .topbar { background: none; border-bottom: none; backdrop-filter: none; } :root[data-layout="focus"] .navbar { border-bottom-color: transparent; } /* ---------- phone: four destinations along the bottom ---------- */ .bottomnav { display: none; } @media (max-width: 760px) { .bottomnav { position: fixed; inset-inline: 0; bottom: 0; z-index: 64; display: flex; background: var(--bg-elev); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0); } .bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 4px; color: var(--ink-mute); text-decoration: none; font-size: .68rem; font-weight: 600; } .bn-item .bn-ico { font-size: 1.15rem; line-height: 1; } .bn-item.on { color: var(--brand-ink); } .bn-item.on .bn-ico { transform: translateY(-1px); } /* keep the last of the page clear of the bar and the report button */ body { padding-bottom: 62px; } .report-btn { bottom: 70px; } .report-panel { bottom: 70px; } .stepper-wrap { position: static; } } @media print { .bottomnav { display: none; } }