/* shared/site.css - the one stylesheet for hirepetra, plusory and darthrix. * * Nothing here reaches the network: no imported sheets, no web fonts, no remote url(). * System fonts only. Every page must render correctly straight off disk, from file:// as * well as from tools/serve.ps1. * * How the theme system works * -------------------------- * 1. :root -> the light palette, the default * 2. @media (prefers-color-scheme: dark) -> the dark palette when the OS asks for it * 3. :root[data-theme="light"] -> explicit override, wins on specificity (0,2,0 * 4. :root[data-theme="dark"] beats the 0,1,0 of the bare :root above) * * shared/site.js writes data-theme onto from localStorage before the body paints. * With JavaScript off the attribute is simply absent and step 2 governs, which is a correct * page - the toggle is an enhancement, never a requirement. * * Brand accents ride on , in the same four * layers, so one stylesheet serves three brands with no duplication. Custom properties cascade * per element, so a value declared on beats the :root value on everything a visitor can * see - which is why a brand block only has to re-declare the tokens it actually changes. * * Contrast: two rules, both machine-checked * ----------------------------------------- * powershell.exe -NoProfile -ExecutionPolicy Bypass -File tools\check-contrast.ps1 -Report * * 1. EVERY block below declares all eleven palette tokens - even the ones it does not change. * The OS preference and the toggle vary independently, so an override block is layered over * the OTHER theme's values whenever the two disagree; a token it leaves out would resolve to * that other theme's colour, at full strength, on this theme's background. * 2. Every foreground/background pair the pages paint clears WCAG AA in both themes and under * all three brands - 4.5:1 for text, 3.0:1 for borders and accent furniture. * * Change a colour below and run that command before committing. It prints every pair and the * ratio it measured, and exits non-zero naming any pair that no longer clears the bar. * * Class contract the pages are written against * -------------------------------------------- * .skip-link .visually-hidden accessibility helpers, first focusable element * .site-header .site-nav .site-footer #theme-toggle shared chrome * .wrap the max-width content column * .logo .logo-plaque a mark; .logo-plaque is the Night ground Petra sits on * .logo-dark .logo-light the two-image theme swap (plusory, darthrix) * .btn .btn-primary calls to action * .card-grid .card the duty / trust / comparison grids * .lede .note .duty-why .eyebrow copy roles * .pilot-form the pre-launch contact form, disabled in markup * .report .illustrative the mock report renderings * .pill .pill-* verdict chips inside mock reports (report UI, not brand) */ /* ========================================================================== 1. Design tokens - light (default) ========================================================================== */ :root { color-scheme: light; --bg: #FFFFFF; --surface: #F4F5F7; --fg: #16181D; --fg-muted: #565E6B; --border: #7F8794; --link: #1B4DC1; --btn-bg: #16181D; --btn-fg: #FFFFFF; --accent: #3532D9; --accent-strong: #221FA8; --ground: #141014; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; --measure: 72rem; --measure-prose: 42rem; --gutter: clamp(1rem, 4vw, 2rem); --radius: 14px; --radius-sm: 8px; /* Decorative only - never checked for contrast, never used for text. */ --hairline: color-mix(in srgb, var(--border) 38%, transparent); --hairline-strong: color-mix(in srgb, var(--border) 55%, transparent); --glow: color-mix(in srgb, var(--accent) 14%, transparent); --card-tint: color-mix(in srgb, var(--accent) 3%, var(--surface)); --ok: #047857; /* report-UI green: "safe to ship". Product UI, not a brand colour. */ } /* ========================================================================== 2. Design tokens - dark, following the operating system ========================================================================== */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --bg: #101014; --surface: #1A1B21; --fg: #F1F2F5; --fg-muted: #A9AEB9; --border: #6C7280; --link: #9EC5FF; --btn-bg: #F1F2F5; --btn-fg: #101014; --accent: #7D85F5; --accent-strong: #A5AAF8; --ground: #141014; --glow: color-mix(in srgb, var(--accent) 17%, transparent); --card-tint: color-mix(in srgb, var(--accent) 5%, var(--surface)); --ok: #34D399; } } /* ========================================================================== 3. Design tokens - explicit override from the toggle. Higher specificity than the bare :root inside the media query, so it wins in both directions. ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --bg: #FFFFFF; --surface: #F4F5F7; --fg: #16181D; --fg-muted: #565E6B; --border: #7F8794; --link: #1B4DC1; --btn-bg: #16181D; --btn-fg: #FFFFFF; --accent: #3532D9; --accent-strong: #221FA8; --ground: #141014; --glow: color-mix(in srgb, var(--accent) 14%, transparent); --card-tint: color-mix(in srgb, var(--accent) 3%, var(--surface)); --ok: #047857; } :root[data-theme="dark"] { color-scheme: dark; --bg: #101014; --surface: #1A1B21; --fg: #F1F2F5; --fg-muted: #A9AEB9; --border: #6C7280; --link: #9EC5FF; --btn-bg: #F1F2F5; --btn-fg: #101014; --accent: #7D85F5; --accent-strong: #A5AAF8; --ground: #141014; --glow: color-mix(in srgb, var(--accent) 17%, transparent); --card-tint: color-mix(in srgb, var(--accent) 5%, var(--surface)); --ok: #34D399; } /* ========================================================================== 4. Brand accents - the same four layers, keyed off . Hexes are the brand board's, verbatim; see .harness/spec/brand.md. In dark theme the accent lifts instead of the background darkening, so the accent/background pair still clears WCAG AA. ========================================================================== */ /* Decorative tokens re-derived per brand: declared on body, they substitute the brand's final computed --accent (theme included), not :root's ultramarine. */ body[data-brand] { --glow: color-mix(in srgb, var(--accent) 15%, transparent); --card-tint: color-mix(in srgb, var(--accent) 4%, var(--surface)); } body[data-brand="hirepetra"] { --accent: #E11D48; /* Pavilion */ --accent-strong: #9F1239; /* Pavilion deep */ --ground: #141014; /* Night - the gem's ground, in both themes */ --btn-bg: #E11D48; --btn-fg: #FFFFFF; --link: #9F1239; } /* plusory and darthrix carry ONE fixed dark palette each, declared complete in the page-accents section below - they deliberately have no per-theme brand blocks, so the OS preference and a toggle state carried over from the hirepetra site cannot restyle them. The hex #3532D9 and #131E33 remain the canonical brand accents (used by the fixed palettes and the brand assets). */ @media (prefers-color-scheme: dark) { body[data-brand="hirepetra"] { --accent: #FB7185; /* Table - the lightest facet */ --accent-strong: #F43F5E; /* Crown */ --btn-bg: #FB7185; --btn-fg: #141014; --link: #FB7185; } } :root[data-theme="light"] body[data-brand="hirepetra"] { --accent: #E11D48; --accent-strong: #9F1239; --btn-bg: #E11D48; --btn-fg: #FFFFFF; --link: #9F1239; } :root[data-theme="dark"] body[data-brand="hirepetra"] { --accent: #FB7185; --accent-strong: #F43F5E; --btn-bg: #FB7185; --btn-fg: #141014; --link: #FB7185; } /* ========================================================================== 5. Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.65; overflow-wrap: break-word; } img, svg { max-width: 100%; height: auto; } h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; text-wrap: balance; font-weight: 750; } h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.06; } h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); letter-spacing: -0.02em; } h3 { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); letter-spacing: -0.005em; } p, ul, ol, dl, table, figure { margin: 0 0 1rem; } a { color: var(--link); text-underline-offset: 0.15em; } a:hover { color: var(--accent-strong); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } hr { border: 0; border-top: 1px solid var(--hairline); margin: 2rem 0; } ::selection { background: var(--accent); color: var(--btn-fg); } /* ========================================================================== 6. Focus and skip link ========================================================================== */ :focus { outline: 3px solid var(--accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .visually-hidden, .skip-link { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link:focus { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 100; width: auto; height: auto; margin: 0; padding: 0.6rem 1rem; overflow: visible; clip: auto; clip-path: none; background: var(--surface); color: var(--fg); border: 2px solid var(--accent); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; } /* ========================================================================== 7. Layout ========================================================================== */ .wrap { width: 100%; max-width: var(--measure); margin-right: auto; margin-left: auto; padding-right: var(--gutter); padding-left: var(--gutter); } main { display: block; } main > section, main > article { padding: 3rem 0; /* Anchor jumps land clear of the sticky header. */ scroll-margin-top: 5rem; } body[data-brand="darthrix"] main > .wrap { padding-top: 2.5rem; padding-bottom: 2.5rem; } .prose { max-width: var(--measure-prose); } .lede { max-width: var(--measure-prose); font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem); line-height: 1.6; color: var(--fg-muted); } .note { color: var(--fg-muted); font-size: 0.9375rem; } .tagline { color: var(--fg-muted); font-size: 0.875rem; letter-spacing: 0.01em; } /* Small-caps mono section label; gives every section a quiet landmark. */ .eyebrow { display: block; margin: 0 0 0.75rem; color: var(--accent); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .eyebrow::before { content: ""; display: inline-block; width: 1.5rem; height: 2px; margin-right: 0.6rem; vertical-align: 0.22em; background: var(--accent); } /* ========================================================================== 8. Header, nav, footer chrome ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); } .site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } .site-header .brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: inherit; } .site-nav { flex: 1 1 auto; } .site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; margin: 0; padding: 0; list-style: none; } .site-nav a { display: inline-block; padding: 0.35rem 0.7rem; color: var(--fg-muted); font-size: 0.9375rem; text-decoration: none; border-radius: 999px; } .site-nav a:hover { color: var(--fg); background: var(--surface); } .site-nav a[aria-current="page"] { color: var(--fg); background: var(--surface); font-weight: 600; } body[data-brand="darthrix"] .site-header #theme-toggle { margin-left: auto; } #theme-toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; background: transparent; color: var(--fg-muted); border: 1px solid var(--hairline-strong); border-radius: 999px; font: inherit; font-size: 0.8125rem; line-height: 1.2; cursor: pointer; transition: border-color 120ms ease, color 120ms ease; } #theme-toggle:hover { border-color: var(--accent); color: var(--fg); } .site-footer { margin-top: 4rem; padding: 2.5rem 0 3rem; border-top: 1px solid var(--hairline); color: var(--fg-muted); font-size: 0.9375rem; position: relative; } /* A thin brand-accent thread across the top of the footer. */ .site-footer::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--accent), transparent 60%); opacity: 0.6; } .site-footer p { margin: 0 0 0.35rem; } .site-footer a { color: var(--link); } /* ========================================================================== 9. Logos - the theme swap, and the Night ground Petra always sits on ========================================================================== */ .logo { display: block; width: auto; height: 1.75rem; } .logo-lg { height: 3.25rem; } .logo-plaque { display: inline-block; padding: 0.4rem 0.6rem; background: var(--ground); border-radius: var(--radius-sm); line-height: 0; } .logo-dark { display: none; } .logo-light { display: block; } @media (prefers-color-scheme: dark) { .logo-dark { display: block; } .logo-light { display: none; } } :root[data-theme="light"] .logo-dark { display: none; } :root[data-theme="light"] .logo-light { display: block; } :root[data-theme="dark"] .logo-dark { display: block; } :root[data-theme="dark"] .logo-light { display: none; } /* ========================================================================== 10. Buttons ========================================================================== */ .btn { display: inline-block; padding: 0.75rem 1.5rem; background: transparent; color: var(--fg); border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); font: inherit; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; } .btn:hover { color: var(--fg); border-color: var(--accent); transform: translateY(-1px); } .btn-primary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 0 0 0 var(--glow); } .btn-primary:hover { background: var(--accent-strong); color: var(--btn-fg); border-color: var(--accent-strong); box-shadow: 0 4px 18px var(--glow); transform: translateY(-1px); } .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 1.75rem 0 0; } /* ========================================================================== 11. Hero ========================================================================== */ #hero { position: relative; overflow: hidden; padding-top: 3.5rem; } /* A soft brand glow rising behind the hero; decorative, clipped by the section. */ #hero::before { content: ""; position: absolute; top: -30%; right: -12%; width: 60%; height: 120%; background: radial-gradient(closest-side, var(--glow), transparent 70%); pointer-events: none; } #hero .wrap { position: relative; } .hero-grid { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; } /* Grid items default to min-width:auto, so the report table's intrinsic width could force the page wider than a phone. Zero it: the table scrolls inside its wrap instead. */ .hero-grid > * { min-width: 0; } .hero-copy h1 { margin-bottom: 1rem; } .hero-accent { background: linear-gradient(100deg, var(--accent), var(--accent-strong)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent); /* fallback when background-clip:text is unsupported */ } /* ========================================================================== 12. Cards and grids ========================================================================== */ .card-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; margin: 2rem 0 0; padding: 0; list-style: none; } .card { position: relative; padding: 1.5rem; background: linear-gradient(180deg, var(--card-tint), var(--surface) 55%); border: 1px solid var(--hairline-strong); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } .card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 28px rgba(0, 0, 0, 0.10); } .card > :last-child { margin-bottom: 0; } .card h3 { margin-top: 0; margin-bottom: 0.5rem; } .card p { color: var(--fg-muted); font-size: 0.9688rem; } .duty-why { color: var(--fg-muted); margin-bottom: 0; max-width: var(--measure-prose); } /* The job description: a numbered dossier list with mono numerals. */ .duty-list { margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: duty; max-width: 52rem; } .duty-list > li { counter-increment: duty; position: relative; padding: 1.5rem 0 1.5rem 4.25rem; border-top: 1px solid var(--hairline); } .duty-list > li:first-child { border-top: 0; } .duty-list > li::before { content: counter(duty, decimal-leading-zero); position: absolute; left: 0; top: 1.55rem; font-family: var(--font-mono); font-size: 1.375rem; font-weight: 600; color: var(--accent); letter-spacing: 0.02em; } .duty-list > li h3 { margin-bottom: 0.3rem; } /* ========================================================================== 13. The pre-launch pilot form - disabled in markup, styled to look it ========================================================================== */ .pilot-form { max-width: var(--measure-prose); margin: 1.5rem 0 0; padding: 1.5rem; background: var(--surface); border: 1px dashed var(--hairline-strong); border-radius: var(--radius); } .pilot-form fieldset { margin: 0; padding: 0; border: 0; } .pilot-form legend { padding: 0; font-weight: 600; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); } .field { margin: 0 0 1rem; } .field label { display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.9375rem; } .pilot-form input, .pilot-form textarea { display: block; width: 100%; padding: 0.65rem 0.8rem; background: var(--bg); color: var(--fg); border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); font: inherit; } .pilot-form textarea { min-height: 7rem; resize: vertical; } .pilot-form input:disabled, .pilot-form textarea:disabled, .pilot-form button:disabled { background: var(--surface); color: var(--fg-muted); border-color: var(--hairline); cursor: not-allowed; } .pilot-form button:disabled { background: var(--surface); color: var(--fg-muted); border-color: var(--hairline); box-shadow: none; transform: none; } /* ========================================================================== 14. Mock reports - styled HTML, never a screenshot. Terminal-card treatment: a chrome strip up top, mono metadata, verdict pills. ========================================================================== */ .report { margin: 1.5rem 0 2rem; padding: 0; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05); overflow: hidden; } /* The window-chrome strip: three dots and the illustrative label, right-aligned. */ .report-chrome { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; background: color-mix(in srgb, var(--fg) 4%, var(--surface)); border-bottom: 1px solid var(--hairline); } .report-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--hairline-strong); } .report-chrome p { margin: 0; } .report-chrome .illustrative { margin-left: auto; } .report-body { padding: 1.25rem; } .report-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin-bottom: 0.5rem; padding: 1.25rem 1.25rem 0; } .report-chrome + .report-head, .report-body .report-head { padding: 0; } .report-head h3, .report-head strong { margin: 0; font-size: 1.0625rem; } .report-meta { margin: 0 0 1rem; color: var(--fg-muted); font-family: var(--font-mono); font-size: 0.8125rem; } .report-summary { margin: 0 0 1rem; font-weight: 600; } .report-verdict { margin: 0 0 1rem; padding: 0.65rem 0.8rem; background: var(--bg); border: 1px solid var(--hairline); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); } .table-wrap { overflow-x: auto; } .report table { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.875rem; } .report th, .report td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; } .report thead th { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; } /* Row headers are test names, not column labels: mono, lowercase, ordinary weight. */ .report tbody th { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 400; color: var(--fg); } .report tbody tr:last-child td { border-bottom: 0; } .report .test-name { font-family: var(--font-mono); font-size: 0.8125rem; } .report .evidence { color: var(--fg-muted); font-family: var(--font-mono); font-size: 0.8125rem; } .report .verdict { font-weight: 600; white-space: nowrap; } .report figcaption { padding: 0 1.25rem 1rem; margin: 0; color: var(--fg-muted); font-size: 0.875rem; } .report-body figcaption { padding: 0.75rem 0 0; } /* Verdict chips. Report UI semantics, not brand palette: rose = real/alarm via the brand accent, green = safe, neutral = flaky / same-root-cause. Text stays --fg. */ .pill { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; border: 1px solid var(--hairline-strong); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; color: var(--fg-muted); background: color-mix(in srgb, var(--fg) 4%, transparent); } .pill-real { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .pill-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); } /* The label that keeps a mock from ever being read as evidence. Visible text, always. */ .illustrative { display: inline-block; padding: 0.15rem 0.55rem; background: var(--bg); color: var(--fg); border: 1px solid var(--accent); border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } /* The chat mock: she is in the channel, not in a tab. Lives inside a .report card so it shares the window chrome and the illustrative label. */ .chat-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .chat-msg { display: flex; gap: 0.75rem; align-items: flex-start; } .chat-avatar { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; } /* Petra's avatar is the gem on its Night ground - always. */ .chat-avatar-petra { background: #141014; padding: 0.3rem; } .chat-avatar-petra svg { width: 100%; height: auto; } .chat-avatar-human { background: color-mix(in srgb, var(--fg) 8%, transparent); border: 1px solid var(--hairline-strong); color: var(--fg-muted); } .chat-bubble { background: var(--bg); border: 1px solid var(--hairline); border-radius: 10px; padding: 0.65rem 0.9rem; max-width: 44rem; } .chat-bubble p { margin: 0; font-size: 0.9375rem; } .chat-meta { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-muted); margin-bottom: 0.3rem; } /* The deployment diagram: the most drawable claim the product has. */ .diagram { margin: 1.5rem 0 2rem; max-width: 46rem; } .diagram svg { display: block; width: 100%; height: auto; color: var(--fg-muted); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius); } .dg-label { font-family: var(--font-mono); font-size: 13px; fill: currentColor; } .dg-strong { fill: var(--fg); font-size: 12px; letter-spacing: 0.12em; } .dg-dim { opacity: 0.8; } .dg-accent { fill: var(--accent); font-weight: 600; } .diagram figcaption { margin-top: 0.6rem; color: var(--fg-muted); font-size: 0.875rem; } /* The compact hero rendition of the morning-triage card. */ .report-mini { margin: 0; max-width: 34rem; } .report-mini .report-body { padding: 1rem 1.25rem 0.5rem; } .report-mini table { font-size: 0.8125rem; } /* ========================================================================== 14b. Page accents - comparisons, battle card, plusory persona tiles, darthrix ========================================================================== */ /* Hire Petra hero: a Night band in BOTH themes. The brand law says the gem always sits on dark ground - so the hero brings its own ground. Tokens are scoped to the band and locked to the proven dark palette, so every component inside (report card, pills, chips) renders identically whatever the visitor's theme is. */ body[data-brand="hirepetra"] #hero { --bg: #141014; /* Night */ --surface: #1C171B; /* Ink */ --fg: #F1F2F5; --fg-muted: #A9AEB9; --border: #6C7280; --glow: rgba(225, 29, 72, 0.20); color: var(--fg); background: radial-gradient(90vmax 60vmax at 78% -10%, rgba(225, 29, 72, 0.14), transparent 60%), linear-gradient(180deg, #141014 0%, #141014 96%, rgba(20, 16, 20, 0.5) 98%, transparent 100%); } body[data-brand="hirepetra"] #hero::before { display: none; /* the band carries its own glow */ } body[data-brand="hirepetra"] #hero .wrap { z-index: 1; } /* The gem, for real: full-opacity facets inlined in the HTML, the report card overlapping its lower third. Evidence in front, brand behind. */ .hero-visual { position: relative; padding-top: clamp(3rem, 8vw, 6.5rem); } /* The gem peeks from behind the card's shoulder: brand emblem, not billboard - inside the panels it is Petra's avatar, which is where it does the real work. */ .hero-gem { position: absolute; top: 0; right: -1.5rem; width: clamp(10rem, 17vw, 13.5rem); height: auto; filter: drop-shadow(0 0 60px rgba(225, 29, 72, 0.38)); pointer-events: none; } .hero-visual .report-mini { max-width: 31rem; } /* ---- the rotator ---- */ .rotator-dots { display: inline-flex; align-items: center; gap: 0.45rem; } .rotator-dot { width: 0.6rem; height: 0.6rem; padding: 0; border-radius: 50%; border: 1.5px solid var(--fg-muted); background: transparent; cursor: pointer; } .rotator-dot[aria-selected="true"] { background: var(--accent); border-color: var(--accent); } .rotator-label { flex: 1; min-width: 0; margin-left: 0.6rem; font-family: var(--font-mono); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rotator-panels + figcaption, .hero-rotator > figcaption { padding: 0.6rem 1.25rem 0.9rem; } .rotator-panels { position: relative; } .rotator-panel { display: none; } .rotator-panel.is-active { display: block; animation: rotator-fade 250ms ease; } @keyframes rotator-fade { from { opacity: 0; } to { opacity: 1; } } @media (min-width: 60em) { .rotator-panels { min-height: 23.5rem; } } /* Compact chat variant for the hero panels. */ .chat-compact { gap: 0.7rem; } .chat-compact .chat-avatar { width: 1.75rem; height: 1.75rem; border-radius: 6px; font-size: 0.6875rem; } .chat-compact .chat-bubble { padding: 0.5rem 0.75rem; } .chat-compact .chat-bubble p { font-size: 0.85rem; margin: 0 0 0.35rem; } .chat-compact .chat-bubble p:last-child { margin-bottom: 0; } .chat-avatar-sys { background: color-mix(in srgb, var(--fg) 8%, transparent); border: 1px solid var(--hairline-strong); } .chat-avatar-sys svg { width: 1rem; height: 1rem; stroke: var(--fg-muted); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .panel-note { margin: 0.75rem 0 0; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; color: var(--accent); } .notes-list { margin: 0; padding-left: 1.15rem; } .notes-list li { color: var(--fg-muted); font-size: 0.9rem; margin-bottom: 0.45rem; } .hero-visual .report-mini { position: relative; z-index: 1; } /* Claim chips: the lede's clauses, readable in one saccade. */ .hero-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; } .chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.8rem; border: 1px solid var(--hairline-strong); border-radius: 999px; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--fg-muted); white-space: nowrap; } .chip svg { width: 1rem; height: 1rem; flex: 0 0 auto; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Duty glyphs: one monoline icon per duty, beside the dossier numerals. */ .duty-list > li { padding-left: 6rem; } .duty-icon { position: absolute; left: 3rem; top: 1.65rem; width: 1.5rem; height: 1.5rem; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 40em) { .duty-list > li { padding-left: 4.25rem; } .duty-icon { display: none; } } /* The shape of a shift: four nodes on a rail; 02:07 is the pitch. */ .shift-list { display: flex; gap: 1rem; list-style: none; margin: 2.25rem 0 1rem; padding: 0; position: relative; } .shift-list::before { content: ""; position: absolute; top: 0.34rem; left: 0.4rem; right: 8%; height: 2px; background: linear-gradient(90deg, var(--hairline-strong), var(--accent)); } .shift-list > li { flex: 1 1 0; position: relative; padding: 1.4rem 0.5rem 0 0; } .shift-list > li::before { content: ""; position: absolute; top: 0; left: 0.4rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--bg); border: 2.5px solid var(--accent); } .shift-list > li.shift-night::before { background: var(--accent); box-shadow: 0 0 16px var(--glow), 0 0 4px var(--accent); } .shift-time { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 1.0625rem; margin-bottom: 0.2rem; } .shift-what { color: var(--fg-muted); font-size: 0.9375rem; } .shift-night .shift-time { color: var(--accent); } /* The full-day version on how-it-works runs vertically at every width. */ .shift-vertical, .shift-list.shift-vertical { flex-direction: column; gap: 1.25rem; margin-left: 0.35rem; max-width: 40rem; } .shift-vertical::before { top: 0.4rem; bottom: 8%; left: 0.71rem; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--hairline-strong), var(--accent)); } .shift-vertical > li { padding: 0 0 0 2rem; } @media (max-width: 40em) { .shift-list { flex-direction: column; gap: 1.25rem; margin-left: 0.35rem; } .shift-list::before { top: 0.4rem; bottom: 8%; left: 0.71rem; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--hairline-strong), var(--accent)); } .shift-list > li { padding: 0 0 0 2rem; } } /* Card glyphs for the hiring and trust grids. */ .card-icon { display: block; width: 1.75rem; height: 1.75rem; margin-bottom: 0.75rem; stroke: var(--accent); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Kicker lines: the sentences that earn display treatment. */ .kicker { max-width: none; margin: 2.75rem auto 0; text-align: center; font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem); font-weight: 650; letter-spacing: -0.01em; } .kicker .kicker-gem { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.18em; margin-right: 0.45rem; } /* Section banding: the job description sits on a faint rose-tinted band with a brand thread at its top edge, so scrolling has landmarks. */ body[data-brand="hirepetra"] #job-description { position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--bg)), var(--bg)); } body[data-brand="hirepetra"] #job-description::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--accent), transparent 55%); opacity: 0.55; } /* The trust section carries a large faceted watermark, facets only, anchored low. */ body[data-brand="hirepetra"] #trust { position: relative; overflow: hidden; } .trust-gem { position: absolute; right: -1.5rem; bottom: -2.5rem; width: 19rem; height: auto; opacity: 0.09; pointer-events: none; } body[data-brand="hirepetra"] #trust .wrap { position: relative; } /* The employee-pillars grid: the "why hire is the right verb" section. */ .pillar-grid { grid-template-columns: 1fr; } .pillar-card { border-top: 3px solid var(--accent); } .pillar-card h3 { margin-bottom: 0.6rem; } /* Pillar spot illustrations: monoline, same stroke language as the duty icons. */ .pillar-il { display: block; width: min(9.5rem, 70%); height: auto; margin: 0.25rem 0 1rem; stroke: color-mix(in srgb, var(--fg) 70%, transparent); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .pillar-il .il-rose { stroke: var(--accent); } .pillar-il .il-rose-fill { fill: var(--accent); stroke: none; } .pillar-il .il-soft { opacity: 0.55; } .pillar-il .il-dash { stroke-dasharray: 4 4; } @media (min-width: 40em) { /* Doubled class beats the generic auto-fit card-grid rule in the breakpoints section. */ .card-grid.pillar-grid { grid-template-columns: 1fr 1fr; } } /* The honest-roadmap aside: quiet, with the tile rendition as its seal. */ .roadmap-note { display: flex; align-items: flex-start; gap: 1rem; max-width: 52rem; margin: 2rem 0 0; padding: 1.25rem 1.5rem; background: transparent; border: 1px dashed var(--hairline-strong); border-radius: var(--radius); } .roadmap-note img { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: var(--radius-sm); } .roadmap-note p { margin: 0; color: var(--fg-muted); font-size: 0.9688rem; } .roadmap-eyebrow { display: block; margin-bottom: 0.35rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } /* The expansion story gets a full-width Night band of its own. */ body[data-brand="hirepetra"] #first-hire-band { position: relative; padding: 3.25rem 0; background: radial-gradient(60vmax 40vmax at 50% 120%, rgba(225, 29, 72, 0.15), transparent 60%), #141014; color: #F1F2F5; } /* The band's edges read deliberate: the same rose thread as the section bands. */ body[data-brand="hirepetra"] #first-hire-band::before, body[data-brand="hirepetra"] #first-hire-band::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--accent), transparent 60%); opacity: 0.6; } body[data-brand="hirepetra"] #first-hire-band::before { top: 0; } body[data-brand="hirepetra"] #first-hire-band::after { bottom: 0; } #first-hire-band .kicker { margin: 0; } #first-hire-band .kicker-gem { width: 1.35em; height: 1.35em; vertical-align: -0.28em; } /* Her desk is every surface: the multimodal claim as a scannable strip. */ .surfaces-label { margin: 1.5rem 0 0; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); } .surfaces-strip { margin: 0.75rem 0 1.5rem; } /* The tangible output of each duty: deliverables, not features. */ .duty-artifact { margin: 0.45rem 0 0; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--accent); } /* The closed-until-launch date is the CTA until the 22nd - kicker-sized, not a second headline fighting the H2. */ .pilots-date { margin: 0 0 0.75rem; font-family: var(--font-mono); font-size: 1.125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); } /* The conversion moment: form on the left, "what happens next" rail on the right. */ .contact-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; } @media (min-width: 60em) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3rem; } } .pilot-rail { padding: 1.5rem; border: 1px solid var(--hairline-strong); border-top: 3px solid var(--accent); border-radius: var(--radius); background: linear-gradient(180deg, var(--card-tint), var(--surface) 55%); } .rail-title { margin: 0 0 1rem; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); } .rail-list { margin: 0; padding-left: 1.2rem; } .rail-list li { color: var(--fg-muted); font-size: 0.9375rem; margin-bottom: 0.65rem; } .rail-list li::marker { font-family: var(--font-mono); font-weight: 600; color: var(--accent); } /* The flat middle joins the brand system: same rose thread as the pillar cards. */ body[data-brand="hirepetra"] #hiring .card, body[data-brand="hirepetra"] #trust .card { border-top: 3px solid var(--accent); } /* The relocated anchor one-liner: the job posting's summary line. */ .duty-anchor { max-width: 52rem; font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem); font-weight: 650; line-height: 1.45; border-left: 4px solid var(--accent); padding-left: 1.25rem; } /* The employee-vs-tool contrast table (how-it-works). */ .contrast-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin: 1.5rem 0 0; } .contrast-table th, .contrast-table td { padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; } .contrast-table thead th { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); } .contrast-table tbody th { font-weight: 600; white-space: nowrap; color: var(--fg); } .contrast-table td:nth-child(2) { color: var(--fg-muted); } .contrast-table td:last-child { color: var(--fg); } .contrast-table tbody tr:last-child th, .contrast-table tbody tr:last-child td { border-bottom: 0; } /* Honest comparisons: "them" cards stay neutral; "Petra" cards carry the brand edge. */ .card-them > h3, .card-petra > h3 { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.75rem; } .card-them > h3 { color: var(--fg-muted); } .card-petra > h3 { color: var(--accent); } .card-petra { border-left: 3px solid var(--accent); } /* The battle card reads as one held breath: bigger, framed, foreground colour. */ #battle-card .wrap { max-width: 56rem; } #battle-card .lede { max-width: none; font-size: clamp(1.125rem, 1rem + 0.9vw, 1.5rem); line-height: 1.5; color: var(--fg); border-left: 4px solid var(--accent); padding-left: 1.5rem; } /* About: the narrative carries the page; give it presence. */ #story .prose { font-size: 1.0625rem; } #story .prose:first-of-type { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.3125rem); color: var(--fg); } /* Plusory: one fixed dark appearance (Night ground, ultramarine accents). The full palette lives on , so the OS preference and the cross-site toggle state both leave this page untouched - the maker's mark has exactly one look. */ body[data-brand="plusory"] { color-scheme: dark; --bg: #0E0E26; /* Night */ --surface: #191932; /* Ink */ --fg: #EEF0FA; --fg-muted: #A9AEC9; --border: #626A9B; --link: #A5AAF8; --btn-bg: #7D85F5; --btn-fg: #0E0E26; --accent: #7D85F5; --accent-strong: #A5AAF8; --ground: #0E0E26; --glow: rgba(125, 133, 245, 0.16); --card-tint: color-mix(in srgb, #7D85F5 6%, #191932); background: radial-gradient(110vmax 75vmax at 50% -18%, #1B1B45 0%, #0E0E26 58%); } body[data-brand="plusory"] main > section { padding: 2.5rem 0; } body[data-brand="plusory"] #hero { padding: 3rem 0 1.5rem; } body[data-brand="plusory"] #hero::before { display: none; /* the body gradient carries the glow */ } body[data-brand="plusory"] #hero .wrap { text-align: center; } /* The mark supports the headline, it does not compete with it: roughly three quarters of its earlier size, and the tagline below it stays the largest thing on the page. */ .hero-mark { display: block; width: clamp(6.5rem, 20vmin, 10rem); height: auto; margin: 0 auto 1.5rem; /* The asset carries its own Night plaque (brand files are never edited). Lighten dissolves that plaque into the page gradient and leaves only the tiles; no drop-shadow, because a shadow would trace the plaque's square edge. The body gradient carries the glow. */ mix-blend-mode: lighten; } /* The tagline IS the H1 - the largest text on the page. */ .tagline-hero { font-size: clamp(2.25rem, 1.4rem + 4vw, 4.25rem); letter-spacing: -0.02em; margin-bottom: 1rem; } body[data-brand="plusory"] #hero .lede { margin-left: auto; margin-right: auto; } /* The roster: an ordered list of employees, one entry so far. Wider than a product card on purpose - the employee is the significant object on a company that builds employees. Rose is the docked tile in the Plusory mark: the seat Petra took. */ .roster { max-width: 46rem; margin: 2rem auto 0; padding: 0; list-style: none; } .roster-card { position: relative; padding: 2rem 2.25rem; background: linear-gradient(180deg, var(--card-tint), var(--surface) 55%); border: 1px solid var(--hairline-strong); border-left: 4px solid #C81E4F; border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); text-align: left; } .roster-card article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 2rem; align-items: start; } .roster-no { font-family: var(--font-mono); font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--accent-strong); padding-top: 0.2rem; } .roster-name { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1.1; margin: 0 0 0.35rem; } .roster-role { margin: 0 0 1rem; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-strong); } .roster-body p { color: var(--fg-muted); font-size: 1.0625rem; line-height: 1.6; } .roster-body > :last-child { margin-bottom: 0; } .persona-link { font-weight: 600; } .persona-link a { text-decoration: none; } .persona-link a:hover { text-decoration: underline; } /* The second most important line on the page after the tagline: set as a statement, not a footnote. */ .roster-coda { max-width: 46rem; margin: 2rem auto 0; font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem); line-height: 1.55; color: var(--fg-muted); } .roster-coda strong { display: block; font-size: 1.25em; letter-spacing: -0.01em; color: var(--fg); } /* One closing line, set large and quiet. */ .credo-line { max-width: 40rem; margin: 0 auto; font-size: clamp(1.375rem, 1rem + 1.9vw, 2.5rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; } @media (max-width: 40em) { .roster-card { padding: 1.5rem 1.25rem; } .roster-card article { grid-template-columns: 1fr; gap: 0.5rem; } .roster-no { font-size: 2rem; padding-top: 0; } } body[data-brand="plusory"] section { text-align: center; } body[data-brand="plusory"] section .prose, body[data-brand="plusory"] section .eyebrow { text-align: center; } body[data-brand="plusory"] .eyebrow::before { display: none; } body[data-brand="plusory"] .prose { margin-left: auto; margin-right: auto; } body[data-brand="plusory"] .card, body[data-brand="plusory"] .card article { text-align: left; } /* Darthrix: one fixed dark plaque of a page - engraved seal on Night. The full palette is declared on , so the OS preference and the cross-site toggle state both leave this page untouched: Darthrix has exactly one appearance. */ body[data-brand="darthrix"] { color-scheme: dark; --bg: #0A1122; /* Night */ --surface: #131E33; /* Slate ink */ --fg: #DFE6F0; /* Silver */ --fg-muted: #93A3BC; --border: #64759F; --link: #DFE6F0; --btn-bg: #DFE6F0; --btn-fg: #0A1122; --accent: #DFE6F0; --accent-strong: #BFCADC; --ground: #0A1122; --glow: rgba(223, 230, 240, 0.05); } .page-plaque { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(120vmax 80vmax at 50% -20%, #16233D 0%, var(--bg) 55%); } .page-plaque main { flex: 1 1 auto; position: relative; display: grid; place-items: center; padding: 4rem var(--gutter); text-align: center; } /* The open-cut diamond, line rendition, engraved faintly behind the seal. */ .page-plaque main::before { content: ""; position: absolute; inset: 0; background: url("../assets/darthrix/darthrix-line.svg") center / min(88vmin, 40rem) no-repeat; opacity: 0.06; pointer-events: none; } .plaque { position: relative; max-width: 34rem; } .plaque-mark { display: block; width: clamp(7rem, 24vmin, 10.5rem); height: auto; margin: 0 auto 1.75rem; filter: drop-shadow(0 0 40px rgba(223, 230, 240, 0.12)); } .plaque-word { margin: 0 0 0.4rem; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); font-weight: 650; letter-spacing: 0.34em; text-indent: 0.34em; /* recenters letterspaced caps */ text-transform: uppercase; } .plaque-llc { font-weight: 300; color: var(--fg-muted); } .plaque-line { margin: 0 0 2rem; color: var(--fg-muted); font-size: 1rem; } .plaque-line a { color: var(--fg); } .plaque-rule { width: 6rem; margin: 0 auto 2rem; border: 0; border-top: 1px solid var(--border); } .plaque-sites { margin: 0 0 1.25rem; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; } .plaque-sites a { color: var(--fg); text-decoration: none; padding: 0.3rem 0.2rem; } .plaque-sites a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 0.35em; } .plaque-dot { margin: 0 0.9rem; color: var(--fg-muted); } .plaque-contact { margin: 0; font-size: 0.9375rem; } .plaque-contact a { color: var(--fg-muted); } .plaque-contact a:hover { color: var(--fg); } .plaque-foot { padding: 1.5rem 0 2rem; text-align: center; color: var(--fg-muted); font-size: 0.8125rem; } .plaque-foot p { margin: 0; } /* ========================================================================== 15. Breakpoints. Everything above is the 360px layout; these only add width. ========================================================================== */ @media (min-width: 40em) { .card-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .pilot-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } } @media (min-width: 60em) { main > section, main > article { padding: 4.5rem 0; } #hero { padding-top: 5rem; padding-bottom: 5rem; } .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; } .site-header .wrap { gap: 1rem 2rem; } } @media (max-width: 26em) { .site-header .wrap { align-items: flex-start; } .site-header .tagline { display: none; } .site-nav ul { gap: 0.25rem 0.1rem; } .btn { display: block; width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; scroll-behavior: auto; } html { scroll-behavior: auto; } }