/* eu-alt: navy sky, gold stars, glass surfaces. Every page tints itself with the brand colour of the service it is about (--brand on ), every card with its own (--b). */ :root { --navy-950: #040f27; --navy-900: #071a3f; --navy-800: #0b2a6b; --navy-700: #123c8f; --navy-600: #1a4fb0; --gold: #ffcc00; --gold-2: #ffe066; --gold-soft: rgba(255, 204, 0, 0.14); --ink: #f4f6fb; --ink-2: rgba(244, 246, 251, 0.78); --ink-3: rgba(244, 246, 251, 0.6); --ink-4: rgba(244, 246, 251, 0.4); --line: rgba(244, 246, 251, 0.1); --line-2: rgba(244, 246, 251, 0.18); --glass: rgba(255, 255, 255, 0.05); --glass-2: rgba(255, 255, 255, 0.09); --brand: #ffcc00; --brand-rgb: 255, 204, 0; --brand-dark: #8a6e00; --font-display: 'Bricolage Grotesque', 'Bricolage Fallback', 'Hanken Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', 'Hanken Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; --radius: 12px; /* every panel, card, button, input and logo tile */ --radius-xs: 6px; /* pills, kbd, flags */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --shadow: 0 10px 40px rgba(2, 8, 30, 0.45); --shell: 1180px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--navy-900); min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: var(--gold-2); text-decoration: none; } a:hover { color: #fff; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; margin: 0; } h1 { font-size: clamp(2.2rem, 6vw, 4rem); } h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); } h3 { font-size: 1.15rem; } p { margin: 0; } img { max-width: 100%; height: auto; display: inline-block; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: rgba(255, 204, 0, 0.35); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: var(--navy-900); padding: 8px 14px; border-radius: var(--radius-xs); font-weight: 700; } .skip:focus { left: 8px; } .shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; } .narrow { max-width: 780px; } .muted { color: var(--ink-3); } .center { text-align: center; align-items: center; } /* ---- sky ---- */ .sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(1200px 700px at 15% -10%, var(--navy-700) 0%, transparent 60%), radial-gradient(900px 600px at 110% 110%, var(--navy-600) 0%, transparent 55%), linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 100%); } .sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; } /* The glows are plain radial gradients, drawn once: no blur filter and no endless transform animation, both of which kept the compositor busy for as long as a tab stayed open. */ .glow { position: absolute; border-radius: 50%; opacity: 0.6; pointer-events: none; } .g1 { width: 90vw; height: 90vw; max-width: 1100px; max-height: 1100px; left: -30vw; top: -40vw; background: radial-gradient(circle, rgba(var(--brand-rgb), 0.42) 0%, rgba(var(--brand-rgb), 0.12) 35%, transparent 65%); } .g2 { width: 80vw; height: 80vw; max-width: 1000px; max-height: 1000px; right: -35vw; top: 15vh; background: radial-gradient(circle, rgba(26, 79, 176, 0.6) 0%, rgba(26, 79, 176, 0.2) 35%, transparent 65%); } .g3 { width: 70vw; height: 70vw; max-width: 800px; max-height: 800px; left: 25vw; bottom: -40vw; background: radial-gradient(circle, rgba(255, 204, 0, 0.14) 0%, transparent 62%); } /* ---- glass ---- */ .glass { position: relative; background: var(--glass); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-radius: var(--radius); isolation: isolate; box-shadow: var(--shadow); } .glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1; background: conic-gradient(from 135deg at 50% 50%, rgba(255,255,255,0.28) 0deg, rgba(255,255,255,0.08) 60deg, rgba(255,255,255,0.03) 120deg, rgba(255,255,255,0.03) 240deg, rgba(255,255,255,0.08) 300deg, rgba(255,255,255,0.28) 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; border-radius: var(--radius); font-weight: 700; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: box-shadow .25s var(--ease), background .2s; } .btn-gold { background: var(--gold); color: var(--navy-900); box-shadow: 0 8px 24px rgba(255, 204, 0, 0.25); } .btn-gold:hover { background: var(--gold-2); color: var(--navy-900); box-shadow: 0 12px 32px rgba(255, 204, 0, 0.35); } .btn-brand { background: var(--brand-dark); color: #fff; box-shadow: 0 8px 28px rgba(var(--brand-rgb), 0.3); } .btn-brand:hover { color: #fff; filter: brightness(1.12); } .btn-brand .host { font-weight: 500; opacity: .85; } .btn-ghost { background: var(--glass-2); color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { color: #fff; background: rgba(255,255,255,.14); } .btn-lg { padding: 16px 30px; font-size: 1.05rem; } /* ---- nav ---- */ .nav-wrap { position: sticky; top: 0; z-index: 50; padding: 14px 16px 0; pointer-events: none; } .nav { pointer-events: auto; max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 22px; border-radius: var(--radius); background: rgba(7, 26, 63, 0.6); } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; } .brand:hover { color: #fff; } .brand-ring { width: 34px; height: 34px; border-radius: 0; color: var(--gold); display: inline-block; } .brand-ring .ring { width: 100%; height: 100%; animation: turn 60s linear infinite; } .brand-name .tld { color: var(--gold); } .nav-links { display: flex; align-items: center; gap: 6px; margin-left: auto; } .nav-links > a { padding: 10px 16px; border-radius: var(--radius); color: var(--ink-2); font-weight: 600; font-size: .95rem; letter-spacing: .01em; transition: background .2s, color .2s; } .nav-links > a:hover, .nav-links > a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.08); } .nav-links > a.nav-cta { color: var(--navy-900); background: var(--gold); margin-left: 10px; padding: 8px 16px; font-size: .9rem; } .nav-links > a.nav-cta:hover { background: var(--gold-2); } .nav-tools { display: flex; align-items: center; gap: 8px; margin-left: 14px; padding-left: 18px; border-left: 1px solid var(--line-2); } .nav-search { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink-2); cursor: pointer; font-weight: 600; font-size: .9rem; } .nav-search:hover { color: #fff; border-color: var(--line-2); background: rgba(255,255,255,.08); } .nav-search .ic { width: 18px; height: 18px; } .nav-search kbd { font-family: inherit; font-size: .7rem; color: var(--ink-4); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 1px 6px; } .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; } .lang { position: relative; } .lang > button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink-2); cursor: pointer; text-transform: uppercase; font-weight: 700; font-size: .8rem; letter-spacing: .06em; } .lang > button i { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; } .lang ul { position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px; margin: 0; padding: 6px; list-style: none; border-radius: var(--radius); background: rgba(9, 28, 66, 0.96); border: 1px solid var(--line-2); box-shadow: var(--shadow); display: none; } .lang.open ul { display: block; } .lang ul a { display: block; padding: 9px 12px; border-radius: var(--radius-xs); color: var(--ink-2); font-weight: 600; } .lang ul a:hover, .lang ul a[aria-current="true"] { background: rgba(255,255,255,.08); color: #fff; } .lang ul a[aria-current="true"]::after { content: ' ✓'; color: var(--gold); } .nav-toggle { display: none; margin-left: auto; width: 44px; height: 40px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.04); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .nav-toggle span:not(.sr) { width: 18px; height: 2px; background: var(--ink); border-radius: var(--radius-xs); transition: transform .25s, opacity .2s; } /* ---- hero ---- */ .hero { padding: clamp(56px, 10vw, 120px) 24px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-ring { position: relative; width: clamp(110px, 18vw, 170px); height: clamp(110px, 18vw, 170px); color: var(--gold); margin-bottom: 28px; } .hero-ring::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 204, 0, 0.22), transparent 62%); z-index: -1; } .hero-ring.small { width: 84px; height: 84px; margin-bottom: 18px; } .hero-ring .ring { width: 100%; height: 100%; animation: turn 90s linear infinite; } @keyframes turn { to { transform: rotate(360deg); } } .eyebrow { margin: 0 0 14px; font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .eyebrow a { color: var(--gold); } .hero h1 { font-size: clamp(2.6rem, 7.5vw, 5.2rem); max-width: 16ch; } .grad { background: linear-gradient(92deg, var(--gold) 0%, var(--gold-2) 45%, #fff 110%); -webkit-background-clip: text; background-clip: text; color: transparent; } .lead { margin: 22px auto 0; max-width: 42rem; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--ink-2); } .search-big { display: flex; align-items: center; gap: 10px; width: min(100%, 720px); margin: 34px auto 0; padding: 8px 8px 8px 20px; border-radius: var(--radius); background: rgba(255,255,255,.07); } .search-big .ic { color: var(--gold); width: 22px; height: 22px; } .search-big input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 1.05rem; padding: 10px 0; color: var(--ink); } .search-big input::placeholder { color: var(--ink-4); } .search-big:focus-within { box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.35), var(--shadow); } .hint { margin-top: 12px; font-size: .9rem; color: var(--ink-4); } .stats { display: flex; gap: clamp(20px, 5vw, 56px); list-style: none; margin: 40px 0 0; padding: 0; } .stats li { display: flex; flex-direction: column; align-items: center; } .stats b { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; color: #fff; letter-spacing: -0.03em; } .stats span { color: var(--ink-3); font-size: .9rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; } /* ---- marquee ---- */ .marquee { overflow: hidden; margin: 40px 0 8px; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 120s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-item { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; font-size: .9rem; white-space: nowrap; } .marquee-item img { width: 30px; height: 30px; border-radius: var(--radius-xs); background: #fff; padding: 3px; object-fit: contain; } @keyframes marquee { to { transform: translateX(-50%); } } /* ---- sections ---- */ section.shell { margin-top: clamp(48px, 8vw, 96px); } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; } .sec-head .sub, .sub { margin-top: 8px; color: var(--ink-3); font-size: 1.05rem; max-width: 60ch; } .more { font-weight: 700; white-space: nowrap; } .sub-title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 44px 0 16px; } .sub-title .count { color: var(--gold); font-size: .8em; margin-left: 6px; } .sub-title a { color: inherit; } /* ---- picks ---- */ .picks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .pickcard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink); overflow: hidden; transition: border-color .3s, box-shadow .4s var(--ease); box-shadow: 0 10px 40px rgba(2, 8, 30, 0.35); } .pickcard:hover { color: var(--ink); border-color: rgba(var(--b-rgb), 0.6); box-shadow: 0 24px 60px rgba(var(--b-rgb), 0.25), 0 10px 40px rgba(2, 8, 30, 0.35); } .pickcard-glow { position: absolute; inset: -40% -20% auto; height: 70%; background: radial-gradient(ellipse at 50% 0%, rgba(var(--b-rgb), 0.55), transparent 65%); pointer-events: none; transition: opacity .4s; opacity: .7; } .pickcard:hover .pickcard-glow { opacity: 1; } .pickcard-head { display: flex; align-items: center; gap: 14px; position: relative; } .pickcard-head h3 { font-size: 1.45rem; } .pickcard-cat { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: rgba(var(--b-rgb), 1); filter: brightness(1.4); } .pickcard-tag { position: relative; font-weight: 600; color: #fff; } .pickcard-desc { position: relative; color: var(--ink-3); font-size: .95rem; flex: 1; } .pickcard-foot { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: var(--ink-3); padding-top: 12px; border-top: 1px solid var(--line); } .replaces s { color: var(--ink-2); text-decoration-color: #ff6b6b; text-decoration-thickness: 2px; } /* ---- logos & pills ---- */ .logo { width: 48px; height: 48px; border-radius: var(--radius); background: #fff; padding: 6px; object-fit: contain; flex: none; box-shadow: 0 4px 14px rgba(0,0,0,.25); } .logo.logo-dark { background: var(--navy-800); } img.blk, .logo.logo-block { padding: 0; background: transparent; object-fit: cover; } .logo-initial { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--navy-900); background: linear-gradient(135deg, #fff, rgba(var(--b-rgb, 255,204,0), 0.65)); } .pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius); font-size: .74rem; font-weight: 700; background: rgba(255,255,255,.08); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; } .pill-green { color: #8ef0a8; } .pill-region { color: var(--gold); border-color: rgba(255,204,0,.35); } .flag { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--ink-2); font-weight: 600; } .flag img { width: 18px; height: 13px; border-radius: var(--radius-xs); box-shadow: 0 0 0 1px rgba(255,255,255,.15); } .flag-oss { color: var(--ink-3); } .card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .chip-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 90, 90, 0.18); color: #ff8080; font-size: .7rem; font-weight: 800; margin-right: 8px; flex: none; } /* ---- chips ---- */ .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: inline-flex; align-items: center; padding: 10px 14px 10px 10px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--ink); font-weight: 700; transition: background .2s, border-color .2s; } .chip:hover { background: rgba(255,255,255,.1); border-color: var(--line-2); color: #fff; } .chip-n { margin-left: 8px; padding: 1px 7px; border-radius: var(--radius); background: var(--gold-soft); color: var(--gold); font-size: .75rem; } /* ---- category tiles ---- */ .group { margin-top: 28px; } .group-name { font-size: 1.05rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; margin-bottom: 14px; } .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; } .tile { position: relative; display: grid; grid-template-columns: 1fr; gap: 6px; padding: 18px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink); transition: background .2s, border-color .2s; overflow: hidden; } .tile::after { content: ''; position: absolute; inset: auto -30% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,204,0,.22), transparent 65%); opacity: 0; transition: opacity .3s; } .tile:hover { background: rgba(255,255,255,.08); border-color: rgba(255,204,0,.35); color: #fff; } .tile:hover::after { opacity: 1; } .tile .ic { width: 28px; height: 28px; color: var(--gold); margin-bottom: 4px; } .tile-name { font-weight: 700; font-size: 1rem; line-height: 1.25; } .tile-count { font-size: .8rem; color: var(--ink-3); } .tile-logos { display: flex; gap: 4px; margin-top: 6px; } .tile-logos img { width: 22px; height: 22px; border-radius: var(--radius-xs); background: #fff; padding: 2px; object-fit: contain; } /* ---- flags ---- */ .flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .flags.big { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .flagcard { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink); transition: border-color .2s; } .flagcard:hover { border-color: var(--line-2); color: #fff; } .flagcard img { border-radius: var(--radius-xs); box-shadow: 0 2px 8px rgba(0,0,0,.35); margin-bottom: 6px; } .flagcard b { font-weight: 700; } .flagcard span { font-size: .82rem; color: var(--ink-3); } /* ---- cta ---- */ .cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 4vw, 44px); background: linear-gradient(120deg, rgba(255,204,0,.14), rgba(255,255,255,.04)); } .cta h2 { font-size: clamp(1.4rem, 3vw, 2rem); } .cta p { margin-top: 8px; color: var(--ink-2); max-width: 52ch; } /* ---- page heads ---- */ .crumbs { margin-top: 20px; font-size: .85rem; } .crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; color: var(--ink-4); } .crumbs a { color: var(--ink-3); } .crumbs a:hover { color: #fff; } .crumbs li span { margin-right: 8px; } .page-head { margin-top: clamp(28px, 5vw, 56px) !important; display: flex; flex-direction: column; align-items: flex-start; } .page-head .lead { margin-left: 0; margin-top: 16px; } .page-head.center .lead { margin: 16px auto 0; } .page-head .chips { margin-top: 24px; } .page-head .search-big { margin: 24px 0 0; } .brand-head { position: relative; } .brand-head::before { content: ''; position: absolute; left: -10%; top: -30%; width: 60%; height: 160%; background: radial-gradient(ellipse at 20% 40%, rgba(var(--brand-rgb), 0.28), transparent 62%); z-index: -1; pointer-events: none; filter: blur(30px); } .head-icon { width: 64px; height: 64px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; background: var(--gold-soft); color: var(--gold); margin-bottom: 18px; border: 1px solid rgba(255,204,0,.3); } .head-icon .ic { width: 32px; height: 32px; } .head-flag { border-radius: var(--radius-xs); box-shadow: 0 6px 20px rgba(0,0,0,.4); margin-bottom: 18px; } .replaces-line { margin-top: 14px; color: var(--ink-3); } .replaces-line a { font-weight: 700; } /* ---- two column ---- */ .two-col { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 32px; align-items: start; } .prose { font-size: 1.08rem; color: var(--ink-2); display: flex; flex-direction: column; gap: 16px; max-width: 68ch; } .prose h2 { font-size: 1.4rem; color: var(--ink); margin-top: 14px; } .prose .btn { align-self: flex-start; } .checklist, .facts { padding: 24px; } .checklist h2, .facts h2 { font-size: 1.1rem; margin-bottom: 12px; } .checklist ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .checklist li { position: relative; padding-left: 26px; color: var(--ink-2); } .checklist li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 800; } .checklist p { color: var(--ink-2); margin-bottom: 14px; } .facts dl { margin: 0; display: flex; flex-direction: column; gap: 14px; } .facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-4); font-weight: 700; margin-bottom: 4px; } .facts dd { margin: 0; color: var(--ink); font-weight: 600; } .dd-links { display: flex; flex-wrap: wrap; gap: 8px; } .dd-links a { display: inline-flex; align-items: center; padding: 4px 10px 4px 6px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--ink); font-size: .85rem; } .facts-country { display: block; margin-top: 18px; font-weight: 700; } /* ---- lists ---- */ .list { display: flex; flex-direction: column; } .rows { display: flex; flex-direction: column; gap: 10px; } .row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--radius); background: rgba(255,255,255,.045); border: 1px solid var(--line); color: var(--ink); position: relative; overflow: hidden; transition: background .2s, border-color .2s; } .row:hover { background: rgba(255,255,255,.075); border-color: rgba(var(--b-rgb, 255,204,0), 0.45); color: #fff; } .row-main h3 { font-size: 1.05rem; } .row-main p { color: var(--ink-3); font-size: .92rem; margin-top: 2px; } .row-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; } .arrow { color: var(--ink-4); font-size: 1.2rem; transition: color .2s; } .row:hover .arrow { color: var(--gold); } .row-plain .logo.logo-dark { background: var(--navy-800); } img.blk, .logo.logo-block { padding: 0; background: transparent; object-fit: cover; } .logo-initial { color: var(--gold); background: var(--gold-soft); } .row-plain .logo-initial .ic { width: 24px; height: 24px; } .card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink); overflow: hidden; transition: border-color .25s, box-shadow .35s var(--ease); } .card:hover { border-color: rgba(var(--b-rgb), 0.55); box-shadow: 0 18px 50px rgba(var(--b-rgb), 0.18); color: var(--ink); } .card-top { display: flex; align-items: center; gap: 14px; } .card-title p { color: var(--ink-3); font-size: .92rem; margin-top: 2px; } .card-desc { color: var(--ink-2); } .card.pick { padding: 28px; margin-bottom: 18px; background: linear-gradient(135deg, rgba(var(--b-rgb), 0.22), rgba(255,255,255,.04) 60%); border-color: rgba(var(--b-rgb), 0.45); } .card.pick .logo { width: 64px; height: 64px; border-radius: var(--radius); } .card.pick h3 { font-size: 1.6rem; } .ribbon { position: absolute; top: 18px; right: -34px; transform: rotate(35deg); background: var(--gold); color: var(--navy-900); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 40px; box-shadow: 0 4px 12px rgba(0,0,0,.3); } .grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .more-line { margin-top: 16px; } .logo-row { display: flex; flex-wrap: wrap; gap: 10px; } .logo-link { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; transition: color .2s, border-color .2s; } .logo-link:hover { color: #fff; border-color: var(--line-2); } .logo-link img, .logo-link .logo { width: 32px; height: 32px; border-radius: var(--radius-xs); background: #fff; padding: 3px; object-fit: contain; font-size: .9rem; } /* ---- alternatives index ---- */ .letter-group { display: grid; grid-template-columns: 60px 1fr; gap: 16px; margin-top: 28px; } .letter { font-size: 2rem; color: var(--gold); font-family: var(--font-display); } .alt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .alt-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 14px 16px; border-radius: var(--radius); background: rgba(255,255,255,.045); border: 1px solid var(--line); color: var(--ink); transition: border-color .2s; } .alt-item:hover { border-color: var(--line-2); color: #fff; } .alt-name { font-weight: 700; display: inline-flex; align-items: center; } .alt-count { grid-column: 1; font-size: .8rem; color: var(--ink-3); } .alt-logos { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; } .alt-logos img { width: 24px; height: 24px; border-radius: var(--radius-xs); background: #fff; padding: 2px; object-fit: contain; margin-left: -6px; border: 1px solid var(--navy-900); } /* ---- product hero ---- */ .product-hero { position: relative; margin-top: 28px !important; } .product-hero::before { content: ''; position: absolute; inset: -60px -10% auto; height: 130%; background: radial-gradient(ellipse at 15% 30%, rgba(var(--brand-rgb), 0.35), transparent 60%); z-index: -1; filter: blur(30px); pointer-events: none; } .product-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; } .product-logo .logo { width: 104px; height: 104px; border-radius: var(--radius); padding: 14px; font-size: 2.6rem; box-shadow: 0 16px 40px rgba(var(--brand-rgb), 0.35); } .product-head .lead { margin: 10px 0 14px; } .product-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } /* ---- faq ---- */ .faq details { margin-bottom: 10px; padding: 4px 20px; border-radius: var(--radius); } .faq summary { cursor: pointer; padding: 14px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--gold); font-size: 1.4rem; font-weight: 400; } .faq details[open] summary::after { content: '−'; } .faq details p { padding: 0 0 16px; color: var(--ink-2); } /* ---- duo ---- */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .duo-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; color: var(--ink); transition: transform .3s var(--ease); } .duo-card:hover { color: #fff; } .duo-card b { font-size: 1.15rem; font-family: var(--font-display); } .duo-card span:last-child { color: var(--ink-3); font-size: .9rem; } /* ---- form ---- */ .form { padding: clamp(20px, 4vw, 36px); display: flex; flex-direction: column; gap: 26px; } fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; } legend { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; margin-bottom: 14px; padding: 0; } .field { display: flex; flex-direction: column; gap: 6px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field label, .field .label { font-weight: 700; font-size: .95rem; } .req { color: var(--gold); } .field input[type="text"], .field input[type="url"], .field input[type="email"], .field select, .field textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line-2); background: rgba(4, 15, 39, 0.5); color: var(--ink); outline: 0; transition: border-color .2s, box-shadow .2s; } .field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; } .field select option { color: #111; background: #fff; } .field textarea { resize: vertical; min-height: 100px; } .field :is(input, select, textarea):focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,204,0,.25); } .field .hint { margin-top: 0; font-size: .85rem; color: var(--ink-4); } .has-error :is(input, select, textarea) { border-color: #ff7b7b; } .err { color: #ff9c9c; font-size: .88rem; font-weight: 600; } .form-error { padding: 12px 16px; border-radius: var(--radius); background: rgba(255, 90, 90, 0.14); border: 1px solid rgba(255, 120, 120, 0.4); color: #ffd0d0; font-weight: 600; } .checks { display: flex; flex-wrap: wrap; gap: 8px 18px; } .checks label, .consent { display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 500 !important; color: var(--ink-2); cursor: pointer; } .checks input, .consent input { accent-color: var(--gold); width: 18px; height: 18px; margin-top: 2px; } .challenge label b { color: var(--gold); font-size: 1.1em; } .challenge input { max-width: 120px; } .fax { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .thanks { padding: clamp(28px, 5vw, 48px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .thanks p { color: var(--ink-2); max-width: 50ch; } [data-show-when] { display: none; } [data-show-when].shown { display: flex; } /* ---- palette ---- */ .palette { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: clamp(60px, 12vh, 140px) 16px 16px; } .palette[hidden] { display: none; } .palette-backdrop { position: absolute; inset: 0; background: rgba(3, 10, 30, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .palette-box { position: relative; width: min(100%, 680px); max-height: min(70vh, 640px); display: flex; flex-direction: column; background: rgba(9, 28, 66, 0.92); overflow: hidden; } .palette-form { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .palette-form .ic { color: var(--gold); width: 22px; height: 22px; } .palette-form input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 1.1rem; padding: 6px 0; } .palette-close { padding: 4px 8px; border-radius: var(--radius-xs); border: 1px solid var(--line); background: none; color: var(--ink-4); cursor: pointer; font-size: .75rem; } .palette-results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; } .palette-results li a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius); color: var(--ink); } .palette-results li a:hover, .palette-results li.active a { background: rgba(255,255,255,.08); color: #fff; } .palette-results .logo { width: 36px; height: 36px; border-radius: var(--radius-xs); padding: 4px; font-size: 1rem; box-shadow: none; } .palette-results b { display: block; font-weight: 700; } .palette-results small { display: block; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .palette-results .pill { font-size: .68rem; } .palette-results .none { padding: 18px; color: var(--ink-3); text-align: center; } .palette-results .all { text-align: center; padding: 10px; } /* ---- footer ---- */ .foot { margin-top: clamp(64px, 10vw, 120px); border-top: 1px solid var(--line); background: rgba(3, 10, 30, 0.35); } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr 1fr; gap: 32px; padding-top: 48px; padding-bottom: 32px; } .foot-grid .foot-brand > a.brand { display: inline-flex; align-items: center; gap: 10px; padding: 0; color: var(--ink); } .foot-brand .brand-ring { width: 30px; height: 30px; } .foot-brand p { margin-top: 14px; color: var(--ink-2); max-width: 36ch; } .foot-brand .muted { font-size: .88rem; } .foot h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-4); margin-bottom: 12px; } .foot-grid div > a { display: block; color: var(--ink-2); padding: 4px 0; } .foot-grid div > a:hover { color: #fff; } .foot-end { padding-top: 16px; padding-bottom: 28px; border-top: 1px solid var(--line); font-size: .85rem; } /* ---- reveal ---- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .no-js .reveal { opacity: 1; transform: none; } /* ---- responsive ---- */ @media (max-width: 1100px) { .nav-search span.label { display: none; } .nav-links > a { padding: 10px 12px; } } @media (max-width: 1020px) { .picks-grid { grid-template-columns: repeat(2, 1fr); } .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .nav-toggle { display: flex; } .nav { padding: 8px 10px 8px 16px; } .nav-links { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); flex-direction: column; align-items: stretch; padding: 10px; border-radius: var(--radius); background: rgba(9, 28, 66, 0.97); border: 1px solid var(--line-2); box-shadow: var(--shadow); } .nav-links.open { display: flex; } .nav-links > a { padding: 12px 16px; } .nav-links > a.nav-cta { margin: 6px 0 0; text-align: center; } .nav-tools { flex-direction: column; align-items: stretch; margin: 8px 0 0; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); } .lang > button { width: 100%; justify-content: space-between; } .lang ul { position: static; margin-top: 6px; } .nav-search { justify-content: center; } .nav { position: relative; } .two-col { grid-template-columns: 1fr; } .product-head { grid-template-columns: auto 1fr; } .product-actions { grid-column: 1 / -1; align-items: stretch; } .letter-group { grid-template-columns: 1fr; gap: 8px; } .letter { font-size: 1.4rem; } .cta { flex-direction: column; align-items: flex-start; } } @media (max-width: 640px) { .shell { padding: 0 16px; } .picks-grid { grid-template-columns: 1fr; } .search-big { padding: 6px 6px 6px 14px; } .search-big .btn { padding: 10px 14px; } .stats { gap: 22px; } .row { grid-template-columns: auto minmax(0, 1fr) auto; } .row-meta { grid-column: 2; justify-content: flex-start; } .row .arrow { grid-row: 1; grid-column: 3; } .field-row { grid-template-columns: 1fr; } .duo { grid-template-columns: 1fr; } .product-logo .logo { width: 72px; height: 72px; border-radius: var(--radius); padding: 10px; font-size: 1.8rem; } .sec-head { flex-direction: column; align-items: flex-start; } .card.pick { padding: 22px; } .ribbon { top: 14px; right: -38px; font-size: .6rem; } .foot-grid { grid-template-columns: 1fr; gap: 24px; } .hero h1 { font-size: clamp(2.2rem, 11vw, 3.2rem); } .tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; } .tile { padding: 14px; } .tile-name { font-size: .9rem; } .flags { grid-template-columns: repeat(2, 1fr); } .flags.big { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } .marquee-track { animation: none; } }