/* ========================================================================= KEY-FI — design tokens + base (server-rendered internal/noindex pages) Stille Bank identity · 2026-07-02: paper white + ink + pine accent, self-hosted Bricolage Grotesque / Hanken Grotesk (DSGVO). ========================================================================= */ /* Self-hosted variable fonts (these pages don't load site.css) */ @font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Hanken Grotesk'; src: url('/assets/fonts/hanken-grotesk-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Hanken Grotesk'; src: url('/assets/fonts/hanken-grotesk-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- Tokens (light, default) -------------------------------------------- */ :root { /* Surfaces — paper white */ --bg-0: #FBFBF9; /* canvas */ --bg-1: #F3F3EE; /* secondary surface */ --bg-paper: #FFFFFF; /* paper, cards, inputs */ --bg-ink: #141719; /* ink, inversed surfaces */ --bg-ink-2: #1D2124; /* Type */ --ink: #141719; /* primary text */ --ink-2: #3E4549; /* secondary text */ --ink-3: #697175; /* muted */ --ink-4: #9AA1A5; /* hairline meta */ --ink-inv: #F7F8F6; /* on-ink */ --ink-inv-2: #C3C9C6; /* Rules + edges */ --rule: #E2E3DC; /* hairline */ --rule-2: #ECEDE7; /* lighter rule */ --rule-strong: #141719; /* full-strength rule */ /* Accents */ --gold: #B99B6B; /* archival accent */ --emerald: #0F6B4F; /* pine accent */ --emerald-2: #11635C; --warn: #8A4A0A; --ok: #0F6B4F; --signal: #C0392B; /* Numeric/data */ --grid: #E2E3DC; --pos: #0F6B4F; --neg: #8A1F1F; /* Type families — overridable by [data-typo] on */ --ff-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; --ff-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif; --ff-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; --display-weight: 650; --display-weight-em: 700; --display-feat: "kern", "ss01"; } /* ---- Typography sets ---------------------------------------------------- */ html[data-typo="fintech"] { --ff-display: "Geist", ui-sans-serif, system-ui, sans-serif; --ff-sans: "Geist", ui-sans-serif, system-ui, sans-serif; --ff-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --display-weight: 500; --display-weight-em: 500; --display-feat: "kern", "ss01"; } html[data-typo="paper"] { --ff-display: "Source Serif 4", ui-serif, Georgia, serif; --ff-sans: "Public Sans", ui-sans-serif, system-ui, sans-serif; --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --display-weight: 400; --display-weight-em: 400; --display-feat: "kern"; } html[data-typo="modern"] { --ff-display: "Newsreader", ui-serif, Georgia, serif; --ff-sans: "Manrope", ui-sans-serif, system-ui, sans-serif; --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --display-weight: 400; --display-weight-em: 400; --display-feat: "kern", "ss01", "ss03"; } html[data-typo="grotesk"] { --ff-display: "Bricolage Grotesque", "DM Sans", ui-sans-serif, sans-serif; --ff-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif; --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --display-weight: 500; --display-weight-em: 500; --display-feat: "kern", "ss01"; } :root { /* Density (regular default) */ --d-1: 6px; --d-2: 10px; --d-3: 14px; --d-4: 20px; --d-5: 28px; --d-6: 40px; --d-7: 56px; --d-8: 80px; --d-9: 112px; --d-10: 160px; --col-w: 1280px; /* primary container */ --col-w-wide: 1440px; --col-w-narrow: 920px; --radius-0: 0px; --radius-1: 2px; --radius-2: 4px; --radius-3: 8px; --t-fast: 120ms; --t-base: 220ms; --t-slow: 420ms; --ease: cubic-bezier(.2,.7,.2,1); } /* ---- Density variants --------------------------------------------------- */ html[data-density="compact"] { --d-3: 10px; --d-4: 14px; --d-5: 20px; --d-6: 28px; --d-7: 40px; --d-8: 56px; --d-9: 80px; } html[data-density="comfortable"] { --d-3: 18px; --d-4: 26px; --d-5: 36px; --d-6: 52px; --d-7: 72px; --d-8: 104px; --d-9: 144px; } /* ---- Dark theme --------------------------------------------------------- */ html[data-theme="dark"] { --bg-0: #07101F; --bg-1: #0B1729; --bg-paper: #0F1E36; --bg-ink: #ECEEF2; --bg-ink-2: #D4D8DF; --ink: #ECEEF2; --ink-2: #B7BCC9; --ink-3: #7A839A; --ink-4: #4F5970; --ink-inv: #0A1A30; --ink-inv-2: #2A3550; --rule: #2A3A55; --rule-2: #1A2740; --rule-strong: #ECEEF2; --gold: #D4A857; --emerald: #34D399; --emerald-2: #4ADE80; --signal: #FB923C; --grid: #1A2740; } /* ========================================================================= Reset + base ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } body { background: var(--bg-0); color: var(--ink); font-family: var(--ff-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease); } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { font-family: inherit; } .auth-card{margin:24px auto 0;max-width:1180px;padding:0 18px;position:relative;z-index:20} .auth-card-inner{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:16px 18px;border:1px solid var(--rule,#d8d4c8);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(246,241,230,.92));box-shadow:0 18px 50px rgba(20,30,40,.08)} .auth-card strong{display:block;font-size:16px;margin-bottom:4px}.auth-card p{margin:0}.auth-message{font-size:13px;color:#8a5a00;margin-top:6px!important}.auth-card.is-authenticated .auth-message{color:#0a7a43}.auth-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.auth-form input{min-width:240px;padding:11px 12px;border:1px solid var(--rule,#d8d4c8);border-radius:12px;background:#fff;color:inherit}.btn.ghost{background:transparent;color:inherit;border:1px solid var(--rule,#d8d4c8)}button.mini-link{border:0;background:transparent;padding:0;color:var(--accent,#855b2d);text-decoration:underline;cursor:pointer;font:inherit}@media(max-width:760px){.auth-card-inner{align-items:flex-start;flex-direction:column}.auth-form input{min-width:0;width:100%}} /* Selection */ ::selection { background: var(--ink); color: var(--ink-inv); } /* Tabular numerics for monospace runs */ .mono, .num, code, kbd, samp { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* ========================================================================= Typography ========================================================================= */ .eyebrow { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; } .eyebrow .dot { display: inline-block; width: 6px; height: 6px; background: var(--emerald); border-radius: 50%; vertical-align: middle; margin-right: 8px; transform: translateY(-1px); } .h-display { font-family: var(--ff-display); font-weight: var(--display-weight); font-size: clamp(48px, 7vw, 104px); line-height: 0.98; letter-spacing: -0.025em; color: var(--ink); margin: 0; font-feature-settings: var(--display-feat); } .h-display em { font-style: normal; font-weight: var(--display-weight-em); color: var(--ink-2); } .h-display .small-acc { font-family: var(--ff-mono); font-size: 0.32em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); vertical-align: super; margin-left: 0.4em; font-weight: 500; } .h1 { font-family: var(--ff-display); font-weight: var(--display-weight); font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; } .h1 em { font-style: normal; font-weight: var(--display-weight-em); color: var(--ink-2); } .h2 { font-family: var(--ff-display); font-weight: var(--display-weight); font-size: clamp(28px, 3vw, 44px); line-height: 1.08; letter-spacing: -0.018em; margin: 0; } .h3 { font-family: var(--ff-sans); font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -0.005em; margin: 0; } .lead { font-family: var(--ff-display); font-weight: var(--display-weight); font-size: clamp(20px, 1.6vw, 24px); line-height: 1.45; color: var(--ink-2); letter-spacing: -0.005em; max-width: 64ch; } .body { font-size: 16px; line-height: 1.6; color: var(--ink-2); } .body-sm { font-size: 14px; line-height: 1.55; color: var(--ink-2); } .meta { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3); } /* ========================================================================= Layout primitives ========================================================================= */ .container { width: 100%; max-width: var(--col-w); margin: 0 auto; padding-inline: var(--d-4); } .container-wide { max-width: var(--col-w-wide); } .container-narrow { max-width: var(--col-w-narrow); } section { padding-block: var(--d-8); } section.sm { padding-block: var(--d-6); } section.lg { padding-block: var(--d-9); } .rule-top { border-top: 1px solid var(--rule); } .rule-bottom { border-bottom: 1px solid var(--rule); } .rule-strong-top { border-top: 1.5px solid var(--rule-strong); } /* Section header — newspaper masthead style */ .section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--d-4); padding-block: var(--d-3); border-bottom: 1px solid var(--rule); margin-bottom: var(--d-6); } .section-head .num { font-family: var(--ff-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.08em; } .section-head h2 { margin-top: var(--d-1); } .section-head .right { text-align: right; } /* ========================================================================= Top status bar — bank-grade trust strip ========================================================================= */ .statusbar { background: var(--bg-ink); color: var(--ink-inv-2); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; border-bottom: 1px solid var(--ink); } .statusbar .row { max-width: var(--col-w-wide); margin: 0 auto; padding: 8px var(--d-4); display: flex; gap: var(--d-4); align-items: center; justify-content: space-between; } .statusbar .items { display: flex; gap: var(--d-4); align-items: center; flex-wrap: wrap; } .statusbar .item { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; } .statusbar .item .dot { width: 5px; height: 5px; background: var(--emerald-2, #4ADE80); border-radius: 50%; } .statusbar .sep { color: rgba(255,255,255,.2); } /* ========================================================================= Header / nav ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg-0); border-bottom: 1px solid var(--rule); backdrop-filter: saturate(160%); } .site-header .row { max-width: var(--col-w-wide); margin: 0 auto; padding: var(--d-3) var(--d-4); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--d-5); } .brand { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); } .brand .mark { width: 28px; height: 28px; display: grid; place-items: center; background: var(--ink); color: var(--ink-inv); font-family: var(--ff-display); font-weight: 500; font-size: 16px; letter-spacing: -0.02em; border-radius: 2px; } .brand .name { font-family: var(--ff-display); font-weight: 480; font-size: 19px; letter-spacing: -0.015em; line-height: 1; } .brand .name span { color: var(--ink-3); font-weight: 360; font-style: normal; } .nav { display: flex; gap: var(--d-5); justify-content: center; } .nav a { font-size: 14px; color: var(--ink-2); text-decoration: none; padding: 6px 2px; border-bottom: 1.5px solid transparent; transition: color var(--t-fast), border-color var(--t-fast); white-space: nowrap; } .btn { white-space: nowrap; } .nav a:hover { color: var(--ink); } .nav a.active { color: var(--ink); border-bottom-color: var(--ink); } .header-actions { display: flex; gap: var(--d-3); align-items: center; } .lang-toggle{display:inline-flex;border:1px solid var(--rule);background:var(--bg-paper);border-radius:999px;padding:2px;gap:2px} .lang-toggle button{border:0;background:transparent;color:var(--ink-2);border-radius:999px;cursor:pointer;font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;padding:8px 9px;line-height:1} .lang-toggle button.active{background:var(--ink);color:var(--ink-inv)} .admin-link{border-color:var(--signal);color:var(--signal)} .admin-link:hover{background:var(--signal);border-color:var(--signal);color:#fff} /* ========================================================================= Buttons ========================================================================= */ .btn { appearance: none; border: 0; cursor: pointer; font-family: var(--ff-sans); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; padding: 12px 18px; background: var(--ink); color: var(--ink-inv); border-radius: 2px; text-decoration: none; display: inline-flex; gap: 10px; align-items: center; transition: transform var(--t-fast), background-color var(--t-fast), color var(--t-fast); line-height: 1; } .btn:hover { transform: translateY(-1px); } .btn .arrow { width: 14px; height: 10px; display: inline-block; } .btn .arrow::after { content: "→"; font-family: var(--ff-mono); font-size: 13px; } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--ink-inv); } .btn-link { background: transparent; color: var(--ink); padding: 0; border-bottom: 1px solid currentColor; border-radius: 0; } .btn-emerald { background: var(--emerald); color: #fff; } .btn-emerald:hover { background: var(--emerald-2); } /* ========================================================================= Inputs / forms ========================================================================= */ .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; } .input, select, textarea { background: var(--bg-paper); border: 1px solid var(--rule); color: var(--ink); padding: 12px 14px; font-family: var(--ff-sans); font-size: 15px; border-radius: 2px; width: 100%; } .input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10,26,48,0.06); } html[data-theme="dark"] .input:focus { box-shadow: 0 0 0 3px rgba(239,231,211,0.06); } /* ========================================================================= Trust / certification strip ========================================================================= */ .trust-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; border-block: 1px solid var(--rule); } .trust-strip .cell { padding: var(--d-4); border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; } .trust-strip .cell:last-child { border-right: 0; } .trust-strip .label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; } .trust-strip .value { font-family: var(--ff-display); font-size: 18px; line-height: 1.2; color: var(--ink); font-weight: var(--display-weight); } .trust-strip .reg { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; } /* ========================================================================= Ledger — product index table ========================================================================= */ .ledger { border-top: 1px solid var(--rule-strong); } .ledger .row { display: grid; grid-template-columns: 56px minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 2fr) auto; gap: var(--d-4); padding: var(--d-4) var(--d-2); border-bottom: 1px solid var(--rule); align-items: baseline; transition: background-color var(--t-fast); } .ledger .row:hover { background: var(--bg-1); } .ledger .row .n { font-family: var(--ff-mono); font-size: 12px; color: var(--ink-3); padding-top: 4px; } .ledger .row .title { font-family: var(--ff-display); font-size: 24px; line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); } .ledger .row .title .tr { display: block; font-family: var(--ff-sans); font-size: 13px; color: var(--ink-3); font-style: normal; letter-spacing: 0; margin-top: 4px; } .ledger .row .who { font-size: 14px; color: var(--ink-2); } .ledger .row .what { font-size: 14px; color: var(--ink-2); } .ledger .row .cta { font-family: var(--ff-mono); font-size: 12px; color: var(--ink); text-decoration: none; white-space: nowrap; border-bottom: 1px solid var(--ink); padding-bottom: 2px; align-self: center; } .ledger .row .cta:hover { color: var(--emerald); border-color: var(--emerald); } @media (max-width: 880px) { .ledger .row { grid-template-columns: 36px 1fr; row-gap: var(--d-2); } .ledger .row .who, .ledger .row .what { grid-column: 2; } .ledger .row .cta { grid-column: 2; } } /* ========================================================================= Pull-quote / manifest ========================================================================= */ .manifest { background: var(--bg-ink); color: var(--ink-inv); position: relative; overflow: hidden; } .manifest .grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--d-7); align-items: end; } .manifest .stamp { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-inv-2); padding-bottom: var(--d-3); border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: var(--d-5); } .manifest h2 { font-family: var(--ff-display); font-weight: var(--display-weight); font-size: clamp(36px, 5vw, 72px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink-inv); margin: 0; } .manifest h2 em { color: var(--ink-inv-2); font-style: normal; } .manifest .ribbon { display: inline-block; border: 1px solid rgba(255,255,255,.3); padding: 6px 12px; border-radius: 2px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-inv-2); margin-bottom: var(--d-4); } /* ========================================================================= Process timeline ========================================================================= */ .process { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .process .step { padding: var(--d-5) var(--d-4); border-right: 1px solid var(--rule); position: relative; } .process .step:last-child { border-right: 0; } .process .step .n { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: var(--d-3); } .process .step h4 { font-family: var(--ff-display); font-weight: var(--display-weight); font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 var(--d-2); } .process .step p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.55; } .process .step .dur { margin-top: var(--d-3); font-family: var(--ff-mono); font-size: 11px; color: var(--emerald); letter-spacing: 0.04em; } @media (max-width: 880px) { .process { grid-template-columns: 1fr 1fr; } .process .step:nth-child(2n) { border-right: 0; } .process .step:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } } /* ========================================================================= Footer ========================================================================= */ .site-footer { background: var(--bg-ink); color: var(--ink-inv); padding-block: var(--d-7) var(--d-5); margin-top: var(--d-8); } .site-footer .grid { max-width: var(--col-w-wide); margin: 0 auto; padding-inline: var(--d-4); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--d-5); } .site-footer h5 { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-inv-2); margin: 0 0 var(--d-3); font-weight: 500; } .site-footer a { color: var(--ink-inv); text-decoration: none; opacity: 0.85; font-size: 14px; } .site-footer a:hover { opacity: 1; border-bottom: 1px solid currentColor; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .site-footer .bot { max-width: var(--col-w-wide); margin: var(--d-6) auto 0; padding: var(--d-4); border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; font-family: var(--ff-mono); font-size: 11px; color: var(--ink-inv-2); } /* ========================================================================= Misc — figure/badge/chip ========================================================================= */ .chip { display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 999px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-2); background: var(--bg-paper); } .badge { display: inline-flex; gap: 6px; align-items: center; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--emerald); } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); } .kv { display: flex; justify-content: space-between; align-items: baseline; gap: var(--d-3); font-family: var(--ff-mono); font-size: 12px; padding: 10px 0; border-bottom: 1px dashed var(--rule); } .kv:last-child { border-bottom: 0; } .kv .k { color: var(--ink-3); white-space: nowrap; flex-shrink: 0; } .kv .v { color: var(--ink); text-align: right; } .portrait-slot { aspect-ratio: 4 / 5; margin-bottom: var(--d-3); border: 1px solid var(--rule); background: linear-gradient(90deg, rgba(138,146,166,.12) 1px, transparent 1px), linear-gradient(0deg, rgba(138,146,166,.12) 1px, transparent 1px), var(--bg-1); background-size: 24px 24px; display: grid; place-content: center; gap: 8px; text-align: center; color: var(--ink-3); } .portrait-slot strong { font-family: var(--ff-display); font-size: clamp(22px, 3vw, 34px); font-weight: 400; color: var(--ink); } .portrait-slot small { font-family: var(--ff-mono); text-transform: uppercase; letter-spacing: .08em; } /* Skip link */ .skip { position: absolute; left: -1000px; top: 0; padding: 10px 14px; background: var(--ink); color: var(--ink-inv); } .skip:focus { left: 8px; top: 8px; z-index: 100; } /* ========================================================================= Mobile ========================================================================= */ @media (max-width: 880px) { .site-header .row { grid-template-columns: 1fr auto; } .nav { display: none; } .trust-strip { grid-template-columns: 1fr 1fr; } .trust-strip .cell:nth-child(2n) { border-right: 0; } .trust-strip .cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } .site-footer .grid { grid-template-columns: 1fr 1fr; } }