/* ============================================================ Dalecarlia Photo — Skagen Hav (v2) Ljus/mörk via ; sektionsaccent via Typsnitt: Saira (brödtext) + Saira Condensed (.scd, rubriker) ============================================================ */ *{ margin:0; padding:0; box-sizing:border-box; } ::selection{ background:rgba(240,180,90,.32); } html{ scroll-behavior:smooth; } /* ---- temapaletter ---- */ :root{ --bg:#F4EEE2; --text:#23201a; --headerBg:rgba(244,238,226,.82); --line:rgba(35,32,26,.13); --footerBg:#EBE2D0; --tileBg:#E6DCC9; --card:#FBF8F1; --chromeStrong:#23201a; --chromeMuted:rgba(35,32,26,.5); --chromeSoft:rgba(35,32,26,.72); --gutter:clamp(20px,5vw,64px); --maxw:1440px; } html[data-theme="dark"]{ --bg:#0a0d11; --text:#f3f5f7; --headerBg:rgba(10,13,17,.72); --line:rgba(255,255,255,.08); --footerBg:#06080b; --tileBg:#11141a; --card:#12151b; --chromeStrong:#ffffff; --chromeMuted:rgba(243,245,247,.5); --chromeSoft:rgba(243,245,247,.78); } /* ---- sektionsaccent (--acc följer tema; --hero-acc alltid ljus, för mörka foto-heros) ---- */ body.s-sol{ --acc:#C9871F; --hero-acc:#F0B45A; --wordmark:#9A6A16; } body.s-hav{ --acc:#2F7CB0; --hero-acc:#8FD0E8; --wordmark:#2C5F7E; } body.s-rose{ --acc:#C9657F; --hero-acc:#E59CB0; --wordmark:#9C4A61; } html[data-theme="dark"] body.s-sol{ --acc:#F0B45A; } html[data-theme="dark"] body.s-hav{ --acc:#8FD0E8; } html[data-theme="dark"] body.s-rose{ --acc:#E59CB0; } /* wordmark "DALECARLIA PHOTO": mörkare ton av temat i ljust läge, vit i mörkt */ html[data-theme="dark"] body{ --wordmark:#ffffff; } body{ font-family:'Saira',system-ui,sans-serif; font-weight:400; background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .3s,color .3s; } img{ display:block; max-width:100%; } a{ color:inherit; } .scd{ font-family:'Saira Condensed','Saira',sans-serif; } /* sektionsbredd */ .wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); } /* ---- header ---- */ .site-header{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:84px; padding:12px var(--gutter); background:var(--headerBg); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); } .brand{ display:flex; align-items:center; gap:13px; text-decoration:none; } .brand img{ height:44px; width:auto; object-fit:contain; } .brand .brand-txt{ display:flex; flex-direction:column; } .brand .bname{ font-weight:600; font-size:24px; letter-spacing:.04em; line-height:1; color:var(--wordmark,var(--chromeStrong)); } /* D4 §4: ordmärket i Montserrat Light 300 — endast identitetsytor (header/ footer), aldrig brödtext/UI. "Dalecarlia" 24px + "photo" 14px (26/15 i foten). */ .wordmark{ font-family:'Montserrat','Saira',sans-serif; font-weight:300; font-size:24px; letter-spacing:.02em; line-height:1; color:var(--wordmark,var(--chromeStrong)); white-space:nowrap; } .wordmark .wm-photo{ font-size:14px; font-weight:300; color:var(--chromeMuted); letter-spacing:.06em; } .wordmark.wm-footer{ font-size:26px; } .wordmark.wm-footer .wm-photo{ font-size:15px; } .brand .bsub{ font-size:10.5px; letter-spacing:.4em; color:var(--acc); margin-top:3px; line-height:1; } .footer-brand .brand-txt{ display:flex; flex-direction:column; } .header-right{ display:flex; align-items:center; gap:28px; } .nav{ display:flex; align-items:center; gap:clamp(16px,2.4vw,36px); } .nav a{ font-size:13.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:var(--text); opacity:.6; padding-bottom:4px; border-bottom:2px solid transparent; transition:color .2s,opacity .2s; white-space:nowrap; } .nav a:hover{ opacity:1; } .nav a.active{ opacity:1; color:var(--acc); border-bottom-color:var(--acc); } .theme-toggle{ flex:none; display:inline-flex; align-items:center; gap:7px; cursor:pointer; background:none; border:1px solid var(--line); border-radius:999px; padding:7px 13px; color:var(--chromeSoft); font:600 11px/1 'Saira'; letter-spacing:.14em; text-transform:uppercase; transition:.2s; } .theme-toggle:hover{ color:var(--chromeStrong); border-color:var(--acc); } /* mobil-meny (hamburger) */ .nav-toggle{ display:none; } .menu-btn{ display:none; } /* ---- immersiv foto-hero ---- */ .hero{ position:relative; overflow:hidden; height:clamp(420px,62vh,680px); } .hero.h-680{ height:clamp(440px,70vh,680px); } .hero.h-560{ height:clamp(380px,56vh,560px); } .hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:min(240px,30%); background:linear-gradient(to right,rgba(8,10,13,.6),rgba(8,10,13,0)); } .hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:100%; background:linear-gradient(to top,rgba(8,10,13,.92),rgba(8,10,13,.45) 65%,rgba(8,10,13,0)); } .hero-inner{ position:absolute; left:0; right:0; bottom:0; padding:0 var(--gutter) clamp(34px,6vw,64px); max-width:var(--maxw); margin:0 auto; z-index:1; } .kicker{ font-size:clamp(11px,1.2vw,12px); font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--hero-acc); } .hero h1{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; line-height:.92; letter-spacing:-.01em; color:#fff; margin:16px 0 0; max-width:1000px; text-wrap:balance; font-size:clamp(40px,7vw,104px); } .hero.h-series h1{ font-size:clamp(38px,6vw,88px); } .hero.h-score h1{ font-size:clamp(32px,4.6vw,64px); line-height:1; } .hero h1 .score{ color:var(--hero-acc); } .hero-meta{ margin:14px 0 0; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72); } .hero-sub{ font-size:clamp(15px,1.4vw,18px); line-height:1.6; color:rgba(255,255,255,.82); max-width:560px; margin:18px 0 0; } .hero .btn{ margin-top:30px; } /* knappar */ .btn{ display:inline-flex; align-items:center; gap:9px; font:600 14px/1 'Saira'; letter-spacing:.04em; text-decoration:none; padding:14px 26px; border-radius:3px; cursor:pointer; border:0; transition:.2s; } .btn-acc{ background:var(--acc); color:#fff; } .btn-hero{ background:var(--hero-acc); color:#06212e; } .btn-outline{ background:none; border:1px solid var(--line); color:var(--chromeStrong); } .btn-outline:hover{ border-color:var(--acc); color:var(--acc); } /* ---- sektioner / rubriker ---- */ .section{ padding:clamp(48px,7vw,88px) var(--gutter); max-width:var(--maxw); margin:0 auto; } .section.tight{ padding-top:clamp(36px,5vw,56px); } .sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap; } .sec-head h2{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; letter-spacing:-.01em; color:var(--chromeStrong); font-size:clamp(28px,3.6vw,42px); } .sec-head .meta, .eyebrow{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--chromeMuted); text-decoration:none; } .eyebrow{ display:block; font-weight:600; letter-spacing:.26em; margin-bottom:20px; } .sec-intro{ font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:var(--chromeSoft); max-width:620px; margin:-8px 0 30px; } .lead-intro{ font-size:clamp(20px,2.3vw,26px); line-height:1.5; font-weight:500; color:var(--chromeStrong); max-width:820px; margin:0; text-wrap:pretty; } /* ---- tiles ---- */ .tile{ position:relative; overflow:hidden; border-radius:4px; background:var(--tileBg); display:block; } /* backface-visibility + translateZ: bild kunde blinka svart vid hover in/ut när Chrome re-rastrerar inför transform-övergången (F18-1) — egen GPU-layer från start tar bort omväxlingen. OBS: INGEN will-change här — den knuffade tiles ur .masonry-kolumnerna vid hover (Chrome-bugg: will-change på barn i column-count-layout). */ .tile img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1); backface-visibility:hidden; transform:translateZ(0); } .tile:hover img{ transform:scale(1.05) translateZ(0); } /* serie-kort (Hem: två sätt att berätta) */ .series-cards{ display:grid; grid-template-columns:1.5fr 1fr; gap:20px; } .serie-card{ position:relative; height:clamp(360px,46vw,460px); border-radius:4px; overflow:hidden; background:#0a0d11; text-decoration:none; cursor:pointer; transition:transform .5s cubic-bezier(.2,.7,.2,1); display:block; } .serie-card:hover{ transform:translateY(-4px); } .serie-card img.cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1); } .serie-card:hover img.cover{ transform:scale(1.04); } .serie-card .scrim-l{ position:absolute; left:0; top:0; bottom:0; width:120px; background:linear-gradient(to right,rgba(8,10,13,.5),rgba(8,10,13,0)); } .serie-card .scrim-b{ position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(to top,rgba(8,10,13,.94),rgba(8,10,13,.4) 42%,rgba(8,10,13,0)); } .serie-card .body{ position:absolute; left:clamp(24px,3vw,44px); right:30px; bottom:34px; } .serie-card .body .k{ font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; } .serie-card .body h3{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; line-height:.96; color:#fff; margin-top:9px; font-size:clamp(30px,3.4vw,46px); } .serie-card .body p{ font-size:14px; color:rgba(255,255,255,.78); margin-top:9px; max-width:380px; line-height:1.5; } .serie-card .corner-logo{ position:absolute; bottom:22px; right:22px; height:28px; width:auto; filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)); } /* strip (Hem: senast publicerat) + om-kort */ .tile-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .tile-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .tile-cover{ position:relative; height:clamp(200px,18vw,260px); border-radius:4px; overflow:hidden; background:#0a0d11; display:block; text-decoration:none; cursor:pointer; } .tile-cover.h220{ height:220px; } .tile-cover.motif{ height:clamp(320px,30vw,420px); } .tile-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1); } .tile-cover:hover img{ transform:scale(1.05); } .tile-cover .scrim{ position:absolute; left:0; right:0; bottom:0; height:55%; background:linear-gradient(to top,rgba(8,10,13,.9),rgba(8,10,13,0)); } .tile-cover .lab{ position:absolute; left:22px; bottom:18px; } .tile-cover .lab .k{ font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#fff; opacity:.9; } .tile-cover .lab h3{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:28px; color:#fff; margin-top:4px; } /* D4 §3: uppdaterad-rad i motivkortets scrim — svag text under korttiteln, inget eget band. Hav-punkt (5px) när något är nytt ≤ 7 dagar; ingen glow, ingen animation. */ .tile-cover .lab .upd{ display:block; margin-top:5px; font-size:12px; font-weight:400; color:rgba(255,255,255,.55); } .tile-cover .lab .upd-dot{ display:inline-block; width:5px; height:5px; border-radius:50%; background:#8FD0E8; margin-right:6px; vertical-align:1px; } /* ---- masonry galleri ---- */ .masonry{ column-count:3; column-gap:16px; } .masonry > *{ break-inside:avoid; margin-bottom:16px; } /* F18-1 facit: column-count tål INTE komposit-lagrade barn i Chrome — varje kombination (will-change, translateZ) fick tiles att hoppa ur kolumnerna vid hover/scroll. Därför: inga transforms alls i masonryn — ingen hover-zoom här (lightboxen är interaktionen). Zoomen lever kvar i grid-ytorna (.tile-grid-*, .event-card) där lager är säkra. */ .masonry .tile img{ width:100%; height:auto; display:block; transform:none; backface-visibility:visible; transition:none; } .masonry .tile:hover img{ transform:none; } .masonry.two{ column-count:2; } /* ---- D4: Sport-sidans tvåkolumn + match-rail ---- */ .sport-cols{ display:grid; grid-template-columns:1fr 420px; gap:clamp(26px,3.5vw,52px); align-items:start; } .match-rail .rail-block + .rail-block{ margin-top:36px; } .rail-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:12px; } .rail-head .meta{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--chromeMuted); text-decoration:none; } .rail-head .meta:hover{ color:var(--acc); } .rail-row{ grid-template-columns:64px 1fr auto; gap:16px; padding:13px 2px; } .rail-row .pl-day{ font-size:24px; } .rail-row .pl-mid .title{ font-size:17px; } .rail-matcher{ display:flex; flex-direction:column; gap:8px; } /* Matchraden (rail + arkiv, samma komponent): kort med 3px vänsterkant i grenfärg (⚠ LÅST palett — sätts som --grenkant av MatchRad.astro; okänd gren = ingen kant), resultat i temats accent, dämpad metarad. */ .matchrad{ display:block; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--grenkant,var(--line)); border-radius:4px; padding:13px 16px; text-decoration:none; transition:border-color .15s; } .matchrad:hover{ border-color:var(--acc); border-left-color:var(--grenkant,var(--acc)); } .mr-lag{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .mr-namn{ font-weight:600; font-size:15px; color:var(--chromeStrong); } .mr-res{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:17px; color:var(--acc); white-space:nowrap; } .mr-meta{ font-size:12.5px; color:var(--chromeMuted); margin-top:3px; } /* Ligor & Tävlingar — textkort i v1 */ .liga-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; } .liga-kort{ display:block; background:var(--card); border:1px solid var(--line); border-radius:4px; padding:22px 24px; text-decoration:none; transition:border-color .15s; } .liga-kort:hover{ border-color:var(--acc); } .liga-kort .k{ font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); margin-bottom:6px; } .liga-kort h3{ margin:0; font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:23px; line-height:1.1; color:var(--chromeStrong); } .liga-kort .lk-meta{ font-size:13px; color:var(--chromeMuted); margin-top:6px; } /* Arkivsidorna (Matcharkivet + Ligor-arkivet) */ .arkiv-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; } .grenpunkt{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; vertical-align:1px; } .arkiv-sasong + .arkiv-sasong{ margin-top:44px; } .arkiv-ar{ font-weight:700; font-size:26px; color:var(--chromeStrong); margin:0 0 14px; } .arkiv-lista{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:10px; } .visa-fler{ margin-top:18px; } /* Mobilordning (D4 board 1b): hero → galleri → matcher → ligor */ @media(max-width:1000px){ .sport-cols{ grid-template-columns:1fr; } } @media(max-width:680px){ .masonry.two{ column-count:1; } .arkiv-lista{ grid-template-columns:1fr; } } /* ---- pixieset-band (Sport) ---- */ .pix-band{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; background:#0a2a3a; border-radius:6px; padding:clamp(26px,4vw,38px) clamp(24px,4vw,44px); text-decoration:none; } .pix-band .k{ font-size:12px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:#8FD0E8; margin-bottom:10px; } .pix-band h3{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:clamp(24px,3vw,34px); color:#fff; line-height:1.04; } .pix-band p{ font-size:15px; color:rgba(255,255,255,.72); margin-top:8px; } .pix-band .btn{ flex:none; background:#8FD0E8; color:#06212e; padding:15px 30px; } /* ---- tidigare matcher (Sport) ---- */ .match-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .match-card{ position:relative; display:block; height:300px; border-radius:4px; overflow:hidden; background:#0a0d11; text-decoration:none; } .match-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1); } .match-card:hover img{ transform:scale(1.05); } .match-card .scrim{ position:absolute; inset:0; background:linear-gradient(to top,rgba(8,10,13,.92),rgba(8,10,13,.12) 70%); } .match-card .body{ position:absolute; left:22px; right:22px; bottom:20px; } .match-card .body .k{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#8FD0E8; } .match-card .body h3{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:23px; color:#fff; line-height:1.06; margin-top:8px; } .match-card .chip{ display:inline-block; margin-top:11px; font-size:13px; font-weight:600; letter-spacing:.1em; color:#06212e; background:#8FD0E8; padding:4px 11px; border-radius:2px; } /* ---- event-index ---- */ .event-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; } .event-chip{ font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:9px 18px; border-radius:999px; cursor:pointer; border:1px solid var(--line); color:var(--chromeSoft); background:transparent; transition:background .15s,color .15s,border-color .15s; } .event-chip.active{ background:var(--acc); color:#fff; border-color:var(--acc); } .event-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .event-cardlink{ display:block; text-decoration:none; } .event-card .tile{ position:relative; overflow:hidden; border-radius:4px; background:#0a0d11; } .event-card .tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1); } .event-card:hover .tile img{ transform:scale(1.05); } .event-scrim{ position:absolute; inset:0; background:linear-gradient(to top,rgba(8,10,13,.5),rgba(8,10,13,0) 55%); } .event-badge{ position:absolute; left:18px; top:16px; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:rgba(201,101,127,.9); padding:5px 11px; border-radius:999px; } .event-body{ padding:16px 2px 0; } .event-body h3{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:26px; line-height:1.04; color:var(--chromeStrong); margin:0; } .event-body h3 a{ color:inherit; text-decoration:none; } .event-card:hover .event-body h3 a{ color:var(--acc); } .event-meta{ font-size:13px; color:var(--chromeMuted); margin-top:6px; } .event-body p{ font-size:14px; line-height:1.55; color:var(--chromeSoft); margin:10px 0 0; } .event-go{ display:block; margin-top:12px; font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--acc); text-decoration:none; } @media(max-width:900px){ .event-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:600px){ .event-grid{ grid-template-columns:1fr; } } /* tomt läge: inga uppdrag publicerade än */ .event-empty{ border:1px solid var(--line); border-radius:6px; padding:64px 40px; text-align:center; background:var(--card); } .event-empty .ee-kicker{ display:block; font-size:13px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--acc); } .event-empty h2{ font-weight:700; font-size:30px; line-height:1.05; color:var(--chromeStrong); margin:14px 0 0; } .event-empty p{ font-size:15px; line-height:1.6; color:var(--chromeSoft); max-width:460px; margin:14px auto 0; } .event-empty .ee-btn{ display:inline-block; margin-top:26px; font-size:14px; font-weight:600; padding:13px 26px; border-radius:4px; text-decoration:none; } /* ---- på gång ---- */ .pagang-next{ display:grid; grid-template-columns:210px 1fr; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--card); } .pagang-date{ background:var(--tileBg); padding:34px 26px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border-right:1px solid var(--line); } .pagang-date .wd{ font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--chromeMuted); } .pagang-date .day{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:82px; line-height:.88; color:var(--acc); margin:6px 0 2px; } .pagang-date .mo{ font-size:14px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--chromeStrong); } .pagang-date .yr{ font-size:12.5px; color:var(--chromeMuted); margin-top:2px; } .pagang-body{ padding:38px 42px; display:flex; flex-direction:column; justify-content:center; } .pagang-body .k{ font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--acc); } .pagang-body h3{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:42px; line-height:1.02; color:var(--chromeStrong); margin:10px 0 0; } .pagang-meta{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:16px; } .pagang-meta .tid{ font-size:13.5px; font-weight:600; letter-spacing:.06em; color:var(--chromeSoft); } .pagang-meta .plats{ font-size:13.5px; color:var(--chromeMuted); } .pagang-body .desc{ font-size:15.5px; line-height:1.6; color:var(--chromeSoft); max-width:560px; margin:16px 0 0; } .pagang-list{ margin-top:14px; border-top:1px solid var(--line); } .pagang-row{ display:grid; grid-template-columns:76px 1fr auto; gap:22px; align-items:center; padding:17px 4px; border-bottom:1px solid var(--line); } .pagang-row .pl-date{ text-align:center; } .pagang-row .pl-day{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:30px; line-height:1; color:var(--chromeStrong); } .pagang-row .pl-mo{ font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--chromeMuted); margin-top:3px; } .pagang-row .pl-mid .k{ font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); margin-bottom:4px; } .pagang-row .pl-mid a.k-link{ display:block; text-decoration:none; } .pagang-row .pl-mid a.k-link:hover{ text-decoration:underline; } .pagang-row .pl-mid .title{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:21px; line-height:1.08; color:var(--chromeStrong); } .pagang-row .pl-right{ text-align:right; display:flex; flex-direction:column; gap:3px; } .pagang-row .pl-right .tid{ font-size:13px; font-weight:600; color:var(--chromeSoft); white-space:nowrap; } .pagang-row .pl-right .plats{ font-size:12.5px; color:var(--chromeMuted); white-space:nowrap; } /* mobil: den fasta 210px-datumkolumnen + stor rubrik klämde ihop body-kolumnen till ~50px → texten spillde över och klipptes av overflow:hidden. Stapla i stället kortet (datum som kompakt rad överst, matchinfo i full bredd under). */ @media(max-width:600px){ .pagang-next{ grid-template-columns:1fr; } .pagang-date{ flex-direction:row; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:4px 12px; padding:18px 22px; border-right:none; border-bottom:1px solid var(--line); } .pagang-date .day{ font-size:40px; margin:0; } .pagang-body{ padding:24px 22px 28px; } .pagang-body h3{ font-size:30px; } .pagang-body .desc{ font-size:14.5px; } } /* ---- om: bio ---- */ .bio{ display:grid; grid-template-columns:380px 1fr; gap:64px; align-items:start; } .bio .portrait{ width:100%; max-width:380px; height:480px; border-radius:4px; overflow:hidden; background:var(--tileBg); } .bio .portrait img{ width:100%; height:100%; object-fit:cover; } .bio .pcap{ margin-top:18px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--chromeMuted); } .bio .lead{ font-size:clamp(21px,2.4vw,26px); line-height:1.5; font-weight:500; color:var(--chromeStrong); margin:0 0 30px; } .bio p{ font-size:clamp(16px,1.4vw,18px); line-height:1.8; color:var(--chromeSoft); margin:0 0 22px; } .bio .actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; } /* ---- kontakt ---- */ .contact-head{ padding:clamp(48px,7vw,80px) var(--gutter) clamp(34px,5vw,40px); max-width:var(--maxw); margin:0 auto; border-bottom:1px solid var(--line); } .contact-head h1{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; line-height:.96; letter-spacing:-.01em; color:var(--chromeStrong); font-size:clamp(40px,6vw,78px); margin:16px 0 0; max-width:900px; } .contact-head p{ font-size:clamp(16px,1.6vw,19px); line-height:1.6; color:var(--chromeSoft); max-width:600px; margin:18px 0 0; } .contact-grid{ display:grid; grid-template-columns:340px 1fr; gap:72px; align-items:start; } .contact-details .row{ margin-bottom:30px; } .contact-details .lab{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--chromeMuted); margin-bottom:8px; } .contact-details .val{ font-size:19px; color:var(--chromeStrong); } .contact-details a{ color:inherit; text-decoration:none; } .contact-details a:hover{ color:var(--acc); } .form-card{ background:var(--card); border:1px solid var(--line); border-radius:4px; padding:clamp(24px,4vw,44px); } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .field-group{ margin-top:20px; } .field-group:first-child{ margin-top:0; } .form-row .field-group{ margin-top:0; } label.fl{ display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--chromeMuted); margin-bottom:9px; } .field{ width:100%; padding:13px 15px; font:400 16px/1.4 'Saira'; color:var(--chromeStrong); background:var(--bg); border:1px solid var(--line); border-radius:3px; } .field:focus{ outline:none; border-color:var(--acc); } textarea.field{ resize:vertical; } .form-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:26px; flex-wrap:wrap; } .form-foot.form-foot-end{ justify-content:flex-end; } .form-foot .note{ font-size:13px; color:var(--chromeMuted); } /* ---- footer ---- */ .site-footer{ border-top:1px solid var(--line); background:var(--footerBg); padding:54px var(--gutter) 46px; } .footer-in{ max-width:var(--maxw); margin:0 auto; } .footer-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px; flex-wrap:wrap; } .footer-brand{ display:flex; align-items:center; gap:13px; } .footer-brand img{ height:52px; width:auto; } .footer-brand .bname{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:600; font-size:24px; letter-spacing:.04em; color:var(--wordmark,var(--chromeStrong)); line-height:1; } .footer-brand .burl{ font-size:11px; letter-spacing:.3em; color:var(--acc); margin-top:4px; } .footer-cols{ display:flex; gap:60px; flex-wrap:wrap; } .footer-cols .ch{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--chromeMuted); margin-bottom:14px; } .footer-cols a, .footer-cols div.li{ display:block; font-size:14px; color:var(--chromeSoft); margin-bottom:9px; text-decoration:none; } .footer-cols a:hover{ color:var(--acc); } .footer-legal{ margin-top:40px; padding-top:22px; border-top:1px solid var(--line); font-size:12.5px; color:var(--chromeMuted); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; } /* V2-01: byggstämpeln — dämpad, för Stigs deploy-koll, inte för besökaren. */ .footer-legal .bygge{ font-size:11px; opacity:.55; font-variant-numeric:tabular-nums; } /* ---- responsivt ---- */ @media(max-width:1000px){ .series-cards{ grid-template-columns:1fr; } .bio{ grid-template-columns:1fr; gap:32px; } .bio .portrait{ max-width:none; height:clamp(320px,60vw,460px); } .contact-grid{ grid-template-columns:1fr; gap:36px; } .masonry{ column-count:2; } .tile-grid-4{ grid-template-columns:repeat(2,1fr); } .match-cards{ grid-template-columns:1fr 1fr; } } @media(max-width:680px){ .header-right{ gap:14px; } .nav{ display:none; } .nav.open{ display:flex; position:absolute; top:84px; left:0; right:0; flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:8px var(--gutter) 16px; } .nav.open a{ padding:12px 0; border-bottom:none; } .menu-btn{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:38px; border:1px solid var(--line); border-radius:6px; background:none; color:var(--chromeStrong); cursor:pointer; } .masonry{ column-count:1; } .tile-grid-4, .tile-grid-3, .match-cards{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } .brand .bname{ font-size:20px; } } /* ============================================================ Artikel / foto-essä (blogg + matchreferat) Läsbar centrerad textkolumn, bredare bilder för rytm. ============================================================ */ .hero .hero-dates{ margin-top:14px; font-style:italic; font-size:clamp(16px,1.6vw,20px); color:rgba(255,255,255,.85); } .article{ max-width:1080px; margin:0 auto; padding:clamp(40px,6vw,72px) var(--gutter) clamp(60px,9vw,100px); } .article .col{ max-width:760px; margin-left:auto; margin-right:auto; } .article .lede p{ font:500 clamp(20px,2.2vw,25px)/1.5 'Saira'; color:var(--chromeStrong); max-width:760px; margin:0 auto 1.8rem; } .article p{ font:400 clamp(16px,1.25vw,18px)/1.8 'Saira'; color:var(--chromeSoft); max-width:760px; margin:0 auto 1.4rem; } .article a{ color:var(--acc); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--acc) 40%,transparent); } .article a:hover{ border-bottom-color:var(--acc); } .article .day-no{ display:block; max-width:760px; margin:3.4rem auto .4rem; font:600 13px/1 'Saira'; letter-spacing:.26em; text-transform:uppercase; color:var(--acc); } .article h2{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; letter-spacing:-.01em; color:var(--chromeStrong); font-size:clamp(28px,3.4vw,40px); line-height:1.04; max-width:760px; margin:.2rem auto 1.2rem; } .article .day-no + h2{ margin-top:.2rem; } .article .tips{ max-width:760px; margin:1.8rem auto; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--acc); border-radius:4px; padding:1.2rem 1.4rem; font:400 15px/1.65 'Saira'; color:var(--chromeSoft); } .article .tips strong{ color:var(--acc); font-weight:600; letter-spacing:.02em; } /* bilder — bredare än texten, full artikelbredd */ .article figure{ margin:2.6rem 0; } .article figure img{ width:100%; height:auto; display:block; border-radius:4px; } .article figcaption{ max-width:760px; margin:.7rem auto 0; font:400 13px/1.5 'Saira'; letter-spacing:.01em; color:var(--acc); } .fig-grid{ display:grid; gap:14px; margin:2.6rem 0; align-items:start; } .fig-grid.two{ grid-template-columns:1fr 1fr; } .fig-grid.three{ grid-template-columns:repeat(3,1fr); } /* Behåll bildernas naturliga proportion — aldrig beskära galleribilder (porträtt tvingades tidigare in i 3:2 liggande med object-fit:cover → topp/botten kapades). */ .fig-grid img{ width:100%; height:auto; display:block; border-radius:4px; } .fig-grid figcaption{ grid-column:1 / -1; } /* mat-lista */ .foodlist{ max-width:760px; margin:1.4rem auto 0; } .food-item{ padding:1.3rem 0; border-top:1px solid var(--line); } .food-item:last-child{ border-bottom:1px solid var(--line); } .food-item .rating{ float:right; font:600 .78rem/1 'Saira'; letter-spacing:.08em; color:var(--acc); margin-top:.4rem; } .food-item h3{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:1.4rem; color:var(--chromeStrong); margin:0 0 .3rem; } .food-item h3 a{ border:none; color:var(--chromeStrong); } .food-item h3 a:hover{ color:var(--acc); } .food-item p{ margin:0; font-size:.98rem; } .food-item .maplink{ font-size:.92rem; } .article .signoff{ max-width:760px; margin:3.4rem auto 0; padding-top:2.2rem; border-top:1px solid var(--line); font-family:'Saira Condensed','Saira',sans-serif; font-style:italic; font-size:1.3rem; color:var(--acc); } .article .backlink{ max-width:760px; margin:2.4rem auto 0; } .article .backlink a{ font-size:.95rem; color:var(--acc); text-decoration:none; border:none; } @media(max-width:680px){ .fig-grid.two, .fig-grid.three, .fig-grid.four{ grid-template-columns:1fr; } } @media(max-width:1000px){ .fig-grid.four{ grid-template-columns:repeat(2,1fr); } } .fig-grid.four{ grid-template-columns:repeat(4,1fr); } /* h3, blockquote, pair-item i artikel */ .article h3{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:clamp(21px,2.2vw,27px); letter-spacing:-.01em; color:var(--chromeStrong); line-height:1.1; max-width:760px; margin:2.2rem auto .9rem; } .article blockquote{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:600; font-size:clamp(21px,2.4vw,30px); color:var(--chromeStrong); border-left:3px solid var(--acc); padding-left:28px; max-width:760px; margin:2.5rem auto; line-height:1.45; } .pair-item{ max-width:760px; margin:0 auto; padding:.9rem 0; border-top:1px solid var(--line); font-size:clamp(15px,1.2vw,17px); color:var(--chromeSoft); line-height:1.65; } .pair-item strong{ color:var(--chromeStrong); font-weight:600; } /* journal-grid: tre mini-kort under featured (Landskap) */ .journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; } @media(max-width:1000px){ .journal-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:680px){ .journal-grid{ grid-template-columns:1fr; } } .j-mini{ display:block; border-radius:4px; overflow:hidden; background:var(--card); border:1px solid var(--line); text-decoration:none; color:inherit; transition:transform .4s cubic-bezier(.2,.7,.2,1); } .j-mini:hover{ transform:translateY(-4px); } .j-mini .jm-img{ overflow:hidden; height:220px; } .j-mini .jm-img img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1); } .j-mini:hover .jm-img img{ transform:scale(1.05); } .j-mini .jm-body{ padding:clamp(16px,2vw,22px); } .j-mini .jm-k{ display:block; font:600 11px/1 'Saira'; letter-spacing:.26em; text-transform:uppercase; color:var(--acc); } .j-mini .jm-title{ display:block; font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:clamp(19px,2vw,25px); color:var(--chromeStrong); margin:8px 0 0; line-height:1.1; } .j-mini .jm-dates{ display:block; font-style:italic; color:var(--chromeMuted); margin-top:6px; font-size:14px; } .j-mini .jm-desc{ display:block; font:400 14px/1.65 'Saira'; color:var(--chromeSoft); margin:10px 0 0; } /* ---- journal-kort (puff på start + under respektive område) ---- */ .journal-card{ display:grid; grid-template-columns:1.15fr 1fr; border-radius:4px; overflow:hidden; background:var(--card); border:1px solid var(--line); text-decoration:none; color:inherit; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; } .journal-card:hover{ transform:translateY(-3px); } .journal-card .jc-img{ position:relative; overflow:hidden; min-height:280px; } .journal-card .jc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1); } .journal-card:hover .jc-img img{ transform:scale(1.04); } .journal-card .jc-body{ align-self:center; padding:clamp(26px,4vw,48px); } .journal-card .jc-k{ display:block; font:600 12px/1 'Saira'; letter-spacing:.26em; text-transform:uppercase; color:var(--acc); } .journal-card .jc-title{ display:block; font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; line-height:1; letter-spacing:-.01em; color:var(--chromeStrong); font-size:clamp(28px,3.4vw,42px); margin:12px 0 0; } .journal-card .jc-dates{ display:block; font-style:italic; color:var(--chromeMuted); margin-top:8px; font-size:15px; } .journal-card .jc-desc{ display:block; font:400 16px/1.7 'Saira'; color:var(--chromeSoft); margin:14px 0 0; max-width:46ch; } .journal-card .jc-go{ display:inline-block; margin-top:20px; font:600 14px/1 'Saira'; letter-spacing:.04em; color:var(--acc); } @media(max-width:760px){ .journal-card{ grid-template-columns:1fr; } .journal-card .jc-img{ min-height:220px; } } /* ---- journal-compact: radlista under kortlistan (Landskap) ---- */ .journal-compact{ margin-top:12px; border-top:1px solid var(--line); } .jco-row{ display:grid; grid-template-columns:96px 1fr auto; gap:16px; align-items:center; padding:18px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; transition:opacity .2s; } .jco-row:hover{ opacity:.7; } .jco-img{ width:96px; height:64px; border-radius:3px; overflow:hidden; flex-shrink:0; } .jco-img img{ width:100%; height:100%; object-fit:cover; } .jco-k{ display:block; font:600 10.5px/1 'Saira'; letter-spacing:.24em; text-transform:uppercase; color:var(--acc); margin-bottom:5px; } .jco-title{ display:block; font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:21px; line-height:1.08; color:var(--chromeStrong); } .jco-right{ text-align:right; white-space:nowrap; } .jco-date{ display:block; font-style:italic; font-size:13px; color:var(--chromeMuted); margin-bottom:4px; } .jco-arr{ color:var(--acc); font-size:16px; } /* ---- höjdpunkt-bildtext (Sport & Blog, masonry) ---- */ .hl-cap{ font-size:12.5px; font-style:italic; color:var(--chromeMuted); padding:8px 2px 0; } /* ---- Event: filterchips ---- */ .event-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; } .chip{ font:600 12.5px/1 'Saira'; letter-spacing:.1em; text-transform:uppercase; padding:9px 18px; border-radius:999px; cursor:pointer; border:1px solid var(--line); color:var(--chromeSoft); background:none; transition:.2s; } .chip:hover{ border-color:var(--acc); color:var(--acc); } .chip.on{ border-color:var(--acc); background:var(--acc); color:#fff; } /* ---- Event: kortrutnät (index) ---- */ .event-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .event-card{ display:block; text-decoration:none; color:inherit; cursor:pointer; } .event-cover{ position:relative; height:320px; } .event-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(8,10,13,.5),rgba(8,10,13,0) 55%); } .event-badge{ position:absolute; left:18px; top:16px; z-index:1; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:color-mix(in srgb, var(--acc) 90%, transparent); padding:5px 11px; border-radius:999px; } .event-card-body{ padding:16px 2px 0; } .event-card-body h3{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:26px; line-height:1.04; color:var(--chromeStrong); margin:0; } .event-card-meta{ font-size:13px; color:var(--chromeMuted); margin-top:6px; } .event-card-body p{ font-size:14px; line-height:1.55; color:var(--chromeSoft); margin:10px 0 0; } .event-card-cta{ margin-top:12px; font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--acc); } /* ---- Event: detaljsida ---- */ .event-back{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--hero-acc); text-decoration:none; margin-bottom:16px; } .event-back span{ font-size:15px; line-height:1; } .event-intro-grid{ display:grid; grid-template-columns:1fr 300px; gap:64px; align-items:start; } .event-lede{ font-size:clamp(19px,2vw,26px); line-height:1.5; font-weight:500; color:var(--chromeStrong); margin:0; max-width:760px; text-wrap:pretty; } .event-facts{ font-size:14px; } .event-facts .ef-k{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--chromeMuted); margin-bottom:8px; } .event-facts .ef-kund{ font-family:'Saira Condensed','Saira',sans-serif; font-weight:700; font-size:26px; color:var(--chromeStrong); line-height:1.1; } .event-facts .ef-plats{ color:var(--chromeSoft); margin-top:8px; } .event-facts .ef-datum{ color:var(--chromeMuted); margin-top:2px; } .event-pixieset{ margin-top:20px; } .event-allback{ display:inline-flex; align-items:center; gap:9px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); text-decoration:none; } .event-allback span{ font-size:16px; line-height:1; } @media(max-width:1000px){ .event-grid{ grid-template-columns:1fr 1fr; } .event-intro-grid{ grid-template-columns:1fr; gap:24px; } } @media(max-width:680px){ .event-grid{ grid-template-columns:1fr; } }