/* ============================================================ AEROS Global — kampanjesiden (front-page.php) Film-design: sticky-scener (curtain-parallax) + rene ark-seksjoner. Design-tokens arves fra style.css (:root). ============================================================ */ /* ---------- primitives ---------- */ .wrap-n { max-width: 860px; margin-inline: auto; padding-inline: var(--edge); } .center { text-align: center; } .eyebrow { display: inline-block; font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } /* SEKSJONS-IKON (Tor 08.08: «tydeligere seksjoner på mobil … lag gjerne nye ikoner»). Ett strekikon foran merkelappen gir hver blokk et visuelt anker, så en lang mobil-scroll leser som kapitler. Ikonet er dekorativt — teksten ved siden av bærer alltid meningen. `inline-flex` på eyebrow-en når den har ikon, ellers ville baseline-en til SVG-en dratt teksten opp. */ .eyebrow:has(> .eyebrow-ic) { display: inline-flex; align-items: center; gap: 9px; } .eyebrow-ic { flex: none; opacity: .85; } /* 🪤 Gull-hårstreken under merkelappen er et `::after`. Blir eyebrow-en `inline-flex`, blir streken et FLEX-ELEMENT og legger seg til høyre for teksten i stedet for under den. Ikonet er allerede det visuelle merket her, så streken skrus av når ikonet finnes — ett merke, ikke to. */ .eyebrow:has(> .eyebrow-ic)::after { display: none; } /* Farge + sperring rettet til merkevare-tokenene (var #fff / .028em — begge drift fra aeros.no, som bruker var(--text) #FFFBEF og .032em). h2 og hadde ulik hvit i samme setning; nå er de like. Kursiven står urørt — den er Tors valg. */ .gl-campaign h1, .gl-campaign h2 { font-family: var(--font-serif); font-weight: 400; font-style: italic; color: var(--text); letter-spacing: .032em; line-height: 1.1; margin: 0; text-wrap: balance; } .gl-campaign h2 { font-size: clamp(27px, 4vw, 40px); } .lead { font-size: clamp(16px, 1.9vw, 18px); color: var(--cream-soft); max-width: 52ch; margin: 20px auto 0; } .num { font-variant-numeric: tabular-nums; } .gl-campaign a { text-decoration: none; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 17px 32px; border-radius: 2px; border: 1px solid transparent; text-decoration: none; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .12s ease; } .btn:active { transform: scale(.985); } .btn-gold { background: var(--gold); color: var(--ink); } .btn-gold:hover { background: var(--gold-light); color: var(--ink); } .btn-outline { background: transparent; color: var(--gold); border-color: var(--gold-dim); } .btn-outline:hover { border-color: var(--gold); color: var(--gold-light); } .btn-ghost { background: none; border: none; color: var(--cream-faint); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; padding: 12px 6px; border-bottom: 1px solid var(--line); border-radius: 0; cursor: pointer; } .btn-ghost:hover { color: var(--cream); } /* ---------- header ---------- */ .gl-head { position: absolute; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 26px var(--edge); } /* Speiler aeros.no sin .site-logo: Bell MT, vekt 400, 0.18em. Sto tidligere i Inter med 0.42em sperring — et helt annet merke. */ .gl-logo { font-family: var(--font-logo); font-weight: 400; font-size: 20px; letter-spacing: .18em; text-transform: uppercase; color: var(--text); text-decoration: none; } .gl-preview-pill { font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--blue); padding: 4px 10px; border-radius: 100px; } /* ---------- ark-seksjoner (glir over scenene) ---------- */ .sheet { position: relative; z-index: 2; background: var(--bg); padding: clamp(72px, 11vw, 128px) 0; } .fund-sec > .eyebrow { display: block; margin-inline: auto; } /* Progress-linje — tydelig, fet, aldri full bredde (desktop-marg via max-width) */ .horizon { position: relative; max-width: 760px; margin: 46px auto 0; padding-inline: var(--edge); } /* ÉN stolpe, ÉN skala (0–$gl_goal), og INGENTING på linja. ⛔ HER LÅ `.cx-tick`/`.cx-bar-caps` (delmåls-merker — fjernet 08.08, ett go-tall nå) og deretter den 16px «sunkne pillen» med glød og min-width 14px, som på 2,6 % leste som en løs kule på en snor (Tors innvending 08.08 kveld). Redesign: INSTRUMENT-SPRÅKET fra blueprint-seksjonen — en 6px hairline i gull-alpha, solid gull-fylling uten glød/gradient, og en 2×16px gull-lys TIPPMARKØR i enden av fyllingen (samme familie som mål-pilene i SVG-en). `overflow: visible` STÅR: tippmarkøren stikker over/under sporet. */ .cx-bar { position: relative; height: 6px; border-radius: 2px; margin-top: 26px; background: rgba(198, 185, 150, .16); overflow: visible; } .cx-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; min-width: 3px; border-radius: 2px; background: var(--gold); transition: width 1.6s cubic-bezier(.22,.7,.25,1); } .cx-bar-fill::after { content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 2px; height: 16px; background: var(--gold-light); } @media (prefers-reduced-motion: reduce) { .cx-bar-fill { transition: none; } } /* Stat-fliser */ .fund-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 1100px; margin: 34px auto 0; padding-inline: var(--edge); } /* ============================================================ PROOF — visuelt ============================================================ */ .stat-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 48px; margin-top: 36px; } /* ============================================================ SPECS — slank stripe ============================================================ */ .spec-strip { background: var(--bg2); padding: clamp(52px, 8vw, 84px) 0; } .spec-strip .eyebrow { margin-bottom: 24px; } /* Spec-panel — rutenett med hårlinjer (teknisk datablad-estetikk), INGEN sveip */ .specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,251,239,.11); border: 1px solid rgba(255,251,239,.11); border-radius: 16px; overflow: hidden; } .spec { background: var(--bg2); padding: 24px 20px 22px; } .spec b { display: block; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-faint); margin-bottom: 5px; } .spec span { font-size: 14.5px; color: rgba(255,251,239,.94); line-height: 1.4; } /* ============================================================ TIERS ============================================================ */ .tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; align-items: stretch; } /* ÉN tier (Tor 08.08 runde 2): $49-køen og Believer er tatt ut av tilbudet. Solo-kortet gjenbruker .tier.hi uendret — bare alene, cappet og sentrert. Tab-veksleren og believer-kontrollene (.tier-tabs/.picks/.amt-*) er SLETTET, ikke gjemt — gjenoppstår de i markup, må CSS-en hentes fra git-løs historikk (UTKAST-fila §B / arkivkopi). */ .tier-grid.is-solo { grid-template-columns: minmax(0, 460px); justify-content: center; } /* ---- «Other ways to back this»: ett sammenleggbart nedtrekk (10.08) ---- 🪤 Klassen het foerst `.cx-more` — som ALT fantes i fila (doedt 3-kolonners rutenett, linje ~1440) med `display: grid`. Grid paa en
gjoer at alle barna legges ut selv naar den er LUKKET, saa nedtrekket sto permanent aapent. Derfor `.cx-alt`. ⛔ Sjekk om et klassenavn er opptatt foer bruk. 🪤 `.gl-campaign summary` (FAQ-en) vinner paa KILDEORDEN og gir «+»-merke, serif-kursiv og `justify-content: space-between` som dytter teksten til hoyre. Derfor `details.cx-alt` (0,1,2) — hoyere spesifisitet slaar den uansett hvor i fila reglene havner. Font og markor settes eksplisitt. Erstatter to blokker som lå åpne under kortet. Lukket er dette én tekstlinje; åpnet inneholder den bidrag OG e-postlista. ⛔ Beløpsfeltet skal ALDRI stå åpent under $399-knappen. Skjult bak ett klikk er hele poenget: den som vil bidra finner den, den som er på vei mot reservasjon blir ikke avledet. `
` = null JS, tastaturvennlig, virker uten skript. */ .cx-alt { margin-top: clamp(20px, 3.4vw, 28px); padding-top: clamp(18px, 3vw, 24px); border-top: 1px solid rgba(198, 185, 150, .16); } details.cx-alt > summary { display: inline-flex; align-items: center; gap: 8px; position: relative; list-style: none; cursor: pointer; width: auto; /* Alle fire MÅ settes: `.gl-campaign summary` gir serif, kursiv og space-between. Uten dem arves FAQ-ens overskriftsstil. */ font-family: var(--font-sans); font-style: normal; font-weight: 400; justify-content: flex-start; font-size: 14px; color: var(--gold); padding: 0; letter-spacing: 0; text-transform: none; transition: color .25s ease; } details.cx-alt > summary::-webkit-details-marker { display: none; } details.cx-alt > summary::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s ease; } details.cx-alt[open] > summary::before { transform: rotate(-135deg) translateY(-2px); } details.cx-alt > summary:hover { color: var(--gold-light); } /* Treffsone uten å øke høyden — samme grep som i footeren. */ details.cx-alt > summary::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); } .cx-alt-in { margin-top: 18px; } .cx-contrib-form { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; } .cx-contrib-in { display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,251,239,.18); color: var(--cream-soft); font-size: 15px; } .cx-contrib-in input { width: 68px; padding: 0; border: 0; background: none; color: var(--cream-soft); font: inherit; -moz-appearance: textfield; } .cx-contrib-in input::-webkit-outer-spin-button, .cx-contrib-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cx-contrib-in input:focus { outline: none; } .cx-contrib-in:focus-within { border-color: rgba(198,185,150,.5); } .cx-contrib-btn { position: relative; padding: 0 0 3px; background: none; border: 0; border-bottom: 1px solid rgba(198,185,150,.5); color: var(--gold); font: inherit; font-size: 14px; cursor: pointer; transition: color .25s ease, border-color .25s ease; } .cx-contrib-btn:hover { color: var(--gold-light); border-color: var(--gold-light); } .cx-contrib-btn::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); } .cx-contrib-fine { flex: 1 1 100%; font-size: 12px; line-height: 1.5; color: rgba(255, 251, 239, .5); } .cx-alt-follow { margin-top: 18px; padding-top: 16px; font-size: 13.5px; border-top: 1px solid rgba(198, 185, 150, .1); } .cx-follow-note { text-align: center; margin: 18px 0 0; font-size: 13.5px; color: var(--cream-faint); } .cx-follow-note a { color: var(--gold); } .tier { display: flex; flex-direction: column; gap: 0; padding: 30px 26px 28px; border-radius: 16px; background: var(--panel); border: 1px solid rgba(255,255,255,.06); } .tier.hi { border-color: var(--gold-dim); background: var(--panel-hi); } .tier-name { font-size: 11.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); } .tier-price { font-family: var(--font-serif); font-style: italic; font-size: clamp(34px, 4vw, 44px); color: #fff; margin: 14px 0 4px; line-height: 1; } .tier-sub { font-size: 12px; color: var(--cream-faint); letter-spacing: .05em; line-height: 1.6; } .tier p { font-size: 14px; color: var(--cream-soft); line-height: 1.65; margin: 16px 0 0; } .tier ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .tier li { font-size: 13.5px; color: var(--cream-soft); padding-left: 20px; position: relative; } .tier li::before { content: '—'; position: absolute; left: 0; color: var(--gold); } .fineprint { margin-top: 26px; font-size: 12px; color: var(--cream-faint); line-height: 1.7; } .fineprint a { color: var(--gold); } /* Skeptic-linja: den anti-press-ærligheten beholdes, men som én rolig linje under kortene i stedet for en $0-fane med samme vekt som betalings-valgene. */ .cx-skeptic-line { margin-top: 20px; font-family: var(--font-serif); font-style: italic; font-size: 13.5px; letter-spacing: .02em; color: var(--cream-faint); } @keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } } @media (min-width: 861px) { .gitem { flex-basis: 38%; } .gallery { padding-inline: max(var(--edge), calc((100% - 1120px) / 2)); } .gallery-hint { display: none; } } @media (prefers-reduced-motion: reduce) { .gallery-hint svg { animation: none; } } /* Instagram-lenke i footer */ .ig-link { display: inline-flex; align-items: center; gap: 7px; color: var(--gold); } .ig-link:hover { color: var(--gold-light); } .ig-link svg { width: 16px; height: 16px; } /* ---------- faq ---------- */ .faq-list { margin-top: 30px; border-top: 1px solid var(--line); } .gl-campaign details { border-bottom: 1px solid var(--line); } .gl-campaign summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 17px 2px; font-family: var(--font-serif); font-style: italic; font-size: clamp(16px, 2vw, 18.5px); color: var(--cream); } .gl-campaign summary::-webkit-details-marker { display: none; } .gl-campaign summary::after { content: '+'; font-family: var(--font-sans); font-style: normal; color: var(--gold); font-size: 20px; font-weight: 300; transition: transform .25s ease; } .gl-campaign details[open] summary::after { transform: rotate(45deg); } .gl-campaign details p { margin: 0 0 18px; font-size: 14px; color: var(--cream-soft); max-width: 62ch; } /* ---------- close / signup ---------- */ .close-sec { background: var(--bg2); } .close-sec h2 { font-size: clamp(30px, 5vw, 46px); } /* ---- DELINGSBLOKKA i avslutningen (09.08.2026) ---- Seksjonen har nå to ærend: del siden (gratis) og følg med (e-post). De må LESE som to, ellers blir det én lang vegg av tekst — derfor hårstrek over hver, ikke bare luft. */ /* ---- TO KORT SIDE OM SIDE (Tor 10.08) ---- ⛔ HER LÅ `.cx-share, .cx-follow` som to STABLEDE blokker à 620px, skilt med hårstrek. Seksjonen leste da som én lang vegg der begge ærendene tapte. Nå er de et par: samme form, samme flate, side om side — også på mobil. 🪤 `align-items: stretch` (standard) gir like høye kort, men delingsteksten er tre linjer og e-postteksten én. Uten `margin-top: auto` på handlingen ville knappen og skjemaet stått i ulik høyde og raden sett skjev ut. Derfor er kortene `flex column` med handlingen forankret i bunnen. */ /* 🪤 `minmax(0, 1fr)`, IKKE `1fr`. `1fr` er `minmax(auto, 1fr)`, og `auto`- minimumet er innholdets MIN-CONTENT. E-postfeltet har `flex-basis: 220px`, så følg-kortet nektet å bli smalere enn det og dyttet kolonnene til 139px / 232px i stedet for like. Målt. `minmax(0, …)` lar kolonnen krympe under innholdets minstebredde, og da blir de faktisk like. */ .cx-close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: clamp(10px, 1.6vw, 20px); max-width: 940px; margin: clamp(30px, 5vw, 44px) auto 0; } /* Samme årsak: uten dette holder inputen på 220px-basisen sin og sprenger kortet. I et kort skal feltet fylle bredden og ikke ha egen minstebredde. */ .cx-card .signup input[type="email"], .cx-card .signup .btn { flex: 1 1 100%; } .cx-card { display: flex; flex-direction: column; text-align: center; padding: clamp(18px, 2.6vw, 32px) clamp(13px, 2.2vw, 30px); border-radius: 16px; background: var(--panel); border: 1px solid rgba(255, 255, 255, .06); } .cx-card .eyebrow { justify-content: center; } /* Handlingen nederst i begge kortene — se fella over. */ .cx-card .cx-share-row, .cx-card .signup { margin-top: auto; padding-top: clamp(16px, 2.4vw, 24px); } /* `.signup` er sentrert med `margin: 32px auto 0` og `max-width: 620px` for frittstående bruk. Inne i et kort må begge nullstilles, ellers får skjemaet egen toppmarg oppå `padding-top` og nekter å fylle kortbredden. */ .cx-card .signup { margin-left: 0; margin-right: 0; margin-bottom: 0; max-width: none; } .cx-card .chips { margin-top: clamp(12px, 1.8vw, 20px); } /* ⛔ TO KOLONNER PÅ TELEFON ER PRØVD OG MÅLT — det virker ikke med DETTE innholdet, og grunnen er ikke smak. På 375px blir hvert kort 162px, og tekstflaten 138px. Målt der: · «Not everyone can pledge. Anyone can pass it on.» brakk i fire linjer · brødteksten ble en stripe på fire–fem ord i bredden · knappene ble 87 og 99px HØYE, fordi «SHARE THIS PAGE» og «KEEP ME POSTED» brekker i tre linjer i 138px · kortene ble 684px høye hver To kolonner fungerer når et kort inneholder LITE (ikon, kort etikett, knapp). Disse to bærer overskrift, brødtekst, skjema og chips. Kortformen beholdes derfor på mobil — den er penere enn hårstrekene den erstattet — men de legger seg under hverandre og får full lesebredde. Side om side fra 560px, der tekstflaten er ≥250px og setningene puster. ⛔ Ikke sett to kolonner på telefon igjen uten å korte ned innholdet først. */ @media (max-width: 559px) { .cx-close-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 26px; } .cx-card { padding: 22px 18px; border-radius: 14px; } } /* Serif og rolig, som resten av overskriftene — h3 arvet sans-serif fet og brøt stemmen i seksjonen. Se [[heading-calm-voice]]. */ /* Gjelder BEGGE kortene nå (var `.cx-share h3`). Nedre clamp-grense senket 21 → 17px: i et 161px-kort brakk 21px serif «Not everyone can pledge» i frimerker. */ .cx-card h3 { margin: 12px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(17px, 2.6vw, 27px); line-height: 1.25; letter-spacing: .032em; color: var(--cream); } .cx-card > p { margin-top: 12px; } /* Kun ÉN knapp her (Tor 10.08: «bare share»). X og Reddit er fjernet — de var to ekstra valg i et øyeblikk som bør ha nøyaktig ett. */ .cx-share-row .btn { display: inline-block; } /* ⛔ HER LÅ `.cx-share-row { margin-top: 24px }`, `.cx-follow-k` og `.cx-follow .signup { margin-top: 20px }`. Alle tre er SLETTET, ikke kommentert ut: · `.cx-follow-k` — etiketten er byttet mot `.eyebrow`, så regelen var død. · de to margin-reglene — de satte `margin-top` på nøyaktig de elementene som nå skal ha `margin-top: auto` for å forankres i bunnen av kortet. 🪤 `.cx-follow .signup` (0,2,0) hadde SAMME spesifisitet som `.cx-card .signup` (0,2,0) og sto ETTER den i fila — den ville altså vunnet på kildeorden og stille satt skjemaet tilbake til `margin-top: 20px`. Kortene hadde da sett skjeve ut uten at noe så galt ut i koden. */ .signup { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 32px auto 0; max-width: 620px; } .signup input, .signup select { font-family: var(--font-sans); font-size: 14.5px; font-weight: 300; color: var(--cream); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.14); border-radius: 2px; padding: 15px 16px; min-width: 0; } .signup input[type="email"] { flex: 2 1 220px; } .signup select { flex: 1 1 150px; } .signup input::placeholder { color: var(--cream-faint); } .signup select option { background: var(--bg2); color: var(--cream); } .signup .btn { flex: 1 1 170px; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .chips { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 24px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-faint); } .ok-note { margin-top: 24px; font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--gold-light); } /* ---------- footer ---------- */ .gl-foot { padding: 44px 0 110px; } .foot-row { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 12px; letter-spacing: .05em; color: var(--cream-faint); } .foot-row a { color: var(--gold); } .foot-small { margin-top: 16px; font-size: 11.5px; line-height: 1.8; color: rgba(255,251,239,.35); max-width: 82ch; } .foot-small a { color: rgba(198,185,150,.65); } /* ---------- sticky (desktop-pille, nede til høyre) ---------- Var en fullbredde bunn-bar — den kjempet med Complianz' «Manage consent»- fane i samme hjørne (Tor 08.08 kveld). Nå: kompakt pille nede til høyre; consent-fanen er skjult (regel nederst i blokka) og erstattet av en «Manage consent»-lenke i footeren på begge sider — Complianz binder klikk på klassen selv, så samtykke er fortsatt ett klikk unna overalt. */ .sticky { position: fixed; right: 20px; bottom: 20px; left: auto; z-index: 50; display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 18px; max-width: min(430px, calc(100vw - 40px)); background: rgba(11, 20, 30, .96); border: 1px solid rgba(198, 185, 150, .3); border-radius: 3px; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); transform: translateY(calc(100% + 28px)); transition: transform .35s ease; } .sticky.show { transform: none; } .sticky-info { flex: 1; min-width: 150px; } /* Complianz-fanen (button) skjules — footer-lenka a.cmplz-manage-consent overtar jobben. ⛔ Ikke skjul a-varianten: det ER erstatningen. */ button.cmplz-btn.cmplz-manage-consent { display: none !important; } .sticky-nums { font-size: 12px; color: var(--cream-soft); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-nums b { color: var(--gold-light); font-weight: 500; } .sticky-track { height: 2px; background: rgba(255,251,239,.14); margin-top: 7px; } .sticky-track i { display: block; height: 100%; background: var(--gold); } .sticky .btn { padding: 13px 20px; font-size: 11.5px; white-space: nowrap; } /* ============================================================ BRETTBREDDER ============================================================ */ @media (max-width: 880px) { /* Tab-veksleren og skjul/vis-toggelen røk med én-tier-omleggingen (08.08): solo-kortet skal alltid vises, på alle bredder. */ .tier-grid { grid-template-columns: 1fr; margin-top: 18px; } } @media (max-width: 640px) { /* SCENE 2 (filosofi): mørk ink på den lyse døra — kraftig krem-scrim gir lesbar kontrast */ .cap-top-m /* SPECS: 2-kolonners rutenett */ .specs { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { /* hero er stacket (height:auto) via ≤640-regelen */ .fund-raised { font-size: clamp(52px, 15vw, 64px); } .fund-cta .btn { width: 100%; } .arc { width: min(280px, 78vw); } .fund-tiles { grid-template-columns: 1fr 1fr; gap: 18px 0; } .ftile:nth-child(3) { border-left: none; } .stat-row { gap: 18px 26px; } .signup input[type="email"], .signup select, .signup .btn { flex: 1 1 100%; font-size: 16px; } .tier { padding: 26px 20px 24px; } .sheet { padding: clamp(60px, 13vw, 88px) 0; } .duo img { height: clamp(220px, 38vh, 320px); } } @media (prefers-reduced-motion: reduce) { .cx-path-fill, .cx-path-marker, .cx-path-here { transition: none; } .sticky { transition: none; } } /* ========================================================================== KONSEPTSIDEN — siden handler kun om neste telefon (16.07) Grepet: mediet bærer sannheten. Render/skisse er merket «concept», aldri presentert som produkt. Gull kun på tall/eyebrow, aldri på overskrifts-em (jf. den rolige stilen). ========================================================================== */ /* ---- HERO: videoen er tesen ---- */ /* Bunnpaddingen strammet 48→28 på mobil (08.08): CTA-en som sto nederst i tekstspalta er borte, og det gamle rommet ble til et tomt navy-belte før bildet under. Desktop beholder luften — der ligger teksten oppå bildet. */ .cx-hero { padding: clamp(26px, 4vw, 48px) 0 clamp(28px, 6vw, 76px); } /* uten denne blåser video/grid ut sidebredden */ /* skal ikke bli et layout-ledd — img-en må være barnet som teller. */ .cx-hero-stage picture, .cx-bleed picture { display: contents; } /* MOBIL/BASIS: bilde, så tekst under. Uendret oppførsel. */ .cx-hero-stage { position: relative; } .cx-hero-stage img { width: 100%; height: auto; display: block; } .cx-hero-say { padding: clamp(24px, 5vw, 34px) var(--edge) 0; } /* mobil: teksten ligger under full-bredde-bildet og trenger kantluft; desktop-absolutt overstyrer med padding:0 */ .cx-hero-say h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.2; letter-spacing: .032em; margin: 0 0 18px; text-wrap: balance; } .cx-hero-say h1 em { font-style: italic; color: var(--text); } /* hvit kursiv — aldri gull */ /* ⛔ HER LÅ `.cx-hero-price` (prisankeret «$399 to reserve …»). Slettet 08.08 sammen med hero-CTA-en — heroen skal ikke be om noe. Prisen står der den faktisk brukes: i #fund nederst og på /the-phone. */ /* FUNDING-BÅNDET (redesignet 08.08 kveld, Tor: «mye finere og renere»). Komposisjon i stedet for boks: sum til venstre, to rolige tekst-stats til høyre (chips-pillene er DØDE — de leste som byråkrati), instrument-linja i full båndbredde under, og «nothing charged»-løftet flyttet dit beslutningen tas: som mikrocopy ved CTA-en. Selve bånd-flaten defineres i blokka lenger ned i fila (etter FLATE-STIGEN) — her bor komponentene. */ .cx-fund-eyebrow { display: block; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-faint); margin-bottom: 7px; } .cx-amt { display: block; font-family: var(--font-serif); font-size: clamp(38px, 4.8vw, 56px); line-height: 1; color: var(--gold-light); font-variant-numeric: tabular-nums; letter-spacing: .01em; } .cx-amt-of { font-family: var(--font-sans, sans-serif); font-size: clamp(13px, 1.6vw, 16px); font-weight: 400; color: var(--cream-faint); margin-left: 10px; letter-spacing: .02em; } .cx-of { display: block; font-size: 14.5px; color: var(--cream-soft); margin: 12px 0 0; } .cx-of b { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; } /* ⛔ HER LÅ `.cx-hero-facts` (ikonrad med mål/NFC/batteri) og `.cx-hero-honest`. Begge fjernet 08.08 (Tor: «produktdetaljene kan fjernes»): heroen er bilde + slagord, ingenting mer. Faktaene lever nå i `.cx-traits` i misjons-seksjonen, der de svarer på «hva bygger dere». ⛔ Ikke flytt dem opp i heroen igjen. */ /* TRE KJENNETEGN i misjons-seksjonen. Gir en ellers ren tekstseksjon kropp, så den ikke leser som et hull mellom to bilder (Tor 08.08). Hårstrek over hver rad binder dem sammen som ÉN blokk i stedet for tre løse linjer. */ .cx-traits { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; } .cx-traits li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 3px 14px; align-items: center; padding: 16px 0; border-top: 1px solid rgba(198, 185, 150, .18); } .cx-traits li:last-child { padding-bottom: 0; } .cx-traits svg { grid-row: span 2; width: 22px; height: 22px; color: var(--gold); align-self: center; } .cx-traits b { font-weight: 400; font-size: 15.5px; color: var(--text); letter-spacing: .01em; } .cx-traits span { font-size: 12.5px; color: var(--cream-faint); } @media (min-width: 760px) { /* Tre spalter når det er plass — da leser de som ett bånd, ikke en liste. */ .cx-traits { grid-template-columns: repeat(3, 1fr); gap: 0 28px; max-width: 860px; } .cx-traits li:last-child { padding-bottom: 16px; } /* Maskinvare-varianten har seks punkter ⇒ to rader à tre. */ .cx-traits.is-hw { max-width: 1000px; } .cx-traits.is-hw li { padding-bottom: 16px; } } /* ===== «HALF THE SIZE» — VIDEOEN FØRST (Tor 08.08) ===== «Videoen er det sterkeste innholdet vi har, så den bør være det første vi viser.» `.is-lead` bryter to-spalte-oppsettet: videoen får full spaltebredde øverst, teksten står under. Gjelder ALLE bredder — poenget er at motivet kommer først, ikke at det deler plass med en tekstkolonne. ⛔ Overstyrer `.cx-teaser`s grid lenger opp; må stå etter den. */ .cx-teaser.is-lead { display: block; } .cx-teaser.is-lead .cx-media { margin: 0 0 clamp(24px, 3.4vw, 40px); } .cx-teaser.is-lead > div:not(.cx-media) { max-width: 62ch; } @media (min-width: 1024px) { /* Video i full bredde, tekst i rolig lesebredde under — ikke strukket. */ .cx-teaser.is-lead .cx-media { max-width: 1060px; } } /* ===== OMRÅDE 2: teknisk bilde + skjermtallet ===== Tor 08.08: overskriften «flagship mini phone» skulle ha et teknisk bilde og bo i spesifikasjonsseksjonen, og hele meningen — den lille skjermen — skulle gjentas og presiseres der. */ /* SKISSEBOKA: video + tre tegninger (Tor 08.08). Videoen er PORTRETT (720×1280) og må cappes — i full spaltebredde ville den blitt over 2000 px høy på desktop. Tegningene står på sitt eget krempapir; blyant på navy blir gjørme. */ .cx-sketchbook { margin: 30px 0 0; } .cx-tech { margin: 0; border: 1px solid var(--line-soft); border-radius: 3px; padding: clamp(8px, 1.4vw, 14px); max-width: 380px; } .cx-tech img, .cx-tech video { display: block; width: 100%; height: auto; border-radius: 2px; } /* ⛔ HER LÅ `.cx-sketches` — rutenettet med tre blyanttegninger. Tor 08.08: to fjernet, den tredje flyttet opp i den beige seksjonen. Reglene er slettet, ikke gjemt. Se `.cx-gap-sketch` under for den som overlevde. */ /* Blyantskissa i den beige seksjonen. INGEN ramme, ingen flate: tegningen er på krempapir og seksjonen er krem, så den skal smelte inn som en artikkelillustrasjon. Bildeteksten er den mørknede gullen — `--gold` måler 1,6:1 på krem og er ulesbar ([[forside-film-live]]). */ /* 🪤 Bunnmargen er ikke pynt: uten den sto bildeteksten 10 px fra bildet og 0 px fra neste avsnitt, og ble lest som brødtekst. Den MÅ ligge nærmere bildet enn teksten under. Gjelder mobil/nettbrett — desktop overstyrer hele margin-en i float-regelen lenger ned. */ .cx-gap-sketch { margin: clamp(26px, 4vw, 40px) 0 clamp(30px, 5vw, 38px); } .cx-gap-sketch img { display: block; width: 100%; height: auto; max-width: 560px; } .cx-gap-sketch figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #7E6F45; } @media (min-width: 900px) { /* Tegningen flyter til høyre for brødteksten — som en figur i en artikkel, ikke som et bånd som stopper lesingen. */ .cx-gap-sketch { float: right; width: 42%; max-width: 460px; margin: 4px 0 24px clamp(28px, 4vw, 52px); } .cx-gap-sketch img { max-width: none; } /* 🪤 Flyten MÅ nullstilles før verdiflisene, ellers legger de seg rundt tegningen i stedet for under den. */ .is-light .cx-values { clear: both; } } @media (min-width: 1024px) { /* 🪤 Første forsøk satte rutenettet TIL HØYRE for videoen. Målt ble videoen 622 px og rutenettet 989 px — kolonnene sprikte 367 px, og seksjonen ble unødig lang. Nå: videoen til venstre og skjermtallet ved siden av (de to hører sammen — «konsept → produkt» og «4.3″ er poenget»), mens de tre tegningene ligger i full bredde under. Da fylles raden, og høydene møtes. */ .cx-sketchbook { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: center; max-width: 1060px; } .cx-sketchbook .cx-screen { margin: 0; padding-top: 0; border-top: 0; } } /* Skjermtallet står ALENE og stort før spec-lista: resten av lista er «flaggskip», denne linja er «mini». Gull-hårstrek over binder den til bildet uten å lage enda en boks. */ .cx-screen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; align-items: center; margin: 34px 0 0; padding-top: 26px; border-top: 1px solid rgba(198, 185, 150, .28); } .cx-screen > b { font-family: var(--font-serif); font-size: clamp(40px, 7vw, 58px); line-height: 1; color: var(--gold-light); letter-spacing: .01em; } .cx-screen strong { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(17px, 2.1vw, 21px); color: var(--text); letter-spacing: .02em; margin-bottom: 6px; } .cx-screen span { font-size: 14px; line-height: 1.7; color: var(--cream-soft); max-width: 54ch; } @media (max-width: 559px) { /* Tallet over teksten på smal skjerm — 58px + tekst på samme rad blir trangt. */ .cx-screen { grid-template-columns: 1fr; gap: 10px; } } .cx-fund-backers { display: block; margin-top: 16px; font-size: 12.5px; color: var(--cream-faint); } .cx-fund-backers b { color: var(--gold-light); font-weight: 500; } .cx-cta { margin-top: 20px; } .cx-cta .btn { width: 100%; box-sizing: border-box; text-align: center; /* Kortet setter line-height 1.7 på brødtekst, og knappen arvet den: 63 px høy mot e-postknappens 56. `normal` gjør dem like høye. */ line-height: normal; } /* Reserve-knappen og «Keep me posted» skal se like ut (Tor 09.08). Den ene var 13 px, den andre 16 — fordi `.signup .btn` arver oppzoomingen fra input-regelen som hindrer at iOS zoomer på fokus. Vi speiler den bevisst her i stedet for å dra e-postknappen ned, siden 16 px er den som ser rett ut på telefon. Over 560 px er begge 13 px, som før. ⛔ Endrer du `.signup`-regelen, endre denne i samme slengen. */ @media (max-width: 560px) { .cx-cta .btn { font-size: 16px; letter-spacing: .14em; } } /* 🪤 `.cx-fund-fine` sto på 12 px og BLE OVERSTYRT til 16 av `.cx-sec p` i mobil-blokka — lik spesifisitet, senere kildeorden. Da var «finskriften» like stor som brødteksten. Selektoren er derfor bevisst tyngre (0,2,1) enn `.cx-sec p` (0,1,1), så den vinner uansett hvor den står i fila. Tredje gang samme felle slår til i denne fila: taper man her, taper man nesten alltid på kildeorden, ikke på spesifisitet. */ .cx-sec p.cx-fund-fine { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; letter-spacing: .01em; color: rgba(255, 251, 239, .6); } /* Én kort linje, sentrert under knappen. Var tre linjer venstrestilt småskrift som tok mer oppmerksomhet enn CTA-en (Tor 08.08). Frist + avbestilling er flyttet til Terms / «how it works» — her står bare det ene løftet. */ .cx-fund-fine { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--cream-faint); text-align: center; } /* ⛔ HER LÅ `.cx-hero-cta`. Knappen er FJERNET fra heroen (Tor 08.08): to reserve-punkter på samme side ble støy, og det nederste kortet er det gode. Asken skjer én gang, i #fund. ⛔ Ikke gjeninnfør en CTA her. */ /* ---- PRESSE i heroen (Tor 08.08: den frittstående stripa var «en rar seksjonsbryter»). Nå én linje i tekstspalta, med gull-hairline over som skiller den fra CTA-en. `.cx-press*`-reglene til den gamle stripa er SLETTET herfra — seksjonen finnes ikke lenger i markupen. ---- */ .cx-hero-press { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(198, 185, 150, .18); } /* 🔠 TITTELEN SKAL LESE SOM ET MERKE, IKKE SOM EN TEKSTLENKE (Tor 10.08). Den sto 17px serif KURSIV. Kursiv serif er korrekt engelsk typografi for en tidsskrifttittel inne i brødtekst — men her er ikke jobben å nevne et blad, det er å vise et presselogo. Rett (ikke-kursiv) og større leser som en masthead; kursiv leser som en henvisning midt i en setning. ⛔ Layouten holdes på ÉN linje med vilje. Et innrammet merke er PRØVD og forkastet 08.08 («en rar seksjonsbryter») — ikke bygg boksen på nytt. 📌 GJENSTÅR: dette er fortsatt satt i vår egen skrift. Den ekte Wallpaper*- logoen må hentes fra deres pressesider og legges inn som SVG; vi dikter ikke opp en tilnærming av andres varemerke. */ /* 🔠 RETT, IKKE KURSIV — men DEMPET (Tor 10.08, to runder). Runde 1 satte den til 21px for å lese som et presselogo. Da ble den sidens nest tyngste element etter h1, og én enkelt omtale skal ikke bære den vekten. Runde 2: rett skrift beholdes (kursiv leser som en henvisning midt i en setning, ikke som et merke), men størrelsen ned til 15px. Den skal fungere som en referanse man kan sjekke, ikke som en plakett. ⛔ Ikke skru den opp igjen uten at det finnes flere omtaler å stå på. */ .cx-hero-press a { display: inline-flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-family: var(--font-serif); font-style: normal; font-size: 15px; letter-spacing: 0; color: var(--cream-soft); transition: color .25s ease; } .cx-hero-press span { font-family: var(--font-sans); font-style: normal; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-faint); } /* 🪤 Tittelen MÅ ligge i ett element: `display:flex` + `gap` gjør en naken tekstnode og `` til to flex-elementer, og da får asterisken 9px luft («Wallpaper *»). `` holder navn og stjerne sammen som ett element. */ .cx-hero-press b { font-weight: 400; } .cx-hero-press i { font-style: normal; color: var(--gold); } .cx-hero-press a:hover { color: var(--gold-light); } /* ========================================================================== LYS FLATE (.is-light) — kremen som motvekt til navy (Tor 05.08: «kan ikke bare være mørk»). Papir-skissa var sidens eneste lyse pust; da den røk ble løpet ensfarget. Dette er pusten tilbake, men i MERKEVAREFARGER: krem #FFFBEF + blekk, ikke et skannet ark. Idiomet er VARIABELBYTTE, samme grep som kassen på aeros.no: seksjonen redefinerer tokenene sine, så hver komponent inni snur farge av seg selv. Ingen komponentregel dubleres — legg .is-light på en seksjon, og alt fra .eyebrow til hårstrek-grida følger med. ⚠️ To feller: 1. GULLET MÅ MØRKNES, og mer enn man tror. Målt mot krem #FFFBEF: #C6B996 = 1,6:1 (ulesbart) · #8A7A4E = 4,06:1 (fortsatt under kravet) · #7E6F45 = 4,75:1 ✔. Eyebrow og stripe-etikettene er 11 px, altså SMÅTEKST — de må over 4,5:1, ikke 3:1. Ikke lysne gullet «litt» tilbake. 2. Ikke bruk .btn-gold her (gull på krem = for svak kontrast for en knapp). Lyse flater skal være uten CTA — de er pust, ikke konvertering. De dempede tekstfargene er kalibrert mot den MØRKE flatas faktiske ratio (5,16:1), ikke mot alfaverdien: samme alfa gir mye svakere kontrast på krem. ========================================================================== */ .is-light { --bg: #FFFBEF; --bg2: #F4EEDD; --panel: rgba(20, 16, 10, .035); --panel-hi: rgba(20, 16, 10, .06); --line: rgba(20, 16, 10, .16); --line-soft: rgba(20, 16, 10, .11); --border-subtle: rgba(20, 16, 10, .16); --text: #14100A; /* --cream betyr «lesbar tekstfarge» i komponentene, ikke fargen krem. Derfor snus den til blekk her — ellers blir all brødtekst usynlig. */ --cream: #14100A; --cream-soft: rgba(20, 16, 10, .76); /* 8,7:1 */ --cream-faint: rgba(20, 16, 10, .62); /* 5,2:1 — .52 ga bare 3,7:1 */ --text-faint: rgba(20, 16, 10, .62); --gold: #7E6F45; /* 4,75:1 */ --gold-light: #635737; /* hover — 6,8:1 */ --gold-bright: #635737; --gold-dim: rgba(126, 111, 69, .45); background: var(--bg); color: var(--text); /* Gullstreken mot navy: overgangen skal lese som villet, ikke som en glipp. Fast rgba, ikke token — den skal holde samme verdi på BEGGE sider av kanten. */ border-block: 1px solid rgba(198, 185, 150, .5); } /* ---- RENDER-STRIPE: kontaktkopi av det låste designet ---- Tre mørke renders på krem leser som fotografier på et arkark. ⛔ INGEN vannrett sveip (Tor 05.08: «ikke noe fan av sveiping til venstre på mobil»). Rutenett i BEGGE bredder — mobil får tre kompakte miniatyrer man TRYKKER for å se stort. Beskrivelseslinja skjules under 760 px (13 px tekst i en ~110 px kolonne blir åtte linjer); den vises i lysboksen i stedet. ⚠️ Utsnittet er 4:5 med object-fit:cover — sjekk at MOTIVET overlever beskjæringen. `concept-soft-back.jpg` er 690×1810 og mistet kameraet i en midtstilt crop; derfor det toppvektede utsnittet `concept-back-detail.jpg`. */ .cx-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 2vw, 22px); margin-top: 30px; } .cx-strip > * { min-width: 0; } .cx-strip figure { margin: 0; } .cx-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--bg2); border: 1px solid var(--line-soft); } .cx-strip figcaption { margin-top: 11px; } .cx-strip b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; } .cx-strip span { font-size: 13.5px; line-height: 1.6; color: var(--cream-faint); } @media (max-width: 759px) { .cx-strip b { font-size: 10px; letter-spacing: .1em; } /* Beskrivelsen får ikke plass i en ~106 px kolonne (13,5 px tekst ble åtte linjer). Den kommer tilbake når toggelen under åpner rutenettet. */ .cx-strip span { display: none; } } /* ---- STØRRE VISNING PÅ TELEFON — erstatter lysboksen (Tor 05.08) ---- ⛔ HER LÅ `.cx-lightbox` + `.cx-zoom`. Rutene var knapper som åpnet en i top layer. Tor: «forstørrer jeg de blir det noe feil med visningen — bare forenkle det». Fjernet, ikke kommentert ut. Erstatningen er ren layout: én klasse på rutenettet bytter fra tre små ruter til én stor per rad, og beskrivelsene kommer til syne. Ingen overlegg, ingen top layer, ingenting som kan rendre feil oppå noe annet. Kun telefon — på desktop er rutene alt store nok, og toggelen er skjult. */ .cx-strip.is-large { grid-template-columns: 1fr; gap: clamp(22px, 6vw, 34px); } .cx-strip.is-large img { aspect-ratio: 4 / 3.4; } .cx-strip.is-large b { font-size: 11px; letter-spacing: .16em; } .cx-strip.is-large span { display: block; font-size: 14px; } /* Toggelen. Tekstknapp, ikke .btn-gold: dette er en lys flate, og gull på krem holder ikke som knapp (se .is-light). `--gold` er alt mørknet til #7E6F45 her. */ .cx-strip-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 18px; padding: 0; background: none; border: 0; cursor: pointer; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); -webkit-tap-highlight-color: transparent; } .cx-strip-toggle::after { content: "+"; font-size: 16px; line-height: 1; } .cx-strip-toggle[aria-expanded="true"]::after { content: "–"; } .cx-strip-toggle:hover { color: var(--gold-light); } @media (min-width: 760px) { .cx-strip-toggle { display: none; } } /* ---- TEASER-STRIPER ---- */ .cx-sec { padding: clamp(60px, 8vw, 104px) 0; } .cx-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.6vw, 52px); align-items: center; } .cx-teaser > * { min-width: 0; } .cx-teaser.flip .cx-media { order: 2; } .cx-media { position: relative; overflow: hidden; background: var(--bg2); border: 1px solid var(--line-soft); } .cx-media img, .cx-media video { width: 100%; height: auto; display: block; } .cx-media.is-paper { background: #efe9dc; } /* skissa er på papir — la flaten være papir */ /* Bildetekst-stripe INNE i medierammen (Tor 10.08). Den ligger her og ikke i tekstspalta av to grunner: `.cx-teaser` er et 2-kolonners rutenett, så et tredje barn ville sprengt oppsettet — og en merkelapp som skal si hva DETTE klippet er, må sitte på klippet. `.cx-media` har alt egen flate og ramme, så en delelinje gjør den til et figurfelt i stedet for løs tekst. 🪤 MÅ være `.cx-media .cx-medianote` (0,2,0). Med bare `.cx-medianote` (0,1,0) vinner `.cx-sec p` (0,1,1) — målt live: 15,5px i stedet for 12, `max-width: 58ch` som krympet stripa til 555 av 710 px, og `margin-bottom: 16px` som dyttet teksten UT av medierammen. `max-width` og `margin` må derfor nullstilles eksplisitt; det holder ikke å sette font-size. */ .cx-media .cx-medianote { margin: 0; max-width: none; padding: 9px 12px 10px; font-size: 12px; line-height: 1.5; color: var(--cream-faint); border-top: 1px solid var(--line-soft); } /* ⛔ HER LÅ `.cx-stamp` — «Render · concept»-merket i bildehjørnene. FJERNET 08.08 (Tor): siden sier allerede overalt at telefonen ikke finnes ennå, og et stempel på hvert motiv gjentok det uten å tilføre noe. Markup fjernet fra begge sider i samme runde. Ikke gjeninnfør. */ .cx-sec h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.2; letter-spacing: .032em; margin: 0 0 16px; text-wrap: balance; } .cx-sec h2 em { font-style: italic; color: var(--text); } .cx-sec p { font-size: 15.5px; line-height: 1.7; color: var(--cream-soft); margin: 0 0 16px; max-width: 58ch; } .cx-note { font-size: 13px !important; color: var(--cream-faint) !important; } .cx-fine { font-size: 12.5px !important; color: var(--cream-faint) !important; max-width: none !important; margin-top: 20px !important; } /* nøkkeltall — gull ER lov på tall */ .cx-figs { display: flex; gap: clamp(18px, 4vw, 44px); flex-wrap: wrap; list-style: none; padding: 0; margin: 22px 0 0; } .cx-figs li { display: flex; flex-direction: column; } .cx-figs b { font-family: var(--font-serif); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: var(--gold); line-height: 1; } .cx-figs span { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--cream-faint); margin-top: 6px; } /* ---- SPECS: hårstrek-rutenett (teknisk datablad) ---- */ .cx-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 12px; background: var(--line-soft); border: 1px solid var(--line-soft); } .cx-specs > * { min-width: 0; } .cx-spec { background: var(--bg); padding: 22px 20px; } .cx-spec b { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 6px; } .cx-spec span { font-size: 15px; color: var(--text); } /* ---- PROOF: Juno nedtonet ---- */ .cx-proof { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; border: 1px solid var(--line-soft); background: var(--panel); border-radius: 3px; padding: 22px 24px; } .cx-proof img { width: 78px; height: auto; flex: 0 0 auto; } .cx-proof p { margin: 0 !important; flex: 1 1 300px; } /* ---- OM OSS: underoverskrift + verdi-rutenett ---- Samme harstrek-sprak som .cx-specs (gap:1px pa line-soft) sa seksjonen leser som resten av siden, ikke som en fremmed kort-modul. */ .cx-sub { font-family: var(--font-serif); font-weight: 400; letter-spacing: .028em; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.25; color: var(--text); margin: 52px 0 14px; } .cx-sub em { font-style: italic; color: var(--text); } .cx-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 24px; background: var(--line-soft); border: 1px solid var(--line-soft); } .cx-values > * { min-width: 0; } .cx-value { background: var(--bg); padding: 26px 24px 28px; } /* SVG-ene barer OGSA width/height som attributt — uten det faller de tilbake til nettleserens 300x150 hvis CSS-en ikke har rukket a laste. Begge deler med vilje. */ .cx-value-ic { display: block; width: 22px; height: 22px; color: var(--gold); margin-bottom: 14px; } .cx-value-ic svg { width: 22px; height: 22px; max-width: 100%; display: block; } .cx-value b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 17.5px; letter-spacing: .02em; color: var(--text); margin-bottom: 9px; } .cx-value p { font-size: 14.5px; line-height: 1.72; color: var(--cream-soft); margin: 0 !important; } /* ---- FOUNDER — rundt foto + REN løpende tekst (Tor 08.08 sen kveld: «Vi vil ha en tekst mer enn sitat-utheving. Ser det ikke funker»). ⛔ PRØVD OG FORKASTET samme dag, ikke gjeninnfør: sitatpanelet `.cx-quote` (serif kursiv i panel med gull-hairline + anførselstegn) OG sitat-flisene `.cx-qtiles` (2×2 rutenett). Begge reglene er SLETTET herfra, sammen med gullstrek-nedtegningen i reveal-blokka og `#who .cx-quote` i campaign.js. Portrettet er et EKTE FOTO levert av Tor — aldri tegning, aldri AI. ---- */ /* BYLINE-MØNSTER (Tor 08.08: portrettet sto alene på egen rad på mobil og «tok hele plassen horisontalt»). Nå ligger foto + navn SAMMEN på én rad — som en byline i en avis — og brødteksten går i full bredde under. Samme struktur på alle skjermer, så det ikke finnes to layouter å vedlikeholde. 🪤 `.cx-founder-sign` MÅ være direkte barn av `.cx-founder` for at grid-area skal virke — flyttes den inn i tekstblokka igjen, faller navnet ned under brødteksten. */ .cx-founder { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "foto navn" "tekst tekst"; align-items: center; gap: 0 14px; margin-top: 10px; } .cx-portrait { grid-area: foto; margin: 0; } .cx-portrait img { display: block; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(198, 185, 150, .3); } /* 🪤 `.cx-sec p` (linje 752, spesifisitet 0,1,1) slår `.cx-founder-sign` alene (0,1,0) uansett rekkefølge — navnet er en

. Derfor `.cx-founder .cx-founder-sign` (0,2,0) her, ikke bare klassen. Samme fellemønster som `.cx-fund-fine`. */ .cx-founder .cx-founder-sign { grid-area: navn; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 !important; } .cx-founder-txt { grid-area: tekst; margin-top: 20px; } .cx-founder-txt p { font-size: 15.5px; line-height: 1.75; color: var(--cream-soft); max-width: 62ch; margin: 0 0 14px; } .cx-founder-txt p:last-child { margin-bottom: 0; } @media (min-width: 820px) { .cx-portrait img { width: 139px; height: 139px; } .cx-founder-txt { margin-top: 24px; } } /* ---- RESERVER — egen seksjon (Tor 08.08 sen kveld). Kortet sto inne i heroen og ble «veldig rotete» på mobil: overskrift, fakta, pris, CTA og bar i samme skjerm. Nå står modulen alene, midtstilt, med luft rundt. ---- */ /* 🪤 `.eyebrow` er `inline-block` — `text-align` PÅ den selv sentrerer ingenting. Sentreringen må stå på forelderen; kortet stiller seg venstre igjen. */ .cx-reserve { max-width: 720px; margin-inline: auto; text-align: center; } .cx-reserve .cx-fund { text-align: left; } .cx-reserve .eyebrow::after { margin-inline: auto; } .cx-reserve h2 { margin-bottom: 26px; } /* ---- MOBIL ---- */ @media (max-width: 820px) { .cx-teaser { grid-template-columns: 1fr; gap: 22px; } .cx-teaser.flip .cx-media { order: 0; } /* motivet først på mobil, alltid */ } @media (max-width: 760px) { .cx-specs { grid-template-columns: repeat(2, 1fr); } .cx-values { grid-template-columns: 1fr; } .cx-sub { margin-top: 40px; } } @media (max-width: 640px) { .cx-cta .btn { flex: 1 1 100%; text-align: center; } } /* 21.08: «stillbildene bærer siden alene» over var en påstand uten et bilde — videoen ble skjult, men det fantes ingen faktisk til å ta over. En kunde med Reduce Motion på iPhone (ekte tilgjengelighetsinnstilling, ikke uvanlig) fikk et tomt medierammefelt med kun bildeteksten stående igjen. `.cx-media-still` er det manglende bildet — samme poster-fil som video-en, satt inn som ekte i markup, skjult i vanlig tilfelle og vist HER. 🪤 MÅ være `.cx-media .cx-media-still` (0,2,0) — samme felle som `.cx-media .cx-medianote` over: `.cx-media img, .cx-media video` er også (0,2,0) og står FØR i kildeorden, så en alenestående `.cx-media-still` (0,1,0) taper og bildet vises dobbelt, på ALLE besøk, ikke bare reduced- motion. Verifisert live 21.08 med chrome-devtools MCP — måtte rettes umiddelbart etter første deploy. */ .cx-media .cx-media-still { display: none; } @media (prefers-reduced-motion: reduce) { .cx-media video { display: none; } .cx-media .cx-media-still { display: block; } } /* ========================================================================== ÅPNINGEN — sammenligningen møter deg først (Tor 05.08) Her lå `.cx-intro`: bølgemerket, ordmerket og slagordet stablet i en egen seksjon OVER heroen. Den er borte, og reglene under er det som erstattet den. Tre grunner, alle verdt å huske før noen setter den tilbake: 1. Den la en hel skjerm mellom menyen og argumentet. Den lille telefonen ved siden av den store ER tesen; den skal møte deg med en gang. 2. Merket sto to ganger på første skjerm — den festede menyen bærer det allerede. 3. Slagordet lå høyt oppe under logoen. Nå ligger det LAVT i motivet, der det leser som en filmtittel og ikke som enda en overskrift. ⛔ BILDET SKAL IKKE FADE INN. Det er sidens LCP og må stå ferdig i første tegning — det er KUN teksten oppå som toner opp. Samme grunn som at hero-bildet står utenfor reveal-systemet. ========================================================================== */ /* Bildet skal helt opp i kanten, under den festede menyen — den har egen navy flate med blur og er lesbar over motivet. Uten dette legger `.gl-head + section`-klaringen et tomt navy belte over bildet. */ .gl-head + .cx-hero.is-open { padding-top: 0; } /* 🪤 RAMMEN RUNDT MOTIVET — ikke fjern den. På mobil ligger `.cx-hero-say` i vanlig flyt UNDER bildet, så `.cx-hero-stage` er like høy som bilde + tekst. Måler man `bottom` mot scenen, lander slagordet midt i overskriften (målt: den gjorde nøyaktig det). `.cx-hero-frame` er like høy som bildet og er måleramma for alt som skal ligge oppå det. */ .cx-hero-frame { position: relative; } /* ---- ILLUSTRASJONS-FORBEHOLDET PÅ HEROEN (Tor 10.08) ---- Resten av siden merker sine bilder med `.cx-note`; heroen gjorde det ikke, og det er den som brukes som `og:image` når siden deles. Uten forbehold leser motivet som et fotografi av en telefon som ennå ikke finnes. 🪤 PLASSERINGEN ER REGNET, IKKE VALGT. Noten ligger på bunnkanten, der `.cx-hero-frame::before` allerede har tonet motivet helt ned i `--bg` (gradienten ender på `var(--bg) 100%`). Der er kontrasten den samme uansett hvilket bilde som står i rammen — og et bildebytte kan derfor ikke knekke lesbarheten, slik det skjedde for `.cx-bleed` 09.08. ⛔ Ikke flytt den opp i motivet. Da avhenger den av bildet igjen. z-index 2 er nødvendig: både `::before` (sløret) og `.cx-hero-stage::after` (venstrefeltet på desktop) ligger på 1, og ingen av dem åpner en egen stablingskontekst — alle tre konkurrerer i samme lag. */ .cx-hero-illus { position: absolute; z-index: 2; right: var(--edge); bottom: 10px; margin: 0; font-family: var(--font-sans); font-size: 10.5px; letter-spacing: .06em; color: var(--cream-faint); text-align: right; pointer-events: none; } /* Stjerna i gull så den leser som en henvisning og ikke som en skrivefeil. Løftet litt med `vertical-align` — et asterisk sitter på skriftens overkant og ser ellers ut som det henger under linja i småskrift. */ .cx-hero-illus i, .gl-campaign p > i[aria-hidden] { font-style: normal; color: var(--gold); vertical-align: .12em; margin-left: 1px; letter-spacing: 0; } /* ---- ASKEN ØVERST (Tor 10.08) ---- ⚠️ Reverserer 08.08-beslutningen om hero uten CTA. Grunnen den gangen var to konkurrerende asker; det er løst ved at knappen her peker på NØYAKTIG samme mål som sticky-pillen og knappen i `#fund` (`/the-phone/#reserve`). Rekkefølgen er bevisst: beviset (backere) leses før oppfordringen. */ .cx-hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: clamp(16px, 2.2vw, 22px); } /* ---- STATUSSTRIPE I HEROEN (Tor 10.08: «antall pledges og progressen der også») ---- ⛔ Bevisst mager: 13,5px tekstlinje + 4px stolpe. Kortet i `#fund` eier den STORE versjonen (56px seriftall, eyebrow, «to go»-narrativ, knapp, småskrift). Gjentas den i full størrelse her, har siden to fundingmoduler og `#fund` er ikke lenger et mål å bygge opp mot — den er en gjentakelse. Heroen svarer «hvor står det?». `#fund` er der man handler. */ .cx-hero-fund { margin-top: clamp(20px, 2.6vw, 26px); } .cx-hero-sum { margin: 0; font-size: 13.5px; color: var(--cream-faint); letter-spacing: .01em; } .cx-hero-sum b { color: var(--gold-light); font-weight: 500; font-size: 15.5px; } .cx-hero-sum-of { margin-left: 7px; } /* Hårstrek i stedet for punktum mellom sum og backere: to tall etter hverandre uten skille leser som ett langt tall. */ .cx-hero-sum-b { margin-left: 9px; padding-left: 11px; border-left: 1px solid rgba(198, 185, 150, .28); } /* Slank variant. `.cx-bar.is-slim` (0,2,0) slår `.cx-bar` (0,1,0), så den vinner uansett kildeorden — verdt å vite på denne fila, der man ellers alltid taper på rekkefølge og ikke på spesifisitet. */ .cx-bar.is-slim { height: 4px; margin-top: 12px; } .cx-bar.is-slim .cx-bar-fill::after { height: 11px; } /* Mobil: knappen tar hele bredden. Uten dette brekker den til egen linje likevel (målt: 200 px knapp + 110 px tekst + 20 px gap = 330 mot 331 px tilgjengelig på 375 px), og en knapp som så vidt ikke får plass ser ut som en feil. Da er full bredde det ærligere valget. */ @media (max-width: 759px) { .cx-hero-act .btn { width: 100%; } } /* ---- /the-phone: tittelen og renderen er ÉN hero (Tor 05.08) ---- Seksjonen med h1-en hadde `padding-bottom:0` inline, men bildeseksjonen under bar fortsatt sin egen `padding-top` (68 px på telefon). Resultatet var et tomt navy belte mellom tittel og motiv — heroen leste som avkuttet. Begge sider av skjøten lukkes her, og en liten rest luft står igjen så overskriftens underlengder ikke berører bildekanten. 🪤 `.cx-sec` settes PÅ NYTT lenger nede i fila (FLATE-STIGEN-blokka), og med lik spesifisitet vinner den som står sist. `.cx-lede` alene ble derfor overkjørt og bunnpaddingen kom tilbake — målt 82 px mellom tittel og bilde (68 + 14). Derfor `.cx-sec.cx-lede`: to klasser slår én, uansett rekkefølge. ⛔ BUNNPADDINGEN KAN IKKE VÆRE 0. Seksjonen sto opprinnelig med `padding-bottom:0` inline, og da ble underlengdene i overskriften KLIPPET — «was argued about.» mistet nedre halvdel av g-en og u-ene, rett av en hard kant. Mekanismen er verdt å huske, for den gjelder hver `.sheet` på siden: · `.gl-campaign h1` har `line-height: 1.1`, altså STRAMMERE enn skriftens egen høyde. Målt her: 27 px skrift, 29,7 px linjeboks, blekket stikker 5,7 px NEDENFOR boksen. · `.sheet` er `position: relative; z-index: 2` med egen bakgrunn. Neste ark maler derfor sin bakgrunn OPPÅ det som flyter ut av arket over. Med padding 0 flyter blekket rett inn under naboen og forsvinner. Padding under må være større enn overskytet — 12 px gir 6 px margin. Samme felle venter overalt hvor en `.sheet` avsluttes med en overskrift. */ .cx-sec.cx-lede { padding-bottom: clamp(12px, 2.4vw, 20px); } .cx-lede + .cx-bleedsec { padding-top: clamp(6px, 1.4vw, 12px); } /* Bunnen av bildet løses opp i sidens egen bakgrunn: motivet slutter ikke i en hard kant midt i et håndledd, og slagordet får en flate å stå på. Målt på cx-vs.jpg: nederste tidel har snitt 71 og topper på 192 — altfor lyst for hvit tekst uten dette. Øverste femtedel er til gjengjeld snitt 29 (topp 37), derfor trenger «Concept»-merket ingen egen bakgrunn der oppe. */ .cx-hero.is-open .cx-hero-frame::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 54%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(11,20,30,0) 0%, rgba(11,20,30,.38) 40%, rgba(11,20,30,.84) 74%, var(--bg) 100%); } /* ⛔ HER LÅ `.cx-open`/`.cx-open-tag`/`.cx-open-from` — slagordet lavt i hero-bildet. Slettet 08.08: 28px serif kursiv rett over en 32px serif kursiv h1 ga to overskrifter uten hierarki. Bildet er åpningen nå, h1 er overskriften. ⛔ Ikke legg tekst tilbake oppå hero-bildet. */ /* SEKVENSEN — «dramatisk sakte» (Tor). Lang ease-out, 1,6–2 s, og et lite uskarphetsslør som løses opp: teksten kommer til syne som et bilde som stilles inn, ikke som et element som spretter. 🪤 Animasjonen ligger på BARNA av .cx-hero-say, aldri på blokka selv — den er posisjonert med transform på desktop, og posisjonering og innfading skal aldri dele transform. */ @media (prefers-reduced-motion: no-preference) { .cx-hero.is-open .cx-hero-say > * { opacity: 1; animation: none; } .cx-hero.is-open .cx-hero-say > *:nth-child(1) { animation-delay: .35s; } .cx-hero.is-open .cx-hero-say > *:nth-child(2) { animation-delay: .95s; } .cx-hero.is-open .cx-hero-say > *:nth-child(3) { animation-delay: 1.15s; } .cx-hero.is-open .cx-hero-say > *:nth-child(4) { animation-delay: 1.35s; } .cx-hero.is-open .cx-hero-say > *:nth-child(5) { animation-delay: 1.55s; } } @keyframes cxOpen { from { opacity: 0; transform: translateY(14px); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } } /* ========================================================================== DESKTOP — utnytt bredden, større bilder (Tor 16.07) .wrap-n er 860px, satt for lesbar brødtekst. Den beholdes for TEKST-sider, men hero/teasere får sin egen, bredere ramme. Tekstspaltene innenfor er fortsatt clampet (p { max-width: 58ch }), så linjelengden holder seg lesbar selv om rammen vokser. ========================================================================== */ @media (min-width: 1024px) { .cx-hero .wrap-n, .cx-sec .wrap-n { max-width: 1280px; } /* Motivet får mer plass enn teksten — bildene er argumentet på denne siden. .flip legger motivet i kolonne 2, så den må speilvendes: ellers hadde annenhver teaser fått et merkbart mindre bilde (705 vs 522 px). */ .cx-teaser { grid-template-columns: 1.28fr 1fr; gap: clamp(40px, 4vw, 64px); } .cx-teaser.flip { grid-template-columns: 1fr 1.28fr; } /* HERO PÅ DESKTOP: fullbredde 16:9, teksten i det mørke venstrefeltet (målt 25/34/49 i favoritt1). Pengetallene bor UNDER bildet, i vanlig bredde — de skal leses, ikke kjempe mot et motiv. */ /* INGEN BESKJÆRING (Tor 17.07: «hele mobilene må vises»). Bildene ER 16:9, så full bredde gir riktig høyde av seg selv. Tidligere klemte en fast høyde + object-fit: cover bort 17 % av heroen — topp og bunn av telefonene. */ .cx-hero-stage { height: auto; } .cx-hero-stage img { height: auto; } .cx-hero-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(11,20,30,.72) 0%, rgba(11,20,30,.30) 34%, transparent 58%); } /* Bredden er målt, ikke gjettet: den lille telefonen begynner ~36 % inn i motivet, så teksten må holde seg innenfor ~500 px fra venstre kant. 25rem + 6vw margin lander trygt. (30ch regnet mot 16px-brødtekst og ga 296 px — altfor smalt for en 54px overskrift.) */ .cx-hero-say { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); left: clamp(40px, 6vw, 92px); max-width: min(25rem, 30vw); padding: 0; } .cx-hero-say h1 { font-size: clamp(30px, 2.9vw, 44px); } /* .is-open-reglene lenger nede er mer spesifikke enn regelen over, så desktop-plasseringen må gjentas med samme vekt for å vinne tilbake. */ /* ÅPNINGEN PÅ DESKTOP: slagordet er ikke en tittelplakat her — h1-en ligger alt i venstrefeltet. Det legger seg som én rolig linje nede til venstre, der venstre-gradienten (.72 i kanten) alt gjør bakgrunnen mørk nok: målt snitt 65 i det hjørnet, altså ~26 etter gradienten. Bunn-sløret er derfor lett her — et tungt slør ville skjult nedre tredjedel av telefonene, og «hele mobilene må vises» (Tor 17.07). */ .cx-hero.is-open .cx-hero-frame::before { height: 30%; background: linear-gradient(180deg, rgba(11,20,30,0) 0%, rgba(11,20,30,.28) 55%, rgba(11,20,30,.55) 100%); } /* Kortet holder 720px (def. lenger ned) — venstrestilt i wrap, ikke sentrert. */ .cx-specs { max-width: 1060px; } } @media (min-width: 1440px) { .cx-hero .wrap-n, .cx-sec .wrap-n { max-width: 1400px; } .cx-teaser { grid-template-columns: 1.35fr 1fr; } .cx-teaser.flip { grid-template-columns: 1fr 1.35fr; } } /* ========================================================================== FULLBREDDE-FLATER (Tor 16.07: «flere fullbreddebilder og bilde i tekst») MOBIL ER FREDET: under 1024px oppfører .cx-bleed seg som før — bilde først, tekst under. Alt nedenfor er desktop-only. Alle konseptbildene er PORTRETT og MØRKE. Det utelukker klassiske brede bannere (de ville beskåret telefonen bort), men åpner noe bedre: teksten kan bo INNE i motivet. Ankeret er valgt per bilde, målt i lysstyrke — ikke gjettet. ========================================================================== */ /* --- MOBIL/BASIS: vanlig stabling, som resten av siden --- */ .cx-bleedsec { padding: 0; } .cx-bleed { position: relative; margin: 0; } .cx-bleed img { width: 100%; height: auto; display: block; } .cx-bleed-say { padding: clamp(26px, 6vw, 40px) var(--edge) clamp(48px, 9vw, 72px); } .cx-bleed-say h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.2; letter-spacing: .032em; margin: 0 0 16px; text-wrap: balance; } .cx-bleed-say h2 em { font-style: italic; color: var(--text); } .cx-bleed-say p { font-size: 15.5px; line-height: 1.7; color: var(--cream-soft); margin: 0 0 16px; max-width: 58ch; } .cx-bleed.is-paper img { background: #efe9dc; } .cx-bleed.is-studio img { background: var(--bg2); } /* mørk studio-render — motsatt av papiret */ /* --- DESKTOP: bildet tar rommet, teksten flytter inn i det --- */ @media (min-width: 1024px) { .cx-bleed:not(.is-paper) { height: auto; } .cx-bleed:not(.is-paper) img { height: auto; } /* Skissa er PORTRETT (800x1280) — i full bredde ville den blitt ~2400 px høy. Den beholder derfor rammen + contain, som uansett viser hele tegningen. */ .cx-bleed.is-paper { height: min(92vh, 900px); overflow: hidden; } .cx-bleed.is-paper img { height: 100%; } /* Plinth/vs: motivet ligger midt/høyre, negativrommet øverst til venstre. */ .cx-bleed-say { position: absolute; z-index: 2; padding: 0; max-width: 46ch; } .cx-bleed[data-anchor="top-left"] .cx-bleed-say { top: clamp(48px, 9vh, 96px); left: clamp(40px, 6vw, 92px); } .cx-bleed[data-anchor="right"] .cx-bleed-say { top: 50%; right: clamp(40px, 6vw, 92px); transform: translateY(-50%); } /* Papiret er lyst → teksten må snus til mørk. Motsatt av resten av siden. */ .cx-bleed.is-paper .cx-bleed-say h2, .cx-bleed.is-paper .cx-bleed-say h2 em { color: #14100a; } .cx-bleed.is-paper .cx-bleed-say p { color: rgba(20,16,10,.78); } .cx-bleed.is-paper .cx-bleed-say .cx-note { color: rgba(20,16,10,.55) !important; } .cx-bleed.is-paper .cx-bleed-say .eyebrow { color: #8a7a4e; } .cx-bleed.is-paper img { object-fit: contain; background: #efe9dc; } /* --- STUDIO-RENDER (.is-studio): mørkt PORTRETT-motiv i fullbredde --- Papir-oppskriften (contain + tekst absolutt oppå) funker IKKE her: en midtstilt portrett-render er smal, og rundt 1280 px havner teksten oppå telefonen. Derfor et ekte to-spalters bånd — bildet i venstre spalte, teksten i sin egen til høyre. Ingen data-anchor, ingen scrim: teksten ligger aldri over motivet, så gradienten ville bare skitnet til flata. Reglene står ETTER .is-paper med lik spesifisitet — rekkefølgen er det som slår :not(.is-paper)-høydene over. Ikke flytt dem opp. */ .cx-bleed.is-studio { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(32px, 5vw, 72px); background: var(--bg2); padding: clamp(40px, 5vw, 72px) clamp(40px, 6vw, 92px); } .cx-bleed.is-studio img { height: min(76vh, 760px); width: 100%; object-fit: contain; } /* `is-wide`: samme to-spalters bånd, men for et LIGGENDE motiv. `contain` i en 760 px høy boks ville gitt store tomme felt over og under et 16:9-bilde; `cover` i en lavere boks fyller spalta. Lagt til 08.08 da havnebildet overtok for portrett-renderen her. */ .cx-bleed.is-studio.is-wide img { height: min(56vh, 560px); object-fit: cover; border-radius: 3px; } .cx-bleed.is-studio picture { display: block; } .cx-bleed.is-studio .cx-bleed-say { position: static; transform: none; padding: 0; max-width: 46ch; } .cx-bleed.is-studio::after { content: none; } /* Den stille flaten. 24ch (~260 px) holdt da bildeteksten var ÉN kort linje; da gangbildet fikk merkelapp + lengre overskrift brakk den til «It goes / where / the / keys go». 40ch gir to linjer, og overskriften er dempet et hakk så den ikke sprenger spalta igjen. */ .cx-bleed.is-quiet .cx-bleed-say { max-width: 40ch; } .cx-bleed.is-quiet h2 { font-size: clamp(30px, 3.4vw, 46px); } /* Sikkerhetsnett: skulle et bilde bli byttet til et lysere motiv, holder teksten seg lesbar uten at man må huske å legge på en scrim. */ .cx-bleed:not(.is-paper)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(11,20,30,.55) 0%, rgba(11,20,30,.12) 42%, transparent 68%); } .cx-bleed[data-anchor="right"]:not(.is-paper)::after { background: linear-gradient(270deg, rgba(11,20,30,.55) 0%, rgba(11,20,30,.10) 46%, transparent 72%); } /* LYST MOTIV: standard-sløret over er tonet for mørke bilder og holder ikke når motivet er lyst. Målt på gangbildet: tekstfeltet har lyshet opptil 241, hvit tekst ga 1,13:1. Dette sløret går fra VENSTRE, der teksten står, og er regnet slik at bakgrunnen havner under ~119 (grensen for 4,5:1 mot hvit). */ .cx-bleed.is-bright:not(.is-paper)::after { background: linear-gradient(96deg, rgba(11,20,30,.88) 0%, rgba(11,20,30,.80) 30%, rgba(11,20,30,.42) 52%, rgba(11,20,30,.10) 70%, transparent 84%); } /* Den dempa bildeteksten er tonet for mørke motiver (50 % krem). Over et lyst motiv målte den 4,03:1 — under kravet på 4,5. 62 % gir 5,29:1 og er fortsatt tydelig dempa mot brødteksten på 78 %. Kun her, ikke globalt. */ .cx-bleed.is-bright .cx-note { color: rgba(255, 251, 239, .62); } } /* ===== Pledge-skjemaer i tier-kortene (28.07.2026 — «nothing is charged today») ===== */ .pledge-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } /* Land-nedtrekket arver e-postfeltets utseende, men tar hele bredden: 90+ land i en smal kolonne er uleselig på mobil. `appearance:none` + egen pil, ellers tegner iOS en lys systemboks midt i det mørke kortet. */ .pledge-form .pledge-land { flex: 1 1 100%; min-width: 0; padding: 12px 34px 12px 14px; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,251,239,.18); color: var(--cream-soft); font-size: 15px; font-family: inherit; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(198,185,150,.8) 50%), linear-gradient(135deg, rgba(198,185,150,.8) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .pledge-form .pledge-land:invalid { color: rgba(255,251,239,.45); } .pledge-form .pledge-land option { background: #102030; color: #FFFBEF; } .pledge-form input[type="email"] { flex: 1 1 200px; min-width: 0; padding: 12px 14px; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,251,239,.18); color: var(--cream-soft); font-size: 15px; font-family: inherit; } .pledge-form input[type="email"]::placeholder { color: var(--cream-faint); } .pledge-form input[type="email"]:focus { outline: none; border-color: var(--gold); } /* Inline «ugyldig e-post»-hint mens man skriver — ren CSS, ingen JS. :placeholder-shown = tomt felt ⇒ ingen rød kant før noe er skrevet. */ .pledge-form input[type="email"]:invalid:not(:placeholder-shown):not(:focus) { border-color: #d98a6a; } .pledge-form .btn { flex: 0 0 auto; } .pledge-form .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Status-notis under seksjonsoverskriften */ .pledge-note { margin: 18px auto 0; max-width: 560px; padding: 12px 16px; font-size: 14px; line-height: 1.6; color: var(--cream-soft); text-align: center; border: 1px solid rgba(198,185,150,.35); border-radius: 10px; background: rgba(198,185,150,.08); } /* ===== «Who's actually behind this» — fakta-radene (28.07.2026) ===== ⚠️ `.cx-who` (brev | fakta side om side) er BORTE. Seksjonen ble flyttet ut av krem-flata 05.08 og bygget om til portrett | brev øverst med fakta som eget rutenett under — se «HVEM VI ER» sist i fila. Radene selv er uendret. */ .cx-fact { padding: 20px 0 22px; border-top: 1px solid rgba(255,251,239,.12); } .cx-fact:first-child { border-top: 0; padding-top: 8px; } .cx-fact-k { display: block; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .cx-fact p { margin: 0 !important; font-size: 14.5px; line-height: 1.72; color: var(--cream-soft); max-width: 48ch; } /* Hero-notisen etter bekreftet pledge — under baren, samme bredde som den */ .pledge-note-hero { max-width: 760px; margin: 18px auto 0; } /* ========================================================================== FLATE-STIGEN — totalrenovering 05.08.2026 (Tor: «kan ikke bare være mørk») Rotproblemet var ikke fargen, men at TOLV seksjoner på rad delte nøyaktig samme #0B141E. Uten skille mellom flatene leser siden som ett langt felt, og leseren mister følelsen av å komme videre. Nå går den i trapp: A --bg #0B141E dypest — åpning, produkt, tall, kassen B .tone-2 #102030 ett hakk opp — de rolige mellomseksjonene C .is-light krem de to redaksjonelle flatene (render-stripa, #story) + bildebåndene, som er sin egen flate ⛔ REGELEN som holder det sammen: to naboseksjoner har ALDRI samme tone. Sjekk hele rekkefølgen før du legger til eller flytter en seksjon — `.close-sec` er allerede --bg2, altså samme verdi som .tone-2, så en .tone-2 rett før den bryter regelen uten at det synes i markupen. ⛔ IKKE lys flate på spec-tabellen — prøvd og forkastet av Tor 05.08. Blokka står SIST i fila med vilje: flere av reglene under må slå basisreglene lenger oppe (.cx-sec, .cx-stamp, .cx-fund), og kildeorden er det som avgjør ved lik spesifisitet. Ikke flytt den opp. ========================================================================== */ .tone-2 { --bg: #102030; --bg2: #17293B; --panel: rgba(255, 255, 255, .045); --line-soft: rgba(255, 251, 239, .09); background: var(--bg); } /* Litt mer luft mellom seksjonene: når flatene først skifter, må skiftet få plass til å puste, ellers leser trappa som striper. */ .cx-sec { padding: clamp(68px, 9vw, 116px) 0; } /* ===== BILDEBÅND-RYTMEN PÅ MOBIL (Tor 08.08: «et sted er det bilde og et tomt mellomrom før neste bildet») ===== Målt på 402 px: to `.cx-bleedsec` etter hverandre ga 68 px bunn + 68 px topp = 136 px tomt navy mellom to motiver. Et fullbredde-bilde trenger ikke luft for å puste — det ER flaten. Derfor: halv padding rundt bildebånd, og NULL mellom to bånd som følger rett etter hverandre. 🪤 GJELDER ALLE BREDDER, og MÅ stå her — etter FLATE-STIGENs `.cx-sec`. `.cx-bleedsec { padding: 0 }` finnes allerede lenger opp (~739), men FLATE-STIGEN redeklarerer `.cx-sec { padding: clamp(68px,9vw,116px) }` ETTER den. Lik spesifisitet (0,1,0) ⇒ den siste vant, og bildebåndene fikk 116 px padding på DESKTOP også — den mørke stripa over hvert bilde. Et fullbredde-bilde ER flaten og skal møte naboseksjonen kant i kant; teksten rundt har sin egen luft. ⛔ Ikke flytt denne regelen opp. */ .cx-bleedsec { padding: 0; } /* Gull-hårstrek under hver seksjonsetikett — ett gjentakende merke som binder de tre flatene sammen. Etiketten mister litt bunnmarg til gjengjeld, så avstanden ned til overskriften blir den samme som før. */ .cx-sec .wrap-n > .eyebrow, .cx-bleed-say .eyebrow { margin-bottom: 13px; } .cx-sec .wrap-n > .eyebrow::after, .cx-bleed-say .eyebrow::after { content: ""; display: block; width: 26px; height: 1px; background: var(--gold); opacity: .5; margin-top: 12px; } /* 🪤 MÅ STÅ ETTER de to reglene over. Streken er et `::after`, og eyebrow-en er `inline-flex` når den har ikon — da blir streken et FLEX-ELEMENT og legger seg til HØYRE for teksten i stedet for under. Regelen min lå først i fila og tapte på kildeorden ved lik spesifisitet (begge 0,2,1). Ikonet ER merket; én markør holder. ⛔ Ikke flytt denne opp igjen. */ .cx-sec .wrap-n > .eyebrow:has(> .eyebrow-ic)::after, .cx-bleed-say .eyebrow:has(> .eyebrow-ic)::after { display: none; } /* BLÅTT = teknisk annotasjon, GULL = merkevarestemme. Blåfargen hadde render-stempelet som jobb; stempelet er borte (se over), så den lever nå kun i blueprint-målene på /the-phone (#7FA6CF — #345A83 måler ~1,7:1 på navy og er ulesbar). ⛔ Ikke gi blått nye jobber uten Tors ord. */ /* Kampanjeblokka = KORTMODUL (Tor 08.08 kveld, runde 2): ett kort, én knapp, dynamisk på mobil via clamp-padding og fullbredde-CTA. Rammen er gull-alpha på panel-flate — samme familie som tier-kortet på /the-phone. */ .cx-fund { border: 1px solid rgba(198, 185, 150, .28); border-radius: 3px; background: rgba(255, 251, 239, .035); padding: clamp(22px, 3.5vw, 36px); max-width: 720px; } /* Lys flate: hårstreker som er hardkodet i krem finnes fortsatt noen steder og blir usynlige her. Token-byttet fanger resten. */ .is-light .cx-fact { border-top-color: rgba(20, 16, 10, .14); } /* ========================================================================== SPECS-PANEL + BLUEPRINT (E2, 08.08.2026 — renoveringen) To spalter ≥1024: strekikon-liste + håndskrevet SVG-blueprint av baksiden (mål 100/55/12 mm). Mobil/tablet beholder flis-rutenettet `.cx-specs` — samme 12 fakta, hentet fra ÉN PHP-array så de to visningene ikke kan drive. Blueprinten ligger FØR

i DOM-en med vilje: ren kilderekkefølge er det som holder den synlig øverst på mobil, uten JS. ========================================================================== */ .cx-spec-panel { margin-top: 24px; } /* Skissen (Tor 08.08) — erstattet den hånd-skrevne SVG-blueprinten. Bildet er forhåndsinvertert til krem strek på `--bg2`, så rammen trenger bare å holde det på plass. ⛔ `.bp-ink/.bp-lens/.bp-mark/.bp-dim/.bp-dim-label` er SLETTET sammen med SVG-en; strek-tegnings-animasjonen døde i samme runde. */ .cx-blueprint { border: 1px solid var(--line-soft); border-radius: 3px; padding: clamp(10px, 1.8vw, 16px); margin: 0 0 clamp(24px, 4vw, 36px); } .cx-blueprint img { display: block; width: 100%; height: auto; border-radius: 2px; } /* Spec-liste (kun desktop ≥1024): ikon + etikett + verdi, hairline mellom rader. */ .cx-spec-list { display: none; list-style: none; margin: 4px 0 0; padding: 0; } .cx-spec-list li { display: flex; align-items: center; gap: 14px; padding: 13px 2px; border-top: 1px solid var(--line-soft); } .cx-spec-list li:first-child { border-top: 0; padding-top: 0; } .cx-spec-list li:last-child { padding-bottom: 0; } .cx-spec-ic { flex: none; width: 20px; height: 20px; color: var(--gold); } .cx-spec-ic svg { display: block; width: 100%; height: 100%; } .cx-spec-list b { flex: 0 0 92px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); } .cx-spec-list-v { flex: 1 1 auto; font-size: 14.5px; color: var(--text); text-align: right; } @media (min-width: 1024px) { /* 1060px matcher `.cx-specs`-taket — venstrestilt i .wrap-n, samme rytme som søsknene nedover siden. */ .cx-spec-panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 4vw, 60px); align-items: start; max-width: 1060px; } /* viewBox 240×400 (0,6-aspekt) — i en bar 1fr-kolonne ville den blitt ~800px høy ved siden av en ~500px liste. Cappet og sentrert: innrammet figur, ikke strukket plakat. */ /* 340px-taket her var satt for den HØYE SVG-en (0,6-aspekt), som ellers ble ~800px lang ved siden av spec-lista. Skissen er LIGGENDE (1,3) og skal fylle spalten — taket ville krympet den til en frimerkestørrelse. */ .cx-blueprint { order: 2; margin-bottom: 0; align-self: center; } #specs .cx-disclose { order: 1; min-width: 0; } /* To spalter trenger ingen fold —
shipper `open`, JS rører den aldri på denne bredden (se campaign.js nederst). */ .cx-disclose > summary { display: none; } .cx-spec-list { display: block; } #specs .cx-specs.num { display: none; } } @media (max-width: 759px) { } /* ========================================================================== #BACK — LØFTE-STRIPA + «HOW IT WORKS» (pledge-omleggingen 08.08.2026) To nye moduler rundt tier-kortene: tre løfter FØR prislappene, tre steg ETTER. Begge er rolige fakta-rutenett, ikke salgsfliser — ingen ikoner, ingen skygger, ingen hover. HÅRSTREKEN ER GULL-ALPHA, ikke krem. Stilankeret (merge-notater §0) sier at nye komponenter på .com skal over på aeros.no sin gull-alpha-familie (`rgba(198,185,150,.2/.1)`), mens de eldre rutenettene (`.cx-specs`, `.cx-values`) fortsatt bruker det krem-baserte `--line-soft`. Verdien bor i `--hair`, så alle skillene i stripa endres ett sted. Steg-streken under er ikke et skille men en FORBINDELSE, og bruker `--gold` direkte. 🪤 Ingen `gap: 1px` på en farget forelder-bakgrunn (mønsteret fra `.cx-specs`): cellene her REVEALES, og en celle som beveger seg over en hårstrek-farget flate blottlegger et 24px belte av den fargen. Derfor border-baserte skiller — identisk hvile-utseende, ingen artefakt. (Løftet er dessuten skrudd av for disse to, se REVEAL-blokka under.) ========================================================================== */ .cx-promises { --hair: rgba(198, 185, 150, .18); } /* ---- Løfte-stripa: tre celler, over kortene ---- */ .cx-promises { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hair); border-radius: 3px; } .cx-promises > * { min-width: 0; } .cx-promise { padding: 22px 22px 24px; border-left: 1px solid var(--hair); } .cx-promise:first-child { border-left: 0; } /* Tallmerket: 20px sirkel, serif-tall i gull. Samme «tall er serif»-unntak som `.cx-amt`/`.tier-price` — de følger ALDRI overskrifts- fonten (spec-design §1). */ .cx-promise-n, .cx-how-n { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 100px; border: 1px solid var(--gold-dim); background: var(--bg); font-family: var(--font-serif); font-size: 11.5px; line-height: 1; color: var(--gold); margin-bottom: 13px; } .cx-promise b, .cx-how b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 16.5px; letter-spacing: .02em; color: var(--text); margin-bottom: 8px; } .cx-promise p, .cx-how p { margin: 0 !important; font-size: 14px; line-height: 1.7; color: var(--cream-soft); } /* ---- «How it works»: tre steg, under kortene ---- */ /* Kolonnegapet står i EN variabel fordi streken under regner med det. Skriver du gapet rett inn i `column-gap`, må du huske å endre `width`-calc-en også — og den glemmes. */ .cx-howto { --howto-gap: clamp(24px, 3.4vw, 44px); list-style: none; margin: 40px 0 0; padding: 0; } .cx-how { position: relative; } .cx-how + .cx-how { margin-top: 22px; } @media (min-width: 760px) { .cx-howto { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--howto-gap); } .cx-how + .cx-how { margin-top: 0; } /* Dekorativ gull-hårstrek som binder 1→2→3: ett segment per steg unntatt det siste, fra dette tallets senter til det neste. Geometrien: tallet er 20px bredt, altså senter i x=10; segmentet starter der og går `100% + gapet` videre, som lander nøyaktig på neste tallsenter. ⛔ Ikke gjør dette til ÉN strek over hele `.cx-howto` — den ville løpt helt ut til høyre kant, forbi det tredje tallet, fordi siste kolonne er bredere enn tallet sitt. Den feilen var her først. Sirklene har egen bakgrunn + z-index og «klipper» streken selv. Kun ≥760px: stablet ville streken pekt i tomme luften. */ .cx-how:not(:last-child)::after { content: ""; position: absolute; top: 10px; left: 10px; width: calc(100% + var(--howto-gap)); height: 1px; background: var(--gold); opacity: .28; pointer-events: none; } .cx-how-n { position: relative; z-index: 1; } } @media (max-width: 639px) { .cx-promises { grid-template-columns: 1fr; } .cx-promise { border-left: 0; border-top: 1px solid var(--hair); } .cx-promise:first-child { border-top: 0; } } /* ========================================================================== REVEAL — samme implementasjon som aeros.no (Tor 05.08: «samle reveal- systemet, bruk aeros.no som fasit»). FASITEN, hentet fra `tema/page-forside-film.php` + `tema/assets/js/main.js`: · rot-klasse `html.har-reveal` (settes av JS rett før observatøren) · tilstand `.in` · mål-klasse `.reveal` · løft 24 px · terskel 0,25 · rootMargin `0px 0px -10% 0px` · HELE skjulingen inne i `prefers-reduced-motion: no-preference` Samme navn og verdier her, så de to sidene ikke driver fra hverandre igjen. ⛔ REKKEFØLGEN ER POENGET: rot-klassen settes FØR observatøren startes, og `opacity: 0` finnes ikke i noen basisregel. Feiler eller blokkeres JS, er siden hel. Vi har allerede hatt en seksjon stående permanent usynlig på en salgsside fordi den regelen lå i basis. To ting .com har som fasiten ennå IKKE har — begge bør løftes over dit: 1. 🪤 `transition` ligger på `.in`, ALDRI på skjul-regelen. Rot-klassen settes etter at siden er tegnet; lå overgangen på skjulingen, ville teksten fade UT i 0,7 s før den fadet inn. Måltilstanden bærer overgangen — det gir momentan skjuling og myk innfading. 2. Kontinuerlig sikkerhetsnett i JS (scroll + resize + selvstoppende intervall), slik minnet foreskriver. Fasiten stoler på observatøren alene. Hero-teksten står utenfor effekten: den er posisjonert med transform, og posisjonering og reveal skal aldri dele transform. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { html.har-reveal .reveal { opacity: 0; transform: translateY(24px); } html.har-reveal .reveal.in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22, .7, .25, 1), transform .7s cubic-bezier(.22, .7, .25, 1); } /* BILDER fader, men LØFTES IKKE. Et 24 px løft på et fullbredde-bilde ville dratt en stripe bakgrunn inn under motivet mens det animerer, og på mobil ville teksten under flyttet seg. Derfor kun opacity — og litt roligere enn teksten, fordi flaten er stor. Erstatter parallaxen (Tor 05.08). */ html.har-reveal .reveal-bilde { opacity: 0; } html.har-reveal .reveal-bilde.in { opacity: 1; transition: opacity .9s cubic-bezier(.22, .7, .25, 1); } /* ⛔ HER LÅ strek-tegnings-animasjonen for SVG-blueprinten (stroke-dashoffset på .bp-ink/.bp-dim + opacity på .bp-lens/.bp-mark). Den døde med SVG-en 08.08 — skissen er nå et bilde og fader inn med `.reveal-bilde` som alle andre motiver. Ikke gjenopprett uten at SVG-en kommer tilbake. */ /* LØFTE-STRIPA + «HOW IT WORKS» (Pledge, 08.08): samme reveal, samme stagger (0/70/140 ms fra JS-en), men FADE UTEN LØFT — som bildene. Grunnen er mekanisk, ikke smak: cellene har hårstrek-skiller mot naboene, og et 24px løft river skillet fra hverandre i 0,7 s mens rammen rundt står stille. Opacity alene gir nøyaktig samme kadens uten artefakten. ⛔ Fortsatt ingen transition på skjul-tilstanden. */ html.har-reveal .cx-promise.reveal, html.har-reveal .cx-how.reveal { transform: none; } html.har-reveal .cx-promise.reveal.in, html.har-reveal .cx-how.reveal.in { transition: opacity .7s cubic-bezier(.22, .7, .25, 1); } } /* ⛔ HER LÅ grunnleggersitatets gullstrek-nedtegning (E1, 08.08). Den døde med sitatpanelet samme kveld — se FOUNDER-blokka lenger opp. Ikke gjenopprett uten at panelet også kommer tilbake; regelen krevde `.cx-quote::after`. */ /* ========================================================================== MOBIL + OPPRYDDING — 05.08.2026 (Tor: «mer ideell for mobil, renere og moderne»). Fire konkrete funn fra en måling på 375 px, ikke synsing: · kantmargen var 20 px — for trangt for en premium-flate · brødteksten var 15,5 px (og et desimaltall, som er umulig å treffe igjen) · 50 tekstelementer lå under 13 px, det minste på 10 px · fire ulike hjørneradier på siden: 0, 2, 16 og 100 px ========================================================================== */ /* Litt mer luft mot skjermkanten. Endres i tokenet, så alt som bruker var(--edge) — inkludert stripas negative marger — følger med. */ :root { --edge: clamp(22px, 4.5vw, 56px); } /* Kortene lå på 16 px mens knappene lå på 2. Én radius-familie: skarp og redaksjonell. Stolpen beholder pillen — den er en måler, ikke et kort. */ .tier, .cx-specs, .cx-media { border-radius: 3px; } @media (max-width: 759px) { /* 16 px brødtekst leser merkbart bedre i hånda enn 15,5, og linjehøyden kan strammes tilsvarende uten at avsnittet blir tett. */ .cx-sec p, .cx-bleed-say p { font-size: 16px; line-height: 1.65; } /* Gulv på småtekst: ingenting under 12 px på en telefon. */ .cx-note, .cx-fine { font-size: 12.5px !important; } .cx-strip b { font-size: 11px; } .eyebrow { font-size: 11px; letter-spacing: .2em; } /* Trykkflater: 37 px høye faner er under grensa på 44. */ /* Overskriftene tåler å stå tettere når de er store og kursive. */ .gl-campaign h2 { letter-spacing: .026em; } } /* ========================================================================== MOBIL, RUNDE 2 — 05.08.2026 (Tor: «fjern reserve-baren, mer rutenett og klikkbare elementer, litt parallax hvor hver seksjon lever i sitt bilde») ========================================================================== */ /* Den klebrige reserve-baren er borte på telefon. ⚠️ Den bar både fremdrift og eneste permanente CTA — på desktop står den fortsatt. Skal den også ut der, er det ett ord, men da har siden ingen vedvarende kjøpsknapp. */ @media (max-width: 759px) { .sticky { display: none !important; } } /* ⛔ PARALLAX ER PRØVD OG FJERNET (Tor 05.08, samme dag): bildet lå 9 % større enn rammen og ble forskjøvet mot scrollen — men da havnet tekst under bildene. Bildene FADER INN i stedet, i samme reveal-system som tekstene (se `.reveal-bilde` i REVEAL-blokka over). Ikke innfør parallax på nytt her uten å løse tekst-over-bilde-problemet først. */ /* ⛔ .cx-tap (forstørrbare seksjonsbilder) fjernet 05.08 på Tors ordre — og senere samme dag røk lysboksen på render-rutenettet også. Ingen bilder på siden åpner noe overlegg lenger; se «STØRRE VISNING PÅ TELEFON» over. */ /* MÅLENE SOM RUTENETT på telefon. Flex-rada trykte 100/55/12 mm sammen på én linje; tre ruter med hårstrek mellom leser som resten av sidens rutenett (specs, verdier, render-stripa) og gir tallene plass. */ @media (max-width: 759px) { .cx-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 3px; overflow: hidden; margin-top: 26px; } .cx-figs > li { background: var(--bg); padding: 16px 10px 15px; text-align: center; } .cx-figs > li b { display: block; } } /* ========================================================================== DELSIDER — 05.08.2026. Forsiden var 17,6 skjermer på mobil og kjøps- seksjonen lå 10 skjermer nede. Planen, FAQ-en og manifestet flyttet til /funding og /why; One UI-dybden til /one-ui. Ingen tekst er skrevet om. ========================================================================== */ /* Kortene som peker videre. Samme hårstrek-rutenett som specs og verdiene, så de leser som en del av siden og ikke som en påklistret meny. */ .cx-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 3px; overflow: hidden; } .cx-more > * { min-width: 0; } .cx-more-card { display: block; background: var(--bg); padding: 26px 24px 28px; text-decoration: none; transition: background .25s ease; } .cx-more-card:hover { background: var(--bg2); } .cx-more-card .eyebrow { margin-bottom: 10px; } .cx-more-card b { display: block; font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: clamp(16.5px, 1.9vw, 19px); line-height: 1.3; letter-spacing: .028em; color: var(--text); } .cx-more-card b em { font-style: italic; color: var(--gold); } .cx-more-card::after { content: "→"; display: block; margin-top: 14px; color: var(--gold); font-size: 15px; } /* Mobil: én kolonne. Tre korte kort under hverandre er fortsatt mindre enn de tre seksjonene de erstatter — og hvert kort er en 44 px+ trykkflate. */ @media (max-width: 759px) { .cx-more { grid-template-columns: 1fr; } .cx-more-card { padding: 20px 18px 22px; } } /* Utfellingen på spec-tabellen. Samme grep som «Se alle spesifikasjoner» på aeros.no: ingen JS, og teksten ligger fortsatt i DOM-en for søk. */ .cx-disclose > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px 0; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); } .cx-disclose > summary::-webkit-details-marker { display: none; } .cx-disclose > summary::after { content: "+"; font-size: 16px; line-height: 1; } .cx-disclose[open] > summary::after { content: "–"; } .cx-disclose > summary:hover { color: var(--gold-light); } .cx-disclose .cx-specs { margin-top: 4px; } /* Lenke videre fra en teaser til delsiden som bærer dybden. */ .cx-more-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .cx-more-link::after { content: "→"; font-size: 15px; } .cx-more-link:hover { color: var(--gold-light); } /* ========================================================================== MENY — nettstedet er NØYAKTIG to sider (Tor 05.08). Holdes derfor til to lenker og ingen hamburger; samme prinsipp som menyen på aeros.no. ========================================================================== */ .gl-nav { display: flex; gap: clamp(16px, 3vw, 30px); align-items: center; } .gl-nav a { font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-faint); text-decoration: none; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; transition: color .25s ease; } .gl-nav a:hover { color: var(--cream); } .gl-nav a[aria-current="page"] { color: var(--gold); } @media (max-width: 480px) { .gl-nav a { font-size: 10.5px; letter-spacing: .12em; } } /* 🪤 .gl-head er ABSOLUTT plassert (den holdt opprinnelig bare preview-merket). Da menyen kom inn 05.08, la den seg oppå AEROS-merket i intro-en — målt overlapp på 375 px: menyen 26–70 px, merket 53–102 px. Fiksen hører hjemme her, ikke i headeren: sidens FØRSTE seksjon gir plass til menyen. Virker på begge sider, siden begge starter med .gl-head. ⛔ Legger du innhold i .gl-head, sjekk denne verdien på nytt. */ .gl-head + section { padding-top: clamp(86px, 15vw, 116px); } /* Bunnteksten var 11,5 px — for liten (Tor 05.08). Kun de juridiske lenkene står igjen her, så de tåler og fortjener lesbar størrelse. */ .foot-small { font-size: 13px !important; line-height: 2 !important; } .foot-row { font-size: 13.5px; } /* ========================================================================== FESTET MENY (Tor 05.08). .gl-head går fra absolute til fixed, så menyen følger med nedover. Tre ting følger av det — ingen av dem er valgfrie: 1. BAKGRUNN. Uten den scroller sidens tekst synlig gjennom menyen. Halvgjennomsiktig navy + blur, så den ligger PÅ siden uten å bli en massiv boks; hårstrek i gull under, samme språk som resten. 2. PLASS. Fixed tar ikke plass i flyten, akkurat som absolute gjorde — `.gl-head + section`-regelen over er derfor fortsatt nødvendig. 3. ANKERE. #back, #faq osv. ville havnet UNDER den festede menyen ved hopp. scroll-margin-top løser det uten JS. ========================================================================== */ .gl-head { position: fixed; top: 0; left: 0; right: 0; z-index: 30; padding-top: 16px; padding-bottom: 16px; background: rgba(11, 20, 30, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(198, 185, 150, .16); } /* Menyen er lavere enn før (32 px padding mot 52), så klaringen kan trekkes tilsvarende ned — ellers står det et tomt felt over intro-en. */ .gl-head + section { padding-top: clamp(96px, 15vw, 124px); } [id="back"], [id="faq"], [id="specs"], [id="story"], [id="join"], [id="fund"] { scroll-margin-top: 86px; } /* Reserve-kortet er et ANKER I SEG SELV (Tor 09.08: «de må lande der de skriver inn eposten»), ikke en seksjonstopp. Litt mer klaring enn de andre: kortet har egen ramme, og flush under den festede menyen ser kvalt ut. */ [id="reserve"] { scroll-margin-top: 104px; } /* ---- BUNNEN: ikoner + sentrering på mobil (Tor 05.08) ---- Alle fire punktene har nå samme form: ikon + tekst på én linje. Ikonet er 16 px og arver tekstfargen, så det aldri roper høyere enn ordet ved siden av. Mobil sentrerer og stabler; desktop beholder raden. */ .foot-ic { width: 16px; height: 16px; flex: 0 0 16px; opacity: .75; } .foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(18px, 4vw, 34px); } .foot-row > span { display: inline-flex; align-items: center; gap: 8px; } .foot-row a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: color .25s ease; } .foot-row a:hover .foot-ic { opacity: 1; } @media (max-width: 759px) { .gl-foot .wrap-n { text-align: center; } .foot-small { text-align: center; margin-top: 16px !important; } /* Stjernenoten følger footerens midtstilling på mobil — venstrejustert småskrift under midtstilt innhold leser som et element som falt ut av oppsettet. Tre korte setninger tåler midtstilling. */ .foot-star { text-align: center; margin: 12px auto 0; } /* ---- KOMPRIMERT BUNN (Tor 09.08: «renere på mobilvisning») ---- Målt før: 437 px = 54 % av skjermen for fire lenker. Tre årsaker, alle fjernet her: 1. `flex-direction: column` stablet fire elementer à 44 px med 18 px mellomrom = 230 px. Raden bryter nå naturlig i stedet — tre lenker på to linjer. ⛔ Ikke sett column igjen; wrap gjør jobben. 2. Treffsone ≠ høyde. `min-height: 44px` blåste opp den SYNLIGE raden for å nå tommelmålet. Et usynlig `::after` gir de samme 44 px uten å ta plass — samme grep som på aeros.no. 🪤 Radmellomrommet MÅ være større enn overhenget (44 − teksthøyde ≈ 24 px), ellers stjeler øverste linjes treffsone trykk som var ment for den nederste. Derfor 26 px. 3. `.gl-foot { padding: 44px 0 110px }` er DØD under 560 px: `.sheet` i en senere media-query har lik spesifisitet og vinner på kildeorden. De 110 px var uansett klaring for sticky-baren, som er skjult på mobil. Overstyringen må stå HER, etter den regelen. */ .gl-foot { padding: 40px 0 34px; } .foot-row { flex-direction: row; justify-content: center; gap: 26px 22px; } .foot-row > span { justify-content: center; min-height: 0; } .foot-row a { position: relative; } .foot-row a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); } } /* Org.nr. flyttet inn i småskriften 09.08 — egen linje, dempet, uten ikon. */ .foot-org { display: block; margin-top: 8px; color: rgba(255,251,239,.28); } /* ⭐ STJERNENOTEN — referenten til `*` på konseptbildene (Tor 10.08). Skal være det roligste på siden: dette er en opplysning man skal KUNNE finne, ikke noe som skal fange blikket. Samme dempede tone som org.nr. 🪤 `.foot-small` har `font-size: 13px !important` fra en senere blokk. Noten er derfor sin EGEN klasse — legger man den inni `.foot-small`, arver den 13px og blir like tung som de juridiske lenkene. */ .foot-star { margin: 14px 0 0; font-size: 11.5px; line-height: 1.7; color: rgba(255, 251, 239, .28); max-width: 74ch; } /* De fire juridiske lenkene brøt 3 + 1 og lot «Privacy» henge alene. `balance` fordeler dem 2 + 2. Faller pent tilbake til vanlig bryting i nettlesere uten støtte — ingenting går i stykker. 🪤 `nowrap` på lenkene er IKKE valgfritt: uten den brakk balance-algoritmen MIDT I et dokumentnavn («Campaign / Terms»), som er verre enn den foreldre- løse linja den skulle fikse. Bruddet skal kun skje mellom punktene. */ .foot-small { text-wrap: balance; } .foot-small a { white-space: nowrap; } /* ========================================================================== MANIFESTET PÅ KREM — brutt opp (Tor 05.08: «føles som to hvite seksjoner etter hverandre», «modulene kan ha forskjellige farger», «større ikoner») Årsaken til at det leste som to flater: ALT inni var samme krem — verdi- flisene, sitatet og fakta-lista. Uten tonevariasjon blir en 3,9 skjermer høy kremflate ett stort felt. Nå får hver flis sin egen tone fra paletten (krem → sand → gulltone → navytone), så seksjonen leser som moduler. ⛔ Tonene er alle avledet av merkefargene, ikke nye farger. Ikke legg til en femte som ikke finnes i paletten. ========================================================================== */ .is-light .cx-value:nth-child(4n+1) { background: #FFFBEF; } .is-light .cx-value:nth-child(4n+2) { background: #F4EEDD; } .is-light .cx-value:nth-child(4n+3) { background: rgba(198, 185, 150, .20); } .is-light .cx-value:nth-child(4n) { background: rgba(16, 32, 48, .07); } /* Større ikoner: 22 px forsvant på en kremflate. 34 px bærer flisen. */ .cx-value-ic, .cx-value-ic svg { width: 34px; height: 34px; } .cx-value-ic { margin-bottom: 16px; } @media (max-width: 759px) { .cx-value-ic, .cx-value-ic svg { width: 30px; height: 30px; } } /* ========================================================================== ⛔ HER LÅ REGLENE FOR TO TEGNINGER — begge FORKASTET av Tor 05.08.2026 («ikke publiser den skissen»), samme dag som de ble laget: · `.cx-draw` / `.dw-*` / `.cx-parts` — arbeidstegning av telefonen med batteri, kameramodul, USB-C og bakdeksel, på krem-flata. · `.cx-letter` / `.cx-portrait` — tegnet portrett ved siden av grunnleggersitatet på mørk flate. Reglene er FJERNET, ikke kommentert ut: død CSS i denne fila har alt kostet oss én runde med å lure på hvilken kopi som gjelder. Komplett markup + CSS for begge ligger i `website/drafts/aerosphone-skisser-IKKE-PUBLISERT.md`. ⛔ Ikke tegn dem på nytt uten at Tor ber om det. ========================================================================== */ /* ========================================================================== HVEM VI ER — egen mørk seksjon (Tor 05.08: «la the company-linjene komme på mørk bakgrunn igjen») Lå før nederst i krem-seksjonen. Layouten er ny, teksten er ikke: brevet, signaturen og de fire fakta-radene er ord for ord de samme. Før: brev | fakta i to spalter side om side — fakta-spalten ble klemt. Nå: sitatet i full lesebredde øverst, fakta som eget rutenett under. ========================================================================== */ /* Fakta-radene under brevet. To spalter når det er plass: fire hairline-rader etter hverandre i full bredde ble en stige, ikke et oppslag. 🪤 `.cx-fact:first-child` fjerner toppstreken på rad 1 — i to spalter er rad 2 også en førsterad og må fjernes på samme måte, ellers står det én strek for mye øverst til høyre. */ .cx-who-facts { margin-top: clamp(30px, 4vw, 46px); } @media (min-width: 760px) { .cx-who-facts { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(30px, 4.5vw, 60px); } .cx-who-facts .cx-fact:nth-child(2) { border-top: 0; padding-top: 8px; } } /* ---- FEM ARGUMENTER (.cx-five) — erstattet render-stripa 17.08.2026 ---- Samme idiom som .cx-strip: 4:5-ruter paa krem. Forskjellen er at hver rute nå baerer en PAASTAND, ikke bare en bildetekst — derfor .cx-fig-head. ⚠️ Ingen hardkodede farger. `.is-light` bytter tokens (--gold blir #7E6F45 for kontrast mot krem, --cream blir blekk); hardkoder du her, ryker den kalibreringen. Se kommentaren over .is-light. ⚠️ Beskrivelsen skjules IKKE paa mobil slik .cx-strip gjorde. Fem ruter stablet med bare etiketter sier ingenting, og det er grunnen til at `.cx-strip-toggle`-modulen kunne slettes i stedet for aa skrives om. */ .cx-five { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.6vw, 20px); margin-top: 30px; } .cx-five > * { min-width: 0; } .cx-five figure { margin: 0; } .cx-five img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--bg2); border: 1px solid var(--line-soft); } .cx-five figcaption { margin-top: 11px; } .cx-five b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; } .cx-five .cx-fig-head { display: block; font-family: var(--font-serif); font-style: italic; font-size: clamp(14px, 1.25vw, 16px); line-height: 1.3; letter-spacing: .032em; color: var(--text); margin-bottom: 6px; } .cx-five .cx-fig-txt { display: block; font-size: 13px; line-height: 1.58; color: var(--cream-faint); } /* Tegningene deler rutemaal med bildene, ellers faller rada fra hverandre. */ .cx-fig-draw { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--bg2); border: 1px solid var(--line-soft); } .cx-fig-draw svg { width: 100%; height: auto; } .d-s { stroke: currentColor; fill: none; stroke-width: .7; opacity: .82; } .d-f { stroke-width: .35; opacity: .34; } .d-t { stroke: var(--gold); stroke-width: .4; } /* Kortet ligger OVER telefonen og maa ha flatens egen farge som fyll, ellers leser strekene under det som stoey. */ .d-card { stroke: currentColor; stroke-width: .7; fill: var(--bg2); opacity: .95; } .d-d { font-size: 5px; letter-spacing: .04em; fill: var(--gold); } .d-l { font-size: 4.4px; letter-spacing: .06em; fill: currentColor; opacity: .55; } /* ---- Silhuett-sammenligning (erstattet stolpediagrammet 17.08.2026) ---- Tor: stolpene var ikke innbydende og for lite forstaaelige. Tre telefoner i SANN innbyrdes maalestokk forklarer seg selv; den gullstiplede linja ligger i AEROS-hoeyde og er selve sammenligningen. ⚠️ Silhuettene er BEVISST generiske — ingen kameraklynge, ingen merker. Et gjenkjennelig konkurrentprodukt i markedsfoering er en varemerkerisiko (se minnet neste-mobil-designprosjekt); en naken rektangelform er det ikke. */ .cx-fig-sizes svg { width: 100%; height: auto; } .z-base { stroke: currentColor; stroke-width: .5; opacity: .22; } .z-o { fill: none; stroke: currentColor; stroke-width: .8; opacity: .42; } .z-gone { stroke-dasharray: 3 2.4; opacity: .3; } .z-us { fill: var(--gold); fill-opacity: .13; stroke: var(--gold); stroke-width: 1.1; } .z-us-d { fill: none; stroke: var(--gold); stroke-width: .8; } .z-mark { stroke: var(--gold); stroke-width: .45; stroke-dasharray: 2.4 2.4; opacity: .65; } .z-mm { font-size: 5px; letter-spacing: .02em; fill: currentColor; opacity: .6; } .z-mm-us{ fill: var(--gold); opacity: 1; font-weight: 600; } .z-lb { font-size: 4px; letter-spacing: .12em; text-transform: uppercase; fill: currentColor; opacity: .4; } .z-lb-us{ fill: var(--gold); opacity: .95; } @media (max-width: 900px) { .cx-five { grid-template-columns: repeat(2, 1fr); gap: 22px; } } @media (max-width: 560px) { .cx-five { grid-template-columns: 1fr; gap: 26px; } } /* ═══════════════════════════════════════════════════════════════════ CENTI-HERO på /the-phone (20.08.2026) Kun to nye klasser. Selve fade-inn kommer fra `.cx-hero.is-open`- reglene lenger opp, som forsinker `.cx-hero-say > *` på nth-child 1–5. ⛔ Ikke legg animasjon her — da fyrer den to ganger. ═══════════════════════════════════════════════════════════════════ */ .cx-hero-say .cx-hero-lede { font-family: var(--font-serif); font-style: italic; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.45; color: var(--gold-light); margin: 18px 0 0; max-width: 26ch; } .cx-hero-say .cx-hero-body { font-size: 16px; line-height: 1.65; color: var(--cream-soft); margin: 14px 0 0; max-width: 44ch; } .cx-hero-say .cx-note { margin: 16px 0 0; max-width: 48ch; } /* Foretaksopplysningene flyttet hit fra forsidens bunn 02.09 (Tor): stedet folk faktisk spoer «hvem er dere» er svaret, ikke en linje i footeren. */ .faq-adr{margin-top:14px;font-size:13.5px;line-height:1.7;color:rgba(255,251,239,.5)} .faq-adr a{color:var(--gold);text-decoration:underline;text-underline-offset:2px} /* ============================================================ AEROS — HEADER OG FOOTER, DELT AV FORSIDEN OG /the-phone ⛔ Flyttet ut av forside.css 02.09: den lastes bare paa forsiden, saa /the-phone hadde fortsatt gammel header og footer. Tor: «footeren og headeren maa vaere lik over hele nettstedet.» ⛔ Legges til SIST i campaign.css, som begge sidene laster. ============================================================ */ /* ---------- header ---------- */ .head{ /* ⛔ `top` skal vaere 0. Sto 36px — plassen til FORSLAG-stripa i utkastet, som ikke finnes live. Ga en gjennomsiktig glipe over menyen ved skroll. */ position:sticky;top:0;z-index:40; display:flex;align-items:center;justify-content:space-between;gap:16px; padding:18px var(--edge); background:rgba(11,20,30,.86);backdrop-filter:blur(12px); border-bottom:1px solid var(--rule-soft); } /* «259 want AEROS Centi» — en grad ned fra `--t-h2`. Den konkurrerte med heroens h1 i vekt, og dette er en statuslinje, ikke sidens paastand. `AEROS` settes i ordmerkets font, som i toppen: navnet skal se likt ut overalt det staar. ⛔ Ikke bruk `--f-serif` her - ordmerket er `--f-logo`. */ /* ⛔ Bare TALLET er fremhevet her (Tor 01.09). Setningen rundt arvet h2 sin vekt, og da konkurrerte «want» og «to exist» med det ene ordet som faktisk endrer seg. Ordmerket har sin egen vekt og roeres ikke. */ .want{font-size:clamp(22px,5.2vw,31px);line-height:1.14;font-weight:400} /* Hele produktnavnet staar i ordmerket, ikke bare «AEROS» - navnet er ett ord utad og skal se likt ut hver gang det staar. */ .want b{ font-family:var(--f-logo);font-weight:400; letter-spacing:.07em;font-size:.95em; } /* Tallet er det eneste levende i setningen - serif, som alle AEROS-tall. ⛔ `inline-block` er ikke pynt: `transform` gjoer ingenting paa et rent inline-element, saa pulsen under ville vaert doed uten den. */ .want .live{ display:inline-block; font-family:var(--f-num);font-style:normal;font-weight:var(--num-weight); font-variant-numeric:tabular-nums; } /* Luft ned til kortet: setningen skal faa staa alene et oeyeblikk foer tallene kommer. (Tor 01.09) */ .want{margin-bottom:clamp(30px,5.4vw,46px)} .backed-say .ask{margin-top:0} .logo{font-family:var(--f-logo);font-size:19px;letter-spacing:.18em;text-transform:uppercase;color:#fff} .nav{display:flex;gap:22px;font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase} .nav a{color:var(--txt-3)} .nav a[aria-current]{color:var(--gold)} /* (Fade-inn ved skroll er FJERNET 02.09 — se front-page.php. Ujevn rytme naar elementer av ulik hoeyde toner hver for seg.) */ /* ---------- footer ---------- */ footer{background:var(--navy);padding:44px 0 clamp(60px,16vw,110px);border-top:1px solid var(--rule-soft)} .foot{ display:flex;flex-wrap:wrap;justify-content:center; gap:12px 26px;font-size:var(--t-note);color:var(--txt-3); } .foot a{color:var(--txt-3)} .foot a:hover{color:var(--gold)} .foot-star{ margin:18px auto 0;text-align:center; font-size:var(--t-note);line-height:1.6;color:rgba(255,251,239,.55);max-width:70ch; } .foot-star + .foot-star{margin-top:8px} .foot-ig{display:inline-flex;align-items:center;gap:8px} .foot-ig svg{width:17px;height:17px;flex:none} /* ---------- SIGNATUREN I BUNNEN ---------- Ordmerket og slagordet avslutter siden slik heroen aapner den. Lenkene under er navigasjon; dette er avsenderen, og den staar over dem. ⛔ Ordmerket settes i `--f-logo`, ikke `--f-serif` — det er to ulike fonter i denne malen, og navnet skal se likt ut i toppen og bunnen. */ .foot-sign{ text-align:center; padding-bottom:clamp(26px,6vw,34px); margin-bottom:clamp(24px,5vw,30px); border-bottom:1px solid var(--rule-soft); } .foot-logo{ display:block; font-family:var(--f-logo);font-size:clamp(19px,4.6vw,23px); letter-spacing:.2em;text-transform:uppercase;color:var(--cream); } .foot-slag{ margin:clamp(9px,2.2vw,12px) auto 0; max-width:none; font-size:var(--t-note);letter-spacing:.02em; color:rgba(255,251,239,.5); } /* ---------- BUNNEN PAA TELEFON ---------- ⛔ EN STABLET LISTE MED HAARSTREK BLE FEM FULLBREDDE RADER og gjorde bunnen til sidens hoyeste seksjon (Tor 02.09). Fire korte lenker staar to og to i et rutenett i stedet: halve hoyden, ingen streker, og oeyet leser dem som ETT felt i stedet for en meny. ⛔ Den sticky kjoep-baren maaler 73px, men iOS endrer viewport-hoyden naar adresselinja gaar inn og ut — `fixed` forskyves da mot dokumentbunnen. Padding settes derfor godt hoyere enn baren, ikke akkurat like hoyt. */ @media (max-width:759px){ .foot{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(13px,3.4vw,17px) clamp(14px,4vw,22px); font-size:var(--t-small); } .foot a{padding:0;border:0} /* Fire lenker gaar opp i 2x2. Instagram staar i ruta der kontakt-adressen laa (Tor 02.09) og trenger ikke lenger egen rad. */ .foot-ig{margin-top:0} .foot-ig svg{width:16px;height:16px} /* Basisregelen sentrerer alt; her trengs bare rutenettet og luften. */ .foot{justify-items:center;text-align:center} .foot-ig{justify-content:center} .foot-star{margin-top:clamp(20px,5vw,26px)} .foot-star + .foot-star{margin-top:9px} footer{padding-bottom:calc(73px + clamp(46px,12vw,64px))} } /* (`#top{scroll-margin-top}` fjernet 02.09: ordmerket laster forsiden i stedet for aa hoppe til ankeret, saa regelen hadde ingen jobb.) */ /* ⛔ SPAMFELLA MAA VAERE USYNLIG. `.hp-field` staar i campaign.css med spesifisitet (0,1,0), men `.field input` her er (0,1,1) og vant — feltet ble et synlig, tomt tekstfelt over e-postfeltet. Fyller noen det ut, blir paameldingen avvist som spam. Laases her, hoyere enn begge. */ .field .hp-field, form.signup .hp-field{ position:absolute;left:-9999px; width:1px;height:1px;padding:0;border:0;overflow:hidden; } /* Forbeholdet er en fotnote, ikke en opplysning paa linje med adressen - det skal kunne leses, men aldri trekke blikket. */ .foot-star{color:rgba(255,251,239,.38)} /* eneste linja igjen — se front-page.php */