/* ============================================================ MIN PENSION, klientfladen Bygget 1:1 efter Bilals eget forlaeg, gemt som redesign/minpension-forlaeg-bilal.html. Gaelder KUN /min-pension (kunde.html), som saetter class="minpension" paa . /forbind bliver paa Kontrolrummet indtil den flyttes med. TO BEVIDSTE AFVIGELSER fra forlaegget, besluttet af Bilal 8/8: 1. FARVER OG SKRIFT kommer fra pensia-tokens.css. Forlaegget er groent (#0E6E63) og sat helt i Inter; Pensia er petrol + teal med Fraunces paa de store tal. Opbygningen er 1:1, paletten er vores. Se docs/8-Design/. 2. PANELER UDEN DATA er udeladt, ikke fyldt med pladsholdere. /api/mine leverer ikke udbetaling aar for aar, fase-tabellen, skatteopdelingen (kun brutto/skat/netto i ét tal), anbefalinger med point, eller varigheden pr. kilde. Skyderne under "Juster og se effekten" ville kraeve en ny beregning, og /min-pension kalder med vilje aldrig /api/analyser. Derfor er fanen Udbetaling fjernet og dens tre kort flyttet op paa Overblik, praecis som i forlaegget. Alt er scopet under body.minpension, saa reglerne vinder over sidens egne style-blokke uden !important. ============================================================ */ /* ============================================================ 1. FLADE ============================================================ */ body.minpension { --mp-kant: var(--kant); --mp-kant-blod: var(--kant-blod); --mp-sunk: var(--flade-nedton); --mp-tint: var(--handling-lys); --mp-tint-kant: #d8ecec; --mp-r: 18px; --mp-r-stor: 26px; --mp-pad: 22px; /* Den oeverste raekkes faelles rytme. Det dybe felt og noegletalskortet ved siden af skal laese som ét par: samme luft i toppen, samme linje til det store tal, og samme bund. Uden de her to maal stod etiketterne 7 px forskudt, tallene 41 px og bundraekkerne 7 px. Maalt 8/8-2026. */ --mp-toppad: 28px; --mp-hovedtal: clamp(2.7rem, 5.6vw, 3.6rem); --mp-hoved: 60px; /* brandraekken i topbaren, samme som resten af rejsen */ --mp-faner: 46px; /* faneraekken i topbaren */ --mp-sh: 0 1px 2px rgba(12,34,48,.04), 0 12px 28px -18px rgba(12,34,48,.22); background-color: var(--flade-side); background-image: radial-gradient(900px 460px at 88% -6%, rgba(11,127,131,.10) 0%, rgba(11,127,131,0) 62%), radial-gradient(760px 420px at 2% 2%, rgba(0,55,85,.08) 0%, rgba(0,55,85,0) 58%); background-attachment: fixed; background-repeat: no-repeat; color: var(--tekst); font-size: 15px; } body.minpension .wrap, body.minpension .topbar-inner { max-width: var(--maxw, 1180px); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } body.minpension main.wrap { padding-bottom: 80px; } /* ============================================================ 2. TOPBAR: brandraekke + faneraekke i ÉN klaebrig blok Forlaegget har fanerne siddende fast i topbaren, saa man kan skifte emne uden at rulle op. Det kraever at de to raekker klaeber SAMMEN, ellers laegger fanebjaelken sig oven i brandraekken naar man ruller. ============================================================ */ body.minpension .topbar { position: sticky; top: 0; z-index: var(--z-topbar, 50); background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(226,233,238,.9); } /* BRANDRAEKKENS GEOMETRI ER KOPIERET FRA klientflade.css (/forbind og /velkommen), som er kilden efter omlaegningen 8/8-2026. Bilal 8/8: den oeverste bjaelke skal se ens ud paa hele rejsen. Faneraekken nedenunder er /min-pensions egen og bliver. Aendrer du bjaelken i klientflade.css, skal den rettes her og i beregn-flow.css med. */ body.minpension .topbar-inner { position: relative; display: flex; align-items: center; gap: 16px; max-width: none; margin: 0; padding: 0 28px; height: var(--mp-hoved); } body.minpension .topbar .logo { font-family: var(--display); font-size: 1.28rem; font-weight: 600; color: var(--maerke); letter-spacing: -.025em; line-height: 1; } body.minpension .topbar .logo .prik { color: var(--handling); } /* Broedkrummen staar som en rolig undertekst ved siden af ordmaerket. */ body.minpension .kr-sti { font-size: .8rem; color: var(--tekst-dim); letter-spacing: .01em; padding-left: 13px; border-left: 1px solid var(--mp-kant); white-space: nowrap; } /* Tastaturhintene hoerte til Kontrolrummet og var ikke bundet til noget. */ body.minpension .kr-tast { display: none; } body.minpension .topnav { margin-left: auto; gap: 8px; align-items: center; } /* Forlaeggets to topbar-knapper. Begge peger paa noget der findes: rapporten er klientens nyeste beregning, hjaelpen er metodesiden. */ body.minpension .top-knap { height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--mp-kant); background: #fff; font: 500 .82rem var(--sans); color: var(--tekst-dim); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: border-color var(--overgang), color var(--overgang); } body.minpension .top-knap:hover { border-color: var(--handling); color: var(--handling-tekst); text-decoration: none; } body.minpension .top-knap[hidden] { display: none; } body.minpension .top-knap svg { width: 14px; height: 14px; } /* --- Faneraekken --- */ body.minpension .k-faner-bar { position: static; margin: 0; padding: 0; background: none; border-bottom: 0; box-shadow: none; } body.minpension .k-faner { max-width: var(--maxw, 1180px); margin: 0 auto; padding: 0 24px; gap: 2px; background: none; border-radius: 0; overflow-x: auto; scrollbar-width: none; } body.minpension .k-faner::-webkit-scrollbar { display: none; } /* Pillen hoerer til den segmenterede vaelger, ikke til understregede faner. */ body.minpension .k-faner .fane-pille { display: none; } body.minpension .k-fane { position: relative; z-index: 1; height: var(--mp-faner); padding: 0 15px; border: 0; border-radius: 10px 10px 0 0; background: none; font: 600 .9rem var(--sans); color: var(--tekst-dim); white-space: nowrap; cursor: pointer; transition: color var(--overgang), background var(--overgang); } body.minpension .k-fane:hover { color: var(--tekst); background: rgba(255,255,255,.66); } body.minpension .k-fane.aktiv { color: var(--maerke); font-weight: 700; } body.minpension .k-fane.aktiv::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2.5px; border-radius: 3px; background: var(--maerke); } body.minpension .k-fane .prik { width: 6px; height: 6px; border-radius: 50%; background: var(--handling); margin-left: 2px; } /* ============================================================ 3. HILSEN Forlaegget aabner HVERT afsnit med samme blok: en lille pille, en stor overskrift og en linje under. Her er .k-hero afsnittet Overbliks hilsen, og .greet de oevrige afsnits. ============================================================ */ body.minpension .k-hero { padding: 26px 0 0; } body.minpension .greet { padding: 0; margin-bottom: 20px; } /* flex, ikke inline-flex: ellers laegger hilsenen sig i forlaengelse af eksempel-maerket, og de to beskeder loeber sammen til én linje. */ body.minpension .eksempel-maerke { display: flex; margin-bottom: 12px; } body.minpension .k-hero .hilsen, body.minpension .greet .hilsen { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--handling-tekst); background: var(--handling-lys); padding: 5px 12px; border-radius: var(--r-pille); } body.minpension .k-hero h1, body.minpension .greet h1 { font-family: var(--display); font-weight: 500; letter-spacing: -.03em; font-size: clamp(1.75rem, 3.4vw, 2.3rem); line-height: 1.1; margin-top: 12px; max-width: none; } body.minpension .k-hero p, body.minpension .greet p { margin-top: 9px; font-size: .95rem; color: var(--tekst-dim); max-width: 68ch; } /* ============================================================ 4. AFSNIT OG SEKTIONSOVERSKRIFT Den lille overskrift med en haarfin linje ud til hoejre kant. Den binder raekken af kort sammen og goer det tydeligt hvor et afsnit begynder, uden en tung overskrift. ============================================================ */ body.minpension .k-panel { padding-top: 34px; scroll-margin-top: 128px; } body.minpension .k-panel + .k-panel:not(.foerst) { margin-top: 0; border-top: 0; } body.minpension .k-panel.foerst { padding-top: 22px; } body.minpension .sect { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 30px 0 14px; } body.minpension .sect h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.025em; font-size: 1.25rem; line-height: 1.2; flex: 0 0 auto; } /* flex: 0 0 auto, IKKE 1 1 . Med en basis maatte undertitlen krympe, og en tekst der krymper bryder til to linjer i stedet for at blive smallere. Saa laa linjen skaevt midt i overskriften. max-width holder den inde paa en telefon: uden den stak den 280 px ud over hoejre kant, og HELE siden fik en vandret rullebjaelke. Maalt paa 390 px. */ body.minpension .sect span { flex: 0 0 auto; max-width: 100%; font-size: .875rem; color: var(--tekst-dim); } /* Linjen er et sidste flex-barn, saa den fylder resten af bredden. */ body.minpension .sect::after { content: ""; flex: 1 0 40px; height: 1px; background: var(--mp-kant); align-self: center; } /* ============================================================ 5. GITTER Forlaeggets to faste forhold. Kortene i en raekke er lige hoeje. ============================================================ */ body.minpension .g { display: grid; gap: 16px; align-items: stretch; } /* Kortene i en raekke er lige hoeje af sig selv (stretch), men INDHOLDET sluttede forskellige steder: pensionstjekket havde 85 px tom bund og formuekortet 131, mens naboen havde 23. Kortet er derfor en lodret flexboks, og den afsluttende bemaerkning skubbes ned, saa kortene ogsaa slutter ens. Maalt 8/8-2026 paa 1440 px. */ body.minpension .g .kort { display: flex; flex-direction: column; } body.minpension .g .kort > .note:last-child { margin-top: auto; } /* En spalte der indeholder FLERE kort (Min profil har to i højre spalte): kortene stables med samme mellemrum som gitterets, og det sidste vokser, så spalten slutter i samme højde som naboen. EGEN KLASSE, ikke `div:not(.kort)`. Den selektor ramte også det dybe felt, som er en div uden .kort, og gav det `gap: 16px`. Så lå der 16 px ekstra mellem etiketten, hovedtallet, brødteksten og pillen, og hovedtallet stod 16 px lavere end nabokortets. Målt 8/8-2026. */ body.minpension .g > .spalte { display: flex; flex-direction: column; gap: 16px; } body.minpension .g > .spalte > .kort { margin-top: 0; } body.minpension .g > .spalte > .kort:last-child { flex: 1 0 auto; } /* ÉN saum ned gennem hele siden. De tre gitre havde hver sin spaltedeling, saa kanten mellem venstre og hoejre kort flyttede sig fra raekke til raekke: maalt 9/8-2026 laa saummen ved 788 px i hero-raekken, 767 px i raekken lige under og 705 px paa Min profil. Kortene stod altsaa forskudt i forhold til hinanden ned gennem siden. Nu deler alle tre den samme deling, og kanterne flugter. */ body.minpension .g2, body.minpension .g-hero, body.minpension .g-main { grid-template-columns: 1.25fr 1fr; } body.minpension .mt { margin-top: 16px; } @media (max-width: 1000px) { body.minpension .g2, body.minpension .g-hero, body.minpension .g-main { grid-template-columns: 1fr; } } /* ============================================================ 6. KORT ============================================================ */ body.minpension .kort, body.minpension .k-kort, body.minpension .profil-kort, body.minpension .tom-kort, body.minpension .flow-tak { background: var(--flade-kort); border: 1px solid var(--mp-kant); border-radius: var(--mp-r); box-shadow: var(--mp-sh); padding: var(--mp-pad) 24px; } body.minpension .tom-kort { padding: 40px 38px; } body.minpension .k-kort + .k-kort, /* Afstanden mellem to kort i samme spalte kommer fra .spalte's gap (16 px). En margen her ville laegge sig OVENI og give 32 px mellem dem. */ body.minpension .g > .spalte > .profil-kort + .profil-kort { margin-top: 0; } /* Kortets hoved: titel til venstre, mrkat til hoejre. */ body.minpension .chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; } body.minpension .chead h3, body.minpension .kort h3, body.minpension .k-kort h3, body.minpension .profil-kort h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; } body.minpension .chead p, body.minpension .kort .under, body.minpension .k-kort .under, body.minpension .profil-sub { font-size: .82rem; color: var(--tekst-dim); margin-top: 4px; line-height: 1.5; } body.minpension .kicker, body.minpension .kort .mrk { display: block; font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-dim); } /* Mrkat i kortets hoejre hjoerne ("Godt", "Brug for et kig"). */ body.minpension .tagline { display: inline-block; padding: 5px 11px; border-radius: 9px; font-size: .74rem; font-weight: 700; white-space: nowrap; } body.minpension .tagline.god { background: var(--ok-lys); color: var(--ok); } body.minpension .tagline.mid { background: var(--fremhaev-lys); color: var(--fremhaev-tekst); } body.minpension .tagline.lav { background: var(--fejl-lys); color: var(--fejl); } /* Fremhaevet bemaerkning i bunden af et kort. */ body.minpension .note { margin: 16px 0 0; padding: 13px 15px; border-radius: 13px; background: var(--mp-tint); border: 1px solid var(--mp-tint-kant); font-size: .84rem; color: var(--tekst-dim); line-height: 1.55; } body.minpension .note b { color: var(--tekst); } /* ============================================================ 7. DET DYBE FELT (hovedtallet) Solid bundfarve UNDER gradienten: en flade med kun en gradient har backgroundColor = transparent, og saa maaler enhver kontrastkontrol den hvide tekst som staaende paa hvid. ============================================================ */ body.minpension .hero { position: relative; overflow: hidden; border-radius: var(--mp-r-stor); padding: var(--mp-toppad) 30px; color: var(--tekst-paa-dyb); background-color: var(--flade-dyb); background-image: radial-gradient(680px 300px at 84% -22%, rgba(11,127,131,.85) 0%, rgba(11,127,131,0) 62%), linear-gradient(155deg, var(--flade-dyb), var(--flade-dyb-2)); box-shadow: 0 2px 6px rgba(12,34,48,.06), 0 24px 56px -26px rgba(0,39,60,.6); display: flex; flex-direction: column; } body.minpension .hero::after { content: ""; position: absolute; left: 6%; bottom: -60%; width: 380px; height: 240px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(78,199,203,.22), transparent 70%); } body.minpension .hero > * { position: relative; z-index: 1; } body.minpension .hero .kicker { color: var(--handling-paa-dyb); } body.minpension .hero .n { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; flex-wrap: wrap; min-height: var(--mp-hovedtal); } body.minpension .hero .n b { font-family: var(--display); font-weight: 500; font-size: var(--mp-hovedtal); line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums lining-nums; color: #fff; } body.minpension .hero .n span { font-size: .95rem; color: var(--tekst-dim-dyb); } body.minpension .hero p { margin: 13px 0 0; font-size: .875rem; color: var(--tekst-dim-dyb); max-width: 46ch; line-height: 1.55; } body.minpension .hero p b { color: #fff; } /* Pillen er feltets bundlinje. margin-top:auto holder den nede, saa det dybe felt slutter i samme hoejde som nabokortet. SOLID bundfarve (petrol lysnet 12 %), ikke rgba(255,255,255,.12): en flade med kun en gennemsigtig farve maaler som naesten-hvid, og saa laeser enhver kontrastkontrol den hvide tekst som staaende paa hvid. Maalt: 9,7:1. */ body.minpension .pille { align-self: flex-start; margin-top: auto; display: inline-block; padding: 9px 15px; border-radius: var(--r-pille); background-color: #10405a; border: 1px solid rgba(255,255,255,.2); font-size: .84rem; color: var(--tekst-paa-dyb); } body.minpension .pille[hidden] { display: none; } body.minpension .pille b { color: #fff; font-weight: 700; } /* Nabokortet: ét stort tal foroven, to smaa noegletal forneden. */ /* Samme top-luft som det dybe felt, saa de to etiketter staar paa linje. */ body.minpension .g-hero > .statbig { display: flex; flex-direction: column; justify-content: space-between; padding-top: var(--mp-toppad); padding-bottom: var(--mp-toppad); } /* Tallet er mindre end hovedtallet ved siden af, men dets LINJE er den samme: blokken er lige saa hoej, og teksten sidder i bunden af den. Saa staar de to tal paa samme grundlinje i stedet for 41 px fra hinanden. */ body.minpension .statbig .v { font-family: var(--display); font-weight: 500; font-size: 2.35rem; line-height: 1.05; letter-spacing: -.035em; margin-top: 10px; font-variant-numeric: tabular-nums lining-nums; min-height: var(--mp-hovedtal); display: flex; align-items: flex-end; } body.minpension .statbig .lbl { font-size: .82rem; color: var(--tekst-dim); margin-top: 9px; line-height: 1.5; } body.minpension .mini { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mp-kant-blod); } body.minpension .mini[hidden] { display: none; } body.minpension .mini b { display: block; margin-top: 5px; font-family: var(--font-tal); font-size: 1.18rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; } body.minpension .mini small { display: block; margin-top: 2px; font-size: .74rem; color: var(--tekst-dim); } /* ============================================================ 8. PENSIONSTJEK: ring + fire bjaelker ============================================================ */ body.minpension .score { display: flex; align-items: center; gap: 24px; } body.minpension .ring { position: relative; width: 122px; height: 122px; flex: none; } body.minpension .ring svg { display: block; width: 122px; height: 122px; } body.minpension .ring .midt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } body.minpension .ring .midt b { font-family: var(--display); font-weight: 500; font-size: 2rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; } body.minpension .ring .midt span { font-size: .7rem; color: var(--tekst-dim); margin-top: 3px; } body.minpension .bars { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; } /* Etiketten fylder kun det, den er bred, saa bjaelken faar resten. Med 1fr paa etiket-spalten stod bjaelkerne skubbet helt ud til hoejre med et tomt felt imellem. IKKE overflow:hidden paa etiketten: den baerer forklarings-boblen, og et klippende element klipper ogsaa den absolut placerede boble. */ body.minpension .bar { display: grid; grid-template-columns: minmax(0, max-content) 1fr 46px; align-items: center; gap: 12px; font-size: .84rem; } body.minpension .bar .t { color: var(--tekst-dim); white-space: nowrap; min-width: 0; } body.minpension .bar .tr { display: block; height: 8px; border-radius: 99px; background: rgba(12,34,48,.07); overflow: hidden; } body.minpension .bar .fl { display: block; height: 8px; border-radius: 99px; transition: width .7s var(--overgang); } body.minpension .bar .v { text-align: right; font-family: var(--font-tal); font-weight: 600; font-size: .8rem; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; } /* ============================================================ 9. DAEKNINGSGRAD: donut + signatur ============================================================ */ /* flex-start, ikke center: signaturraekkerne til hoejre baerer ogsaa en bemaerkning, saa spalten er hoejere end donut'en, og en centreret donut kom til at haenge under den foerste signaturlinje. */ body.minpension .donutrow { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; } body.minpension .donut { position: relative; width: 152px; height: 152px; flex: none; } body.minpension .donut svg { display: block; width: 152px; height: 152px; } body.minpension .donut-midt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } body.minpension .donut-midt b { font-family: var(--display); font-weight: 500; font-size: 1.75rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; } body.minpension .donut-midt span { font-size: .7rem; color: var(--tekst-dim); margin-top: 3px; } body.minpension .lgs { flex: 1 1 190px; display: flex; flex-direction: column; gap: 11px; min-width: 0; } body.minpension .lgi { display: flex; align-items: center; gap: 10px; font-size: .86rem; } body.minpension .lgi .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; } body.minpension .lgi .sw.vejl { height: 4px; width: 14px; border-radius: 99px; background: var(--fremhaev); } body.minpension .lgi .nm { color: var(--tekst-dim); flex: 1; min-width: 0; } body.minpension .lgi .vl { font-family: var(--font-tal); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; } /* ============================================================ 10. REGNESTYKKET: foer skat − skat = til dig Operatorerne staar MELLEM boksene, saa det laeses som ét regnestykke og ikke som tre loesrevne tal. ============================================================ */ body.minpension .flowrow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; } body.minpension .fbox { padding: 15px 16px; border-radius: 13px; border: 1px solid var(--mp-kant-blod); background: var(--mp-sunk); } body.minpension .fbox.hl { background: var(--mp-tint); border-color: var(--mp-tint-kant); } body.minpension .fbox .k { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-dim); } body.minpension .fbox .v { font-family: var(--display); font-weight: 500; font-size: 1.72rem; line-height: 1.1; letter-spacing: -.03em; margin-top: 7px; font-variant-numeric: tabular-nums lining-nums; } body.minpension .fbox .s { font-size: .74rem; color: var(--tekst-dim); margin-top: 4px; } body.minpension .op { font-size: 1.2rem; color: var(--tekst-dim); text-align: center; } @media (max-width: 760px) { body.minpension .flowrow { grid-template-columns: 1fr; gap: 8px; } body.minpension .op { display: none; } } /* ============================================================ 11. HVOR PENGENE KOMMER FRA: stak + fire kildekort ============================================================ */ body.minpension .stack { display: flex; height: 16px; border-radius: 99px; overflow: hidden; background: var(--mp-sunk); gap: 2px; margin-bottom: 18px; } body.minpension .stack i { display: block; height: 100%; } /* auto-fit, IKKE repeat(4): de fleste har tre kilder, ikke fire, og med fire faste spalter stod det sidste kort 274 px fra hoejre kant med et hul ved siden af. auto-fit fordeler den plads der er, paa de kort der ER. */ body.minpension .srcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; } @media (max-width: 520px) { body.minpension .srcgrid { grid-template-columns: 1fr; } } body.minpension .src { padding: 14px 15px; border-radius: 13px; border: 1px solid var(--mp-kant-blod); background: var(--mp-sunk); } body.minpension .src .h { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--tekst-dim); margin-bottom: 8px; } body.minpension .src .h i { width: 9px; height: 9px; border-radius: 3px; flex: none; } body.minpension .src .h .nv { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Loebetiden er hele forskellen paa rate og livrente, og den skal kunne ses uden at laese: messing naar ydelsen ophoerer, teal naar den er livsvarig. Begge er tekst-varianterne fra tokens, de eneste af de to farver der er AA. */ body.minpension .src .h .loebetid { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; padding: 2px 7px; border-radius: 99px; white-space: nowrap; margin-top: 0; } body.minpension .src .h .loebetid.livsvarig { color: var(--handling-tekst); background: var(--handling-lys); } body.minpension .src .h .loebetid.ophoerer { color: var(--fremhaev-tekst); background: var(--fremhaev-lys); } body.minpension .src .src-nu { font-size: .76rem; color: var(--tekst-dim); margin-top: 3px; font-variant-numeric: tabular-nums lining-nums; } /* Enheds-noten er en fodnote, ikke en fremhaevelse: uden det stod to tintede kasser oven paa hinanden under kortene, og den vigtige (rate-ophoeret) mistede sin vaegt. */ body.minpension .note.dim2 { background: none; border: 0; padding: 0; margin-top: 12px; font-size: .78rem; color: var(--tekst-svag); } body.minpension .src b { display: block; font-family: var(--display); font-weight: 500; font-size: 1.35rem; line-height: 1.1; letter-spacing: -.025em; font-variant-numeric: tabular-nums lining-nums; } body.minpension .src span { display: block; font-size: .74rem; color: var(--tekst-dim); margin-top: 4px; } /* Hvert kort har sin egen bane med kildens andel, saa stykket i stakken ovenover kan genfindes ved siden af tallet. Samme greb som i rapporten paa /beregn; de to flader viser den samme figur og skal blive ved med det. */ body.minpension .src .andel-bane { height: 6px; border-radius: 99px; background: var(--mp-flade, #fff); box-shadow: inset 0 0 0 1px var(--mp-kant-blod); overflow: hidden; margin: 10px 0 7px; } body.minpension .src .andel-bane i { display: block; height: 100%; border-radius: 99px; } body.minpension .src span b { display: inline; font-family: var(--sans); font-size: .82rem; font-weight: 700; color: var(--tekst); letter-spacing: 0; font-variant-numeric: tabular-nums lining-nums; } /* ============================================================ 12. GRAFER ============================================================ */ body.minpension .chartwrap { position: relative; } body.minpension svg.chart { display: block; width: 100%; height: auto; } body.minpension svg.chart .gl { stroke: var(--mp-kant-blod); stroke-width: 1; } body.minpension svg.chart .ax { stroke: var(--mp-kant); stroke-width: 1; } body.minpension svg.chart text { font-family: var(--font-tal); font-size: 11px; fill: var(--tekst-dim); font-variant-numeric: tabular-nums lining-nums; } /* Slutbeloebet ved kurvens ende. Kom med da kurven blev delt med rapporten paa /beregn (formuekurve.js), hvor den altid har staaet. */ body.minpension svg.chart text.slut { font-family: var(--display); font-size: 15px; font-weight: 600; fill: var(--tekst); } body.minpension .hit { position: absolute; inset: 0; cursor: crosshair; } body.minpension .tip { position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%, -125%); background: var(--flade-dyb); color: #fff; padding: 9px 12px; border-radius: 11px; font-size: .78rem; white-space: nowrap; z-index: 5; box-shadow: 0 12px 24px -10px rgba(0,39,60,.6); transition: opacity .15s; font-variant-numeric: tabular-nums lining-nums; } body.minpension .tip b { display: block; font-size: .95rem; margin-top: 3px; } /* Knappen der skifter mellem fremtidens kroner og nutidskroner. */ body.minpension .linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--handling-tekst); font: 600 .8rem var(--sans); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } /* ============================================================ 13. TABEL (milepaele) ============================================================ */ /* Brede tabeller ruller i deres EGEN kasse, aldrig hele siden. */ body.minpension .tabel-rul { overflow-x: auto; } body.minpension table.dt { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 380px; } body.minpension table.dt th, body.minpension table.dt td { text-align: right; padding: 11px 10px; border-bottom: 1px solid var(--mp-kant-blod); font-variant-numeric: tabular-nums lining-nums; } body.minpension table.dt td { font-family: var(--font-tal); } body.minpension table.dt th:first-child, body.minpension table.dt td:first-child { text-align: left; font-family: var(--sans); } body.minpension table.dt th { font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-dim); } body.minpension table.dt tr:last-child td { border-bottom: 0; } body.minpension table.dt tr.naa td { background: var(--mp-tint); font-weight: 600; } /* ============================================================ 14. RAEKKER MED DATO-CHIP (rapporter, dokumenter, moeder) ============================================================ */ body.minpension .rep { display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--mp-kant-blod); border-radius: 13px; background: var(--mp-sunk); transition: background var(--overgang), border-color var(--overgang); flex-wrap: wrap; } body.minpension .rep:last-child { margin-bottom: 0; } body.minpension .rep:hover { background: #fff; border-color: var(--mp-kant); } body.minpension .rep .dt2 { width: 52px; flex: none; text-align: center; padding: 7px 0; border-radius: 11px; background: #fff; border: 1px solid var(--mp-kant); } body.minpension .rep .dt2 b { display: block; font-family: var(--font-tal); font-size: 1.05rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums lining-nums; } body.minpension .rep .dt2 span { display: block; font-size: .64rem; color: var(--tekst-dim); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; } body.minpension .rep .mn { flex: 1 1 200px; min-width: 0; } body.minpension .rep .mn b { display: block; font-size: .92rem; font-weight: 600; } body.minpension .rep .mn span { font-size: .8rem; color: var(--tekst-dim); } body.minpension .rep .amt { text-align: right; white-space: nowrap; } body.minpension .rep .amt b { display: block; font-family: var(--font-tal); font-size: .98rem; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; } body.minpension .rep .amt span { font-size: .74rem; color: var(--tekst-dim); } body.minpension .rep .acts { display: flex; gap: 7px; flex: none; flex-wrap: wrap; } body.minpension .lr-btn { font: 600 .78rem var(--sans); padding: 7px 12px; border-radius: 9px; border: 1px solid var(--mp-kant); background: #fff; color: var(--tekst); cursor: pointer; text-decoration: none; white-space: nowrap; } body.minpension .lr-btn:hover { border-color: var(--handling); color: var(--handling-tekst); text-decoration: none; } body.minpension .lr-btn.lr-slet { color: var(--fejl); } body.minpension .lr-btn.lr-slet:hover { border-color: var(--fejl); color: var(--fejl); background: var(--fejl-lys); } body.minpension .liste-tom { color: var(--tekst-dim); font-size: .875rem; padding: 6px 0; } /* ============================================================ 15. RAADGIVER ============================================================ */ body.minpension .ra-kort { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } body.minpension .ra-kort img, body.minpension .ra-kort .ra-ini { width: 62px; height: 62px; border-radius: 20px; object-fit: cover; flex: none; background: linear-gradient(150deg, var(--handling), var(--maerke)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.15rem; } body.minpension .ra-kort .ra-navn { font-size: 1.02rem; font-weight: 700; } body.minpension .ra-kort .ra-titel { font-size: .8rem; color: var(--tekst-dim); } body.minpension .ra-kort .ra-kontakt { margin-top: 7px; font-size: .8rem; display: flex; flex-wrap: wrap; gap: 4px 14px; } body.minpension .ra-kort .ra-kontakt a { color: var(--handling-tekst); font-weight: 600; } /* ============================================================ 16. PROFIL OG DE TO DOERE UD ============================================================ */ body.minpension .profil-felt { max-width: none; } body.minpension .profil-felt input { border-radius: 11px; border-color: var(--mp-kant); } body.minpension .navn-banner { border-radius: var(--mp-r); } body.minpension .kort.fare { border-color: #f0dcdc; background: #fefafa; } body.minpension .dz { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 760px) { body.minpension .dz { grid-template-columns: 1fr; } } body.minpension .dz .opt { padding: 18px 19px; border-radius: 14px; border: 1px solid var(--mp-kant); background: #fff; display: flex; flex-direction: column; } body.minpension .dz .opt > b { font-size: 1rem; margin-bottom: 3px; } body.minpension .dz .opt .sub { font-size: .82rem; color: var(--tekst-dim); margin-bottom: 10px; } body.minpension .dz .opt p { font-size: .84rem; color: var(--tekst-dim); line-height: 1.55; margin: 0 0 12px; } body.minpension .dz .opt .tagline { align-self: flex-start; margin-top: auto; } body.minpension .dz .opt .knap { align-self: flex-start; margin-top: 14px; } body.minpension .luk-note { font-size: .84rem; color: var(--tekst-dim); margin-top: 14px; } /* ============================================================ 17. BUNDEN ============================================================ */ body.minpension .k-bund { padding: 46px 0 12px; font-size: .8rem; color: var(--tekst-dim); } /* ============================================================ 18. MOBIL ============================================================ */ @media (max-width: 760px) { body.minpension .kr-sti { display: none; } body.minpension .wrap, body.minpension .k-faner { padding-left: 16px; padding-right: 16px; } /* Topbaren beholder sine 28 px ogsaa paa mobil: den skal staa samme sted som paa /login, /velkommen, /forbind og /beregn. */ body.minpension .kort, body.minpension .k-kort, body.minpension .profil-kort { padding: 18px; } body.minpension .hero { padding: 24px; } body.minpension .k-hero h1, body.minpension .greet h1 { font-size: 1.55rem; } body.minpension .k-panel { scroll-margin-top: 118px; } /* align-items: stretch, IKKE flex-start. Med flex-start krympede bjælke-spalten til sit indhold, og de fire bjælker blev 20 px brede. Målt på 390 px. Ringen centreres for sig. */ body.minpension .score { flex-direction: column; align-items: stretch; gap: 18px; } body.minpension .score .ring { align-self: center; } body.minpension .top-knap { display: none; } }