/* ========================================================================== Avento — www.avento.hr Hand-written, no framework and no build step. The site this replaced died of dependency rot (Bootstrap 4 + jQuery 1.11 + owl-carousel, all pinned to 2020), so everything here is local: no CDN, no web fonts, no map embeds, no third-party requests at all. Icons are inline SVG in the markup. ========================================================================== */ /* --- Brand --------------------------------------------------------------- Sampled from the Avento mark: the "A" is #E36C0A, "VENTO" is #595959. Each product keeps its OWN colour from its landing page, so avento.hr, aRento and EddyCross read as one family without flattening the products into the parent brand. ------------------------------------------------------------------------- */ :root { --brand: #E36C0A; --brand-dark: #B85508; --brand-grey: #595959; --arento: #A24D09; --arento-dark: #6F3405; --eddycross: #3C5878; --eddycross-dark: #253A52; /* Light theme */ --bg: #FFFFFF; --bg-alt: #F6F5F3; --bg-sunken: #EFEDEA; --text: #23252A; --text-muted: #5C6068; --border: #E2DFDA; --card-bg: #FFFFFF; --card-shadow: 0 1px 2px rgba(20, 20, 25, .05), 0 8px 24px rgba(20, 20, 25, .06); --card-shadow-hi: 0 2px 4px rgba(20, 20, 25, .07), 0 16px 40px rgba(20, 20, 25, .11); /* Hero band — dark in both themes, the logo's own backdrop */ --hero-top: #34363B; --hero-bottom: #212327; --hero-text: #FFFFFF; --hero-muted: #B9BCC2; --radius: 14px; --radius-sm: 10px; --wrap: 1120px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; color-scheme: light; } /* --- Dark theme ---------------------------------------------------------- Same rule as the aRento / EddyCross public pages: an explicit choice in the "public_theme" cookie wins, otherwise follow the OS. js/theme.js stamps data-theme on before first paint, so the ATTRIBUTE is what normally applies; the media query below is the no-JS fallback and is written to lose to an explicit data-theme="light". The two blocks are deliberately duplicated — plain CSS has no way to share one declaration block between an attribute selector and a media query, and a preprocessor would mean a build step this site does not have. */ :root[data-theme="dark"] { --bg: #1C1E22; --bg-alt: #232629; --bg-sunken: #17191C; --text: #E8E9EB; --text-muted: #A3A8B0; --border: #34383D; --card-bg: #24272B; --card-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3); --card-shadow-hi: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .45); --hero-top: #2A2C30; --hero-bottom: #161719; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1C1E22; --bg-alt: #232629; --bg-sunken: #17191C; --text: #E8E9EB; --text-muted: #A3A8B0; --border: #34383D; --card-bg: #24272B; --card-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3); --card-shadow-hi: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .45); --hero-top: #2A2C30; --hero-bottom: #161719; color-scheme: dark; } } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; /* The page must never scroll sideways, at any width. */ overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; } h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); } h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); } h3 { font-size: 1.2rem; letter-spacing: -.01em; } p { margin: 0 0 1.1em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--brand); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--radius-sm) 0; text-decoration: none; } .skip:focus { left: 0; } :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } /* --- Header --------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease, background-color .2s ease; } .site-header.is-stuck { border-bottom-color: var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; } .header-actions { display: flex; align-items: center; gap: 4px; } .brand { display: inline-flex; align-items: center; text-decoration: none; } .brand img { width: 150px; height: auto; } /* The wordmark is #595959 grey — fine on white, muddy on the dark background. Lift it rather than ship a second logo file. Mirrors the theme rule above. */ :root[data-theme="dark"] .brand img { filter: brightness(1.35); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand img { filter: brightness(1.35); } } .site-nav ul { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; } .site-nav a { display: inline-block; padding: .5rem .85rem; border-radius: 8px; text-decoration: none; font-size: .96rem; font-weight: 600; color: var(--text-muted); transition: color .15s ease, background-color .15s ease; } .site-nav a:hover { color: var(--text); background: var(--bg-alt); } /* Current section, set by the scroll spy in avento.js. Same idea as the aRento landing header, which also tracks this by hand — Bootstrap's ScrollSpy there resolved every section yet never moved the highlight off the first one. */ .site-nav a.is-active { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); } .nav-toggle { display: none; } /* Narrow layout: the hamburger is the first child of .header-inner, so it sits at the far left with the logo after it and the actions pushed right. */ @media (max-width: 720px) { .header-inner { gap: 10px; } /* Hamburger hard left, logo immediately after it; the actions take the slack on the right. margin-right:auto on the button pushed the logo away from it. */ .header-inner > .nav-toggle { margin-right: 0; } .header-inner > .brand { margin-right: auto; } } /* --- Language picker ------------------------------------------------------- Each language is a real page (/fr/, /de/, ...) rather than a runtime switch, so these are plain links and the menu works without JavaScript too — the JS only collapses it back down after a click. */ .lang-picker { position: relative; } .lang-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin-left: 2px; background: none; border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .lang-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--bg-alt); } .lang-btn svg { width: 18px; height: 18px; } /* The button shows the current language's flag, so it needs no right margin the way the menu entries do. */ .lang-btn .flag { margin-right: 0; } .lang-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 168px; padding: 6px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--card-shadow-hi); } .lang-menu.is-open { display: block; } .lang-menu a { display: block; padding: .5rem .7rem; border-radius: 7px; text-decoration: none; font-size: .94rem; color: var(--text-muted); white-space: nowrap; } .lang-menu a:hover { background: var(--bg-alt); color: var(--text); } .lang-menu a.is-current { color: var(--brand); font-weight: 650; } /* Flags are SVG (lipis/flag-icons, MIT), not the old famfamfam bitmap sprite: at 16x11 the PNG was tiny and went soft the moment it was scaled or shown on a hi-DPI screen. These stay crisp at any size, so they render at 20x15 here. Only the eleven this site needs are shipped, in img/flags/, and the aRento and EddyCross public pages carry the same set so all three look identical. Self-hosted on purpose — the CSP forbids any external request. */ .flag { display: inline-block; width: 20px; height: 15px; margin-right: 10px; vertical-align: middle; flex: none; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); } .flag-us { background-image: url(../img/flags/us.svg); } .flag-hr { background-image: url(../img/flags/hr.svg); } .flag-de { background-image: url(../img/flags/de.svg); } .flag-it { background-image: url(../img/flags/it.svg); } .flag-cz { background-image: url(../img/flags/cz.svg); } .flag-si { background-image: url(../img/flags/si.svg); } .flag-pl { background-image: url(../img/flags/pl.svg); } .flag-fr { background-image: url(../img/flags/fr.svg); } .flag-ru { background-image: url(../img/flags/ru.svg); } .flag-cn { background-image: url(../img/flags/cn.svg); } .flag-es { background-image: url(../img/flags/es.svg); } .lang-menu a { display: flex; align-items: center; } @media (max-width: 720px) { .lang-menu { right: -4px; max-height: 60vh; overflow-y: auto; } } /* --- Light/dark toggle ---------------------------------------------------- Two icons live in the button and CSS shows the one matching the ACTIVE theme — sun in light, moon in dark. That is the convention the aRento/EddyCross pages use (_DarkModeToggleIcons.cshtml: "theme-icon-light shows in light"), so the three sites behave identically. Driven by the same attribute + media-query pair as the palette, so it stays correct with JS disabled. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin-left: 6px; background: none; border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .theme-toggle:hover { color: var(--brand); border-color: var(--brand); background: var(--bg-alt); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-dark { display: none; } :root[data-theme="dark"] .theme-toggle .icon-light { display: none; } :root[data-theme="dark"] .theme-toggle .icon-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: block; } } /* --- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.4rem; border-radius: 999px; font-weight: 650; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .btn:hover { transform: translateY(-1px); } .btn svg { width: 18px; height: 18px; flex: none; } .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(227, 108, 10, .3); } .btn-primary:hover { background: var(--brand-dark); box-shadow: 0 10px 26px rgba(227, 108, 10, .38); } .btn-ghost { border-color: rgba(255, 255, 255, .35); color: #fff; } .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .1); } /* --- Shared section furniture --------------------------------------------- */ .eyebrow { text-transform: uppercase; letter-spacing: .13em; font-size: .76rem; font-weight: 700; color: var(--brand); margin: 0 0 .7em; } .section { padding: clamp(64px, 9vw, 108px) 0; } /* The header is sticky, so an anchor jump would otherwise tuck the heading underneath it. Offset every jump target by a little more than its height. */ .section, .hero { scroll-margin-top: 76px; } .section-alt { background: var(--bg-alt); } .section-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); } .section-lede { color: var(--text-muted); font-size: 1.08rem; margin-bottom: 0; } /* --- Hero ----------------------------------------------------------------- */ .hero { position: relative; background: linear-gradient(165deg, var(--hero-top) 0%, var(--hero-bottom) 100%); color: var(--hero-text); padding: clamp(72px, 11vw, 132px) 0 clamp(96px, 12vw, 150px); overflow: hidden; } /* Soft orange glow, echoing the "A" in the mark. */ .hero::before { content: ""; position: absolute; top: -30%; right: -10%; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; background: radial-gradient(circle, rgba(227, 108, 10, .3) 0%, rgba(227, 108, 10, 0) 68%); pointer-events: none; } .hero-inner { position: relative; max-width: 760px; } .hero .eyebrow { color: #F0964A; } .hero h1 { margin-bottom: .35em; } .hero .accent { color: var(--brand); } .lede { font-size: clamp(1.05rem, 2.1vw, 1.28rem); color: var(--hero-muted); max-width: 620px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 2rem 0 0; } .hero-curve { position: absolute; left: 0; right: 0; bottom: -1px; height: 56px; background: var(--bg); -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, transparent 68%, #000 68.5%); mask-image: radial-gradient(120% 100% at 50% 0%, transparent 68%, #000 68.5%); } /* --- Grids ---------------------------------------------------------------- */ .grid { display: grid; gap: 22px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } /* --- Service cards -------------------------------------------------------- */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--card-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hi); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); } .card h3 { margin-bottom: .45em; } .card p { color: var(--text-muted); margin: 0; font-size: .97rem; } .icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); } .icon svg { width: 24px; height: 24px; } /* --- Product cards -------------------------------------------------------- */ .products { gap: 26px; } .product { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--card-shadow); transition: transform .18s ease, box-shadow .18s ease; } .product:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hi); } .product-head { padding: 30px 30px 26px; color: #fff; } .product-head h3 { font-size: 1.75rem; margin-bottom: .15em; } .product-tag { margin: 0; opacity: .88; font-size: .98rem; } /* Each card header carries its product's own hero line art over the brand gradient — the same SVGs the aRento and EddyCross public pages use, so the three sites share one visual language. Faint and bottom-anchored so the title stays first. NOTE: an SVG used as a CSS background is parsed as STRICT XML; a "--" inside a comment makes the browser drop the whole file silently (that is exactly what hid the EddyCross hero art). Keep these files XML-clean. */ .product-arento .product-head { background: url(../img/arento-hero.svg) no-repeat center bottom / 150% auto, linear-gradient(150deg, var(--arento) 0%, var(--arento-dark) 100%); } .product-eddycross .product-head { background: url(../img/eddycross-hero.svg) no-repeat center bottom / 150% auto, linear-gradient(150deg, var(--eddycross) 0%, var(--eddycross-dark) 100%); } .product-body { padding: 26px 30px 30px; display: flex; flex-direction: column; flex: 1; } .product-body > p { color: var(--text-muted); font-size: .98rem; } .ticks { list-style: none; margin: 0 0 26px; padding: 0; } .ticks li { position: relative; padding-left: 28px; margin-bottom: .5em; font-size: .96rem; } .ticks li::before { content: ""; position: absolute; left: 4px; top: .52em; width: 11px; height: 6px; border-left: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; transform: rotate(-45deg); } .product-arento .ticks li::before { color: var(--arento); } .product-eddycross .ticks li::before { color: var(--eddycross); } /* Both brand colours are tuned for a white card and go muddy on a dark one; lighten each a step. Same dual selector as the theme block above. */ :root[data-theme="dark"] .product-arento .ticks li::before { color: #D9822B; } :root[data-theme="dark"] .product-eddycross .ticks li::before { color: #7FA3CC; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .product-arento .ticks li::before { color: #D9822B; } :root:not([data-theme="light"]) .product-eddycross .ticks li::before { color: #7FA3CC; } } .btn-product { margin-top: auto; align-self: flex-start; color: #fff; } .product-arento .btn-product { background: var(--arento); } .product-arento .btn-product:hover { background: var(--arento-dark); } .product-eddycross .btn-product { background: var(--eddycross); } .product-eddycross .btn-product:hover { background: var(--eddycross-dark); } /* --- Company -------------------------------------------------------------- */ .split { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; } /* Scoped to the body copy only: a bare ".split-main p" also matched the eyebrow and, being more specific than ".eyebrow", greyed out its brand colour. */ .split-main p:not(.eyebrow) { color: var(--text-muted); } .split-main p:last-child { margin-bottom: 0; } .split-side { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; } .side-title { font-size: 1.05rem; margin-bottom: .25em; color: var(--brand); } .legal-name { font-size: .86rem; color: var(--text-muted); margin: 0 0 .9em; line-height: 1.4; } .split-side address { font-style: normal; color: var(--text-muted); margin-bottom: 1.2em; } /* The two addresses are a pair, so they sit closer to each other than to the facts below. */ .split-side address + address { margin-top: -.5em; } /* "Office" / "Registered seat" over each street: the company works from Zagreb and is registered in Viganj, so an unlabelled address would claim to be the wrong one. */ .split-side address .address-kind { display: block; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); opacity: .8; margin-bottom: .2em; } .facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .94rem; } .facts dt { color: var(--text-muted); } .facts dd { margin: 0; font-variant-numeric: tabular-nums; } /* --- Partners ------------------------------------------------------------- */ .partners { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } /* Partner cards hold a short name and a domain, so they stay two-up on a phone rather than dropping to a single very wide column the way the content cards do. */ @media (max-width: 720px) { .partners { grid-template-columns: repeat(2, 1fr); gap: 12px; } .partners a { padding: 14px 12px; } .partner-country { font-size: .72rem; } } .partners a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 20px 22px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; font-weight: 650; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease; } .partners a:hover { transform: translateY(-2px); border-color: var(--brand); color: var(--brand); box-shadow: var(--card-shadow); } .partner-name { font-weight: 650; } .partner-country { font-weight: 400; font-size: .76rem; letter-spacing: .02em; color: var(--text-muted); } .partners a:hover .partner-country { color: inherit; opacity: .8; } /* --- Contact -------------------------------------------------------------- */ .section-contact { background: var(--bg-sunken); text-align: center; } .contact-inner { max-width: 620px; } .section-contact .section-lede { margin: 0 auto 2.2rem; } .contact-form { text-align: left; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .field { margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; } .field label { font-size: .88rem; font-weight: 650; color: var(--text-muted); } .field input, .field textarea { font: inherit; font-size: .98rem; color: var(--text); background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .7rem .85rem; width: 100%; transition: border-color .15s ease, box-shadow .15s ease; } .field textarea { resize: vertical; min-height: 120px; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); } /* Only mark a field red once the browser has actually judged it — :invalid alone paints every required field red before the visitor has typed anything. */ .field input:user-invalid, .field textarea:user-invalid { border-color: #C0392B; } /* Honeypot. Off-screen rather than display:none — bots skip hidden inputs. */ .field-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .form-actions { margin: 6px 0 0; } .form-actions .btn { width: 100%; justify-content: center; } .form-status { margin: 14px 0 0; font-size: .95rem; min-height: 1.4em; } .form-status.is-ok { color: #1E8449; } .form-status.is-error { color: #C0392B; } :root[data-theme="dark"] .form-status.is-ok { color: #6FCF97; } :root[data-theme="dark"] .form-status.is-error { color: #F1948A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form-status.is-ok { color: #6FCF97; } :root:not([data-theme="light"]) .form-status.is-error { color: #F1948A; } } button[disabled] { opacity: .6; cursor: progress; transform: none; } /* --- Footer --------------------------------------------------------------- */ .site-footer { /* Deliberately NOT overflow:hidden — the AV mark below is taller than the footer and is meant to break out over the section above it. */ border-top: 1px solid var(--border); padding: 36px 0; background: var(--bg); position: relative; } /* AV watermark, at the same 160px the aRento/EddyCross public footers use. It is taller than this footer on purpose, so it rises past the top border into the section above exactly as it does there. .footer-inner is position:relative, so the nav and copyright still paint over it without needing a z-index. */ .footer-mark { position: absolute; left: 40px; bottom: 0; height: 160px; width: auto; opacity: .55; pointer-events: none; user-select: none; } @media (max-width: 720px) { .footer-mark { height: 110px; left: 10px; } } .footer-inner { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; } .footer-nav { display: flex; flex-wrap: wrap; gap: 20px; } .footer-nav a { text-decoration: none; color: var(--text-muted); font-size: .94rem; } .footer-nav a:hover { color: var(--text); } .copy { margin: 0; color: var(--text-muted); font-size: .88rem; } /* --- Back to top ---------------------------------------------------------- */ .to-top { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } .to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .to-top svg { width: 20px; height: 20px; } /* --- Responsive ----------------------------------------------------------- */ @media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; } } @media (max-width: 720px) { body { font-size: 16px; } .grid-3, .grid-2 { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } /* Collapse the nav behind a toggle rather than letting it wrap. */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; background: none; border: 1px solid var(--border); border-radius: 10px; color: var(--text); } .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .nav-toggle-bar::before { transform: translateY(-6px); } .nav-toggle-bar::after { transform: translateY(4px); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(0) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-2px) rotate(-45deg); } .site-nav ul { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--card-shadow); display: none; } .site-nav ul.is-open { display: flex; } .site-nav a { padding: .85rem .6rem; font-size: 1.02rem; } .footer-inner { flex-direction: column; align-items: flex-start; } .to-top { right: 14px; bottom: 14px; } } @media (max-width: 380px) { .wrap { padding: 0 18px; } .product-head, .product-body { padding-left: 22px; padding-right: 22px; } .btn { padding: .75rem 1.15rem; font-size: .95rem; } } /* --- Print ---------------------------------------------------------------- */ @media print { .site-header, .to-top, .hero-curve, .hero-actions { display: none; } .hero { background: none; color: #000; padding: 20px 0; } .lede, .card p, .section-lede { color: #333; } .product-head { color: #000; background: none !important; border-bottom: 2px solid #999; } }