/* TechVera service portal — minimal static stylesheet. * Brand: see config/brand/brand_resources/techvera_brandguidelines.md * Theme switching is data-theme on ; bootstrap script in * sets it pre-paint to avoid a flash of the wrong theme. */ :root { --teal: #00D4D2; --purple: #9734D3; --gradient: linear-gradient(135deg, var(--teal) 0%, var(--purple) 100%); --radius-tile: 12px; --radius-btn: 8px; } [data-theme="light"] { --bg: #FFFFFF; --bg-elevated: #FFFFFF; --bg-subtle: #FAFAFA; --fg: #010101; --fg-muted: #4A4A4A; --fg-subtle: #8A8A8A; --border: #E5E5E7; --border-hover: var(--teal); --shadow-hover: 0 4px 16px rgba(1, 1, 1, 0.06); } [data-theme="dark"] { --bg: #0D0D10; --bg-elevated: #16161A; --bg-subtle: #1A1A20; --fg: #F5F5F5; --fg-muted: #B2B2B2; --fg-subtle: #6F6F78; --border: #2A2A30; --border-hover: var(--teal); --shadow-hover: none; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── Header ────────────────────────────────────────────── */ .hdr { display: flex; align-items: center; justify-content: space-between; padding: 32px 48px; max-width: 1200px; margin: 0 auto; } .hdr__brand { display: inline-flex; align-items: center; text-decoration: none; outline-offset: 4px; border-radius: 4px; } .hdr__logo { height: 32px; width: auto; display: none; } /* Two SVGs are shipped — dark text for light theme, white text for dark theme. * Toggling visibility from CSS keeps the swap atomic with the theme switch. */ [data-theme="light"] .hdr__logo--light { display: block; } [data-theme="dark"] .hdr__logo--dark { display: block; } .hdr__toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-btn); color: var(--fg-muted); cursor: pointer; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; } .hdr__toggle:hover, .hdr__toggle:focus-visible { border-color: var(--teal); color: var(--fg); outline: none; } .hdr__icon { display: none; } [data-theme="light"] .hdr__icon--moon { display: block; } [data-theme="dark"] .hdr__icon--sun { display: block; } /* ─── Main grid ─────────────────────────────────────────── */ .main { max-width: 1200px; margin: 0 auto; padding: 16px 48px 64px; } .grp + .grp { margin-top: 56px; } .grp__title { font-family: 'Sulphur Point', 'Source Sans 3', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-subtle); margin: 0 0 20px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } /* ─── Tile ──────────────────────────────────────────────── */ .tile { display: flex; align-items: center; gap: 16px; padding: 20px 22px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-tile); text-decoration: none; color: inherit; transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .tile:hover { border-color: var(--border-hover); transform: translateY(-1px); box-shadow: var(--shadow-hover); } .tile:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .tile__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--bg-subtle); color: var(--fg); transition: background 160ms ease, color 160ms ease; } .tile:hover .tile__icon { background: var(--teal); color: #010101; } .tile__body { display: flex; flex-direction: column; min-width: 0; } .tile__title { font-family: 'Sulphur Point', 'Source Sans 3', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--fg); } .tile__sub { margin-top: 4px; font-size: 13px; color: var(--fg-muted); } /* ─── Responsive ────────────────────────────────────────── */ @media (max-width: 600px) { .hdr { padding: 24px 20px; } .main { padding: 8px 20px 48px; } .grp + .grp { margin-top: 40px; } .grid { grid-template-columns: 1fr; } } /* Honour the prefers-reduced-motion accessibility hint. */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }