/* ============================================================================ Serrano NetSec, stylesheet Swiss-technical: precise, sober, generous whitespace, hairline rules. ========================================================================== */ /* --- Design tokens (from the brief) --------------------------------------- Light is the base. Dark redefines only the colour tokens, further down. Some surfaces are dark in BOTH themes: the highlight panel, the call to action band and the footer. Those read from their own tokens rather than from --accent or --ink, because inverting the palette would otherwise turn the footer light and put white text on a pale blue panel. Anything painted on top of them uses --on-panel, which stays constant. ------------------------------------------------------------------------ */ :root { color-scheme: light; --ink: #14181F; --muted: #5C6672; --line: #DCE1E7; --accent: #0E4A5F; --accent-2: #17708A; --tint: #EEF4F6; --paper: #FFFFFF; /* Derived */ --ink-soft: #2C333D; --accent-ink: #0A3849; --focus: #17708A; /* Semantic surfaces */ --header-bg: rgba(255, 255, 255, .9); --panel-bg: #0E4A5F; /* dark in both themes */ --cta-bg: #0E4A5F; /* dark in both themes */ --footer-bg: #14181F; /* dark in both themes */ --card-shade: transparent; /* Text drawn on an accent-coloured fill (primary buttons, active language) */ --on-accent: #FFFFFF; /* Text on the white buttons that only ever sit on the dark surfaces above */ --on-panel: #0E4A5F; /* Type */ --font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* Rhythm */ --wrap: 1140px; --gap: clamp(1.25rem, 3vw, 2rem); --section-y: clamp(3.5rem, 8vw, 6.5rem); --radius: 3px; } /* --- Dark theme ------------------------------------------------------------ config.js resolves the theme before the first paint and stamps data-theme on , so there is no flash of the wrong colours. The media query below is the fallback for a visitor with JavaScript disabled, where no attribute is ever set: it only applies when data-theme is absent. The accent lightens in dark mode. The brand teal is too dark to read against a dark background, so #0E4A5F is kept for the dark surfaces (which stay dark) while text and controls use a lighter tint of the same hue. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --ink: #E7ECF2; --muted: #98A4B1; --line: #242D38; --accent: #4FB3D0; --accent-2: #7FD3E8; --tint: #141A21; --paper: #0E1319; --ink-soft: #C6CFD9; --accent-ink: #7FD3E8; --focus: #7FD3E8; --header-bg: rgba(14, 19, 25, .88); --panel-bg: #0F2A35; --cta-bg: #0F2A35; --footer-bg: #090D12; --card-shade: rgba(255, 255, 255, .015); --on-accent: #06131A; /* dark text on the now-light accent */ } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --ink: #E7ECF2; --muted: #98A4B1; --line: #242D38; --accent: #4FB3D0; --accent-2: #7FD3E8; --tint: #141A21; --paper: #0E1319; --ink-soft: #C6CFD9; --accent-ink: #7FD3E8; --focus: #7FD3E8; --header-bg: rgba(14, 19, 25, .88); --panel-bg: #0F2A35; --cta-bg: #0F2A35; --footer-bg: #090D12; --card-shade: rgba(255, 255, 255, .015); --on-accent: #06131A; } } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.018em; color: var(--ink); margin: 0 0 0.6em; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.6rem); letter-spacing: -0.03em; } h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.4rem); letter-spacing: -0.024em; } h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); } h4 { font-size: 1rem; } p { margin: 0 0 1.1em; max-width: 68ch; } p:last-child { margin-bottom: 0; } a { color: var(--accent-2); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--accent); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; } /* --- Layout helpers ------------------------------------------------------- */ .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .section { padding-block: var(--section-y); } .section--tint { background: var(--tint); } .section--line { border-top: 1px solid var(--line); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--on-accent); padding: 0.75rem 1.25rem; z-index: 100; } .skip-link:focus { left: 0; color: var(--on-accent); } /* Small monospace label used to mark sections, the "network/security" cue */ .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 1rem; display: flex; align-items: center; gap: 0.7rem; } .eyebrow::before { content: ''; width: 1.75rem; height: 1px; background: currentColor; flex: none; opacity: 0.6; } .lead { font-size: clamp(1.06rem, 1rem + 0.4vw, 1.25rem); color: var(--ink-soft); line-height: 1.6; max-width: 60ch; } .section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); } .section-head p { color: var(--muted); } /* --- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; line-height: 1; padding: 0.95rem 1.5rem; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; text-decoration: none; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); } .btn--ghost { background: transparent; color: var(--accent); border-color: var(--line); } .btn--ghost:hover { border-color: var(--accent); background: var(--tint); color: var(--accent); } .btn--light { background: #fff; color: var(--on-panel); border-color: #fff; } .btn--light:hover { background: #E4EDF0; color: var(--on-panel); } .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); } .btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; } .btn svg { width: 1.05em; height: 1.05em; flex: none; } /* --- Header --------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 74px; } /* Wordmark */ .wordmark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); margin-right: auto; } .wordmark__mark { width: 30px; height: 30px; flex: none; } .wordmark__text { font-family: var(--font-display); font-size: 1.16rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; } .wordmark__text b { font-weight: 700; } .wordmark__text span { font-weight: 400; color: var(--accent-2); } /* Navigation */ .nav { display: flex; align-items: center; gap: 0.35rem; } .nav a { font-size: 0.94rem; color: var(--ink-soft); text-decoration: none; padding: 0.5rem 0.8rem; border-radius: var(--radius); } .nav a:hover { color: var(--accent); background: var(--tint); } .nav a[aria-current="page"] { color: var(--accent); font-weight: 500; } /* Language switch */ .langswitch { display: flex; align-items: center; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .langswitch a, .langswitch span { padding: 0.4rem 0.6rem; text-decoration: none; color: var(--muted); line-height: 1; } .langswitch a:hover { background: var(--tint); color: var(--accent); } .langswitch [aria-current="true"] { background: var(--accent); color: var(--on-accent); } .header-cta { display: inline-flex; } /* Switching theme should be instant. Without this, elements that carry a colour transition (buttons, cards, links) would drift across to the new palette over a fifth of a second while everything else changed at once, which reads as a glitch rather than as a transition. */ .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; } /* Theme toggle Hidden unless JavaScript is running, since it cannot work without it. The two icons are both in the markup and CSS decides which one shows, so the button never needs to rebuild its contents. */ .themetoggle { display: none; } .js .themetoggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-soft); cursor: pointer; transition: color .18s ease, border-color .18s ease, background-color .18s ease; } .js .themetoggle:hover { color: var(--accent); border-color: var(--accent); background: var(--tint); } .themetoggle svg { width: 17px; height: 17px; } /* Light theme: offer the moon. Dark theme: offer the sun. */ .themetoggle .icon-sun { display: none; } .themetoggle .icon-moon { display: block; } :root[data-theme="dark"] .themetoggle .icon-sun { display: block; } :root[data-theme="dark"] .themetoggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .themetoggle .icon-sun { display: block; } :root:not([data-theme]) .themetoggle .icon-moon { display: none; } } /* The wordmark tile is a fixed dark navy, which would sink into a dark page. The SVG is inline, so its presentation attributes can simply be restyled. */ :root[data-theme="dark"] .wordmark__mark rect { fill: var(--accent); } :root[data-theme="dark"] .wordmark__mark g[fill="#fff"] circle { fill: #06131A; } :root[data-theme="dark"] .wordmark__mark g[fill="#fff"] circle:last-child { fill: #0E1319; } :root[data-theme="dark"] .wordmark__mark g[stroke="#fff"] { stroke: #06131A; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .wordmark__mark rect { fill: var(--accent); } :root:not([data-theme]) .wordmark__mark g[fill="#fff"] circle { fill: #06131A; } :root:not([data-theme]) .wordmark__mark g[stroke="#fff"] { stroke: #06131A; } } /* The footer mark sits on the dark footer in both themes, so leave it alone. */ .site-footer .wordmark__mark rect { fill: var(--accent-2) !important; } .site-footer .wordmark__mark g[fill="#fff"] circle { fill: #fff !important; } .site-footer .wordmark__mark g[stroke="#fff"] { stroke: #fff !important; } /* Cards pick up a barely-there lift in dark mode so they separate from the page without needing a heavier border. */ .card { background-color: var(--paper); background-image: linear-gradient(var(--card-shade), var(--card-shade)); } /* Mobile menu button */ .navtoggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; color: var(--ink); } .navtoggle svg { width: 20px; height: 20px; } .navtoggle .icon-close { display: none; } .navtoggle[aria-expanded="true"] .icon-close { display: block; } .navtoggle[aria-expanded="true"] .icon-open { display: none; } @media (max-width: 900px) { .navtoggle { display: inline-flex; order: 3; } .langswitch { order: 2; } .js .themetoggle { order: 1; } .header-cta { display: none; } .nav { order: 4; display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0 1rem; border-top: 1px solid var(--line); } .nav.is-open { display: flex; } .nav a { padding: 0.85rem 0.5rem; border-bottom: 1px solid var(--line); border-radius: 0; } .nav a:last-child { border-bottom: 0; } .site-header__inner { flex-wrap: wrap; gap: 0.6rem; } } /* --- Hero ----------------------------------------------------------------- */ .hero { position: relative; background: var(--tint); border-bottom: 1px solid var(--line); padding-block: clamp(3.5rem, 8vw, 6.5rem); overflow: hidden; } /* Faint dot grid, a quiet nod to network topology */ .hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(var(--accent) 1px, transparent 1px); background-size: 26px 26px; opacity: 0.055; pointer-events: none; } .hero__inner { position: relative; z-index: 1; } .hero h1 { max-width: 17ch; } .hero .lead { margin-top: 1.4rem; } .hero .btn-row { margin-top: 2.2rem; } .hero__note { margin-top: 1.6rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; } /* Trust strip under the hero */ .trustbar { border-bottom: 1px solid var(--line); background: var(--paper); } .trustbar ul { list-style: none; margin: 0; padding: 1.1rem 0; display: flex; flex-wrap: wrap; gap: 0.6rem 2.2rem; } .trustbar li { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em; color: var(--muted); display: flex; align-items: center; gap: 0.55rem; } .trustbar li::before { content: ''; width: 5px; height: 5px; background: var(--accent-2); flex: none; transform: rotate(45deg); } /* --- Grids / cards -------------------------------------------------------- */ .grid { display: grid; gap: var(--gap); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 1.9rem); display: flex; flex-direction: column; transition: border-color .18s ease, transform .18s ease; } .card:hover { border-color: var(--accent-2); } .card h3 { margin-bottom: 0.5rem; } .card p { color: var(--muted); font-size: 0.96rem; } .card__icon { width: 38px; height: 38px; color: var(--accent); margin-bottom: 1.1rem; } .card__icon svg { width: 100%; height: 100%; } /* Numbered process steps */ .steps { counter-reset: step; } .step { position: relative; padding-top: 1.6rem; border-top: 2px solid var(--accent); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--accent-2); position: absolute; top: -1.65rem; left: 0; background: var(--paper); padding-right: 0.6rem; } .section--tint .step::before { background: var(--tint); } .step h3 { font-size: 1.08rem; margin-bottom: 0.4rem; } .step p { color: var(--muted); font-size: 0.95rem; margin: 0; } /* --- Service blocks ------------------------------------------------------- */ .service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.8rem, 5vw, 4rem); align-items: start; padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); } .service:first-of-type { border-top: 0; padding-top: 0; } @media (max-width: 860px) { .service { grid-template-columns: 1fr; } } .service__aside .eyebrow { margin-bottom: 0.8rem; } .service__aside h2 { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2rem); } .service__aside p { color: var(--muted); font-size: 0.97rem; } /* Checklist */ .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; } .ticks li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.75rem; align-items: start; font-size: 0.98rem; } .ticks li::before { content: ''; margin-top: 0.48em; width: 9px; height: 9px; border-right: 2px solid var(--accent-2); border-bottom: 2px solid var(--accent-2); transform: rotate(45deg); justify-self: center; } .ticks strong { font-weight: 600; } .ticks span { color: var(--muted); display: block; font-size: 0.92rem; line-height: 1.5; } /* Highlight panel (e.g. the MIFARE Classic point) */ .panel { background: var(--panel-bg); color: #fff; border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 2.8rem); } .panel h2, .panel h3 { color: #fff; } .panel p { color: rgba(255,255,255,.82); } .panel .eyebrow { color: rgba(255,255,255,.75); } /* White text is for inline prose links on the dark panel only. Buttons carry their own colours, and this rule used to outrank .btn--light and paint its label white on a white background (visible only on hover, where the more specific :hover rule took over). */ .panel a:not(.btn) { color: #fff; } .panel--split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } /* Mono spec list, used for technical details */ .spec { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em; list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.5rem; } .spec li { display: flex; gap: 0.7rem; align-items: flex-start; color: rgba(255,255,255,.72); border-top: 1px solid rgba(255,255,255,.16); padding-top: 0.5rem; } /* Chevron drawn with borders rather than a text glyph: there is no character to go missing in a font, and nothing for an editor to mangle. */ .spec li::before { content: ''; flex: none; margin-top: 0.34em; width: 5px; height: 5px; border-top: 1.5px solid rgba(255,255,255,.55); border-right: 1.5px solid rgba(255,255,255,.55); transform: rotate(45deg); } /* --- Payments strip ------------------------------------------------------- */ .payments { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 1.5rem 0 0; padding: 0; } .payments li { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.45rem 0.8rem; color: var(--ink-soft); background: var(--paper); } /* --- About page ----------------------------------------------------------- */ .about { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 4.5rem); align-items: start; } @media (max-width: 860px) { .about { grid-template-columns: 1fr; } } .factsheet { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; background: var(--tint); } .factsheet dl { margin: 0; display: grid; gap: 1.05rem; } .factsheet dt { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 0.25rem; } .factsheet dd { margin: 0; font-size: 0.95rem; color: var(--ink-soft); } /* --- Contact page --------------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } } .channels { display: grid; gap: 1rem; } .channel { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; align-items: start; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; text-decoration: none; color: var(--ink); background: var(--paper); transition: border-color .18s ease, background-color .18s ease; } .channel:hover { border-color: var(--accent-2); background: var(--tint); color: var(--ink); } .channel svg { width: 22px; height: 22px; color: var(--accent); margin-top: 0.15rem; } .channel__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.15rem; } .channel__value { font-weight: 500; font-size: 1rem; word-break: break-word; } .channel__hint { font-size: 0.87rem; color: var(--muted); display: block; margin-top: 0.2rem; } /* --- Animated network background ------------------------------------------ */ /* Canvas sits behind the hero copy. It is decorative only: the static dot grid below it keeps the section from looking bare if the canvas never paints. */ .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; } /* --- Reveal on scroll ------------------------------------------------------ */ /* Elements fade up as they enter the viewport. The hidden state is scoped to .js, a class config.js sets on before first paint, so a visitor whose JavaScript fails or is blocked simply sees the content: it is never possible for a .reveal element to stay invisible. */ .reveal { opacity: 1; transform: none; } .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: none; will-change: auto; } /* --- Accent rule that draws itself in ------------------------------------- */ .section-head .eyebrow::before { transition: width .5s ease .1s; } .js .reveal:not(.is-visible) .eyebrow::before { width: 0; } /* --- Live indicator -------------------------------------------------------- */ /* Small pulsing dot used next to the response-time note. */ .pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); margin-right: 0.55rem; position: relative; flex: none; } .pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--accent-2); animation: pulse-ring 2.4s ease-out infinite; } @keyframes pulse-ring { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(3.2); opacity: 0; } 100% { transform: scale(3.2); opacity: 0; } } /* --- Card hover lift ------------------------------------------------------- */ .card { position: relative; overflow: hidden; } .card::after { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.22,.61,.36,1); } .card:hover { transform: translateY(-3px); } .card:hover::after { transform: scaleX(1); } /* --- CTA band shimmer ------------------------------------------------------ */ .cta { position: relative; overflow: hidden; } .cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 120% at 15% 0%, rgba(23,112,138,.55), transparent 60%), radial-gradient(50% 120% at 90% 100%, rgba(127,211,232,.22), transparent 60%); animation: drift 18s ease-in-out infinite alternate; pointer-events: none; } .cta > * { position: relative; z-index: 1; } @keyframes drift { from { transform: translate3d(-2%, -2%, 0) scale(1.05); } to { transform: translate3d(3%, 2%, 0) scale(1.12); } } /* --- Legal pages ---------------------------------------------------------- */ .prose { max-width: 74ch; } .prose h2 { margin-top: 2.6rem; font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); } .prose h2:first-of-type { margin-top: 0; } .prose h3 { margin-top: 1.8rem; font-size: 1.05rem; } .prose p, .prose li { color: var(--ink-soft); } .prose ul { padding-left: 1.15rem; display: grid; gap: 0.45rem; margin: 0 0 1.1em; } .prose li { padding-left: 0.2rem; } .prose dl { display: grid; gap: 0.9rem; margin: 0 0 1.4em; } .prose dt { font-weight: 600; } .prose dd { margin: 0; color: var(--muted); } .legal-updated { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1.2rem; margin-top: 2.8rem; } /* --- CTA band ------------------------------------------------------------- */ .cta { background: var(--cta-bg); color: #fff; padding-block: clamp(3rem, 6vw, 4.5rem); } .cta h2 { color: #fff; max-width: 20ch; } .cta p { color: rgba(255,255,255,.8); } .cta .eyebrow { color: rgba(255,255,255,.7); } .cta__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .cta .btn-row { justify-content: flex-start; } @media (min-width: 860px) { .cta .btn-row { justify-content: flex-end; } } /* --- Footer --------------------------------------------------------------- */ .site-footer { background: var(--footer-bg); color: rgba(255,255,255,.66); padding-block: clamp(2.8rem, 6vw, 4rem) 2rem; font-size: 0.92rem; } .site-footer a { color: rgba(255,255,255,.78); text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(1.8rem, 4vw, 3rem); padding-bottom: 2.2rem; } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } .footer-grid h4 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.45); font-weight: 500; margin-bottom: 0.9rem; } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; } .site-footer .wordmark { color: #fff; margin-right: 0; } .site-footer .wordmark__text span { color: var(--accent-2); } .footer-about p { color: rgba(255,255,255,.6); font-size: 0.92rem; margin-top: 1rem; max-width: 34ch; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; justify-content: space-between; font-size: 0.82rem; color: rgba(255,255,255,.45); } .footer-bottom p { margin: 0; } /* --- Page header (inner pages) -------------------------------------------- */ .pagehead { position: relative; overflow: hidden; background: var(--tint); border-bottom: 1px solid var(--line); padding-block: clamp(2.8rem, 6vw, 4.5rem); } /* Keep the copy above the animated canvas. */ .pagehead > .wrap { position: relative; z-index: 1; } .pagehead h1 { max-width: 20ch; margin-bottom: 0.7rem; } .pagehead p { color: var(--muted); max-width: 58ch; font-size: 1.05rem; } /* --- 404 ------------------------------------------------------------------ */ .notfound { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); } .notfound p { margin-inline: auto; } .notfound .btn-row { justify-content: center; } .notfound__code { font-family: var(--font-mono); font-size: clamp(3rem, 12vw, 6rem); color: var(--accent); opacity: 0.18; line-height: 1; margin-bottom: 1rem; } /* --- Utilities ------------------------------------------------------------ */ .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; } .is-hidden { display: none !important; } .mt-2 { margin-top: 2rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } @media print { .site-header, .cta, .navtoggle, .langswitch { display: none; } body { color: #000; } }