/* ============================================================================= report.css - ELEV8 Groundwork Readiness Audit Design language lifted from the SignalIQ demo dashboard (dashboard.html). Sections 1 Tokens: colour, motion 2 Density dial ← the "dashboard vs slide" control. Read this one. 3 Base + page shell 4 Chrome: topbar / status bar / tabs 5 Deck, stage, frame 6 Period row + slide rail 7 Shared card vocabulary 8 Slide 01 - Cover 9 Slide 02 - Executive Summary 10 Placeholder (slides not yet rebuilt) 11 Foot 12 Responsive 13 Print ============================================================================= */ /* ── 1 · Tokens ───────────────────────────────────────────────────────────── */ :root { /* Brand - the dashboard's own names and values. Honest ones this time: the old file called teal "--cg-white" and paper "--cg-black". */ --teal: #005F5B; --teal-deep: #014a47; /* tab strip */ --teal-dark: #00423f; /* status bar */ --bronze: #CD7F32; --bronze-dark: #A66A28; --graphite: #4B4B4B; --paper: #F5F7F8; --white: #FFFFFF; --line: #E3E8EA; --ink-soft: #6B7280; /* Status accents */ --green: #1E8E5A; --green-soft: #E5F4EC; --amber-soft: #FBF0E3; --grey-soft: #EDF1F2; /* Motion */ --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 280ms; } /* ── 2 · Density dial ───────────────────────────────────────────────────────── The report ships as . Change that one attribute to "dashboard" for the demo dashboard's literal density. Nothing else needs to change - every size below is a variable. ─────────────────────────────────────────────────────────────────────────── */ :root { /* "dashboard" - the demo's own scale */ --frame-max: 1240px; --fs-eyebrow: 11px; --fs-title: 22px; --fs-lead: 17px; --fs-body: 15px; --fs-small: 13px; --fs-micro: 11px; --fs-hero: 56px; --fs-stat: 34px; --fs-cardttl: 16px; --card-pad: 22px; --grid-gap: 16px; --card-radius: 14px; } html[data-density="deck"] { /* presentation scale - the default */ --frame-max: 1440px; --fs-eyebrow: 12px; --fs-title: 30px; --fs-lead: 19px; --fs-body: 17px; --fs-small: 14px; --fs-micro: 12px; --fs-hero: 66px; --fs-stat: 40px; --fs-cardttl: 18px; --card-pad: 26px; --grid-gap: 20px; --card-radius: 14px; } /* Compact desktops: step the whole scale down so every slide still fits on one screen instead of quietly starting to scroll. Fires on a short viewport (1366x768) OR a narrow one (1280x800) - a narrower frame makes cards taller, so width matters as much as height here. The height threshold sits at 920px, not 900px: adding the persistent rail bar (section 4) grew the sticky header to 194px, so 1440x900 - which used to clear the full-scale layout at 760px of deck height - now only has 706px and needs the same compact trims 1366x768 already relies on. Verified across 1280x800, 1366x768 and 1440x900 on all nine slides. */ @media (max-height: 920px), (max-width: 1360px) { html[data-density="deck"] { --card-pad: 18px; --grid-gap: 12px; --fs-hero: 46px; --fs-title: 26px; --fs-lead: 17px; --fs-body: 15px; --fs-small: 13px; --fs-stat: 32px; --fs-cardttl: 16px; } /* NOTE: only custom properties belong here. Element-level overrides for this breakpoint live at the very END of this file - a media query adds no specificity, so a rule here would lose to the identical selector in the slide sections below purely on source order. */ } /* ── 3 · Base + page shell ────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { min-height: 100dvh; display: grid; /* minmax(0,1fr), not 1fr: a grid item's automatic minimum size is its min-content width, so a single long word anywhere would otherwise widen the whole page and give a phone a horizontal scrollbar. */ grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; background: var(--paper); color: var(--graphite); font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, .mont { font-family: 'Montserrat', system-ui, sans-serif; } img { display: block; max-width: 100%; } button { font: inherit; color: inherit; } .shell { position: sticky; top: 0; z-index: 20; } .noscript { margin: 60px auto; max-width: 560px; padding: 28px 32px; background: var(--white); border: 1px solid var(--line); border-radius: var(--card-radius); font-size: 15px; line-height: 1.6; text-align: center; } /* ── 4 · Chrome ───────────────────────────────────────────────────────────── */ .topbar { background: var(--teal); color: #fff; display: flex; align-items: center; gap: 28px; padding: 0 32px; height: 64px; } /* White wordmark-only mark, built for a dark bar (see assets/elev8-wordmark-white.svg header comment) - the full-colour lockup's teal fill would vanish here. */ .brandmark { height: 26px; width: auto; display: block; } .divider { width: 1px; height: 24px; background: rgba(255,255,255,.25); } .lockup { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 19px; } .lockup .sig { color: #fff; } .lockup .iq { color: var(--bronze); } .client { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); padding: 8px 16px; border-radius: 8px; } .client .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bronze); } /* Status bar. The dashboard's live bar, minus the pulsing "LIVE" dot and the ticking clock - this is a dated, static audit and implying live monitoring would be a credibility problem. Same bar, same rhythm, honest content. */ .statusbar { background: var(--teal-dark); display: flex; align-items: center; gap: 9px; padding: 7px 32px; font-size: 12px; color: rgba(255,255,255,.85); } .statusbar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); } .statusbar .flag { font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .1em; font-size: 10.5px; text-transform: uppercase; color: var(--bronze); } .statusbar .txt { color: rgba(255,255,255,.7); } .tabs { background: var(--teal-deep); padding: 0 32px; display: flex; gap: 4px; } .tab { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .04em; color: rgba(255,255,255,.65); padding: 14px 22px; border: none; background: transparent; cursor: pointer; border-bottom: 3px solid transparent; transition: color var(--dur-base) var(--ease-standard); } .tab:hover { color: rgba(255,255,255,.9); } .tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--bronze); } .tab:focus-visible { outline: 2px solid var(--bronze); outline-offset: -4px; } /* The ONE slide-nav control lives here, in the sticky header, not per slide - so "this tab holds more than one page" is visible at a glance instead of only showing up once you land on a slide and notice a corner widget. */ .rail-bar { background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 32px; display: flex; justify-content: center; } /* ── 5 · Deck, stage, frame ─────────────────────────────────────────────────── "Still a slide" means: exactly one stage visible, chrome pinned, the content band fills the viewport below it, nothing scrolls on a laptop. If content genuinely exceeds the viewport the PAGE scrolls - never an inner pane, which is how decks silently clip content. ─────────────────────────────────────────────────────────────────────────── */ /* overflow-x: clip (not hidden) contains the slide-in transform without creating a scroll container. Without it the entrance animation's translateX momentarily sticks out, which raises a horizontal scrollbar, which shortens the viewport, which makes min-height:100dvh overflow vertically - a loop that leaves both scrollbars stuck on for the rest of the session. */ #deck { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; min-width: 0; overflow-x: clip; } .stage { display: none; min-width: 0; } .stage[data-current] { display: grid; animation: stage-in var(--dur-slow) var(--ease-out) both; } @keyframes stage-in { from { opacity: 0; transform: translateX(var(--dir, 0px)); } to { opacity: 1; transform: none; } } .frame { width: 100%; max-width: var(--frame-max); margin: 0 auto; padding: 26px 32px 30px; display: flex; flex-direction: column; min-height: 100%; min-width: 0; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); flex: 1; align-content: start; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .span2 { grid-column: span 2; } .span3 { grid-column: span 3; } .span4 { grid-column: span 4; } /* ── 6 · Period row + slide rail ────────────────────────────────────────────── The rail itself now renders ONCE into .rail-bar in the sticky header (see section 4) rather than once per slide - period-row here is just the left- hand eyebrow/title block. Styling reuses the dashboard's .ranges/.range pill shape rather than inventing a second control style. ─────────────────────────────────────────────────────────────────────────── */ .period-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; flex: none; } .eyebrow { font-family: 'Montserrat', sans-serif; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-dark); margin-bottom: 10px; display: block; } .eyebrow.teal { color: var(--teal); } /* Inline accent for part of an eyebrow line, e.g. "INTELLIGENT" bronze + "business systems" teal on the cover. Distinct from .eyebrow.teal above, which recolors a WHOLE standalone eyebrow, not a portion of one. */ .eyebrow .acc-teal { color: var(--teal); } .slide-title { font-size: var(--fs-title); font-weight: 700; color: var(--teal); line-height: 1.15; } .sample-chip { display: inline-block; vertical-align: middle; margin-left: 12px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line); background: #fff; border-radius: 5px; padding: 4px 9px; } .rail { display: flex; align-items: center; gap: 2px; flex: none; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 4px; } .rail-btn { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 7px 14px; border-radius: 7px; border: none; background: transparent; cursor: pointer; line-height: 1; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .rail-btn:hover:not(:disabled) { background: var(--paper); color: var(--teal); } .rail-btn:disabled { opacity: .3; cursor: default; } .rail-btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; } .rail-count { font-size: 12px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; padding: 0 10px; white-space: nowrap; } /* Dots are grouped by chapter with a visible gap and a hairline divider between groups - the whole point of this control is to make "this tab has more than one slide" obvious without reading anything. */ .rail-dots { display: flex; align-items: center; gap: 12px; padding: 0 4px; } .rail-group { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 999px; position: relative; transition: background var(--dur-base) var(--ease-standard); } .rail-group + .rail-group::before { content: ''; position: absolute; left: -7px; top: 50%; width: 1px; height: 14px; background: var(--line); transform: translateY(-50%); } /* Same accent as the active tab's underline, so the tab above and the dot group below it read as one connected thing, not two separate controls. */ .rail-group.active { background: rgba(205,127,50,.10); } .rail-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer; background: transparent; border: 1px solid #C7D0D3; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .rail-dot:hover { border-color: var(--bronze); background: rgba(205,127,50,.3); } /* Pulsing ring on the current dot - the rail is the only way to jump slides and a plain filled dot reads as decoration, not a control. The ring keeps breathing the whole time the report is open so it stays noticeable, not just on first load. Stops automatically under prefers-reduced-motion via the global override at the end of this file. */ .rail-dot[aria-current="true"] { background: var(--bronze); border-color: var(--bronze); animation: rail-dot-pulse 1.8s ease-in-out infinite; } .rail-dot:hover[aria-current="true"] { animation-play-state: paused; } .rail-dot:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; } @keyframes rail-dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(205,127,50,.55); } 50% { box-shadow: 0 0 0 6px rgba(205,127,50,0); } } /* ── 7 · Shared card vocabulary ───────────────────────────────────────────── */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); padding: var(--card-pad); display: flex; flex-direction: column; min-width: 0; } /* Hero card - teal, with the headline number's unit in bronze. */ .money { background: var(--teal); color: #fff; border: none; position: relative; overflow: hidden; } .money .eyebrow { color: rgba(255,255,255,.75); } .money .big { font-family: 'Montserrat', sans-serif; font-size: var(--fs-hero); font-weight: 800; line-height: 1; margin: 6px 0 4px; font-variant-numeric: tabular-nums; } .money .big span { color: var(--bronze); } .money .sub { font-size: var(--fs-small); color: rgba(255,255,255,.85); font-weight: 500; line-height: 1.5; } .money .sub b { font-weight: 700; color: #fff; } .money .delta { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 6px 14px; font-size: var(--fs-small); font-weight: 600; } .money .delta .up { color: #7FDFB0; font-weight: 800; } /* Quoted / narrative block - the bronze left rule replaces the old bronze card cap, same brand signature, dashboard-native. */ .read { border-left: 4px solid var(--bronze); } .read p { font-size: var(--fs-body); line-height: 1.65; color: var(--graphite); margin-bottom: 12px; } .read p:last-of-type { margin-bottom: 0; } /* Stat */ .stat .num { font-family: 'Montserrat', sans-serif; font-size: var(--fs-stat); font-weight: 800; color: var(--teal); line-height: 1.1; } .stat .lbl { font-size: var(--fs-small); font-weight: 600; color: var(--graphite); margin-top: 4px; } /* Horizontal fact / health strip. Facts sit on the first row; the note wraps onto its own full-width row via flex-basis:100%, so it gets the whole box width to sit on one line instead of the ~500px it had fighting for space next to the facts, and lands at the bottom of the box as its own row. */ .health { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; flex: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 22px; margin-bottom: var(--grid-gap); font-size: var(--fs-small); } .health .h-item { display: flex; align-items: center; gap: 8px; font-weight: 500; min-width: 0; } .health .h-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bronze); flex: none; } .health .h-key { color: var(--ink-soft); } .health b { font-weight: 700; color: var(--teal); } .health .h-note { flex-basis: 100%; margin-left: 0; color: var(--ink-soft); font-size: var(--fs-micro); text-align: left; } /* Status badges */ .status { flex-shrink: 0; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .08em; border-radius: 5px; padding: 4px 9px; text-transform: uppercase; white-space: nowrap; } .status.now { background: var(--green-soft); color: var(--green); } .status.fixing { background: var(--amber-soft); color: var(--bronze-dark); } .status.watch { background: var(--grey-soft); color: var(--ink-soft); } .pro-chip { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .1em; background: var(--bronze-dark); color: #fff; border-radius: 5px; padding: 3px 8px; } /* ── 8 · Slide 01 - Cover ─────────────────────────────────────────────────── */ /* Masthead: icon anchored left, title + subtitle pushed to the far right. Falls back to a stacked, centered layout on phones (section 12). */ .cover-hero { flex: 1; padding: calc(var(--card-pad) * 1.6); display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: calc(var(--card-pad) * 1.4); } .cover-hero .icon { height: 200px; width: auto; flex: none; opacity: .96; } .cover-text { text-align: right; min-width: 0; } .cover-hero .big { font-size: clamp(30px, 5.4vw, 82px); line-height: .98; text-transform: uppercase; letter-spacing: .01em; margin: 4px 0 0; overflow-wrap: break-word; } .cover-hero .sub { font-size: var(--fs-lead); margin-top: 22px; } /* ── 9 · Slide 02 - Executive Summary ─────────────────────────────────────── */ .focus-val { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: calc(var(--fs-stat) * .72); line-height: 1.2; color: var(--teal); text-transform: uppercase; letter-spacing: .03em; } .read-ttl { font-family: 'Montserrat', sans-serif; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-dark); margin-bottom: 10px; } /* ── 10 · Slide 03 - Impact–Effort Matrix ───────────────────────────────────── The one slide with no dashboard analogue. A real 2x2 on desktop; below 900px it degrades to a ranked list, because a 2x2 read top-left-first IS a priority list. Pure CSS, no duplicate markup. ─────────────────────────────────────────────────────────────────────────── */ .matrix-card { flex: 1; min-height: 0; } .matrix-wrap { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 10px 14px; flex: 1; min-height: 0; } .ylab { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .ylab span, .xlab span { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); } .ylab span { writing-mode: vertical-rl; transform: rotate(180deg); } .xlab { grid-row: 2; grid-column: 2; display: flex; justify-content: space-between; } .matrix { grid-row: 1; grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 0; } .quad { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; justify-content: space-between; min-height: 0; } .quad.lead { background: #fff; border-color: var(--teal); box-shadow: 0 1px 2px rgba(0,95,91,.07); } .quad-head { display: flex; align-items: center; gap: 10px; } .quad .qname { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: var(--fs-cardttl); color: var(--ink-soft); line-height: 1.15; } .quad.lead .qname { color: var(--teal); } .quad .qnote { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45; } .quad.lead .qnote { color: var(--graphite); } .avs { display: flex; gap: 6px; flex-wrap: wrap; } .av { width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; flex: none; } /* ── 10b · Slide 04 - Quick Wins ──────────────────────────────────────────── */ .qw { display: grid; grid-template-columns: auto 1fr 20px 1fr; gap: 6px 18px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--line); } .qw:first-child { padding-top: 0; } .qw:last-child { border-bottom: none; padding-bottom: 0; } .qw .n { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .08em; border-radius: 5px; padding: 4px 9px; background: var(--amber-soft); color: var(--bronze-dark); } .qw .pain { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; text-wrap: pretty; } .qw .arw { color: var(--bronze); text-align: center; font-size: 15px; line-height: 1.5; } .qw .fix { font-size: var(--fs-body); font-weight: 500; color: var(--graphite); line-height: 1.5; text-wrap: pretty; } .qw .fix b { color: var(--teal); font-weight: 700; } /* ── 10c · Slide 05 - Recommended Solutions ───────────────────────────────── */ .sol { --card-pad: 20px; min-height: 0; overflow: hidden; } .sol-top { display: flex; align-items: center; gap: 10px; } .sol-n { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .08em; border-radius: 5px; padding: 3px 8px; background: var(--grey-soft); color: var(--ink-soft); flex: none; } .sol-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: var(--fs-cardttl); color: var(--teal); line-height: 1.2; } .sol .use { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45; margin: 8px 0 auto; text-wrap: pretty; } .sol-meta { display: flex; gap: 20px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; } .sol-meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sol-meta .mk { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .sol-meta .mv { font-size: var(--fs-small); font-weight: 700; color: var(--graphite); white-space: nowrap; } .sol-meta .mv.save { color: var(--green); } .sol .pro-chip { position: absolute; top: 14px; right: 14px; } .sol { position: relative; } /* ── 10d · Slide 06 - 4-Day Plan ──────────────────────────────────────────── */ .day { min-height: 0; } .day-num { width: 42px; height: 42px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 18px; color: var(--teal); margin-bottom: 14px; flex: none; } .day .task { font-size: var(--fs-body); color: var(--graphite); line-height: 1.5; margin-top: 8px; text-wrap: pretty; } .day .tool-chip { margin-top: auto; padding-top: 14px; } .day .tool-chip .status { display: inline-block; } /* ── 10e · Slide 07 - What Comes After ────────────────────────────────────── */ .phase .n { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: var(--fs-stat); color: var(--bronze); line-height: 1; } .phase .arule { width: 56px; height: 2px; background: var(--bronze); margin: 16px 0; opacity: .4; } .phase .txt { font-size: var(--fs-body); color: var(--graphite); line-height: 1.5; text-wrap: pretty; } .phase .pname { margin-top: auto; padding-top: 16px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: var(--fs-cardttl); color: var(--teal); line-height: 1.25; } /* ── 10f · Slide 08 - Financial Impact (interactive) ──────────────────────── */ .fin-hero { justify-content: center; } .money-sep { height: 1px; background: rgba(255,255,255,.22); margin: 18px 0; border: 0; } .fin-hero .big2 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: calc(var(--fs-hero) * .62); line-height: 1; color: #fff; margin: 6px 0 4px; font-variant-numeric: tabular-nums; } /* The visible working. Shows the multiplier and how the total is arrived at, so nobody on a call has to take the headline number on trust. */ .work { font-size: var(--fs-small); line-height: 1.5; font-weight: 500; color: rgba(255,255,255,.82); margin-top: 8px; text-wrap: pretty; font-variant-numeric: tabular-nums; } .work b { font-weight: 800; color: #fff; } .fin-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; } .field-lbl { font-family: 'Montserrat', sans-serif; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-dark); display: block; margin-bottom: 7px; line-height: 1.35; min-height: 2.7em; } .numin { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .numin input { border: 0; outline: 0; width: 100%; min-width: 0; background: transparent; font-family: 'Inter', sans-serif; font-weight: 600; font-size: var(--fs-body); /* padding, not just line-height, does the vertical sizing here - this is the actual element's own hit-target. Someone taps the field on a phone/tablet mid-call, not just the wrapper box around it, so the input itself needs to be a real touch target (~44px total with the wrapper's own padding), not a 20px sliver centered inside a bigger box. */ padding: 9px 0; line-height: 1.3; color: var(--graphite); font-variant-numeric: tabular-nums; } .numin:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,95,91,.12); } .numin .pre, .numin .unit { font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); flex: none; } .numin input::-webkit-outer-spin-button, .numin input::-webkit-inner-spin-button { opacity: .35; } .fin-hint { margin-top: 16px; font-size: var(--fs-micro); color: var(--ink-soft); line-height: 1.45; text-wrap: pretty; } /* ── 10g · Slide 09 - Next Steps ──────────────────────────────────────────── */ .step-head { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: var(--fs-cardttl); color: var(--teal); line-height: 1.25; margin-bottom: 10px; } .money .step-head { color: #fff; } .cta-card { justify-content: center; } .cta-card .big { font-size: calc(var(--fs-hero) * .52); text-transform: none; line-height: 1.1; } a.delta.cta { text-decoration: none; color: #fff; cursor: pointer; transition: background var(--dur-base) var(--ease-standard); } a.delta.cta:hover { background: rgba(255,255,255,.22); } a.delta.cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .footnote { margin-top: 14px; font-size: var(--fs-micro); color: var(--ink-soft); line-height: 1.45; } /* Utility action, not a sales CTA - deliberately quieter than .delta.cta so it never competes with "Have ELEV8 set it up" for attention. */ .pdf-row { flex: none; margin-top: 20px; display: flex; justify-content: center; } .btn-pdf { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: var(--fs-small); color: var(--teal); background: #fff; border: 1.5px solid var(--teal); border-radius: 999px; padding: 10px 24px; cursor: pointer; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); } .btn-pdf:hover { background: var(--teal); color: #fff; } .btn-pdf:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; } .pdf-ic { font-size: 15px; line-height: 1; } /* ── 11 · Placeholder - slides not yet rebuilt ────────────────────────────── */ .todo { grid-column: span 4; align-items: center; justify-content: center; text-align: center; gap: 10px; border-style: dashed; background: transparent; min-height: 260px; } .todo .n { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: var(--fs-stat); color: var(--line); } .todo .t { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: var(--fs-cardttl); color: var(--teal); } .todo .s { font-size: var(--fs-small); color: var(--ink-soft); } /* ── 11 · Foot ────────────────────────────────────────────────────────────── */ /* Three columns, outer two equal (1fr each): logo stays left, page count stays right, and the title lands exactly in the middle of the bar regardless of how wide the logo or "NN / 09" happen to be. minmax(0, 1fr), not 1fr - see the #deck comment above for why a bare 1fr won't shrink below its content's own minimum width. */ .foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; flex: none; font-size: var(--fs-micro); color: var(--ink-soft); } .foot img { width: 74px; height: auto; opacity: .8; justify-self: start; } .foot-title { justify-self: center; text-align: center; } .foot .pg { justify-self: end; font-variant-numeric: tabular-nums; letter-spacing: .06em; } /* ── 12 · Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 900px) { .topbar { gap: 16px; padding: 10px 20px; height: auto; min-height: 60px; flex-wrap: wrap; } .statusbar { padding: 7px 20px; flex-wrap: wrap; } .tabs { padding: 0 20px; overflow-x: auto; } .frame { padding: 22px 20px 26px; } .period-row { flex-direction: column; align-items: stretch; gap: 14px; } .rail-bar { padding: 8px 20px; } .rail { overflow-x: auto; } .health { gap: 16px 22px; padding: 12px 18px; } .grid, .grid--3 { grid-template-columns: 1fr 1fr; } .span2, .span3, .span4, .todo { grid-column: span 2; } /* Quick Wins: pain stacks above fix, arrow drops away, meaning survives. */ .qw { grid-template-columns: auto 1fr; } .qw .arw { display: none; } .qw .pain, .qw .fix { grid-column: 2; } /* Matrix degrades to a ranked list - each quadrant keeps its priority badge. */ .matrix-wrap { grid-template-columns: 1fr; grid-template-rows: auto; } .ylab, .xlab { display: none; } .matrix { grid-row: auto; grid-column: 1; grid-template-columns: 1fr; grid-template-rows: auto; } .quad { gap: 10px; } } @media (max-width: 700px) { /* The sticky header is precious real estate on a phone, so the rail detaches from .rail-bar and pins to the bottom instead - .rail-bar collapses to nothing since its only child is no longer in flow. */ .rail-bar { padding: 0; border-bottom: 0; } .rail { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; justify-content: space-between; box-shadow: 0 4px 16px rgba(0,95,91,.14); } .frame { padding-bottom: 84px; } } @media (max-width: 560px) { .brandmark { height: 22px; } .lockup { font-size: 17px; } .client { margin-left: 0; padding: 6px 12px; font-size: 13px; } .tab { padding: 12px 14px; font-size: 12px; } .frame { padding: 18px 15px 84px; } .card { padding: 18px; } .grid, .grid--3 { grid-template-columns: 1fr; } .span2, .span3, .span4, .todo { grid-column: span 1; } .rail-dots { display: none; } /* A left-icon/right-text split gets cramped this narrow, so the hero drops back to a stacked, centered layout: icon on top, text below. */ .cover-hero { flex-direction: column; padding: 22px; gap: 18px; } .cover-hero .icon { height: 84px; } .cover-text { text-align: center; } .fin-fields { grid-template-columns: 1fr; } .field-lbl { min-height: 0; } .sol-meta { gap: 14px; } } /* ── 13 · Print ─────────────────────────────────────────────────────────────── All nine slides, one per page. print-color-adjust is the fix for a real bug in the previous file: without it Chrome drops every teal card and bronze rule unless the person printing happens to tick "Background graphics". ─────────────────────────────────────────────────────────────────────────── */ @media print { html { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body { display: block; background: #fff; } .shell { position: static; } .statusbar, .tabs, .rail-bar, .rail, .pdf-row { display: none !important; } #deck { display: block; } .stage { display: block !important; animation: none !important; } .stage + .stage { break-before: page; page-break-before: always; } .frame { width: 1180px; max-width: none; padding: 0; min-height: 0; } .grid { break-inside: avoid; } } @page { size: landscape; margin: 12mm; } /* ── 14 · Short-viewport trims ──────────────────────────────────────────────── Must be last in the file: these override selectors declared in the slide sections above, and a media query contributes no extra specificity. Tuned so all nine slides still fit on a 1366x768 laptop without scrolling. ─────────────────────────────────────────────────────────────────────────── */ @media (max-height: 920px) and (min-width: 901px), (max-width: 1360px) and (min-width: 901px) { /* Chrome trims apply once and benefit every slide equally, so they come first - cheaper than trimming nine slides' content individually. */ .rail-bar { padding: 4px 32px; } .rail { padding: 3px; } .rail-btn { padding: 5px 12px; } .frame { padding: 12px 32px 14px; } .period-row { margin-bottom: 12px; } .foot { margin-top: 10px; padding-top: 8px; } .foot img { width: 62px; } .cover-hero { padding: 26px; gap: 26px; } .cover-hero .icon { height: 150px; } .cover-hero .big { font-size: clamp(28px, 4.2vw, 60px); } .cover-hero .sub { margin-top: 14px; } .health { padding: 10px 18px; } .qw { padding: 10px 0; } .sol { --card-pad: 15px; } .sol-meta { padding-top: 8px; margin-top: 8px; } .day-num { width: 36px; height: 36px; font-size: 16px; margin-bottom: 10px; } .phase .arule { margin: 12px 0; } .money-sep { margin: 12px 0; } .field-lbl { min-height: 2.6em; margin-bottom: 5px; } .numin { padding: 3px 11px; } .numin input { padding: 7px 0; } .fin-fields { gap: 8px 18px; } .fin-hint { margin-top: 6px; } .work { margin-top: 6px; line-height: 1.4; } .read p { line-height: 1.5; } } /* A gap the earlier tuning missed: 901-1260px is still the 4-column desktop layout (the 900px breakpoint hasn't kicked in), but narrower than the 1280-1366px range the compact tier above was actually verified against. At that in-between width, a handful of cards' body text sits right on a line-wrap threshold - it fits on N lines at 1366px but wraps to N+1 at 1024px, growing that row and pushing 2 slides into a few extra px of scroll. Confirmed by testing every ~100px across 901-1360px directly, not by calculation - text reflow doesn't extrapolate from a formula. Fix attacks the cause (not enough width for the text) rather than just shrinking things further: give the grid back the width the compact tier's side padding was still eating at this size. */ @media (max-width: 1260px) and (min-width: 901px) { .frame { padding: 8px 22px 10px; } .rail-bar { padding-left: 22px; padding-right: 22px; } html[data-density="deck"] { --grid-gap: 9px; --card-pad: 14px; } .period-row { margin-bottom: 8px; } .foot { margin-top: 6px; padding-top: 6px; } .work { line-height: 1.3; } .read p { line-height: 1.4; } .sol { --card-pad: 12px; } .sol .use { line-height: 1.25; margin: 6px 0 auto; } .fin-fields { gap: 6px 16px; } .money-sep { margin: 8px 0; } } /* ── 15 · Landscape phone ───────────────────────────────────────────────────── Every trim above this point that shrinks the chrome (topbar/statusbar/tabs/ rail-bar) requires min-width:901px in its own media condition, because they were written to fix short-but-WIDE viewports (laptops). A phone rotated to landscape is short-and-NARROW (e.g. 844x390) - under 901px wide, so none of those trims ever fire, and the chrome falls back to full desktop spacing. At that point four stacked bars (topbar 64/60px + statusbar 28px + tabs 47px + rail-bar 53px) genuinely ate ~48% of the screen height, measured directly, not estimated. This tier is keyed on height ALONE - no min-width - specifically so it also catches these narrower short viewports the min-width:901px trims structurally cannot reach. 460px comfortably covers real landscape-phone heights (~375-430px) without touching any portrait phone (always 600px+ tall) or tablet/desktop (never under 460px tall). ─────────────────────────────────────────────────────────────────────────── */ @media (max-height: 460px) { .topbar { gap: 10px; padding: 4px 16px; min-height: 40px; } .brandmark { height: 18px; } .lockup { font-size: 15px; } .client { padding: 4px 10px; font-size: 12px; } .statusbar { padding: 3px 16px; } .tabs { padding: 0 16px; } .tab { padding: 6px 12px; font-size: 11px; } .rail-bar { padding: 3px 16px; } .rail { padding: 2px; } .rail-btn { padding: 3px 9px; } .rail-count { font-size: 11px; padding: 0 6px; } } /* ── Reduced motion ───────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }