/* ============================================================ SistemasFA — landing Editorial / technology direction: color as environment, structural gradients, extreme scale contrast, asymmetric grids. ============================================================ */ /* ---------- 1. Tokens ---------- */ :root { /* Brand */ --ink: #05081f; --navy: #101641; --blue-deep: #0b1cab; --blue: #1b4dff; --sky: #3fa9ff; --cyan: #2bdbdc; /* Neutrals */ --white: #ffffff; --soft: #f3f5fa; --soft-blue: #e9eefc; --line: #e2e6f0; --line-blue: #d3ddf7; --mid: #c9cfde; --slate: #59627d; /* Text on dark grounds */ --on-dark: rgba(255, 255, 255, 0.94); --on-dark-muted: rgba(255, 255, 255, 0.78); --on-dark-faint: rgba(255, 255, 255, 0.58); --hairline-dark: rgba(255, 255, 255, 0.14); /* Structure */ --nav-h: 76px; --container: 1280px; --gutter: clamp(20px, 5vw, 96px); --section: clamp(88px, 11vw, 176px); --radius: 14px; /* Type */ --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: 18px; line-height: 1.6; color: var(--navy); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ---------- 2b. Reveal ---------- */ /* The hidden state is gated on .js, which an inline script in sets. Putting opacity:0 in the plain stylesheet would leave the whole page blank for anyone whose script never runs. */ :root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } .js .reveal { opacity: 0; transform: translateY(14px); will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.55s var(--ease-out) var(--d, 0ms), transform 0.55s var(--ease-out) var(--d, 0ms); } /* Elements already revealed stop advertising themselves to the compositor. */ .js .reveal.is-done { will-change: auto; } /* ---------- 3. Layout primitives ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); } /* Grid items default to min-width:auto, so one unwrappable child (an uppercase tracked label, a long word) can push a whole column past the viewport. Every grid on this page opts out of that. */ .hero__inner > *, .split > *, .services__head > *, .cases__head > *, .case__grid > *, .case__beats > *, .process__grid > *, .stack__grid > *, .layer > *, .contact__grid > *, .proof__grid > *, .footer__inner > * { min-width: 0; } h1, h2, h3 { overflow-wrap: break-word; } .section--soft { background: var(--soft); } /* Services sit on a blue field rather than neutral grey — the section was the one stretch of the page with no colour in it at all. */ .section--tint { background: var(--soft-blue); } .section--tint .tag { border-color: var(--line-blue); } /* The two asymmetric grids used across the page: 7/5 and 5/7. */ .split { display: grid; gap: clamp(40px, 6vw, 96px); align-items: start; } @media (min-width: 900px) { .split { grid-template-columns: 7fr 5fr; } .split--reverse { grid-template-columns: 5fr 7fr; } } /* ---------- 4. Type scale ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); } .eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.55; } /* Every dark-ground section carries .on-dark, so text colours flip in one place. Listing sections one by one is how the Casos block ended up with slate body copy and a blue eyebrow on navy — unreadable, and invisible until someone looked at that section specifically. */ .on-dark .eyebrow { color: var(--cyan); } .display { font-size: clamp(2.9rem, 6vw, 5.5rem); font-weight: 600; line-height: 0.96; letter-spacing: -0.045em; text-wrap: balance; } .headline { font-size: clamp(2.1rem, 4.4vw, 3.9rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.038em; text-wrap: balance; } .lead { font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.55; color: var(--slate); } .on-dark .lead { color: var(--on-dark-muted); } /* ---------- 5. Buttons ---------- */ /* Rule: cyan on dark grounds, blue on light grounds. Never the reverse — cyan on white does not reach an accessible contrast ratio. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding-inline: 30px; border: 0; border-radius: 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .btn:hover { transform: translateY(-2px); } .btn--cyan { background: var(--cyan); color: var(--ink); box-shadow: 0 10px 30px -12px rgba(43, 219, 220, 0.7); } .btn--cyan:hover { background: #43e6e7; } .btn--blue { background: var(--blue); color: var(--white); box-shadow: 0 10px 30px -12px rgba(27, 77, 255, 0.75); } .btn--blue:hover { background: #2f5cff; } .btn--block { width: 100%; } /* Submitting state. Without it the form posts silently and the page sits there looking untouched, which is exactly what makes someone click again. */ .btn:disabled { cursor: default; opacity: 0.9; } .btn:disabled:hover { transform: none; } .btn__spinner { display: none; flex: none; width: 17px; height: 17px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #ffffff; border-radius: 50%; animation: btn-spin 0.7s linear infinite; } .btn.is-sending .btn__spinner { display: block; } @keyframes btn-spin { to { transform: rotate(360deg); } } /* The global reduced-motion rule flattens every animation, which would leave the spinner frozen mid-turn. The label alone carries the state there. */ @media (prefers-reduced-motion: reduce) { .btn.is-sending .btn__spinner { display: none; } } .textlink { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; color: inherit; transition: gap 0.18s ease; } .textlink:hover { gap: 15px; } .textlink svg { flex: none; } /* ---------- 6. Navigation ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h); display: flex; align-items: center; transition: background-color 0.28s ease, box-shadow 0.28s ease, height 0.28s ease; } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav__brand { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--white); } .nav__logo { width: 30px; height: auto; } .nav__menu { display: flex; align-items: center; gap: 34px; } .nav__link { font-size: 15px; font-weight: 500; color: var(--on-dark-muted); transition: color 0.18s ease; } .nav__link:hover { color: var(--white); } .nav__cta { display: inline-flex; align-items: center; height: 42px; padding-inline: 20px; border-radius: 7px; background: var(--cyan); color: var(--ink); font-size: 15px; font-weight: 600; transition: background-color 0.18s ease; } .nav__cta:hover { background: #43e6e7; } /* Solid state, toggled from JS once the hero is scrolled past. It carries the same left-to-right gradient the bar shows while it sits over the hero, so scrolling changes the opacity of the bar, not its identity. */ .nav.is-stuck { height: 66px; background: linear-gradient( 90deg, rgba(7, 11, 38, 0.94) 0%, rgba(16, 22, 65, 0.92) 38%, rgba(21, 46, 168, 0.9) 74%, rgba(32, 78, 226, 0.88) 100% ); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 40px -28px rgba(5, 8, 31, 0.9); } .nav__toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--hairline-dark); border-radius: 8px; background: transparent; cursor: pointer; } .nav__toggle-bar, .nav__toggle-bar::before, .nav__toggle-bar::after { display: block; width: 18px; height: 1.5px; margin-inline: auto; background: var(--white); transition: transform 0.2s ease; } .nav__toggle-bar::before, .nav__toggle-bar::after { content: ''; position: relative; } .nav__toggle-bar::before { top: -6px; } .nav__toggle-bar::after { top: 4.5px; } @media (max-width: 899px) { .nav__toggle { display: block; } .nav__menu { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) 28px; background: linear-gradient(160deg, rgba(7, 11, 38, 0.98) 0%, rgba(21, 46, 168, 0.97) 100%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(255, 255, 255, 0.12); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .nav__menu.is-open { transform: none; opacity: 1; visibility: visible; } .nav__link { padding-block: 15px; border-bottom: 1px solid var(--hairline-dark); font-size: 17px; } .nav__cta { height: 50px; margin-top: 20px; justify-content: center; } } /* ---------- 7. Hero ---------- */ /* Color as environment: the blue is the stage, not an accent applied on top of a white page. The gradient spans the whole section, no local glows. */ .hero { position: relative; isolation: isolate; padding-top: calc(var(--nav-h) + clamp(64px, 9vw, 132px)); padding-bottom: clamp(72px, 9vw, 140px); color: var(--on-dark); background: linear-gradient(180deg, rgba(5, 8, 31, 0) 58%, #05081f 100%), radial-gradient(104% 78% at 86% -8%, #1b4dff 0%, rgba(27, 77, 255, 0) 56%), radial-gradient(72% 58% at 0% 84%, rgba(11, 28, 171, 0.85) 0%, rgba(11, 28, 171, 0) 64%), linear-gradient(163deg, #05081f 0%, #101641 46%, #0a1140 100%); overflow: hidden; } /* A single very slow drift keeps the blue field alive without anything on the page appearing to move. Transform only, so it stays on the compositor. */ .hero::after { content: ''; position: absolute; inset: -20%; z-index: -2; background: radial-gradient(38% 42% at 72% 22%, rgba(63, 169, 255, 0.5) 0%, rgba(63, 169, 255, 0) 70%); animation: hero-drift 30s ease-in-out infinite alternate; pointer-events: none; } @keyframes hero-drift { from { transform: translate3d(-3%, 2%, 0) scale(1); } to { transform: translate3d(4%, -3%, 0) scale(1.12); } } /* Hairline grid — engineering texture instead of a decorative blur. */ .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 120px), repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 120px); mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%); -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%); pointer-events: none; } .hero__inner { display: grid; gap: clamp(52px, 6vw, 88px); align-items: center; } @media (min-width: 1000px) { .hero__inner { grid-template-columns: 7fr 5fr; } } .hero__title { margin-top: 26px; } .hero .lead { margin-top: 28px; max-width: 40ch; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: 42px; } /* --- Hero diagram --- */ /* The portfolio cannot be shown, so the hero visual carries the architecture instead of a product screenshot. */ .diagram { position: relative; padding: clamp(18px, 4vw, 30px); border: 1px solid var(--hairline-dark); border-radius: 18px; background: rgba(255, 255, 255, 0.035); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .diagram__label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-bottom: 22px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-faint); } /* The subtitle is the piece that cannot wrap; it goes before it can break the row. */ @media (max-width: 520px) { .diagram__label span + span { display: none; } } .diagram__svg { width: 100%; height: auto; } /* ---------- 8. Proof strip ---------- */ .proof { background: var(--ink); border-top: 1px solid var(--hairline-dark); color: var(--on-dark); } .proof__grid { display: grid; gap: 1px; background: var(--hairline-dark); } @media (min-width: 640px) { .proof__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .proof__grid { grid-template-columns: repeat(4, 1fr); } } .proof__cell { padding: clamp(30px, 4vw, 46px) clamp(20px, 2.6vw, 36px); background: var(--ink); } .proof__value { font-size: clamp(1.5rem, 2.2vw, 2.05rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; } .proof__note { margin-top: 10px; font-size: 15px; color: var(--on-dark-muted); } /* ---------- 9. Statement (the problem) ---------- */ .statement__body { display: grid; gap: 22px; padding-top: 12px; } .statement__body p { color: var(--slate); } .statement__body strong { display: block; padding-top: 4px; color: var(--navy); font-weight: 600; } /* The headline alone left the bottom of its column empty. The symptom list carries real content into that space instead of padding it out. */ .symptoms { margin-top: clamp(34px, 4vw, 52px); padding-top: 26px; border-top: 1px solid var(--line); } .symptoms__label { margin-bottom: 20px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue); } /* ---------- 10. Services ---------- */ /* Editorial rows, not a grid of cards: the section still reads if every border and shadow is deleted. */ .services__head { display: grid; gap: 24px; margin-bottom: clamp(52px, 6vw, 84px); } @media (min-width: 900px) { .services__head { grid-template-columns: 7fr 5fr; align-items: end; } } .service { position: relative; display: grid; gap: 14px 40px; padding-block: clamp(34px, 3.6vw, 52px); border-top: 1px solid var(--line-blue); transition: background-color 0.22s ease; } .service:last-child { border-bottom: 1px solid var(--line-blue); } @media (min-width: 900px) { .service { grid-template-columns: 88px 6fr 5fr; gap: 14px 56px; align-items: start; padding-inline: 20px; margin-inline: -20px; border-radius: 10px; } .service:hover { background: rgba(27, 77, 255, 0.05); } /* The rule turns the deliberate whitespace into a column instead of a void. */ .service__specs { padding-left: 34px; border-left: 1px solid var(--line-blue); } } .service__index { font-size: clamp(1.9rem, 2.6vw, 2.6rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: rgba(27, 77, 255, 0.34); } .service__title { font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; } .service__text { margin-top: 14px; font-size: 17px; color: var(--slate); } /* Deliverables read as a spec sheet, not as another row of chips. The same marker is reused for the symptom list in the problem section. */ .rule-list, .service__specs { display: grid; gap: 11px; align-content: start; padding-top: 4px; } .rule-list li, .service__specs li { display: grid; grid-template-columns: 18px 1fr; align-items: baseline; gap: 12px; font-size: 15.5px; color: var(--slate); } .rule-list li::before, .service__specs li::before { content: ''; height: 1.5px; background: var(--blue); opacity: 0.75; transform: translateY(-4px); } .tag { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 13.5px; font-weight: 500; color: var(--slate); white-space: nowrap; } .section--soft .tag { background: var(--white); } /* ---------- 11. Cases ---------- */ /* Saturated field. This is the section that replaces a screenshot gallery, so the whole weight of the page leans on it. */ .cases { color: var(--on-dark); background: radial-gradient(86% 52% at 100% 52%, rgba(27, 77, 255, 0.9) 0%, rgba(27, 77, 255, 0) 62%), radial-gradient(78% 48% at 0% 8%, rgba(11, 28, 171, 0.8) 0%, rgba(11, 28, 171, 0) 64%), linear-gradient(178deg, #070b28 0%, #0d1338 50%, #070b28 100%); } .cases__head { display: grid; gap: 26px; margin-bottom: clamp(56px, 6vw, 88px); } @media (min-width: 900px) { .cases__head { grid-template-columns: 7fr 5fr; align-items: end; } } .case { padding-block: clamp(36px, 4vw, 54px); border-top: 1px solid var(--hairline-dark); } .case:last-child { border-bottom: 1px solid var(--hairline-dark); } .case__grid { display: grid; gap: 26px 40px; } @media (min-width: 900px) { .case__grid { grid-template-columns: 4fr 8fr; align-items: start; } } .case__sector { font-size: clamp(1.25rem, 1.7vw, 1.55rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.03em; } .case__index { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--cyan); } .case__beats { display: grid; gap: 24px 34px; } @media (min-width: 700px) { .case__beats { grid-template-columns: repeat(3, 1fr); } } .beat__label { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline-dark); font-size: 11.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-dark-faint); } .beat--after .beat__label { color: var(--cyan); } .beat__text { font-size: 16px; line-height: 1.55; color: var(--on-dark-muted); } .beat--after .beat__text { color: var(--on-dark); } /* ---------- 12. Process ---------- */ /* Five stages read as a rail: one hairline across the section, a node per step. */ .process__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 36px 30px; margin-top: clamp(52px, 6vw, 80px); } .step { position: relative; padding-top: 26px; } /* The rule is a pseudo-element rather than a border so it can draw itself. */ .step::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: left; } .step::before { content: ''; position: absolute; top: -4.5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); } .step__index { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--blue); } .step__title { margin-top: 12px; font-size: 1.18rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; } .step__text { margin-top: 11px; font-size: 15.5px; line-height: 1.5; color: var(--slate); } /* ---------- 13. Stack ---------- */ .stack__grid { display: grid; gap: clamp(36px, 5vw, 72px); } @media (min-width: 900px) { .stack__grid { grid-template-columns: 5fr 7fr; align-items: start; } } /* Grouped by the same four layers as the hero diagram, so the stack answers "where does each piece sit" instead of being a flat cloud of logos. */ .layer { display: grid; gap: 16px 40px; padding-block: 26px; border-top: 1px solid var(--line); } .layer:last-child { border-bottom: 1px solid var(--line); } @media (min-width: 620px) { .layer { grid-template-columns: 200px 1fr; align-items: start; } } .layer__index { font-size: 11.5px; font-weight: 600; letter-spacing: 0.15em; color: var(--blue); } .layer__name { margin-top: 7px; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.025em; } .layer__role { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--slate); } .layer__tags { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; } .stack__note { margin-top: 34px; padding-left: 22px; border-left: 2px solid var(--blue); font-size: 17px; line-height: 1.55; color: var(--navy); } /* ---------- 14. Contact ---------- */ .contact { color: var(--on-dark); background: radial-gradient(102% 80% at 12% 0%, #1b4dff 0%, rgba(27, 77, 255, 0) 58%), radial-gradient(92% 76% at 96% 100%, #3fa9ff 0%, rgba(63, 169, 255, 0) 62%), linear-gradient(146deg, #0b1cab 0%, #101641 54%, #05081f 100%); } .contact__grid { display: grid; gap: clamp(48px, 6vw, 88px); align-items: start; } @media (min-width: 980px) { .contact__grid { grid-template-columns: 6fr 5fr; } } .contact__title { margin-top: 26px; } .contact .lead { margin-top: 26px; max-width: 44ch; } .contact__meta { display: grid; gap: 16px; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--hairline-dark); } .contact__meta-item { display: grid; gap: 4px; font-size: 16px; } .contact__meta-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-dark-faint); } .contact__meta-value { color: var(--on-dark); } .contact__filter { margin-top: 30px; font-size: 15px; line-height: 1.5; color: var(--on-dark-faint); } /* --- Form panel --- */ .form { padding: clamp(28px, 3.4vw, 42px); border-radius: 20px; background: var(--white); color: var(--navy); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7); } .form__title { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.03em; } .form__hint { margin-top: 8px; font-size: 15px; color: var(--slate); } /* Moved off screen instead of hidden: a bot that parses CSS ignores fields it can tell are invisible, and this one is meant to be filled. */ .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__fields { display: grid; gap: 20px; margin-top: 30px; } .field { display: grid; gap: 8px; } .field__label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--slate); } .field__input, .field__textarea { width: 100%; padding: 15px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); font-family: inherit; font-size: 16px; color: var(--navy); transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .field__textarea { min-height: 132px; resize: vertical; } .field__input::placeholder, .field__textarea::placeholder { color: #9aa3ba; } .field__input:focus, .field__textarea:focus { outline: none; background: var(--white); border-color: var(--blue); box-shadow: 0 0 0 4px rgba(27, 77, 255, 0.14); } .form__submit { margin-top: 28px; } .form__legal { margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--slate); text-align: center; } /* ---------- 15. Flash messages ---------- */ /* The controller flashes 'msj' / 'err' into the session and redirects. Without this the visitor submits the form and sees nothing at all. */ .flash { position: fixed; z-index: 90; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; width: calc(100% - 2 * var(--gutter)); max-width: 480px; padding: 16px 18px; border-radius: 12px; font-size: 15.5px; line-height: 1.45; box-shadow: 0 24px 60px -24px rgba(5, 8, 31, 0.6); } .flash--ok { background: var(--ink); color: var(--on-dark); border: 1px solid var(--hairline-dark); } .flash--err { background: #b3261e; color: var(--white); } .flash__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); } .flash--err .flash__dot { background: var(--white); } .flash__close { flex: none; margin-left: auto; padding: 4px; border: 0; background: transparent; opacity: 0.6; cursor: pointer; } .flash__close:hover { opacity: 1; } /* ---------- 16. Footer ---------- */ /* The sticky header travels with the reader, so repeating the navigation down here would only add weight. Identity, one address, socials, copyright. */ .footer { padding-block: clamp(22px, 2.4vw, 30px); background: var(--ink); color: var(--on-dark); } .footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; } .footer__social { display: flex; gap: 10px; } .footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--hairline-dark); border-radius: 10px; color: var(--on-dark-muted); transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .footer__social a:hover { background: var(--cyan); border-color: var(--cyan); color: var(--ink); } /* ---------- 17. Motion ---------- */ /* Rules held across the whole page: 14px of travel, 400-600ms, ease-out, a 70ms stagger capped at five items, and every reveal runs once. Only opacity and transform are animated, so nothing touches layout. */ .js .reveal.step::after { transform: scaleX(0); } .js .reveal.step.is-visible::after { transform: scaleX(1); transition: transform 0.8s var(--ease-out) var(--d, 0ms); } /* --- Hero diagram --- */ /* The connectors draw and the rows arrive in the order the data actually travels: the operation, the system, the integrations, the servers. It is the one animation on the page that carries an argument. */ .js .diagram__wire { stroke-dasharray: 500; stroke-dashoffset: 500; } .js .diagram.is-visible .diagram__wire { animation: wire-draw 1.1s var(--ease-out) var(--d, 0ms) forwards; } @keyframes wire-draw { to { stroke-dashoffset: 0; } } .js .diagram__node { opacity: 0; transform: translateY(7px); } .js .diagram.is-visible .diagram__node { animation: node-in 0.5s var(--ease-out) var(--d, 0ms) forwards; } @keyframes node-in { to { opacity: 1; transform: none; } } .js .diagram__dot { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.2); } .js .diagram.is-visible .diagram__dot { animation: dot-in 0.45s var(--ease-out) var(--d, 0ms) forwards; } @keyframes dot-in { 60% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } } /* A visitor who asked the system to calm down gets no motion and no delay. */ @media (prefers-reduced-motion: reduce) { .js .reveal, .js .diagram__node, .js .diagram__dot { opacity: 1; transform: none; } .js .diagram__wire { stroke-dashoffset: 0; } .js .reveal.step::after { transform: scaleX(1); } .hero::after { animation: none; } } /* ---------- 18. Skip link and back to top ---------- */ .skip { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 18px; border-radius: 8px; background: var(--cyan); color: var(--ink); font-size: 15px; font-weight: 600; transform: translateY(-160%); transition: transform 0.2s var(--ease-out); } .skip:focus { transform: none; } /* Section headings receive focus after a jump so the reader lands with the page. That focus should move the caret, not draw a ring around a heading. */ [tabindex="-1"]:focus { outline: none; } .to-top { position: fixed; right: clamp(16px, 3vw, 34px); bottom: clamp(16px, 3vw, 34px); z-index: 70; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; background: linear-gradient(140deg, rgba(16, 22, 65, 0.94) 0%, rgba(27, 77, 255, 0.94) 100%); color: var(--white); cursor: pointer; box-shadow: 0 16px 36px -18px rgba(5, 8, 31, 0.9); /* --lift is set from JS so the button parks above the footer instead of sitting on top of the social links. */ transform: translateY(var(--lift, 0px)); transition: transform 0.18s var(--ease-out), background-color 0.18s ease; } /* display:grid above and the UA's [hidden] rule have the same specificity, and the author sheet wins on order — so the attribute needs saying again here. */ .to-top[hidden] { display: none; } .to-top:hover { transform: translateY(calc(var(--lift, 0px) - 3px)); } .to-top:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }