/* subpage.css — delad design för webbens under-sidor (apps/support/privacy/ impressum) i SAMMA designspråk som appen (ui-next). Laddas EFTER fonts.css + tokens.css i varje subpage-. Chrome (header/hamburger/footer/country-picker) stylas av nav-shared.js med samma tokens. Denna fil stylar SIDINNEHÅLLET (rubriker, brödtext, kort, listor) genom att rikta in sig på de befintliga selektorerna → ingen markup/text ändras. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; /* App-ens "prick-bg": green-medium-prickar på cream (= rk-result). */ background-color: var(--surface); background-image: radial-gradient(rgba(196, 185, 134, 0.55) 0 1.6px, transparent 1.6px); background-size: 22px 22px; color: var(--on-surface); font-family: var(--font-inter); font-weight: var(--weight-regular); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; min-height: 100vh; } /* .wrap-bredd/-padding styrs av nav-shared.js (480px centrerad, !important). */ /* ── Rubriker (Rubik Black, ink) ── */ h1 { font-family: var(--font-rubik); font-weight: var(--weight-black); font-size: 34px; line-height: 1.06; letter-spacing: -0.8px; color: var(--on-surface); margin: 6px 0 18px; } /* gul highlight-chip, lätt lutad — samma gest som hemskärmens SNAP/SCAN/FIND */ h1 .accent { display: inline-block; background: var(--accent); color: var(--red-dark-base); padding: 0 8px; transform: rotate(-2deg); } h2 { font-family: var(--font-rubik); font-weight: var(--weight-black); font-size: 19px; line-height: 1.2; letter-spacing: -0.3px; color: var(--on-surface); margin: 34px 0 14px; } h2 .yellow-accent { background: var(--accent); color: var(--red-dark-base); padding: 0 6px; } h3 { font-family: var(--font-rubik); font-weight: var(--weight-bold); font-size: 15px; letter-spacing: -0.2px; color: var(--on-surface); margin: 20px 0 8px; } /* ── Brödtext ── */ p { margin: 0 0 16px; color: var(--on-surface-mute); } strong { font-weight: var(--weight-bold); color: var(--on-surface); } a { color: var(--info); text-underline-offset: 2px; } a:hover { color: var(--blue-dark); } .lead { font-family: var(--font-inter); font-weight: var(--weight-medium); font-size: 17px; line-height: 1.5; color: var(--on-surface); margin: 0 0 28px; } /* ── Listor (▸ röd markör) ── */ ul { list-style: none; margin: 0 0 18px; padding: 0; } li { position: relative; padding: 0 0 0 22px; margin: 0 0 10px; color: var(--on-surface-mute); } li::before { content: "▸"; position: absolute; left: 3px; top: 0; color: var(--red-medium); font-weight: 700; } /* ── "Senast uppdaterad"-stämpel ── */ .updated { display: inline-block; font-family: var(--font-rubik); font-weight: var(--weight-bold); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; background: var(--red-dark-base); color: var(--accent); padding: 4px 9px; border-radius: var(--radius-sm); margin: 0 0 22px; } /* ── Kort: app-download (apps) + kontakt (support) ── */ .apps-grid { display: grid; gap: 16px; margin: 24px 0 8px; } .app-card { display: flex; align-items: center; gap: 16px; position: relative; background: var(--surface-raised); border: 2px solid var(--color-ink); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 20px; text-decoration: none; color: var(--on-surface); transition: transform .1s ease, box-shadow .1s ease; } @media (hover: hover) { .app-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 8px 0 var(--color-ink); } } .app-card:active { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--color-ink); } .app-card.is-disabled { cursor: not-allowed; opacity: 0.78; } .app-card.is-disabled:hover, .app-card.is-disabled:active { transform: none; box-shadow: var(--shadow-card); } .app-card-icon { width: 56px; height: 56px; flex: 0 0 56px; border: 2px solid var(--color-ink); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-family: var(--font-rubik); font-weight: var(--weight-black); font-size: 22px; background: var(--accent); color: var(--red-dark-base); } .app-card-icon.ios { background: var(--red-dark-base); color: var(--white-light); } .app-card-icon.android { background: var(--green-medium); color: var(--red-dark-base); } .app-card-info { flex: 1; min-width: 0; } .app-card-title { font-family: var(--font-rubik); font-weight: var(--weight-black); font-size: 18px; line-height: 1.1; letter-spacing: -0.2px; text-transform: uppercase; color: var(--on-surface); margin-bottom: 4px; } .app-card-sub { font-family: var(--font-inter); font-size: 13px; color: var(--on-surface-mute); } .app-card-status { position: absolute; top: 12px; right: 14px; font-family: var(--font-rubik); font-weight: var(--weight-black); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--radius-sm); background: var(--red-medium); color: var(--white-light); } /* Officiella store-badges (App Store / Google Play) — egen chrome, bara hover-lyft. */ .app-store-link, .play-store-link { display: inline-flex; text-decoration: none; align-self: start; transition: transform .1s ease; } .app-store-link img { display: block; width: 246px; height: 82px; max-width: 100%; } .play-store-link img { display: block; width: auto; height: 82px; max-width: 100%; } @media (hover: hover) { .app-store-link:hover, .play-store-link:hover { transform: translate(-2px, -2px); } } .features { margin: 32px 0; } /* ── Kontakt-kort (support) ── */ .contact-card { background: var(--surface-raised); border: 2px solid var(--color-ink); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 20px; margin: 8px 0 24px; } .contact-card .email { margin-bottom: 6px; } .contact-card .email a { font-family: var(--font-rubik); font-weight: var(--weight-black); font-size: 18px; letter-spacing: -0.3px; color: var(--info); text-decoration: none; } .contact-card .email a:hover { text-decoration: underline; } .contact-card .meta { font-family: var(--font-inter); font-size: 13px; color: var(--on-surface-mute); } /* ── Adress-block (impressum) ── */ .address-block { background: var(--surface-raised); border: 2px solid var(--color-ink); border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: 16px 18px; margin: 0 0 16px; color: var(--on-surface); } /* inline-kod (privacy) */ code { font-family: var(--font-inter); font-size: 0.92em; background: var(--yellow-medium-subtle); border: 1px solid var(--red-dark-subtle); border-radius: 4px; padding: 1px 5px; } /* ── Per-språk-block (visas/döljs av setLang) ── */ .lang-block { display: none; } .lang-block.active { display: block; } /* Gammal header-chrome (text-logo "REKORD" + språkväljare) ersätts av nav-shared (logo-img + footer-country-picker). Dölj direkt i CSS så inget oformaterat blinkar (FOUC) innan nav-shared.js (defer) hinner bygga om headern. */ header a.home { display: none; } .lang-switch { display: none !important; } /* ── Sid-egen footer (page-specifika länkar, under nav-shared:s country/version) ── */ footer { margin-top: 40px; padding-top: 20px; border-top: 2px solid var(--color-ink); font-family: var(--font-inter); font-size: 13px; color: var(--on-surface-mute); } footer a { color: var(--info); } @media (prefers-reduced-motion: reduce) { .app-card, .app-store-link, .play-store-link { transition: none; } }