@charset "UTF-8"; /* ========================================================= ARYTMI · v4 — tur-forberedelses-flowet VIGTIGT: @charset-linjen SKAL stå allerførst. Klassenavne som .knap.primær og .dæmpet indeholder æ/ø/å, og servere der sender text/css uden charset (fx python -m http.server) får browseren til at læse filen som latin-1 — så matcher de selektorer ingenting, og halvdelen af designet forsvinder lydløst. Palette fra logoet: kobber, bark, oliven, sølvgrå, creme ========================================================= */ /* Appens egne skrifter (11/8). Før lånte appen skrift fra maskinen, så den så forskellig ud på Mac, Windows og Android — og overskrifter og tal endte som TO forskellige skrifter på Windows. Nu er de pinnet. Variable fonte: vægt-INTERVALLET i font-weight er det, der gør at font-weight:650 (brugt 5 steder) rent faktisk rammer 650 og ikke 700. Relativ sti uden skråstreg foran — så virker de også på demo-linket, der ligger i en undermappe. Licenser ligger i fonts/. */ @font-face{ font-family:'Fraunces'; font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/fraunces.woff2') format('woff2'); } @font-face{ font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/inter.woff2') format('woff2'); } /* PALETTEN — hver farve, appen bruger, står her og kun her (samlet 27/9). Resten af filen henter dem med var(--p-…). Et nyt farvesæt skiftes ved at rette værdierne nedenfor. Temaerne (morgen/dag/nat) længere nede peger på paletten og flytter ikke på den. Navnene: brandfarverne ved navn, resten efter familie og lyshed — "lys-1" er den lyseste af de lyse. -rgb er samme farve til rgba(). */ :root{ /* DEN NYE PALETTE (Oliivia 27/9). Rollerne står ved tokens nedenfor. Kontrast målt på koderne: brun på creme 11,8 · brun på sand 10,1 · brun på CTA 5,6 · rust på creme 6,1 · terracotta på creme 3,2 (kun grafik/ikoner) · petrol på creme 4,4 (kun ikoner/streger). */ --p-deep-brown:#4a2417; --p-deep-brown-rgb:74,36,23; --p-warm-cream:#f7efe4; --p-warm-cream-rgb:247,239,228; --p-soft-sand:#e9ddcf; --p-soft-sand-rgb:233,221,207; --p-terracotta:#c86f3c; /* ikke i brug: accenten er rust (Kennet 27/9) */ --p-cta:#e8935a; --p-cta-rgb:232,147,90; --p-rust:#8e4333; --p-petrol:#5f746f; --p-petrol-rgb:95,116,111; --p-bark:#3a3227; --p-bark-rgb:58,50,39; --p-bark-moerk:#241f18; --p-bark-moerk-rgb:36,31,24; --p-bark-tekst:#2e2a24; --p-brun-1:#8a5f3e; --p-brun-2:#8a5a33; --p-brun-3:#8a6320; --p-brun-4:#6e4f2a; --p-brun-5:#6b4526; --p-brun-6:#5b4a2e; --p-brun-7:#5e3729; --p-brun-8:#4a4238; --p-brun-9:#5c4022; --p-brun-10:#453d32; --p-brun-11:#463c30; --p-brun-12:#3b342b; --p-brun-13:#2a231b; --p-brun-14:#242019; --p-brun-15:#241f19; --p-brun-16:#201c16; --p-brun-16-rgb:32,28,22; --p-brun-17:#1e1a14; --p-brun-17-rgb:30,26,20; --p-brun-18:#1e1912; --p-brun-18-rgb:30,25,18; --p-brun-19:#1b1712; --p-brun-20:#191713; --p-brun-20-rgb:25,23,19; --p-brun-21:#181510; --p-brun-21-rgb:24,21,16; --p-brun-22:#14110d; --p-brun-22-rgb:20,17,13; --p-brun-23:#14110c; --p-brun-23-rgb:20,17,12; --p-brun-24:#14100b; --p-brun-24-rgb:20,16,11; --p-brun-25:#120f0b; --p-brun-25-rgb:18,15,11; --p-creme:#eceae3; --p-creme-rgb:236,234,227; --p-creme-lys:#faf9f5; --p-gran:#354a3e; --p-gran-rgb:53,74,62; --p-gran-lys:#e2ece5; --p-gran-mid:#4f6b58; --p-groen-1:#e3edc7; --p-groen-2:#c9d5cd; --p-groen-3:#9ec2ab; --p-groen-4:#7aa388; --p-groen-4-rgb:122,163,136; --p-groen-5:#5c6b48; --p-groen-6:#4d5c3a; --p-groen-7:#3c5546; --p-groen-8:#232d27; --p-groen-8-rgb:35,45,39; --p-graa-1:#b9beb6; --p-graa-2:#a6a894; --p-graa-3:#9a948a; --p-graa-4:#8a8378; --p-graa-5:#6b675c; --p-graa-6:#6a655b; --p-graa-7:#57534a; --p-hvid:#ffffff; --p-hvid-rgb:255,255,255; --p-kobber:#b0794e; --p-kobber-rgb:176,121,78; --p-kobber-1:#f6e3b4; --p-kobber-2:#e9dcc0; --p-kobber-3:#eaddbe; --p-kobber-4:#e8d5ae; --p-kobber-4-rgb:232,213,174; --p-kobber-5:#e8cfa3; --p-kobber-5-rgb:232,207,163; --p-kobber-6:#e4c9a4; --p-kobber-7:#e0a48d; --p-kobber-8:#cdb591; --p-kobber-9:#d0a060; --p-kobber-9-rgb:208,160,96; --p-kobber-lys:#d2a97e; --p-kobber-lys-rgb:210,169,126; --p-lys-1:#fcfbf7; --p-lys-1-rgb:252,251,247; --p-lys-2:#fdfbf4; --p-lys-3:#fdf6f0; --p-lys-4:#faf8f2; --p-lys-4-rgb:250,248,242; --p-lys-5:#f9f5e9; --p-lys-6:#f4f2ec; --p-lys-7:#f6f3ea; --p-lys-7-rgb:246,243,234; --p-lys-8:#f4f1e9; --p-lys-9:#f2efe6; --p-lys-9-rgb:242,239,230; --p-lys-10:#f4efe4; --p-lys-11:#f6f0e0; --p-lys-12:#f6ecdf; --p-lys-13:#f6e8d8; --p-lys-14:#e8e4da; --p-lys-15:#e7e3d9; --p-lys-16:#e8e2d5; --p-lys-17:#e2ead2; --p-lys-18:#f0e2cb; --p-lys-19:#eadfcd; --p-lys-20:#e4e0d3; --p-oliven:#5f6353; --p-oliven-lys:#8b8d7a; --p-roed-1:#8c3a2e; --p-roed-2:#7d4938; --p-roed-3:#7a3227; --p-roed-4:#74301f; --p-sand-1:#dfdbd0; --p-sand-2:#ddd8cb; --p-sand-3:#d9d3c5; --p-sand-4:#d8d4c6; --p-sand-5:#cfc8b9; --p-sand-6:#cdc6b3; --p-sand-7:#c9c2b0; --p-sand-8:#9b917a; --p-sand-9:#7d7261; --p-sort:#000000; --p-sort-rgb:0,0,0; } :root{ /* Fallback-stakkene er præcis dem, appen brugte før — går en fontfil tabt, ser appen ud som den plejede i stedet for at gå i stykker. */ --skrift-display:'Fraunces',"Iowan Old Style","Palatino Linotype","Palatino","Georgia",serif; --skrift-brød:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --gran:var(--p-deep-brown); /* mørk bark — primær */ --gran-mørk:color-mix(in srgb,var(--p-deep-brown) 80%,#000); --fjord:color-mix(in srgb,var(--p-deep-brown) 80%,var(--p-warm-cream)); /* dæmpet oliven */ --fjord-lys:color-mix(in srgb,var(--p-deep-brown) 60%,var(--p-warm-cream)); --rav:var(--p-rust); /* accenten er Warm Rust Red (Kennet 27/9) */ /* kobber — logoets accent */ --rav-lys:color-mix(in srgb,var(--p-rust) 55%,var(--p-warm-cream)); --rav-tekst:var(--p-rust); /* accent som TEKST — terracotta er for svag til lille tekst */ --cta:var(--p-cta); /* hovedknapperne */ --paa-cta:var(--p-deep-brown); /* 5,6:1 — hvid på orange giver kun 2,4 */ --nav-flade:var(--p-deep-brown); /* bundmenuen er en mørk sektion — dækkende, se .bundnav */ /* Turens tre faser (TUR_FASER i app.js): planlægning, pakning, start tur. */ --fase-plan:var(--p-petrol); --fase-pak:var(--p-rust); --fase-afsted:var(--p-deep-brown); --nat:var(--p-brun-14); /* ---- ankerfarven (14/8) ---- Appen havde ingen kølig tone overhovedet: kobber, creme og bark trækker alle samme vej, og derfor læses hele appen som blød uden modvægt. --anker er jeres grønne, kørt dybere ned og drejet et par grader mod blå. Den er IKKE --fjord: #5f6353 er for lyst og for varmt (gulgrønt) til at kunne være modvægt — det ligger i samme temperaturfamilie som kobberet. --fjord bliver som sekundær; --anker er den, fakta og struktur står i. Kontrast MÅLT mod appens tre bunde: bund 9,8 · flade 11,2 · kort 11,2. --anker-mid rammer 6,3 på flade og kort — over kravet på 4,5. */ /* Justeret 14/8 fra #2F3A34: den lå kun 19 RGB-enheder fra barken #3A3227, og ved afkrydsningsfelt-størrelse kunne øjet ikke skelne dem — den var teknisk grøn, ikke synligt grøn. #354A3E ligger 34 fra barken, altså næsten dobbelt så langt, og er stadig mørk og kølig. MÅLT: 7,9 på bund · 9,1 på flade · 9,1 på kort · creme ovenpå 8,3. */ --anker:var(--p-deep-brown); --anker-mid:var(--p-petrol); /* ikoner og understøttende tal på lys bund — målt 5,6:1 */ --anker-lys:color-mix(in srgb,var(--p-petrol) 14%,var(--p-warm-cream)); /* fladen bag et faktafelt */ /* ---- tre farver, der FOER kun fandtes i lys udgave (KN 15/9) ---- Kennet: "Der er altsaa flere steder i appen hvor man ikke kan se skrifttypen pga temaets farver." Maalt med en kontrastproeve paa fem skaerme i begge moerke temaer. Det var ikke 181 spredte fejl, men FIRE farver brugt mange steder: --anker som TEKST 1,12:1 "Kort fortalt", faciliteter, taelleren .knap.stille 1,60:1 "Inviter en ven med" .knap.stille.fare 1,68:1 "Annullér turen" --fjord 1,98:1 tjeklistens navne, "Her er du" Kravet er 4,5:1. 1,12 betyder i praksis usynlig. --anker kan ikke bare vendes: den er OGSAA baggrund elleve steder (tjekboksen, den valgte chip, segmentknappen). Derfor en egen token til tekstbrugen, som i lys er praecis --anker og i moerke bliver --anker-mid, der allerede fandtes og allerede er temasat. */ --anker-tekst:var(--anker); --stille:color-mix(in srgb,var(--p-deep-brown) 80%,var(--p-warm-cream)); /* den stille knaps tekst */ --fare:var(--p-rust); /* den stille knap, naar handlingen fortryder noget */ /* Blaek til flader, der er LYSE I ALLE TEMAER (KN 15/9). Startpillen har en fast creme-gradient som baggrund, men tog sin tekstfarve fra --gran - og --gran vender til lys i de moerke temaer. Resultat: lys tekst paa lys flade, "NY ARYTME" usynlig om aftenen. Den her token maa ALDRIG overskrives i et tema. Er fladen fast, skal blaekket vaere det ogsaa. */ --paa-lys-flade:var(--p-deep-brown); /* ---- hvor ankerfarven bruges (rettet 14/8 efter KN's indvending) ---- Første udgave brugte den KUN på fakta-værdier. Men appens faktafelter er næsten tomme (underlag: 0 af 19 steder, faciliteter kun delvist skrevet), så modvægten havde reelt ét element at stå på i hele overblikket — og var derfor usynlig. Det var en designfejl, ikke en implementeringsfejl. Reglen nu, og den skal holdes: --anker = TILSTAND OG STRUKTUR. Det valgte, det klarede, det der skrider frem: primærknap, afkrydsning, valgte segmenter og chips, aktive trin-prikker, fremdriftsbjælker, fakta. --gran = TEKST. Overskrifter og brødtekst. Røres ikke. --rav = ACCENT. Logoets kobber, EKG'en, ikoner, det der skal fange øjet ét sted ad gangen. Røres ikke. Sådan virker farven, uanset om nogen har skrevet data ind endnu. */ --bund:var(--p-warm-cream); /* sølvgrå creme */ --flade:var(--p-soft-sand); --flade-dyb:color-mix(in srgb,var(--p-deep-brown) 10%,var(--p-soft-sand)); --tekst:var(--p-deep-brown); /* Var #8e8a7f: 3,3:1 mod fladen og under kravet på 4,5:1 — brugt i småtekst 18 steder. #6b675c klarer 4,5:1 på ALLE tre bunde appen bruger (bund 4,7 · flade 5,4 · kort 5,1). Målt, ikke skønnet. (13/8) */ --dæmpet:color-mix(in srgb,var(--p-deep-brown) 75%,var(--p-warm-cream)); --linje:color-mix(in srgb,var(--p-deep-brown) 18%,var(--p-soft-sand)); --radius:18px; /* var 26px — se kort-blokken nedenfor */ --radius-m:14px; /* kompakte kort og knap-kort */ /* ---- ét kort i stedet for syv (13/8) ---- Appen havde syv næsten ens matterede flader: tre gennemsigtigheder, to slørings-styrker, fire hjørneafrundinger og fem skygge-opskrifter til samme idé. Forskellene var for små til at ses og store nok til, at det aldrig føltes helt roligt. Nu ét sæt værdier, som alle syv trækker på. Vil man ændre kortenes udseende, sker det HER — ikke syv steder. */ /* ---- fra sky til flade (14/8) ---- Kortet svævede: 60 % gennemsigtigt, 16px sløring, en hvid inderkant og 26px hjørner. Ingenting i appen havde en kant, man kunne se, og dét er det, der læses som "blødt". Samme farver, samme indhold — men nu ligger kortet ned på siden i stedet for at flyde over den. Vær opmærksom: ved 86 % dækker fladen reelt landskabet bag kortet (blandet giver den rgb(250,249,244) — praktisk talt --flade). Det er bevidst: landskabet skal ses mellem kortene, ikke igennem dem. Skal det tilbage, er det tallet her, der skrues ned — ikke sløringen. Ét sted at ændre, alle syv korttyper følger med. */ --kort-flade:rgba(var(--p-soft-sand-rgb),.86); --kort-kant:color-mix(in srgb,var(--p-deep-brown) 18%,var(--p-soft-sand)); --kort-sløring:blur(7px) saturate(1.04); --kort-skygge:0 4px 14px rgba(var(--p-deep-brown-rgb),.07); --kort-skygge-løft:0 10px 26px rgba(var(--p-deep-brown-rgb),.12); --overskrift:var(--gran); /* se h1,h2,h3 nedenfor — må flyttes af temaet */ /* --paa-lys flytter sig ALDRIG. Den er til tekst, der står på en flade, som selv bliver lys i alle temaer: ordet inde i den runde creme-knap, .knap.lys, .kør-knap, aktiveringskoden, den valgte ejer-knap. --gran vender om, når appen bliver mørk; disse seks steder må ikke følge med, for så skriver de cremefarvet på creme. */ --paa-lys:var(--p-deep-brown); /* Fladen i et indtastningsfelt. Stod som rgba(255,255,255,.55) to steder og blev en lys klump paa en moerk flade. */ --felt-flade:rgba(var(--p-hvid-rgb),.55); } /* ========================================================= DØGNETS LYS I HELE APPEN (KN 11/9) ========================================================= Forsidens landskab har fulgt solen siden i dag. Her følger resten af appen med, i de SAMME fire trin som landskabets egne paletter: klarMorgen · klarDag · klar (aften) · klarNat. appTema() i app.js sætter data-tema på .telefon; sceneLys() ejer beregningen. :root ovenfor ER dagens sæt. Derfor har klarDag og 'lys' ingen regler hernede — de ER standarden. Det betyder også, at appen falder tilbage til nøjagtig sit nuværende udseende, hvis JavaScript'et ikke når at sætte data-tema. Et tema, der fejler, skal fejle lyst og læsbart. Kun FLADER, TEKST og LINJER flytter sig. Kobber og anker er accenter og bliver, hvor de er — ellers mister appen sin identitet, når det bliver mørkt. --gran flyttes aldrig; se kommentaren ved h1,h2,h3. ⚠️ IKKE FÆRDIGT. Appen har 181 unikke farver skrevet direkte i reglerne uden om disse tokens. De følger IKKE med endnu, og de vil stå lyse på en mørk flade, til de er hentet ind. Det er næste etape, og den tages skærm for skærm med øjnene på. Står noget lyst og forkert, er det dét, det er — ikke en fejl i motoren her. */ .telefon[data-tema="klarMorgen"]{ --bund:color-mix(in srgb,var(--p-warm-cream) 70%,#fff); } .telefon[data-tema="klar"]{ /* AFTENEN I DEN NYE PALETTE (27/9). Samme opskrift som natten nedenfor, men bunden er Deep Brown kørt kortere mod sort — lysere og varmere end natten. På den lysere bund klarer Terracotta sig ikke som TEKST (3,9:1 på kort), så --rav-tekst er Terracotta blandet mod creme; som grafik (--rav) holder den ren Terracotta over 3:1 overalt. --paa-lys, --paa-lys-flade og --paa-cta sættes IKKE her — se natten. Målt på koderne (bund #2c160e · flade #381b11 · kort #3b261e): creme 15,0/13,8/12,4 · dæmpet 6,5/6,0/5,4 · rav-tekst 6,1/5,6/5,0 · terracotta som grafik 4,7/4,4/3,9 · lys petrol 7,3/6,7/6,0 · sand 6,8/6,3/5,7 · fare 6,7/6,2/5,6 · brun på CTA 5,6. */ --gran-mørk:color-mix(in srgb,var(--p-deep-brown) 35%,#000); --rav:var(--p-terracotta); --rav-tekst:color-mix(in srgb,var(--p-terracotta) 80%,var(--p-warm-cream)); --rav-lys:color-mix(in srgb,var(--p-terracotta) 60%,var(--p-warm-cream)); --anker:color-mix(in srgb,var(--p-petrol) 85%,#000); --nav-flade:color-mix(in srgb,var(--p-deep-brown) 40%,#000); --fase-plan:var(--anker); --fase-pak:var(--p-rust); --fase-afsted:color-mix(in srgb,var(--p-deep-brown) 70%,var(--p-warm-cream)); --gran:var(--p-warm-cream); --felt-flade:rgba(var(--p-warm-cream-rgb),.07); --bund:color-mix(in srgb,var(--p-deep-brown) 60%,#000); --flade:color-mix(in srgb,var(--p-deep-brown) 76%,#000); --flade-dyb:rgba(var(--p-warm-cream-rgb),.16); --tekst:var(--p-warm-cream); --overskrift:var(--p-warm-cream); --dæmpet:rgba(var(--p-warm-cream-rgb),.62); --linje:rgba(var(--p-warm-cream-rgb),.15); --kort-flade:rgba(var(--p-warm-cream-rgb),.075); --kort-kant:rgba(var(--p-warm-cream-rgb),.14); --kort-skygge:0 4px 14px rgba(var(--p-sort-rgb),.30); --kort-skygge-løft:0 10px 26px rgba(var(--p-sort-rgb),.40); --anker-lys:rgba(var(--p-petrol-rgb),.24); --anker-mid:color-mix(in srgb,var(--p-petrol) 55%,var(--p-warm-cream)); --fjord-lys:color-mix(in srgb,var(--p-soft-sand) 62%,var(--bund)); /* De fire fra 15/9. --fjord bruges ALDRIG som baggrund (kontrolleret), saa den kan vendes direkte her i stedet for at skulle have en egen teksttoken som --anker. */ --anker-tekst:var(--anker-mid); --fjord:color-mix(in srgb,var(--p-soft-sand) 70%,var(--bund)); --stille:rgba(var(--p-warm-cream-rgb),.80); --fare:color-mix(in srgb,var(--p-rust) 50%,var(--p-warm-cream)); } .telefon[data-tema="klarNat"]{ /* NATTEN I DEN NYE PALETTE (27/9). Bunden er Deep Brown kørt ned mod sort, teksten Warm Cream. Rust er for mørk på den bund (2,7:1), så accenten bliver Terracotta — paletten har den netop til det. Ankeret er Petrol, en tak dybere, så den lyse tekst på valgte chips holder. --paa-lys, --paa-lys-flade og --paa-cta sættes IKKE her: de står på flader, der er lyse i alle temaer, og tager :root's brune. Målt på koderne (bund #1b0d08 · flade #26130c · kort #271914): creme 16,6/15,6/14,9 · dæmpet 6,8/6,4/6,1 · terracotta 5,2/4,9/4,7 · lys petrol 8,1/7,6/7,2 · sand 7,3/6,9/6,6 · fare 7,5/7,0/6,7 · lys tekst på ankeret 5,5 · på Start tur 5,4 · på rust 6,6 · brun på CTA 5,6. */ --gran-mørk:color-mix(in srgb,var(--p-deep-brown) 25%,#000); --rav:var(--p-terracotta); --rav-tekst:var(--p-terracotta); --rav-lys:color-mix(in srgb,var(--p-terracotta) 60%,var(--p-warm-cream)); --anker:color-mix(in srgb,var(--p-petrol) 85%,#000); --nav-flade:color-mix(in srgb,var(--p-deep-brown) 28%,#000); --fase-plan:var(--anker); --fase-pak:var(--p-rust); --fase-afsted:color-mix(in srgb,var(--p-deep-brown) 70%,var(--p-warm-cream)); --gran:var(--p-warm-cream); --felt-flade:rgba(var(--p-warm-cream-rgb),.055); --bund:color-mix(in srgb,var(--p-deep-brown) 36%,#000); --flade:color-mix(in srgb,var(--p-deep-brown) 52%,#000); --flade-dyb:rgba(var(--p-warm-cream-rgb),.13); --tekst:var(--p-warm-cream); --overskrift:var(--p-warm-cream); --dæmpet:rgba(var(--p-warm-cream-rgb),.62); --linje:rgba(var(--p-warm-cream-rgb),.12); --kort-flade:rgba(var(--p-warm-cream-rgb),.055); --kort-kant:rgba(var(--p-warm-cream-rgb),.11); --kort-skygge:0 4px 14px rgba(var(--p-sort-rgb),.42); --kort-skygge-løft:0 10px 26px rgba(var(--p-sort-rgb),.52); --anker-lys:rgba(var(--p-petrol-rgb),.22); --anker-mid:color-mix(in srgb,var(--p-petrol) 55%,var(--p-warm-cream)); --fjord-lys:color-mix(in srgb,var(--p-soft-sand) 55%,var(--bund)); /* De fire fra 15/9. --fjord bruges ALDRIG som baggrund (kontrolleret), saa den kan vendes direkte her i stedet for at skulle have en egen teksttoken som --anker. */ --anker-tekst:var(--anker-mid); --fjord:color-mix(in srgb,var(--p-soft-sand) 70%,var(--bund)); --stille:rgba(var(--p-warm-cream-rgb),.80); --fare:color-mix(in srgb,var(--p-rust) 50%,var(--p-warm-cream)); } /* Skiftet sker få gange i døgnet, men kan ramme en åben skærm. Så skal det ske roligt — og stå helt stille for den, der har bedt om mindre bevægelse. */ .telefon{transition:background-color .8s ease} @media(prefers-reduced-motion:reduce){ .telefon{transition:none} } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{height:100%} body{ font-family:var(--skrift-brød); background:var(--p-sand-4);color:var(--tekst);display:flex;justify-content:center; } /* color hører HER og ikke kun på body: temaets tokens sættes på .telefon, og body ligger uden for den. Uden denne linje arver al tekst uden egen klasse dagens mørke farve og forsvinder på en mørk flade. */ /* APPEN TILPASSER SIG TELEFONEN (Kennet 27/9, første iPhone-byg). Rammen på 430 × 932 er prototypens telefon-på-en-computer. På en rigtig telefon fylder appen hele skærmen, uanset størrelse — ellers står der en grå stribe i kanten af en 440 punkter bred iPhone Pro Max, og bunden stopper 24 punkter før skærmen gør. --top er det, telefonen selv melder som optaget af ur og kameraø. Den er 0 på Android (systemet tegner bjælken uden for appen) og i en almindelig browser, så intet flytter sig dér. ⚠️ PÅ IPHONE sættes --top inline på af ArytmiBridgeViewController.swift (4/10): webvisningen meldte kun ~3 punkter, og alt lå oveni uret. */ :root{--skaerm:min(100dvh,932px);--top:env(safe-area-inset-top,0px);--bund-luft:env(safe-area-inset-bottom,0px)} /* iOS lader hele webvisningen gynge og trække, selvom appen scroller inde i .indhold. Siden selv skal stå stille. */ html,body{overscroll-behavior:none} /* ---------- træk ned for at opdatere (28/9) ---------- Rullefladen gynger ikke selv (overscroll-behavior), så det er appens egen bevægelse, man ser: indholdet giver efter, og pulsen kommer ned ovenfra. Den tegner sig op, mens man trækker, bliver kobber ved tærsklen og slår, mens der hentes. */ .indhold{overscroll-behavior-y:none;transition:transform .34s cubic-bezier(.2,.7,.3,1)} .træk-opdater{position:absolute;left:50%;top:calc(var(--top) - 44px);z-index:40;pointer-events:none; --træk:0px;--træk-andel:0; transform:translate(-50%,var(--træk));opacity:var(--træk-andel); transition:transform .34s cubic-bezier(.2,.7,.3,1),opacity .25s ease} .træk-ring{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%; background:var(--flade);border:1px solid var(--linje);color:var(--dæmpet); box-shadow:0 6px 18px rgba(var(--p-sort-rgb),.28); transform:rotate(calc(var(--træk-andel) * 180deg - 180deg)) scale(calc(.7 + var(--træk-andel) * .3)); transition:color .2s,border-color .2s,background .2s} .træk-ring svg{width:20px;height:20px} .træk-opdater.klar .træk-ring,.træk-opdater.opdaterer .træk-ring{color:var(--rav-lys);border-color:var(--rav)} .træk-opdater.opdaterer .træk-ring{transform:none;animation:trækSlag .9s ease-in-out infinite} @keyframes trækSlag{0%,100%{transform:scale(1)}18%{transform:scale(1.14)}36%{transform:scale(.96)}54%{transform:scale(1.06)}} @media(prefers-reduced-motion:reduce){.træk-opdater.opdaterer .træk-ring{animation:none}} /* Et tryk er et tryk — ingen ventetid på, om det var et dobbelttryk for at zoome. Appen zoomer ikke, så den pause var ren forsinkelse. */ html{touch-action:manipulation} /* Det, man trykker på, giver efter under fingeren — også de ting, der ikke er .knap. Det er den lille bevægelse, der gør, at et tryk mærkes, før den næste skærm er der. */ .navpunkt .ik,.kal-dag span,.rejse-dato,.forslag-række,.liste-punkt[onclick]{transition:transform .14s ease} .navpunkt:active .ik{transform:scale(.88)} .kal-dag:not(:disabled):active span{transform:scale(.86)} .rejse-dato:active,.liste-punkt[onclick]:active{transform:scale(.985)} .telefon{width:100%;max-width:430px;height:var(--skaerm);min-height:0;background:var(--bund);color:var(--tekst); display:flex;flex-direction:column;position:relative;overflow:hidden; box-shadow:0 0 70px rgba(var(--p-sort-rgb),.18)} /* EFTER .telefon-reglen ovenfor, ellers vinder dens max-width:430px. */ @media(max-width:500px){ :root{--skaerm:100dvh} .telefon{max-width:none;box-shadow:none} } /* PÅ HJEMMESKÆRMEN (K22, Kennets iPhone 6/10): en creme bjælke under bundmenuen, ca. 60 punkter høj. Den ligger UDEN FOR websiden: iPhone giver siden 812 af skærmens 874 punkter og fylder resten selv med sidens baggrundsfarve, som den husker fra opstarten (WebKit-fejl 301994). Intet element kan tegne dér. To forsøg samme aften gjorde appen højere (dvh + statuslinje, så en fast ramme) — begge skød bundmenuen ned i det døde felt, hvor den blev skåret over. Gør det ikke igen. Den eneste knap er FARVEN: siden får bundmenuens farve, så feltet går i ét med menuen. --side-bund sættes af appTema(), fordi menuens farve følger døgnets lys. Kun på hjemmeskærmen; i en browser står siden, som den altid har gjort. */ @media(display-mode:standalone){ html,body{background:var(--side-bund,var(--p-deep-brown))} } /* Og hjem-stregen står i det døde felt, ikke over siden — så skal bundmenuen ikke holde plads til den. Uden denne linje blev menuen 34 punkter højere oveni feltets 60 (Kennet 6/10: "alt for høj"). Klassen sættes af målDødtFelt() i app.js, kun når feltet er målt. */ html.doedt-felt{--bund-luft:0px} .indhold{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 0 118px;scroll-behavior:smooth;position:relative;z-index:1} .side{padding:22px 22px 0} /* Fri af uret og kameraøen. En hero øverst på skærmen trækkes op under dem igen — billedet skal gå helt til kanten — og dens tekst rykkes ned. */ .indhold{padding-top:var(--top)} .indhold > .hero:first-child,.indhold > .ned-hero:first-child{margin-top:calc(-1 * var(--top))} .indhold > .hero:first-child .overlay{padding-top:calc(20px + var(--top))} /* Nedtællingen og loggen har deres egen hero (.ned-hero). Den blev trukket op under uret sammen med de andre, men teksten fulgte ikke med ned. */ .indhold > .ned-hero:first-child .ned-lag{padding-top:calc(20px + var(--top))} /* HEADEREN BAG URET (OD 4/10: "en header så ur, batteri osv ikke kommer til at ligge oveni app indholdet"). .indhold er selve rullefladen, så dens margen i toppen ruller med — og så gled teksten op under uret. Et fast bånd i statuslinjens højde, i bundmenuens farve, så appen har en ramme i begge ender. ::after, fordi ::before er gløden længere nede. Ikonerne er lyse (SystemBars style DARK i capacitor.config.js). I en browser er --top 0, og båndet findes ikke. */ .telefon::after{content:'';position:absolute;top:0;left:0;right:0;height:var(--top); background:var(--nav-flade);z-index:45;pointer-events:none} /* font-optical-sizing:auto er browserens standard for variable fonte: Fraunces tegner selv 64px-nedtællingen anderledes end en 15px-etiket. Derfor ingen manuel opsz nogen steder. lining-nums holder tallene på linje — appen bruger serifen til rene tal flere steder (nedtælling, radius, tæller). */ /* --overskrift, ikke --gran (KN 11/9). --gran har to jobs: den er overskrifternes farve OG den mørke farve, der skrives MED på lyse flader — fx ordet inde i den runde creme-startknap. Vender man --gran om, når appen bliver mørk, forsvinder "START HER" i sin egen knap. Overskrifterne har derfor deres egen token, som temaet må flytte på. */ h1,h2,h3,.serif{font-family:var(--skrift-display);font-weight:600;color:var(--overskrift);letter-spacing:.2px; font-variant-numeric:lining-nums} h1{font-size:27px;line-height:1.22} h2{font-size:20px} h3{font-size:17px} p{line-height:1.6} .dæmpet{color:var(--dæmpet);font-size:14px;line-height:1.55} .etiket{font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--dæmpet);font-weight:600} /* ---------- to skrifter, to opgaver (14/8) ---------- Fraunces sad på ALT — også afstande, radius, tælleren og nedtællingen. En serif med høj stregkontrast får tal til at læses som pynt frem for som oplysning, og det er en af de stærkeste grunde til, at appen føltes dekoreret frem for præcis. Fraunces beholder det store nedtællingstal og overskrifterne (dér ER tallet en følelse). Alt funktionelt — km, minutter, klokkeslæt, tællere — kører nu i Inter med lige brede cifre, så de ikke hopper, når de tæller ned. Klassen sættes på selve tal-elementet. */ .tal{font-family:var(--skrift-brød);font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1} .res-meta,.sk-meta,.ned-dato,.sted-chip,.lup-tæl,.tjek-under,.radius-mærker{ font-variant-numeric:tabular-nums lining-nums} /* ---------- animationer ---------- */ @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}} @keyframes svæv{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} @keyframes drift{from{transform:translateX(0)}to{transform:translateX(-26px)}} @keyframes blink{0%,100%{opacity:.15}50%{opacity:1}} @keyframes aurora{0%,100%{transform:translateX(0) skewX(0)}50%{transform:translateX(16px) skewX(-4deg)}} @keyframes fugle{0%{transform:translate(-60px,10px)}100%{transform:translate(480px,-26px)}} @keyframes heroTekst{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} @keyframes pulsprik{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}} @keyframes skud{0%,88%{opacity:0;transform:translate(0,0)}90%{opacity:.9}96%{opacity:0;transform:translate(-150px,64px)}100%{opacity:0}} @keyframes flue{0%,100%{transform:translate(0,0);opacity:.15}30%{opacity:.9}50%{transform:translate(7px,-9px);opacity:.4}70%{opacity:.85}} @keyframes spejl{0%,100%{opacity:.22}50%{opacity:.4}} @keyframes rippleUd{to{transform:scale(1);opacity:0}} @keyframes ekgTegn{to{stroke-dashoffset:0}} @keyframes splashUd{to{opacity:0;transform:translateY(-24px) scale(1.02);visibility:hidden}} @keyframes linjeUd{to{width:120px}} /* Kortere og tættere (28/9): 0,38 s og 10 px i stedet for 0,5 s og 14 px, og rækkefølgen falder med 30 ms i stedet for 50. Det skal føles som et blad, der lægger sig, ikke som noget, der læsses af. */ .anim>*{animation:fadeUp .38s cubic-bezier(.2,.7,.3,1) both} .anim>*:nth-child(1){animation-delay:0s}.anim>*:nth-child(2){animation-delay:.03s} .anim>*:nth-child(3){animation-delay:.06s}.anim>*:nth-child(4){animation-delay:.09s} .anim>*:nth-child(5){animation-delay:.12s}.anim>*:nth-child(6){animation-delay:.15s} .anim>*:nth-child(n+7){animation-delay:.18s} /* KUN VED ET SKÆRMSKIFT. tegn() sætter .skift på #indhold, når visningen er ny. Tegnes skærmen om under én (et flueben, en dato), står alt stille — ellers blinkede hele siden ved hvert tryk. */ .indhold:not(.skift) .anim>*, .indhold:not(.skift) :is(.hero .h-top,.h-bund h1,.h-under,.h-bund p,.h-bund .handling, .rund-start,.spontan-link,.tjekboks.markeret,.sp-puls-spor){animation:none} .stjerneskud{animation:skud 11s linear infinite} .ildflue{animation:flue 6s ease-in-out infinite} .vandspejl{animation:spejl 5s ease-in-out infinite} /* ---------- ikoner ---------- */ .ik{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-5px;flex-shrink:0} .ik.stor{width:26px;height:26px} /* ---------- hero ---------- */ /* overflow:hidden er nyt (KN 6/9). Parallaksen nedenfor skubber både landskabet og teksten NEDAD, mens man scroller — og så længe der ikke lå noget under hero'en, kunne ingen se, at de kravlede 105 px ud over kanten. Med værktøjskassen nederst lagde landskabet sig hen over de øverste to kort. En parallaks-kasse skal klippe sit eget indhold. */ .hero{position:relative;color:var(--p-lys-9);height:340px;overflow:hidden} /* Forsiden: ét helt billede, én beslutning */ .hero.fuld{height:calc(var(--skaerm) - 92px);min-height:520px} /* De 66 px ekstra er værktøjskassens overskrift, der kigger frem under folden (KN 6/9). Uden dem er hero'en præcis så høj som skærmen, og så findes de fire værktøjer kun for den, der scroller videre på et billede, der ser færdigt ud. Klassen sidder kun på Hjem — onboardingens hero har intet under sig og skal blive stående som den er. */ /* KUN VINKET KIGGER FREM (KN 13/9) ---------------------------------- Kennet 13/9: "man skal ikke kunne se den hvide tekst Vaerktoejskassen, kun Swipe op for vaerktoejskassen." Foer stod der 92 px af blokken over folden, og overskriften begynder 75 px inde - saa den stak op. REGNESTYKKET, maalt i browseren og ikke gaettet: synligt = traek-fra - 49 (49 = bundnavigationens 75 px minus blokkens 26 px overlap) 113 giver 64 px synligt. Vinket slutter 59 px inde i blokken, saa det er helt med, og der er fem px luft under det. ÉT TAL, IKKE TO. Der stod foer en anden vaerdi under @media(max-height:880px), og den er vaek nu: bundnavigationen er 75 px hoej ved ALLE skaermstoerrelser (63 px knaprække + 12 px afstand til bunden), saa de to tal skulle altid vaere ens. To tal, der skal vaere ens, bliver det ikke i laengden - det var praecis derfor det her blev rettet to gange 13/9: foerste forsoeg satte kun det ene, og saa stak overskriften stadig op paa en hoej skaerm. */ .hero.fuld.med-vaerktoej{height:calc(var(--skaerm) - (var(--nav-h) - 26px) - var(--vk-kig))} /* LAVERE, OG SÅ ET HOP (KN 28/9): "værktøjskassen kom længere ned under menubjælken. Måske kan den bounce lidt op for at gøre opmærksom på sig selv." Nu kigger kun 38 px frem: kanten og grebet (vinket begynder 40 px inde, så 38 er loftet). Vinket ligger gemt under bundnavigationen og kommer frem, når blokken hopper op (vkHop herunder, én gang pr. opstart - se vkScrollEffekt()). Formlen ovenfor er stadig ét tal: --vk-kig er det synlige stykke. --nav-h er bundnavigationens højde (se .bundnav) — de 49 i regnestykket ovenfor var 75 - 26, fra da menuen var 75 px høj. Uden bevægelse (reduceret bevægelse) er der intet hop, der viser vinket, så dér står de 64 px fra før, og vinket er fremme hele tiden. */ .telefon{--vk-kig:38px;--nav-h:60px} @media(prefers-reduced-motion:reduce){ .telefon{--vk-kig:64px} } /* Login og onboarding har INGEN bundnavigation — tegnNav() skjuler den, til man er onboardet. Uden den her blev de 92 px (76 på lave skærme) stående som en tom, cremefarvet stribe under hero'en, fordi .telefon lyser creme igennem, hvor der ikke er noget. Set første gang i den pakkede app på en Galaxy S24 8/9 2026, hvor Androids navigationsbjælke rammer striben ind nedefra — men fejlen er lige så synlig i browseren på 375×812. Overlayets padding-bottom holder stadig knappen fri af systembjælken. */ .telefon.uden-bundnav .hero.fuld{height:var(--skaerm)} .hero.fuld .overlay{padding-bottom:calc(28px + var(--bund-luft)); justify-content:flex-start; background:linear-gradient(to top,rgba(var(--p-brun-25-rgb),.58) 0%,rgba(var(--p-brun-25-rgb),.28) 24%,transparent 48%)} /* centreret komposition: logo → overskrift → tekst → rund knap, trukket op mod toppen */ .hero.fuld .h-bund{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:118px} .hero.fuld .h-bund h1{font-size:33px;line-height:1.15} .hero.fuld .h-bund p{font-size:15.5px;margin-top:10px;max-width:300px} /* logoet er brandmærket i toppen — knappen er den eneste cirkel i midten */ .ht-side{display:flex;align-items:center;min-width:0} .ht-side.højre{justify-content:flex-end} .h-logo{pointer-events:none} /* Det nye logo (27/9) er stablet, ca. 2,25:1 mod det gamles 4:1. Samme højde gav et halvt så bredt navn, så højderne er skruet op. */ .h-logo .logo-svg{height:52px} #splash .logo-svg{height:64px} /* rund hovedknap med hjerteslag-ringe */ @keyframes ping{0%{transform:scale(1);opacity:.8}60%{opacity:0}100%{transform:scale(1.8);opacity:0}} .rund-start{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:32px; animation:heroTekst .9s cubic-bezier(.2,.7,.3,1) .26s both} .rund-knap{position:relative;width:104px;height:104px;border-radius:50%;border:none;cursor:pointer; background:radial-gradient(circle at 38% 30%,var(--p-lys-2),var(--p-kobber-2));color:var(--paa-lys); display:flex;align-items:center;justify-content:center;font-family:inherit; box-shadow:0 16px 44px rgba(var(--p-sort-rgb),.42), 0 0 34px rgba(var(--p-kobber-4-rgb),.26), inset 0 1px 0 rgba(var(--p-hvid-rgb),.95); transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .25s} .rund-knap .ik{width:36px;height:36px;stroke-width:1.5;position:relative;z-index:2} .rund-knap:active{transform:scale(.94)} @media(hover:hover){.rund-knap:hover{transform:scale(1.05); box-shadow:0 20px 54px rgba(var(--p-sort-rgb),.48), 0 0 48px rgba(var(--p-kobber-4-rgb),.45), inset 0 1px 0 rgba(var(--p-hvid-rgb),.95)}} /* Én ring, ikke to (14/8). To ringe, der udvidede sig i forskudt takt, gjorde knappen urolig uden at gøre den tydeligere. Pulsen er brandet og bliver — den skal bare slå én gang ad gangen. r2 findes ikke længere i markup'et. */ .rk-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(var(--p-kobber-lys-rgb),.85); pointer-events:none;animation:ping 3.6s cubic-bezier(.2,.6,.3,1) infinite} /* stille dobbeltring — samme greb som i logoets bomærke */ .rund-knap::after{content:'';position:absolute;inset:-7px;border-radius:50%; border:1px solid rgba(var(--p-kobber-lys-rgb),.42);pointer-events:none} .rk-label{font-size:13px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:rgba(var(--p-lys-7-rgb),.9)} .rk-label.sætning{font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.4;max-width:250px;color:rgba(var(--p-lys-7-rgb),.85)} .rk-note{font-size:12.5px;color:rgba(var(--p-lys-7-rgb),.62);margin-top:-4px} /* pulsen fra logoet, midt i knappen */ .rk-puls{width:58px;height:20px;position:relative;z-index:2} /* ⚠️ 1,8 VAR FOR TYNDT (KN 17/9: "sinusrytmen skal være tydeligere"). Stregen er appens signatur — den er det samme udslag som i logoet — og den sad som en hårlinje inde i en 104 px cirkel. non-scaling-stroke betyder, at tallet her ER pixels på skærmen, uanset hvad viewBoxen siger: 1,8 px ryger under ét pixel-gitter på en telefon med lav tæthed og bliver grå i stedet for bark. */ /* ⚠️ FARVEN HER, OG DET ER IKKE var(--gran). Se noten ved pulsIKnap() i app.js: --gran er #3a3227 i :root, men #ECEAE3 i en moerk kontekst, og forsiden er moerk. Knappens cirkel er lys uanset hvad — saa --paa-lys er den rigtige, den samme som ordet i knappen bruger. Streger man en creme puls paa en creme cirkel, forsvinder den, og det ligner en for tynd streg. */ .rk-puls path{vector-effect:non-scaling-stroke;stroke:var(--paa-lys);stroke-width:2.6} /* Startknappen bærer ordet inde i cirklen: ORD ØVERST, puls under. Rækkefølgen står i opmærkningen — se kommentaren i app.js. */ .rund-knap.med-ord{flex-direction:column;gap:5px} /* Større udsnit end de 48 px, den havde: udslaget skal kunne SES som en hjerterytme, ikke anes som en dekoration under et ord. */ .rund-knap.med-ord .rk-puls{width:58px;height:21px} .rund-knap.med-ord .rk-puls path{stroke-width:3} .rk-ord{position:relative;z-index:2;font-size:13px;font-weight:700;letter-spacing:2.4px; text-transform:uppercase;color:var(--paa-lys)} .rk-billede{width:76px;height:76px;border-radius:50%;border:2px solid var(--gran);overflow:hidden; display:flex;align-items:center;justify-content:center;position:relative;z-index:2;background:var(--p-hvid)} .rk-billede img{width:84%;height:auto;display:block} /* fremdriftsbue om knappen, når turen er i gang */ .rk-bue{position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);transform:rotate(-90deg)} .rk-bue circle{fill:none;stroke-width:2.5;stroke-linecap:round} .rk-spor{stroke:rgba(var(--p-lys-7-rgb),.2)} .rk-fyld{stroke:var(--rav-lys);stroke-dasharray:100;transition:stroke-dashoffset .6s cubic-bezier(.2,.7,.3,1)} .hero svg.scene{position:absolute;inset:0;width:100%;height:100%;display:block} .hero .overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:20px 22px 24px} .hero .h-top{position:relative;display:flex;align-items:center;justify-content:space-between;animation:heroTekst .7s cubic-bezier(.2,.7,.3,1) both} .hero .h-top .ht-side{flex:1} .hero .h-top .h-logo{position:static;transform:none} /* Arytmi-tæller — levende EKG-puls, der ender i et lille hjerte */ @keyframes ekgSweep{0%{stroke-dashoffset:100}70%,100%{stroke-dashoffset:-22}} @keyframes hjerteBeat{0%,60%,100%{transform:scale(1)}68%{transform:scale(1.34)}75%{transform:scale(.92)}82%{transform:scale(1.12)}88%{transform:scale(1)}} .aryt-tæller{display:flex;align-items:center;gap:6px;background:rgba(var(--p-lys-9-rgb),.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(var(--p-lys-9-rgb),.25);border-radius:100px;padding:6px 12px 6px 10px;cursor:pointer;font-family:inherit} .aryt-tæller .at-label{font-size:10.5px;color:rgba(var(--p-lys-7-rgb),.78);white-space:nowrap} .aryt-tæller .at-ekg{width:32px;height:14px;overflow:visible} .aryt-tæller .at-ekg .bg{stroke:rgba(var(--p-kobber-lys-rgb),.32);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round} .aryt-tæller .at-ekg .spark{stroke:var(--rav-lys);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22 100;filter:drop-shadow(0 0 2px rgba(var(--p-kobber-lys-rgb),.7));animation:ekgSweep 2.6s cubic-bezier(.85,0,.5,1) infinite} .aryt-tæller .at-hjerte{width:12px;height:12px;transform-origin:center;animation:hjerteBeat 2.6s ease-in-out infinite} .aryt-tæller .at-hjerte path{fill:var(--rav-lys);stroke:none} /* Tælleren er et instrument, ikke en overskrift — Inter, lige brede cifre */ .aryt-tæller .at-tal{font-family:var(--skrift-brød);font-weight:700;font-size:15.5px; font-variant-numeric:tabular-nums lining-nums;color:var(--p-lys-7);line-height:1} .h-bund h1{color:var(--p-lys-7);font-size:28px;text-shadow:0 1px 12px rgba(var(--p-sort-rgb),.25);animation:heroTekst .8s cubic-bezier(.2,.7,.3,1) both} .h-under{font-family:var(--skrift-display);font-weight:600;font-size:17px;color:var(--rav-lys);margin-top:5px;text-shadow:0 1px 8px rgba(var(--p-sort-rgb),.2);animation:heroTekst .8s cubic-bezier(.2,.7,.3,1) .08s both} .hero.fuld .h-under{font-size:19px} .h-bund p{color:rgba(var(--p-lys-9-rgb),.82);font-size:14.5px;margin-top:6px;max-width:310px;text-shadow:0 1px 8px rgba(var(--p-sort-rgb),.2);animation:heroTekst .8s cubic-bezier(.2,.7,.3,1) .12s both} .h-bund .handling{margin-top:16px;animation:heroTekst .8s cubic-bezier(.2,.7,.3,1) .24s both} /* ---------- logo & EKG ---------- */ .logo-svg{height:46px;width:auto;display:block} .brand-lockup{display:flex;flex-direction:column;align-items:center;gap:5px} .brand-tag{color:rgba(var(--p-lys-7-rgb),.72);font-size:10px;letter-spacing:2.3px;text-transform:uppercase;font-weight:600} /* Logoet er cirkulært i sig selv — vi klipper kun de tomme hjørner væk */ .logo-billede{height:46px;width:46px;border-radius:50%;object-fit:cover;display:block; box-shadow:0 6px 20px rgba(var(--p-sort-rgb),.4)} #splash .logo-billede{height:176px;width:176px;margin:0 auto;box-shadow:0 22px 60px rgba(var(--p-sort-rgb),.5)} .ekg{width:112px;height:18px;display:block;margin-bottom:10px;opacity:.95} .ekg path{stroke-dasharray:230;stroke-dashoffset:230;animation:ekgTegn 2.4s cubic-bezier(.4,0,.3,1) .5s both} /* ---------- knapper ---------- */ .knap{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:100px;padding:14px 26px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:transform .15s,opacity .15s,box-shadow .2s;overflow:hidden;position:relative} .knap:active{transform:scale(.96)} .knap.primær{background:var(--cta);color:var(--paa-cta);box-shadow:0 8px 22px rgba(var(--p-deep-brown-rgb),.22)} .knap.lys{background:var(--p-warm-cream);color:var(--paa-lys);box-shadow:0 6px 18px rgba(var(--p-sort-rgb),.22)} .knap.blød{background:var(--flade-dyb);color:var(--gran)} .knap.kontur{background:transparent;color:var(--gran);border:1.5px solid var(--linje)} .knap.lille{padding:9px 18px;font-size:13.5px} .knap.bred{width:100%} .knap:disabled{opacity:.35;cursor:default;box-shadow:none} /* .ånde er tom med vilje (14/8). Klassen sidder seks steder i app.js og på appens vigtigste knapper — den er fjernet som ANIMATION, ikke som klasse, så markup'et ikke skal rettes seks steder for at fjerne ét åndedrag. En trykflade, der puster, mens man læser, gør appen urolig. */ .knap.ånde{} .ripple{position:absolute;border-radius:50%;background:rgba(var(--p-bark-rgb),.14);transform:scale(0);animation:rippleUd .65s ease-out both;pointer-events:none} .knap.primær .ripple{background:rgba(var(--p-hvid-rgb),.28)} /* Lysstrejfet hen over knappen hvert 5,5. sekund i al evighed er fjernet — det er et sprog fra spilbutikker, ikke fra en app om at holde fri. */ .kør-knap{background:linear-gradient(125deg,var(--p-lys-5),var(--p-kobber-3));color:var(--paa-lys);font-size:15.5px;padding:15px 22px 15px 19px;gap:10px} /* ---------- flader ---------- Alle matterede flader deler nu ét sæt værdier (se :root). Klassenavnene er urørt — de bruges af navigationstesten og af hver eneste skærm. */ .kort,.liste,.tur-kort,.forslag-knap,.res-kort,.tjek-punkt{ background:var(--kort-flade); backdrop-filter:var(--kort-sløring);-webkit-backdrop-filter:var(--kort-sløring); -webkit-backdrop-filter:var(--kort-sløring); border:1px solid var(--kort-kant); box-shadow:var(--kort-skygge); position:relative} .kort{border-radius:var(--radius);padding:22px;margin-bottom:16px} .kort.klik{cursor:pointer;transition:transform .15s} .kort.klik:active{transform:scale(.98)} .liste{border-radius:var(--radius);padding:8px 20px;margin-bottom:16px} .sektion{margin:26px 0 10px;display:flex;align-items:baseline;justify-content:space-between} /* Ét glød, ikke to (14/8). Der lå to store farvede skyer bag ALT indhold — én kobber, én oliven — og de var med til at gøre hele appen ens varm. Den ene er væk, den anden halveret. Landskabet gør arbejdet nu. */ .telefon::before{content:'';position:absolute;top:330px;left:-90px;width:320px;height:320px;border-radius:50%; background:radial-gradient(circle,rgba(var(--p-kobber-rgb),.10),transparent 68%);pointer-events:none;z-index:0} /* ---------- landskabet som gennemgående baggrund ---------- */ .app-baggrund{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden} /* varm himmel-hvisken øverst */ .app-baggrund::before{content:'';position:absolute;top:0;left:0;right:0;height:320px; background:linear-gradient(to bottom,rgba(var(--p-kobber-rgb),.16),rgba(var(--p-kobber-rgb),.05) 52%,transparent)} /* solens genskin, samme sted som i hero'en */ .app-baggrund::after{content:'';position:absolute;top:-70px;right:-80px;width:300px;height:300px;border-radius:50%; background:radial-gradient(circle,rgba(var(--p-kobber-5-rgb),.45),transparent 68%)} .app-baggrund .bg-bund,.app-baggrund .bg-traeer{position:absolute;bottom:0;left:0;width:100%;height:170px} /* Her stod stregtegningen af den gamle bil (bil-streg.png) bag alt indhold. Taget ud 27/9 (Kennet: "giver ikke mening") — forsiden har den nye signaturbil, og stregerne var den gamle. Filerne er i parkeret/. */ @media(hover:hover){ .kort.klik:hover,.forslag-knap:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(var(--p-bark-rgb),.15), inset 0 1px 0 rgba(var(--p-hvid-rgb),.85)} .knap.primær:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(var(--p-bark-rgb),.36)} .knap.lys:hover,.knap.blød:hover,.knap.kontur:hover{transform:translateY(-1px)} .tilbage:hover{transform:translateX(-2px)} .sted-chip:hover{border-color:var(--rav)} } .forslag-knap{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .25s} /* ---------- bundnav ---------- */ /* FAST I BUNDEN (KN 28/9: "jeg synes det ser lidt fjollet ud at den svæver"). Før var den en pille 12 px over kanten; nu er den en bjælke, der går helt ud til kanterne og ned under hjemmeindikatoren. ⚠️ HØJDEN ER --nav-h (60 px = 5 + 46 + 9) over sikkerhedsmargenen. Den var 75, og det var for højt (KN 28/9: "Menu er for høj"). Forsidens hero regner med --nav-h, så værktøjskassen kigger stadig lige meget frem. Rør man paddingen eller .navpunkt's højde, så ret --nav-h med. Stregen foroven er en inset-skygge og ikke en border, netop så den ikke lægger en pixel til. Ordene under ikonerne er nye: tre ikoner alene var et gæt for den, der ikke har brugt appen før. De hedder det samme som skærmene (KN 6/9). ⚠️ FLADEN ER DÆKKENDE (28/9). Den var 82-90 % gennemsigtig, og på forsiden ligger værktøjskassen bag bjælken — så skinnede kassens lyse flade igennem, og bjælken blev en rødbrun blok på Kennets iPhone. */ .bundnav{position:absolute;left:0;right:0;bottom:0; background:var(--nav-flade);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); display:flex;padding:5px 10px calc(9px + var(--bund-luft));z-index:50; box-shadow:inset 0 1px 0 rgba(var(--p-hvid-rgb),.09),0 -12px 32px rgba(var(--p-brun-23-rgb),.28)} .navpunkt{flex:1;background:none;border:none;cursor:pointer;text-align:center;color:var(--p-graa-3);font-family:inherit; padding:4px 0;height:46px;position:relative;transition:color .2s; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px} .navpunkt .ik{width:22px;height:22px} .nav-navn{font-size:10px;line-height:12px;font-weight:600;letter-spacing:.2px;white-space:nowrap} .navpunkt.aktiv{color:var(--p-lys-9)} .navpunkt.aktiv .ik{color:var(--rav-lys)} /* Den aktive fane er kobberikon + creme ord. Ingen streg i overkanten: på forsiden står værktøjskassens greb lige over bjælken, midt på, og de to lagde sig oven i hinanden. */ /* ---------- sektions-wizard (prikker der viser trin i rækken) ---------- */ .sek-prikker{display:flex;gap:6px;margin:2px 0 18px} .sek-prik{flex:1;height:4px;border-radius:100px;background:var(--flade-dyb);transition:background .2s} .sek-prik.klaret{background:var(--rav)} .sek-prik.aktiv{background:var(--anker)} /* Top på et trin i flowet: etiket og Overblik-genvejen deler øverste linje, spørgsmålet får hele bredden nedenunder. */ .trin-top{margin-bottom:16px} .trin-top .etiket-række{display:flex;align-items:center;gap:12px;margin-bottom:5px;min-height:34px} /* .overblik-knap er fjernet 31/8 (OD) — vejen hjem er bundnavigationen. */ /* ---------- fremskridt ---------- */ .fremskridt{height:6px;background:var(--flade-dyb);border-radius:100px;margin:16px 0;overflow:hidden} .fremskridt .bar{height:100%;background:linear-gradient(90deg,var(--rav),var(--anker));border-radius:100px;transition:width .35s cubic-bezier(.2,.7,.3,1)} /* ---------- lister & tjek ---------- */ .liste-punkt{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--linje)} .liste-punkt:last-child{border-bottom:none} .tjekboks{width:26px;height:26px;border-radius:50%;border:1.8px solid var(--p-sand-6);background:transparent;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s} .tjekboks svg{width:13px;height:13px;stroke:var(--p-lys-9);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round} .tjekboks svg path{stroke-dasharray:24;stroke-dashoffset:24} .tjekboks.markeret{background:var(--anker);border-color:var(--anker);animation:pop .3s} .tjekboks.markeret svg path{stroke-dashoffset:0;transition:stroke-dashoffset .35s cubic-bezier(.2,.7,.3,1) .06s} .liste-punkt .navn{flex:1;font-size:15px;transition:color .2s} .liste-punkt.strøget .navn{color:var(--dæmpet);text-decoration:line-through;text-decoration-color:var(--rav)} /* Bilen: foldbare emner. Overskriften er en almindelig listerække — teksten folder sig ud nedenunder, så siden ikke bliver en mur af brødtekst. */ .bil-emne{border-bottom:none} .bil-pil{color:var(--p-sand-7);flex-shrink:0;display:flex;transition:transform .25s} .bil-pil.åben{transform:rotate(90deg)} .bil-mærke{font-size:12px;font-weight:650;color:var(--fjord);flex-shrink:0;display:flex;align-items:center;gap:4px} .bil-mærke svg{width:13px;height:13px} /* Nummeret foran hvert madscenarie (01–05, OD 30/8). Tal i Inter med lige brede cifre, så de står i kolonne — samme regel som resten af appens tal. */ .mad-nr{font-family:var(--skrift-brød);font-variant-numeric:tabular-nums lining-nums; font-weight:700;font-size:12.5px;letter-spacing:.5px;color:var(--rav-tekst); flex-shrink:0;min-width:22px} /* Info-ikonet på tjeklistepunkter (KN 27/8, erstatter pilen): "der er mere at læse, men du behøver ikke". Egen tap-flade, adskilt fra selve rækkens til-/fravælg-klik. */ .bil-info{border:none;background:transparent;color:var(--p-sand-7);cursor:pointer;flex-shrink:0; display:flex;align-items:center;padding:4px} .bil-info svg{width:19px;height:19px} .bil-krop{padding:0 0 16px;border-bottom:1px solid var(--linje);animation:fold .28s ease} .bil-krop:last-child{border-bottom:none} .bil-krop p{font-size:14.5px;line-height:1.66} .bil-krop .knap{margin-top:12px} @keyframes fold{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* ---------- Profil & indstillinger: raekker der folder ud ---------- KN 15/9: "Det hele er meget stort." Tre indstillingskort blev til tre raekker i én liste. Tilstanden staar til hoejre, fordi det er den, man kommer for at se; forklaringen folder sig ud nedenunder. */ .indstil-liste{padding:2px 20px} .indstil-række .navn{font-weight:550;line-height:1.35;min-width:0} /* IKONERNE står i deres egen celle med fast mål og samme stregtykkelse. Uden cellen fik hvert ikon sin egen optiske bredde, og så stod de tre titler i tre forskellige afstande fra kanten — det var dét, der så løst ud. Rækkerne er samtidig lige høje (alle har en undertekst), så ikonerne flugter lodret. */ .indstil-ikon{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center; justify-content:center;color:var(--rav)} .indstil-ikon svg{width:19px;height:19px;stroke-width:1.7} .indstil-under{font-size:12.5px;color:var(--dæmpet);font-weight:400;margin-top:1px} /* KONTAKTEN — KN 15/9: "Kan du ikke bare lave en slider til/fra". Kobber, fordi --rav er den ene brandfarve, der står fast i ALLE temaer: en kontakt, man ikke kan se om natten, er værre end ingen kontakt. */ .kontakt{position:relative;width:44px;height:26px;border-radius:13px;flex-shrink:0; border:1px solid var(--linje);background:var(--felt-flade);padding:0;cursor:pointer; transition:background .22s ease,border-color .22s ease;-webkit-tap-highlight-color:transparent} .kontakt::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%; background:var(--p-creme-lys);box-shadow:0 1px 3px rgba(var(--p-bark-rgb),.35);transition:transform .22s cubic-bezier(.3,.8,.4,1)} .kontakt.til{background:var(--rav);border-color:var(--rav)} .kontakt.til::after{transform:translateX(18px)} .kontakt:focus-visible{outline:2px solid var(--rav);outline-offset:2px} /* "Hvem kan se turen" paa turkortet. Samme hoejde og rytme som gaeste-linjen lige over, saa de to svar paa "hvem er med" ligner hinanden i stedet for at vaere to designs. */ .deler-linje{display:flex;align-items:center;gap:9px;margin-top:10px; padding-top:10px;border-top:1px solid var(--linje)} .deler-tekst{flex:1;min-width:0;font-size:13px;color:var(--dæmpet)} .deler-linje .kontakt{width:40px;height:24px} .deler-linje .kontakt::after{width:18px;height:18px} .deler-linje .kontakt.til::after{transform:translateX(16px)} /* Slet-ikonet paa turkortet. Stille: det skal kunne FINDES, ikke tilbydes. Faerre farve end alt andet paa kortet, og foerst rav naar man roerer det. 36x36 tapflade om et 17px ikon - fingeren skal kunne ramme det, uden at ikonet raaber. */ .slet-tur{border:0;background:none;padding:6px;margin:-6px -4px 0 0;cursor:pointer; flex-shrink:0;color:var(--dæmpet);display:flex;align-items:center;justify-content:center; border-radius:9px;transition:color .2s,background .2s;-webkit-tap-highlight-color:transparent} .slet-tur svg{width:17px;height:17px;stroke-width:1.6} .slet-tur:active{background:var(--felt-flade)} @media(hover:hover){ .slet-tur:hover{color:var(--rav-tekst)} } /* KONTOEN som liste (KN 15/9: "Kunne man ikke samle denne lidt ogsaa"). Etiket over listen, felter indeni — samme form som indstillingerne, saa de to blokke laeser som ét sted og ikke som to designs. */ .liste-etiket{display:block;margin:0 0 7px 6px} .liste-etiket-række{display:flex;align-items:baseline;justify-content:space-between;margin:0 6px 7px} .liste-etiket-række .liste-etiket{margin:0} /* "Ret" er en stille knap, ikke en handling man skal lokkes til. Samme form som "Ret" over kortet paa destinationsskaermen. */ .liste-ret{border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:650; color:var(--gran);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0} /* Feltet ser foerst ud som et felt, naar man HAR trykket Ret. Ellers er det en vaerdi paa linje med de andre. */ .konto-række input.konto-felt.retter,.konto-række select.konto-felt.retter{border:1.5px solid var(--linje);border-radius:11px; padding:7px 11px;background:var(--felt-flade);text-align:right; /* Samme faste maal som paa datotrinnet, og af samme grund: uden det er navnefeltet 35 px hoejt og datofeltet 37, og deres hoejrekanter stod 45 px fra hinanden. Maalt 15/9. */ flex:0 0 168px;width:168px;height:38px;box-sizing:border-box;line-height:1.2; /* margin-left:auto skubber feltet helt ud til hoejrekanten. Uden den staar det lige efter etiketten, og saa flytter det sig alt efter om der staar "Navn" eller "Foedselsdag" foran. */ margin-left:auto} .konto-række input.konto-felt[readonly]{cursor:default} .konto-række .navn{flex:none;font-weight:550} /* .konto-række foran: input[type=text] paa linje ~700 er baade mere specifik og staar senere i filen, saa uden den ville feltet beholde appens store ramme og braekke raekken. */ .konto-række input.konto-felt,.konto-række select.konto-felt{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:15px; color:var(--tekst);text-align:right;padding:0;outline:none;height:auto;margin:0;box-shadow:none} .konto-felt::placeholder{color:var(--dæmpet)} .konto-værdi{flex:1;min-width:0;text-align:right;font-size:15px;color:var(--dæmpet); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .konto-note{font-size:12px;margin:-8px 6px 18px;line-height:1.55} /* ---------- Datotrinnet: samme raekkeform som kontoen ---------- KN 15/9: "alt for klumpe dumbe". Fem fuldbredde-blokke blev til fem linjer. Spoergsmaalet til venstre, svaret til hoejre. */ /* ---------- KALENDEREN (KN 17/9) ---------- Afløste fire felter og en dropdown ("Samme dag / Dagen efter / Vælg dato"). Spørgsmålet er ét: hvilke dage er I væk? Så er svaret ét greb — tryk afrejse, tryk hjemkomst. Farverne er turkortets: kobber til de valgte ender, en dæmpet kobberflade til dagene imellem. Ikke en ny palet — det er den samme markering, som "her er du" bruger på fasebåndet. */ .dato-kort{padding:16px 16px 6px} .kal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} /* Samme snit som h1-h3: vægt 600, overskriftsfarven, lining-tal (OD 5/10: "måneden er skrevet med en ny font" — den stod alene i vægt 400). */ .kal-maaned{font-family:var(--skrift-display);font-weight:600;font-size:18px;color:var(--overskrift); text-transform:capitalize;letter-spacing:.2px;font-variant-numeric:lining-nums} .kal-pil{width:38px;height:38px;border-radius:50%;border:1px solid var(--linje); background:none;color:var(--gran);font-size:20px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:border-color .2s,opacity .2s} .kal-pil:disabled{opacity:.28;cursor:default} @media(hover:hover){.kal-pil:not(:disabled):hover{border-color:var(--rav)}} /* Syv spor, faste og lige brede — så tallene står i lodrette rækker og ikke danser, når en måned starter på en anden ugedag. */ .kal-uge,.kal-gitter{display:grid;grid-template-columns:repeat(7,1fr)} .kal-uge{margin-bottom:4px} .kal-uge span{text-align:center;font-size:11px;letter-spacing:.06em;text-transform:uppercase; color:var(--dæmpet);padding:4px 0} .kal-gitter{gap:2px 0} .kal-tom{height:40px} .kal-dag{height:40px;border:0;background:none;cursor:pointer;position:relative; font-family:var(--skrift-brød);font-size:14.5px;color:var(--gran); font-variant-numeric:tabular-nums lining-nums; display:flex;align-items:center;justify-content:center; transition:color .15s} .kal-dag:disabled{color:var(--dæmpet);opacity:.35;cursor:default} /* Dagens dato får en prik, ikke en ring: en ring til i et gitter, der allerede markerer to ender og en periode, er én markering for meget. */ .kal-dag.idag::after{content:"";position:absolute;bottom:5px;left:50%; transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--rav)} /* Båndet mellem enderne. Det er en firkant og ikke afrundet, fordi dagene skal hænge SAMMEN hen over ugeskiftet — en afrunding pr. dag ville gøre en uge til syv perler. */ .kal-dag.imellem{background:rgba(var(--p-kobber-rgb),.13)} .kal-dag.fra,.kal-dag.til{color:var(--p-hvid);font-weight:700} .kal-dag.fra::before,.kal-dag.til::before{content:"";position:absolute;inset:2px; border-radius:50%;background:var(--rav);z-index:0} /* Tallet ligger i et span netop for at kunne loeftes over cirklen — se noten i kalenderGitter(). */ .kal-dag span{position:relative;z-index:1} /* Enderne bærer selv halvdelen af båndet, så det møder cirklen i stedet for at stoppe en dag for tidligt. `ene` er endagsturen: ingen bånd. */ .kal-dag.fra:not(.ene){background:linear-gradient(to right,transparent 50%,rgba(var(--p-kobber-rgb),.13) 50%)} .kal-dag.til:not(.ene){background:linear-gradient(to right,rgba(var(--p-kobber-rgb),.13) 50%,transparent 50%)} .kal-dag.idag.fra::after,.kal-dag.idag.til::after{background:var(--p-hvid);z-index:2} @media(hover:hover){.kal-dag:not(:disabled):not(.fra):not(.til):hover{color:var(--rav-tekst)}} /* Perioden skrevet ud. Et gitter med farver kan ikke siges højt. */ /* DATOTRINNET SOM EN REJSEPLAN (KN 28/9): to rækker, Afrejse og Hjemkomst, hver i sin boks med dag til venstre og klokkeslæt til højre. Rækken, man retter, lyser op, og kalenderen folder sig ud under. */ .rejse-række{display:flex;align-items:stretch;border:1.5px solid var(--linje);border-radius:14px; background:var(--felt-flade);transition:border-color .2s} .rejse-række.aktiv{border-color:var(--rav)} .rejse-dato{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;border:0;background:none; font-family:inherit;text-align:left;cursor:pointer;color:var(--tekst);padding:10px 12px 11px 14px; border-radius:13px 0 0 13px} .rejse-dato:focus-visible{outline:2px solid var(--fjord);outline-offset:-2px} @media(hover:hover){.rejse-række:not(.aktiv):hover{border-color:rgba(var(--p-kobber-rgb),.55)}} .rejse-etiket{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dæmpet); letter-spacing:.02em} .rejse-etiket svg{width:15px;height:15px;color:var(--rav-tekst)} .rejse-værdi{font-size:18px;font-weight:600;line-height:1.25;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .rejse-række.aktiv .rejse-værdi{color:var(--rav-tekst)} /* Klokkeslættet har sin egen lille kolonne, adskilt af en hårstreg. */ .rejse-tid{flex:none;display:flex;flex-direction:column;justify-content:center;gap:3px; padding:8px 12px 9px;border-left:1px solid var(--linje-blød);cursor:pointer} .rejse-tid input[type=time]{width:92px;height:32px;box-sizing:border-box;padding:0 2px;border:0; background:none;border-radius:0;font:inherit;font-size:18px;font-weight:600;color:var(--tekst); font-variant-numeric:tabular-nums;text-align:left} .rejse-tid input[type=time]:focus{outline:none;color:var(--rav-tekst)} /* Rejselængden står i hullet mellem de to rækker, som på en billet. */ .rejse-mellem{display:flex;align-items:center;gap:10px;margin:0 14px;min-height:30px; font-size:12.5px;color:var(--dæmpet);font-weight:550} .rejse-mellem::before,.rejse-mellem::after{content:"";flex:1;height:1px;background:var(--linje-blød)} .rejse-mellem span:empty{display:none} .kal-hjælp{margin:0;padding:14px 2px 0;text-align:center;font-size:13.5px;color:var(--rav-tekst); font-weight:550} .dato-kort{padding-bottom:16px} @media(max-width:360px){ .rejse-dato{padding:9px 8px 10px 12px} .rejse-tid{padding:8px 10px 9px} .rejse-tid input[type=time]{width:84px;font-size:16px} .rejse-værdi{font-size:16.5px} } /* Folden: grid-rækken går fra 0fr til 1fr, så højden glider — også ind igen. max-height-tricket ville kræve et gæt på kalenderens højde, og et gæt er forkert på den måned, der har seks uger. */ .dato-fold{display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .34s cubic-bezier(.2,.7,.3,1),opacity .24s ease} .dato-fold.åben{grid-template-rows:1fr;opacity:1} .dato-fold-indre{overflow:hidden;min-height:0} .dato-fold-indre #kalender{padding:10px 2px 0} @media(prefers-reduced-motion:reduce){.dato-fold,.rejse-række{transition:none}} /* ⚠️ ETIKETTEN SKAL HAVE PLADS. "Ca. hvornår kører I?" braekkede over TRE linjer ved siden af et tidsfelt, fordi .konto-raekke deler bredden ligeligt. Klokkeslaettet fylder det, det fylder — resten er etikettens. */ /* ⚠️ ETIKETTEN VAR LAAST TIL 58 % af raekken, og paa 320 px braekkede "Ca. hvornaar koerer I?" derfor over fire linjer ved siden af et klokkeslaet, der fyldte det halve af sin plads. Tallet fylder det, det fylder — resten er etikettens. */ .dato-liste .konto-række{gap:14px} .dato-liste .navn{flex:1 1 auto;max-width:none;min-width:0; font-weight:550;line-height:1.35} .dato-liste input.konto-felt{flex:0 0 auto;width:auto;min-width:104px} /* Paa de smalleste telefoner staar etiketten over feltet. To ting paa samme linje, hvor den ene er en saetning, holder ikke under 360 px. */ @media(max-width:360px){ .dato-liste .konto-række{flex-direction:column;align-items:stretch;gap:6px} .dato-liste input.konto-felt{text-align:left;width:100%} } /* Selecten arver kontofeltets form, men skal have plads til sin pil. */ .konto-række select.konto-felt.retter{padding-right:27px;text-align:left;cursor:pointer; appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6 9.5 12 15l6-5.5%27 fill=%27none%27 stroke=%27%235f6353%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 7px center;background-size:15px} /* Telefonens egen kalender-/urknap skal kunne rammes. */ /* Ét maal til hele svarkolonnen, saa de fire felters hoejrekant flugter. Uden den var datoen bredest, uret smallest og dropdownen midtimellem — tre forskellige kanter under hinanden. */ /* ÉT MAAL TIL ALLE FIRE FELTER. To ting gjorde dem ulige store: 1) basisreglen ovenfor er MERE specifik og saetter flex:1, saa hvert felt voksede efter sin etikets laengde - dropdownen fik 158 px, fordi "Hjem igen?" er kortere end "Ca. hvornaar koerer I?". 2) de tre native kontroller har hver sin indbyggede hoejde: 35, 37 og 38 px. Uden en eksplicit hoejde arver man browserens skoen. Derfor baade hoejere specificitet OG faste maal. Maalt efter. */ .dato-liste .konto-række input.konto-felt, .dato-liste .konto-række select.konto-felt{ flex:0 0 150px;width:150px;height:38px;box-sizing:border-box;line-height:1.2} .dato-liste .konto-række .navn{flex:1;min-width:0} .dato-liste .navn{flex:1} /* De to sjaeldne handlinger staar side om side og stille. De skal kunne findes, ikke tilbydes. */ .indstil-fod{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:18px} .indstil-fod .knap{width:100%;max-width:170px} /* SLETNING — ét niveau under Log ud, med vilje. Den skal kunne findes af den, der leder efter den (Google Play og App Store kraever det), og ikke af fingeren, der sigtede efter Log ud. Derfor: daempet, uden ramme, og ikke roed. Det roede hoerer til paa selve skaermen, hvor der staar hvad der sker. */ .slet-link{background:none;border:0;padding:8px 12px;font:inherit;font-size:13px; color:var(--daempet,var(--p-graa-4));text-decoration:underline;text-underline-offset:3px;cursor:pointer} .slet-link:hover{color:var(--tekst)} /* Selve handlingsknappen INDE paa sletteskaermen. Her maa den gerne se ud, som den goer: det er den eneste uigenkaldelige knap i appen. */ .slet-knap{background:var(--p-roed-1);color:var(--p-lys-3);border:1px solid var(--p-roed-4)} .slet-knap:hover:not(:disabled){background:var(--p-roed-3)} .slet-knap:disabled{opacity:.6;cursor:default} .slet-liste{margin:10px 0 0;padding-left:20px;line-height:1.7;font-size:14.5px} .slet-liste li{margin-bottom:4px} /* `.side` har `padding:22px 22px 0` — ingen luft i bunden. Bundnavigationen ligger absolut og daekker de nederste ~75 px, saa det sidste paa en lang skaerm gemmer sig bag den, ogsaa naar der er rullet helt ned. Maalt 16/9: knappens underkant laa 233 px under navigationens overkant. De fleste skaerme slutter hoejt nok til at det ikke ses. Her goer det: de to nederste elementer er kodeordsfeltet og selve sletteknappen, og ingen af dem maa vaere svaere at faa oeje paa. Polstringen laegges KUN her - de oevrige skaerme roeres ikke af en rettelse, de ikke bad om. */ .slet-side{padding-bottom:96px} /* ---------- "HUN HAR DELT EN TUR MED DIG" (KN 16/9) ---------- Ligger under hero'en paa forsiden. Kobber, fordi det er appens ene accentfarve og bruges til dét, man skal laegge maerke til - samme begrundelse som Udgiv-knappen i bagrummet. Den fylder én linje og kan lukkes. En besked, der ikke kan lukkes, bliver til en ting, man ser forbi. */ .delt-varsel{ display:flex;align-items:center;gap:12px; margin:14px 16px 0;padding:13px 14px; background:linear-gradient(180deg,rgba(var(--p-kobber-lys-rgb),.16),rgba(var(--p-kobber-rgb),.13)); border:1px solid rgba(var(--p-kobber-rgb),.34);border-radius:18px} .delt-varsel .dv-krop{flex:1 1 auto;min-width:0} .delt-varsel .dv-titel{font-weight:600;font-size:14.5px;line-height:1.4;color:var(--overskrift)} .delt-varsel .dv-under{font-size:13px;color:var(--fjord);margin-top:2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .delt-varsel .dv-se{flex:0 0 auto;padding:8px 14px;font-size:13.5px;border-radius:100px} .delt-varsel .dv-luk{flex:0 0 auto;background:none;border:0;padding:6px;cursor:pointer; color:var(--fjord);opacity:.7;line-height:0} .delt-varsel .dv-luk:hover{opacity:1} .delt-varsel .dv-luk .ik{width:15px;height:15px} /* ---------- KOER DERHEN (17/9) ---------- Koordinaterne skal kunne LAESES OP, ikke bare ses. Derfor tabular tal, god stoerrelse og plads omkring - og de er markerbare, saa de kan kopieres ind i en besked. */ .kør-derhen{margin:16px 0 0;padding:15px 16px;background:var(--kort-flade); backdrop-filter:var(--kort-sløring);-webkit-backdrop-filter:var(--kort-sløring); border:1px solid var(--kort-kant);border-radius:20px} .kør-derhen .kd-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .kør-derhen .kd-titel{font-family:var(--skrift-display);font-weight:600; font-size:15.5px;color:var(--overskrift);flex:1 1 auto} /* `.knap` er skrevet til