/* Ingana Digital — layout and components. Brand rules held throughout: radius 0 everywhere, 2px Line rules, everything flush left including button labels, Volt only on Midnight or Board. */ /* ============================================================ base */ *, *::before, *::after { box-sizing: border-box; } /* A safety net against future horizontal overflow, on html rather than body. `clip` is used instead of `hidden` because `hidden` on one axis forces the other to compute to `auto`, which turns that element into a scroll container; `clip` has no such effect. Measured in Chrome: the page scrolls normally with this set. The page has no horizontal overflow today — .hero clips its own background grid — so this only guards against a future regression. */ html { background: var(--color-midnight); scroll-behavior: smooth; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* The base size scales with the viewport, so ch-based measures scale with it too and long-form copy stays readable on a large display. 16px floor keeps iOS from zooming when a form field takes focus. */ body { margin: 0; background: var(--color-midnight); color: var(--color-frost); font: 400 clamp(16px, 1.6vw, 18px)/1.55 var(--font-body); -webkit-font-smoothing: antialiased; } ::selection { background: var(--color-volt); color: var(--color-midnight); } /* The UA rule for the hidden attribute is `[hidden] { display: none }`, which any class selector that sets display beats on specificity. `.form` is display:grid, so `form.hidden = true` set the attribute and changed nothing — the form stayed on screen stuck on "Sending…" while the success message appeared below it. This makes the attribute authoritative wherever it is used. */ [hidden] { display: none !important; } h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; margin: 0; } p { margin: 0; } a { color: var(--color-pulse); } img, svg { display: block; max-width: 100%; } :focus-visible { outline: var(--focus); outline-offset: 3px; } /* The final CTA is the page's one Volt band, and a Volt focus ring on Volt is invisible. Everything focusable inside it gets a Midnight ring instead. */ .cta-final :focus-visible { outline: 2px solid var(--color-midnight); outline-offset: 3px; } /* --- scroll reveal --- Content is visible by default. The animation only exists once JS has added .js-reveal to , which it does only when motion is allowed — so a JS failure or a reduced-motion preference can never leave a section hidden. */ .js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .35s ease; } .js-reveal .reveal.is-in { opacity: 1; transform: none; } /* Anchor targets get focus moved to them by main.js; that focus is a scroll position cue, not a control, so it should not draw a ring. */ section:focus, main:focus { outline: none; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 100; padding: 14px 18px; background: var(--color-volt); color: var(--color-midnight); font: 500 14px var(--font-body); text-decoration: none; transition: top .15s; } .skip-link:focus { top: 12px; } /* ============================================================ eyebrow */ .eyebrow { font: 500 13px/1.4 var(--font-mono); color: var(--color-volt); letter-spacing: .02em; margin: 0; } /* ============================================================ buttons */ .btn { display: inline-block; font: 500 15px/1.4 var(--font-body); border-radius: var(--radius); text-align: left; /* brand rule: labels are flush left */ text-decoration: none; cursor: pointer; min-height: 48px; position: relative; transition: background-color .15s, color .15s, border-color .15s; } .btn--primary { background: var(--color-volt); color: var(--color-midnight); border: 2px solid var(--color-volt); padding: 13px 40px 13px 16px; } .btn--secondary { background: transparent; color: var(--color-frost); border: 2px solid var(--color-frost); padding: 13px 40px 13px 16px; } /* Hover moves a Volt rule rather than changing the fill: the palette has one accent and no tints, so a "slightly lighter Volt" would be off-brand. */ .btn::after { content: ''; position: absolute; left: 16px; right: 40px; bottom: 9px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .18s; } .btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .btn::after { transition: none; } } /* ============================================================ header */ .header { position: sticky; top: 0; z-index: 50; background: rgba(15, 26, 46, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: var(--rule); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter); min-height: var(--header-h); } .brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; min-height: 44px; /* the mark is 34px; the hit area should not be */ } .brand__logo { height: 34px; width: auto; } /* --- mobile nav toggle --- */ .nav-toggle { appearance: none; background: transparent; border: 2px solid var(--color-line); border-radius: var(--radius); width: 48px; height: 44px; display: grid; place-items: center; cursor: pointer; padding: 0; } .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 20px; height: 2px; background: var(--color-frost); } .nav-toggle__bars { position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ''; position: absolute; left: 0; transition: transform .18s; } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .nav-toggle__bars::before, .nav-toggle__bars::after { transition: none; } } /* --- nav: drawer on mobile, inline row from 900px --- */ /* Absolute, not fixed: .header sets backdrop-filter, and a backdrop-filter makes an element the containing block for its fixed-position descendants. A fixed drawer would therefore size itself against the 64px header rather than the viewport and collapse to a single row. Anchoring to the header deliberately (top:100%, explicit height) is predictable; dvh keeps mobile browser chrome from cropping the last link. */ .nav { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); background: var(--color-midnight); border-top: var(--rule); padding: 24px var(--gutter) 40px; display: none; flex-direction: column; gap: 8px; overflow-y: auto; } .nav.is-open { display: flex; } body.nav-locked { overflow: hidden; } .nav__list { list-style: none; margin: 0 0 16px; padding: 0; } .nav__link { display: block; padding: 14px 0; border-bottom: var(--rule); color: var(--color-frost); font: 400 18px var(--font-body); text-decoration: none; } .nav__link:hover { color: var(--color-volt); } .nav__cta { align-self: flex-start; } /* --- language toggle --- */ .lang { display: inline-flex; border: 2px solid var(--color-line); align-self: flex-start; margin-bottom: 20px; } .lang__btn { appearance: none; background: transparent; border: 0; border-radius: var(--radius); color: var(--color-muted); font: 500 13px var(--font-mono); letter-spacing: .04em; padding: 11px 14px; min-height: 44px; cursor: pointer; } .lang__btn + .lang__btn { border-left: 2px solid var(--color-line); } .lang__btn:hover { color: var(--color-frost); } .lang__btn[aria-pressed="true"] { background: var(--color-volt); color: var(--color-midnight); } @media (min-width: 900px) { .nav-toggle { display: none; } .nav { position: static; height: auto; display: flex; flex-direction: row; align-items: center; gap: 28px; padding: 0; border-top: 0; background: transparent; overflow: visible; } .nav__list { display: flex; gap: 28px; margin: 0; } .nav__link { padding: 12px 0; /* 20px of text is under the minimum target size */ border-bottom: 0; font-size: 15px; } .lang { margin-bottom: 0; } .nav__cta { align-self: center; } } /* ============================================================ hero */ .hero { position: relative; overflow: hidden; padding-block: 64px 72px; } @media (min-width: 768px) { .hero { padding-block: 104px 120px; } } /* The circuit grid: the brand's "visible grid", drawn in Line at low opacity and faded out at the edges so it reads as texture rather than as a table. */ .hero__grid { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(to right, var(--color-line) 0 1px, transparent 1px 64px), repeating-linear-gradient(to bottom, var(--color-line) 0 1px, transparent 1px 64px); opacity: .45; -webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 72%); } .hero__inner { position: relative; } .hero__title { font-size: clamp(34px, 7vw, 68px); max-width: 17ch; margin: 20px 0 0; } .hero__title .hl { font-style: normal; /* Volt accent, not italic — the kit has no italic */ color: var(--color-volt); } .hero__sub { margin: 24px 0 0; max-width: 58ch; color: var(--color-muted); font-size: clamp(16px, 1.8vw, 19px); } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .hero__trust { margin-top: 32px; padding-top: 20px; border-top: var(--rule); max-width: 44ch; /* the ES string is 39 characters and must not wrap */ font: 500 13px var(--font-mono); color: var(--color-muted); } /* ============================================================ sections */ .section { border-top: var(--rule); padding-block: var(--section-y); } /* Anchors land below the sticky header rather than under it. */ section[id] { scroll-margin-top: calc(var(--header-h) + 8px); } .section__title { margin-top: 16px; font-size: clamp(28px, 4.5vw, 46px); max-width: 20ch; } /* ============================================================ problem stats */ /* One data block, not three cards: a 2px Line gap on a Line-coloured grid draws the brand's visible grid between cells without doubling up on borders. */ .stats { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 2px; background: var(--color-line); border: var(--rule); } @media (min-width: 1024px) { .stats { grid-template-columns: repeat(3, 1fr); } } .stat { background: var(--color-board); padding: 28px 24px 32px; display: flex; flex-direction: column; } @media (min-width: 768px) { .stat { padding: 32px; } } .stat__icon { width: 40px; height: 40px; margin-bottom: 24px; } .stat__num { font-family: var(--font-heading); font-weight: 700; letter-spacing: -.03em; line-height: 1; font-size: clamp(48px, 9vw, 72px); color: var(--color-volt); } .stat__line { margin-top: 14px; color: var(--color-muted); max-width: 34ch; } /* ============================================================ services */ /* Separate modules, so these keep their own 2px borders and real spacing — unlike .stats, which reads as a single block of figures. */ .svcs { margin-top: 40px; display: grid; gap: 20px; } @media (min-width: 1024px) { .svcs { grid-template-columns: repeat(3, 1fr); } } .svc { background: var(--color-board); border: var(--rule); padding: 28px 24px; display: flex; flex-direction: column; } @media (min-width: 768px) { .svc { padding: 32px; } } .svc__icon { width: 40px; height: 40px; margin-bottom: 24px; } .svc__title { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.1; } /* The measure only binds when the cards are stacked (375/768); at 1024+ the three-up column is already narrower than this. */ .svc__body { margin-top: 14px; color: var(--color-muted); max-width: 58ch; } /* margin-top:auto pins the mono line to the bottom, so the three cards agree on where it sits however long their copy runs. */ .svc__meta { margin-top: auto; padding-top: 28px; font: 500 13px var(--font-mono); color: var(--color-volt); } /* ============================================================ how it works */ .steps { position: relative; list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 36px; } /* The connector. Decorative, so it is a pseudo-element and never reaches the accessibility tree. Each number carries a Midnight background, which masks the rule behind it — so the line reads as passing through the numbers. */ .steps::before { content: ''; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px; background: var(--color-line); } .step { position: relative; padding-left: 56px; } .step__num { position: absolute; left: 0; top: 0; font: 500 32px/1 var(--font-mono); color: var(--color-volt); background: var(--color-midnight); padding-bottom: 8px; } .step__title { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.1; } .step__body { margin-top: 12px; color: var(--color-muted); max-width: 52ch; } /* 1024, not 768: three columns at tablet width squeeze the step copy to roughly 28 characters a line. This also matches where .stats and .svcs go three-up, so the whole page changes shape at one breakpoint instead of two. Below this the steps keep the vertical timeline. */ @media (min-width: 1024px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } /* Horizontal now: the rule runs across the row of numbers at their midline (32px tall, so 16px down, minus 1px for the rule's own 2px height). */ .steps::before { left: 0; right: 0; top: 15px; bottom: auto; width: auto; height: 2px; } .step { padding-left: 0; padding-top: 56px; } .step__num { padding-bottom: 0; padding-right: 16px; } } /* ============================================================ testimonial */ .quote { margin: 40px 0 0; background: var(--color-board); border: var(--rule); border-left: 4px solid var(--color-volt); padding: 32px 24px; /* A fixed px measure, not ch: ch resolves against the figure's 16px body font, which would set the line length for 16px prose while the quote inside is rendered at up to 28px — about 35 characters a line, far too tight. */ max-width: 720px; } @media (min-width: 768px) { .quote { padding: 40px; } } .quote__text { margin: 0; font-family: var(--font-heading); font-size: clamp(20px, 3vw, 28px); line-height: 1.25; letter-spacing: -.02em; color: var(--color-frost); } .quote__by { margin-top: 24px; font: 500 13px var(--font-mono); color: var(--color-muted); } /* ============================================================ pricing */ .prose { margin-top: 24px; max-width: 62ch; color: var(--color-muted); font-size: clamp(16px, 1.8vw, 18px); } .precios__cta { margin-top: 36px; } /* ============================================================ faq */ .faq { margin-top: 40px; border-top: var(--rule); max-width: 820px; } .faq__item { border-bottom: var(--rule); } .faq__q { margin: 0; font-size: inherit; } .faq__btn { appearance: none; width: 100%; background: transparent; border: 0; border-radius: var(--radius); color: var(--color-frost); font: 700 clamp(17px, 2vw, 20px)/1.3 var(--font-heading); letter-spacing: -.02em; text-align: left; /* brand rule: flush left, buttons included */ padding: 22px 48px 22px 0; position: relative; cursor: pointer; } .faq__btn:hover { color: var(--color-volt); } /* The +/− indicator: two 2px Volt bars, the vertical one hidden when open. Pseudo-elements, so it is decorative by construction. */ .faq__btn::before, .faq__btn::after { content: ''; position: absolute; right: 8px; top: 50%; background: var(--color-volt); } .faq__btn::before { width: 16px; height: 2px; margin-top: -1px; } .faq__btn::after { width: 2px; height: 16px; margin-top: -8px; right: 15px; transition: opacity .15s; } .faq__btn[aria-expanded="true"]::after { opacity: 0; } @media (prefers-reduced-motion: reduce) { .faq__btn::after { transition: none; } } .faq__a { padding: 0 48px 24px 0; color: var(--color-muted); max-width: 68ch; } /* ============================================================ final cta */ .cta-final { background: var(--color-volt); color: var(--color-midnight); padding-block: var(--section-y); border-top: var(--rule); } .cta-final__title { font-size: clamp(28px, 4.5vw, 46px); max-width: 22ch; color: var(--color-midnight); } .cta-final__sub { margin-top: 20px; max-width: 54ch; color: var(--color-midnight); font-size: clamp(16px, 1.8vw, 18px); } .cta-final__actions { margin-top: 32px; } /* A Volt fill would be invisible here, so the button inverts to a Midnight outline — the only button variant on the page with a light background. */ .btn--onvolt { background: transparent; color: var(--color-midnight); border: 2px solid var(--color-midnight); padding: 13px 40px 13px 16px; } /* ============================================================ contact form */ .contacto__inner { display: grid; gap: 40px; } @media (min-width: 1024px) { .contacto__inner { grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; } } /* Holds the form and its result messages in a single grid cell, so hiding the form leaves the success message exactly where the form had been. */ .contacto__form { min-width: 0; } .form { display: grid; gap: 20px; } @media (min-width: 600px) { .form { grid-template-columns: 1fr 1fr; } .field--wide, .form__foot { grid-column: 1 / -1; } } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font: 500 13px var(--font-mono); color: var(--color-volt); letter-spacing: .02em; } .field input, .field textarea { font: 400 16px/1.5 var(--font-body); /* 16px minimum stops iOS zooming on focus */ color: var(--color-frost); background: var(--color-board); border: var(--rule); border-radius: var(--radius); padding: 13px 14px; width: 100%; } .field textarea { resize: vertical; min-height: 120px; } .field input::placeholder, .field textarea::placeholder { color: var(--color-muted); opacity: .7; } .field input:focus-visible, .field textarea:focus-visible { outline: var(--focus); outline-offset: 2px; border-color: var(--color-volt); } .form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 4px; } .form__privacy { font: 400 13px var(--font-mono); color: var(--color-muted); max-width: 34ch; } /* Off-screen, not display:none — some browsers skip hidden controls when serialising a form, which would stop the honeypot reaching Netlify. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__note { margin-top: 24px; padding: 20px; border: var(--rule); background: var(--color-board); max-width: 62ch; } .form__note--ok { border-left: 4px solid var(--color-volt); } .form__note--error { border-left: 4px solid var(--color-pulse); } /* ============================================================ footer */ .footer { border-top: var(--rule); padding-block: 48px 28px; } .footer__inner { display: grid; gap: 32px; padding-bottom: 36px; } @media (min-width: 768px) { .footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } } .footer__logo { height: 32px; width: auto; } .footer__tagline { margin-top: 16px; color: var(--color-muted); max-width: 32ch; } .footer__label { font: 500 13px var(--font-mono); color: var(--color-volt); letter-spacing: .04em; margin-bottom: 12px; } .footer__col p + p { margin-top: 6px; } .footer__link { color: var(--color-frost); text-decoration: none; border-bottom: 1px solid var(--color-line); } .footer__link:hover { color: var(--color-volt); border-bottom-color: var(--color-volt); } .footer__place { color: var(--color-muted); } .footer__social { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .footer__copy { padding-top: 24px; border-top: var(--rule); font: 400 13px var(--font-mono); color: var(--color-muted); } /* ============================================================ chat widget */ /* CHATBOT WIDGET PLACEHOLDER — positioning only. No background, no size, no colour: the future widget script mounts into this div and brings its own. */ #ingana-chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 9999; }