/* ========================================================================== EWO 360° Cloud and AI — Design System (v3: dark default, light via toggle) Dark (default): --bg #0B1220 · --surface #131B2E · --ink #E8ECF4 --signal #3FA9F5 (bright blue, tuned for dark bg) --amber #F5A623 (bright gold, tuned for dark bg) Light ([data-theme="light"] on ): --bg #FFFFFF · --surface #F3F2F1 · --ink #1B1B1B --signal #0067B8 (deep blue, tuned for light bg) --amber #B25900 (deep amber, tuned for light bg) Every section reads these same variable names, so toggling the attribute on re-themes the entire site uniformly — nothing is hard-coded to stay dark or light except small decorative SVG accents inside the hero illustration. Type: Space Grotesk (display) / IBM Plex Sans (body) / IBM Plex Mono (data) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ --bg: #0B1220; --surface: #131B2E; --surface-2: #1A2438; --ink: #E8ECF4; --ink-dim: #97A3BF; --signal: #3FA9F5; --signal-dim: rgba(63,169,245,0.14); --signal-dark: #7CC4F7; --signal-border: rgba(63,169,245,0.35); --amber: #F5A623; --amber-dim: rgba(245,166,35,0.14); --amber-ink: #16110a; --amber-shadow: rgba(245,166,35,0.25); --good: #22C55E; --good-dim: rgba(34,197,94,0.14); --info: #A78BFA; --info-dim: rgba(167,139,250,0.14); --line: #2A3550; --danger: #E5636B; --header-bg: rgba(11,18,32,0.86); --tint-blue: rgba(63,169,245,0.10); --tint-amber: rgba(245,166,35,0.06); --glow-signal: rgba(63,169,245,0.30); --danger-dim: rgba(229,99,107,0.14); --danger-border: rgba(229,99,107,0.35); /* Work-item-type categorical palette (dataviz skill reference palette, slots 1-6 + "Other"): fixed hue per type across every ADO project, validated for adjacent-pair CVD/contrast on stacked bars. */ --wi-epic: #3987e5; --wi-feature: #d95926; --wi-story: #199e70; --wi-issue: #c98500; --wi-bug: #d55181; --wi-task: #008300; --wi-other: #9085e9; /* Same 7 validated slots, generically named — for charts stacked by a dimension other than work-item type (e.g. team member) where the --wi-* names would be misleading. */ --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --font-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif; --font-body: 'IBM Plex Sans', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --container: 1180px; --radius: 10px; } html[data-theme="light"]{ --bg: #FFFFFF; --surface: #F3F2F1; --surface-2: #FAF9F8; --ink: #1B1B1B; --ink-dim: #5C5C5C; --signal: #0067B8; --signal-dim: rgba(0,103,184,0.08); --signal-dark: #004C87; --signal-border: rgba(0,103,184,0.3); --amber: #B25900; --amber-dim: rgba(178,89,0,0.10); --amber-ink: #FFFFFF; --amber-shadow: rgba(178,89,0,0.25); --good: #15803D; --good-dim: rgba(21,128,61,0.10); --info: #6D28D9; --info-dim: rgba(109,40,217,0.10); --line: #E1E1E1; --danger: #A80000; --header-bg: rgba(255,255,255,0.88); --tint-blue: rgba(0,103,184,0.06); --tint-amber: rgba(178,89,0,0.05); --glow-signal: rgba(0,103,184,0.16); --danger-dim: rgba(168,0,0,0.08); --danger-border: rgba(168,0,0,0.3); --wi-epic: #2a78d6; --wi-feature: #eb6834; --wi-story: #1baf7a; --wi-issue: #eda100; --wi-bug: #e87ba4; --wi-task: #008300; --wi-other: #4a3aa7; --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; overflow-x: hidden; color-scheme: dark; } html[data-theme="light"]{ color-scheme: light; } body{ margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; width: 100%; transition: background-color 0.2s ease, color 0.2s ease; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; } h1{ font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 700; } h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); } h3{ font-size: 1.25rem; } p{ margin: 0 0 1em; color: var(--ink-dim); } a{ color: inherit; text-decoration: none; } img{ max-width: 100%; display: block; } ul{ margin: 0; padding: 0; list-style: none; } .mono{ font-family: var(--font-mono); } .eyebrow{ font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; } .eyebrow::before{ content: ''; width: 7px; height: 7px; background: var(--signal); border-radius: 50%; box-shadow: 0 0 8px var(--signal); } .container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; } /* Focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline: 2px solid var(--signal); outline-offset: 3px; } /* -------------------------------- Header -------------------------------- */ .site-header{ position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .site-header .container{ display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding-top: 10px; padding-bottom: 10px; gap: 16px; } .brand{ display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); } .brand-mark{ width: 30px; height: 30px; flex-shrink: 0; } .brand small{ display: block; font-family: var(--font-mono); font-weight: 400; font-size: 0.62rem; letter-spacing: 0.08em; color: var(--ink-dim); text-transform: uppercase; margin-top: 1px; } .nav-links{ display: flex; align-items: center; gap: 34px; } .nav-links a{ font-size: 0.94rem; color: var(--ink-dim); transition: color 0.15s ease; position: relative; } .nav-links a:hover, .nav-links a.active{ color: var(--ink); } .nav-links a.active::after{ content: ''; position: absolute; left: 0; bottom: -22px; width: 100%; height: 2px; background: var(--signal); } /* -------------------------------- Header "About" dropdown -------------------------------- */ .nav-dropdown{ position: relative; } .nav-dropdown-btn{ background: none; border: none; padding: 0; font-family: var(--font-body); font-size: 0.94rem; color: var(--ink-dim); cursor: pointer; transition: color 0.15s ease; position: relative; } .nav-dropdown-btn:hover, .nav-dropdown-btn.active{ color: var(--ink); } .nav-dropdown-btn.active::after{ content: ''; position: absolute; left: 0; bottom: -22px; width: 100%; height: 2px; background: var(--signal); } .nav-dropdown-list{ position: absolute; top: calc(100% + 10px); left: 0; min-width: 150px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px -10px rgba(0,0,0,0.5); padding: 6px; z-index: 150; } .nav-dropdown-list a{ display: block; padding: 9px 12px; border-radius: 6px; font-size: 0.88rem; color: var(--ink); } .nav-dropdown-list a:hover{ background: var(--signal-dim); color: var(--signal); } .nav-cta{ border: 1px solid var(--line); padding: 6px 12px; border-radius: 6px; font-size: 0.76rem !important; white-space: nowrap; transition: border-color 0.15s ease, background 0.15s ease; } .nav-cta:hover{ border-color: var(--signal); background: var(--signal-dim); } .nav-toggle{ display: none; background: none; border: none; color: var(--ink); font-size: 1.6rem; cursor: pointer; } /* -------------------------------- Theme toggle -------------------------------- */ .theme-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink-dim); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .theme-toggle:hover{ border-color: var(--signal); color: var(--signal); background: var(--signal-dim); } .theme-toggle svg{ width: 18px; height: 18px; } .theme-toggle .icon-moon{ display: none; } html[data-theme="light"] .theme-toggle .icon-sun{ display: none; } html[data-theme="light"] .theme-toggle .icon-moon{ display: block; } @media (max-width: 860px){ .nav-links .theme-toggle{ margin-top: 4px; } } /* -------------------------------- Public site profile menu -------------------------------- */ .profile-menu{ position: relative; flex-shrink: 0; } .profile-avatar-btn{ display: inline-flex; padding: 0; border: none; background: none; cursor: pointer; border-radius: 50%; } .profile-avatar-img{ display: block; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); transition: border-color 0.15s ease; } .profile-avatar-btn:hover .profile-avatar-img, .profile-avatar-btn:focus-visible .profile-avatar-img{ border-color: var(--signal); } .profile-dropdown{ position: absolute; top: calc(100% + 10px); right: 0; min-width: 160px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px -10px rgba(0,0,0,0.5); padding: 6px; z-index: 150; } .profile-dropdown a{ display: block; padding: 9px 12px; border-radius: 6px; font-size: 0.88rem; color: var(--ink); } .profile-dropdown a[hidden]{ display: none; } .profile-dropdown a:hover{ background: var(--signal-dim); color: var(--signal); } .profile-dropdown a.disabled{ opacity: 0.4; cursor: not-allowed; } .profile-dropdown a.disabled:hover{ background: none; color: var(--ink); } .profile-hover-card{ position: absolute; top: calc(100% + 10px); right: 0; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px -10px rgba(0,0,0,0.5); padding: 14px 16px; z-index: 149; } .profile-hover-name{ font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--ink); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .profile-hover-row{ display: flex; justify-content: space-between; gap: 12px; font-size: 0.82rem; color: var(--ink); padding: 3px 0; } .profile-hover-label{ color: var(--ink-dim); } .profile-denied-toast{ position: absolute; top: calc(100% + 10px); right: 0; background: rgba(229,99,107,0.14); color: var(--danger); border: 1px solid var(--danger); border-radius: 8px; padding: 9px 14px; font-size: 0.85rem; font-weight: 600; z-index: 151; white-space: nowrap; } @media (max-width: 860px){ .nav-links .profile-menu{ margin-top: 4px; } .profile-dropdown, .profile-hover-card, .profile-denied-toast{ right: auto; left: 0; } } @media (max-width: 480px){ .brand{ font-size: 1rem; gap: 8px; } .brand-mark{ width: 26px; height: 26px; } } @media (max-width: 860px){ .nav-toggle{ display: block; } .nav-links{ position: absolute; top: 72px; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; padding: 20px 28px 26px; gap: 18px; display: none; } .nav-links.open{ display: flex; } .nav-links a.active::after{ display: none; } } /* -------------------------------- Buttons -------------------------------- */ .btn{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; padding: 13px 26px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color .15s ease; } .btn:hover{ transform: translateY(-1px); } .btn-primary{ background: var(--amber); color: var(--amber-ink); box-shadow: 0 0 0 rgba(0,0,0,0); } .btn-primary:hover{ box-shadow: 0 6px 24px var(--amber-shadow); } .btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover{ border-color: var(--signal); color: var(--signal); } .btn-block{ width: 100%; justify-content: center; } /* -------------------------------- Hero -------------------------------- */ .hero{ padding: 84px 0 60px; position: relative; overflow: hidden; } .hero .container{ display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1{ margin-bottom: 22px; } .hero h1 .hl{ color: var(--signal); } .hero-lede{ font-size: 1.12rem; max-width: 46ch; } .hero-actions{ display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; } .hero-stats{ display: flex; gap: 34px; margin-top: 46px; flex-wrap: wrap; } .hero-stat b{ display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); } .hero-stat span{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; } .hero-visual{ position: relative; } .hero-visual svg{ width: 100%; height: auto; } @media (max-width: 900px){ .hero .container{ grid-template-columns: 1fr; } .hero-visual{ order: -1; max-width: 420px; margin: 0 auto; } } /* Pipeline diagram animation */ .trace{ stroke: var(--signal); stroke-width: 2; fill: none; stroke-dasharray: 6 10; animation: dash 14s linear infinite; opacity: 0.85; } .trace-slow{ animation-duration: 22s; opacity: 0.4; stroke: var(--ink-dim); } @keyframes dash{ to{ stroke-dashoffset: -320; } } .pulse{ animation: pulse 2.6s ease-in-out infinite; } @keyframes pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.45; } } .node-label{ font-family: 'IBM Plex Mono', monospace; font-size: 11px; fill: var(--ink-dim); } /* -------------------------------- Sections -------------------------------- */ section{ padding: 84px 0; } .section-head{ max-width: 640px; margin-bottom: 52px; } .section-head.center{ margin-left: auto; margin-right: auto; text-align: center; } .divider{ border: none; border-top: 1px solid var(--line); margin: 0; } .bg-surface{ background: var(--surface); } /* Pipeline / services stages */ .stage-line{ position: relative; } .stages{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; } .stages::before{ content: ''; position: absolute; top: 34px; left: 8%; right: 8%; height: 1px; background: repeating-linear-gradient(to right, var(--line) 0 8px, transparent 8px 14px); z-index: 0; } .stage{ position: relative; z-index: 1; padding: 0 26px; } .stage-index{ width: 68px; height: 68px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: var(--signal); font-size: 0.85rem; margin-bottom: 22px; } .stage h3{ margin-bottom: 10px; } .stage .tags{ margin-top: 16px; } @media (max-width: 860px){ .stages{ grid-template-columns: 1fr; gap: 44px; } .stages::before{ display: none; } } .tags{ display: flex; flex-wrap: wrap; gap: 8px; } .tag{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--signal); background: var(--signal-dim); border: 1px solid var(--signal-border); padding: 4px 10px; border-radius: 4px; white-space: nowrap; } /* Cards */ .grid-2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px){ .grid-2, .grid-3{ grid-template-columns: 1fr; } } .card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; transition: border-color .2s ease, transform .2s ease; } .card:hover{ border-color: var(--signal-border); transform: translateY(-3px); } /* Results, not tools */ .results-list{ list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; } .results-list li{ padding-left: 22px; position: relative; font-size: 0.95rem; } .results-list-tool li{ color: var(--ink-dim); } .results-list-tool li::before{ content: '–'; position: absolute; left: 0; color: var(--ink-dim); } .results-list-result li{ color: var(--ink); font-weight: 500; } .results-list-result li::before{ content: '+'; position: absolute; left: 0; color: var(--amber); font-weight: 700; } .step-num{ font-family: var(--font-mono); font-size: 0.85rem; color: var(--amber); display: block; margin-bottom: 10px; } .results-method-grid{ margin-top: 12px; display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 48px; align-items: center; } @media (max-width: 820px){ .results-method-grid{ grid-template-columns: 1fr; } } .results-loop-diagram svg{ width: 100%; height: auto; } .loop-arrow{ fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; } .loop-node{ fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; } .loop-center{ fill: var(--bg); stroke: var(--amber); stroke-width: 1.5; } .loop-node-label{ font-family: var(--font-mono); font-size: 11.5px; fill: var(--ink); } .loop-node-sub{ font-family: var(--font-body); font-size: 9.5px; fill: var(--ink-dim); } .loop-center-label{ font-family: var(--font-display); font-size: 15px; fill: var(--amber); font-weight: 600; } .results-method-row{ min-width: 0; } .results-method-row .tile{ flex: 0 0 100%; } .results-method-item p{ max-width: 58ch; } .results-method-more{ display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--amber); } a.results-method-item:hover .results-method-more{ text-decoration: underline; } /* Project case-study cards */ .project-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; display: grid; grid-template-columns: 200px 1fr; gap: 30px; } .project-meta{ border-right: 1px solid var(--line); padding-right: 26px; } .project-meta .client-label{ font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; } .project-meta .company{ font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); margin-bottom: 12px; } .project-meta .role{ font-size: 0.85rem; color: var(--ink-dim); margin-bottom: 14px; } .project-meta .duration{ display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-dim); letter-spacing: 0.02em; } .project-body ul{ margin-top: 14px; } .project-body li{ color: var(--ink-dim); padding-left: 18px; position: relative; margin-bottom: 10px; font-size: 0.95rem; } .project-body li::before{ content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--signal); border-radius: 1px; } @media (max-width: 760px){ .project-card{ grid-template-columns: 1fr; } .project-meta{ border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 18px; } } /* Track record strip */ .track-strip{ display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .track-item{ padding: 30px 24px; border-right: 1px solid var(--line); text-align: center; } .track-item:last-child{ border-right: none; } .track-item b{ display: block; font-family: var(--font-display); font-size: 2rem; color: var(--signal); margin-bottom: 6px; } .track-item span{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.05em; } @media (max-width: 760px){ .track-strip{ grid-template-columns: repeat(2, 1fr); } .track-item{ border-bottom: 1px solid var(--line); } } /* Bio */ .bio-layout{ display: grid; grid-template-columns: 300px 1fr; gap: 50px; align-items: start; } @media (max-width: 860px){ .bio-layout{ grid-template-columns: 1fr; } } .bio-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; text-align: center; } .avatar-ring{ width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 18px; background: linear-gradient(145deg, var(--signal-dim), var(--amber-dim)); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2rem; color: var(--signal); } .bio-card h3{ margin-bottom: 2px; } .bio-card .role{ color: var(--ink-dim); font-size: 0.85rem; margin-bottom: 20px; } .bio-links{ display: flex; flex-direction: column; gap: 10px; text-align: left; font-family: var(--font-mono); font-size: 0.82rem; } .bio-links a{ color: var(--ink-dim); } .bio-links a:hover{ color: var(--signal); } /* Contact */ .contact-layout{ display: grid; grid-template-columns: 1fr 1fr; gap: 50px; } @media (max-width: 860px){ .contact-layout{ grid-template-columns: 1fr; } } .field{ margin-bottom: 20px; } .field label{ display: block; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } .field input, .field textarea, .field select{ width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 13px 14px; color: var(--ink); font-family: var(--font-body); font-size: 0.95rem; transition: border-color 0.15s ease; } .field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--signal); outline: none; } .field textarea{ resize: vertical; min-height: 120px; } .form-note{ font-size: 0.85rem; color: var(--ink-dim); margin-top: 14px; } .form-status{ font-family: var(--font-mono); font-size: 0.85rem; margin-top: 14px; min-height: 1.2em; } .form-status.ok{ color: var(--signal); } .form-status.err{ color: var(--danger); } .contact-info-item{ margin-bottom: 26px; } .contact-info-item .eyebrow{ margin-bottom: 6px; } .contact-info-item p{ margin: 0; color: var(--ink); font-size: 1.05rem; } .highlights-box{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; color: var(--ink-dim); font-size: 0.92rem; line-height: 1.55; } .highlights-box.loading{ font-style: italic; } .highlights-box.err{ color: var(--danger); } .highlights-box.placeholder{ font-style: italic; opacity: 0.6; } /* CTA band */ .cta-band{ background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; padding: 70px 0; } .cta-band h2{ margin-bottom: 16px; } .cta-band p{ max-width: 50ch; margin-left: auto; margin-right: auto; } .cta-band .hero-actions{ justify-content: center; } /* Footer */ .site-footer{ border-top: 1px solid var(--line); padding: 46px 0 30px; } .footer-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 36px; } .footer-grid h4{ font-size: 0.85rem; color: var(--ink); margin-bottom: 16px; } .footer-grid ul li{ margin-bottom: 10px; } .footer-grid ul li a{ color: var(--ink-dim); font-size: 0.9rem; } .footer-grid ul li a:hover{ color: var(--signal); } .footer-bottom{ display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-dim); flex-wrap: wrap; gap: 10px; } @media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; } } /* -------------------------------- Login portal (see devportal styles below) -------------------------------- */ .dev-note{ margin-top: 30px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 8px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-dim); line-height: 1.6; } .dev-note b{ color: var(--amber); } /* -------------------------------- Developer sign-in (Azure-inspired) -------------------------------- */ /* Light card, blue accent, system sans-serif — evokes an enterprise Microsoft-style sign-in surface without reusing Microsoft's logo, wordmark, or exact copy, so it reads as "in that family" rather than an impersonation of Microsoft's real login page. */ :root{ --ms-blue: #0067b8; --ms-blue-dark: #004c87; --ms-ink: #1b1b1b; --ms-ink-dim: #5c5c5c; --ms-line: #e2e2e2; --ms-bg: #ffffff; --ms-font: 'Segoe UI', 'Segoe UI Web', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; } .devportal-overlay{ position: fixed; inset: 0; background: rgba(6,10,20,0.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; } .devportal-overlay[hidden]{ display: none; } .devportal-modal{ position: relative; width: 100%; max-width: 440px; } .devportal-close{ position: absolute; top: -40px; right: 0; background: none; border: none; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; opacity: 0.8; } .devportal-close:hover{ opacity: 1; } /* The request-access form is taller than the sign-in modals it shares this class with — centered, its top edge sits close enough to the viewport's top that the -40px offset above pushes the button off screen. Move it onto the white card itself instead: always visible regardless of form height, and dark since it now sits on white, not the dark overlay backdrop. */ #request-access-overlay .devportal-close{ position: absolute; top: 14px; right: 14px; color: var(--ms-ink-dim); /* Sits before .devportal-card in the DOM; without this the card — an ordinary sibling, painted after it — covers it entirely. */ z-index: 1; } /* Vertically centering a card taller than the viewport pushes its top (and the close button on it) above the visible area with no way to reach it. Anchor to the top and let the overlay itself scroll instead, so the whole card — button included — is always reachable. */ #request-access-overlay{ align-items: flex-start; overflow-y: auto; } #request-access-overlay .devportal-modal{ margin: 40px auto; } .devportal-card{ background: var(--ms-bg); color: var(--ms-ink); font-family: var(--ms-font); border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 24px 60px rgba(0,0,0,0.35); padding: 44px 44px 36px; } .devportal-brandrow{ display: flex; align-items: center; gap: 10px; margin-bottom: 28px; } .devportal-brandrow svg{ width: 22px; height: 22px; flex-shrink: 0; } .devportal-brandrow span{ font-size: 0.95rem; color: var(--ms-ink-dim); font-weight: 600; } .devportal-card h2{ font-family: var(--ms-font); font-size: 1.5rem; font-weight: 600; color: var(--ms-ink); margin: 0 0 6px; } .devportal-card .devportal-sub{ font-size: 0.92rem; color: var(--ms-ink-dim); margin: 0 0 26px; } .devportal-field{ margin-bottom: 22px; } .devportal-field-hint{ font-size: 0.8rem; color: #a80000; margin-top: 5px; min-height: 1.1em; } .devportal-field label{ display: block; font-size: 0.85rem; color: var(--ms-ink); margin-bottom: 6px; } .devportal-field input{ width: 100%; border: none; border-bottom: 1px solid var(--ms-line); padding: 8px 2px 10px; font-family: var(--ms-font); font-size: 0.98rem; color: var(--ms-ink); background: transparent; transition: border-color 0.15s ease; } .devportal-field input:focus{ outline: none; border-bottom: 2px solid var(--ms-blue); padding-bottom: 9px; } .devportal-account-chip{ display: flex; align-items: center; justify-content: space-between; font-size: 0.9rem; color: var(--ms-ink); border: 1px solid var(--ms-line); border-radius: 2px; padding: 8px 12px; margin-bottom: 22px; } .devportal-checkbox-row{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; font-size: 0.88rem; color: var(--ms-ink-dim); } .devportal-checkbox-row label{ display: flex; align-items: center; gap: 8px; cursor: pointer; } .devportal-checkbox-row input[type="checkbox"]{ width: 16px; height: 16px; accent-color: var(--ms-blue); cursor: pointer; } .devportal-linkbtn{ background: none; border: none; color: var(--ms-blue); font-size: 0.85rem; cursor: pointer; padding: 0; font-family: var(--ms-font); } .devportal-linkbtn:hover{ text-decoration: underline; } .devportal-actions{ display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 16px; } .devportal-link{ color: var(--ms-blue); font-size: 0.88rem; text-decoration: none; } .devportal-link:hover{ text-decoration: underline; } .devportal-btn{ background: var(--ms-blue); color: #fff; border: none; border-radius: 2px; font-family: var(--ms-font); font-size: 0.95rem; font-weight: 600; padding: 10px 28px; cursor: pointer; transition: background 0.15s ease; white-space: nowrap; } .devportal-btn:hover{ background: var(--ms-blue-dark); } .devportal-btn:disabled{ background: #a9c6de; cursor: default; } .devportal-status{ margin: 18px 0 0; font-size: 0.85rem; min-height: 1.2em; } .devportal-status.err{ color: #a80000; } .devportal-status.ok{ color: #0e700e; } .devportal-step[hidden]{ display: none; } /* ---- Google-style sign-in card (admin/login.html + its matching modal) ---- A modifier on .devportal-card, scoped so it doesn't affect the Settings or Request-Access modals that reuse the same base class. */ .devportal-card.google-signin{ padding: 48px 40px 36px; border-radius: 28px; box-shadow: 0 1px 2px rgba(0,0,0,0.15), 0 8px 28px rgba(0,0,0,0.28); text-align: center; } .google-signin-icon{ width: 56px; height: 56px; margin: 0 auto 18px; } .google-signin-icon svg{ width: 100%; height: 100%; } .google-signin.devportal-card h2{ text-align: center; font-size: 1.6rem; } .google-signin-sub{ text-align: center; font-size: 0.95rem; color: var(--ms-ink-dim); margin: 0 0 32px; } .google-signin .devportal-field{ text-align: left; } .google-signin .devportal-field input{ border: 1.5px solid var(--ms-line); border-radius: 10px; padding: 12px 14px; font-size: 1rem; } .google-signin .devportal-field input:focus{ border: 1.5px solid var(--ms-blue); padding: 12px 14px; box-shadow: 0 0 0 1px var(--ms-blue); } .google-signin .devportal-checkbox-row{ justify-content: flex-start; gap: 8px; } .google-signin .devportal-actions{ margin-top: 20px; } .google-signin .devportal-btn{ border-radius: 24px; padding: 11px 26px; } .google-signin .devportal-link{ font-weight: 600; } /* Account Settings modal — a compact, tabbed variant of the modal above (same card/overlay/field styling) rather than one long stacked form. */ #settings-overlay .devportal-modal{ max-width: 400px; } #settings-overlay .devportal-card{ padding: 32px 32px 28px; max-height: 85vh; overflow-y: auto; } #settings-overlay .devportal-field{ margin-bottom: 16px; } .settings-header{ display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .settings-avatar{ width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--ms-line); flex-shrink: 0; } .settings-header-text{ min-width: 0; } .settings-header-name{ font-weight: 600; font-size: 1.02rem; color: var(--ms-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settings-header-meta{ font-size: 0.8rem; color: var(--ms-ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .settings-tabs{ display: flex; border-bottom: 1px solid var(--ms-line); margin-bottom: 22px; } .settings-tab-btn{ background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; margin-right: 22px; font-family: var(--ms-font); font-size: 0.88rem; font-weight: 600; color: var(--ms-ink-dim); padding: 0 0 10px; cursor: pointer; } .settings-tab-btn:hover{ color: var(--ms-ink); } .settings-tab-btn[aria-selected="true"]{ color: var(--ms-blue); border-bottom-color: var(--ms-blue); } /* Full-page fallback version (login.html without JS enhancement) */ .devportal-page{ min-height: calc(100vh - 72px); display: flex; align-items: center; justify-content: center; padding: 60px 24px; } /* ============================================================ Homepage: large-scale enterprise layout components (tabbed showcases, tile grid, stats banner, case-study rail) ============================================================ */ /* -------------------------------- Quick-link strip under hero -------------------------------- */ .quicklink-strip{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); } .quicklink-strip .container{ display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 28px; } .quicklink-strip a{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-dim); padding: 8px 16px; border-radius: 999px; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; } .quicklink-strip a:hover{ background: var(--signal-dim); color: var(--signal); } /* -------------------------------- Tabbed showcase -------------------------------- */ .tabgroup-bar{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; border-bottom: 1px solid var(--line); padding-bottom: 0; } .tabgroup-btn{ background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-dim); font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; padding: 12px 18px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; margin-bottom: -1px; } .tabgroup-btn:hover{ color: var(--ink); } .tabgroup-btn[aria-selected="true"]{ color: var(--signal); border-bottom-color: var(--signal); } .tabgroup-panel{ display: none; } .tabgroup-panel.active{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } @media (max-width: 860px){ .tabgroup-panel.active{ grid-template-columns: 1fr; } } .tabgroup-panel h3{ font-size: 1.5rem; margin-bottom: 14px; } .tabgroup-panel .tabgroup-icon{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; display: flex; align-items: center; justify-content: center; } .tabgroup-panel .tabgroup-icon svg{ width: 100%; max-width: 220px; height: auto; } .tabgroup-panel ul{ margin: 18px 0 22px; } .tabgroup-panel li{ color: var(--ink-dim); padding-left: 18px; position: relative; margin-bottom: 10px; font-size: 0.95rem; } .tabgroup-panel li::before{ content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--signal); border-radius: 1px; } /* -------------------------------- Tile carousel (services / tools) -------------------------------- */ .tile-carousel{ display: flex; flex-direction: column; gap: 16px; } .tile-row{ position: relative; } .tile-row-track{ display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .tile-row-track::-webkit-scrollbar{ display: none; } .tile-row-arrow{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.12); transition: background 0.15s ease, opacity 0.15s ease; } .tile-row-arrow svg{ width: 18px; height: 18px; } .tile-row-arrow:hover{ background: var(--surface); } .tile-row-arrow[hidden]{ display: none; } .tile-row-arrow-left{ left: -16px; } .tile-row-arrow-right{ right: -16px; } .tile{ display: block; flex: 0 0 calc((100% - 3 * 16px) / 4); scroll-snap-align: start; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; transition: background 0.15s ease; text-decoration: none; color: inherit; } .tile:hover{ background: var(--surface); } #tools{ scroll-margin-top: 100px; } #ai-brain{ scroll-margin-top: 100px; } #results{ scroll-margin-top: 100px; } .ai-foundry-summary h3{ margin: 28px 0 12px; } .ai-foundry-summary h3:first-child{ margin-top: 0; } .ai-foundry-summary ul{ margin: 0 0 8px; } .ai-foundry-summary li{ color: var(--ink-dim); padding-left: 18px; position: relative; margin-bottom: 10px; font-size: 0.95rem; line-height: 1.6; } .ai-foundry-summary li::before{ content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--signal); border-radius: 1px; } .tile-icon{ width: 34px; height: 34px; margin-bottom: 16px; color: var(--signal); } .tile-icon svg{ width: 100%; height: 100%; } .tile h4{ font-family: var(--font-display); font-size: 1rem; color: var(--ink); margin: 0 0 8px; } .tile p{ font-size: 0.88rem; margin: 0; } @media (max-width: 900px){ .tile{ flex-basis: calc((100% - 16px) / 2); } } @media (max-width: 520px){ .tile{ flex-basis: 82%; } } /* -------------------------------- Full-width stats banner -------------------------------- */ .stats-banner{ background: radial-gradient(circle at 15% 20%, var(--tint-blue), transparent 40%), radial-gradient(circle at 85% 80%, var(--tint-amber), transparent 40%), var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 80px 0; } .stats-banner .section-head{ margin-bottom: 44px; } /* -------------------------------- Case-study rail (carousel) -------------------------------- */ .rail-wrap{ position: relative; } .rail{ display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px; -ms-overflow-style: none; scrollbar-width: none; } .rail::-webkit-scrollbar{ display: none; } .rail-card{ flex: 0 0 340px; scroll-snap-align: start; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; } .rail-card .eyebrow{ margin-bottom: 14px; } .rail-card h3{ font-size: 1.1rem; margin-bottom: 10px; } .rail-card p{ font-size: 0.92rem; flex-grow: 1; } .rail-card a{ color: var(--signal); font-family: var(--font-mono); font-size: 0.8rem; margin-top: 14px; } .rail-card a:hover{ text-decoration: underline; } .rail-controls{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .rail-btn{ width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 1.1rem; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .rail-btn:hover{ border-color: var(--signal); color: var(--signal); } /* -------------------------------- Next-step 3-column CTA -------------------------------- */ .next-step-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 860px){ .next-step-grid{ grid-template-columns: 1fr; } } .next-step-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; text-align: left; } .next-step-card .step-icon{ width: 40px; height: 40px; color: var(--amber); margin-bottom: 18px; } .next-step-card .step-icon svg{ width: 100%; height: 100%; } .next-step-card h3{ font-size: 1.1rem; margin-bottom: 8px; } .next-step-card a.btn{ margin-top: 12px; } /* ---- Admin dashboard ---- */ .admin-main{ padding: 48px 0 80px; } .admin-kpi-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 28px 0 40px; } .admin-kpi-tile{ display: block; border-radius: var(--radius); padding: 22px 24px; color: #FFFFFF; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .admin-kpi-tile:hover, .admin-kpi-tile:focus-visible{ transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); color: #FFFFFF; } .admin-kpi-tile:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 2px; } .admin-kpi-tile .num{ font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; line-height: 1; } .admin-kpi-tile .label{ font-size: 0.9rem; color: #FFFFFF; opacity: 0.88; margin-top: 6px; } /* Fixed (non-theme-swapped) deep fills — chosen so white tile text stays readable regardless of the site's dark/light toggle; the bright, dark-mode-tuned versions of these hues are too light for white text. */ .admin-kpi-blue{ background: #0067B8; } .admin-kpi-amber{ background: #B25900; } .admin-kpi-green{ background: #15803D; } .admin-kpi-violet{ background: #6D28D9; } .admin-kpi-red{ background: #A80000; } .admin-funnel{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 32px; } .admin-funnel h2{ margin-bottom: 18px; } .admin-emailchart-scroll{ overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; } .admin-emailchart{ display: flex; align-items: flex-end; gap: 8px; height: 160px; min-width: max-content; } .admin-emailchart-col{ display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 0 0 auto; width: 30px; } .admin-emailchart-bar{ width: 20px; min-height: 3px; background: #6D28D9; border-radius: 4px 4px 0 0; display: flex; align-items: flex-start; justify-content: center; color: #FFFFFF; font-family: var(--font-mono); font-size: 0.7rem; padding-top: 2px; } .admin-emailchart-label{ margin-top: 6px; font-size: 0.72rem; color: var(--ink-dim); } .admin-emailchart-col{ cursor: default; } .admin-month-picker{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .admin-month-btn{ display: inline-block; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); font-size: 0.82rem; text-decoration: none; } .admin-month-btn:hover{ color: var(--ink); border-color: var(--ink-dim); } .admin-month-btn.active{ background: #6D28D9; border-color: #6D28D9; color: #FFFFFF; } .admin-emailchart-tooltip{ position: fixed; z-index: 50; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 0.8rem; color: var(--ink); box-shadow: 0 8px 20px rgba(0,0,0,0.3); max-width: 280px; } .admin-emailchart-tooltip .tt-date{ font-weight: 600; margin-bottom: 6px; } .admin-emailchart-tooltip ul{ margin: 0; padding-left: 0; list-style: none; } .admin-emailchart-tooltip li{ word-break: break-word; color: var(--ink-dim); } .admin-emailchart-tooltip a{ display: block; color: var(--signal); text-decoration: none; padding: 5px 6px; margin: 0 -6px; border-radius: 5px; } .admin-emailchart-tooltip a:hover, .admin-emailchart-tooltip a:focus-visible{ background: var(--signal-dim); text-decoration: underline; } .admin-toolbar{ display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; } .admin-toolbar input, .admin-toolbar select{ background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); padding: 8px 10px; font-family: var(--font-body); } .admin-table-wrap{ overflow-x: auto; } .admin-table{ width: 100%; border-collapse: collapse; font-size: 0.92rem; } .admin-table th, .admin-table td{ padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .admin-table th{ color: var(--ink-dim); font-weight: 600; } .admin-table tbody tr:nth-child(even){ background: var(--surface-2); } .admin-row-link{ cursor: pointer; } .admin-table tbody tr.admin-row-link:hover{ background: var(--signal-dim); } .admin-row-link:focus-visible{ outline: 2px solid var(--signal); outline-offset: -2px; } .admin-badge{ display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; font-family: var(--font-mono); } .admin-badge-new{ background: var(--signal-dim); color: var(--signal); } .admin-badge-read, .admin-badge-contacted{ background: var(--amber-dim); color: var(--amber); } .admin-badge-won{ background: var(--good-dim); color: var(--good); } .admin-badge-lost, .admin-badge-err{ background: rgba(229,99,107,0.14); color: var(--danger); } .admin-badge-emailed{ background: var(--info-dim); color: var(--info); } .admin-badge-on-track{ background: var(--good-dim); color: var(--good); } .admin-badge-at-risk{ background: var(--amber-dim); color: var(--amber); } .admin-badge-blocked{ background: rgba(229,99,107,0.14); color: var(--danger); } /* Customer Portal */ .portal-project-customer{ color: var(--ink-dim); font-size: 0.9rem; margin: 4px 0 12px; } .portal-project-card{ display: block; text-decoration: none; color: inherit; } .portal-progress-bar{ width: 100%; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .portal-progress-fill{ height: 100%; background: var(--signal); border-radius: 999px; } .portal-progress-label{ display: block; margin-top: 6px; font-size: 0.82rem; color: var(--ink-dim); } .portal-updates{ display: grid; gap: 16px; margin-top: 20px; } .portal-update-item h3{ margin: 4px 0 8px; } .portal-update-date{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-dim); } .portal-sprint-items{ display: grid; gap: 16px; margin-top: 20px; } .portal-sprint-item-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; } .portal-sprint-item-head h3{ margin: 0; } .portal-sprint-item-meta{ display: flex; flex-wrap: wrap; gap: 20px; margin: 14px 0 0; } .portal-sprint-item-meta dt{ font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-dim); margin: 0 0 2px; } .portal-sprint-item-meta dd{ margin: 0; font-size: 0.92rem; } /* Sprint burndown chart */ .burndown-chart{ margin-top: 16px; max-width: 640px; } .burndown-chart svg{ width: 100%; height: auto; display: block; } .burndown-axis{ stroke: var(--line); stroke-width: 1; } .burndown-axis-label{ font-family: var(--font-mono); font-size: 10px; fill: var(--ink-dim); } .burndown-actual{ fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .burndown-ideal{ stroke: var(--amber); stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round; } .burndown-legend{ display: flex; gap: 18px; margin-top: 10px; font-size: 0.82rem; color: var(--ink-dim); } .burndown-legend-item{ display: flex; align-items: center; gap: 6px; } .burndown-swatch{ width: 16px; height: 0; border-top: 2px solid; display: inline-block; } .burndown-swatch-actual{ border-top-color: var(--signal); border-top-style: solid; } .burndown-swatch-ideal{ border-top-color: var(--amber); border-top-style: dashed; } .burndown-note{ font-size: 0.82rem; color: var(--ink-dim); margin-top: 10px; } .burndown-table-toggle{ margin-top: 14px; } .burndown-table-toggle summary{ cursor: pointer; color: var(--signal); font-size: 0.88rem; } .burndown-table-toggle .admin-table-wrap{ margin-top: 10px; } .velocity-bar-planned{ fill: var(--amber); } .velocity-bar-delivered{ fill: var(--signal); } .velocity-swatch-planned{ border-top-color: var(--amber); border-top-style: solid; } .velocity-swatch-delivered{ border-top-color: var(--signal); border-top-style: solid; } /* Risk Radar */ .portal-risks{ display: grid; gap: 16px; margin-top: 20px; } .portal-risk-item{ border-left: 3px solid var(--line); } .portal-risk-open{ border-left-color: var(--danger); } .portal-risk-mitigated{ border-left-color: var(--good); } .portal-risk-head{ margin-bottom: 10px; } .portal-risk-description{ margin: 0 0 10px; } .portal-risk-mitigation{ margin: 0; font-size: 0.9rem; color: var(--ink-dim); } /* Azure DevOps full-backlog browser (Administrator/Developer only) */ .ado-browse-form{ display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 16px; } .ado-browse-form label{ display: block; font-size: 0.85rem; color: var(--ink-dim); margin-bottom: 6px; } .ado-browse-form select{ font-family: var(--font-body); font-size: 0.95rem; padding: 9px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); min-width: 240px; } .ado-items-chart{ margin-top: 16px; max-width: 720px; } .ado-items-chart svg{ width: 100%; height: auto; display: block; } .ado-chart-axis{ stroke: var(--line); stroke-width: 1; } .ado-chart-gridline{ stroke: var(--line); stroke-width: 1; opacity: 0.5; } .ado-chart-axis-label{ font-family: var(--font-mono); font-size: 10px; fill: var(--ink-dim); } .ado-chart-total{ font-family: var(--font-mono); font-size: 10.5px; fill: var(--ink-dim); } .ado-chart-seg rect{ transition: opacity 0.1s ease; } .ado-chart-seg:hover rect{ opacity: 0.82; } .ado-legend{ display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 12px; font-size: 0.82rem; color: var(--ink-dim); } .ado-legend-item{ display: flex; align-items: center; gap: 6px; } .ado-legend-swatch{ width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .ado-legend-swatch-epic{ background: var(--wi-epic); } .ado-legend-swatch-feature{ background: var(--wi-feature); } .ado-legend-swatch-story{ background: var(--wi-story); } .ado-legend-swatch-issue{ background: var(--wi-issue); } .ado-legend-swatch-bug{ background: var(--wi-bug); } .ado-legend-swatch-task{ background: var(--wi-task); } .ado-legend-swatch-other{ background: var(--wi-other); } .ado-legend-item-zero{ opacity: 0.6; } .ado-legend-swatch-zero{ width: 11px; height: 11px; border-radius: 3px; display: inline-block; border: 1.5px dashed var(--ink-dim); background: transparent; } .ado-chart-seg-clickable{ cursor: pointer; } .ado-items-note{ font-size: 0.82rem; color: var(--ink-dim); margin-top: 10px; } .ado-items-table-wrap{ margin-top: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); } .ado-items-table{ width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 640px; } .ado-items-table th{ text-align: left; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-dim); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .ado-items-table td{ padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } .ado-items-table tr:last-child td{ border-bottom: none; } .ado-items-row{ cursor: pointer; } .ado-items-row:hover{ background: var(--surface); } .ado-type-dot{ width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 7px; vertical-align: middle; } #ado-item-overlay .devportal-modal{ max-width: 480px; } #ado-item-overlay .devportal-card{ padding: 30px 30px 26px; max-height: 85vh; overflow-y: auto; } .ado-item-meta{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 18px 0; } .ado-item-meta dt{ font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 3px; } .ado-item-meta dd{ margin: 0; font-size: 0.92rem; } .ado-item-description{ margin-top: 14px; white-space: pre-wrap; font-size: 0.92rem; } .admin-form-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 28px; } .admin-form-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; } .admin-form-grid label{ display: block; font-size: 0.85rem; color: var(--ink-dim); margin-bottom: 6px; } .admin-form-card input, .admin-form-card textarea, .admin-form-card select{ width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); padding: 9px 10px; font-family: var(--font-body); } .admin-row-actions{ display: flex; gap: 8px; flex-wrap: wrap; } .admin-row-actions form{ display: inline; } .admin-row-actions button, .admin-row-actions a{ font-size: 0.82rem; padding: 4px 9px; } .admin-table-compact th, .admin-table-compact td{ white-space: nowrap; font-size: 0.78rem; padding: 6px 8px; } .admin-table-compact .admin-row-actions{ flex-wrap: nowrap; } .admin-table-compact .admin-row-actions button, .admin-table-compact .admin-row-actions a{ font-size: 0.72rem; padding: 3px 7px; } .admin-users-summary{ color: var(--ink-dim); font-size: 0.92rem; margin-bottom: 20px; } .admin-users-summary strong{ color: var(--ink); } .admin-inline-form{ display: inline-block; } .admin-inline-select{ border-radius: 999px; border: 1px solid transparent; font-family: var(--font-mono); font-size: 0.78rem; padding: 4px 26px 4px 10px; cursor: pointer; appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: right 8px center; background-size: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .admin-inline-select:disabled{ cursor: not-allowed; opacity: 0.6; } .admin-inline-select-admin{ background-color: var(--info-dim); color: var(--info); } .admin-inline-select-user{ background-color: var(--surface-2); color: var(--ink-dim); } .admin-inline-select-enabled{ background-color: var(--good-dim); color: var(--good); } .admin-inline-select-disabled{ background-color: var(--surface-2); color: var(--ink-dim); } .admin-inline-select-requested{ background-color: var(--amber-dim); color: var(--amber); } .admin-inline-select-denied{ background-color: rgba(229,99,107,0.14); color: var(--danger); } /* -------------------------------- Homepage: hero grid/glow, advantage, capabilities, stages, CTA -------------------------------- */ .hero-gridlines{ position: absolute; inset: 0; opacity: 0.5; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 65% at 30% 30%, black 30%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse 70% 65% at 30% 30%, black 30%, transparent 85%); } .hero-glow{ position: absolute; top: -160px; left: 8%; width: 620px; height: 620px; border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle, var(--glow-signal), transparent 70%); } .hero .container{ position: relative; z-index: 1; } .hurdle-tag{ font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; color: var(--danger); margin-bottom: 10px; } .hurdle-fix{ padding-top: 16px; margin-top: 18px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.78rem; color: var(--signal); line-height: 1.6; } .hurdle-fix strong{ color: var(--ink); } .pillar-list{ margin-top: 18px; } .pillar-list li{ position: relative; padding: 5px 0 5px 20px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-dim); } .pillar-list li::before{ content: '▹'; position: absolute; left: 0; color: var(--signal); } .stages-4{ grid-template-columns: repeat(4, 1fr); } @media (max-width: 860px){ .stages-4{ grid-template-columns: 1fr; } } .cta-panel{ position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 56px 40px; text-align: center; max-width: 760px; margin: 0 auto; } .cta-panel::before{ content: ''; position: absolute; top: -80px; right: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, var(--glow-signal), transparent 70%); pointer-events: none; } .cta-panel-inner{ position: relative; z-index: 1; } .cta-panel p{ max-width: 52ch; margin: 14px auto 30px; } .cta-panel .hero-actions{ justify-content: center; margin-top: 0; }