/* ========================================================================== Helios Defender — site stylesheet. Self-contained: no CSS framework. Tokens first, then components. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Theme tokens Light is the default and does NOT follow the OS: a visitor with a dark system theme still gets light until they pick dark with the nav toggle. data-theme on carries the choice (set pre-paint from localStorage, defaulting to "light"), so both explicit values are spelled out below. -------------------------------------------------------------------------- */ :root { --hd-brand: #1668c1; /* passes contrast on white — use for text/links */ --hd-brand-bright: #2196f3; /* the original brand blue — fills and accents */ --hd-brand-ink: #0b4a8f; --hd-brand-contrast:#ffffff; --hd-brand-wash: #e8f2fd; --hd-surface: #ffffff; --hd-surface-2: #f4f7fa; --hd-surface-3: #eaf0f6; --hd-border: #dde4ec; --hd-ink: #101a26; --hd-ink-soft: #4d5a6a; --hd-ink-faint: #74818f; --hd-success: #1c7a4a; --hd-danger: #b3261e; --hd-danger-contrast: #ffffff; --hd-radius: 10px; --hd-radius-lg: 16px; --hd-shadow: 0 1px 2px rgb(16 26 38 / .06), 0 8px 24px rgb(16 26 38 / .07); --hd-shadow-lg: 0 2px 4px rgb(16 26 38 / .07), 0 18px 44px rgb(16 26 38 / .11); --hd-nav-h: 66px; --hd-maxw: 1290px; --hd-font-display: "Raleway", system-ui, sans-serif; --hd-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } :root[data-theme="dark"] { --hd-brand: #64b5f6; --hd-brand-bright: #4aa3ef; --hd-brand-ink: #8ecbff; --hd-brand-contrast:#08111c; --hd-brand-wash: rgb(100 181 246 / .12); --hd-surface: #0d1420; --hd-surface-2: #131c2b; --hd-surface-3: #1a2537; --hd-border: #223046; --hd-ink: #e8eef5; --hd-ink-soft: #9aa8ba; --hd-ink-faint: #6f7d8f; --hd-success: #4ac088; --hd-danger: #ef6f66; --hd-danger-contrast: #1c0705; --hd-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .34); --hd-shadow-lg: 0 2px 4px rgb(0 0 0 / .45), 0 18px 44px rgb(0 0 0 / .45); } :root[data-theme="light"] { --hd-brand: #1668c1; --hd-brand-bright: #2196f3; --hd-brand-ink: #0b4a8f; --hd-brand-contrast:#ffffff; --hd-brand-wash: #e8f2fd; --hd-surface: #ffffff; --hd-surface-2: #f4f7fa; --hd-surface-3: #eaf0f6; --hd-border: #dde4ec; --hd-ink: #101a26; --hd-ink-soft: #4d5a6a; --hd-ink-faint: #74818f; --hd-success: #1c7a4a; --hd-danger: #b3261e; --hd-danger-contrast: #ffffff; --hd-shadow: 0 1px 2px rgb(16 26 38 / .06), 0 8px 24px rgb(16 26 38 / .07); --hd-shadow-lg: 0 2px 4px rgb(16 26 38 / .07), 0 18px 44px rgb(16 26 38 / .11); } /* Applied by partials.js for one frame while data-theme flips. Without it, any element carrying a colour transition keeps the PREVIOUS theme's computed colour — changing a custom property does not reliably re-resolve a property that a running transition owns. Buttons, nav links and the theme toggle all hit this; untransitioned cards did not. Killing transitions for the swap makes every element repaint from the new tokens. */ :root.hd-theming *, :root.hd-theming *::before, :root.hd-theming *::after { transition: none !important; } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { color-scheme: light; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { margin: 0; background: var(--hd-surface); color: var(--hd-ink); font-family: var(--hd-font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .hd-display { font-family: var(--hd-font-display); color: var(--hd-ink); line-height: 1.15; text-wrap: balance; letter-spacing: -0.015em; margin: 0; } a { color: var(--hd-brand); } img { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--hd-brand); outline-offset: 2px; border-radius: 4px; } .hd-shell { max-width: var(--hd-maxw); margin-inline: auto; padding-inline: 20px; } .hd-section { padding-block: clamp(56px, 8vw, 104px); } .hd-section--tint { background: var(--hd-surface-2); } /* In-page anchors land below the sticky header rather than under it. (The reduced-motion block at the end forces scroll-behavior back to auto.) */ html { scroll-behavior: smooth; } :target, main > section[id] { scroll-margin-top: calc(var(--hd-nav-h) + 12px); } .hd-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hd-brand); margin: 0 0 12px; } .hd-lede { font-size: clamp(1rem, .96rem + .3vw, 1.14rem); color: var(--hd-ink-soft); max-width: 60ch; margin: 16px 0 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--hd-radius); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--hd-brand); border-color: var(--hd-brand); color: var(--hd-brand-contrast); } .btn--primary:hover { background: var(--hd-brand-ink); border-color: var(--hd-brand-ink); } .btn--outline { background: transparent; border-color: var(--hd-border); color: var(--hd-ink); } .btn--outline:hover { border-color: var(--hd-brand); color: var(--hd-brand); } .btn--block { width: 100%; } /* -------------------------------------------------------------------------- 4. Site header / navigation -------------------------------------------------------------------------- */ .hd-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--hd-surface) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--hd-border); } .hd-header__inner { max-width: var(--hd-maxw); margin-inline: auto; padding-inline: 20px; height: var(--hd-nav-h); display: flex; align-items: center; gap: 20px; } .hd-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--hd-font-display); font-weight: 700; font-size: 17px; letter-spacing: .01em; color: var(--hd-ink); text-decoration: none; flex: none; } .hd-brand img { height: 36px; width: auto; display: block; } .hd-nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; } .hd-nav a { padding: 8px 14px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--hd-ink-soft); text-decoration: none; transition: color .15s ease, background-color .15s ease; } .hd-nav a:hover { color: var(--hd-ink); background: var(--hd-surface-3); } .hd-nav a[aria-current="page"] { color: var(--hd-brand); font-weight: 600; } .hd-header__actions { display: flex; align-items: center; gap: 10px; flex: none; } /* Auth slot. min-height keeps the bar from reflowing while Clerk mounts. */ #clerk-auth-slot { display: flex; align-items: center; min-height: 38px; } /* Shown only to a returning signed-in visitor, holding the avatar's footprint until Clerk mounts the real UserButton. */ .hd-auth-skeleton { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--hd-surface-3); animation: hd-pulse 1.4s ease-in-out infinite; } @keyframes hd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } /* Theme toggle */ .hd-theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--hd-border); background: transparent; color: var(--hd-ink-soft); cursor: pointer; transition: color .15s ease, border-color .15s ease; } .hd-theme-toggle:hover { color: var(--hd-brand); border-color: var(--hd-brand); } .hd-theme-toggle svg { width: 18px; height: 18px; } .hd-theme-toggle .hd-icon-moon { display: none; } :root[data-theme="dark"] .hd-theme-toggle .hd-icon-sun { display: none; } :root[data-theme="dark"] .hd-theme-toggle .hd-icon-moon { display: block; } /* Hamburger — hidden on desktop */ .hd-burger { display: none; place-items: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--hd-border); background: transparent; color: var(--hd-ink); cursor: pointer; } .hd-burger svg { width: 20px; height: 20px; } /* Mobile drawer */ .hd-drawer-backdrop { position: fixed; inset: 0; background: rgb(8 14 22 / .5); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; z-index: 200; } .hd-drawer { position: fixed; inset-block: 0; right: 0; width: min(320px, 84vw); background: var(--hd-surface); border-left: 1px solid var(--hd-border); box-shadow: var(--hd-shadow-lg); transform: translateX(100%); transition: transform .26s cubic-bezier(.22,.61,.36,1); z-index: 201; display: flex; flex-direction: column; padding: 18px; gap: 6px; overflow-y: auto; } body.hd-drawer-open .hd-drawer-backdrop { opacity: 1; visibility: visible; } body.hd-drawer-open .hd-drawer { transform: translateX(0); } body.hd-drawer-open { overflow: hidden; } .hd-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .hd-drawer__close { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--hd-border); background: transparent; color: var(--hd-ink); cursor: pointer; } .hd-drawer__close svg { width: 18px; height: 18px; } .hd-drawer a.hd-drawer__link { padding: 13px 12px; border-radius: 9px; font-size: 16px; font-weight: 500; color: var(--hd-ink); text-decoration: none; } .hd-drawer a.hd-drawer__link:hover { background: var(--hd-surface-3); } .hd-drawer .btn { margin-top: 10px; } @media (max-width: 900px) { .hd-nav { display: none; } .hd-burger { display: grid; } .hd-header__actions .hd-desktop-only { display: none; } } /* -------------------------------------------------------------------------- 5. Hero -------------------------------------------------------------------------- */ .hd-hero { background: var(--hd-surface-2); border-bottom: 1px solid var(--hd-border); padding-block: clamp(56px, 9vw, 112px); } .hd-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .hd-hero h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); font-weight: 800; } .hd-hero h1 .hd-accent { color: var(--hd-brand); } .hd-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hd-hero__media img { border-radius: var(--hd-radius-lg); box-shadow: var(--hd-shadow-lg); display: block; width: 100%; } /* On roomy screens the hero art carries the product story, so weight the grid toward it — about 20% more image width. Below 1200px there isn't room to do this without squeezing the headline into extra lines, so it stays balanced. */ @media (min-width: 1200px) { .hd-hero .hd-hero__grid { grid-template-columns: 1fr 1.143fr; } } @media (max-width: 860px) { .hd-hero__grid { grid-template-columns: 1fr; } .hd-hero__media { order: -1; } } /* -------------------------------------------------------------------------- 6. Feature cards -------------------------------------------------------------------------- */ .hd-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 48px; } .hd-card { background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg); padding: 28px 24px; box-shadow: var(--hd-shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .hd-card:hover { transform: translateY(-3px); box-shadow: var(--hd-shadow-lg); border-color: color-mix(in srgb, var(--hd-brand) 40%, var(--hd-border)); } .hd-card__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--hd-brand-wash); color: var(--hd-brand); margin-bottom: 18px; } .hd-card__icon svg, .hd-card__icon img { width: 24px; height: 24px; } .hd-card h3 { font-size: 1.06rem; font-weight: 700; margin-bottom: 8px; } .hd-card p { margin: 0; color: var(--hd-ink-soft); font-size: 15px; } /* -------------------------------------------------------------------------- 7. Pricing -------------------------------------------------------------------------- */ .hd-pricing { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 48px; align-items: start; } .hd-plan { background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg); overflow: hidden; box-shadow: var(--hd-shadow); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; } .hd-plan:hover { transform: translateY(-3px); box-shadow: var(--hd-shadow-lg); } .hd-plan--featured { border-color: var(--hd-brand); box-shadow: var(--hd-shadow-lg); } .hd-plan__head { background: var(--hd-brand); color: var(--hd-brand-contrast); padding: 26px 24px; text-align: center; } .hd-plan__head h3 { color: inherit; font-size: 1.1rem; font-weight: 700; } .hd-plan__price { font-family: var(--hd-font-display); font-size: 2rem; font-weight: 800; margin-top: 8px; font-variant-numeric: tabular-nums; } .hd-plan__price span { font-size: .82rem; font-weight: 500; opacity: .85; } .hd-plan__body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .hd-plan__features { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; } .hd-plan__features li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--hd-ink-soft); } .hd-plan__features svg { width: 17px; height: 17px; color: var(--hd-brand); flex: none; margin-top: 2px; } .hd-plan__body .btn { margin-top: auto; } .hd-badge { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / .22); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 8. Footer -------------------------------------------------------------------------- */ .hd-footer { background: var(--hd-surface-2); border-top: 1px solid var(--hd-border); padding-block: 56px 40px; text-align: center; } .hd-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin-bottom: 26px; } .hd-footer__links a { padding: 8px 14px; border-radius: 8px; font-size: 15px; color: var(--hd-ink-soft); text-decoration: none; } .hd-footer__links a:hover { color: var(--hd-brand); background: var(--hd-surface-3); } .hd-footer__meta { color: var(--hd-ink-faint); font-size: 14px; margin: 6px 0; } .hd-footer__meta a { color: var(--hd-brand); } .hd-top-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; padding: 9px 16px; border: 1px solid var(--hd-border); border-radius: 999px; background: transparent; color: var(--hd-ink-soft); font: inherit; font-size: 14px; cursor: pointer; } .hd-top-link:hover { color: var(--hd-brand); border-color: var(--hd-brand); } .hd-top-link svg { width: 15px; height: 15px; } /* -------------------------------------------------------------------------- 9. Chat page -------------------------------------------------------------------------- */ .chat-wrap { padding-block: clamp(28px, 5vw, 56px); } .chat-container { max-width: 860px; margin-inline: auto; background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg); box-shadow: var(--hd-shadow); overflow: hidden; display: flex; flex-direction: column; height: min(70vh, 640px); } .chat-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hd-border); background: var(--hd-surface-2); } .chat-header h1 { font-size: 1rem; font-weight: 700; margin: 0; } .chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--hd-surface); } .message { max-width: 76%; padding: 12px 15px; border-radius: 14px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; } .bot-message { align-self: flex-start; background: var(--hd-surface-3); color: var(--hd-ink); border-bottom-left-radius: 4px; } .user-message { align-self: flex-end; background: var(--hd-brand); color: var(--hd-brand-contrast); border-bottom-right-radius: 4px; } .system-message { align-self: center; background: transparent; color: var(--hd-ink-faint); font-size: 13px; font-style: italic; max-width: 90%; text-align: center; } .chat-input-container { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--hd-border); background: var(--hd-surface-2); } .chat-input { flex: 1; padding: 12px 15px; border: 1px solid var(--hd-border); border-radius: 10px; background: var(--hd-surface); color: var(--hd-ink); font: inherit; font-size: 15px; resize: none; max-height: 140px; } .chat-input::placeholder { color: var(--hd-ink-faint); } .chat-input:focus { outline: 2px solid var(--hd-brand); outline-offset: 1px; border-color: transparent; } .chat-send-btn { display: grid; place-items: center; width: 46px; border: none; border-radius: 10px; background: var(--hd-brand); color: var(--hd-brand-contrast); cursor: pointer; flex: none; transition: background-color .18s ease; } .chat-send-btn:hover { background: var(--hd-brand-ink); } .chat-send-btn svg { width: 19px; height: 19px; } .clear-chat-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--hd-border); border-radius: 8px; background: transparent; color: var(--hd-ink-soft); font: inherit; font-size: 13.5px; cursor: pointer; } .clear-chat-btn:hover { color: var(--hd-danger); border-color: var(--hd-danger); } .clear-chat-btn svg { width: 14px; height: 14px; } /* -------------------------------------------------------------------------- 10. Educational Resources page -------------------------------------------------------------------------- */ /* Numbered marker tying a highlight in the sample email to its explanation. */ .hd-pin { display: inline-grid; place-items: center; width: 21px; height: 21px; flex: none; border-radius: 50%; background: var(--hd-danger); color: var(--hd-danger-contrast); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; vertical-align: middle; } .hd-anatomy { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 3.5vw, 44px); align-items: start; margin-top: 40px; } @media (max-width: 900px) { .hd-anatomy { grid-template-columns: 1fr; } } /* Recreation of the scam email, styled like a mail client. */ .hd-mail { background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg); box-shadow: var(--hd-shadow); overflow: hidden; font-size: 14px; } .hd-mail__bar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--hd-border); background: var(--hd-surface-2); } .hd-mail__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hd-border); } .hd-mail__subject { font-weight: 700; color: var(--hd-ink); margin-left: 4px; } .hd-mail__meta { padding: 16px 18px; border-bottom: 1px solid var(--hd-border); } .hd-mail__from { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .hd-mail__name { font-weight: 700; color: var(--hd-ink); } .hd-mail__addr { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; color: var(--hd-ink-soft); word-break: break-all; } .hd-mail__body { padding: 18px; color: var(--hd-ink-soft); line-height: 1.65; } .hd-mail__body p { margin: 0 0 13px; } .hd-mail__body p:last-child { margin-bottom: 0; } .hd-mail__sig { font-size: 13px; color: var(--hd-ink-faint); } /* Suspicious span inside the sample email. */ .hd-susp { background: color-mix(in srgb, var(--hd-danger) 14%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--hd-danger) 55%, transparent); border-radius: 3px; padding: 1px 3px; color: var(--hd-ink); font-weight: 600; } .hd-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .hd-key li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--hd-border); } .hd-key li:last-child { border-bottom: none; padding-bottom: 0; } .hd-key h3 { font-size: .96rem; font-weight: 700; margin: 0 0 3px; } .hd-key p { margin: 0; font-size: 14px; color: var(--hd-ink-soft); } /* Red-flag checklist, grouped by where the flag appears. */ .hd-flags { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 40px; } .hd-flags__group { background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg); padding: 24px; box-shadow: var(--hd-shadow); } .hd-flags__group h3 { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--hd-brand); margin-bottom: 14px; } .hd-flags__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .hd-flags__group li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 14.5px; color: var(--hd-ink-soft); line-height: 1.5; } .hd-flags__group svg { width: 16px; height: 16px; color: var(--hd-danger); margin-top: 3px; } /* URL dissection */ .hd-url-demo { display: grid; gap: 18px; margin-top: 36px; } .hd-url { background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: var(--hd-radius); padding: 18px 20px; box-shadow: var(--hd-shadow); overflow-x: auto; } .hd-url__str { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: clamp(13px, 1.6vw, 16px); white-space: nowrap; color: var(--hd-ink-faint); } .hd-url__real { font-weight: 700; padding: 2px 5px; border-radius: 4px; } .hd-url--safe .hd-url__real { background: color-mix(in srgb, var(--hd-success) 16%, transparent); color: var(--hd-success); } .hd-url--bad .hd-url__real { background: color-mix(in srgb, var(--hd-danger) 16%, transparent); color: var(--hd-danger); } .hd-url__verdict { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 600; } .hd-url--safe .hd-url__verdict { color: var(--hd-success); } .hd-url--bad .hd-url__verdict { color: var(--hd-danger); } .hd-url__verdict svg { width: 17px; height: 17px; flex: none; } /* Lookalike character tricks */ .hd-lookalike { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 28px; } .hd-lookalike div { background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: var(--hd-radius); padding: 15px 17px; } .hd-lookalike code { display: block; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 15px; color: var(--hd-danger); font-weight: 700; margin-bottom: 6px; word-break: break-all; } .hd-lookalike code b { background: color-mix(in srgb, var(--hd-danger) 20%, transparent); border-radius: 3px; padding: 0 2px; } .hd-lookalike span { font-size: 13.5px; color: var(--hd-ink-soft); } /* Ordered response steps — the numbering encodes real sequence here. */ .hd-steps { list-style: none; margin: 40px 0 0; padding: 0; counter-reset: step; display: grid; gap: 16px; } .hd-steps li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg); padding: 20px 22px; box-shadow: var(--hd-shadow); } .hd-steps li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--hd-brand-wash); color: var(--hd-brand); font-family: var(--hd-font-display); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; } .hd-steps h3 { font-size: 1rem; font-weight: 700; margin: 4px 0 5px; } .hd-steps p { margin: 0; font-size: 14.5px; color: var(--hd-ink-soft); } /* Scroll-to-next-section control. A real anchor, so it works without JS and is keyboard reachable. The sections carry scroll-margin-top so the sticky header doesn't cover the heading on arrival. It sticks to the bottom of the viewport for as long as its own section is on screen, so after each jump the next control is already in reach and the reader can step through the page without hunting for it. Once the section scrolls past, the control settles into normal flow and the following section's takes over. The wrapper is click-through; only the button itself takes pointer events. */ .hd-next { position: sticky; bottom: clamp(14px, 2.5vh, 26px); z-index: 40; display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 66px); pointer-events: none; } .hd-next a { pointer-events: auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hd-border); /* Slightly translucent + blurred: it floats over body copy while pinned. */ background: color-mix(in srgb, var(--hd-surface) 88%, transparent); backdrop-filter: saturate(180%) blur(10px); color: var(--hd-ink-soft); text-decoration: none; box-shadow: var(--hd-shadow-lg); transition: color .18s ease, border-color .18s ease, background-color .18s ease; } .hd-next a:hover { color: var(--hd-brand); border-color: var(--hd-brand); background: var(--hd-brand-wash); } /* Animate the icon, not the button, so the hover styles can't fight the keyframes. */ .hd-next svg { width: 20px; height: 20px; animation: hd-nudge 2.6s ease-in-out infinite; } @keyframes hd-nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(4px); } } /* Attack-type table */ .hd-types { margin-top: 40px; overflow-x: auto; } .hd-types table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 14.5px; } .hd-types th { text-align: left; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--hd-ink-faint); font-weight: 700; padding: 0 16px 12px 0; border-bottom: 1px solid var(--hd-border); } .hd-types td { padding: 15px 16px 15px 0; border-bottom: 1px solid var(--hd-border); color: var(--hd-ink-soft); vertical-align: top; line-height: 1.55; } .hd-types tr:last-child td { border-bottom: none; } .hd-types td:first-child { color: var(--hd-ink); font-weight: 700; white-space: nowrap; } /* -------------------------------------------------------------------------- 11. Motion preferences -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }