/* ═══════════════════════════════════════════════════════════ FUTUREDAY — SHARED DESIGN SYSTEM Brand aligned to FutureDay Brand & Story v1.0 ═══════════════════════════════════════════════════════════ */ /* ── FONTS ── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&family=DM+Sans:wght@400;500;600&display=swap'); /* ── DESIGN TOKENS ── Source: FutureDay Brand & Story, Colour Palette section ─────────────────────────────────────────────────────────── */ :root { /* Primary colours */ --black: #0f1924; /* Primary text, hero headings, nav, footer */ --navy: #0f1924; /* Alias for --black (internal use) */ --blue-dark: #1445a8; /* Deep blue — big bands/fills + text links. Logo "second-" */ --blue-deep: #1445a8; /* Alias: hero/journey bands, large fills, links */ --blue-bright: #2563eb; /* Bright blue — action buttons, icons, current step, active pills */ --ink: #0e2564; /* Headings / titles / names */ --ai-grad: linear-gradient(135deg,#2563eb,#7c3aed); /* ✨ AI only */ --blue-light: #7eb8f7; /* Hover states, secondary accents, hyperlinks. Logo "iq" */ --sky: #7eb8f7; /* LOCKED accent for ALL dark #1445a8 banners — eyebrows, sub-lines, italic em, secondary text on deep-blue bands */ --accent-blue: #2d7dd2; /* Page headings in italic (em text). Blue/Purple in brand */ --blue-mid: #3a6be0; /* Pill / tag labels (e.g. hook-type tags) */ --blue-hover: #0d2f6e; /* Button hover / pressed darken */ /* Secondary colours — backgrounds and surfaces */ --blue-pale: #e8f0fe; /* Badge and pill fills, light section accents */ --blue-softer: #f0f6ff; /* Section backgrounds, step number fills */ --section-grey: #f8fafd; /* Card backgrounds, alternate section fills */ --white: #ffffff; /* Primary page background, card surfaces */ /* Accent colours — status indicators only */ --green: #16a34a; /* Success states, tick icons, positive outcomes */ --green-pale: #dcfce7; --amber: #d97706; /* Launch badges, coming soon, cautions */ --amber-pale: #fef3c7; --red: #dc2626; /* Problem indicators, error states */ /* Borders — brand: 0.5px standard, 2px featured only */ --border: #e2eaf4; /* Standard border colour */ --blue-border: #c7d8f5; /* Borders on blue/pale surfaces (cards, callouts) */ --grey-text: #5b6472; /* Secondary / muted body text */ /* Layout */ --nav-h: 52px; /* Fixed top nav height — sticky offsets */ --subnav-h: 0px; /* CRM sub-nav height where present */ /* Shape */ --radius: 8px; /* Buttons, inputs, small cards */ --radius-lg: 12px; /* Cards, modals */ /* Shadow */ --shadow-sm: 0 1px 3px rgba(15,25,36,0.06); --shadow-md: 0 4px 12px rgba(15,25,36,0.08); --shadow-lg: 0 12px 32px rgba(15,25,36,0.10); /* Archetype colours */ --arch-career-bg: #e0e7ff; --arch-career-text: #4338ca; --arch-career-border: #c7d2fe; --arch-authority-bg: #ffedd5; --arch-authority-text: #c2410c; --arch-authority-border:#fed7aa; --arch-client-bg: #dcfce7; --arch-client-text: #15803d; --arch-client-border: #bbf7d0; --arch-business-bg: #f3e8ff; --arch-business-text: #7c3aed; --arch-business-border:#e9d5ff; --arch-connector-bg: #ffe4e6; --arch-connector-text: #be123c; --arch-connector-border:#fecdd3; } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── BASE TYPOGRAPHY ── */ body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--section-grey); color: var(--black); line-height: 1.65; -webkit-font-smoothing: antialiased; padding-top: 0; } /* ── SIDEBAR LAYOUT OFFSETS ── */ /* Injected on by nav.js */ html.siq-sidebar-layout body { padding-left: 220px; padding-top: 0; } html.siq-rail-layout body { padding-left: 52px; padding-top: 0; } html.siq-mobile-layout body { padding-left: 0; padding-top: 52px; } /* Mobile: sticky page-headers must stop BELOW the fixed FutureDay bar (52px), never cover it */ html.siq-mobile-layout .page-header.lh-sticky, html.siq-mobile-layout .page-header.pd-sticky { top: 52px; } /* GLOBAL MOBILE GUTTER = 16px on every page's content wrap (10 Jul 2026). Single source of truth so card edges align across the whole app. Only left/right is set (vertical padding per page is preserved). !important because several pages re-declare wrap padding in a later base rule. */ @media (max-width: 640px) { .contacts-wrap, .companies-wrap, .tracker-wrap, .tasks-wrap, .files-wrap, .welcome-body, .cvb-form-wrap, .apply-band-wrap, .gen-wrap, .cp-landing, .form-screen, .output-screen, .output-wrap, .pw-band-wrap, .pw-wrap, .ip-flow-wrap, .ip-closing-wrap, .settings-wrap, .body-wrap, .ph-wrap, .stats-section, .view-area, .cc-topbar, .stats-bar, .week-strip { padding-left: 16px !important; padding-right: 16px !important; } } /* ── MOBILE TOP BAR ── */ .siq-mob-bar { position: fixed; top: 0; left: 0; right: 0; height: 52px; background: var(--white); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 200; border-bottom: 0.5px solid var(--border); box-shadow: 0 1px 4px rgba(15,25,36,.05); } .siq-mob-toggle { background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .siq-mob-toggle span { display: block; width: 20px; height: 2px; background: var(--navy); border-radius: 2px; } /* ── MOBILE DRAWER ── */ .siq-mob-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 250; } .siq-mob-backdrop.open { display: block; } .siq-mob-drawer { position: fixed; top: 0; left: 0; width: 260px; height: 100vh; height: 100dvh; background: var(--white); z-index: 300; transform: translateX(-100%); transition: transform .25s ease; overflow: hidden; display: flex; flex-direction: column; } .siq-mob-drawer.open { transform: translateX(0); } .siq-mob-close { position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: 22px; color: var(--grey-text); cursor: pointer; line-height: 1; padding: 4px 8px; z-index: 1; } /* ── FULL SIDEBAR ── */ .siq-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 220px; background: var(--white); border-right: 0.5px solid var(--border); display: flex; flex-direction: column; z-index: 300; overflow: hidden; } .siq-sb-logo { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; flex-shrink: 0; } a.siq-sb-logo, a.siq-sb-logo:hover, a.siq-sb-logo:hover * { text-decoration: none; } a.siq-sb-logo { cursor: pointer; transition: background .15s; } a.siq-sb-logo:hover { background: var(--section-grey, #f8f9fb); } .siq-sb-mark { width: 28px; height: 28px; background: var(--blue-dark); border-radius: 7px; color: var(--white); font-size: 10px; font-weight: 700; font-family: 'Inter', sans-serif; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Demo data loaded → recolour the user avatar orange as a subtle indicator (logo stays on-brand; no banner, no layout change). Covers all nav variants. */ body.siq-demo-active .siq-sb-av { background: #d97706; } .siq-sb-wordmark { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: -0.3px; line-height: 1.1; } .siq-sb-wordmark span { color: var(--accent-blue); } .siq-sb-tagline { font-size: 10px; color: var(--grey-text, #6b7a95); margin-top: 1px; } .siq-sb-body { flex: 1; overflow-y: auto; padding: 10px 8px; } .siq-sb-body::-webkit-scrollbar { width: 3px; } .siq-sb-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .siq-sb-section { margin-bottom: 4px; } .siq-sb-sec-lbl { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--grey-text, #6b7a95); padding: 8px 8px 3px; font-family: 'Inter', sans-serif; } .siq-sb-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; font-size: 13px; color: var(--grey-text, #6b7a95); text-decoration: none; cursor: pointer; transition: background .1s, color .1s; white-space: nowrap; border: none; background: none; width: 100%; font-family: 'DM Sans', sans-serif; box-sizing: border-box; } .siq-sb-item:hover { background: var(--section-grey); color: var(--navy); text-decoration: none; } .siq-sb-item.active { background: var(--blue-pale); color: var(--blue-dark); font-weight: 500; } .siq-sb-item.siq-sb-locked { opacity: .45; cursor: not-allowed; } .siq-sb-item.siq-sb-locked:hover { background: none; color: var(--grey-text, #6b7a95); } /* Custom tooltip for locked nav items (fixed-position; never clipped by sidebar scroll) */ .siq-nav-tip { position: fixed; z-index: 4000; background: var(--navy, #0f1924); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 12px; line-height: 1.35; font-weight: 500; padding: 7px 11px; border-radius: 8px; max-width: 220px; box-shadow: 0 6px 22px rgba(15,25,36,.30); pointer-events: none; opacity: 0; transform: translateY(-50%) scale(.96); transition: opacity .12s ease, transform .12s ease; white-space: normal; } .siq-nav-tip.show { opacity: 1; transform: translateY(-50%) scale(1); } .siq-nav-tip::before { content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid var(--navy, #0f1924); } .siq-nav-tip.flip::before { left: auto; right: -5px; border-right: none; border-left: 5px solid var(--navy, #0f1924); } .siq-sb-item.siq-sb-group-hdr { color: var(--grey-text, #6b7a95); cursor: default; } .siq-sb-item.siq-sb-group-hdr.active { color: var(--blue-dark); background: none; font-weight: 400; } .siq-sb-ic { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; } .siq-sb-lbl { flex: 1; } .siq-sb-lock { font-size: 10px; margin-left: auto; } .siq-sb-children { padding-left: 10px; } .siq-sb-child { padding: 5px 9px; font-size: 12.5px; } .siq-sb-child .siq-sb-ic { font-size: 12px; } .siq-sb-badge { margin-left: auto; font-size: 10px; font-weight: 700; background: var(--blue-dark); color: var(--white); border-radius: 100px; padding: 1px 6px; min-width: 18px; text-align: center; font-family: 'Inter', sans-serif; } .siq-sb-badge.siq-sb-badge-err { background: #fee2e2; color: #b91c1c; } .siq-sb-badge.siq-sb-badge-ok { background: #dcfce7; color: #15803d; } .siq-sb-badge.siq-sb-badge-warn { background: #ffedd5; color: #b45309; } .siq-sb-divider { height: 0.5px; background: var(--border); margin: 6px 4px; } .siq-sb-footer { padding: 10px 8px; border-top: 0.5px solid var(--border); flex-shrink: 0; } .siq-coach-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border-radius: 7px; background: var(--blue-pale); border: 0.5px solid var(--border); color: var(--blue-dark); font-size: 13px; font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif; margin-bottom: 8px; transition: background .1s; } .siq-coach-btn:hover { background: #d4e4fc; } .siq-sb-user { display: flex; align-items: center; gap: 9px; padding: 5px 9px; } .siq-sb-av { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-dark); color: var(--white); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Inter', sans-serif; } .siq-sb-user-name { font-size: 12.5px; font-weight: 500; color: var(--navy); } /* ── ICON RAIL ── */ .siq-rail { position: fixed; top: 0; left: 0; bottom: 0; width: 52px; background: var(--white); border-right: 0.5px solid var(--border); display: flex; flex-direction: column; align-items: center; z-index: 300; } .siq-rail-logo { width: 52px; height: 50px; display: flex; align-items: center; justify-content: center; border-bottom: 0.5px solid var(--border); flex-shrink: 0; } .siq-rail-body { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 1px; overflow-y: auto; width: 100%; } .siq-rail-body::-webkit-scrollbar { display: none; } .siq-rail-item { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; text-decoration: none; position: relative; transition: background .1s; flex-shrink: 0; } .siq-rail-item:hover { background: var(--section-grey); } .siq-rail-item.active { background: var(--blue-pale); } .siq-rail-divider { width: 28px; height: 0.5px; background: var(--border); margin: 4px 0; flex-shrink: 0; } .siq-rail-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-dark); border: 1.5px solid var(--white); } .siq-rail-dot.err { background: #dc2626; } .siq-rail-dot.ok { background: #16a34a; } .siq-rail-dot.warn { background: #d97706; } .siq-rail-footer { padding: 8px 0 10px; border-top: 0.5px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; } /* ── LEGACY TOP-NAV (kept for backward compat, no longer rendered) ── */ .siq-nav { display: none; } /* Headings — Inter Bold only (never DM Sans for headings) */ h1, h2, h3, h4 { font-family: 'Inter', sans-serif; font-weight: 700; color: var(--black); line-height: 1.12; letter-spacing: -0.5px; } h1 { letter-spacing: -1px; } h2 { letter-spacing: -0.5px; } /* Italic emphasis in headings — accent-blue on light backgrounds, overridden to light-blue in hero */ h1 em, h2 em, h3 em { color: var(--accent-blue); font-style: italic; } a { color: var(--accent-blue); text-decoration: none; } a:hover { text-decoration: underline; } /* ── NAVIGATION ── */ .siq-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 40px; height: 68px; border-bottom: 0.5px solid var(--border); position: fixed; top: 0; left: 0; right: 0; background: var(--white); z-index: 100; gap: 16px; box-sizing: border-box; } /* Logo — "second-" in Blue Dark #1445a8, "iq" in Light Blue #7eb8f7 */ .siq-nav .logo { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 20px; white-space: nowrap; text-decoration: none; letter-spacing: -0.5px; } .siq-nav .logo .l1 { color: #0f1924; } /* "second-" black */ .siq-nav .logo .l2 { color: #2d7dd2; } /* "iq" accent blue */ .nav-badge { background: var(--arch-career-bg); color: var(--arch-career-text); border: 0.5px solid var(--arch-career-border); font-size: 11px; font-weight: 500; padding: 4px 12px; border-radius: 100px; white-space: nowrap; } .nav-right { display: flex; align-items: center; gap: 12px; } .nav-back { font-size: 13px; color: var(--grey-text, #5b6472); text-decoration: none; } .nav-back:hover { color: var(--black); text-decoration: none; } .nav-menu-btn { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--black); background: var(--section-grey); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 7px 12px; cursor: pointer; font-family: 'DM Sans', sans-serif; } .nav-menu-btn:hover { border-color: var(--blue-dark); color: var(--blue-dark); } /* Module dropdown */ .nav-menu-dropdown { display: none; position: absolute; top: 58px; right: 40px; background: var(--white); border: 0.5px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 8px; min-width: 260px; z-index: 200; } .nav-menu-dropdown.open { display: block; } .nav-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius); cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--black); text-decoration: none; } .nav-menu-item:hover { background: var(--blue-pale); color: var(--blue-dark); text-decoration: none; } .nav-menu-item.active { background: var(--blue-pale); color: var(--blue-dark); } .nav-menu-item.locked { color: #9ca3af; cursor: default; opacity: 0.6; } .nav-menu-item .item-icon { font-size: 16px; width: 20px; text-align: center; } .nav-menu-item .lock-icon { margin-left: auto; font-size: 11px; } .nav-menu-divider { height: 0.5px; background: var(--border); margin: 6px 0; } .nav-menu-label { font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #9ca3af; padding: 6px 12px 3px; font-family: 'Inter', sans-serif; } /* Coach button */ .coach-btn { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--white); background: var(--blue-dark); border: none; border-radius: var(--radius); padding: 7px 14px; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .2s; } .coach-btn:hover { background: #0a3d8f; } /* ── PROGRESS BAR ── */ .progress-track { height: 3px; background: var(--border); position: sticky; top: 52px; z-index: 99; } .progress-fill { height: 100%; background: var(--blue-dark); width: 0%; transition: width .4s ease; } /* ── SCREENS ── */ .screen { display: none; } .screen.active { display: block; animation: siq-fade .3s ease; } @keyframes siq-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── HERO SECTIONS ── */ .module-hero { background: var(--blue-dark); padding: 64px 40px; text-align: center; } .module-hero .eyebrow { display: inline-block; background: rgba(255,255,255,0.1); color: var(--blue-light); border: 0.5px solid rgba(255,255,255,0.2); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 16px; border-radius: 100px; margin-bottom: 24px; font-family: 'Inter', sans-serif; } .module-hero h1 { color: var(--white); font-size: 38px; max-width: 680px; margin: 0 auto 16px; } .module-hero h1 em, .module-hero h2 em, .module-hero h3 em { color: #7eb8f7; } .module-hero p { color: rgba(255,255,255,0.65); font-size: 15.5px; max-width: 560px; margin: 0 auto 28px; } /* ── FORM LAYOUT ── */ .form-wrap { max-width: 680px; margin: 0 auto; padding: 32px 24px 64px; background: var(--section-grey); } .screen-label { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); margin-bottom: 10px; display: block; font-family: 'Inter', sans-serif; } .screen-wrap h2 { font-size: 28px; margin-bottom: 8px; color: var(--navy); } .screen-wrap > p.lead { color: #5b6472; font-size: 14px; margin-bottom: 36px; line-height: 1.65; } /* ── QUESTIONS / FIELDS ── */ .q { margin-bottom: 30px; } .q label { display: block; font-size: 15px; font-weight: 600; color: var(--black); margin-bottom: 6px; font-family: 'Inter', sans-serif; } .q-hint { font-size: 12.5px; color: #5b6472; background: var(--blue-pale); border-left: 2px solid var(--blue-dark); padding: 8px 12px; border-radius: 0 6px 6px 0; margin-bottom: 10px; line-height: 1.55; } .q-hint b { color: var(--blue-dark); font-weight: 600; } .q-hint .formula { display: block; margin-top: 6px; font-weight: 500; } textarea, input[type=text] { width: 100%; border: 0.5px solid var(--border); border-radius: var(--radius); padding: 12px 14px; font-size: 14px; font-family: 'DM Sans', sans-serif; color: var(--black); background: var(--white); box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; } textarea { min-height: 80px; resize: vertical; padding-bottom: 40px; } /* Compact auto-growing single-line content fields (converted from text inputs) */ textarea.ag-input { min-height: 38px; padding-bottom: 9px; resize: none; overflow: hidden; line-height: 1.5; } input[type=text] { padding-right: 42px; } textarea::placeholder, input::placeholder { color: #9ca3af; opacity: 1; } textarea:focus, input:focus { outline: none; border-color: var(--blue-dark); box-shadow: 0 0 0 3px rgba(20,69,168,0.08); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field-error { font-size: 12px; color: var(--red); margin-top: 4px; display: none; } .field-error.show { display: block; } /* ── OPTION CARDS ── */ .option-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; } .option-card { border: 0.5px solid var(--border); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; font-size: 13.5px; font-weight: 500; background: var(--white); transition: all .2s; } .option-card:hover { border-color: var(--blue-light); } .option-card.selected { border: 2px solid var(--blue-dark); background: var(--blue-pale); color: var(--blue-dark); } /* ── GLOBAL PILL / CHIP SELECTED STATE ── */ /* Applies across all modules — light blue fill, dark blue border, no solid fill */ [class*="chip"].selected, [class*="pill"].selected, [class*="tag"].selected { border-color: #1445a8 !important; background: #e8f0fe !important; color: #1445a8 !important; font-weight: 600; box-shadow: 0 0 0 2px rgba(20,69,168,0.12); } /* ── BUTTONS ── */ /* Primary CTA — bg #1445a8, text white, hover darken to #0a3d8f, radius 8px */ .btn-primary { background: var(--blue-bright); color: var(--white); border: none; padding: 13px 24px; font-size: 14px; font-weight: 500; border-radius: var(--radius); cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .2s; display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0; } .btn-primary:hover { background: #1d4fd0; transform: translateY(-1px); } /* Secondary / Ghost — transparent bg, #0f1924 text, #e2eaf4 0.5px border */ .btn-secondary { background: var(--white); color: var(--black); border: 0.5px solid var(--border); padding: 12px 22px; font-size: 14px; font-weight: 500; border-radius: var(--radius); cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .2s; } .btn-secondary:hover { border-color: var(--accent-blue); color: var(--blue-dark); } /* On-dark-bg button — white bg, blue-dark text */ .btn-on-dark { background: var(--white); color: var(--blue-dark); border: none; padding: 13px 24px; font-size: 14px; font-weight: 500; border-radius: var(--radius); cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .2s; display: inline-flex; align-items: center; gap: 8px; } .btn-on-dark:hover { background: var(--blue-softer); } .btn-tinted { background: var(--blue-pale); color: var(--blue-dark); border: 0.5px solid var(--blue-dark); padding: 10px 22px; font-size: 13px; font-weight: 600; border-radius: var(--radius); cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .2s; } .btn-tinted:hover { background: var(--blue-dark); color: var(--white); } .btn-ghost { background: none; border: none; color: #5b6472; font-size: 13px; cursor: pointer; font-family: 'DM Sans', sans-serif; padding: 8px 4px; transition: color .2s; } .btn-ghost:hover { color: var(--black); } .btn-row { display: flex; align-items: center; justify-content: space-between; margin-top: 36px; padding-top: 24px; border-top: 0.5px solid var(--border); } .btn-center { text-align: center; } /* ── VOICE INPUT ── */ .voice-input-wrap { position: relative; } .voice-input-wrap textarea, .textarea-mic-wrap textarea { resize: none; } .mic-btn { position: absolute; width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all .2s; background: var(--section-grey); color: #5b6472; z-index: 2; } .mic-btn:hover { background: var(--blue-pale); color: var(--blue-dark); } .mic-btn.mic-bottom { bottom: 8px; right: 8px; } .mic-btn.mic-center { top: 50%; right: 8px; transform: translateY(-50%); } .mic-btn.listening { background: #fee2e2; color: var(--red); animation: pulse-mic 1.2s infinite; } @keyframes pulse-mic { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ── NUDGE ── */ .nudge { display: none; margin-top: 10px; background: var(--blue-pale); border: 0.5px solid var(--blue-dark); border-radius: var(--radius); padding: 12px 14px; font-size: 13px; color: var(--black); } .nudge.show { display: block; } .nudge .actions { margin-top: 10px; display: flex; gap: 10px; } .nudge button { font-size: 12.5px; padding: 7px 14px; border-radius: 6px; cursor: pointer; font-family: 'DM Sans', sans-serif; } .nudge .btn-fix { background: var(--blue-dark); color: var(--white); border: none; } .nudge .btn-keep { background: transparent; border: 0.5px solid var(--border); color: #5b6472; } /* ── REPEAT BLOCKS ── */ .repeat-block { border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 16px; background: var(--white); } .repeat-block-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-dark); margin-bottom: 14px; font-family: 'Inter', sans-serif; } /* ── STATUS BADGES ── */ .status-badge { font-size: 10.5px; font-weight: 600; padding: 3px 10px; border-radius: 100px; text-transform: none; } .status-badge.applied { background: var(--blue-pale); color: var(--blue-dark); } .status-badge.saved { background: var(--section-grey); color: #5b6472; border: 0.5px solid var(--border); } .status-badge.interviewing{ background: var(--amber-pale); color: #92400e; } .status-badge.offer { background: var(--green-pale); color: #15803d; } .status-badge.rejected { background: #fee2e2; color: #991b1b; } .status-badge.withdrawn { background: var(--section-grey); color: #5b6472; } .status-badge.lost { background: #fee2e2; color: #991b1b; } .status-badge.closed { background: #e7ebf0; color: #475569; } .tier-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 100px; } .tier-badge.strong_fit { background: var(--green-pale); color: #15803d; } .tier-badge.good_fit { background: #dbeafe; color: #1e40af; } .tier-badge.worth_applying{ background: var(--amber-pale); color: #92400e; } .tier-badge.reach { background: #fee2e2; color: #991b1b; } /* Voice-input mics hidden for now — they were placeholders (no real speech-to-text). Covers career-connections, content-system, post-writer, interview-prep. Delete this one rule to re-enable when real Web Speech voice input is built. */ .mic-btn, .ai-mic { display: none !important; } /* ── STEP NUMBER FILLS — use Blue Softer per brand ── */ .step-num { width: 32px; height: 32px; background: var(--blue-dark); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-family: 'Inter', sans-serif; } /* ── MODALS ── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,25,36,0.45); z-index: 500; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.active { display: flex; } .modal-box { background: var(--white); border-radius: var(--radius-lg); padding: 28px; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: var(--shadow-lg); border: 0.5px solid var(--border); } .modal-box h4 { font-size: 17px; margin-bottom: 8px; } .modal-box p { font-size: 13.5px; color: #5b6472; margin-bottom: 18px; line-height: 1.55; } /* ── BULK ACTION BAR (9 Jul 2026, per Grant) ── Shared across Contacts / Opportunities / Companies / Documents lists via SIQList.createBulkBar() in list-ui.js. Reuses the same blue-pale fill + blue-bright border already used for the "on" (active) stat-card state, rather than a new colour — Grant's call after the first mockup used an unrelated blue tone. */ .bulk-bar { display: none; align-items: center; gap: 10px; background: var(--blue-pale); border: 1.5px solid var(--blue-bright); border-radius: var(--radius); padding: 11px 16px; margin-bottom: 14px; position: relative; flex-wrap: wrap; } .bulk-bar.show { display: flex; } .bulk-count { font-size: 13px; font-weight: 600; color: var(--blue-dark); } .bulk-sep { width: 0.5px; height: 16px; background: var(--blue-border); } .bulk-btn { background: var(--white); border: 0.5px solid var(--blue-border); border-radius: 6px; padding: 6px 12px; font-size: 12px; color: var(--navy); cursor: pointer; font-family: 'DM Sans', sans-serif; display: inline-flex; align-items: center; gap: 5px; } .bulk-btn:hover { border-color: var(--blue-dark); color: var(--blue-dark); } .bulk-btn-danger { color: #993c1d; border-color: #f0997b; } .bulk-btn-danger:hover { background: #fef2ee; border-color: #f0997b; color: #993c1d; } .bulk-clear { background: none; border: none; color: var(--blue-dark); cursor: pointer; font-size: 15px; padding: 2px 6px; line-height: 1; } .bulk-field-panel { position: absolute; top: calc(100% + 6px); left: 16px; background: var(--white); border: 0.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 14px; width: 280px; z-index: 5; } .bulk-field-lbl { font-size: 11px; font-weight: 500; color: var(--grey-text); margin-bottom: 5px; } .bulk-field-panel select, .bulk-field-panel input { width: 100%; box-sizing: border-box; border: 0.5px solid var(--border); border-radius: 6px; padding: 7px 8px; font-size: 12.5px; margin-bottom: 10px; font-family: 'DM Sans', sans-serif; color: var(--navy); } .bulk-field-actions { display: flex; gap: 8px; } /* Multiple-field staging (9 Jul 2026, per Grant) — lets one bulk action apply several fields at once (e.g. Stage + Follow-up date) instead of a select-again-per-field round trip. */ .bulk-field-row { position: relative; padding-top: 2px; } .bulk-field-row + .bulk-field-row { margin-top: 4px; padding-top: 10px; border-top: 0.5px solid var(--border); } .bulk-field-remove { position: absolute; top: 8px; right: 0; background: none; border: none; color: var(--grey-text); cursor: pointer; font-size: 13px; padding: 2px 4px; line-height: 1; } .bulk-field-remove:hover { color: #b91c1c; } .bulk-field-add { background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 500; cursor: pointer; padding: 0 0 10px; font-family: 'DM Sans', sans-serif; } .bulk-field-add:hover { text-decoration: underline; } .siql-row-selected { background: #f4f7ff !important; } /* ── SHARED STYLED CONFIRM / PROMPT DIALOG ── App-wide replacement for native window.confirm()/window.prompt(), so destructive actions and quick text inputs match the app's own modal styling instead of the browser's unstyled system dialog. Injected once by nav.js (siqConfirm() / siqPrompt() in nav.js). */ .siq-dialog-overlay { display: none; position: fixed; inset: 0; background: rgba(15,25,36,0.45); z-index: 2000; align-items: center; justify-content: center; padding: 20px; } .siq-dialog-overlay.active { display: flex; } .siq-dialog-box { background: var(--white); border-radius: var(--radius-lg); padding: 26px; width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); border: 0.5px solid var(--border); } .siq-dialog-title { font-size: 16px; font-weight: 600; color: var(--navy); margin-bottom: 8px; } .siq-dialog-msg { font-size: 13.5px; color: #5b6472; line-height: 1.55; margin-bottom: 16px; white-space: pre-line; } .siq-dialog-input { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px; border: 0.5px solid var(--border); border-radius: var(--radius); margin-bottom: 18px; font-family: 'DM Sans', sans-serif; color: var(--navy); } .siq-dialog-input:focus { outline: none; border-color: var(--blue-bright, #2563eb); } .siq-dialog-select { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px; border: 0.5px solid var(--border); border-radius: var(--radius); margin-bottom: 18px; font-family: 'DM Sans', sans-serif; color: var(--navy); background: var(--white); } .siq-dialog-row { display: flex; gap: 10px; justify-content: flex-end; } .siq-dialog-ok.danger { background: #c0392b; } .siq-dialog-ok.danger:hover { background: #a93226; } /* Jump items */ .jump-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); border: 0.5px solid var(--border); background: var(--section-grey); cursor: pointer; font-size: 13.5px; font-weight: 500; width: 100%; font-family: 'DM Sans', sans-serif; text-align: left; color: var(--black); transition: all .15s; } .jump-item:hover { border-color: var(--blue-dark); background: var(--blue-pale); color: var(--blue-dark); } .jump-item .num { width: 22px; height: 22px; background: var(--blue-dark); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; font-family: 'Inter', sans-serif; } /* ── TOAST ── */ /* GLOBAL TOAST STANDARD (LOCKED 1 Jul 2026): one pill, top-center, revealed by .show. Covers every toast element in the app (.error-toast / .toast / .toast-bar). Do not re-style toasts per page — this is the single source of truth. .err = error (red). */ .error-toast, .toast, .toast-bar { position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-12px); background: #0e1420; color: #fff; font-size: 13.5px; font-weight: 500; padding: 12px 22px; border-radius: 100px; box-shadow: 0 10px 26px rgba(14,20,32,.28); opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; white-space: nowrap; z-index: 9999; } .error-toast.show, .toast.show, .toast-bar.show { opacity: 1; transform: translateX(-50%) translateY(0); } .error-toast.err, .toast.err, .toast-bar.err { background: #b91c1c; } .error-toast.ok, .toast.ok, .toast-bar.ok { background: #0e1420; } @media (max-width: 480px) { .error-toast, .toast, .toast-bar { max-width: calc(100vw - 32px); white-space: normal; text-align: center; } } /* ── COMPACT UPLOADER ── (secondary / fallback next to a paste field) */ .upload-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .or-text { font-size: 12px; color: var(--grey-text); } .upload-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--navy); cursor: pointer; transition: all .15s; } .upload-btn:hover { border-color: var(--blue-dark); color: var(--blue-dark); background: var(--blue-pale); } .upload-filename { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--blue-dark); } .upload-filename .x { cursor: pointer; color: var(--grey-text); font-size: 14px; line-height: 1; } .upload-filename .x:hover { color: #b91c1c; } .upload-filename.error { color: #b91c1c; } .upload-filename.working { color: var(--grey-text); } /* ── UPLOAD BOX ── */ .upload-box { border: 1.5px dashed #aab6c8; border-radius: var(--radius-lg); background: var(--white); padding: 28px; text-align: center; color: #5b6472; font-size: 13px; cursor: pointer; margin-bottom: 8px; transition: all .2s; } .upload-box:hover { border-color: var(--blue-dark); color: var(--blue-dark); background: var(--blue-pale); } .upload-box.dragover { border-color: var(--blue-dark); background: var(--blue-pale); border-style: solid; } .upload-box span { display: block; font-size: 22px; margin-bottom: 8px; } .upload-box.has-file { display: none; } /* uploaded-file chip — standard feedback after a file is chosen */ .upload-chip { display: none; align-items: center; gap: 9px; flex-wrap: wrap; background: var(--blue-pale); border: 0.5px solid #cdd9ec; border-radius: var(--radius-lg); padding: 8px 12px; margin-bottom: 8px; } .upload-chip.show { display: flex; } .upload-chip-name { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--blue-dark); } .upload-chip-name .ico { font-size: 15px; } .upload-chip-status { font-size: 12px; color: #15803d; font-weight: 500; } .upload-chip-status.working { color: var(--grey-text); font-weight: 400; } .upload-chip-status.error { color: #b91c1c; } .upload-chip-remove { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--grey-text); padding: 2px 4px; border-radius: 6px; } .upload-chip-remove:hover { background: #e2e8f0; color: #b91c1c; } /* ── LIST TOOLBAR (search / sort / paginate) — shared across list pages ── */ .list-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .list-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; background: var(--white); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 8px 12px; } .list-search:focus-within { border-color: var(--blue-dark); } .list-search input { border: none; outline: none; background: none; font-size: 13px; width: 100%; color: var(--navy); font-family: inherit; } .list-search .ico { color: var(--grey-text); font-size: 15px; } .list-count { font-size: 12.5px; color: var(--grey-text); white-space: nowrap; } .sort-caret { opacity: .4; font-size: 10px; } th.sorted .sort-caret { opacity: 1; color: var(--blue-dark); } .list-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .list-pager { display: flex; align-items: center; gap: 4px; } .list-pager button { font-size: 12.5px; padding: 5px 10px; border: 0.5px solid var(--border); background: var(--white); border-radius: 7px; cursor: pointer; color: var(--navy); } .list-pager button.on { background: var(--blue-dark); color: var(--white); border-color: var(--blue-dark); } .list-pager button:disabled { opacity: .4; cursor: default; } .pg-gap { color: var(--grey-text); padding: 0 2px; } .list-rows { font-size: 12.5px; color: var(--grey-text); display: flex; align-items: center; gap: 6px; } .list-rows select { font-size: 12.5px; padding: 4px 6px; border: 0.5px solid var(--border); border-radius: 6px; background: var(--white); } /* ════════════════════════════════════════════════════════════════════ SHARED "JOURNEY" COMPONENT — one progress language across modules (Hub roadmap, CV Builder, Content Plan, Interview Prep, LinkedIn). States: done (green) · next (solid blue) · available (blue) · optional / locked (grey dashed). ════════════════════════════════════════════════════════════════════ */ .jrny { background: var(--white); border: 0.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .jrny-hdr { background: var(--blue-dark); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .jrny-hdr .eyebrow { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 600; } .jrny-hdr h2 { color: #fff; font-size: 19px; margin: 4px 0 0; letter-spacing: -.4px; } /* App-wide completion-ring standard: green #22c55e arc, count INSIDE the ring, no external label. */ .jrny-ring { position: relative; width: 54px; height: 54px; flex-shrink: 0; } .jrny-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); } .jrny-ring circle.fg { transition: stroke-dashoffset .7s cubic-bezier(.4,0,.2,1); } .jrny-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; font-family: 'Inter', sans-serif; letter-spacing: -.2px; } .jrny-ring-label { display: none; } .jrny-body { padding: 20px 24px 6px; } .jrny-act { display: flex; gap: 16px; } .jrny-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 30px; } .jrny-num { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; z-index: 1; background: var(--blue-dark); color: #fff; } .jrny-num.done { background: var(--green); } .jrny-num.todo { background: var(--white); color: var(--grey-text); border: 2px solid var(--border); } .jrny-line { width: 3px; flex: 1; background: var(--border); margin: 3px 0; border-radius: 3px; } .jrny-line.done { background: var(--green); } .jrny-act:last-child .jrny-line { display: none; } .jrny-content { flex: 1; min-width: 0; padding-bottom: 18px; } .jrny-title { font-size: 14.5px; font-weight: 700; color: var(--navy); margin: 4px 0 1px; } .jrny-sub { font-size: 11.5px; color: var(--blue-dark); margin-bottom: 9px; font-weight: 500; } .jrny-chips { display: flex; flex-wrap: wrap; gap: 8px; } .jrny-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 100px; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: all .15s; border: 1px solid transparent; cursor: pointer; font-family: 'DM Sans', sans-serif; } .jrny-chip .ic { font-size: 11.5px; } .jrny-chip.done { background: var(--green-pale); color: #15803d; } .jrny-chip.done:hover { background: #bbf7d0; } .jrny-chip.avail { background: var(--blue-pale); color: var(--blue-dark); } .jrny-chip.avail:hover { background: var(--blue-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .jrny-chip.next { background: var(--blue-dark); color: #fff; box-shadow: 0 4px 12px rgba(20,69,168,.28); } .jrny-chip.next:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(20,69,168,.4); } .jrny-chip.next .tag, .jrny-chip.optional .tag { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 100px; letter-spacing: .06em; text-transform: uppercase; } .jrny-chip.next .tag { background: rgba(255,255,255,.22); } .jrny-chip.optional { background: var(--white); color: var(--grey-text); border: 1px dashed #cbd5e1; } .jrny-chip.optional .tag { background: var(--section-grey); color: var(--grey-text); } .jrny-chip.locked { background: var(--section-grey); color: var(--grey-text); border: 1px dashed #cbd5e1; cursor: default; } .jrny-foot { background: var(--blue-pale); border-top: 0.5px solid var(--border); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .jrny-foot .nl { font-size: 13px; color: var(--navy); } .jrny-foot .nl b { color: var(--blue-dark); } @media (max-width: 640px) { .jrny-hdr, .jrny-body, .jrny-foot { padding-left: 16px; padding-right: 16px; } } /* ── SPINNER ── */ .spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--blue-dark); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 16px; } @keyframes spin { to { transform: rotate(360deg); } } .loading-wrap { text-align: center; padding: 80px 24px; } .loading-wrap p { color: #5b6472; font-size: 14px; } /* ── SECTION CARDS ── */ .info-card { background: var(--section-grey); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 16px; } /* ── REMOVE BUTTON ── */ .remove-x-btn { background: none; border: none; color: #5b6472; font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 4px; line-height: 1; font-family: monospace; flex-shrink: 0; } .remove-x-btn:hover { background: #fee2e2; color: var(--red); } /* ── CARD GRIDS ── */ .card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } .app-card { border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 20px; background: var(--white); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: all .2s; } .app-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .app-card .card-num { width: 28px; height: 28px; background: var(--blue-dark); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-family: 'Inter', sans-serif; margin-bottom: 12px; } .app-card h3 { font-size: 15px; margin-bottom: 6px; } .app-card p.desc { color: #5b6472; font-size: 12.5px; line-height: 1.55; margin-bottom: 14px; flex-grow: 1; } .app-card .status-line { font-size: 11px; color: #5b6472; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .app-card .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); flex-shrink: 0; } .app-card .status-dot.done { background: var(--green); } .card-btn { display: inline-block; text-align: center; background: var(--blue-dark); color: var(--white); border: none; padding: 10px 16px; font-size: 13px; font-weight: 500; border-radius: var(--radius); cursor: pointer; font-family: 'DM Sans', sans-serif; text-decoration: none; transition: all .2s; } .card-btn:hover { background: #0a3d8f; } .app-card.locked .card-btn { background: var(--white); color: var(--black); border: 0.5px solid var(--border); } .app-card.locked .card-btn:hover { border-color: var(--blue-dark); color: var(--blue-dark); } /* ══════════════════════════════════════════════════════════ PAGE HEADER — compact 52px strip used by every module page ══════════════════════════════════════════════════════════ */ .page-header { display: flex; align-items: center; justify-content: space-between; padding: 0 28px; height: 52px; background: var(--white); border-bottom: 0.5px solid var(--border); flex-shrink: 0; position: sticky; top: 0; z-index: 50; } .page-header-left { display: flex; align-items: center; gap: 10px; } .page-header-icon { font-size: 18px; line-height: 1; flex-shrink: 0; } .page-header-title { font-size: 15px; font-weight: 600; color: var(--navy); letter-spacing: -0.2px; } .page-header-actions { display: flex; align-items: center; gap: 8px; } .page-header-btn { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all .15s; border: 0.5px solid var(--border); background: var(--white); color: var(--navy); text-decoration: none; } .page-header-btn:hover { background: var(--section-grey); } .page-header-btn.primary { background: var(--blue-bright); color: var(--white); border-color: var(--blue-bright); } .page-header-btn.primary:hover { background: #1d4fd0; } /* ══════════════════════════════════════════════════════════ PHASE LAYOUT — left step list + main content Used by CV Builder, Content System, Interview Prep ══════════════════════════════════════════════════════════ */ .phase-layout { display: flex; min-height: calc(100vh - 52px); } .phase-nav { width: 188px; flex-shrink: 0; border-right: 0.5px solid var(--border); background: var(--white); padding: 14px 0 24px; position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; } .phase-nav-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--grey-text); padding: 0 14px 10px; display: block; } .phase-item { display: flex; align-items: center; gap: 9px; padding: 8px 14px; cursor: pointer; border-left: 2px solid transparent; transition: background .1s; text-decoration: none; } .phase-item.done { border-left-color: var(--blue-dark); background: var(--blue-pale); } .phase-item.active { border-left-color: var(--navy); background: var(--section-grey); } .phase-item.locked { opacity: 0.4; cursor: default; } .phase-num { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; font-family: 'Inter', sans-serif; flex-shrink: 0; } .phase-item.done .phase-num { background: var(--blue-dark); color: var(--white); } .phase-item.active .phase-num { background: var(--navy); color: var(--white); } .phase-item.locked .phase-num { border: 0.5px solid var(--border); color: var(--grey-text); } .phase-name { font-size: 12px; color: var(--grey-text); line-height: 1.3; } .phase-item.done .phase-name { color: var(--blue-dark); font-weight: 500; } .phase-item.active .phase-name { color: var(--navy); font-weight: 500; } .phase-content { flex: 1; min-width: 0; background: var(--section-grey); } /* Hide old module-hero on pages that now use page-header */ .page-header ~ .module-hero, .page-header + .module-hero { display: none; } /* ── RESPONSIVE ── */ @media (max-width: 768px) { .field-row { grid-template-columns: 1fr; } .option-cards { grid-template-columns: 1fr; } .card-grid { grid-template-columns: 1fr 1fr; } .page-header { top: 52px; } /* Hide phase sidebar on mobile — Back/Continue buttons are the nav */ .phase-nav { display: none !important; } .phase-layout { display: block; } .phase-content { width: 100%; } } @media (max-width: 640px) { body { padding-top: 56px; } .siq-nav { padding: 0 16px; height: 56px; } .nav-menu-dropdown { right: 16px; } .module-hero { padding: 44px 20px; } .module-hero h1 { font-size: 26px; } .form-wrap { padding: 32px 16px 48px; } .screen-wrap h2 { font-size: 22px; } .btn-row { flex-wrap: wrap; gap: 10px; } .coach-btn span { display: none; } .card-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════ MOBILE STANDARDS (approved 4 Jul 2026 — spec: mobile-standards-mockup.html + "MOBILE layout standards (FINAL)" in the design doc). Desktop untouched. ══════════════════════════════════════════════════════════ */ /* Shared mobile components — used by the list pages, detail tabs and tasks. Rendered only inside .m-only containers (hidden on desktop). */ .m-only { display: none; } .mrow { display: flex; align-items: center; gap: 10px; padding: 10px 2px 10px 8px; margin-left: -2px; border-left: 3px solid transparent; text-decoration: none; color: inherit; cursor: pointer; } .mrow + .mrow { border-top: 0.5px solid var(--border); } .mrow:hover { background: #f6f9ff; text-decoration: none; } .mrow.overdue { border-left-color: #b91c1c; } /* OVERDUE = colour only — alignment never shifts */ .mrow-ava { width: 32px; height: 32px; border-radius: 50%; background: var(--blue-pale, #e8f0fe); color: var(--blue-deep, #1445a8); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .mrow-who { flex: 1; min-width: 0; } .mrow-who b { display: block; font-size: 13.5px; color: var(--ink, #0e2564); font-family: 'Inter', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mrow-who i { font-style: normal; font-size: 11.5px; color: var(--grey-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .mprog { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; min-width: 64px; } .mprog .mtrk { display: flex; align-items: center; gap: 3px; } .mprog .mtd { width: 8px; height: 8px; border-radius: 50%; background: #dbe4f0; } .mprog .mtd.d { background: #22c55e; } .mprog .mtd.c { background: #22c55e; box-shadow: 0 0 0 2.5px rgba(34,197,94,.22); } .mprog .mstg { font-size: 9.5px; color: var(--grey-text); } .msort { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; } .msort .lb { font-size: 10.5px; font-weight: 600; color: var(--grey-text); text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; } .msort button { background: #f2f5f9; border: 0.5px solid var(--border); border-radius: 100px; padding: 5px 12px; font-size: 11.5px; font-weight: 600; color: var(--ink, #0e2564); font-family: 'DM Sans', sans-serif; cursor: pointer; } .msort button.active { background: var(--blue-pale, #e8f0fe); border-color: var(--blue-bright, #2563eb); color: var(--blue-deep, #1445a8); } .mmore { display: block; width: 100%; text-align: left; border: none; background: none; border-top: 0.5px solid var(--border); padding: 8px 2px 0; font-size: 12px; font-weight: 600; color: var(--blue-bright, #2563eb); font-family: 'DM Sans', sans-serif; cursor: pointer; } .mmore:hover { text-decoration: underline; } @media (max-width: 640px) { /* 1 · Page header — title row clean, actions on their own full-width row */ .page-header { height: auto; flex-wrap: wrap; padding: 10px 16px; row-gap: 9px; } .page-header-actions { width: 100%; } .page-header-actions .page-header-btn { flex: 1; justify-content: center; white-space: nowrap; padding: 8px 10px; } /* Mobile containers swap in; desktop tables swap out (pages opt in with these classes) */ .m-only { display: block; } .m-hide { display: none !important; } }