/* GLASET — appens ytterlager (APPSTORE_PLAN §2.8.12, §2.8.13). * * Detta är formspråket för sidorna man möter FÖRE och RUNT rundan: hubben, * entrén, uppsättningen, planeringens förstasida. Ett banfoto under hela sidan, * kort av frostat glas ovanpå, och en serifrubrik. * * VAR GRÄNSEN GÅR, och varför den inte är godtycklig: hålvyn, kartan och 3D:n * rörs inte. De används med skärmen nedvriden i solljus, mitt i ett slag, och * har egna kontrastkrav som är MÄTTA (tokens.css, som är en annan palett med * andra skäl). Glaset är för de lugna ögonblicken — parkeringen, soffan, * kvällen innan. Blanda inte ihop dem: en fil per sammanhang. * * FILEN FINNS FÖR ATT DEN INTE SKA KOPIERAS. Glaset bodde först inbakat i * uppsattning.html. Andra sidan som ville ha det hade blivit en andra kopia av * samma palett, och den tredje hade gjort dem tre — som glider isär en färg i * taget utan att någon märker det förrän de står bredvid varandra. * * Ligger i sw.js SHELL_ASSETS. Ändras något här: bumpa mobile/version.js, * annars kör telefonerna kvar på den gamla filen (cache-first). */ /* ---- rubrikserifen ---------------------------------------------------------- SJÄLVHOSTAD, inte hämtad från Google: appen ska starta en runda på en parkering utan täckning, och en rubrik som byter typsnitt när nätet kommer tillbaka är precis den sortens hopp som får en app att kännas som en webbsida. Filen är Google Fonts latin-subset av Playfair Display (variabel 400–900, 38 kB) och ligger i SHELL_ASSETS. `font-display:swap` och en systemserif i stacken: laddar filen inte alls står rubriken i Georgia i stället för att vara osynlig. */ @font-face { font-family:"Playfair Display"; src:url("./fonts/playfair-latin.woff2") format("woff2"); font-weight:400 900; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } /* ---- tokens ----------------------------------------------------------------- Tokens, inte spridda färger: en ändring här slår igenom överallt glaset används. De sitter på :root så att komponenter som ritas av delade js-moduler (sidospel.js) kan läsa dem med var(--glas, fallback) och bete sig rätt på både glasade och solida sidor. */ :root { --glas:rgba(255,255,255,.085); /* kortets yta */ --glas-hog:rgba(255,255,255,.14); /* fält och valbara ytor ovanpå kortet */ --glas-lag:rgba(0,0,0,.26); /* ytor som ligger UNDER kortnivån */ --glas-kant:rgba(255,255,255,.22); --glas-ink:#f4fbf7; /* DÄMPAD TEXT ÄR INTE SVAG TEXT (2026-09-08, fältfall "designa för solljus"). `.62` gav ~4,0:1 mot glaset över ett mörkat foto — under kravet 4,5:1 redan inomhus, och en telefon i direkt sol tappar dessutom det mesta av sin effektiva kontrast till reflexer i glaset. Etiketter, hcp-rader och hjälptexter blev då gissningar. `.82` ger ~6,6:1 och kostar ingenting: hierarkin mellan `--glas-ink` och `--glas-dim` är kvar, den är bara inte längre byggd på att den ena är oläslig. */ --glas-dim:rgba(223,241,230,.82); --glas-accent:#4ee29a; /* GULD — appens NAMN, ingenting annat (grundaren 2026-09-08). Loggan ligger fritt mot bakgrunden i stället för i en bricka, och då är det färgen som måste säga "det här är titeln, inte en knapp du glömt trycka på". Guld gör det utan att låna appens gröna, som betyder handling överallt annars. Tonen är varm och mättad nog att bära serifen: 8,5:1 mot hubbens botten (uppmätt), alltså god marginal till 4,5:1 även med solreflexer i glaset. ANVÄND DEN INTE PÅ KNAPPAR ELLER STATUS — då slutar den betyda namnet. */ --glas-guld:#e3c17e; --glas-fara:#ff9484; /* Varningsgult — för det som saknas men inte är fel (ikonen som fäller ut en förklaring, sidospel.js). Egen token så den inte hårdkodas per fil. */ --glas-varn:#ffd66b; --glas-varnfyll:rgba(255,214,107,.20); /* Fyllningar för "påslaget" och "farligt". Mot glas är de TINTER och inte solida plattor: en fylld accentknapp mitt i ett frostat kort läser som ett hål i glaset. Delade komponenter (sidospel.js) läser dem med var(--glas-pa, ), så en sida utan glas.css beter sig exakt som innan. */ /* VALT ALTERNATIV SKA SYNAS I SOLLJUS (2026-09-08). `.22` var en antydan — mot ett ljust ortofoto bakom glaset gick tinten ihop med det ovalda grannsegmentet, och slinga/tee gick inte att avläsa på armlängds avstånd. `.36` plus den heldragna accentkanten och ringen i `.vald` nedan gör valet till en platta i stället för en nyans. */ --glas-pa:rgba(78,226,154,.36); --glas-farofyll:rgba(255,120,100,.18); --serif:"Playfair Display",Georgia,"Times New Roman",serif; /* Tokens för det som annars blir hårdkodade färger ute i sidorna. `tests/test_formsprak_tokens.py` förbjuder råa färgvärden i vyerna, och regeln är lika riktig för glaset som för kartan: en hårdkodad färg smyger tillbaka vid första lilla ändring, och den syns inte — den ser ut som design. `--glas-solid` är fallbacken när backdrop-filter saknas. `--glas-option-*` är för systemritade listor (select > option), som inte ärver någonting av glaset och blir vita på iOS om de lämnas ifred. */ --glas-solid:rgba(9,32,23,.90); --glas-skugga:rgba(0,0,0,.34); --glas-fokus-kant:rgba(78,226,154,.55); --glas-fokus-ring:rgba(78,226,154,.18); --glas-option-yta:#102c20; --glas-option-ink:#eaf6ee; /* ---- diagram och dataserier (analysen, §2.8.25) ------------------------ Analysen ritar sex diagram i inline-SVG (greenprecision, fairwaykorridor, fem sparklines). De bodde i sidans egen palett och var toner valda mot ett platt kort; mot glas över en ritning är de en annan mätning. Här, inte i sidan, av samma skäl som resten: tre kopior glider isär en nyans i taget. RUTNÄTET ÄR DEKOR OCH TEXTEN ÄR TEXT. Linjen får vara svag (kravet på icke-text är 3:1 och den bär ingen information i sig — den är en linjal). Etiketterna i ett diagram är läsvärd text och tar därför `--glas-dim` rakt av, alltså samma 6,6:1 som resten av sidans dämpade text. Sätt ALDRIG en egen svagare ton på dem "för att de är små" — små är just när kontrast behövs. */ --glas-diagram-linje:rgba(255,255,255,.20); /* SERIERNA ÄR FYRA STEG, och de är avsiktligt de token som redan finns: bra → accentgrönt, neutralt → dämpat, miss → varningsgult, dyrt → rött. En femte färg hade betytt ett femte begrepp, och analysen har fyra. (Scorefördelningen: birdie · par · bogey · dubbel el. mer.) */ /* LANDNINGSYTORNA (A3) är data, inte pynt: att missen låg i greenbunkern och inte på klippt gräs är hela skillnaden mellan "kort vänster" och ett råd. Tonerna är ljusare än de var mot det platta kortet — en prick på 4 px över frostat glas tappar mättnad, inte ljushet, så den behöver ljusheten i stället. Green och ruff har inga egna token: de ÄR "bra" och "miss" i skalan ovan, och en egen nyans för dem hade sagt att de betyder något annat än de gör. */ --glas-yta-bunker:#e8d69b; --glas-yta-vatten:#7cc4f2; --glas-yta-fairway:#7ac79b; } /* ---- fotot under hela sidan ------------------------------------------------- Det som gör glaset meningsfullt. Ett glaskort mot en enfärgad platta är bara en ljusare platta — kontrasten kommer från tre lager som var för sig är svaga: den mörka skärmen över fotot, oskärpan bakom kortet, och den ljusa hårlinjen runt det. Oskärpan är den som bär: den skiljer kortet från fotot också DÄR FOTOT ÄR LJUST, vilket en genomskinlig vitton inte gör. `position:fixed` och inte `background-attachment:fixed`: den senare är trasig/hackig i iOS Safari. */ .bakgrund { position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--bg,#0c2e22); } .bakgrund img { width:100%; height:100%; display:block; object-fit:cover; /* Nedre delen bär fairway och bunker; horisonten får vika på smal skärm. */ object-position:50% 58%; } /* SKÄRMEN ÄR NEUTRAL OCH LÄTT (§2.8.19, grundaren 2026-08-21). * * FÖRE var den grön (`rgba(6,26,18,…)`) och tung: .28 upptill och .95 nedtill. * Två fel i ett. Grönt över ett grönt ortofoto blir grumligt i stället för * mörkt — och grumligt läses som LÅGUPPLÖST, vilket var precis den slutsats * grundaren först drog om bilderna. Tyngden gjorde resten: uppmätt 2026-08-21 * överlevde bara 13 % av bildens egen kontrast vid 70 % höjd och 8 % vid 90 %. * Det fanns nästan ingenting kvar att uppfatta som skärpa. * * OCH DET VAR GRATIS ATT RÄTTA. Skärmen finns för att text ska gå att läsa mot * bilden. Med värdena nedan är kontrasten mot vit text 12,4:1 upptill och * 17,2:1 nedtill — kravet är 4,5:1. Den gamla skärmen mörkade alltså bort * bilden med sju gånger mer marginal än läsbarheten behövde. * * Efter: 102 / 82 / 68 / 57 % av bildens kontrast kvar (mot 63 / 28 / 13 / 8). * * Två lager, och det övre är poängen med "glaskänsla": en svag LJUSNING * uppifrån, som kanten på en glasskiva. Utan den blir en lätt skärm bara en * blek grå slöja; med den läser ytan som något man ser IGENOM. */ .bakgrund::after { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 22%), linear-gradient(to bottom, rgba(0,0,0,.14) 0%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.46) 72%, rgba(0,0,0,.58) 100%); } /* `tat` = skärmen dras upp. För vyer där texttätheten är hög och bilden är en påminnelse om var man är, inte skärmens motiv. Fortfarande neutral, och fortfarande långt ifrån så mörk som den var. */ .bakgrund.tat::after { background: linear-gradient(to bottom, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 18%), linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,.50) 46%, rgba(0,0,0,.66) 100%); } /* `foto` = bakgrunden är ett riktigt FOTOGRAFI och inte något som är mörkt av konstruktion. Entrén är den enda sidan med ett, och dess övre tredjedel är himmel — ljus nog att vit text faller under läsbarhetskravet på den lätta skärmen (uppmätt 2026-08-21: 3,0:1 i textbandet, kravet är 4,5:1). Den här varianten lägger vikten UPPTILL, där himlen är, i stället för nedtill där gradienter brukar ha den. Resultat: 4,6–4,9:1 i textbandet och 61 % av bildens kontrast kvar — mot 77 % med den delade skärmen och oläsbar text. */ .bakgrund.foto::after { background: linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 22%), linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,.40) 30%, rgba(0,0,0,.50) 62%, rgba(0,0,0,.64) 100%); } /* Innehållet över fotot. BARA #app får en position här — flikraden är `position:fixed` från nav.js, och en `relative` på den lyfte ner den i flödet (sidan blev 62 px för hög, uppmätt 2026-08-20). Ett fixed element behöver ingen egen position för att z-index ska gälla. */ #app { position:relative; z-index:1; } .tabs { z-index:1; } /* ---- glasytan --------------------------------------------------------------- Klassen `glas` är utseendet; storlek, radie och padding hör sidan till. Ett eget värde och inte en variabel: `backdrop-filter` går inte att sätta via custom property utan att varje regel ändå upprepar hela funktionen. */ .glas { background:var(--glas); color:var(--glas-ink); border:1px solid var(--glas-kant); -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25); box-shadow:0 10px 30px var(--glas-skugga); } /* Utan backdrop-filter (äldre Android-webviews) blir glaset en genomskinlig ruta över ett skarpt foto — oläsligt. Då tas en solid ton i stället. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .glas { background:var(--glas-solid); } } /* Fokusringen är formspråkets enda "aktiva" färg utanför primärknappen: ett fält som tagit emot tangentbordet ska synas utan att bli en ram. */ .glasfokus:focus, .glas input:focus { outline:none; border-color:var(--glas-fokus-kant); box-shadow:0 0 0 3px var(--glas-fokus-ring); } /* ---- hjältezonen ------------------------------------------------------------ Fotot syns där hjälten är. Zonen har ingen egen bild — höjden är allt som behövs, för bilden bakom ligger redan där. De negativa marginalerna speglar #app:s padding EXAKT, safe-area inräknad; annars lämnar zonen en ram i hemskärmsläget, där paddingen växer med urklippet. SIDOR MED ANNAN PADDING MÅSTE SKRIVA OM MARGINALERNA. Värdena här är grindens (14/16 px). planera.html har 12/14 och sätter om dem — ärvs lagrets värden rakt av lämnar fotot en ram i hemskärmsläget, där paddingen växer med urklippet. Samma gäller .back och .titel, som är absolut positionerade mot samma mått. */ .hero { position:relative; transition:height .16s ease; margin:calc(-1 * (env(safe-area-inset-top) + 14px)) calc(-1 * (env(safe-area-inset-right) + 16px)) 0 calc(-1 * (env(safe-area-inset-left) + 16px)); height:clamp(280px, 52vh, 470px); } .hero .back { position:absolute; z-index:2; left:calc(env(safe-area-inset-left) + 16px); top:calc(env(safe-area-inset-top) + 10px); color:#eaf6ee; font-weight:600; text-decoration:none; font-size:14px; text-shadow:0 1px 6px rgba(0,0,0,.55); padding:8px 0; margin:0; } .hero .titel { position:absolute; z-index:2; bottom:34px; left:calc(env(safe-area-inset-left) + 16px); right:calc(env(safe-area-inset-right) + 16px); } /* KICKERN: platsen i versaler ÖVER rubriken i stället för som undertext under. Ordningen är inte kosmetisk — den läses "på Burlöv: spelare", alltså plats först och uppgift sedan, vilket är i vilken ordning man faktiskt tänker. */ .hero .kicker { color:#e2f4e9; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; margin:0 0 6px; text-shadow:0 1px 8px rgba(0,0,0,.6); } /* Serifen bär hela "gammal golfklubb"-känslan och används BARA i rubriken. Brödtext, siffror och knappar är kvar i systemets sans — en serif i ett tee-chip hade sett ut som ett misstag, inte som ett arv. */ .hero h1 { font-family:var(--serif); font-size:38px; font-weight:600; margin:0; letter-spacing:-.5px; line-height:1.05; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.5); } .hero .sub { color:#dbeee2; font-size:15px; margin:6px 0 0; text-shadow:0 1px 8px rgba(0,0,0,.5); } /* Kompakt = man har gått vidare. Bilden är då en påminnelse om var man är. */ .hero.kompakt { height:clamp(150px, 22vh, 215px); } .hero.kompakt h1 { font-size:30px; } .hero.kompakt .titel { bottom:20px; } /* Innehållet ligger som ett ark ÖVER fotots nederkant. Överlappet är det som gör sidan till ett lager i stället för två block staplade på varandra — utan det möter kortets ovankant en skarp gradientkant, och sidan läses som "bild, sedan innehåll" i stället för som en yta. */ .innehall { position:relative; z-index:3; margin-top:-22px; } /* ---- valt alternativ --------------------------------------------------------- EN markering, delad av alla segmentrader (slinga i grinden, tee och kön i sidospel.js). Den bor här och inte per fil av samma skäl som resten av glaset: tre kopior glider isär en nyans i taget, och det som glider bort är just det som gör valet läsbart utomhus. Tre lager, för ett räcker inte i sol: den mättade tinten (`--glas-pa`), en HELDRAGEN accentkant med en ring innanför (så kanten inte försvinner mot en ljus bakgrund), och full textkontrast — texten i det valda alternativet är `--glas-ink`, inte accentgrönt. Grönt på grönt är det första som går förlorat när skärmen speglar himlen. */ .vald, .valbar.vald { background:var(--glas-pa); color:var(--glas-ink); font-weight:700; border-color:var(--glas-accent); box-shadow:inset 0 0 0 1px var(--glas-accent); } /* ---- primärknappen ---------------------------------------------------------- Gradient + ett svagt sken under: mot ett foto behöver den lysa lite för att inte läsas som ännu en glasruta. Texten är mörk, inte vit — grönt på grönt med vit text är det som ser billigt ut. */ /* `line-height` är inte kosmetik: knappen ritas som