/* Theme Name: ATDT Utforskamalmo.se Description: GeneratePress-barntema (tunt identitetslager) för utforskamalmo.se, besöksguide till Malmö. Arketyp G bold/modern, paletten "Kajkant och magenta", Darker Grotesque + Asap + Spline Sans Mono. Komponenter ligger i pluginet atdt-theme-kit. Del av ATDT-nätverkets temarkitektur. Author: Atdt AB Template: generatepress Version: 0.4.0 */ /* ===== GP:s globala fargvariabler mappade till tokens ===== Ligger FORST, fore arketypens kropp. Utan den lacker GeneratePress standardaccent (blatt #1e73be) in i lankar, knappar och navigering. Extra synligt i G, dar lankar ska vara ink med magentaband. */ :root:root{--accent:var(--atdt-link);--contrast:var(--atdt-ink);--contrast-2:var(--atdt-muted);--contrast-3:var(--atdt-neutral);--base:var(--atdt-neutral);--base-2:var(--atdt-bg);--base-3:var(--atdt-surface)} /* ===== ARKETYP G - BOLD/MODERN (brutalistiskt, hogt anslag, design-forward, tech/asikt) ===== */ /* Stor typografi, tjocka konturer, harda offset-skuggor (ingen blur), kantigt. */ body{background:var(--atdt-bg);color:var(--atdt-ink);font-family:var(--atdt-font-body);line-height:1.6} .entry-content{font-size:1.05rem} .atdt-lead{font-size:1.3rem;line-height:1.45;font-weight:600;color:var(--atdt-ink)} h1,.entry-title,.site-title{font-family:var(--atdt-font-display);font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(2.1rem,5vw,3.2rem)} .entry-content h2{font-family:var(--atdt-font-display);font-weight:800;letter-spacing:-.02em;font-size:1.9rem;line-height:1.05;margin:2.4em 0 .6em;padding-bottom:.25em;border-bottom:5px solid var(--atdt-ink)} .entry-content h3{font-family:var(--atdt-font-display);font-weight:800;font-size:1.25rem;margin-top:1.6em} a{color:var(--atdt-ink);text-decoration:none;background:linear-gradient(var(--atdt-accent),var(--atdt-accent)) no-repeat 0 100%/100% 35%;padding:0 .05em} a:hover{background-size:100% 100%} .atdt-hero{margin:0 0 2rem} .atdt-hero img{width:100%;height:auto;border-radius:0;display:block;border:3px solid var(--atdt-ink);box-shadow:10px 10px 0 var(--atdt-accent)} .atdt-hero figcaption,.atdt-fotocred{display:block;font-family:var(--atdt-font-mono);font-size:.75rem;color:var(--atdt-muted);margin-top:.7rem;text-transform:uppercase;letter-spacing:.05em} .atdt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin:2.2rem 0} .atdt-card{background:var(--atdt-surface);border:2px solid var(--atdt-ink);border-radius:0;padding:1.3rem 1.4rem;transition:transform .12s,box-shadow .12s} .atdt-card:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--atdt-accent)} .atdt-card h3{margin-top:0} .atdt-card a{background:none;padding:0} .entry-content table{width:100%;border-collapse:collapse;margin:1.8em 0;border:2px solid var(--atdt-ink)} .entry-content thead th{background:var(--atdt-ink);color:var(--atdt-bg);font-family:var(--atdt-font-display);text-transform:uppercase;letter-spacing:.03em} .entry-content th,.entry-content td{padding:.65em .85em;border:1px solid var(--atdt-ink);text-align:left} .entry-content blockquote{border:2px solid var(--atdt-ink);background:var(--atdt-accent);color:var(--atdt-on-accent);margin:1.8em 0;padding:1em 1.2em;font-weight:600;box-shadow:6px 6px 0 var(--atdt-ink)} .wp-block-button__link,.button,button{background:var(--atdt-ink);color:var(--atdt-bg);border:2px solid var(--atdt-ink);border-radius:0;font-family:var(--atdt-font-display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;box-shadow:4px 4px 0 var(--atdt-accent)} /* Sidfotsmotiv (temats variant) */ .atdt-road,.atdt-ridge,.atdt-swell,.atdt-vine,.atdt-trail,.atdt-sine,.atdt-paws,.atdt-vinerule,.atdt-drops,.atdt-stage{display:block;width:100%;height:26px;margin-top:2.6rem;margin-bottom:2.2rem;color:var(--atdt-accent);opacity:.5} /* Responsiv tabell */ @media (max-width:600px){.entry-content table{table-layout:fixed;width:100%;font-size:.8rem}.entry-content th,.entry-content td{word-break:break-word;overflow-wrap:anywhere}} /* ===================================================================== TEMATS EGEN SVANS: overridningar som designkonceptet kraver. Allt harunder vinner over arketypen ovanfor. ===================================================================== */ /* --- 1. Lankbandet. Arketyp G satter a{color:ink} med en gradient i FULL magenta som tacker nedre 35 procent av textrutan. Ink direkt pa full magenta ger 3,89:1, alltsa under 4,5:1 for den del av bokstaven som ligger i bandet. Bandet tonas darfor till 35 procent magenta mot bakgrunden, ungefar #ECB0D1, dar ink ger 10,51:1. Vid hover fylls hela rutan med --atdt-link och texten vaxlar till --atdt-on-accent, alltsa 6,94:1. */ a{color:var(--atdt-ink);text-decoration:none;background:linear-gradient(color-mix(in srgb,var(--atdt-accent) 35%,var(--atdt-bg)),color-mix(in srgb,var(--atdt-accent) 35%,var(--atdt-bg))) no-repeat 0 100%/100% 35%;padding:0 .05em} a:hover,a:focus{color:var(--atdt-on-accent);background:linear-gradient(var(--atdt-link),var(--atdt-link)) no-repeat 0 100%/100% 100%} /* I kort och tabeller ar namnet en ren lanktext utan band. Da bar farg och understrykning igenkanningen: --atdt-link ger 6,94:1 mot vit kortyta och 6,55:1 mot sidbakgrunden. */ .atdt-card a,.entry-content td a{color:var(--atdt-link);background:none;padding:0;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px} .atdt-card a:hover,.entry-content td a:hover{color:var(--atdt-on-accent);background:var(--atdt-link);text-decoration-color:var(--atdt-on-accent)} /* --- 2. Morka band mats var for sig, inte bara brodtexten. thead: ink som fyllning, --atdt-bg som text 17,82:1 knapp: ink som fyllning, --atdt-bg som text 17,82:1 citatruta: magenta som fyllning, vit text 4,85:1 overlagd rubrik: ink som fyllning, --atdt-bg som text 17,82:1 sidfotsband: ink som fyllning, --atdt-neutral som text 14,52:1 Inget band ar alltsa bara antaget ljust. */ .entry-content thead th{background:var(--atdt-ink);color:var(--atdt-bg)} .wp-block-button__link,.button,button{background:var(--atdt-ink);color:var(--atdt-bg);border-color:var(--atdt-ink)} .entry-content blockquote{background:var(--atdt-accent);color:var(--atdt-on-accent)} .entry-content blockquote a{color:var(--atdt-on-accent);background:none;text-decoration:underline;text-decoration-thickness:2px} .atdt-overlay-title{background:var(--atdt-ink);color:var(--atdt-bg)} .atdt-overlay-title a{color:var(--atdt-bg);background:none;text-decoration:underline} .site-footer,.atdt-sidfotsband{background:var(--atdt-ink);color:var(--atdt-neutral)} .site-footer a,.atdt-sidfotsband a{color:var(--atdt-neutral);background:none;text-decoration:underline;text-decoration-thickness:1px} /* --- 3. Typsnitt. Darker Grotesque har 700 och 800 pa riktigt, sa arketypens 800 pa h1, h2 och h3 ger ingen syntetisk fetstil. Fonten SAKNAR daremot kursiv: font-synthesis:none sparrar en syntetisk lutning om en kursiv rubrik nagonsin infors, och kursiven tas da ur brodtexten (Asap 400 italic). */ h1,.entry-title,.site-title,.entry-content h2,.entry-content h3,.atdt-card h3,.widget-title,.atdt-nyckeltal b,.atdt-nyckeltal strong{font-synthesis:none;font-style:normal} .entry-content em,.entry-content i,blockquote cite{font-family:var(--atdt-font-body);font-style:italic;font-weight:400;font-synthesis:none} /* Mono ar synlig i G: fotokredit, kontrolldatum, metaetiketter och tidskolumner. */ .atdt-fotocred,.atdt-hero figcaption,.atdt-kontrollerat,.atdt-meta{font-family:var(--atdt-font-mono);font-synthesis:none} .atdt-kontrollerat{font-size:.76rem;color:var(--atdt-muted);text-transform:uppercase;letter-spacing:.05em} .entry-content td.atdt-tid{font-family:var(--atdt-font-mono);font-variant-numeric:tabular-nums} .entry-content td.atdt-dag{font-family:var(--atdt-font-body);font-weight:600} .atdt-nyckeltal b,.atdt-nyckeltal strong{font-family:var(--atdt-font-display);font-weight:800;font-size:2.4rem;line-height:1} .atdt-nyckeltal small{font-family:var(--atdt-font-mono);color:var(--atdt-muted)} /* --- 4. Chips: rektangulara, 2 px inkram, ingen radie, versal Asap 600 och ink som text. Valt filter fylls med magenta och texten vaxlar till vit (4,85:1). */ .atdt-chip,.atdt-filter{display:inline-block;border:2px solid var(--atdt-ink);border-radius:0;padding:.24em .8em;font-family:var(--atdt-font-body);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--atdt-ink);background:transparent;font-synthesis:none} .atdt-chip[aria-pressed="true"],.atdt-chip.is-vald{background:var(--atdt-accent);color:var(--atdt-on-accent);border-color:var(--atdt-accent)} .atdt-chiprad{display:flex;gap:.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.3rem} @media (min-width:700px){.atdt-chiprad{flex-wrap:wrap;overflow-x:visible}} /* Dagens rad: 4 px magenta vansterkant INUTI cellramen, alltsa en grafisk markor pa 4,85:1 mot vit yta och 4,58:1 mot sidbakgrunden, aldrig en fylld rad som skulle andra textkontrasten i cellen. */ .entry-content tbody tr.atdt-idag td:first-child{box-shadow:inset 4px 0 0 var(--atdt-accent)} /* Sasongsblock och Kopenhamnssparet: 2 px ram i Oresundsblatt, samma block overallt sa lasaren kanner igen den gransoverskridande delen. */ .atdt-sasong,.atdt-kopenhamn{border:2px solid var(--atdt-accent-2);border-radius:0;padding:1.1rem 1.3rem;margin:2rem 0} .atdt-sasong > :first-child,.atdt-kopenhamn > :first-child{font-family:var(--atdt-font-display);font-weight:800;font-synthesis:none} /* --- 5. Sidfotsmotivet, brospann. Granskat renderat i sin egen palett. Vid arketypens 0,5 blir magentan pa det rosabrutna papperet matt och kablarna gles, precis som konceptet forutsag. Opaciteten hojd till 0,75, dar bana, pyloner och kabelsolfjader laser. */ .atdt-road{opacity:.75} /* GeneratePress skriver ut bade andrings- och publiceringsdatum sa snart ett inlagg uppdaterats, vilket ger "21 september 202621 september 2026" i metaraden. Dolj andringsdatumet, behall det publicerade. Uppmatt 2026-09-21. */ .entry-meta .updated:not(.published) { display: none; }