/* ========================================================================== Systema HR — Components Everything here composes tokens.css. No raw colour/timing values. ========================================================================== */ /* -------------------------------------------------------------------------- Page loader Design rule for this component: it must never be able to trap the page. Four independent escape hatches, so no single failure can leave the overlay up — see the notes on each rule below. -------------------------------------------------------------------------- */ .loader { position: fixed; inset: 0; z-index: var(--z-loader); display: grid; place-items: center; /* Same base gradient as .ambient, so the fade reads as the overlay dissolving into the page rather than one surface swapping for another. */ background: radial-gradient(ellipse at top, #0a0a0f 0%, var(--bg-base) 50%, var(--bg-deep) 100%); transition: opacity 450ms var(--ease-expo), visibility 0s linear 450ms; /* Escape hatch 1 — CSS-only failsafe. If the script throws before it can add .is-done, this hides the overlay anyway. Duration 0s with a delay, and `forwards` rather than `both`, so it does nothing until it fires. */ animation: loader-failsafe 0s linear 6s forwards; } /* Escape hatch 2 — the script's own signal, the normal path. */ .loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } /* Escape hatch 3 — scripting disabled entirely. The inline script in strips .no-js before first paint, so this only ever matches when there is no JS to remove the overlay later. */ .no-js .loader { display: none; } @keyframes loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } .loader__inner { display: grid; justify-items: center; gap: 1.75rem; /* Held invisible for the first 150ms: on a warm cache the overlay is gone before this resolves, so a fast load shows a plain canvas rather than a logo flashing in and straight back out. */ animation: loader-in 400ms var(--ease-expo) 150ms both; } @keyframes loader-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .loader__mark { position: relative; display: grid; place-items: center; width: 64px; height: 64px; } .loader__ring { width: 64px; height: 64px; filter: invert(1); animation: ds-spin 3.2s linear infinite; } .loader__years { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--accent); } .loader__logo { height: 30px; width: auto; } /* Indeterminate, not a fake percentage — we genuinely don't know how far along the load is, and inventing a number is the tell of a cheap loader. */ .loader__bar { position: relative; width: 180px; height: 2px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08); overflow: hidden; } .loader__bar-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: translateX(-100%); animation: loader-sweep 1.15s var(--ease-out) infinite; } @keyframes loader-sweep { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { /* The global reduce rule collapses these animations to nothing, which would leave the track empty and the mark mid-rotation. Give both a resolved resting state instead. */ .loader__bar-fill { transform: none; background: var(--accent); opacity: 0.55; } .loader__ring { animation: none; } } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.25rem; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; overflow: hidden; isolation: isolate; transition: background-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-expo); } .btn:active { transform: scale(var(--press)); } /* Shine sweep — a single pass across the face on hover. */ .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%); transform: translateX(-110%); transition: transform var(--dur-base) var(--ease-expo); } .btn:hover::after { transform: translateX(110%); } .btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); } .btn--primary:hover { background: var(--accent-bright); box-shadow: var(--shadow-accent-hover); } .btn--secondary { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-inset-highlight), 0 0 0 1px var(--border); } .btn--secondary:hover { background: var(--surface-hover); box-shadow: var(--shadow-inset-highlight), 0 0 0 1px var(--border-hover), 0 0 30px rgba(var(--accent-rgb), 0.12); } .btn--ghost { color: var(--fg-muted); } .btn--ghost:hover { background: var(--surface); color: var(--fg); } .btn--ghost::after { display: none; } .btn--lg { padding: 0.95rem 1.75rem; font-size: var(--text-body); } .btn--block { display: flex; width: 100%; } .btn__icon { width: 16px; height: 16px; flex: none; transition: transform var(--dur-quick) var(--ease-expo); } .btn:hover .btn__icon--arrow { transform: translateX(3px); } /* -------------------------------------------------------------------------- Pills / badges -------------------------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; border-radius: var(--radius-full); border: 1px solid var(--border-accent); background: rgba(var(--accent-rgb), 0.08); color: var(--fg); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); } /* -------------------------------------------------------------------------- Site header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: var(--z-header); transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } /* Frosted glass on scroll: mostly transparent, held legible by a heavy blur rather than by opacity. The large blur radius is what stops a colourful photo passing underneath from smearing colour through the bar — at this radius the sample is diffuse enough to read as neutral tint. The inset highlight is the top-edge catch-light that sells it as glass. */ .site-header.is-stuck { background: rgba(5, 5, 6, 0.55); backdrop-filter: blur(28px) saturate(130%); -webkit-backdrop-filter: blur(28px) saturate(130%); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 1px 0 0 var(--border), 0 12px 40px rgba(0, 0, 0, 0.35); } /* Fallback for engines without backdrop-filter — opacity has to carry it. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header.is-stuck { background: rgba(5, 5, 6, 0.92); } } /* Utility strip: hours, toll-free line, socials. Visible at rest, collapsed away once the header goes glass — so the bar scrolls down to just the nav. Animating max-height rather than toggling display keeps it from snapping. */ .topbar { border-bottom: 1px solid var(--border); font-size: var(--text-label); color: var(--fg-muted); overflow: hidden; max-height: 3.5rem; transition: max-height var(--dur-base) var(--ease-expo), opacity var(--dur-quick) var(--ease-out); } .site-header.is-stuck .topbar { max-height: 0; opacity: 0; border-bottom-color: transparent; } /* Too cramped to be useful on phones; its contents are repeated in the mobile menu and the footer. */ @media (max-width: 991px) { .topbar { display: none; } } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 38px; padding-block: 0.4rem; } .topbar__group { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .topbar__item { display: inline-flex; align-items: center; gap: 0.45rem; } /* The phone numbers are dialable links, so they need a hover state. */ a.topbar__item { transition: color var(--dur-quick) var(--ease-out); } a.topbar__item:hover { color: var(--fg); } .topbar__item strong { color: var(--fg); font-weight: 600; } .topbar__socials { display: flex; align-items: center; gap: 0.25rem; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); color: var(--fg-muted); transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-expo); } .icon-btn:hover { background: var(--surface); color: var(--fg); transform: translateY(-2px); } .icon-btn svg { width: 15px; height: 15px; } /* Primary navigation bar */ .navbar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 0.75rem; flex: none; } .brand__mark { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; } /* The rotating "25 years" badge, preserved from the original header. */ .brand__ring { width: 46px; height: 46px; filter: invert(1); animation: ds-spin 20s linear infinite; } .brand__years { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; } @keyframes ds-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .brand__ring { animation: none; } } .brand__logo { height: 26px; width: auto; } .nav { display: flex; align-items: center; gap: 0.25rem; } .nav__item { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.8rem; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--fg-muted); transition: color var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out); } .nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--fg); background: var(--surface); } .nav__link.is-active { color: var(--fg); } /* Active-page marker — a small accent underline, not a colour-only cue. */ .nav__link.is-active::after { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.15rem; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } .nav__chevron { width: 12px; height: 12px; transition: transform var(--dur-quick) var(--ease-expo); } .nav__link[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); } /* Dropdown */ .nav__menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 290px; padding: 0.5rem; border-radius: var(--radius-xl); border: 1px solid var(--border-hover); background: rgba(10, 10, 12, 0.96); backdrop-filter: blur(24px) saturate(115%); -webkit-backdrop-filter: blur(24px) saturate(115%); box-shadow: var(--shadow-elevated); opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none; transition: opacity var(--dur-quick) var(--ease-expo), transform var(--dur-quick) var(--ease-expo), visibility 0s linear var(--dur-quick); } .nav__item.is-open .nav__menu { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; transition-delay: 0s; } .nav__menu-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.7rem; border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--fg-muted); transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); } .nav__menu-link:hover { background: var(--surface); color: var(--fg); } .nav__menu-index { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--accent); flex: none; } .header-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; } .nav-toggle { display: none; width: 40px; height: 40px; border-radius: var(--radius-md); align-items: center; justify-content: center; color: var(--fg); box-shadow: 0 0 0 1px var(--border); transition: background-color var(--dur-quick) var(--ease-out); } .nav-toggle:hover { background: var(--surface); } .nav-toggle svg { width: 18px; height: 18px; } .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; } /* Mobile menu */ .mobile-menu { position: fixed; inset: var(--header-h) 0 0; z-index: var(--z-menu); padding: 1.25rem var(--gutter) 2rem; overflow-y: auto; background: rgba(5, 5, 6, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid var(--border); opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none; transition: opacity var(--dur-quick) var(--ease-expo), transform var(--dur-quick) var(--ease-expo), visibility 0s linear var(--dur-quick); } .mobile-menu.is-open { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; transition-delay: 0s; } .mobile-menu__link { display: block; padding: 0.85rem 0; font-size: 1.0625rem; font-weight: 500; color: var(--fg); border-bottom: 1px solid var(--border); } .mobile-menu__group-label { display: block; padding: 1.25rem 0 0.5rem; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); } .mobile-menu__sublink { display: flex; gap: 0.75rem; padding: 0.7rem 0; font-size: var(--text-sm); color: var(--fg-muted); border-bottom: 1px solid var(--border); } .mobile-menu__cta { margin-top: 1.75rem; } .mobile-menu__meta { margin-top: 1.75rem; display: grid; gap: 0.5rem; font-size: var(--text-sm); color: var(--fg-muted); } @media (max-width: 991px) { .nav { display: none; } .nav-toggle { display: inline-flex; } .header-actions .btn--primary { display: none; } } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card { position: relative; display: flex; flex-direction: column; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface-gradient); box-shadow: var(--shadow-card); overflow: hidden; isolation: isolate; transition: transform var(--dur-base) var(--ease-expo), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } /* 1px inner light line along the top edge — the "lit from above" cue. */ .card::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.22), transparent); pointer-events: none; } .card--interactive:hover, .card--interactive:focus-within { transform: translateY(var(--lift)); border-color: var(--border-hover); background: var(--surface-gradient-hover); box-shadow: var(--shadow-card-hover); } /* Backdrop artwork for the tall lead card in a bento grid. Sits below the spotlight layer and fades out before it reaches the text. */ .card__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.18; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 88%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 88%); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-expo); } .card--interactive:hover .card__media { opacity: 0.26; transform: scale(1.03); } /* Mouse-tracking spotlight. JS writes --mx/--my as percentages. */ .card--spotlight .card__spot { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background: radial-gradient( 300px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), 0.15), transparent 70% ); transition: opacity var(--dur-base) var(--ease-out); } .card--spotlight:hover .card__spot, .card--spotlight:focus-within .card__spot { opacity: 1; } .card--glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .card--accent { border-color: var(--border-accent); background: linear-gradient(to bottom, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.02)), var(--surface-gradient); } .card__title { font-size: var(--text-h3); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); color: var(--fg); } .card__text { margin-top: 0.65rem; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--fg-muted); } .card__index { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.1em; color: var(--accent); } .card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: auto; } .card__foot { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.25rem; font-size: var(--text-sm); font-weight: 500; color: var(--fg-muted); transition: color var(--dur-quick) var(--ease-out); } .card__foot svg { width: 14px; height: 14px; transition: transform var(--dur-quick) var(--ease-expo); } .card--interactive:hover .card__foot { color: var(--accent-bright); } .card--interactive:hover .card__foot svg { transform: translateX(3px); } /* Whole-card link target: covers the card without wrapping its content. */ .card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* -------------------------------------------------------------------------- Icon tile The source PNGs are transparent line art in #245481 — too dark on #050506. The alpha channel is used as a mask so the artwork inherits the accent gradient instead of shipping recoloured assets. -------------------------------------------------------------------------- */ .icon-tile { position: relative; display: grid; place-items: center; width: 58px; height: 58px; flex: none; border-radius: var(--radius-lg); border: 1px solid var(--border-hover); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); box-shadow: var(--shadow-inset-highlight); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .icon-tile--lg { width: 72px; height: 72px; border-radius: var(--radius-xl); } .icon-tile__art { width: 60%; height: 60%; background: linear-gradient(155deg, #a9c6f8 0%, var(--accent-bright) 55%, var(--accent) 100%); -webkit-mask-image: var(--icon); mask-image: var(--icon); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Without mask support, brighten the original artwork instead. */ @supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) { .icon-tile__art { background: none; width: 60%; height: 60%; filter: brightness(2.1) saturate(1.15); } } .card--interactive:hover .icon-tile { border-color: var(--border-accent); box-shadow: var(--shadow-inset-highlight), 0 0 28px rgba(var(--accent-rgb), 0.22); } /* -------------------------------------------------------------------------- Bento grid — deliberately asymmetric -------------------------------------------------------------------------- */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(190px, auto); gap: 1rem; } .bento > * { grid-column: span 3; } /* Programs — 4 records: one hero card, two thirds, one full-width banner. */ .bento--programs > :nth-child(1) { grid-column: span 4; grid-row: span 2; } .bento--programs > :nth-child(2) { grid-column: span 2; } .bento--programs > :nth-child(3) { grid-column: span 2; } .bento--programs > :nth-child(n + 4) { grid-column: span 6; } /* Solutions — 5 records: tall lead card, stacked pair, bottom pair. */ .bento--solutions > :nth-child(1) { grid-column: span 3; grid-row: span 2; } .bento--solutions > :nth-child(2), .bento--solutions > :nth-child(3) { grid-column: span 3; } .bento--solutions > :nth-child(n + 4) { grid-column: span 3; } /* An odd trailing card stretches rather than leaving a hole. */ .bento--solutions > :nth-child(n + 4):last-child:nth-child(even) { grid-column: span 6; } .bento__hero-title { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.875rem); } @media (max-width: 1023px) { .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(170px, auto); } .bento > *, .bento--programs > :nth-child(n), .bento--solutions > :nth-child(n) { grid-column: span 2; grid-row: auto; } .bento--programs > :nth-child(1), .bento--solutions > :nth-child(1) { grid-column: span 4; } } @media (max-width: 639px) { .bento { grid-template-columns: 1fr; grid-auto-rows: auto; } .bento > *, .bento--programs > :nth-child(n), .bento--solutions > :nth-child(n) { grid-column: span 1; } } /* -------------------------------------------------------------------------- Section heading block -------------------------------------------------------------------------- */ .section-head { display: grid; gap: 1rem; max-width: 720px; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem); } .section-head--center { justify-items: center; text-align: center; margin-inline: auto; } .section-head--split { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; } @media (max-width: 767px) { .section-head--split { grid-template-columns: 1fr; align-items: start; } } /* Oversized watermark numeral, carried over from the original section marks. */ .watermark { position: absolute; top: clamp(0.5rem, 2vw, 2rem); right: var(--gutter); font-size: clamp(4rem, 3rem + 8vw, 11rem); font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05); pointer-events: none; user-select: none; z-index: -1; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100vh; min-height: min(100svh, 900px); overflow: hidden; isolation: isolate; } /* The stage carries the scroll parallax; slides stack inside it. Each slide owns its own background and scrim because the opacity transition makes every slide its own stacking context. */ .hero__stage { position: absolute; inset: 0; opacity: var(--hero-opacity, 1); transform: translateY(var(--hero-y, 0px)); will-change: transform, opacity; } .hero__slide { position: absolute; inset: 0; display: grid; align-items: center; opacity: 0; transition: opacity 900ms var(--ease-out); } .hero__slide.is-active { opacity: 1; } .hero__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7000ms linear; } .hero__slide.is-active .hero__bg { transform: scale(1); } /* Scrim: darkens the photography and blends it into the ambient canvas. */ .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(2, 2, 3, 0.78) 0%, rgba(2, 2, 3, 0.55) 40%, rgba(5, 5, 6, 0.94) 100%), radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), 0.18), transparent 60%); } .hero__body { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: 1.5rem; padding-block: clamp(6rem, 4rem + 10vw, 9rem); } .hero__eyebrow { max-width: 46ch; color: var(--fg-subtle); font-size: var(--text-lead); line-height: var(--leading-snug); } .hero__title { font-size: var(--text-display); font-weight: 600; letter-spacing: var(--tracking-display); line-height: var(--leading-none); } .hero__cta { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; /* The CTA and the media capsule are a matched pair, so both read their height, width and radius from these three values instead of each carrying its own. Change them here and the two stay in step. */ /* Floors raised so the pair stays substantial on phones, where the two stack and have the full column to themselves; the desktop ceiling is unchanged. Ratio is held at ~2.7:1 across the range so the capsule crops its footage the same way at every width. */ --cta-h: clamp(4.75rem, 3.9rem + 2.4vw, 5.5rem); --cta-w: clamp(13rem, 9.5rem + 9.7vw, 15rem); --cta-radius: var(--radius-full); } /* Matched to .hero__pill. min-width rather than a fixed width: the label is a programme title and some run long ("Corporate Transformation Projects (CTPs)"), and .btn clips its overflow — so the button sits exactly the capsule's size on short labels and grows rather than truncating on long ones. */ .hero__cta .btn { height: var(--cta-h); min-width: var(--cta-w); padding-block: 0; padding-inline: 2rem; border-radius: var(--cta-radius); } /* Frosted accent, to match the glass header and the media capsule beside it. 0.6 alpha is the floor, not a look: over the hero scrim it keeps white label text at roughly 5.7:1 even where the photography behind is at its lightest. Going more transparent starts failing contrast. */ .hero__cta .btn--primary { background: rgba(var(--accent-rgb), 0.6); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.55), 0 4px 16px rgba(var(--accent-rgb), 0.22), inset 0 1px 0 0 rgba(255, 255, 255, 0.22); } .hero__cta .btn--primary:hover { background: rgba(var(--accent-rgb), 0.78); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.7), 0 6px 22px rgba(var(--accent-rgb), 0.35), 0 0 40px rgba(var(--accent-rgb), 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.28); } /* Without backdrop-filter the translucency has nothing to blur against, so fall back to the solid accent rather than a washed-out label. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hero__cta .btn--primary { background: var(--accent); } } /* The rounded video/GIF capsule that sat beside the original slider CTA. */ .hero__pill { position: relative; display: inline-block; flex: none; width: var(--cta-w); height: var(--cta-h); border-radius: var(--cta-radius); overflow: hidden; pointer-events: none; border: 1px solid var(--border-hover); box-shadow: var(--shadow-card); } .hero__pill img, .hero__pill video { width: 100%; height: 100%; object-fit: cover; } /* Slide indicators */ .hero__dots { position: absolute; bottom: clamp(4.5rem, 8vh, 6rem); left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 3; } .hero__dot { width: 28px; height: 4px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.18); transition: background-color var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-expo); } .hero__dot:hover { background: rgba(255, 255, 255, 0.35); } .hero__dot.is-active { width: 44px; background: var(--accent); box-shadow: 0 0 16px var(--accent-glow); } .hero__scroll { position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); z-index: 3; } .hero__scroll svg { width: 14px; height: 14px; animation: ds-nudge 2.4s var(--ease-out) infinite; } @keyframes ds-nudge { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(4px); opacity: 1; } } /* On phones the pair stops being a pair. Side by side they had to match; once they stack, matching just makes the button as heavy as the media. So the button drops to its natural size and the capsule takes the column width — the footage is the thing worth showing at this size. */ @media (max-width: 639px) { .hero__cta { flex-direction: column; align-items: center; gap: 1.1rem; } .hero__cta .btn { height: 3.25rem; min-width: 0; padding-inline: 1.6rem; } .hero__pill { width: min(100%, 19rem); height: 8rem; } .hero__scroll { display: none; } } /* -------------------------------------------------------------------------- Page hero (interior page subheader) -------------------------------------------------------------------------- */ .page-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(5rem, 3rem + 9vw, 8.5rem); border-bottom: 1px solid var(--border); } .page-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .page-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(2, 2, 3, 0.7), rgba(5, 5, 6, 0.96)), radial-gradient(ellipse at 20% 0%, rgba(var(--accent-rgb), 0.22), transparent 55%); } .page-hero__inner { display: grid; gap: 1.25rem; max-width: 800px; } .crumb { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: var(--text-sm); color: var(--fg-muted); } .crumb a { transition: color var(--dur-quick) var(--ease-out); } .crumb a:hover { color: var(--fg); } .crumb__sep { color: rgba(255, 255, 255, 0.25); } .crumb [aria-current="page"] { color: var(--fg); } /* -------------------------------------------------------------------------- Media frame -------------------------------------------------------------------------- */ .frame { position: relative; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--bg-elevated); overflow: hidden; box-shadow: var(--shadow-card); } .frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08); border-radius: inherit; } .frame img, .frame video { width: 100%; height: 100%; object-fit: cover; } .frame--tall { aspect-ratio: 4 / 5; } .frame--wide { aspect-ratio: 16 / 9; } .frame--square { aspect-ratio: 1 / 1; } /* Two-column media + copy block */ .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 1.4rem + 3vw, 4.5rem); align-items: center; } .split--media-right .split__media { order: 2; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--media-right .split__media { order: 0; } } /* -------------------------------------------------------------------------- Knockout plate — footage playing through cut-out lettering 105.png is not a poster frame: it is an opaque #18191B plate with "Over than 500 Projects" punched out of it (alpha 0). Stacking it over the video is what makes the footage read through the type. The plate must stay on top, and its aspect ratio must be honoured exactly or the lettering crops. -------------------------------------------------------------------------- */ .knockout { position: relative; aspect-ratio: 1035 / 545; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: var(--shadow-card); isolation: isolate; background: #18191b; } .knockout__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } .knockout__plate { position: absolute; inset: 0; z-index: 1; display: block; pointer-events: none; } .knockout__plate img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Preferred rendering: rather than laying the grey plate over the video, use its alpha as an inverted mask so the footage is punched down to just the letterforms, and dress the panel as frosted glass like the scrolled header. The ambient grid and light pools then read through the surround instead of it being a flat grey slab. mask-composite: exclude subtracts the plate's opaque area from a solid fill, leaving exactly the cut-out type — the PNG's alpha is inverted relative to what we want, which is why a plain mask-image won't do. */ @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .knockout { background: rgba(5, 5, 6, 0.55); backdrop-filter: blur(28px) saturate(130%); -webkit-backdrop-filter: blur(28px) saturate(130%); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), var(--shadow-card); } /* Now redundant — the same asset is doing the work as a mask. */ .knockout__plate { display: none; } .knockout__video { -webkit-mask-image: linear-gradient(#000, #000), url("../105.png"); mask-image: linear-gradient(#000, #000), url("../105.png"); /* The plate layer is scaled to 102% and centred, not 100% from the top-left. Scaling the 1035px artwork down to a phone-width column makes its outermost pixels interpolate toward transparent, so at exactly 100% the solid layer was only partly cancelled along the perimeter and a hairline of video bled around the border. The 2% overshoot puts that faded edge outside the box. It is uniform, and the container's aspect ratio matches the artwork's, so the lettering scales without distorting. */ -webkit-mask-size: 100% 100%, 100% 100%; mask-size: 100% 100%, 100% 100%; -webkit-mask-position: center, center; mask-position: center, center; -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: xor; mask-composite: exclude; } } /* Overlapping image cluster used on the "Your Partner" block. All three source images are the same 16:9 shape, so the composition — not the crops — has to create the hierarchy. A 12-column grid places them on a descending diagonal: the lead frame is inset from the left, the second panel breaks out past it and rides up over its lower edge, and the third steps down and to the right, stopping short of the lead's right edge. Every edge is deliberately offset from every other one — no tangents. */ .cluster { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(0.65rem, 0.4rem + 0.8vw, 1rem); isolation: isolate; } /* Ambient pool behind the stack, so the group reads as one lit object. */ .cluster::before { content: ""; position: absolute; inset: 10% -8% -4% -8%; z-index: -1; background: radial-gradient(ellipse at 35% 65%, rgba(var(--accent-rgb), 0.2), transparent 68%); filter: blur(34px); pointer-events: none; } .cluster__main, .cluster__chip { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: var(--shadow-card); /* Slow vertical drift. Durations are mutually indivisible and the delays are negative, so the three panels start mid-cycle and never fall back into sync — the group breathes instead of bobbing in unison. */ animation: ds-drift var(--drift-time, 9s) ease-in-out infinite; animation-delay: var(--drift-delay, 0s); will-change: transform; } @keyframes ds-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--drift, -9px)); } } /* Lead frame — inset from the left to leave room for the break-out. Sits furthest back, so it drifts the least. */ .cluster__main { grid-area: 1 / 2 / 2 / 13; z-index: 1; --drift: -7px; --drift-time: 9.5s; } .cluster__chip { border-color: var(--border-hover); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); } /* Breaks out to the left and rides up over the lead's lower edge. Frontmost panel, so it travels furthest — near elements moving more than far ones is what sells the depth. */ .cluster__chip--left { grid-area: 2 / 1 / 3 / 7; margin-top: -17%; z-index: 3; --drift: -14px; --drift-time: 8s; --drift-delay: -2.6s; } /* Steps down and right, stopping one column short of the lead. Near enough in width to the left panel to read as its pair rather than a leftover. */ .cluster__chip--right { grid-area: 2 / 7 / 3 / 12; margin-top: -9%; z-index: 2; --drift: -11px; --drift-time: 10.5s; --drift-delay: -5s; } /* The diagonal stops working well before phone width: the overlaps become illegible once each panel is only a couple of hundred pixels wide, and the negative margins start colliding with the drift animation. Below 700px it resolves to a lead image with a level pair beneath it. */ @media (max-width: 700px) { .cluster { row-gap: 0.75rem; } .cluster__main { grid-area: 1 / 1 / 2 / 13; } .cluster__chip--left { grid-area: 2 / 1 / 3 / 7; margin-top: 0; } .cluster__chip--right { grid-area: 2 / 7 / 3 / 13; margin-top: 0; } /* Identical drift on the pair so they stay level with one another — out-of-phase motion reads as misalignment when they sit side by side. */ .cluster__chip--left, .cluster__chip--right { --drift: -8px; --drift-time: 9s; --drift-delay: 0s; } /* Pull the glow in; the wide negative inset overflowed the narrow column. */ .cluster::before { inset: 12% -4% -2% -4%; } } /* -------------------------------------------------------------------------- Record detail (a single Program / Solution) -------------------------------------------------------------------------- */ .detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 1.4rem + 3vw, 4rem); align-items: start; } .detail__aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 1rem; } @media (max-width: 900px) { .detail { grid-template-columns: 1fr; } .detail__aside { position: static; } } /* Sibling navigation */ .side-nav { display: grid; gap: 0.25rem; padding: 0.5rem; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface-gradient); box-shadow: var(--shadow-card); } .side-nav__heading { padding: 0.6rem 0.7rem 0.4rem; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); } .side-nav__link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.7rem; border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--fg-muted); transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); } .side-nav__link:hover { background: var(--surface); color: var(--fg); } /* Current record: accent bar + text weight, not colour alone. */ .side-nav__link[aria-current="page"] { background: rgba(var(--accent-rgb), 0.1); color: var(--fg); font-weight: 600; box-shadow: inset 2px 0 0 0 var(--accent); } .side-nav__index { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--accent); flex: none; } /* -------------------------------------------------------------------------- Marquee (partner logos) — pure CSS, seamless, pauses on hover/focus -------------------------------------------------------------------------- */ .marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; width: max-content; gap: clamp(2rem, 1rem + 3vw, 4rem); animation: ds-marquee var(--marquee-duration, 46s) linear infinite; } .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; } @keyframes ds-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee__item { display: grid; place-items: center; flex: none; width: clamp(110px, 12vw, 150px); } .marquee__item img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; opacity: 0.55; filter: grayscale(1); transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); } .marquee__item:hover img { opacity: 1; filter: grayscale(0); } @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .marquee__track { animation: none; } } /* -------------------------------------------------------------------------- Testimonials -------------------------------------------------------------------------- */ /* stretch, not start: the three testimonials are different lengths and ragged card bottoms read as broken rather than organic. */ .quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; } @media (max-width: 1023px) { .quotes { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; } } .quote { position: relative; padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface-gradient); box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-expo), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .quote:hover { transform: translateY(var(--lift)); border-color: var(--border-hover); box-shadow: var(--shadow-card-hover); } .quote__mark { width: 26px; height: 26px; color: var(--accent); opacity: 0.65; margin-bottom: 1rem; } .quote__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: var(--tracking-tight); color: var(--fg); } .quote__body { margin-top: 0.75rem; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--fg-muted); } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .field--full { grid-column: 1 / -1; } @media (max-width: 639px) { .form-grid { grid-template-columns: 1fr; } } .field { display: grid; gap: 0.45rem; } .field__label { font-size: var(--text-sm); font-weight: 500; color: var(--fg); } .field__req { color: var(--accent-bright); margin-left: 0.15rem; } .input, .textarea { width: 100%; padding: 0.75rem 0.9rem; border-radius: var(--radius-md); border: 1px solid var(--border-hover); background: var(--bg-input); color: var(--fg); font-size: var(--text-sm); line-height: 1.5; transition: border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out); } .input::placeholder, .textarea::placeholder { color: rgba(255, 255, 255, 0.32); } .input:hover, .textarea:hover { border-color: rgba(255, 255, 255, 0.16); } .input:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22); background: #111116; } .textarea { min-height: 168px; resize: vertical; } .field__error { font-size: var(--text-label); color: #ff8697; display: none; } .field.has-error .field__error { display: block; } .field.has-error .input, .field.has-error .textarea { border-color: rgba(255, 134, 151, 0.55); } .form-note { font-size: var(--text-label); color: var(--fg-muted); } /* Arithmetic challenge. Presented as a normal field so it reads as part of the form rather than a bolted-on widget. */ .quiz { display: flex; align-items: stretch; gap: 0.75rem; flex-wrap: wrap; } .quiz__question { display: flex; align-items: center; flex: 1 1 15rem; min-width: 0; padding: 0.75rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: rgba(var(--accent-rgb), 0.07); color: var(--fg); font-size: var(--text-sm); font-weight: 500; user-select: none; } .quiz__answer { flex: 0 1 9rem; text-align: center; font-variant-numeric: tabular-nums; } @media (max-width: 420px) { .quiz__answer { flex-basis: 100%; } } /* -------------------------------------------------------------------------- Contact detail list -------------------------------------------------------------------------- */ .contact-list { display: grid; gap: 0.25rem; } .contact-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); color: var(--fg-muted); transition: color var(--dur-quick) var(--ease-out); } .contact-item:last-child { border-bottom: 0; } .contact-item:hover { color: var(--fg); } .contact-item__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--radius-md); border: 1px solid var(--border-hover); background: var(--surface); color: var(--accent-bright); } .contact-item__icon svg { width: 15px; height: 15px; } /* -------------------------------------------------------------------------- Map -------------------------------------------------------------------------- */ .map-shell { position: relative; border-radius: var(--radius-xl); border: 1px solid var(--border); background: linear-gradient(to bottom, rgba(var(--accent-rgb), 0.06), transparent); box-shadow: var(--shadow-card); overflow: hidden; padding: 0.5rem; } .map-shell__canvas { width: 100%; height: clamp(280px, 38vw, 440px); border-radius: var(--radius-lg); overflow: hidden; } /* Offices beside the map: the cards carry the information, the map illustrates it. A bare map with two unlabelled dots and a colour legend made the reader do the work. */ .locations { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem); align-items: stretch; } @media (max-width: 900px) { .locations { grid-template-columns: 1fr; } /* Once the map has the full column width it needs more height to breathe, otherwise the region-fitted view sits in a letterbox. */ .map-shell__canvas { height: clamp(300px, 62vw, 400px); } } .locations__list { display: grid; gap: 1rem; align-content: stretch; } .office { justify-content: center; } .office__country { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); } .office__country svg { width: 14px; height: 14px; flex: none; color: var(--accent); } .office__city { margin-top: 0.5rem; font-size: var(--text-h3); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); color: var(--fg); } .office__tel { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; font-size: var(--text-sm); color: var(--fg-muted); transition: color var(--dur-quick) var(--ease-out); } .office__tel svg { width: 14px; height: 14px; flex: none; } .office__tel:hover { color: var(--accent-bright); } /* jVectorMap tooltip restyle */ .jvectormap-tip { background: rgba(10, 10, 12, 0.95) !important; border: 1px solid var(--border-hover) !important; border-radius: var(--radius-md) !important; color: var(--fg) !important; font-family: var(--font-sans) !important; font-size: var(--text-label) !important; padding: 0.35rem 0.6rem !important; box-shadow: var(--shadow-elevated) !important; } /* Belt and braces alongside zoomButtons:false — the default controls are plain grey squares and this map is a display graphic, not a tool. */ .jvectormap-zoomin, .jvectormap-zoomout { display: none !important; } /* City labels drawn onto the map by jVectorMap. */ .map-shell text.jvectormap-marker { pointer-events: none; paint-order: stroke; stroke: rgba(2, 2, 3, 0.65); stroke-width: 3px; stroke-linejoin: round; } /* -------------------------------------------------------------------------- CTA banner -------------------------------------------------------------------------- */ .cta-banner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); border-radius: var(--radius-2xl); border: 1px solid var(--border-accent); background: radial-gradient(ellipse at 15% 0%, rgba(var(--accent-rgb), 0.22), transparent 60%), var(--surface-gradient); box-shadow: var(--shadow-card); overflow: hidden; isolation: isolate; } .cta-banner::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(to right, transparent, rgba(var(--accent-rgb), 0.5), transparent); } @media (max-width: 767px) { .cta-banner { grid-template-columns: 1fr; text-align: left; } } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { position: relative; border-top: 1px solid var(--border); background: linear-gradient(to bottom, transparent, var(--bg-deep)); padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } } /* Single column on phones, centred. A left-aligned stack of four short columns reads as ragged once they're on top of one another. */ @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; } .footer-grid .brand { justify-content: center; } .footer-grid p { margin-inline: auto; } .footer-grid .topbar__socials { justify-content: center; } /* The nudge-right hover is a left-alignment cue; it fights centred text. */ .footer-link:hover { transform: none; } .footer-bottom { justify-content: center; text-align: center; } .footer-bottom span{ margin: auto; } } .footer-heading { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); margin-bottom: 1rem; } .footer-link { display: block; padding: 0.3rem 0; font-size: var(--text-sm); color: var(--fg-muted); transition: color var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-expo); } .footer-link:hover { color: var(--fg); transform: translateX(3px); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--fg-muted); } .footer-bottom a { color: var(--accent-bright); transition: color var(--dur-quick) var(--ease-out); } .footer-bottom a:hover { color: var(--fg); } /* Back to top */ .to-top { position: fixed; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); z-index: var(--z-header); display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-md); border: 1px solid var(--border-hover); background: rgba(10, 10, 12, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--fg); box-shadow: var(--shadow-card); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-expo), background-color var(--dur-quick) var(--ease-out); } .to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .to-top:hover { background: rgba(20, 20, 24, 0.9); } .to-top svg { width: 16px; height: 16px; } /* -------------------------------------------------------------------------- Toasts — replaces the toastr plugin -------------------------------------------------------------------------- */ .toast-host { position: fixed; right: clamp(1rem, 2vw, 1.5rem); bottom: clamp(1rem, 2vw, 1.5rem); z-index: var(--z-toast); display: grid; gap: 0.5rem; justify-items: end; max-width: min(360px, calc(100vw - 2rem)); pointer-events: none; } .toast { padding: 0.85rem 1.1rem; border-radius: var(--radius-lg); border: 1px solid var(--border-hover); background: rgba(10, 10, 12, 0.95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--fg); font-size: var(--text-sm); line-height: 1.5; box-shadow: var(--shadow-elevated); opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-expo), transform var(--dur-base) var(--ease-expo); } .toast.is-in { opacity: 1; transform: translateY(0); } .toast--success { box-shadow: var(--shadow-elevated), inset 3px 0 0 0 var(--accent); } .toast--error { box-shadow: var(--shadow-elevated), inset 3px 0 0 0 #ff8697; }