/* ============================================================ ADNOC LEADERSHIP PROGRAMME — Acting Under Uncertainty Scrolling layout · brand-true · accessible Themes: LIGHT (default) and DARK via data-theme on . ============================================================ */ /* -------- Fonts -------- */ @font-face { font-family: 'ADNOC Sans'; src: url('../fonts/ADNOC Sans Light.ttf') format('truetype'); font-weight: 300; font-display: swap; } @font-face { font-family: 'ADNOC Sans'; src: url('../fonts/ADNOC Sans Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'ADNOC Sans'; src: url('../fonts/ADNOC Sans Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; } @font-face { font-family: 'ADNOC Sans'; src: url('../fonts/ADNOC Sans Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'ADNOC Sans'; src: url('../fonts/ADNOC Sans XBold.ttf') format('truetype'); font-weight: 800; font-display: swap; } /* ============================================================ BRAND TOKENS ============================================================ */ :root { --navy: #002E6D; --royal: #0047BA; --sky: #009ADE; --steel: #54565A; --slate: #A7A8A9; --skygray: #DBDCDB; --skygray-50: #EDEDED; --gold: #f0a500; --good: #15c08d; /* green for completed */ --bad: #e23744; --hl: #ffe45c; /* text highlight yellow */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 26px; --t-fast: 180ms; --t-med: 320ms; --t-slow: 520ms; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,.84,.34,1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --appbar-h: 64px; --progress-h: 5px; } /* LIGHT */ :root, :root[data-theme="light"] { --bg-0: #eef3fb; --bg-1: #ffffff; --bg-2: #f5f8ff; --ink: #0a1c3d; --ink-2: #1a2238; --ink-mute: #4a5876; --ink-faint: #6b7790; --line: rgba(10,28,61,0.10); --line-strong: rgba(10,28,61,0.18); --card-bg: rgba(255,255,255,0.85); --card-bg-solid: #ffffff; --shadow-1: 0 4px 14px rgba(0,46,109,0.08); --shadow-2: 0 20px 50px rgba(0,46,109,0.14); --shadow-3: 0 30px 80px rgba(0,46,109,0.22); --glow-sky: 0 0 0 1px rgba(0,154,222,0.35), 0 0 30px rgba(0,154,222,0.18); --appbar-bg: #ffffff; --appbar-border: rgba(10,28,61,0.10); --rail-bg: #ffffff; --step-bg: rgba(10,28,61,0.04); --step-bg-hover: rgba(10,28,61,0.08); --step-text: var(--ink-mute); --step-text-active: var(--navy); --kicker-color: var(--royal); --title-gradient: linear-gradient(180deg, #002E6D 0%, #0047BA 100%); --btn-bg: rgba(10,28,61,0.05); --btn-bg-hover: rgba(10,28,61,0.09); --btn-border: rgba(10,28,61,0.16); --memo-bg: linear-gradient(180deg, #faf3dd 0%, #efe3c1 100%); --memo-ink: #2b2118; --dashboard-bg: radial-gradient(circle at 50% 20%, rgba(0,154,222,0.10), transparent 65%), linear-gradient(180deg, #ffffff, #f1f6ff); --dcard-bg: #ffffff; --dcard-bg-hover: linear-gradient(180deg, #ffffff, #eef5ff); --whiteboard-bg: repeating-linear-gradient(0deg, rgba(10,28,61,0.04) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(10,28,61,0.04) 0 1px, transparent 1px 32px), linear-gradient(180deg, #ffffff, #f4f7ff); --feedback-bg: radial-gradient(circle at 30% 20%, rgba(0,154,222,0.12), transparent 65%), linear-gradient(160deg, #ffffff, #eef5ff); --cb-bg: rgba(10,28,61,0.04); --cb-bg-hover: rgba(10,28,61,0.08); --atmosphere: radial-gradient(900px 600px at 90% -10%, rgba(0,154,222,0.12), transparent 60%), radial-gradient(700px 500px at -10% 110%, rgba(0,71,186,0.10), transparent 60%), linear-gradient(180deg, #eef3fb 0%, #e5edf8 60%, #eef3fb 100%); --atmosphere-blob-1: rgba(0,71,186,0.20); --atmosphere-blob-2: rgba(0,154,222,0.20); --notes-bg: #fffaf0; } /* DARK */ :root[data-theme="dark"] { --bg-0: #061328; --bg-1: #0a1d3d; --bg-2: #11295a; --ink: #f4f7ff; --ink-2: #ffffff; --ink-mute: #b8c4dc; --ink-faint: #8693b3; --line: rgba(255,255,255,0.12); --line-strong: rgba(255,255,255,0.22); --card-bg: rgba(255,255,255,0.05); --card-bg-solid: #0a1d3d; --shadow-1: 0 8px 24px rgba(0,0,0,0.25); --shadow-2: 0 24px 60px rgba(0,0,0,0.45); --shadow-3: 0 36px 90px rgba(0,0,0,0.55); --glow-sky: 0 0 0 1px rgba(0,154,222,0.45), 0 0 40px rgba(0,154,222,0.25); --appbar-bg: #04101f; --appbar-border: rgba(255,255,255,0.10); --rail-bg: #04101f; --step-bg: rgba(255,255,255,0.04); --step-bg-hover: rgba(255,255,255,0.08); --step-text: var(--ink-mute); --step-text-active: #ffffff; --kicker-color: var(--sky); --title-gradient: linear-gradient(180deg, #ffffff 0%, #cfe4ff 100%); --btn-bg: rgba(255,255,255,0.06); --btn-bg-hover: rgba(255,255,255,0.12); --btn-border: rgba(255,255,255,0.22); --memo-bg: linear-gradient(180deg, #f3ead4 0%, #ece1c4 100%); --memo-ink: #2b2118; --dashboard-bg: radial-gradient(circle at 50% 30%, rgba(0,154,222,0.08), transparent 60%), linear-gradient(180deg, #0a1d3d, #04101f); --dcard-bg: rgba(255,255,255,0.04); --dcard-bg-hover: rgba(0,154,222,0.10); --whiteboard-bg: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 32px), linear-gradient(180deg, #0a1d3d, #04101f); --feedback-bg: radial-gradient(circle at 30% 20%, rgba(0,154,222,0.18), transparent 60%), linear-gradient(160deg, #061328, #0a1d3d); --cb-bg: rgba(255,255,255,0.04); --cb-bg-hover: rgba(255,255,255,0.09); --atmosphere: radial-gradient(1100px 700px at 90% -10%, rgba(0,154,222,0.20), transparent 60%), radial-gradient(800px 600px at -10% 110%, rgba(0,71,186,0.22), transparent 60%), linear-gradient(180deg, #04101f 0%, #061328 50%, #04101f 100%); --atmosphere-blob-1: var(--royal); --atmosphere-blob-2: var(--sky); --notes-bg: #1a2a48; } /* ============================================================ RESET + SCROLLING SHELL ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--appbar-h) + var(--progress-h) + 100px); } /* ============================================================ BRAND SCROLLBAR (ADNOC blues — applies to page + scrollable areas) ============================================================ */ /* Firefox */ html { scrollbar-width: thin; scrollbar-color: var(--royal) var(--bg-2); } :root[data-theme="dark"] { scrollbar-color: var(--sky) #04101f; } /* WebKit / Chromium */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--bg-2); border-left: 1px solid var(--line); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--royal), var(--sky)); border: 2px solid var(--bg-2); border-radius: 999px; background-clip: padding-box; min-height: 40px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); transition: background var(--t-fast) var(--ease); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #0055d5, #00b3ff); background-clip: padding-box; } ::-webkit-scrollbar-thumb:active { background: linear-gradient(180deg, var(--navy), var(--royal)); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: var(--bg-2); } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: #04101f; border-left-color: rgba(255,255,255,0.08); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { border-color: #04101f; } :root[data-theme="dark"] ::-webkit-scrollbar-corner { background: #04101f; } body { font-family: 'ADNOC Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-weight: 400; color: var(--ink); background: var(--bg-0); line-height: 1.55; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease); } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; } a { color: var(--royal); text-decoration: none; } :focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 4px; } .app { display: flex; flex-direction: column; min-height: 100vh; position: relative; } /* -------- Atmosphere -------- */ .atmosphere { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: var(--atmosphere); overflow: hidden; transition: background var(--t-med) var(--ease); } .atmosphere::before, .atmosphere::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .4; animation: float 22s ease-in-out infinite alternate; } .atmosphere::before { width: 460px; height: 460px; background: var(--atmosphere-blob-1); top: -100px; right: -80px; } .atmosphere::after { width: 420px; height: 420px; background: var(--atmosphere-blob-2); bottom: -120px; left: -80px; animation-duration: 26s; } @keyframes float { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(20px,-30px,0) scale(1.08); } } /* ============================================================ APP BAR + PROGRESS ============================================================ */ .appbar { position: sticky; top: 0; z-index: 50; height: var(--appbar-h); display: flex; align-items: center; gap: 12px; padding: 0 clamp(14px, 2.5vw, 24px); background: var(--appbar-bg); border-bottom: 1px solid var(--appbar-border); box-shadow: 0 1px 0 var(--appbar-border); } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .brand-logo { height: 40px !important; width: auto !important; max-height: 40px !important; max-width: 44px !important; min-width: 0 !important; display: block; object-fit: contain; flex: 0 0 auto; } /* Hide the text wordmark by default; the inline onerror handler on the promotes it to shown if the logo file is missing. */ .brand-wordmark { display: none; font-family: 'ADNOC Sans', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -0.02em; color: var(--royal); line-height: 1; padding: 2px 0; } .brand-wordmark.is-shown { display: inline-block; } :root[data-theme="dark"] .brand-wordmark { color: #ffffff; } .brand-divider { width: 1px; height: 28px; background: var(--line-strong); opacity: .8; } .brand-text .t1 { font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); line-height: 1.2; } .brand-text .t2 { font-weight: 400; font-size: 11px; color: var(--ink-mute); letter-spacing: .04em; line-height: 1.3; } .appbar-spacer { flex: 1; } /* Progress pill */ .progress-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(0,71,186,0.10), rgba(0,154,222,0.10)); border: 1px solid rgba(0,154,222,0.32); color: var(--ink); font-size: 12px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20); } .progress-pill .pp-step { color: var(--royal); letter-spacing: .04em; } .progress-pill .pp-divider { width: 4px; height: 4px; border-radius: 50%; background: var(--sky); opacity: .6; } .progress-pill .pp-pct { background: linear-gradient(135deg, var(--royal), var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; } :root[data-theme="dark"] .progress-pill .pp-step { color: var(--sky); } :root[data-theme="dark"] .progress-pill .pp-pct { color: #fff; -webkit-background-clip: initial; background-clip: initial; background: none; } .progress-pill.is-complete { background: linear-gradient(135deg, rgba(21,192,141,0.12), rgba(21,192,141,0.18)); border-color: rgba(21,192,141,0.45); } .progress-pill.is-complete .pp-step, .progress-pill.is-complete .pp-pct { color: var(--good); -webkit-background-clip: initial; background-clip: initial; background: none; } /* Icon buttons in appbar */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--ink); cursor: pointer; transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .icon-btn:hover { background: linear-gradient(135deg, rgba(0,71,186,0.12), rgba(0,154,222,0.12)); border-color: rgba(0,154,222,0.45); color: var(--royal); transform: translateY(-1px); } .icon-btn.is-active { background: linear-gradient(135deg, var(--royal), var(--sky)); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(0,71,186,0.30); } .icon-btn svg { width: 16px; height: 16px; } .icon-btn.theme-toggle { width: auto; min-width: 36px; padding: 0 8px; border-radius: 999px; } #restartTopBtn:hover svg { animation: spinOnce 600ms var(--ease-out); } @keyframes spinOnce { from { transform: rotate(0); } to { transform: rotate(-360deg); } } :root[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: inline-block; } /* Fullscreen icon swap */ #fullscreenBtn .ic-collapse { display: none; } .app.is-fullscreen #fullscreenBtn .ic-collapse { display: inline-block; } .app.is-fullscreen #fullscreenBtn .ic-expand { display: none; } /* Progress bar (two layers) */ .progress { position: sticky; top: var(--appbar-h); z-index: 49; height: var(--progress-h); background: var(--step-bg); border-bottom: 1px solid var(--appbar-border); overflow: hidden; } .p-done, .p-current { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 0 4px 4px 0; transition: width var(--t-slow) var(--ease-out); pointer-events: none; } .p-done { background: linear-gradient(90deg, #0fc796, #15c08d); box-shadow: 0 0 14px rgba(21,192,141,0.55); z-index: 2; } .p-current { background: linear-gradient(90deg, var(--royal), var(--sky), #00c2ff); background-size: 200% 100%; box-shadow: 0 0 14px rgba(0,154,222,0.55); animation: progShimmer 3s linear infinite; z-index: 1; } .p-current::after { content: ''; position: absolute; top: 0; bottom: 0; right: -2px; width: 14px; background: radial-gradient(circle, rgba(255,255,255,0.95), transparent 70%); filter: blur(2px); } @keyframes progShimmer { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } /* Brief flash when a slice converts blue → green */ .progress.is-completing .p-done { animation: doneFlash 700ms var(--ease-out); } @keyframes doneFlash { 0% { filter: brightness(1) saturate(1); box-shadow: 0 0 14px rgba(21,192,141,0.55); } 40% { filter: brightness(1.35) saturate(1.4); box-shadow: 0 0 28px rgba(21,192,141,0.95); } 100% { filter: brightness(1) saturate(1); box-shadow: 0 0 14px rgba(21,192,141,0.55); } } /* ============================================================ STEP RAIL — perfectly-aligned tick ============================================================ */ .steprail { position: sticky; top: calc(var(--appbar-h) + var(--progress-h)); z-index: 48; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 14px clamp(20px, 4vw, 44px) 12px; border-bottom: 1px solid var(--appbar-border); background: var(--rail-bg); box-shadow: 0 6px 14px rgba(0,46,109,0.06); } .steprail::before { content: ''; position: absolute; height: 2px; border-radius: 2px; top: calc(14px + 16px); /* padding-top + half of 32px dot */ transform: translateY(-1px); left: clamp(20px, 4vw, 44px); right: clamp(20px, 4vw, 44px); background: var(--line); z-index: 0; } .step { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 2px; background: transparent; border: none; color: var(--step-text); font-size: 11px; line-height: 1.2; text-align: center; cursor: pointer; transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .step:hover { color: var(--ink); transform: translateY(-2px); } .step .n { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-1); border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; line-height: 1; color: var(--ink-mute); box-shadow: 0 4px 10px rgba(0,46,109,0.10); transition: all var(--t-fast) var(--ease); position: relative; } /* Number + tick are absolutely centered children to avoid baseline shift */ .step .n .num, .step .n .tick { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .step .n .tick { display: none; } .step .n .tick svg { width: 16px; height: 16px; display: block; } .step .lbl { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-weight: 500; max-width: 12ch; } .step:hover .n { border-color: var(--sky); color: var(--sky); box-shadow: 0 0 0 4px rgba(0,154,222,0.10), 0 6px 14px rgba(0,154,222,0.20); } /* DONE: solid green, white tick, no number */ .step.is-done .n { background: linear-gradient(135deg, #0fc796, #15c08d); border-color: transparent; color: #fff; box-shadow: 0 6px 14px rgba(21,192,141,0.32); } .step.is-done .n .num { display: none; } .step.is-done .n .tick { display: flex; } /* ACTIVE: sky-ringed pulse */ .step.is-active { color: var(--royal); font-weight: 700; } .step.is-active .n { background: var(--bg-1); border-color: var(--sky); color: var(--royal); box-shadow: 0 0 0 5px rgba(0,154,222,0.18), 0 8px 18px rgba(0,71,186,0.22); transform: scale(1.14); animation: activePulse 2.4s ease-in-out infinite; } .step.is-active.is-done .n { background: linear-gradient(135deg, #0fc796, #15c08d); color: #fff; } @keyframes activePulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(0,154,222,0.18), 0 8px 18px rgba(0,71,186,0.22); } 50% { box-shadow: 0 0 0 9px rgba(0,154,222,0.10), 0 10px 22px rgba(0,154,222,0.30); } } /* JUST-COMPLETED bounce */ .step.just-completed .n { animation: justDone 700ms var(--ease-spring); } @keyframes justDone { 0% { transform: scale(1.14); } 40% { transform: scale(1.34); } 100% { transform: scale(1.14); } } @media (max-width: 720px) { .step .lbl { display: none; } .progress-pill .pp-step, .progress-pill .pp-divider { display: none; } } /* ============================================================ STAGE + SECTIONS (scrolling) ============================================================ */ .stage { padding: clamp(18px, 3vw, 32px) clamp(16px, 4vw, 48px) 80px; max-width: 1320px; margin: 0 auto; width: 100%; position: relative; } .section { display: none; animation: sectionIn var(--t-slow) var(--ease-out) both; position: relative; padding-top: 10px; scroll-margin-top: calc(var(--appbar-h) + var(--progress-h) + 100px); } .section.is-active { display: block; } @keyframes sectionIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Tool button — placed inside the simulation / job-aid card top-right */ .tool-btn { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.92); border: 1px solid var(--line); color: var(--royal); cursor: pointer; box-shadow: var(--shadow-1); transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .tool-btn:hover { transform: translateY(-1px); background: linear-gradient(135deg, var(--royal), var(--sky)); color: #fff; border-color: transparent; } .tool-btn svg { width: 16px; height: 16px; } .tool-btn.card-fs { position: absolute; top: 10px; right: 10px; z-index: 10; } .tool-btn.card-fs .ic-collapse { display: none; } .tool-btn.card-fs.is-fs .ic-expand { display: none; } .tool-btn.card-fs.is-fs .ic-collapse { display: inline-block; } /* Fullscreened card (Phase 1 / Phase 2 / Job aid) — fill the viewport */ .phase1-stage:fullscreen, .phase2-stage:fullscreen, .jobaid-shell:fullscreen { background: var(--bg-1); padding: 24px; display: block; } .phase1-stage:fullscreen { min-height: 100vh; } .phase2-stage:fullscreen { min-height: 100vh; } .jobaid-shell:fullscreen { overflow: auto; } .jobaid-shell:fullscreen .jobaid-preview { max-width: 980px; margin: 0 auto; } /* Section heading */ .section-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; padding-right: 50px; /* breathing room for the tool button */ margin-bottom: clamp(14px, 2vw, 20px); } .section-head > div:first-child { min-width: 0; flex: 1 1 320px; } .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--kicker-color); font-weight: 700; } .kicker::before { content: ''; width: 22px; height: 2px; background: var(--kicker-color); display: block; } h1.title { font-size: clamp(28px, 4vw, 44px); line-height: 1.2; margin: 6px 0; font-weight: 800; letter-spacing: -0.01em; padding-top: 4px; background: var(--title-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .subtitle { color: var(--ink-mute); max-width: 80ch; font-size: clamp(13px, 1.2vw, 15px); margin: 0; } /* Info callout used on Job Aid sections to explain the aid is a standalone reference */ .callout { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 10px 14px; max-width: 80ch; border-radius: var(--r-md); font-size: 13px; line-height: 1.55; } .callout svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; } .callout-info { background: linear-gradient(135deg, rgba(0,71,186,0.08), rgba(0,154,222,0.08)); border: 1px solid rgba(0,154,222,0.30); color: var(--ink); } .callout-info svg { color: var(--royal); } :root[data-theme="dark"] .callout-info svg { color: var(--sky); } /* ============================================================ FOCUS MODE ============================================================ */ :root.focus-mode .appbar, :root.focus-mode .steprail, :root.focus-mode .section-tools { display: none !important; } :root.focus-mode .progress { top: 0; } :root.focus-mode .stage { padding-top: 32px; } :root.focus-mode .fab { opacity: .35; } :root.focus-mode .fab:hover { opacity: 1; } /* Exit-focus pill — always visible while focus mode is on so learners know how to leave */ .focus-exit { position: fixed; top: 16px; right: 16px; z-index: 90; display: none; align-items: center; gap: 8px; padding: 8px 12px 8px 14px; background: linear-gradient(135deg, var(--royal), var(--sky)); color: #fff; border: none; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 12px 28px rgba(0,71,186,0.35), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), filter var(--t-fast) var(--ease); animation: focusExitIn 320ms var(--ease-spring) both; } .focus-exit:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 16px 34px rgba(0,71,186,0.45), inset 0 1px 0 rgba(255,255,255,0.3); } .focus-exit svg { width: 14px; height: 14px; } .focus-exit kbd { font-family: inherit; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,0.20); border: 1px solid rgba(255,255,255,0.30); margin-left: 2px; } :root.focus-mode .focus-exit { display: inline-flex; } @keyframes focusExitIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } } /* ============================================================ CARDS, BUTTONS ============================================================ */ .glass { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-lg); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: var(--shadow-1); } .card { padding: clamp(14px, 1.8vw, 20px); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--ink); cursor: pointer; font-weight: 600; font-size: 14px; transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .btn:not(.btn-primary):hover { background: var(--btn-bg-hover); } .btn:active { transform: translateY(1px); } .btn[disabled] { opacity: .45; cursor: not-allowed; } .btn .arrow { transition: transform var(--t-fast) var(--ease); } .btn:hover .arrow { transform: translateX(3px); } .btn-primary { background: linear-gradient(135deg, var(--royal), var(--sky)); color: #fff; border-color: transparent; box-shadow: 0 8px 22px rgba(0,71,186,0.30), inset 0 1px 0 rgba(255,255,255,0.25); } .btn-primary:hover { background: linear-gradient(135deg, #0055d5, #00b3ff); color: #fff; box-shadow: 0 14px 32px rgba(0,71,186,0.45), inset 0 1px 0 rgba(255,255,255,0.35); transform: translateY(-1px); } .btn-primary:active { background: linear-gradient(135deg, var(--navy), var(--royal)); transform: translateY(0); box-shadow: 0 6px 18px rgba(0,71,186,0.30); } .btn-ghost { background: transparent; } .footer-nav { position: sticky; bottom: 12px; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 14px; background: var(--card-bg-solid); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-2); } :root.focus-mode .footer-nav { position: static; box-shadow: none; background: transparent; border-color: transparent; padding: 0; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .hide { display: none !important; } /* ============================================================ WELCOME ============================================================ */ .welcome-hero { display: grid; gap: 22px; justify-items: center; text-align: center; padding: clamp(20px, 4vw, 48px) 0; } .welcome-hero .badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 999px; background: linear-gradient(135deg, rgba(0,71,186,0.12), rgba(0,154,222,0.12)); color: var(--royal); border: 1px solid rgba(0,154,222,0.35); font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 14px rgba(0,71,186,0.10); } .welcome-hero .badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 0 rgba(0,154,222,0.6); animation: ping 1.8s ease-out infinite; } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(0,154,222,0.6); } 100% { box-shadow: 0 0 0 12px rgba(0,154,222,0); } } .welcome-hero h1.title { font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -0.02em; max-width: 18ch; margin: 6px 0; } .welcome-hero .subtitle { font-size: clamp(14px, 1.35vw, 17px); max-width: 62ch; margin: 0; } .welcome-stats { width: 100%; max-width: 1000px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 760px) { .welcome-stats { grid-template-columns: 1fr; } } .welcome-stats .stat { position: relative; overflow: hidden; padding: 18px; border-radius: var(--r-md); background: var(--card-bg-solid); border: 1px solid var(--line); text-align: left; box-shadow: var(--shadow-1); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .welcome-stats .stat::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--royal), var(--sky)); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-med) var(--ease); } .welcome-stats .stat:hover { transform: translateY(-3px); border-color: rgba(0,154,222,0.30); box-shadow: var(--shadow-2); } .welcome-stats .stat:hover::after { transform: scaleX(1); } .welcome-stats .stat .ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--royal), var(--sky)); color: #fff; margin-bottom: 10px; box-shadow: 0 6px 14px rgba(0,71,186,0.30), inset 0 1px 0 rgba(255,255,255,0.25); } .welcome-stats .stat .ico svg { width: 20px; height: 20px; } .welcome-stats .stat .k { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; } .welcome-stats .stat .t { font-weight: 700; font-size: 15px; margin: 4px 0; color: var(--ink); } .welcome-stats .stat .d { font-size: 12px; color: var(--ink-mute); margin: 0; line-height: 1.5; } /* ============================================================ VIDEO PLACEHOLDER ============================================================ */ .video-wrap { display: flex; flex-direction: column; gap: 12px; } .video-ph { position: relative; aspect-ratio: 16/9; min-height: 300px; max-height: calc(100vh - 330px); border-radius: var(--r-lg); overflow: hidden; isolation: isolate; background: radial-gradient(circle at 30% 30%, rgba(0,154,222,0.18), transparent 60%), linear-gradient(135deg, var(--navy), #04101f); border: 1px solid var(--line); display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-2); } .video-ph::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); } .video-ph::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(0,0,0,0.25) 80%); } .video-ph .inner { position: relative; z-index: 1; text-align: center; padding: 22px; max-width: 720px; } .video-ph .play { width: 86px; height: 86px; border-radius: 50%; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.25); display: grid; place-items: center; margin: 0 auto 14px; box-shadow: var(--glow-sky); animation: pulse 2.6s ease-in-out infinite; cursor: pointer; } .video-ph .play svg { width: 36px; height: 36px; color: #fff; margin-left: 4px; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(0,154,222,0.45), 0 0 0 0 rgba(0,154,222,0.4); } 50% { box-shadow: 0 0 0 1px rgba(0,154,222,0.6), 0 0 0 16px rgba(0,154,222,0); } } .video-ph .tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(240,165,0,0.18); color: #ffd166; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; border: 1px solid rgba(240,165,0,0.35); } .video-ph h3 { margin: 0 0 4px; font-size: clamp(18px, 2vw, 26px); color: #fff; } .video-ph p { margin: 0; color: rgba(255,255,255,0.75); font-size: 13px; } .video-ph code { background: rgba(255,255,255,0.10); padding: 2px 6px; border-radius: 4px; font-size: 12px; } /* ============================================================ MUX-STYLE VIDEO PLAYER ============================================================ */ .video-ph.is-mux { background: #000; cursor: default; } .video-ph.is-mux::before, .video-ph.is-mux::after { display: none; } .video-ph.is-mux .muxp-video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; outline: none; } .muxp-overlay { position: absolute; inset: 0; z-index: 2; color: #fff; pointer-events: none; opacity: 0; transition: opacity 260ms var(--ease); font-family: 'ADNOC Sans', system-ui, sans-serif; } .muxp-overlay.is-visible { opacity: 1; } .muxp-overlay > * { pointer-events: auto; } /* Center play button — hides once playing */ .muxp-center-play { position: absolute; left: 50%; top: 50%; width: 82px; height: 82px; margin: -41px 0 0 -41px; border-radius: 50%; border: none; cursor: pointer; background: rgba(0,0,0,0.55); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.14); transition: transform 200ms var(--ease-spring), background 200ms var(--ease), opacity 200ms var(--ease); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .muxp-center-play svg { width: 34px; height: 34px; margin-left: 4px; } .muxp-center-play:hover { transform: scale(1.06); background: rgba(0,71,186,0.75); } .muxp-overlay.is-playing .muxp-center-play, .muxp-overlay.is-ended .muxp-center-play { opacity: 0; pointer-events: none; transform: scale(.9); } /* Once the video has ended, keep the last frame visible — no black overlay. The bottom bar stays available so learners can replay via the play/pause button. */ .muxp-overlay.is-ended.is-visible { background: transparent; } /* Top-right buttons */ .muxp-top { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; } /* Bottom bar */ .muxp-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 14px 10px; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent); } .muxp-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .muxp-spacer { flex: 1; } /* Shared icon-button */ .muxp-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.14); color: #fff; border-radius: 8px; cursor: pointer; transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .muxp-btn:hover { background: rgba(0,71,186,0.55); border-color: rgba(0,154,222,0.55); transform: translateY(-1px); } .muxp-btn svg { width: 18px; height: 18px; } .muxp-play-pause .ic-pause { display: none; } .muxp-overlay.is-playing .muxp-play-pause .ic-play { display: none; } .muxp-overlay.is-playing .muxp-play-pause .ic-pause { display: block; } .muxp-mute .ic-mute { display: none; } .muxp-overlay.is-muted .muxp-mute .ic-vol { display: none; } .muxp-overlay.is-muted .muxp-mute .ic-mute { display: block; } .muxp-fs .ic-exit { display: none; } .video-ph.is-fs .muxp-fs .ic-enter { display: none; } .video-ph.is-fs .muxp-fs .ic-exit { display: block; } /* Time */ .muxp-time { color: rgba(255,255,255,0.9); font-size: 12px; font-variant-numeric: tabular-nums; padding: 0 6px; min-width: 92px; } .muxp-slash { opacity: .6; margin: 0 4px; } /* Scrub bar — ADNOC gradient */ .muxp-scrub { height: 22px; padding: 8px 0; cursor: pointer; position: relative; } .muxp-scrub-track { position: relative; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.18); overflow: visible; transition: height 160ms var(--ease); } .muxp-scrub:hover .muxp-scrub-track { height: 6px; } .muxp-buffered { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: rgba(255,255,255,0.28); border-radius: 999px; } .muxp-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, var(--royal), var(--sky)); border-radius: 999px; box-shadow: 0 0 10px rgba(0,154,222,0.55); } .muxp-thumb { position: absolute; top: 50%; left: 0%; width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%) scale(0); transition: transform 160ms var(--ease); box-shadow: 0 0 0 3px rgba(0,154,222,0.35); } .muxp-scrub:hover .muxp-thumb { transform: translate(-50%, -50%) scale(1); } /* Speed menu */ .muxp-menu { position: relative; } .muxp-speed-btn { min-width: 42px; padding: 0 8px; font-size: 12px; font-weight: 700; } .muxp-menu-list { position: absolute; bottom: calc(100% + 8px); right: 0; min-width: 150px; padding: 4px; background: rgba(15,20,30,0.96); border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); display: none; z-index: 5; } .muxp-menu.is-open .muxp-menu-list { display: block; } .muxp-menu-list button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; background: transparent; border: none; color: rgba(255,255,255,0.85); font-size: 12px; cursor: pointer; } .muxp-menu-list button:hover { background: rgba(255,255,255,0.08); color: #fff; } .muxp-menu-list button.is-active { color: var(--sky); } .muxp-menu-list button.is-active::before { content: '✓ '; margin-right: 2px; } /* Fullscreen container */ .video-ph.is-fs { border-radius: 0; max-height: none; min-height: 100vh; } .video-ph.is-fs .muxp-video { object-fit: contain; } /* ========================================================== PAUSE STICKY NOTE — appears when learner pauses the video ========================================================== */ .muxp-sticky { position: absolute; top: 68px; right: 20px; width: min(260px, 46%); max-height: calc(100% - 130px); background: #ffe78a; color: #2b2118; padding: 12px 12px 8px; border-radius: 3px; box-shadow: 0 22px 40px rgba(0,0,0,0.5), inset 0 -2px 0 rgba(0,0,0,0.06); transform: rotate(-1.6deg); z-index: 4; display: flex; flex-direction: column; animation: mvsIn 320ms var(--ease-spring) both; } @keyframes mvsIn { from { opacity: 0; transform: rotate(-1.6deg) translateY(-14px) scale(.95); } to { opacity: 1; transform: rotate(-1.6deg) translateY(0) scale(1); } } .mvs-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .mvs-badge { padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,0.10); color: #2b2118; font-size: 11px; font-weight: 800; letter-spacing: .12em; font-variant-numeric: tabular-nums; } .mvs-close { width: 22px; height: 22px; padding: 0; background: transparent; border: none; color: #2b2118; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; opacity: .7; transition: background 160ms var(--ease), opacity 160ms var(--ease); } .mvs-close svg { width: 12px; height: 12px; } .mvs-close:hover { background: rgba(0,0,0,0.10); opacity: 1; } .mvs-text { flex: 1; background: transparent; border: none; outline: none; resize: none; color: #2b2118; font-family: inherit; font-size: 13px; line-height: 1.55; padding: 4px 2px; min-height: 96px; } .mvs-text::placeholder { color: rgba(43,33,24,0.5); font-style: italic; } .mvs-foot { display: flex; justify-content: flex-end; padding-top: 4px; } .mvs-saved { font-size: 10px; letter-spacing: .1em; color: rgba(43,33,24,0.55); font-weight: 700; text-transform: uppercase; transition: color 200ms var(--ease); } .muxp-sticky.is-flash { animation: mvsFlash 260ms var(--ease-spring); } .muxp-sticky.is-flash .mvs-saved { color: #0e6d3f; } @keyframes mvsFlash { 0% { box-shadow: 0 22px 40px rgba(0,0,0,0.5), inset 0 -2px 0 rgba(0,0,0,0.06); } 55% { box-shadow: 0 22px 40px rgba(0,0,0,0.5), 0 0 0 3px rgba(21,192,141,0.7); } 100% { box-shadow: 0 22px 40px rgba(0,0,0,0.5), inset 0 -2px 0 rgba(0,0,0,0.06); } } /* ========================================================== BOARD BUTTON + PANEL ========================================================== */ .video-wrap { position: relative; } .board-btn { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; background: var(--card-bg-solid); border: 1px solid var(--line); color: var(--royal); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-2); z-index: 3; transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .board-btn:hover { transform: translateY(-1px) scale(1.04); background: linear-gradient(135deg, var(--royal), var(--sky)); color: #fff; border-color: transparent; } .board-btn svg { width: 18px; height: 18px; } .board-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: #4a2c00; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(240,165,0,0.45); border: 2px solid var(--card-bg-solid); } .board-count.is-empty, .board-count[hidden] { display: none; } /* Board panel (side drawer) */ .board-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--card-bg-solid); border-left: 1px solid var(--line); box-shadow: -24px 0 60px rgba(0,46,109,0.25); z-index: 75; display: flex; flex-direction: column; transform: translateX(105%); transition: transform var(--t-med) var(--ease-out); } .board-panel.is-open { transform: none; } .bp-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); } .bp-head .bp-actions { display: flex; gap: 6px; align-items: center; } .bp-kicker { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; } .bp-title { margin: 4px 0 0; font-size: 16px; color: var(--ink); } .bp-search { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px; } .bp-search svg { width: 16px; height: 16px; color: var(--ink-mute); flex-shrink: 0; } .bp-search input { flex: 1; padding: 8px 12px; border-radius: 999px; background: var(--step-bg); border: 1px solid var(--line); color: var(--ink); outline: none; font-family: inherit; font-size: 13px; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .bp-search input:focus { border-color: var(--sky); background: var(--bg-1); } .bp-list { flex: 1 1 auto; overflow: auto; padding: 4px 12px 16px; } .bp-group { margin-top: 12px; } .bp-group-head { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; padding: 4px 4px 6px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .bp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--step-bg); color: var(--ink-mute); border-radius: 999px; font-size: 10px; letter-spacing: 0; } .bp-note { display: block; width: 100%; padding: 10px 12px 12px; margin: 4px 0; background: #ffe78a; color: #2b2118; border: 1px solid transparent; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,46,109,0.10); text-align: left; cursor: pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .bp-note:nth-child(2n) { background: #c8f0a4; } .bp-note:nth-child(3n) { background: #b8e0ff; } .bp-note:hover { transform: translateY(-2px); box-shadow: 0 10px 18px rgba(0,46,109,0.20); } .bp-time { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,0.10); font-size: 10px; font-weight: 800; letter-spacing: .1em; font-variant-numeric: tabular-nums; margin-bottom: 4px; color: #2b2118; } .bp-text { display: block; font-size: 13px; line-height: 1.55; color: #2b2118; white-space: pre-wrap; } .bp-empty { text-align: center; padding: 40px 20px; color: var(--ink-mute); } .bp-empty svg { color: var(--ink-faint); margin-bottom: 10px; } .bp-empty p { margin: 4px 0; font-size: 13px; } .bp-empty .hint { color: var(--ink-faint); font-size: 12px; } @media (max-width: 720px) { .muxp-time { min-width: auto; font-size: 11px; } .muxp-slash, .muxp-dur { display: inline; } .muxp-btn { width: 30px; height: 30px; } .muxp-btn svg { width: 16px; height: 16px; } } /* ============================================================ PHASE 1 ============================================================ */ .phase1-stage { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-2); min-height: 520px; } .desk-view { position: absolute; inset: 0; background: radial-gradient(700px 400px at 50% 15%, rgba(240,165,0,0.18), transparent 60%), linear-gradient(180deg, #1c1208 0%, #15100a 60%, #0c0805 100%); display: grid; place-items: center; color: #fff; transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } /* 3D dossier canvas — fills the desk when Three.js is active */ .phase1-3d-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; cursor: pointer; z-index: 2; } .desk-view.is-3d .dossier, .desk-view.is-3d .click-hint { display: none; } .desk-view.is-hidden { opacity: 0; transform: scale(.96); pointer-events: none; } .desk-view::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.65), transparent 60%), repeating-linear-gradient(95deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 8px); } .desk-lamp { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 480px; height: 280px; pointer-events: none; background: radial-gradient(ellipse at center top, rgba(255,220,140,0.32), transparent 60%); filter: blur(8px); } .dossier { position: relative; width: min(360px, 60vh, 60vw); aspect-ratio: 3/4; background: linear-gradient(160deg, #c2956a, #8a5d34 50%, #6b4423); border-radius: 6px; box-shadow: 0 28px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -10px 30px rgba(0,0,0,0.4); display: grid; place-items: center; cursor: pointer; transform-origin: left center; transition: transform 320ms var(--ease); animation: dossierFloat 4s ease-in-out infinite alternate; } @keyframes dossierFloat { 0% { transform: translateY(0) rotate(-0.4deg); } 100% { transform: translateY(-6px) rotate(0.4deg); } } .dossier:hover { transform: translateY(-10px) rotate(-1deg); } .dossier::before { content: ''; position: absolute; left: 16px; right: 16px; top: 16px; bottom: 16px; border: 1.5px solid rgba(0,0,0,0.3); border-radius: 4px; } /* Book-opening animation on click — plays before the folder spread reveals */ .dossier.is-opening { animation: dossierOpen 640ms var(--ease-out) forwards; pointer-events: none; box-shadow: 0 40px 80px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -10px 30px rgba(0,0,0,0.4); } @keyframes dossierOpen { 0% { transform: translateY(0) rotate(-0.4deg) rotateY(0deg) scale(1); } 30% { transform: translateY(-14px) rotate(-2deg) rotateY(-5deg) scale(1.04); } 70% { transform: translateY(-8px) rotate(-1deg) rotateY(-70deg) scale(1.06); opacity: 1; } 100% { transform: translateY(0) rotate(0deg) rotateY(-110deg) scale(1.10); opacity: 0; } } .dossier-label { position: relative; text-align: center; padding: 16px; } .dossier-label .logo { font-weight: 800; letter-spacing: .3em; font-size: 22px; color: #1a1108; margin-bottom: 18px; } .dossier-stamp { display: inline-block; padding: 9px 16px; border: 3px solid #b00020; color: #b00020; font-weight: 800; font-size: 12px; letter-spacing: .18em; transform: rotate(-6deg); background: rgba(255,255,255,0.05); } .click-hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: rgba(240,165,0,0.9); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; animation: bobUp 1.6s ease-in-out infinite alternate; } @keyframes bobUp { from { transform: translateY(0); opacity: .7; } to { transform: translateY(-4px); opacity: 1; } } .folder-spread { position: absolute; inset: 0; display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--bg-1); opacity: 0; transform: perspective(1200px) rotateY(-20deg) scale(.96); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); } .folder-spread.is-open { display: grid; opacity: 1; transform: none; } .page { position: relative; min-width: 0; min-height: 0; padding: clamp(16px, 2.2vw, 26px); overflow: hidden; display: flex; flex-direction: column; } .page.memo { background: var(--memo-bg); color: var(--memo-ink); font-family: 'Courier New', Courier, monospace; border-right: 2px solid rgba(0,0,0,0.15); } .page.memo::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 50px; background: repeating-linear-gradient(0deg, transparent 0 28px, rgba(0,0,0,0.08) 28px 29px); } .memo-header { border-bottom: 2px solid #2b2118; padding-bottom: 8px; margin-bottom: 14px; } .memo-header .from { font-weight: 700; letter-spacing: .2em; font-size: 11px; } .memo-header h2 { margin: 4px 0 0; font-size: 18px; } .memo-body p { font-size: 13px; line-height: 1.7; margin: 0 0 10px; } .memo-stamp { margin-top: auto; align-self: flex-start; padding: 6px 12px; border: 2.5px solid #b00020; color: #b00020; transform: rotate(-3deg); font-weight: 700; font-size: 11px; letter-spacing: .12em; } .page.dashboard { background: var(--dashboard-bg); color: var(--ink); gap: 10px; } .page.dashboard h3 { margin: 0; font-size: 15px; letter-spacing: .04em; } .page.dashboard .hint { color: var(--ink-mute); font-size: 12px; margin: 0; } .page.dashboard .watermark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: .05; font-weight: 800; font-size: 80px; letter-spacing: .2em; color: var(--navy); } .decision-cards { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; opacity: 0; transform: translateY(6px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); } .decision-cards.is-revealed { opacity: 1; transform: none; } .dcard { position: relative; padding: 12px 14px; border-radius: var(--r-md); cursor: pointer; background: var(--dcard-bg); border: 1px solid var(--line); transition: transform var(--t-med) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease); overflow: hidden; display: flex; flex-direction: column; gap: 4px; } .dcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, var(--sky)); border-radius: var(--r-md) 0 0 var(--r-md); } .dcard[data-key="A"] { --accent: #e23744; } .dcard[data-key="B"] { --accent: #15c08d; } .dcard[data-key="C"] { --accent: #0047BA; } .dcard[data-key="D"] { --accent: #f0a500; } .dcard:hover { transform: translateY(-2px); border-color: rgba(0,154,222,0.5); box-shadow: var(--glow-sky); } .dcard .ribbon { display: inline-block; padding: 2px 8px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; width: max-content; } .dcard h4 { margin: 8px 0 4px; font-size: 15px; line-height: 1.3; color: var(--ink); font-weight: 700; } /* Hide body copy until the learner clicks — cards start as titles only */ .dcard p { display: none; margin: 0; color: var(--ink-mute); font-size: 13.5px; line-height: 1.55; } /* When any card is opened, hide the others and float the open card to fill the container */ .decision-cards.has-open .dcard:not(.is-open) { visibility: hidden; } .decision-cards.has-open .dcard.is-open { position: absolute; inset: 0; z-index: 3; } .dcard.is-open { z-index: 2; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-2); animation: cardExpand 380ms var(--ease-out) both; } @keyframes cardExpand { from { transform: scale(.98); opacity: .8; } to { transform: none; opacity: 1; } } .dcard.is-open p { display: block; overflow: visible; font-size: 13.5px; line-height: 1.6; animation: bodyIn 320ms var(--ease-out) both; } @keyframes bodyIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .dcard .pitch { display: none; margin-top: auto; align-self: flex-start; } .dcard.is-open .pitch { display: inline-flex; animation: bodyIn 320ms var(--ease-out) 80ms both; } .feedback-panel { position: absolute; inset: 0; display: none; background: var(--feedback-bg); padding: clamp(20px, 3vw, 36px); flex-direction: column; gap: 14px; justify-content: center; text-align: center; align-items: center; opacity: 0; transform: scale(.97); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); } .feedback-panel.is-open { display: flex; opacity: 1; transform: none; } .feedback-panel .icon-orb { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 18px 40px rgba(0,71,186,0.30); animation: orbIn 600ms var(--ease-spring) both; margin-bottom: 6px; } .feedback-panel .verdict { margin-top: 2px; } .feedback-panel .icon-orb svg { width: 40px; height: 40px; } @keyframes orbIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .feedback-panel .verdict { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(240,165,0,0.18); color: var(--gold); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: 11px; } .feedback-panel h2 { font-size: clamp(22px, 2.8vw, 32px); margin: 0; background: var(--title-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; max-width: 22ch; } .feedback-panel .lede { color: var(--ink-mute); font-size: 15px; max-width: 56ch; margin: 0; } .feedback-panel .footnote { color: var(--ink-faint); font-size: 12px; margin: 0; letter-spacing: .14em; text-transform: uppercase; } /* ============================================================ PHASE 2 ============================================================ */ .phase2-stage { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--card-bg); border: 1px solid var(--line); box-shadow: var(--shadow-2); min-height: 560px; } .timejump { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,71,186,0.55), transparent 70%), linear-gradient(180deg, #04101f 0%, #061a36 50%, #020713 100%); color: #fff; overflow: hidden; } .timejump::before, .timejump::after { content: ''; position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; } .timejump::before { width: 560px; height: 560px; background: rgba(0,71,186,0.55); top: -140px; right: -120px; } .timejump::after { width: 500px; height: 500px; background: rgba(0,154,222,0.55); bottom: -140px; left: -120px; } .timejump .tj-inner { position: relative; z-index: 1; text-align: center; padding: 24px; } .timejump .kicker-line { font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,0.7); font-weight: 700; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 10px; } .timejump .kicker-line::before { content: ''; width: 24px; height: 2px; background: var(--sky); display: inline-block; } .timejump .date { font-weight: 800; font-size: clamp(64px, 14vw, 160px); line-height: 1; letter-spacing: .03em; background: linear-gradient(180deg, #ffffff 0%, #9fd9ff 60%, #4ab8ee 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 80px rgba(0,154,222,0.4); display: block; min-width: 6ch; } .timejump .sub { color: rgba(255,255,255,0.75); margin-top: 12px; letter-spacing: .3em; text-transform: uppercase; font-size: 11px; } .timejump .tj-brief { max-width: 640px; margin: 22px auto 0; opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); } .timejump .tj-brief.is-open { opacity: 1; transform: none; } .timejump .tj-brief p { color: rgba(255,255,255,0.85); font-size: 15px; line-height: 1.65; margin: 0 0 8px; } .timejump .tj-brief strong { color: #fff; } .timejump .tj-cta { margin-top: 20px; opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); } .timejump .tj-cta.is-open { opacity: 1; transform: none; } .meeting { position: absolute; inset: 0; display: grid; grid-template-columns: 240px 1fr; background: linear-gradient(180deg, #1b1f29, #0e1117); color: #fff; opacity: 0; transform: translateY(10px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); } .meeting.is-open { opacity: 1; transform: none; } @media (max-width: 760px) { .meeting { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } } .meeting-side { padding: 14px; border-right: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 10px; overflow: hidden; } .meeting-side .ms-head { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,0.7); font-weight: 700; } .meeting-side .ms-head .live { width: 6px; height: 6px; border-radius: 50%; background: #ff4f4f; box-shadow: 0 0 8px #ff4f4f; animation: pulseDot 1.4s ease-in-out infinite; } @keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .participant { display: grid; grid-template-columns: 36px 1fr; gap: 8px; align-items: center; padding: 8px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--royal), var(--sky)); display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 12px; position: relative; } .avatar::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: #2dd47a; border: 2px solid #0e1117; } .participant .name { font-weight: 600; font-size: 12px; color: #fff; } .participant .role { color: rgba(255,255,255,0.6); font-size: 10px; } .participant .typing { display: inline-flex; gap: 3px; padding-top: 3px; } .participant .typing i { width: 4px; height: 4px; background: var(--sky); border-radius: 50%; animation: typing 1.2s ease-in-out infinite; } .participant .typing i:nth-child(2) { animation-delay: .15s; } .participant .typing i:nth-child(3) { animation-delay: .3s; } @keyframes typing { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } /* Typing indicators are hidden until told to appear */ .participant .typing { visibility: hidden; } .participant .typing.is-typing { visibility: visible; } /* Facilitator message log — multiple bubbles stack, newest fades in */ .facilitator-log { margin-top: auto; display: flex; flex-direction: column; gap: 8px; } .facilitator-bubble { padding: 10px 12px; border-radius: 12px; background: rgba(0,71,186,0.20); border: 1px solid rgba(0,154,222,0.35); font-size: 12px; line-height: 1.5; color: #e8f4ff; opacity: 1; transform: none; transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); } .facilitator-bubble.is-new { opacity: 0; transform: translateY(6px); } /* Meeting action row (Lock your votes) */ .meeting-actions { display: flex; justify-content: center; padding-top: 8px; } .meeting-actions .btn[disabled] { opacity: .55; } .meeting-board { position: relative; min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--whiteboard-bg); } .board-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); } .board-head .title { font-weight: 700; font-size: 14px; margin: 0; color: var(--ink); } .board-head .sub { font-size: 11px; color: var(--ink-mute); margin: 0; } .board-head .badge-count { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(0,154,222,0.10); color: var(--sky); border: 1px solid rgba(0,154,222,0.30); font-size: 11px; font-weight: 700; } .stickies { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; } .sticky { position: relative; padding: 10px 12px 14px; border-radius: 3px; font-size: 12px; line-height: 1.4; color: #2b2118; background: #ffe78a; box-shadow: 0 8px 16px rgba(0,46,109,0.18), inset 0 -2px 0 rgba(0,0,0,0.06); transform: rotate(var(--rot, -1deg)); cursor: pointer; display: flex; flex-direction: column; gap: 4px; overflow: hidden; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), filter var(--t-med) var(--ease); animation: stickyDrop 500ms var(--ease-spring) both; } .sticky:nth-child(1) { background: #ffe78a; --rot: -1.2deg; } .sticky:nth-child(2) { background: #c8f0a4; --rot: 1.5deg; } .sticky:nth-child(3) { background: #ffc4a4; --rot: -1.8deg; } .sticky:nth-child(4) { background: #b8e0ff; --rot: 1deg; } .sticky:nth-child(5) { background: #ffd1e0; --rot: -1deg; } .sticky:nth-child(6) { background: #d9c4ff; --rot: 1.4deg; } .sticky:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 14px 22px rgba(0,46,109,0.28); } .sticky.is-selected { outline: 3px solid var(--sky); outline-offset: 3px; filter: brightness(1.05); } .sticky.is-fading { opacity: 0; transform: scale(.9); transition: all 400ms var(--ease); pointer-events: none; } .sticky .text { font-weight: 500; } .sticky .vote { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 10px; font-weight: 700; color: #2b2118; background: rgba(255,255,255,0.65); padding: 2px 8px; border-radius: 999px; } .sticky .check { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--sky); color: #fff; display: none; align-items: center; justify-content: center; font-size: 12px; box-shadow: 0 4px 12px rgba(0,154,222,0.5); } .sticky.is-selected .check { display: grid; place-items: center; } @keyframes stickyDrop { from { opacity: 0; transform: translateY(-12px) rotate(0); } to { opacity: 1; transform: rotate(var(--rot, -1deg)); } } /* Risk mitigation rules panel (neutral — no correct/trap indicators, no Priority X) */ .rules-panel { position: absolute; inset: 0; background: var(--feedback-bg); padding: clamp(20px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 14px; animation: reportFadeIn 320ms var(--ease-out) both; } .rules-panel .rp-head { text-align: center; } .rules-panel .rp-head .kicker-line { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--sky); font-weight: 700; } .rules-panel .rp-head .kicker-line::before { content: ''; width: 24px; height: 2px; background: var(--sky); display: inline-block; } .rules-panel .rp-title { margin: 6px 0 4px; font-size: clamp(20px, 2.4vw, 26px); color: var(--ink); } .rules-panel .rp-sub { color: var(--ink-mute); font-size: 13px; margin: 0; } .rules-band { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 760px) { .rules-band { grid-template-columns: 1fr; } } .rule { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 16px; border-radius: var(--r-md); background: var(--card-bg-solid); border: 1px solid var(--line); box-shadow: var(--shadow-1); animation: reportFadeIn 380ms var(--ease-out) both; } .rule:nth-child(2) { animation-delay: 100ms; } .rule .vuln { font-weight: 700; font-size: 14px; color: var(--ink); margin: 0; line-height: 1.45; } .rule .cb-label { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); margin-top: 2px; } .rule .cb-choices { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: auto; } .rule .cb-choice { padding: 12px 14px; border-radius: 10px; background: var(--cb-bg); border: 1px solid var(--line); cursor: pointer; color: var(--ink); transition: all var(--t-fast) var(--ease); text-align: left; font-size: 13px; line-height: 1.55; position: relative; } .rule .cb-choice:hover { background: var(--cb-bg-hover); border-color: var(--line-strong); } .rule .cb-choice.is-selected { background: rgba(0,154,222,0.10); border-color: var(--sky); box-shadow: 0 0 0 1px var(--sky) inset; } .rule .cb-choice.is-selected::after { content: ''; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--sky); background-image: linear-gradient(45deg, transparent 0 44%, #fff 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 0 44%, #fff 44% 56%, transparent 56%); box-shadow: 0 4px 10px rgba(0,154,222,0.35); } .rule .cb-choice.is-selected { padding-right: 40px; } .rules-actions { display: flex; justify-content: center; padding-top: 4px; } .rules-actions .btn[disabled] { opacity: .55; } /* Reflective feedback (no score, no correct/wrong) */ .phase2-feedback { position: absolute; inset: 0; display: none; background: var(--feedback-bg); padding: clamp(20px, 3vw, 36px); flex-direction: column; gap: 12px; justify-content: center; align-items: center; text-align: center; opacity: 0; transform: scale(.97); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); overflow: auto; } .phase2-feedback.is-open { display: flex; opacity: 1; transform: none; } .phase2-feedback .pf-crest { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, var(--royal), var(--sky)); display: grid; place-items: center; color: #fff; box-shadow: 0 14px 30px rgba(0,71,186,0.30), inset 0 1px 0 rgba(255,255,255,0.25); animation: orbIn 500ms var(--ease-spring) both; } .phase2-feedback .pf-crest svg { width: 32px; height: 32px; } .phase2-feedback .verdict { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(0,154,222,0.12); color: var(--royal); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: 11px; } :root[data-theme="dark"] .phase2-feedback .verdict { color: var(--sky); background: rgba(0,154,222,0.20); } .phase2-feedback h2 { margin: 0; font-size: clamp(22px, 2.8vw, 32px); background: var(--title-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; max-width: 22ch; } .phase2-feedback .lede { color: var(--ink-mute); font-size: 15px; max-width: 60ch; margin: 0; line-height: 1.65; } .phase2-feedback .pf-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 780px; margin-top: 10px; text-align: left; } @media (max-width: 760px) { .phase2-feedback .pf-picks { grid-template-columns: 1fr; } } .phase2-feedback .pf-col { padding: 14px 16px; border-radius: var(--r-md); background: var(--card-bg-solid); border: 1px solid var(--line); box-shadow: var(--shadow-1); } .phase2-feedback .pf-col-head { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; margin-bottom: 6px; } .phase2-feedback .pf-col ul { margin: 0; padding-left: 18px; color: var(--ink); font-size: 13px; line-height: 1.55; } .phase2-feedback .pf-col li { margin: 4px 0; } /* Simulation action row (Retry / etc.) */ .sim-actions { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 6px; } .sim-actions .btn { background: rgba(10,28,61,0.06); border-color: rgba(10,28,61,0.18); color: var(--ink); } .sim-actions .btn:hover { background: rgba(10,28,61,0.10); transform: translateY(-1px); } :root[data-theme="dark"] .sim-actions .btn { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); color: #fff; } /* Attempt delta report */ .attempt-report { width: 100%; max-width: 560px; margin-top: 10px; background: var(--card-bg-solid); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; text-align: left; flex-shrink: 0; /* never let the flex parent squish it */ animation: reportFadeIn 420ms var(--ease-out) both; } @keyframes reportFadeIn { from { opacity: 0; } to { opacity: 1; } } .ar-head { padding: 10px 14px; background: linear-gradient(135deg, rgba(0,71,186,0.08), rgba(0,154,222,0.08)); border-bottom: 1px solid var(--line); } .ar-kicker { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; } .ar-title { font-weight: 700; color: var(--ink); font-size: 14px; margin-top: 2px; } .ar-table { width: 100%; border-collapse: collapse; font-size: 12px; } .ar-table th, .ar-table td { padding: 8px 12px; text-align: left; } .ar-table thead th { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; background: rgba(10,28,61,0.03); border-bottom: 1px solid var(--line); } :root[data-theme="dark"] .ar-table thead th { background: rgba(255,255,255,0.04); } .ar-table tbody th { color: var(--ink-mute); font-weight: 600; width: 28%; } .ar-table tbody td { color: var(--ink); border-top: 1px solid var(--line); } .ar-table tbody tr:first-child td { border-top: none; } .ar-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .ar-same { background: rgba(10,28,61,0.08); color: var(--ink-mute); } .ar-up { background: rgba(21,192,141,0.18); color: var(--good); } .ar-down { background: rgba(226,55,68,0.15); color: var(--bad); } .ar-diff { background: rgba(0,154,222,0.15); color: var(--sky); } :root[data-theme="dark"] .ar-same { background: rgba(255,255,255,0.08); } /* ============================================================ JOB AID ============================================================ */ .jobaid-shell { display: grid; grid-template-columns: 1fr; gap: 12px; } .jobaid-preview { background: #fff; color: #1a2238; border-radius: var(--r-md); padding: clamp(18px, 2.5vw, 28px); box-shadow: var(--shadow-2); max-width: 920px; width: 100%; margin: 0 auto; font-size: 13px; line-height: 1.55; } .jobaid-preview h2 { color: var(--navy); margin: 0 0 4px; font-size: 22px; } .jobaid-preview .sub { color: var(--steel); margin-bottom: 12px; font-size: 12px; } .jobaid-preview h3 { color: var(--royal); margin: 14px 0 6px; font-size: 14px; border-bottom: 1.5px solid var(--skygray-50); padding-bottom: 4px; } .jobaid-preview p { margin: 6px 0; } .jobaid-preview ul { padding-left: 18px; margin: 6px 0; } .jobaid-preview ul li { margin: 3px 0; } .jobaid-preview .grid-row { display: grid; grid-template-columns: 1.2fr 1.4fr 1.4fr; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--skygray-50); font-size: 12px; } .jobaid-preview .grid-row.head { background: var(--navy); color: #fff; font-weight: 700; border-radius: 6px 6px 0 0; border-bottom: none; } .jobaid-preview .check-row { display: flex; gap: 10px; align-items: start; margin: 4px 0; } .jobaid-preview .check-row .box { width: 14px; height: 14px; border: 2px solid var(--royal); border-radius: 3px; flex-shrink: 0; margin-top: 3px; } /* ============================================================ RECAP ============================================================ */ .recap-final { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; } @media (max-width: 880px) { .recap-final { grid-template-columns: 1fr; } } .recap-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 28px); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; justify-content: center; } .medal { width: 96px; height: 96px; background: radial-gradient(circle at 30% 30%, #ffd97a, var(--gold)); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 16px 36px rgba(240,165,0,0.4), inset 0 -8px 16px rgba(0,0,0,0.18); animation: medalIn 700ms var(--ease-spring) both; } .medal svg { width: 50px; height: 50px; color: #4a2c00; } @keyframes medalIn { from { transform: scale(.4) rotate(-180deg); opacity: 0; } to { transform: none; opacity: 1; } } /* ============================================================ FLOATING FAB + NOTES PANEL ============================================================ */ .fab { position: fixed; z-index: 60; right: 24px; bottom: 24px; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--royal), var(--sky)); color: #fff; border: none; cursor: pointer; box-shadow: 0 16px 32px rgba(0,71,186,0.35), inset 0 1px 0 rgba(255,255,255,0.25); display: grid; place-items: center; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .fab:hover { transform: translateY(-2px); box-shadow: 0 22px 40px rgba(0,71,186,0.45); } .fab svg { width: 22px; height: 22px; } .notes-panel { position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--notes-bg); border-left: 1px solid var(--line); box-shadow: -24px 0 60px rgba(0,46,109,0.25); display: flex; flex-direction: column; transform: translateX(105%); transition: transform var(--t-med) var(--ease-out); } .notes-panel.is-open { transform: none; } .np-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); } .np-kicker { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; } .np-title { margin: 4px 0 0; font-size: 16px; color: var(--ink); } .notes-panel textarea { flex: 1 1 auto; padding: 16px; border: none; outline: none; resize: none; background: transparent; color: var(--ink-2); font-family: inherit; font-size: 14px; line-height: 1.6; } .np-foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-mute); } .np-saved { display: inline-flex; align-items: center; gap: 6px; } .np-saved::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--good); display: inline-block; } /* ============================================================ HIGHLIGHT ============================================================ */ mark.adnoc-hl { background: linear-gradient(180deg, transparent 50%, var(--hl) 50%); color: inherit; padding: 0 2px; border-radius: 2px; cursor: pointer; transition: background var(--t-fast) var(--ease); } mark.adnoc-hl:hover { background: linear-gradient(180deg, transparent 30%, #ffd83a 30%); } .hl-popover { position: absolute; z-index: 80; display: inline-flex; gap: 4px; padding: 4px; background: var(--ink); color: #fff; border-radius: 8px; box-shadow: 0 12px 28px rgba(0,0,0,0.3); transform: translate(-50%, calc(-100% - 8px)); animation: hlPop 180ms var(--ease-out) both; } .hl-popover[hidden] { display: none; } @keyframes hlPop { from { opacity: 0; transform: translate(-50%, calc(-100% - 4px)); } to { opacity: 1; transform: translate(-50%, calc(-100% - 8px)); } } .hl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; background: transparent; border: none; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; } .hl-btn:hover { background: rgba(255,255,255,0.10); } .hl-btn svg { width: 14px; height: 14px; color: var(--hl); } /* ============================================================ CONFETTI ============================================================ */ .confetti-host { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; } .confetti-piece { position: absolute; top: -20px; width: 8px; height: 14px; will-change: transform, opacity; animation: confettiFall var(--dur, 2.6s) cubic-bezier(.16,.84,.34,1) forwards; } @keyframes confettiFall { 0% { transform: translate3d(0,0,0) rotate(0deg); opacity: 1; } 100% { transform: translate3d(var(--dx, 0px), 110vh, 0) rotate(var(--rot, 720deg)); opacity: .9; } } /* ============================================================ REDUCED MOTION + PRINT ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; animation-iteration-count: 1 !important; } } /* ============================================================ RESPONSIVE — 900 / 720 / 560 / 420 breakpoints ============================================================ */ /* Tablets and small laptops */ @media (max-width: 900px) { .stage { padding: clamp(14px, 3vw, 26px) clamp(12px, 3vw, 28px) 100px; } .section-head { padding-right: 46px; } h1.title { font-size: clamp(24px, 4vw, 34px); } .welcome-hero h1.title { font-size: clamp(34px, 7vw, 54px); } .welcome-stats { grid-template-columns: 1fr 1fr; } /* Phase 1 folder — stack the two pages vertically */ .phase1-stage { min-height: 640px; } .folder-spread { grid-template-columns: 1fr; grid-auto-rows: min-content; overflow: auto; } .page.memo { border-right: none; border-bottom: 2px solid rgba(0,0,0,0.15); max-height: 40vh; } .page.memo::before { display: none; } .memo-body p { font-size: 12.5px; line-height: 1.7; } .page.dashboard { min-height: 380px; } /* Decision cards: single column */ .decision-cards { grid-template-columns: 1fr; grid-template-rows: auto; } .decision-cards.has-open .dcard.is-open { position: relative; height: auto; min-height: 360px; } /* Phase 2 stickies 2×3 */ .stickies { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); } /* Recap stacks */ .recap-final { grid-template-columns: 1fr; } } /* Small tablets / large phones */ @media (max-width: 720px) { :root { --appbar-h: 60px; } .appbar { gap: 8px; padding: 0 12px; } .brand-text .t2 { display: none; } .brand-text .t1 { font-size: 12px; } .brand-logo { height: 34px; } .brand-wordmark { font-size: 20px; } .brand-divider { display: none; } .progress-pill { padding: 5px 10px; gap: 6px; font-size: 11px; } .icon-btn { width: 32px; height: 32px; } .icon-btn svg { width: 14px; height: 14px; } .icon-btn.theme-toggle { padding: 0 6px; } .footer-nav { bottom: 8px; padding: 8px 10px; border-radius: 22px; } .btn { padding: 9px 14px; font-size: 13px; } /* Dossier smaller for touch */ .desk-stage, .desk-view { min-height: 480px; } .dossier { width: min(300px, 78vw); } .dossier-label .logo { font-size: 18px; letter-spacing: .2em; margin-bottom: 12px; } .dossier-stamp { font-size: 10px; padding: 7px 12px; } /* Card fullscreen buttons */ .tool-btn { width: 30px; height: 30px; } .tool-btn svg { width: 14px; height: 14px; } .tool-btn.card-fs { top: 8px; right: 8px; } /* Video player: let 16:9 aspect drive width; no min-height that could overflow narrow viewports */ .video-wrap, .video-ph { min-width: 0; max-width: 100%; } .video-ph { max-height: calc(100vh - 260px); min-height: 0; } .muxp-center-play { width: 66px; height: 66px; } .muxp-center-play svg { width: 30px; height: 30px; } .muxp-top { top: 8px; right: 8px; gap: 6px; } .muxp-bottom { padding: 8px 10px 10px; } .muxp-time { font-size: 11px; } /* Sticky note narrower */ .muxp-sticky { width: min(220px, 60%); top: 60px; right: 12px; } .mvs-text { min-height: 80px; font-size: 12px; } /* Board button */ .board-btn { width: 36px; height: 36px; top: -8px; right: -8px; } .board-btn svg { width: 16px; height: 16px; } .board-count { min-width: 18px; height: 18px; font-size: 10px; } /* Side panels full-width */ .board-panel, .notes-panel { width: 100%; max-width: 100%; box-shadow: -16px 0 30px rgba(0,46,109,0.2); } /* Focus exit pill compact */ .focus-exit { top: 10px; right: 10px; padding: 6px 10px; font-size: 11px; } .focus-exit svg { width: 12px; height: 12px; } .focus-exit kbd { font-size: 9px; padding: 1px 4px; } /* Phase 2 meeting stacks */ .meeting { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .meeting-side { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.10); max-height: 200px; overflow: auto; } .facilitator-log { max-height: 120px; overflow: auto; } .participant { padding: 6px; } .participant .name { font-size: 11px; } .participant .role { font-size: 9px; } .stickies { grid-template-columns: 1fr; grid-template-rows: repeat(6, minmax(80px, auto)); overflow: auto; } .sticky { padding: 10px; font-size: 12px; } /* Phase 2 rules single col */ .rules-band { grid-template-columns: 1fr; } .rule .cb-choice { font-size: 12px; padding: 10px 12px; } /* Phase 2 feedback picks stack */ .phase2-feedback .pf-picks { grid-template-columns: 1fr; } /* Welcome stats stack */ .welcome-stats { grid-template-columns: 1fr; } .welcome-hero { padding: 16px 0; gap: 14px; } .welcome-hero h1.title { font-size: clamp(32px, 9vw, 46px); } .welcome-hero .subtitle { font-size: 13px; } /* Time-jump */ .timejump .date { font-size: clamp(56px, 18vw, 100px); } .timejump .tj-brief { padding: 0 12px; } .timejump .tj-brief p { font-size: 13px; } /* Job-aid preview */ .jobaid-shell { min-width: 0; } .jobaid-preview { padding: 16px 14px; font-size: 12px; max-width: 100%; min-width: 0; width: 100%; overflow-wrap: anywhere; word-break: break-word; } .jobaid-preview * { min-width: 0; max-width: 100%; } /* The long uppercase kicker was forcing the card wider than the viewport */ .jobaid-preview [style*="letter-spacing"] { letter-spacing: .1em !important; } .jobaid-preview h2 { font-size: 18px; } .jobaid-preview h3 { font-size: 13px; } .jobaid-preview .grid-row { grid-template-columns: 1fr; padding: 6px 8px; } .jobaid-preview .grid-row.head { display: none; } } /* Phones */ @media (max-width: 560px) { .appbar { padding: 0 10px; gap: 6px; } .brand-text .t1 { display: none; } .brand-wordmark { font-size: 18px; } .brand-logo { height: 30px; } .steprail { padding: 10px 12px; } .steprail::before, .steprail::after { top: 22px; } .step .n { width: 24px; height: 24px; font-size: 10px; } .footer-nav { flex-wrap: wrap; } .footer-nav .btn { flex: 1; justify-content: center; } .section-tools { top: 4px; right: 4px; } .decision-cards.has-open .dcard.is-open { min-height: 320px; } .dcard h4 { font-size: 14px; } .dcard.is-open p { font-size: 12.5px; } } /* Very narrow phones */ @media (max-width: 420px) { .progress-pill .pp-step, .progress-pill .pp-divider { display: none; } .icon-btn { width: 30px; height: 30px; } .icon-btn svg { width: 12px; height: 12px; } .welcome-hero h1.title { font-size: 30px; } h1.title { font-size: 22px; } .kicker { font-size: 9px; letter-spacing: .18em; } .dossier { width: 78vw; } .dossier-label .logo { font-size: 15px; margin-bottom: 10px; } .dossier-stamp { font-size: 9px; padding: 6px 10px; } .muxp-sticky { width: min(200px, 68%); top: 52px; right: 8px; } .board-btn { width: 34px; height: 34px; top: -6px; right: -6px; } .board-count { top: -4px; right: -4px; min-width: 16px; height: 16px; font-size: 9px; } } /* Landscape phones */ @media (max-height: 500px) and (orientation: landscape) { .video-ph { max-height: calc(100vh - 200px); min-height: 200px; } .welcome-hero { padding: 12px 0; gap: 12px; } .welcome-hero h1.title { font-size: 30px; } } @media print { body { background: #fff; color: #000; } .appbar, .steprail, .progress, .footer-nav, .atmosphere, .fab, .notes-panel, .section-tools, .no-print { display: none !important; } .stage { padding: 0; max-width: none; } .section { display: block !important; } .jobaid-preview { box-shadow: none; max-width: none; padding: 0; } }