/* ========================================================================== Isiros Tech Ltd — isiros.com Single stylesheet. No external fonts, no external requests. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ /* Dark is the site default. The light palette is opt-in: the toggle sets data-theme="light" on and stores the choice in localStorage. The OS colour-scheme preference is deliberately not consulted. */ :root { color-scheme: dark; --bg: #080c14; --bg-alt: #0c121d; --surface: #101825; --surface-2: #16202f; --border: #1f2b3d; /* decorative separators */ --border-strong: #5a7396; /* control boundaries — kept at 3:1 for WCAG 1.4.11 */ --text: #e9eff8; --text-muted: #a2b3c9; --accent: #6bb4f2; --accent-hover: #96cbf8; --accent-soft: #10263c; --accent-line: #24435f; --on-accent: #051425; --focus: #8cc6f8; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-md: 0 2px 6px rgb(0 0 0 / 0.4), 0 14px 36px rgb(0 0 0 / 0.36); --shadow-lg: 0 10px 30px rgb(0 0 0 / 0.45), 0 36px 72px rgb(0 0 0 / 0.4); /* Theme-independent from here down. The terminal is dark in both themes. */ --term-bg: #0b1220; --term-bar: #131d2f; --term-border: #22304a; --term-text: #dfe8f4; --term-dim: #92a5c0; --term-prompt: #4fd1a5; --term-ok: #5cd6a0; --term-head: #7fb6ec; --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --shell: 1180px; --header-h: 68px; --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace; --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --step-1: clamp(1.125rem, 1.07rem + 0.28vw, 1.3125rem); --step-2: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem); --step-3: clamp(1.6rem, 1.4rem + 1vw, 2.25rem); --step-4: clamp(2rem, 1.5rem + 2.1vw, 3.15rem); } :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-alt: #f4f7fb; --surface: #ffffff; --surface-2: #eef3f9; --border: #dbe4ef; --border-strong: #73879f; --text: #0d1726; --text-muted: #475a71; --accent: #0a5ea8; --accent-hover: #084a85; --accent-soft: #e6f0fa; --accent-line: #b9d5ee; --on-accent: #ffffff; --focus: #0a5ea8; --shadow-sm: 0 1px 2px rgb(13 23 38 / 0.06), 0 2px 8px rgb(13 23 38 / 0.04); --shadow-md: 0 2px 4px rgb(13 23 38 / 0.05), 0 12px 32px rgb(13 23 38 / 0.08); --shadow-lg: 0 8px 24px rgb(13 23 38 / 0.10), 0 32px 64px rgb(13 23 38 / 0.10); } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; } h1, h2, h3, h4 { line-height: 1.18; font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; } p { text-wrap: pretty; } ul, ol { padding: 0; list-style: none; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--accent-hover); } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; } address { font-style: normal; } :target { scroll-margin-top: calc(var(--header-h) + 24px); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--accent); color: var(--on-accent); } /* -------------------------------------------------------------------------- 3. Utilities -------------------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); } .shell--narrow { max-width: 860px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: 1rem; top: -100%; z-index: 200; padding: 0.7rem 1.15rem; background: var(--accent); color: var(--on-accent); font-weight: 600; border-radius: 0 0 var(--radius-sm) var(--radius-sm); text-decoration: none; transition: top 120ms ease-out; } .skip-link:focus { top: 0; color: var(--on-accent); } .icon { width: 24px; height: 24px; flex: none; } .icon--sm { width: 20px; height: 20px; } .icon--xs { width: 16px; height: 16px; stroke-width: 2.2; } .eyebrow { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.85rem; } .link-out { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 550; } .link-out::after { content: ""; width: 0.55em; height: 0.55em; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg) translateY(-0.1em); } /* -------------------------------------------------------------------------- 4. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 46px; padding: 0.7rem 1.4rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.97rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease; } .btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn--primary .icon { transition: transform 160ms ease; } .btn--primary:hover .icon { transform: translateX(3px); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn--ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent); } .btn--sm { min-height: 40px; padding: 0.45rem 1.05rem; font-size: 0.9rem; } .btn--lg { min-height: 52px; padding: 0.85rem 1.7rem; font-size: 1.02rem; } /* -------------------------------------------------------------------------- 5. Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); } .site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); } .logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); font-weight: 700; letter-spacing: -0.025em; font-size: 1.1rem; margin-right: auto; } .logo__mark { width: 32px; height: 32px; border-radius: 8px; flex: none; } .logo__text { display: inline-flex; gap: 0.32em; } .logo__suffix { color: var(--text-muted); font-weight: 500; } .site-header__panel { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); } .nav__list { display: flex; align-items: center; gap: clamp(0.35rem, 1.6vw, 1.1rem); } .nav__link { display: block; padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.94rem; font-weight: 550; text-decoration: none; transition: color 130ms ease, background-color 130ms ease; } .nav__link:hover { color: var(--text); background: var(--surface-2); } .site-header__actions { display: flex; align-items: center; gap: 0.5rem; } /* Icon-only header buttons */ .theme-toggle, .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text-muted); cursor: pointer; transition: color 130ms ease, background-color 130ms ease, border-color 130ms ease; } .theme-toggle:hover, .nav-toggle:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); } .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } :root[data-theme="light"] .theme-toggle__sun { display: block; } :root[data-theme="light"] .theme-toggle__moon { display: none; } .nav-toggle { display: none; } .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; } /* -------------------------------------------------------------------------- 6. Language switcher -------------------------------------------------------------------------- */ .langswitch { position: relative; } .langswitch__toggle { display: inline-flex; align-items: center; gap: 0.3rem; height: 40px; padding: 0 0.6rem; background: transparent; border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: color 130ms ease, background-color 130ms ease, border-color 130ms ease; } .langswitch__toggle:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); } .langswitch__toggle[aria-expanded="true"] { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); } .langswitch__globe { width: 19px; height: 19px; } .langswitch__current { letter-spacing: 0.04em; } .langswitch__chevron { width: 15px; height: 15px; stroke-width: 2.2; opacity: 0.75; transition: transform 160ms ease; } .langswitch__toggle[aria-expanded="true"] .langswitch__chevron { transform: rotate(180deg); } .langswitch__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; min-width: 190px; padding: 0.35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: pop 130ms ease-out; } @keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .langswitch__item { display: flex; align-items: center; gap: 0.6rem; min-height: 40px; padding: 0.4rem 0.65rem; border-radius: var(--radius-sm); color: var(--text); font-size: 0.93rem; font-weight: 550; text-decoration: none; transition: background-color 120ms ease; } .langswitch__item:hover { background: var(--surface-2); color: var(--text); } .langswitch__item[aria-current="true"] { color: var(--accent); } .langswitch__native { flex: 1; } .langswitch__code { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.07em; color: var(--text-muted); } .langswitch__check { width: 15px; height: 15px; stroke-width: 2.4; color: var(--accent); } /* Footer instance opens upwards and aligns left */ .site-footer .langswitch__menu { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; } /* -------------------------------------------------------------------------- 7. Hero -------------------------------------------------------------------------- */ .hero { position: relative; padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5.5rem); overflow: hidden; border-bottom: 1px solid var(--border); } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60rem 32rem at 78% -12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%), linear-gradient(to bottom, var(--bg-alt), var(--bg)); z-index: -2; } .hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 78%); opacity: 0.55; z-index: -1; } .hero__inner { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; } /* Grid items default to min-width:auto, which lets the terminal's pre-formatted content push the whole page wider than the viewport. Let them shrink so the terminal scrolls inside its own box instead. */ .hero__inner > * { min-width: 0; } .hero__title { font-size: var(--step-4); letter-spacing: -0.035em; margin-bottom: 1.25rem; } .hero__title-accent { background: linear-gradient(100deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7f5af0)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__lead { max-width: 60ch; font-size: var(--step-1); color: var(--text-muted); } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } /* Terminal card */ .term { border: 1px solid var(--term-border); border-radius: var(--radius-lg); background: var(--term-bg); box-shadow: var(--shadow-lg); overflow: hidden; } .term__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; background: var(--term-bar); border-bottom: 1px solid var(--term-border); } .term__dots { display: inline-flex; gap: 0.35rem; } .term__dots i { width: 10px; height: 10px; border-radius: 50%; background: #35455f; } .term__dots i:first-child { background: #d9564f; } .term__dots i:nth-child(2) { background: #d9a13f; } .term__dots i:nth-child(3) { background: #46a961; } .term__title { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.03em; color: var(--term-dim); } .term__body { margin: 0; padding: 1.15rem 1.25rem 1.4rem; font-family: var(--font-mono); font-size: clamp(0.7rem, 0.62rem + 0.34vw, 0.82rem); line-height: 1.75; color: var(--term-text); overflow-x: auto; } .term__body code { display: block; } .term__line { display: block; white-space: pre; } .term__gap { display: block; height: 0.85em; } .term__prompt { color: var(--term-prompt); font-weight: 700; } .term__prompt--cont { color: var(--term-dim); } .term__cmd { color: var(--term-text); } .term__head { color: var(--term-head); } .term__out { color: var(--term-dim); } .term__ok { color: var(--term-ok); } /* -------------------------------------------------------------------------- 8. Sections -------------------------------------------------------------------------- */ .section { padding-block: clamp(3.5rem, 7vw, 6.5rem); } .section--alt { background: var(--bg-alt); border-block: 1px solid var(--border); } .section__head { max-width: 62ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); } .section__title { font-size: var(--step-3); margin-bottom: 1rem; } .section__lead { font-size: var(--step-1); color: var(--text-muted); } .grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } /* Cards */ .card { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.5vw, 2rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); transform: translateY(-2px); } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 1.15rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent); } .card__title { font-size: var(--step-2); margin-bottom: 0.5rem; } .card__subtitle { color: var(--text-muted); margin-bottom: 1.35rem; } .card__list { display: grid; gap: 0.6rem; } .card__list li { display: grid; grid-template-columns: 16px 1fr; gap: 0.65rem; align-items: start; font-size: 0.94rem; line-height: 1.55; } .card__tick { color: var(--accent); margin-top: 0.32em; } /* -------------------------------------------------------------------------- 9. Approach: steps + values -------------------------------------------------------------------------- */ .steps { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); counter-reset: step; } .step { position: relative; padding: 1.5rem 1.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .step__num { display: block; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 0.7rem; } .step__title { font-size: 1.12rem; margin-bottom: 0.4rem; } .step__body { font-size: 0.93rem; color: var(--text-muted); } .values { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--border); } .values__title { font-size: var(--step-2); margin-bottom: 1.75rem; } .values__list { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); /* 400px keeps four items as a balanced 2x2 rather than 3 + an orphan. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); } .value { display: flex; gap: 0.95rem; align-items: flex-start; } .value__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent); } .value__title { font-size: 1.05rem; margin-bottom: 0.25rem; } .value__body { font-size: 0.93rem; color: var(--text-muted); } /* -------------------------------------------------------------------------- 10. Technology -------------------------------------------------------------------------- */ .stacks { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .stack__title { font-size: 0.82rem; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 0.85rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--border); } .stack__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tag { padding: 0.32rem 0.75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; font-size: 0.85rem; font-weight: 550; color: var(--text); } /* -------------------------------------------------------------------------- 11. FAQ -------------------------------------------------------------------------- */ .faq { display: grid; gap: 0.7rem; } .faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 150ms ease; } .faq__item[open] { border-color: var(--accent-line); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.3rem; font-size: 1.02rem; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; border-radius: var(--radius); } .faq__q::-webkit-details-marker { display: none; } .faq__q:hover { color: var(--accent); } .faq__chevron { flex: none; width: 20px; height: 20px; color: var(--text-muted); transition: transform 180ms ease; } .faq__item[open] .faq__chevron { transform: rotate(180deg); } .faq__a { padding: 0 1.3rem 1.25rem; color: var(--text-muted); max-width: 72ch; } /* -------------------------------------------------------------------------- 12. Contact -------------------------------------------------------------------------- */ .section--contact { padding-block: clamp(3.5rem, 7vw, 6rem); } .contact { display: grid; gap: clamp(2.25rem, 5vw, 4rem); align-items: start; padding: clamp(1.75rem, 4vw, 3.25rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .contact__copy .btn { margin-top: 1.9rem; } .contact__details { display: grid; gap: 1.6rem; } .contact__item { display: flex; gap: 0.95rem; align-items: flex-start; } .contact__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent); } .contact__label { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.3rem; } .contact__item p, .contact__address { font-size: 0.97rem; } .contact__address { line-height: 1.6; } .contact__item a { font-weight: 550; } /* -------------------------------------------------------------------------- 13. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); } .site-footer__inner { display: grid; gap: clamp(2.25rem, 5vw, 4rem); padding-block: clamp(2.75rem, 5vw, 4rem); } .site-footer__brand .logo { margin-right: 0; } .site-footer__tagline { max-width: 34ch; margin-block: 1rem 1.5rem; font-size: 0.93rem; color: var(--text-muted); } .site-footer__nav { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); } .site-footer__heading { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.95rem; } .site-footer__nav ul { display: grid; gap: 0.55rem; } .site-footer__nav a { color: var(--text); font-size: 0.93rem; text-decoration: none; } .site-footer__nav a:hover { color: var(--accent); text-decoration: underline; } .site-footer__address { margin-top: 0.9rem; font-size: 0.9rem; line-height: 1.65; color: var(--text-muted); } .site-footer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; padding-block: 1.35rem; border-top: 1px solid var(--border); } .site-footer__legal { font-size: 0.85rem; color: var(--text-muted); } .site-footer__top { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; font-size: 0.85rem; font-weight: 550; text-decoration: none; } .site-footer__top:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 14. Responsive -------------------------------------------------------------------------- */ @media (min-width: 62rem) { .hero__inner { grid-template-columns: 1.15fr 0.85fr; } .contact { grid-template-columns: 1fr 1fr; } .site-footer__inner { grid-template-columns: minmax(240px, 1fr) 2fr; } } @media (max-width: 61.999rem) { .hero__visual { max-width: 640px; } } /* Collapsed navigation */ @media (max-width: 56.249rem) { .nav-toggle { display: inline-flex; order: 3; } /* Hidden via display so it is removed from the accessibility tree too. The header carries the open state; no `hidden` attribute is involved. */ .site-header__panel { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.35rem; padding: 0.85rem clamp(1.15rem, 4vw, 2.5rem) 1.35rem; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); } .site-header[data-nav-open="true"] .site-header__panel { display: flex; } .nav__list { flex-direction: column; align-items: stretch; gap: 0.1rem; } .nav__link { padding: 0.7rem 0.65rem; font-size: 1rem; } .site-header__actions { margin-top: 0.6rem; padding-top: 0.9rem; border-top: 1px solid var(--border); } .site-header__actions .btn { margin-left: auto; } .site-header .langswitch__menu { left: 0; right: auto; } } @media (min-width: 56.25rem) { /* Always laid out on desktop, whatever the mobile toggle last set. */ .site-header__panel { display: flex; } } /* -------------------------------------------------------------------------- 15. Progressive enhancement & motion -------------------------------------------------------------------------- */ /* Without JavaScript the toggles cannot work, so show the content instead. */ html:not(.js) .nav-toggle, html:not(.js) .theme-toggle, html:not(.js) .langswitch__toggle { display: none; } html:not(.js) .site-header__panel { display: flex; } html:not(.js) .langswitch__menu[hidden] { display: flex; position: static; min-width: 0; padding: 0; gap: 0.15rem; background: none; border: 0; box-shadow: none; animation: none; } html:not(.js) .langswitch__native { display: none; } html:not(.js) .langswitch__item { min-height: 34px; padding: 0.25rem 0.5rem; } @media (max-width: 56.249rem) { html:not(.js) .site-header__inner { flex-wrap: wrap; padding-bottom: 0.75rem; } html:not(.js) .site-header__panel { position: static; flex-direction: row; flex-wrap: wrap; padding: 0; border: 0; box-shadow: none; background: none; } html:not(.js) .nav__list { flex-direction: row; flex-wrap: wrap; } html:not(.js) .site-header__actions { margin: 0; padding: 0; border: 0; } } /* Scroll-in reveal, opt-in via JS and disabled for reduced motion */ html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 520ms ease-out, transform 520ms ease-out; } html.js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.js .reveal { opacity: 1; transform: none; } } @media (forced-colors: active) { .card, .step, .faq__item, .contact, .term, .langswitch__menu { border: 1px solid CanvasText; } .btn { border: 1px solid CanvasText; } .icon { forced-color-adjust: auto; } } /* -------------------------------------------------------------------------- 16. Print -------------------------------------------------------------------------- */ @media print { .site-header, .hero__visual, .skip-link, .site-footer__top, .theme-toggle, .langswitch, .nav-toggle { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .section, .hero { padding-block: 1.2rem; break-inside: avoid; } .card, .step, .faq__item { border: 1px solid #999; box-shadow: none; break-inside: avoid; } .faq__a { display: block !important; } a { color: #000; } .contact__item a[href^="mailto"]::after { content: ""; } }