/* ========================================================================== WarRoom · Party Command — design system The palette, type pairing and shape language take their direction from the "Policy" political template: a deep navy-slate ink, a hot crimson for action, gold for emphasis, generous pill geometry and wide, soft shadows. The party's own red, white and blue identity is kept — the template supplies the craft, not the identity. Fonts are served from wwwroot/fonts rather than a font CDN, matching the rest of the application: nothing here reaches out to a third party at render time. Montserrat and Poppins are both SIL Open Font License. ========================================================================== */ @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-var.woff2") format("woff2-variations"), url("../fonts/montserrat-var.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { /* Party identity — unchanged. */ --npp-red: #CE1126; --npp-red-bright: #E11D2E; --npp-blue: #1B45D7; --npp-blue-deep: #16308F; --npp-blue-mid: #2453D6; /* Template palette. Ink carries every dark surface; crimson is reserved for action and never used decoratively; gold marks the thing worth looking at. */ --ink: #223645; --ink-deep: #16242E; --ink-soft: #2E475A; --crimson: #FF1759; --crimson-deep: #D61F5F; --gold: #F2B32B; --gold-soft: #FDF3DC; --steel: #BFD1DF; --shell-bg: var(--ink-deep); --sidebar-bg: var(--ink); --sidebar-hover: var(--ink-soft); --page-bg: #F6FAFD; --surface: #FFFFFF; --surface-muted: #EAF6FF; --border: #DCE7F0; --border-strong: #BFD1DF; --text: #223645; --text-muted: #55707F; --text-faint: #8AA2B2; --on-dark: #FFFFFF; --on-dark-muted: #B9CBD9; --ok: #0F7B4A; --warn: #B45309; --danger: var(--crimson); /* Rounder than before: the template leans on 30–50px pills. Cards stay modest so dense tables do not float away from their own headers. */ --radius: 12px; --radius-lg: 18px; --radius-pill: 999px; --shadow-sm: 0 1px 3px rgba(34, 54, 69, .07); --shadow: 0 2px 28px rgba(34, 54, 69, .10); --shadow-lg: 0 2px 57px rgba(34, 54, 69, .13); --glow-crimson: 0 0 30px rgba(255, 23, 89, .22); --row-pad: .6rem .75rem; --card-pad: 1rem 1.15rem; --text-scale: 100%; --font: Poppins, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; --font-display: Montserrat, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; } /* Dark mode. Applied by [data-theme="dark"] on , set from the user's Appearance preference; "System" leaves the attribute off and defers to the OS. */ :root[data-theme="dark"] { --page-bg: #101C24; --surface: #1A2B36; --surface-muted: #16252F; --border: #2C4353; --border-strong: #3C5769; --text: #E6F0F6; --text-muted: #A7BECD; --text-faint: #7D97A8; --shadow: 0 2px 10px rgba(0, 0, 0, .35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page-bg: #101C24; --surface: #1A2B36; --surface-muted: #16252F; --border: #2C4353; --border-strong: #3C5769; --text: #E6F0F6; --text-muted: #A7BECD; --text-faint: #7D97A8; --shadow: 0 2px 10px rgba(0, 0, 0, .35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); } } /* Density and accessibility preferences */ :root[data-density="compact"] { --row-pad: .35rem .6rem; --card-pad: .7rem .85rem; } :root[data-density="comfortable"] { --row-pad: .85rem 1rem; --card-pad: 1.35rem 1.5rem; } :root[data-contrast="high"] { --border: #64748B; --border-strong: #334155; --text-muted: #1E293B; } :root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } * { box-sizing: border-box; } html { font-size: var(--text-scale); } body { margin: 0; font-family: var(--font); background: var(--page-bg); color: var(--text); font-size: .9rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--npp-blue); text-decoration: none; } a:hover { text-decoration: underline; } /* Montserrat carries every heading, Poppins the running text. The template runs a very wide display scale (55px/72px); this is an operational tool read at a desk, so the same pairing is used at a tighter scale — the contrast between the two faces does the work, not the size. */ h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; color: var(--text); } /* ---------------------------------------------------------------- app shell */ .wr-shell { display: flex; flex-direction: column; min-height: 100vh; } .wr-topbar { display: flex; align-items: center; gap: 1.25rem; height: 58px; padding: 0 1.1rem; background: var(--shell-bg); color: var(--on-dark); position: sticky; top: 0; z-index: 40; } .wr-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; white-space: nowrap; } .wr-brand-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--npp-blue); display: grid; place-items: center; font-size: .68rem; font-weight: 800; letter-spacing: .02em; } .wr-badge-version { background: var(--npp-red); color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .08em; padding: .28rem .6rem; border-radius: 999px; white-space: nowrap; } .wr-topnav { display: flex; gap: .15rem; margin-left: auto; margin-right: auto; overflow-x: auto; } .wr-topnav a { color: var(--on-dark-muted); padding: .42rem .8rem; border-radius: 7px; font-size: .84rem; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; } .wr-topnav a:hover { color: #fff; background: rgba(255, 255, 255, .07); text-decoration: none; } .wr-topnav a.active { color: #fff; background: var(--npp-blue); } .wr-topbar-right { display: flex; align-items: center; gap: .75rem; margin-left: auto; } .wr-subnav { display: flex; gap: .3rem; padding: .5rem 1.1rem; background: var(--shell-bg); border-top: 1px solid rgba(255, 255, 255, .06); overflow-x: auto; position: sticky; top: 58px; z-index: 39; } .wr-subnav a { color: var(--on-dark-muted); font-size: .8rem; padding: .3rem .7rem; border-radius: 6px; white-space: nowrap; } .wr-subnav a:hover { color: #fff; text-decoration: none; } .wr-subnav a.active { background: var(--npp-blue); color: #fff; font-weight: 600; } .wr-body { display: flex; flex: 1; min-height: 0; } /* ------------------------------------------------------------------ sidebar */ .wr-sidebar { width: 224px; flex-shrink: 0; background: var(--sidebar-bg); color: var(--on-dark); padding: 1rem .7rem 2rem; overflow-y: auto; } .wr-sidebar.collapsed { width: 62px; padding-inline: .45rem; } .wr-sidebar.collapsed .wr-nav-label, .wr-sidebar.collapsed .wr-nav-group, .wr-sidebar.collapsed .wr-countdown, .wr-sidebar.collapsed .wr-sidebar-id div { display: none; } .wr-sidebar-id { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; } .wr-sidebar-id strong { font-size: .92rem; } .wr-sidebar-id small { color: var(--on-dark-muted); font-size: .7rem; } .wr-countdown { background: linear-gradient(135deg, #16255C, #1B3175); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius); padding: .8rem .9rem; margin-bottom: 1.2rem; } .wr-countdown b { display: block; font-size: 1.5rem; line-height: 1.1; } .wr-countdown span { font-size: .62rem; letter-spacing: .1em; color: var(--on-dark-muted); } .wr-nav-group { font-size: .62rem; letter-spacing: .12em; color: #6B7BA5; font-weight: 700; margin: 1.1rem .55rem .4rem; } .wr-nav-item { display: flex; align-items: center; gap: .6rem; color: #C7D0E6; padding: .48rem .6rem; border-radius: 8px; font-size: .84rem; margin-bottom: .12rem; transition: background .15s, color .15s; } .wr-nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; } .wr-nav-item.active { background: var(--npp-blue); color: #fff; font-weight: 600; } .wr-nav-icon { width: 18px; text-align: center; opacity: .85; flex-shrink: 0; } .wr-nav-count { margin-left: auto; background: var(--npp-red); color: #fff; font-size: .66rem; font-weight: 700; padding: .05rem .42rem; border-radius: 999px; } /* --------------------------------------------------------------- main area */ .wr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .wr-crumbbar { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.4rem; background: var(--surface); border-bottom: 1px solid var(--border); } .wr-crumb { color: var(--text-faint); font-size: .85rem; } .wr-crumb strong { color: var(--text); } .wr-content { padding: 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; } /* ------------------------------------------------------------ decision brief */ .wr-brief { position: relative; background: linear-gradient(118deg, var(--ink-deep) 0%, var(--ink) 55%, var(--ink-soft) 100%); color: #fff; border-radius: var(--radius-lg); padding: 1.5rem 1.7rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; overflow: hidden; box-shadow: var(--shadow); } .wr-brief::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--crimson); } /* A soft crimson bloom in the corner, the one decorative flourish borrowed from the template's hero. Kept to a single element so it does not become a habit. */ .wr-brief::after { content: ""; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 23, 89, .28), transparent 68%); pointer-events: none; } .wr-brief-main { flex: 1 1 380px; } .wr-brief-eyebrow { font-family: var(--font-display); font-size: .63rem; letter-spacing: .14em; font-weight: 700; color: var(--gold); margin-bottom: .4rem; } .wr-brief h2 { color: #fff; font-size: 1.32rem; margin-bottom: .35rem; } .wr-brief p { margin: 0; color: #C6D6E1; font-size: .86rem; } .wr-brief-signal { border-left: 1px solid rgba(255, 255, 255, .25); padding-left: 1.2rem; min-width: 190px; } .wr-brief-signal span { font-size: .62rem; letter-spacing: .12em; color: var(--gold); font-family: var(--font-display); } .wr-brief-signal b { display: block; font-size: 1.45rem; margin: .2rem 0; font-family: var(--font-display); } .wr-brief-signal small { color: #C6D6E1; font-size: .75rem; } .wr-brief-actions { display: flex; flex-direction: column; gap: .5rem; } /* --------------------------------------------------------------- components */ .wr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .wr-card-head { display: flex; align-items: center; gap: .7rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--border); } .wr-card-head h3 { font-size: .92rem; } .wr-card-head .wr-rule { width: 3px; height: 15px; background: var(--npp-blue); border-radius: 2px; } .wr-card-head .spacer { margin-left: auto; } .wr-card-body { padding: var(--card-pad); } .wr-grid { display: grid; gap: .85rem; } .wr-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .wr-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .wr-grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .wr-grid.cols-5 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); } /* KPI tile */ .wr-kpi { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--crimson); border-radius: var(--radius); padding: .85rem 1rem; box-shadow: var(--shadow-sm); } .wr-kpi .label { font-size: .63rem; letter-spacing: .1em; font-weight: 700; color: var(--text-faint); font-family: var(--font-display); } .wr-kpi .value { font-size: 1.78rem; font-weight: 700; line-height: 1.15; margin: .15rem 0; font-family: var(--font-display); } .wr-kpi .note { font-size: .78rem; color: var(--text-muted); } .wr-kpi.red { border-top-color: var(--npp-red); } .wr-kpi.red .value { color: var(--npp-red); } .wr-kpi.green { border-top-color: var(--ok); } .wr-kpi.amber { border-top-color: var(--gold); } /* Operational summary strip */ .wr-summary { display: flex; flex-wrap: wrap; gap: .7rem; align-items: stretch; background: #101B3E; border-radius: var(--radius); padding: .55rem; } .wr-summary-title { flex: 1 1 260px; border-left: 3px solid var(--npp-red); padding: .5rem .9rem; color: #fff; } .wr-summary-title span { font-size: .6rem; letter-spacing: .14em; color: #93A2C8; } .wr-summary-title b { display: block; font-size: 1rem; } .wr-summary-stat { background: #17224B; border-radius: 8px; padding: .5rem .9rem; min-width: 118px; color: #fff; } .wr-summary-stat b { display: block; font-size: 1.28rem; } .wr-summary-stat span { font-size: .66rem; color: #93A2C8; } .wr-summary-stat.alert { background: #4A121F; } /* Process strip */ .wr-steps { display: flex; align-items: center; gap: .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem .8rem; overflow-x: auto; } .wr-step { display: flex; align-items: center; gap: .5rem; padding: .3rem .7rem; border-radius: 7px; white-space: nowrap; } .wr-step .n { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; border: 1px solid var(--border-strong); color: var(--text-faint); } .wr-step.done .n { background: var(--surface-muted); border-color: var(--npp-blue); color: var(--npp-blue); } .wr-step.current { background: #EEF2FE; } .wr-step.current .n { background: var(--npp-blue); border-color: var(--npp-blue); color: #fff; } .wr-step-sep { color: var(--text-faint); } /* Tables */ .wr-table-wrap { overflow-x: auto; } table.wr-table { width: 100%; border-collapse: collapse; font-size: .84rem; } .wr-table th { text-align: left; font-size: .63rem; letter-spacing: .09em; color: var(--text-faint); font-weight: 700; padding: .55rem .75rem; border-bottom: 1px solid var(--border); white-space: nowrap; } .wr-table td { padding: var(--row-pad); border-bottom: 1px solid var(--border); } .wr-table tbody tr:hover { background: var(--surface-muted); } .wr-table .num { text-align: right; font-variant-numeric: tabular-nums; } .wr-table tfoot td { font-weight: 700; border-top: 2px solid var(--border-strong); } /* Badges */ .wr-badge { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .06em; padding: .16rem .5rem; border-radius: 5px; background: var(--surface-muted); border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; } .wr-badge.blue { background: #EAEFFE; border-color: #C3D0F8; color: var(--npp-blue-deep); } .wr-badge.red { background: #FDECEE; border-color: #F5C2C8; color: var(--npp-red); } .wr-badge.green { background: #E6F5EE; border-color: #B5E0CB; color: var(--ok); } .wr-badge.amber { background: #FDF2E3; border-color: #F3D9AE; color: var(--warn); } .wr-badge.grey { background: #EFF2F7; border-color: #D8DFEA; color: #5A6884; } /* posture colours, after the workbook's five jobs */ .posture-defend { background: #EAEFFE; border-color: #C3D0F8; color: var(--npp-blue-deep); } .posture-flip { background: #FDECEE; border-color: #F5C2C8; color: var(--npp-red); } .posture-mobilize { background: #E6F1FF; border-color: #B6D4F8; color: #12539B; } .posture-eroding { background: #FDF2E3; border-color: #F3D9AE; color: var(--warn); } .posture-shield { background: #EFF2F7; border-color: #D8DFEA; color: #5A6884; } /* Buttons */ /* Pills, after the template, which uses 30–50px radii throughout. At this size a full pill reads as a button without needing a heavy border. */ .wr-btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: var(--radius-pill); padding: .45rem 1.05rem; font-size: .84rem; font-weight: 600; font-family: var(--font-display); cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; } .wr-btn:hover { background: var(--surface-muted); text-decoration: none; } .wr-btn:disabled { opacity: .55; cursor: not-allowed; } /* Crimson is the template's call to action and is kept for exactly that: the one thing on a screen the user is being asked to do. Everything else stays quiet. */ .wr-btn.primary { background: var(--crimson); border-color: var(--crimson); color: #fff; } .wr-btn.primary:hover { background: var(--crimson-deep); border-color: var(--crimson-deep); box-shadow: var(--glow-crimson); } .wr-btn.danger { background: var(--ink); border-color: var(--ink); color: #fff; } .wr-btn.danger:hover { background: var(--ink-deep); border-color: var(--ink-deep); } .wr-btn.ghost { background: transparent; border-color: transparent; color: var(--crimson); } .wr-btn.sm { padding: .28rem .75rem; font-size: .78rem; } /* Forms */ .wr-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; } .wr-field label { font-size: .74rem; font-weight: 600; color: var(--text-muted); } .wr-field .hint { font-size: .74rem; color: var(--text-faint); } .wr-input, .wr-select, .wr-textarea { font-family: inherit; font-size: .86rem; padding: .5rem .7rem; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); width: 100%; } .wr-input:focus, .wr-select:focus, .wr-textarea:focus { outline: 2px solid #B9C9F7; outline-offset: 0; border-color: var(--npp-blue); } .wr-textarea { min-height: 92px; resize: vertical; } .wr-checkline { display: flex; align-items: center; gap: .5rem; font-size: .84rem; } /* Avatar */ .wr-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; color: #fff; background: var(--npp-blue); object-fit: cover; flex-shrink: 0; } .wr-avatar.lg { width: 76px; height: 76px; font-size: 1.6rem; } .wr-avatar.sm { width: 22px; height: 22px; font-size: .6rem; } .wr-userchip { display: flex; align-items: center; gap: .55rem; color: var(--on-dark); font-size: .82rem; } .wr-userchip small { color: var(--on-dark-muted); } /* Alerts */ .wr-alert { border-radius: var(--radius); padding: .8rem 1rem; font-size: .85rem; border: 1px solid; } .wr-alert.info { background: #EEF3FE; border-color: #C6D4F9; color: #12327C; } .wr-alert.error { background: #FDECEE; border-color: #F3C0C6; color: #8C0F1E; } .wr-alert.success { background: #E9F6F0; border-color: #B3DFC9; color: #0B5A37; } .wr-alert.warn { background: #FDF4E5; border-color: #F0D6A6; color: #7A4A08; } /* Progress */ .wr-bar { height: 5px; background: var(--border); border-radius: 999px; overflow: hidden; } .wr-bar > i { display: block; height: 100%; background: var(--npp-blue); } .wr-bar.red > i { background: var(--npp-red); } .wr-bar.green > i { background: var(--ok); } /* Auth pages */ .wr-auth { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: linear-gradient(140deg, #0B1020 0%, #16255C 55%, #1B3175 100%); } .wr-auth-card { width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--radius-lg); padding: 2rem; box-shadow: 0 18px 48px rgba(0, 0, 0, .35); } .wr-auth-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem; } .wr-auth-brand .wr-brand-mark { width: 34px; height: 34px; } .wr-auth h1 { font-size: 1.24rem; margin-bottom: .3rem; } .wr-auth .lede { color: var(--text-muted); font-size: .86rem; margin: 0 0 1.3rem; } .wr-auth .footnote { margin-top: 1.3rem; font-size: .76rem; color: var(--text-faint); text-align: center; } .wr-otp { font-size: 1.6rem; letter-spacing: .55rem; text-align: center; font-variant-numeric: tabular-nums; padding: .7rem; } /* Gantt */ .wr-gantt { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } table.wr-gantt-table { border-collapse: collapse; font-size: .76rem; min-width: 100%; } .wr-gantt-table th, .wr-gantt-table td { border-bottom: 1px solid var(--border); } .wr-gantt-table th.month { width: 26px; min-width: 26px; font-size: .56rem; color: var(--text-faint); font-weight: 600; padding: .35rem .1rem; text-align: center; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; } .wr-gantt-table th.year { font-size: .6rem; letter-spacing: .08em; color: var(--text-faint); text-align: center; } .wr-gantt-table td.label { padding: .3rem .7rem; position: sticky; left: 0; background: var(--surface); border-right: 1px solid var(--border); min-width: 290px; max-width: 290px; } .wr-gantt-table td.label small { color: var(--text-faint); } .wr-gantt-cell { width: 26px; min-width: 26px; height: 22px; padding: 0; } .wr-gantt-cell.in { background: var(--npp-blue); } .wr-gantt-cell.in.start { border-radius: 4px 0 0 4px; } .wr-gantt-cell.in.end { border-radius: 0 4px 4px 0; } .wr-gantt-cell.in.critical { background: var(--npp-red); } .wr-gantt-cell.in.high { background: #E1663A; } .wr-gantt-cell.poll { background: rgba(206, 17, 38, .13); } .wr-gantt-row-cat td { background: var(--surface-muted); font-weight: 700; font-size: .74rem; } /* Board */ .wr-board { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .5rem; } .wr-board-col { flex: 0 0 262px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius); } .wr-board-col > header { display: flex; align-items: center; justify-content: space-between; padding: .55rem .8rem; border-bottom: 1px solid var(--border); font-size: .8rem; font-weight: 700; } .wr-board-col.blocked > header { border-top: 3px solid var(--npp-red); border-radius: var(--radius) var(--radius) 0 0; } .wr-board-col.done > header { border-top: 3px solid var(--ok); border-radius: var(--radius) var(--radius) 0 0; } .wr-board-items { padding: .55rem; display: flex; flex-direction: column; gap: .5rem; max-height: 62vh; overflow-y: auto; } .wr-task-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .7rem; } .wr-task-card a { font-weight: 600; font-size: .84rem; color: var(--text); } .wr-task-card .meta { display: flex; align-items: center; gap: .4rem; margin-top: .45rem; font-size: .72rem; color: var(--text-faint); } /* Tabs */ .wr-tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--border); overflow-x: auto; } .wr-tab { padding: .5rem .9rem; font-size: .84rem; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; white-space: nowrap; } .wr-tab:hover { color: var(--text); } .wr-tab.active { color: var(--npp-blue); border-bottom-color: var(--npp-blue); } /* Utility */ .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .small { font-size: .78rem; } .tiny { font-size: .7rem; } .num { font-variant-numeric: tabular-nums; } .right { text-align: right; } .row { display: flex; align-items: center; gap: .6rem; } .row.wrap { flex-wrap: wrap; } .spacer { margin-left: auto; } .stack { display: flex; flex-direction: column; gap: .85rem; } .nowrap { white-space: nowrap; } .hidden { display: none; } .wr-empty { padding: 2.2rem 1rem; text-align: center; color: var(--text-faint); font-size: .86rem; } @media (max-width: 900px) { .wr-sidebar { display: none; } .wr-topnav { margin: 0; } .wr-content { padding: .9rem; } } /* ========================================================================== Welcome — the page a user lands on after signing in. Chromeless and full-bleed, taking the template's hero treatment: ink gradient, a crimson bloom, gold eyebrow, oversized display type. It is the one screen in the platform allowed to be emotional, because it is the only one nobody makes a decision on. Everything past it is a working tool. ========================================================================== */ .wr-welcome { min-height: 100vh; background: var(--page-bg); display: flex; flex-direction: column; } .wr-welcome-hero { position: relative; background: linear-gradient(118deg, var(--ink-deep) 0%, var(--ink) 58%, var(--ink-soft) 100%); color: #fff; padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.4rem, 6vw, 5rem); display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center; justify-content: space-between; overflow: hidden; } /* Two blooms rather than one: the template layers its hero, and a single circle on this much surface reads as a mistake. */ .wr-welcome-hero::before, .wr-welcome-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .wr-welcome-hero::before { right: -140px; top: -180px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(255, 23, 89, .30), transparent 68%); } .wr-welcome-hero::after { left: -120px; bottom: -220px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(242, 179, 43, .16), transparent 70%); } .wr-welcome-inner { position: relative; z-index: 1; max-width: 46rem; } .wr-welcome-eyebrow { font-family: var(--font-display); font-size: .68rem; letter-spacing: .22em; font-weight: 600; color: var(--gold); margin: 0 0 1.1rem; } .wr-welcome-greeting { font-family: var(--font-display); font-size: clamp(2.1rem, 5.5vw, 3.6rem); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; color: #fff; margin: 0 0 .8rem; } .wr-welcome-line { margin: 0 0 1.8rem; color: var(--steel); font-size: .95rem; letter-spacing: .01em; } .wr-welcome-mission { border-left: 3px solid var(--crimson); padding-left: 1.1rem; margin-bottom: 2rem; } .wr-welcome-mission span { display: block; font-family: var(--font-display); font-size: .6rem; letter-spacing: .2em; color: var(--gold); margin-bottom: .45rem; } .wr-welcome-mission strong { display: block; font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 600; line-height: 1.35; color: #fff; margin-bottom: .4rem; } .wr-welcome-mission small { color: var(--steel); font-size: .85rem; } .wr-welcome-actions { display: flex; flex-wrap: wrap; gap: .75rem; } .wr-btn.lg { padding: .72rem 1.7rem; font-size: .92rem; } .wr-btn.ghost-light { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; } .wr-btn.ghost-light:hover { background: rgba(255, 255, 255, .10); border-color: #fff; } /* The countdown. Deliberately the largest number on the page: it is the only one that cannot be argued with or revised. */ .wr-welcome-clock { position: relative; z-index: 1; text-align: center; padding: 1.6rem 2rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .05); backdrop-filter: blur(2px); min-width: 13rem; } .wr-welcome-clock span { display: block; font-family: var(--font-display); font-size: .6rem; letter-spacing: .2em; color: var(--gold); } .wr-welcome-clock b { display: block; font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 4.2rem); font-weight: 700; line-height: 1; margin: .35rem 0 .2rem; color: #fff; } .wr-welcome-clock small { display: block; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid rgba(255, 255, 255, .15); color: var(--steel); font-size: .76rem; } /* Stats strip, lifted out of the hero so it overlaps the fold slightly — the template does the same with its service cards. */ .wr-welcome-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: -2.2rem clamp(1.4rem, 6vw, 5rem) 0; position: relative; z-index: 2; } .wr-welcome-stat { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--crimson); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); } .wr-welcome-stat span { font-family: var(--font-display); font-size: .6rem; letter-spacing: .14em; font-weight: 600; color: var(--text-faint); } .wr-welcome-stat b { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1.1; margin: .3rem 0 .2rem; } .wr-welcome-stat small { color: var(--text-muted); font-size: .8rem; } .wr-welcome-stat:nth-child(2) { border-top-color: var(--gold); } .wr-welcome-stat:nth-child(3) { border-top-color: var(--npp-blue); } .wr-welcome-stat:nth-child(4) { border-top-color: var(--ok); } .wr-welcome-modules { padding: 2.5rem clamp(1.4rem, 6vw, 5rem) 0; } .wr-welcome-modules-head { font-family: var(--font-display); font-size: .68rem; letter-spacing: .18em; font-weight: 600; color: var(--text-faint); margin: 0 0 1rem; } .wr-welcome-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .85rem; } .wr-welcome-module { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.15rem; color: var(--text); transition: transform .15s, box-shadow .15s, border-color .15s; } .wr-welcome-module:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--steel); } .wr-welcome-module .ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--crimson); margin-bottom: .6rem; } .wr-welcome-module strong { display: block; font-family: var(--font-display); font-size: .95rem; margin-bottom: .2rem; } .wr-welcome-module small { color: var(--text-muted); font-size: .8rem; line-height: 1.45; } .wr-welcome-foot { margin: 2.5rem 0 0; padding: 1.6rem clamp(1.4rem, 6vw, 5rem) 2.5rem; color: var(--text-faint); font-size: .82rem; max-width: 52rem; } @media (max-width: 720px) { .wr-welcome-hero { flex-direction: column; align-items: flex-start; } .wr-welcome-clock { width: 100%; } .wr-welcome-stats { margin-top: 1.2rem; } }