@charset "UTF-8"; /* ========================================================================== ZEROSOURCE — assets/css/styles.css Australian application security consultancy · single-page site -------------------------------------------------------------------------- CONTENTS 01. Theme tokens & theme definitions 02. Reset & base 03. Layout primitives 04. Typography helpers 05. Buttons, icons, chips 06. Header & navigation 07. Hero 08. Sector strip 09. Sections (About / Why / Services) 10. Contact & form 11. Footer 12. Reveal animation 13. Responsive 14. Reduced motion, print, forced colours ========================================================================== ┌────────────────────────────────────────────────────────────────────────┐ │ HOW TO CHANGE THE COLOUR THEME │ │ │ │ Option A — from HTML (recommended): │ │ │ │ │ │ Option B — lock it from CSS (overrides the HTML attribute): │ │ Find the theme block you want in section 01 below and prepend │ │ `:root:root,` to its selector list. `:root:root` has a higher │ │ specificity than `[data-theme="…"]`, so it always wins. │ │ │ │ :root:root, ← add this one line │ │ [data-theme="terminal"] { … } │ │ │ │ (Remove it from whichever block you added it to previously — │ │ only one theme block should carry the `:root:root,` line.) │ │ │ │ Available themes: │ │ obsidian · signal · aurora · terminal · daylight │ └────────────────────────────────────────────────────────────────────────┘ ========================================================================== */ /* ========================================================================== 01. THEME TOKENS ========================================================================== */ /* -- Non-colour tokens: shared by every theme ----------------------------- */ :root { /* Type */ --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Fluid type scale */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-sm: clamp(0.8125rem, 0.79rem + 0.2vw, 0.9375rem); --fs-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); --fs-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); --fs-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --fs-h3: clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem); --fs-h2: clamp(1.875rem, 1.35rem + 2.4vw, 3.25rem); --fs-h1: clamp(2.375rem, 1.5rem + 4.1vw, 4.75rem); /* Space */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.75rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* Shape */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* Motion */ --ease: cubic-bezier(.22, 1, .36, 1); --dur: 260ms; /* Layout */ --shell: 1200px; --shell-pad: clamp(1.125rem, 4vw, 2.5rem); --header-h: 74px; } /* -------------------------------------------------------------------------- THEME · OBSIDIAN — dark charcoal + electric teal [default] -------------------------------------------------------------------------- */ :root, [data-theme="obsidian"] { color-scheme: dark; --bg: #06080b; --bg-2: #090d13; --surface: #0d1219; --surface-2: #121924; --surface-3: #17202c; --border: rgb(255 255 255 / 8%); --border-strong: rgb(255 255 255 / 14%); --text: #e7eef7; --text-muted: #97a5b8; --text-dim: #63718a; --accent: #22e0c8; --accent-2: #4f8cff; --accent-soft: rgb(34 224 200 / 12%); --accent-line: rgb(34 224 200 / 32%); --on-accent: #04120f; --danger: #ff5f6d; --warn: #ffb020; --ok: #3ee08a; --grid-color: rgb(255 255 255 / 7%); --glow-a: rgb(34 224 200 / 22%); --glow-b: rgb(79 140 255 / 18%); --shadow: 0 24px 60px -24px rgb(0 0 0 / 80%); --shadow-sm: 0 8px 24px -12px rgb(0 0 0 / 70%); --header-bg: rgb(6 8 11 / 72%); --noise-blend: soft-light; --noise-alpha: .5; } /* -------------------------------------------------------------------------- THEME · SIGNAL — dark umber + amber / ember -------------------------------------------------------------------------- */ [data-theme="signal"] { color-scheme: dark; --bg: #0a0806; --bg-2: #100c08; --surface: #16110c; --surface-2: #1e1710; --surface-3: #271e15; --border: rgb(255 236 214 / 9%); --border-strong: rgb(255 236 214 / 16%); --text: #f6ece1; --text-muted: #b9a692; --text-dim: #86735f; --accent: #ffb020; --accent-2: #ff6a45; --accent-soft: rgb(255 176 32 / 12%); --accent-line: rgb(255 176 32 / 32%); --on-accent: #1b1000; --danger: #ff5f56; --warn: #ffcc55; --ok: #6fd68a; --grid-color: rgb(255 220 180 / 7%); --glow-a: rgb(255 176 32 / 20%); --glow-b: rgb(255 106 69 / 16%); --shadow: 0 24px 60px -24px rgb(0 0 0 / 82%); --shadow-sm: 0 8px 24px -12px rgb(0 0 0 / 72%); --header-bg: rgb(10 8 6 / 74%); --noise-blend: soft-light; --noise-alpha: .5; } /* -------------------------------------------------------------------------- THEME · AURORA — dark indigo + violet / magenta -------------------------------------------------------------------------- */ [data-theme="aurora"] { color-scheme: dark; --bg: #07060f; --bg-2: #0b0917; --surface: #100d1f; --surface-2: #171229; --surface-3: #1f1936; --border: rgb(226 214 255 / 9%); --border-strong: rgb(226 214 255 / 16%); --text: #ece8fb; --text-muted: #a99fc8; --text-dim: #766c96; --accent: #a86bff; --accent-2: #ff5cc8; --accent-soft: rgb(168 107 255 / 14%); --accent-line: rgb(168 107 255 / 34%); --on-accent: #120520; --danger: #ff5f8a; --warn: #ffc14d; --ok: #4fe0b0; --grid-color: rgb(210 195 255 / 8%); --glow-a: rgb(168 107 255 / 24%); --glow-b: rgb(255 92 200 / 18%); --shadow: 0 24px 60px -24px rgb(0 0 0 / 82%); --shadow-sm: 0 8px 24px -12px rgb(0 0 0 / 72%); --header-bg: rgb(7 6 15 / 74%); --noise-blend: soft-light; --noise-alpha: .5; } /* -------------------------------------------------------------------------- THEME · TERMINAL — near-black + phosphor green -------------------------------------------------------------------------- */ [data-theme="terminal"] { color-scheme: dark; --bg: #040604; --bg-2: #070b07; --surface: #0a0f0a; --surface-2: #0e150e; --surface-3: #131d13; --border: rgb(160 255 180 / 10%); --border-strong: rgb(160 255 180 / 18%); --text: #d8f5de; --text-muted: #86ab8f; --text-dim: #5b7a62; --accent: #3ef77f; --accent-2: #b6ff4d; --accent-soft: rgb(62 247 127 / 11%); --accent-line: rgb(62 247 127 / 30%); --on-accent: #021206; --danger: #ff5f56; --warn: #ffd24d; --ok: #3ef77f; --grid-color: rgb(120 255 150 / 8%); --glow-a: rgb(62 247 127 / 18%); --glow-b: rgb(182 255 77 / 12%); --shadow: 0 24px 60px -24px rgb(0 0 0 / 88%); --shadow-sm: 0 8px 24px -12px rgb(0 0 0 / 78%); --header-bg: rgb(4 6 4 / 78%); --noise-blend: soft-light; --noise-alpha: .55; } /* -------------------------------------------------------------------------- THEME · DAYLIGHT — light slate + deep teal -------------------------------------------------------------------------- */ [data-theme="daylight"] { color-scheme: light; --bg: #f6f8fb; --bg-2: #eef2f7; --surface: #ffffff; --surface-2: #f3f6fa; --surface-3: #e9eef5; --border: rgb(11 24 41 / 10%); --border-strong: rgb(11 24 41 / 18%); --text: #0c1725; --text-muted: #4a5a70; --text-dim: #74839a; --accent: #0e7c72; --accent-2: #1f5fd0; --accent-soft: rgb(14 124 114 / 10%); --accent-line: rgb(14 124 114 / 26%); --on-accent: #ffffff; --danger: #c8253c; --warn: #a86300; --ok: #10794c; --grid-color: rgb(11 24 41 / 7%); --glow-a: rgb(14 124 114 / 14%); --glow-b: rgb(31 95 208 / 12%); --shadow: 0 24px 50px -26px rgb(13 28 48 / 30%); --shadow-sm: 0 8px 22px -14px rgb(13 28 48 / 26%); --header-bg: rgb(246 248 251 / 80%); --noise-blend: multiply; --noise-alpha: .28; } /* ========================================================================== 02. RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.25rem); } body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Subtle full-page texture so flat dark panels do not band */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: url("../img/noise.svg"); background-size: 220px 220px; opacity: var(--noise-alpha); mix-blend-mode: var(--noise-blend); } img, svg { display: block; max-width: 100%; } /* Default icon geometry — filled social marks override via attributes */ svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } ul, ol { list-style: none; padding: 0; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.022em; text-wrap: balance; } p { text-wrap: pretty; } ::selection { background: var(--accent); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: fixed; top: var(--sp-3); left: 50%; translate: -50% -180%; z-index: 200; padding: 0.7rem 1.25rem; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-weight: 600; transition: translate var(--dur) var(--ease); } .skip-link:focus-visible { translate: -50% 0; } /* ========================================================================== 03. LAYOUT PRIMITIVES ========================================================================== */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--shell-pad); } .section { position: relative; padding-block: clamp(3.5rem, 8vw, var(--sp-10)); } .section--alt { background: var(--bg-2); border-block: 1px solid var(--border); } .section__head { max-width: 62ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .section__title { font-size: var(--fs-h2); margin-block: var(--sp-3) var(--sp-4); } .section__sub { color: var(--text-muted); font-size: var(--fs-lg); max-width: 60ch; } /* ========================================================================== 04. TYPOGRAPHY HELPERS ========================================================================== */ .mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; } .grad { background: linear-gradient(100deg, var(--accent) 10%, var(--accent-2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.85rem 0.35rem 0.6rem; border: 1px solid var(--accent-line); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; } .eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: pulse 2.6s var(--ease) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .lede { font-size: var(--fs-lg); color: var(--text); } .split__body p + p { margin-top: var(--sp-4); } .section__head .section__sub { margin-top: var(--sp-4); } strong { color: var(--text); font-weight: 600; } em { color: var(--accent); font-style: italic; } /* ========================================================================== 05. BUTTONS, ICONS, CHIPS ========================================================================== */ .icon { width: 1.15em; height: 1.15em; flex: none; } .btn { --btn-pad: 0.85rem 1.4rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: var(--btn-pad); border: 1px solid transparent; border-radius: var(--r-pill); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.005em; white-space: nowrap; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn .icon { transition: translate var(--dur) var(--ease); } .btn:hover .icon { translate: 3px 0; } .btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 30px -12px var(--glow-a); } .btn--primary:hover { translate: 0 -2px; box-shadow: 0 16px 36px -12px var(--glow-a); background: color-mix(in oklab, var(--accent) 88%, white); } .btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); } .btn--ghost:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); translate: 0 -2px; } .btn--sm { --btn-pad: 0.62rem 1.05rem; font-size: var(--fs-xs); } .btn--block { width: 100%; } .chiplist { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--sp-4); } .chiplist li { padding: 0.25rem 0.6rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-xs); white-space: nowrap; } .tick-list { display: grid; gap: 0.7rem; margin-top: var(--sp-5); } .tick-list li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--text-muted); font-size: var(--fs-sm); } .tick-list .icon { margin-top: 0.28em; color: var(--accent); stroke-width: 2.4; } /* ========================================================================== 06. HEADER & NAVIGATION ========================================================================== */ .site-header { position: fixed; inset: 0 0 auto; z-index: 100; background: transparent; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease); border-bottom: 1px solid transparent; } .site-header.is-stuck { background: var(--header-bg); border-bottom-color: var(--border); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: var(--header-h); } .header__progress { height: 2px; width: 100%; transform-origin: 0 50%; scale: 0 1; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: scale 90ms linear; } /* -- Brand ---------------------------------------------------------------- */ .brand { display: inline-flex; align-items: center; gap: 0.7rem; } .brand__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); transition: box-shadow var(--dur) var(--ease), translate var(--dur) var(--ease); } .brand__mark svg { width: 24px; height: 24px; } .brand:hover .brand__mark { box-shadow: 0 0 0 4px var(--accent-soft); } .brand__text { display: grid; line-height: 1.15; } .brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.09rem; letter-spacing: -0.02em; } .brand__tag { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-dim); } /* -- Nav ------------------------------------------------------------------ */ .nav { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.75rem); } .nav__list { display: flex; align-items: center; gap: clamp(0.25rem, 1.4vw, 0.6rem); } .nav__link { position: relative; display: inline-block; padding: 0.5rem 0.7rem; border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .nav__link::after { content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.28rem; height: 1.5px; border-radius: 2px; background: var(--accent); scale: 0 1; transform-origin: 0 50%; transition: scale var(--dur) var(--ease); } .nav__link:hover { color: var(--text); } .nav__link:hover::after, .nav__link.is-active::after { scale: 1 1; } .nav__link.is-active { color: var(--text); } .nav-toggle { display: none; place-items: center; width: 42px; height: 42px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); } .nav-toggle .icon { width: 22px; height: 22px; } .nav-toggle__close { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; } .nav-scrim { position: fixed; inset: 0; z-index: 90; background: rgb(0 0 0 / 55%); backdrop-filter: blur(2px); } /* ========================================================================== 07. HERO ========================================================================== */ .hero { position: relative; padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5.5rem)); padding-bottom: clamp(3rem, 7vw, 5.5rem); overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero__grid { position: absolute; inset: -10% -10% 0; background: var(--grid-color); -webkit-mask-image: url("../img/grid.svg"); mask-image: url("../img/grid.svg"); -webkit-mask-size: 56px 56px; mask-size: 56px 56px; -webkit-mask-repeat: repeat; mask-repeat: repeat; opacity: .9; } .hero::after { content: ""; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(to bottom, transparent, var(--bg) 85%); pointer-events: none; z-index: 0; } .hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); } .hero__glow--a { width: min(46rem, 90vw); aspect-ratio: 1; top: -18rem; left: -10rem; background: var(--glow-a); } .hero__glow--b { width: min(38rem, 80vw); aspect-ratio: 1; top: -6rem; right: -12rem; background: var(--glow-b); } .hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .hero__title { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.035em; margin-block: var(--sp-5) var(--sp-5); } .hero__lede { max-width: 56ch; font-size: var(--fs-lg); color: var(--text-muted); } .hero__lede .mono { color: var(--text-dim); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); } .hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: clamp(1rem, 4vw, 2.75rem); margin-top: clamp(2rem, 5vw, 3rem); padding-top: var(--sp-5); border-top: 1px solid var(--border); justify-content: start; } .stat__label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); } .stat__value { margin-top: 0.2rem; font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-weight: 700; letter-spacing: -0.03em; color: var(--text); } /* -- Terminal panel ------------------------------------------------------- */ .hero__panel { position: relative; } .term { border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow); overflow: hidden; } .term__bar { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.95rem; border-bottom: 1px solid var(--border); background: var(--surface-3); } .term__dots { display: inline-flex; gap: 6px; } .term__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); } .term__dots i:first-child { background: color-mix(in oklab, var(--danger) 70%, transparent); } .term__dots i:nth-child(2) { background: color-mix(in oklab, var(--warn) 70%, transparent); } .term__dots i:last-child { background: color-mix(in oklab, var(--ok) 70%, transparent); } .term__title { color: var(--text-dim); font-size: 0.72rem; } .term__body { margin: 0; padding: 1.1rem 1.15rem 1.35rem; font-size: clamp(0.66rem, 0.55rem + 0.32vw, 0.78rem); line-height: 1.75; color: var(--text-muted); overflow-x: auto; white-space: pre; tab-size: 2; } .c-dim { color: var(--text-dim); } .c-cmd { color: var(--accent); font-weight: 500; } .c-ok { color: var(--ok); } .c-hi { color: var(--warn); } .c-crit { color: var(--danger); font-weight: 500; } .c-high { color: var(--warn); font-weight: 500; } .c-str { color: var(--accent-2); } .term__body .c-cmd:last-child { animation: caret 1.1s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } /* ========================================================================== 08. SECTOR STRIP ========================================================================== */ .sectors { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.75rem, 3vw, 2rem); margin-top: clamp(2.5rem, 6vw, 4.5rem); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: color-mix(in oklab, var(--surface) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .sectors__label { color: var(--text-dim); font-size: var(--fs-xs); letter-spacing: 0.13em; text-transform: uppercase; } .sectors__list { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 2.5vw, 1.9rem); } .sectors__list li { position: relative; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); } .sectors__list li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 0.55rem; border-radius: 50%; background: var(--accent); vertical-align: 0.18em; opacity: .65; } /* ========================================================================== 09. SECTIONS: ABOUT / WHY / SERVICES ========================================================================== */ .split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 4.5rem); align-items: start; } .split__lead { position: sticky; top: calc(var(--header-h) + 2.5rem); } .split__body p { color: var(--text-muted); } .split__body .lede { color: var(--text); } /* -- Card grids ----------------------------------------------------------- */ .cards { display: grid; gap: clamp(0.9rem, 2vw, 1.35rem); } .cards--why { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards--services { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card { position: relative; display: flex; flex-direction: column; padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; transition: border-color var(--dur) var(--ease), translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); } /* Accent hairline that sweeps in on hover */ .card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); scale: 0 1; transition: scale 420ms var(--ease); } .card:hover { translate: 0 -4px; border-color: var(--accent-line); background: var(--surface-2); box-shadow: var(--shadow-sm); } .card:hover::before { scale: 1 1; } .card__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--sp-4); border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); transition: box-shadow var(--dur) var(--ease); } .card__icon svg { width: 22px; height: 22px; } .card:hover .card__icon { box-shadow: 0 0 0 5px var(--accent-soft); } .card__title { font-size: var(--fs-h3); margin-bottom: var(--sp-3); } .card__text { color: var(--text-muted); font-size: var(--fs-sm); flex: 1; } .card--service .card__title { letter-spacing: -0.025em; } /* -- Advisory band -------------------------------------------------------- */ .advisory { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 3vw, 2rem); margin-top: clamp(0.9rem, 2vw, 1.35rem); padding: clamp(1.4rem, 3vw, 2.1rem); border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: radial-gradient(120% 180% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface); } .advisory__icon { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--surface-2); color: var(--accent); } .advisory__icon svg { width: 26px; height: 26px; } .advisory__title { font-size: var(--fs-h3); margin-bottom: var(--sp-2); } .advisory__text { color: var(--text-muted); font-size: var(--fs-sm); max-width: 72ch; } .advisory__cta { align-self: center; } /* ========================================================================== 10. CONTACT & FORM ========================================================================== */ .contact { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; } .contact__info { padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); } .contact__list { display: grid; gap: var(--sp-5); } .contact__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: start; } .contact__icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--accent-line); border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); } .contact__icon svg { width: 19px; height: 19px; } .contact__label { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); } .contact__value { display: block; margin-top: 0.15rem; color: var(--text); font-size: var(--fs-sm); line-height: 1.55; } a.contact__value { transition: color var(--dur) var(--ease); } a.contact__value:hover { color: var(--accent); } .pgp { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px dashed var(--border-strong); } .pgp__label { font-size: var(--fs-xs); letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); } .pgp__text { margin-top: 0.4rem; color: var(--text-muted); font-size: var(--fs-sm); } .pgp__text a { color: var(--text); border-bottom: 1px solid var(--accent-line); } .pgp__text a:hover { color: var(--accent); } /* -- Form ----------------------------------------------------------------- */ .form { display: grid; gap: var(--sp-4); padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } .field { display: grid; gap: 0.4rem; } .field__label { font-size: var(--fs-sm); font-weight: 500; color: var(--text); } .req { color: var(--accent); } .field__input { width: 100%; padding: 0.72rem 0.9rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font-size: var(--fs-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); } .field__input::placeholder { color: var(--text-dim); } .field__input:hover { border-color: var(--accent-line); } .field__input:focus { outline: none; border-color: var(--accent); /* background-color, not the shorthand — the