/* * Jonaz Thern — shared theme * Design tokens, base typography, nav, footer, buttons. * Link on every page: */ :root { /* The mark in the nav, and the gap between it and the name. The social row lines up under the name, so it has to derive from both — set the size here and nothing else needs touching. */ --logo-size: 63px; --logo-gap: 0.7rem; --white: #ffffff; /* White text that sits on a dark surface. Separate from --white, which is a surface and turns dark in dark mode. */ --on-dark: #ffffff; --off-white: #f6f9fc; --soft: #eef2f7; --line: #d9e2ec; --ink: #0a0d12; --ink-2: #0b1a2c; --slate: #3d4a5c; --mute: #6b7a8c; --blue: #1e6fb7; --blue-2: #2e8be0; --blue-soft: #e0eefa; --accent: #0fd4a0; --warn: #ff9340; --danger: #e23a3a; } /* ── Dark mode ────────────────────────────────────────────────────────────── Stays inside the brand's blue rather than going grey: the ground is the deep navy the social kit already uses, cards sit a step above it, and the blues lighten so links still read as links. Applied by [data-theme="dark"] on the root element, set before paint by a snippet in . */ :root[data-theme="dark"] { --white: #102437; /* cards, nav, panels — a step above the ground */ --off-white: #0c1c2c; --soft: #16304a; --line: #22405f; --ink: #e6f0fa; --ink-2: #ffffff; --slate: #a8c1da; --mute: #7d97b2; --blue: #5cb3f5; --blue-2: #8ccdff; --blue-soft: #14304c; } :root[data-theme="dark"] body { background: #071320; } /* The nav keeps its translucency, in the card tone. */ :root[data-theme="dark"] nav.main-nav { background: rgba(16,36,55,0.94); } /* The mark is drawn in the dark brand blue and sinks into a dark nav — the lighter cut of the same artwork exists for exactly this. */ :root[data-theme="dark"] .brand-logo { background-image: url(jt-original-light.png); } /* Panels that were painted white by hand rather than by token. */ :root[data-theme="dark"] .hero-banner-frame, :root[data-theme="dark"] .hero-news, :root[data-theme="dark"] .status-panel { background: var(--white); } /* --ink-2 does double duty: dark surface in 14 places, heading colour in 29. Dark mode needs it white for the headings, so the surfaces get their own tone here instead of turning white with it. */ :root[data-theme="dark"] .top-strip, :root[data-theme="dark"] .hero-float, :root[data-theme="dark"] #method, :root[data-theme="dark"] .about-card { background: #0d2135; } :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .thern-add-btn { background: var(--blue); color: #05121f; } :root[data-theme="dark"] .hamburger span { background: var(--ink); } /* Three more places where a surface token was used as a text colour. They read fine on white; in dark mode the token becomes a dark surface and the text disappears into the thing it sits on. */ :root[data-theme="dark"] .top-strip, :root[data-theme="dark"] #method { color: var(--slate); } :root[data-theme="dark"] .off-dot { color: var(--mute); } /* The hero image is a picture — dark mode cannot recolour it, so it is swapped. */ :root[data-theme="dark"] .hero-banner-frame img { content: url(/banner-dark.jpg); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--white); color: var(--ink); font-family: 'Manrope', sans-serif; font-weight: 400; line-height: 1.65; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { color: var(--ink-2); letter-spacing: -0.02em; line-height: 1.15; } h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; } h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 800; } h3 { font-size: 1.25rem; font-weight: 700; } p { color: var(--slate); } strong { color: var(--ink-2); font-weight: 600; } em { color: var(--blue); font-style: normal; } .kicker { display: inline-flex; align-items: center; gap: 0.7rem; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.18em; color: var(--blue); text-transform: uppercase; font-weight: 600; margin-bottom: 0.8rem; } .kicker::before { content: '//'; color: var(--blue-2); } /* ── Nav mount (placeholder reserves space pre-JS to prevent CLS) ── */ #thern-nav-mount { min-height: 110px; } @media (max-width: 1100px) { #thern-nav-mount { min-height: 100px; } } /* ── Top strip ────────────────────────────── */ .top-strip { background: var(--ink-2); color: var(--off-white); padding: 0.55rem 1rem; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; } .top-strip span { color: var(--accent); margin: 0 0.4rem; } .top-strip em { color: var(--blue-2); font-style: normal; } /* ── Nav ──────────────────────────────────── */ nav.main-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.95); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 2rem; gap: 1.5rem; } .brand { display: flex; align-items: center; gap: var(--logo-gap); } .brand-logo { width: var(--logo-size); height: var(--logo-size); background: url(jt-original.png) center/contain no-repeat; flex-shrink: 0; } .brand-logo::before, .brand-logo::after { content: none; } .brand-txt strong { display: block; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.015em; color: var(--ink-2); line-height: 1.1; } .brand-txt span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.18em; color: var(--mute); text-transform: uppercase; margin-top: 0.2rem; } .nav-links { display: flex; gap: 1.8rem; list-style: none; align-items: center; } .nav-links > li { position: relative; } .nav-links a { font-size: 0.88rem; font-weight: 500; color: var(--slate); transition: color 0.2s; display: inline-flex; align-items: center; gap: 0.35rem; } .nav-links a:hover { color: var(--blue); } .has-dropdown > a::after { content: ''; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); opacity: 0.5; transition: transform 0.2s; } .has-dropdown:hover > a::after { transform: rotate(225deg) translateY(-1px); } .nav-dropdown { position: absolute; top: calc(100% + 0.6rem); left: 50%; transform: translateX(-50%) translateY(-6px); background: var(--white); border: 1px solid var(--line); border-radius: 10px; min-width: 200px; list-style: none; padding: 0.4rem; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 200; box-shadow: 0 16px 40px -10px rgba(11,26,44,0.18); } /* Hover-bridge: extends the dropdown's hit area upward (and slightly sideways) so diagonal mouse approaches from the parent nav item don't drop :hover. */ .nav-dropdown::before { content: ''; position: absolute; top: -0.9rem; left: -0.6rem; right: -0.6rem; height: 0.9rem; } .nav-links li:hover > .nav-dropdown, .nav-links li:focus-within > .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown li { position: relative; } .nav-dropdown li a { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.9rem; border-radius: 6px; font-size: 0.85rem; color: var(--slate); white-space: nowrap; transition: background 0.15s, color 0.15s; } .nav-dropdown li a:hover { background: var(--off-white); color: var(--blue); } .nav-dropdown li a svg { flex-shrink: 0; color: var(--blue); } .has-sub-dropdown > a::after { content: '›'; margin-left: auto; color: var(--mute); font-size: 1rem; transform: none; border: none; opacity: 0.6; } .nav-subdropdown { position: absolute; top: -0.4rem; left: calc(100% + 0.3rem); background: var(--white); border: 1px solid var(--line); border-radius: 10px; min-width: 180px; list-style: none; padding: 0.4rem; opacity: 0; pointer-events: none; transform: translateX(-6px); transition: opacity 0.2s, transform 0.2s; box-shadow: 0 16px 40px -10px rgba(11,26,44,0.18); } /* Hover-bridge for sub-dropdown: covers the 0.3rem horizontal gap and extends vertically so diagonal entry from the parent row keeps :hover alive. */ .nav-subdropdown::before { content: ''; position: absolute; top: -0.4rem; bottom: -0.4rem; left: -0.8rem; width: 0.8rem; } .has-sub-dropdown:hover > .nav-subdropdown, .has-sub-dropdown:focus-within > .nav-subdropdown { opacity: 1; pointer-events: auto; transform: translateX(0); } /* Grace period: when :hover is lost, keep the dropdown visible AND interactive for ~120ms so a flicked-off cursor can find its way back. Both opacity and pointer-events are delayed when closing, instant when opening. */ .nav-dropdown, .nav-subdropdown { transition: opacity 0.2s ease 0.12s, transform 0.2s ease 0.12s, pointer-events 0s linear 0.12s; } .nav-links li:hover > .nav-dropdown, .nav-links li:focus-within > .nav-dropdown, .has-sub-dropdown:hover > .nav-subdropdown, .has-sub-dropdown:focus-within > .nav-subdropdown { transition: opacity 0.15s ease 0s, transform 0.15s ease 0s, pointer-events 0s linear 0s; } .brand-block { display: flex; flex-direction: column; gap: 0.125rem; } .nav-socials { display: flex; gap: 0.2rem; padding-left: calc(var(--logo-size) + var(--logo-gap)); } .nav-socials a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--slate); background: transparent; transition: background 0.2s, color 0.2s; } .nav-socials a:hover { background: var(--blue-soft); color: var(--blue); } .nav-socials a svg { width: 17px; height: 17px; } .theme-toggle { background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 0.35rem; margin-left: 0.15rem; cursor: pointer; line-height: 0; color: var(--slate); transition: color 0.15s, background 0.15s; } .theme-toggle:hover { color: var(--blue); background: var(--soft); } /* One button, two glyphs: show the state you would switch to. */ .theme-toggle .ico-sun { display: none; } :root[data-theme="dark"] .theme-toggle .ico-moon { display: none; } :root[data-theme="dark"] .theme-toggle .ico-sun { display: inline; } .lang-switcher { display: flex; gap: 0.3rem; } .lang-btn { background: transparent; border: 1px solid transparent; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; opacity: 0.4; font-size: 1rem; line-height: 1; transition: opacity 0.2s, border-color 0.2s; } .lang-btn:hover { opacity: 0.75; } .lang-btn.active { opacity: 1; border-color: var(--line); } .nav-register { padding: 0.55rem 1rem; background: var(--blue-soft); color: var(--blue); border: none; border-radius: 999px; font-family: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: background 0.2s, color 0.2s; } .nav-register:hover { background: var(--blue); color: var(--on-dark); } .nav-right { display: flex; align-items: center; gap: 0.9rem; } .hamburger { display: none; background: none; border: none; width: 38px; height: 38px; padding: 0; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--ink-2); transition: transform 0.3s, opacity 0.3s; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } #mobile-menu { display: none; position: fixed; inset: 0; z-index: 99; background: var(--white); padding: 6rem 2rem 2rem; flex-direction: column; gap: 1.4rem; overflow-y: auto; } #mobile-menu.open { display: flex; } #mobile-menu a { font-size: 1.5rem; font-weight: 600; color: var(--ink-2); padding: 0.6rem 0; border-bottom: 1px solid var(--line); } /* ── Buttons ──────────────────────────────── */ .btn-primary { padding: 1rem 1.7rem; background: var(--ink-2); color: var(--on-dark); border: none; border-radius: 10px; font-family: inherit; font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.6rem; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; cursor: pointer; } .btn-primary:hover { background: var(--blue); transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(30,111,183,0.5); } .btn-ghost { padding: 1rem 1.7rem; background: var(--white); color: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-weight: 600; font-size: 0.95rem; transition: border-color 0.2s, color 0.2s; display: inline-flex; align-items: center; gap: 0.6rem; } .btn-ghost:hover { border-color: var(--blue); color: var(--blue); } /* ── Footer ───────────────────────────────── */ footer.main-footer { background: var(--ink); color: rgba(255,255,255,0.7); padding: 4rem 2rem 2rem; } .foot-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.1); } .foot-brand .brand-txt strong { color: var(--on-dark); } .foot-brand p { margin-top: 1rem; max-width: 280px; font-size: 0.9rem; color: rgba(255,255,255,0.7); } .foot-col h5 { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.18em; color: var(--blue-2); margin-bottom: 1.2rem; text-transform: uppercase; font-weight: 700; } .foot-col a, .foot-col li { display: block; padding: 0.3rem 0; font-size: 0.9rem; color: rgba(255,255,255,0.7); list-style: none; } .foot-col a { transition: color 0.2s; } .foot-col a:hover { color: var(--blue-2); } /* ── Footer newsletter band ───────────────── */ .foot-news { max-width: 1280px; margin: 0 auto 3rem; display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; padding: 2.2rem 2.4rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; } .foot-news-kicker { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-2); font-weight: 700; margin-bottom: 0.7rem; } .foot-news h4 { font-size: 1.35rem; line-height: 1.2; color: var(--on-dark); margin: 0 0 0.5rem; font-weight: 700; letter-spacing: -0.01em; } .foot-news p { font-size: 0.88rem; color: rgba(255,255,255,0.62); line-height: 1.6; margin: 0; } .foot-news p a { color: var(--blue-2); text-decoration: none; border-bottom: 1px solid rgba(46,139,224,0.4); } .foot-news-form { display: flex; gap: 0.6rem; flex-wrap: wrap; } .foot-news-form input[type="email"] { flex: 1; min-width: 200px; padding: 0.85rem 1rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; color: var(--on-dark); font-family: inherit; font-size: 0.9rem; transition: border-color 0.18s, background 0.18s; } .foot-news-form input[type="email"]::placeholder { color: rgba(255,255,255,0.38); } .foot-news-form input[type="email"]:focus { outline: none; border-color: var(--blue-2); background: rgba(255,255,255,0.09); } .foot-news-form button { padding: 0.85rem 1.6rem; border: 0; border-radius: 10px; background: linear-gradient(120deg, var(--blue) 0%, var(--blue-2) 100%); color: var(--on-dark); font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s; } .foot-news-form button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(46,139,224,0.6); } .foot-news-form button:disabled { opacity: 0.6; cursor: default; } /* Honeypot — off-screen rather than display:none, which some bots skip. */ .foot-news-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .foot-news-msg { flex-basis: 100%; font-size: 0.82rem; line-height: 1.5; margin: 0.2rem 0 0; min-height: 1.1em; } .foot-news-msg.ok { color: var(--accent); } .foot-news-msg.err { color: #ff9d9d; } .foot-news-legal { flex-basis: 100%; margin: 0.1rem 0 0; font-size: 0.72rem; color: rgba(255,255,255,0.4); line-height: 1.5; } .foot-bottom { max-width: 1280px; margin: 1.8rem auto 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: rgba(255,255,255,0.45); flex-wrap: wrap; gap: 1rem; } .foot-bottom em { font-style: normal; color: var(--blue-2); } /* ── Scroll reveal ────────────────────────── */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(.2,.7,.3,1), transform 0.6s cubic-bezier(.2,.7,.3,1); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: 0.06s; } .reveal.d2 { transition-delay: 0.12s; } .reveal.d3 { transition-delay: 0.18s; } .reveal.d4 { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ── Side status widget ───────────────────── */ .side-status { position: fixed; bottom: 1rem; left: 1rem; z-index: 80; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); font-weight: 500; box-shadow: 0 6px 18px -6px rgba(11,26,44,0.15); transition: transform 0.15s, box-shadow 0.2s; } .side-status:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -6px rgba(11,26,44,0.25); } .side-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); box-shadow: 0 0 6px var(--mute); transition: background 0.3s, box-shadow 0.3s; } .side-status-dot.ok { background: var(--accent); box-shadow: 0 0 8px rgba(15,212,160,0.7); } .side-status-dot.warn { background: var(--warn); box-shadow: 0 0 8px rgba(255,147,64,0.7); } .side-status-dot.down { background: var(--danger); box-shadow: 0 0 8px rgba(226,58,58,0.7); } .side-status-text.ok { color: var(--accent); } .side-status-text.warn { color: var(--warn); } .side-status-text.down { color: var(--danger); } /* ── Tax / VAT note (used next to all prices) ── */ .vat-note { display: inline-block; margin-left: 0.4rem; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.08em; color: var(--mute); font-weight: 500; text-transform: uppercase; vertical-align: middle; } .vat-note-block { display: block; margin-top: 0.15rem; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.08em; color: var(--mute); font-weight: 500; text-transform: uppercase; } /* ── Status side panel (slide-in from left) ── */ .status-overlay { position: fixed; inset: 0; z-index: 199; background: rgba(11,26,44,0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s; } .status-overlay.open { opacity: 1; pointer-events: auto; } .status-panel { position: fixed; left: 0; top: 0; bottom: 0; z-index: 200; width: 100%; max-width: 400px; background: var(--white); color: var(--ink); padding: 2rem; transform: translateX(-100%); transition: transform 0.25s cubic-bezier(.2,.7,.3,1), box-shadow 0.25s; overflow-y: auto; box-shadow: none; visibility: hidden; } .status-panel.open { transform: translateX(0); box-shadow: 20px 0 60px -10px rgba(11,26,44,0.3); visibility: visible; } .status-panel-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; } .status-panel-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ink-2); } .status-panel-close { background: none; border: none; cursor: pointer; font-size: 1.6rem; color: var(--mute); line-height: 1; padding: 0.2rem 0.6rem; border-radius: 6px; transition: background 0.2s, color 0.2s; } .status-panel-close:hover { background: var(--soft); color: var(--ink-2); } .sp-overall { padding: 1rem 1.2rem; background: var(--off-white); border-radius: 10px; margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.8rem; } .sp-overall-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mute); box-shadow: 0 0 8px var(--mute); } .sp-overall-dot.ok { background: var(--accent); box-shadow: 0 0 10px var(--accent); } .sp-overall-dot.warn { background: var(--warn); box-shadow: 0 0 10px var(--warn); } .sp-overall-dot.down { background: var(--danger); box-shadow: 0 0 10px var(--danger); } .sp-overall-text { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; } .sp-servers { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; } .sp-row { padding: 0.85rem 1rem; background: var(--off-white); border: 1px solid var(--line); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; } .sp-row-name { font-weight: 500; color: var(--ink-2); } .sp-row-status { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); } .sp-row-status.online { color: var(--accent); } .sp-row-status.degraded { color: var(--warn); } .sp-row-status.offline { color: var(--danger); } .sp-row-status.soon { color: var(--mute); } .sp-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--blue); font-weight: 600; font-size: 0.88rem; border-bottom: 1px solid var(--blue); padding-bottom: 2px; } /* ── Back to top ──────────────────────────── */ #back-to-top { position: fixed; bottom: 1rem; right: 1rem; z-index: 80; width: 46px; height: 46px; border-radius: 50%; background: var(--ink-2); color: var(--on-dark); border: none; cursor: pointer; display: grid; place-items: center; opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s, transform 0.25s, background 0.2s, visibility 0s linear 0.25s; box-shadow: 0 8px 20px -6px rgba(11,26,44,0.35); } #back-to-top.show { opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(0); transition: opacity 0.25s, transform 0.25s, background 0.2s, visibility 0s; } #back-to-top:hover { background: var(--blue); } /* ── FAQ accordion ────────────────────────── */ .faq-list { display: grid; gap: 0.6rem; max-width: 820px; margin: 0 auto; } .faq-item { border: 1px solid var(--line); border-radius: 14px; background: var(--white); transition: border-color .2s, box-shadow .2s; } .faq-item:hover { border-color: var(--blue-soft); } .faq-item[open] { border-color: var(--blue-2); box-shadow: 0 4px 24px -12px rgba(30, 111, 183, 0.18); } .faq-item summary { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); padding: 1.2rem 1.6rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-weight: 300; font-size: 1.6rem; line-height: 1; color: var(--blue); transition: transform .2s ease; flex-shrink: 0; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item .faq-answer { padding: 0 1.6rem 1.4rem; color: var(--slate); line-height: 1.65; font-size: 0.98rem; } .faq-item .faq-answer p + p { margin-top: 0.8rem; } .faq-item .faq-answer a { color: var(--blue); text-decoration: none; } .faq-item .faq-answer a:hover { text-decoration: underline; } /* ── Responsive ───────────────────────────── */ @media (max-width: 1100px) { .nav-links { display: none; } .hamburger { display: flex; } } @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-news { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.8rem; } } @media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; gap: 2rem; } .foot-bottom { flex-direction: column; text-align: center; } .faq-item summary { font-size: 1rem; padding: 1rem 1.2rem; } .faq-item .faq-answer { padding: 0 1.2rem 1.2rem; } }