/* ========================================================================== Pixel Golf: egen stil ovanpå Bootstrap 5 Paletten kommer från Pixel Golfs befintliga profil: mörkgrönt (#1e3c33), cream (#f1ede3) och orange (#dc6f34). De tre färgerna byter roll mellan lägena i stället för att bytas ut: Mörkt läge cream som text mot nästan svart grönt Ljust läge cream som bakgrund mot nästan svart grönt som text Mörkt läge är standard. Ljust läge aktiveras genom att data-theme="light" sätts på , vilket servern gör utifrån en kaka (se filters.py). Alla färger går via variabler, så temabytet är bara ett byte av värden. Innehåll 1. Designtoken 2. Bas och typografi 3. Navigation och temaväxlare 4. Knappar och länkar 5. Hero 6. Sidhuvuden och sektioner 7. Kort och paneler 8. Priser och öppettider 9. Tävlingar 10. Nyheter 11. Banor 12. Formulär 13. Administration 14. Tomma lägen, flash och sidfot 15. Hjälpklasser 16. Responsivt ========================================================================== */ /* -------------------------------------------------------------------------- 1. Designtoken -------------------------------------------------------------------------- */ :root { /* Varumärkets tre färger */ --pg-orange: #dc6f34; --pg-orange-light: #f08c52; --pg-orange-dark: #b8551f; --pg-orange-soft: rgba(220, 111, 52, .14); --pg-green: #1e3c33; --pg-cream: #f1ede3; /* Mörkt läge, standard. Bakgrunderna är nästan svarta men med en grön ton, så att de hör ihop med varumärkets gröna i stället för att bara vara grå. */ --pg-bg: #080d0c; --pg-bg-alt: #0d1513; --pg-surface: #111c19; --pg-surface-2: #17251f; --pg-surface-3: #1f3229; --pg-border: rgba(241, 237, 227, .12); --pg-border-strong: rgba(241, 237, 227, .24); --pg-text: #f1ede3; --pg-text-muted: #a6ada4; --pg-text-faint: #7b847c; --pg-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --pg-shadow: 0 4px 14px rgba(0, 0, 0, .45); --pg-shadow-lg: 0 18px 50px -18px rgba(0, 0, 0, .8); /* Struktur */ --pg-radius: 12px; --pg-radius-lg: 18px; --pg-radius-sm: 8px; /* Navigeringens höjd. Ligger som variabel eftersom både body och ankarlänkarnas scroll-margin behöver samma värde. */ --pg-nav-height: 62px; --pg-nav-bg: #0d1513; --pg-nav-border: rgba(241, 237, 227, .12); --pg-on-orange: #080d0c; /* Bootstrap-variabler som ska följa temat */ --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --bs-body-color: var(--pg-text); --bs-body-bg: var(--pg-bg); --bs-emphasis-color: var(--pg-text); --bs-link-color: var(--pg-orange); --bs-link-hover-color: var(--pg-orange-light); --bs-border-color: var(--pg-border); --bs-border-radius: var(--pg-radius); --bs-secondary-color: var(--pg-text-muted); --pg-orange-text: var(--pg-orange); } /* Ljust läge. Cream som bakgrund i stället för vitt, eftersom det är varumärkets färg och för att en helvit sida bredvid det mörka läget känns som två olika sajter. Värdena är valda för kontrast: brödtext mot bakgrund ligger över 14:1 och dämpad text över 7:1. */ [data-theme="light"] { --pg-bg: #f1ede3; --pg-bg-alt: #e6e1d4; --pg-surface: #fffdf8; --pg-surface-2: #f7f4ea; --pg-surface-3: #e9e4d6; --pg-border: rgba(13, 26, 22, .16); --pg-border-strong: rgba(13, 26, 22, .38); --pg-text: #0d1a16; --pg-text-muted: #414f49; --pg-text-faint: #5c6a63; /* Orange mot cream behöver mörkare ton för att bli läsbar som text. */ --pg-orange-text: #a34c19; --pg-shadow-sm: 0 1px 3px rgba(13, 26, 22, .1); --pg-shadow: 0 4px 16px rgba(13, 26, 22, .12); --pg-shadow-lg: 0 18px 50px -20px rgba(13, 26, 22, .28); --pg-nav-bg: #fffdf8; --pg-nav-border: rgba(13, 26, 22, .14); --bs-link-color: #a34c19; --bs-link-hover-color: var(--pg-orange-dark); } /* Bootstrap 5.3 färgar länkar med --bs-link-color-rgb, inte --bs-link-color, och sätter egna blå värden under [data-bs-theme="dark"]. Utan de här raderna blev varje vanlig länk blå i mörkt läge. html[...] väger tyngre än Bootstraps egen regel. */ html[data-theme="dark"] { --bs-link-color-rgb: 220, 111, 52; --bs-link-hover-color-rgb: 240, 140, 82; } html[data-theme="light"] { --bs-link-color-rgb: 163, 76, 25; --bs-link-hover-color-rgb: 184, 85, 31; } /* Kort får en tydlig skugga i ljust läge, annars flyter de ihop med bakgrunden när ytorna ligger nära varandra i ljushet. */ [data-theme="light"] .pg-card, [data-theme="light"] .pg-price-card, [data-theme="light"] .pg-feature, [data-theme="light"] .pg-stat, [data-theme="light"] .pg-story-card, [data-theme="light"] .pg-read-card, [data-theme="light"] .pg-course-card, [data-theme="light"] .pg-lesson-card, [data-theme="light"] .pg-callout, [data-theme="light"] .pg-panel { box-shadow: var(--pg-shadow-sm); } /* Ifyllda orange ytor behåller varumärkets ton även i ljust läge, men går ett steg mörkare så att vit text ovanpå blir läsbar. */ [data-theme="light"] .btn-accent, [data-theme="light"] .pg-badge-accent, [data-theme="light"] .pg-step-number, [data-theme="light"] .pg-theme-btn[aria-pressed="true"], [data-theme="light"] .pg-dot-badge, [data-theme="light"] .pg-feature-icon, [data-theme="light"] .pg-price-card.is-featured .pg-price-flag { background: var(--pg-orange-dark); border-color: var(--pg-orange-dark); color: #ffffff; } [data-theme="light"] .btn-accent:hover, [data-theme="light"] .btn-accent:focus { background: var(--pg-orange); border-color: var(--pg-orange); color: #ffffff; } /* -------------------------------------------------------------------------- 2. Bas och typografi -------------------------------------------------------------------------- */ /* touch-action: manipulation tar bort webbläsarens 300 ms väntan på en möjlig dubbeltryckning. Knappar på mobil känns trögare utan den. */ html { color-scheme: dark; touch-action: manipulation; } [data-theme="light"] { color-scheme: light; } body { background-color: var(--pg-bg); color: var(--pg-text); font-family: var(--bs-body-font-family); -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } /* Ljust läge får en varm glöd över hela sidan i stället för en platt cream yta. Utan den ser det ljusa läget ut som ett omålat utkast bredvid det mörka, som får sin rymd av att bakgrunden är nästan svart. Glöden är två mycket svaga toningar i varumärkets orange, lagda i hörnen. */ [data-theme="light"] body { background: radial-gradient(1100px 520px at 100% -8%, rgba(220, 111, 52, .12), transparent 55%), radial-gradient(760px 420px at -5% 105%, rgba(30, 60, 51, .08), transparent 52%), var(--pg-bg); } h1, h2, h3, .pg-display { font-family: "Barlow Condensed", "Inter", system-ui, sans-serif; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; color: var(--pg-text); } h4, h5, h6 { font-weight: 600; letter-spacing: -.005em; } .pg-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pg-orange-text); } .pg-lead { font-size: 1.09rem; line-height: 1.7; color: var(--pg-text-muted); } .pg-measure-sm { max-width: 34rem; } .pg-measure { max-width: 42rem; } .pg-measure-lg { max-width: 48rem; } .pg-meta-text { color: var(--pg-text-muted); font-size: .85rem; } .pg-note { color: var(--pg-text-muted); font-size: .92rem; line-height: 1.65; } .pg-orange { color: var(--pg-orange-text); } /* Löpande text som kommer från administrationen. Marginalerna sätts här i stället för i renderaren, så att formatet förblir ren HTML. */ .pg-prose p { line-height: 1.75; color: var(--pg-text-muted); margin-bottom: 1.1rem; } .pg-prose p:last-child { margin-bottom: 0; } .pg-prose strong { color: var(--pg-text); font-weight: 600; } .pg-prose ul { padding-left: 0; list-style: none; margin-bottom: 1.1rem; } .pg-prose ul:last-child { margin-bottom: 0; } .pg-prose li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; line-height: 1.65; color: var(--pg-text-muted); } /* Egen punkt i stället för listans standard, så att den kan färgas orange och ligga på rätt höjd mot första textraden. */ .pg-prose li::before { content: ""; position: absolute; left: .35rem; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--pg-orange); } .pg-prose a { text-decoration: underline; text-underline-offset: 2px; } /* Markerad text, orange fält med mörk text i båda lägena */ ::selection { background: var(--pg-orange); color: #080d0c; text-shadow: none; } ::-moz-selection { background: var(--pg-orange); color: #080d0c; text-shadow: none; } :focus-visible { outline: 3px solid var(--pg-orange); outline-offset: 2px; border-radius: 4px; } hr { border-color: var(--pg-border); opacity: 1; } /* Hoppa till innehållet: syns bara när den tabbas fram. */ .pg-skip-link { position: absolute; left: -9999px; z-index: 1080; padding: .75rem 1.25rem; background: var(--pg-orange); color: #ffffff; font-weight: 600; border-radius: 0 0 var(--pg-radius-sm) 0; } .pg-skip-link:focus { left: 0; top: 0; } /* -------------------------------------------------------------------------- 3. Navigation och temaväxlare -------------------------------------------------------------------------- */ .pg-site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1090; isolation: isolate; } .navbar.pg-navbar { position: relative; top: auto; left: auto; right: auto; z-index: 1; isolation: isolate; min-height: var(--pg-nav-height); background: var(--pg-nav-bg); border-bottom: 1px solid var(--pg-nav-border); padding-block: .6rem; box-shadow: 0 8px 32px rgba(0, 0, 0, .35); } [data-theme="light"] .navbar.pg-navbar { box-shadow: 0 8px 32px rgba(13, 26, 22, .08), 0 0 48px rgba(220, 111, 52, .1); } [id] { scroll-margin-top: calc(var(--pg-nav-height) + 1rem); } .navbar-brand { padding-block: 0; } .pg-brand-logo { height: 38px; width: auto; display: block; } .pg-only-dark { display: block; } .pg-only-light { display: none; } [data-theme="light"] .pg-only-dark { display: none; } [data-theme="light"] .pg-only-light { display: block; } .pg-navbar .nav-link { color: var(--pg-text-muted); font-weight: 600; font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; padding-inline: .8rem; border-radius: var(--pg-radius-sm); transition: color .15s ease; } .pg-navbar .nav-link:hover, .pg-navbar .nav-link:focus { color: var(--pg-text); background: transparent; } .pg-navbar .nav-link.is-active { color: var(--pg-orange-text); } .pg-navbar .dropdown-menu { background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius); box-shadow: var(--pg-shadow); padding: .4rem; z-index: 1085; } .pg-navbar .dropdown-item { color: var(--pg-text); border-radius: var(--pg-radius-sm); font-weight: 500; padding: .5rem .75rem; } .pg-navbar .dropdown-item:hover, .pg-navbar .dropdown-item:focus { background: var(--pg-surface-3); color: var(--pg-text); } .pg-navbar .dropdown-item.is-active { color: var(--pg-orange-text); } .dropdown-divider { border-color: var(--pg-border); } .dropdown-header { color: var(--pg-text-faint); font-size: .78rem; } body.pg-menu-open .pg-site-header, body:has(.pg-navbar .dropdown-menu.show) .pg-site-header { z-index: 1090; } body.pg-menu-open .navbar.pg-navbar, body:has(.pg-navbar .dropdown-menu.show) .navbar.pg-navbar { background: var(--pg-nav-bg); box-shadow: 0 8px 32px rgba(0, 0, 0, .35); } [data-theme="light"] body.pg-menu-open .navbar.pg-navbar, [data-theme="light"] body:has(.pg-navbar .dropdown-menu.show) .navbar.pg-navbar { box-shadow: 0 8px 32px rgba(13, 26, 22, .08), 0 0 48px rgba(220, 111, 52, .1); } .pg-menu-btn { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--pg-border); border-radius: 12px; background: var(--pg-surface-2); color: var(--pg-orange); font-size: 1.35rem; } .navbar-toggler { border-color: var(--pg-border); padding: .35rem .55rem; } .navbar-toggler:focus { box-shadow: none; outline: 3px solid var(--pg-orange); } .pg-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pg-surface-3); border: 1px solid var(--pg-border); color: var(--pg-text); font-size: .76rem; font-weight: 700; } .pg-dot-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding-inline: 5px; margin-left: .35rem; border-radius: 9px; background: var(--pg-orange); color: var(--pg-on-orange); font-size: .68rem; font-weight: 700; line-height: 18px; } .pg-theme-toggle { display: inline-flex; align-items: center; } .pg-theme-toggle-menu { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .35rem 1.1rem; width: 100%; } .pg-theme-label { font-size: .92rem; color: var(--pg-text); } .pg-theme-pill { display: inline-flex; align-items: center; gap: .15rem; padding: .2rem; border: 1px solid var(--pg-border); border-radius: 999px; background: var(--pg-surface-2); cursor: pointer; } .pg-theme-btn { display: grid; place-items: center; width: 30px; height: 26px; border: 0; border-radius: 999px; background: transparent; color: var(--pg-text-faint); font-size: .8rem; cursor: pointer; pointer-events: none; transition: background-color .15s ease, color .15s ease; } .pg-theme-btn:hover { color: var(--pg-text); } .pg-theme-btn[aria-pressed="true"] { background: var(--pg-orange); color: var(--pg-on-orange); } /* -------------------------------------------------------------------------- 4. Knappar och länkar -------------------------------------------------------------------------- */ .btn { --bs-btn-font-weight: 700; border-radius: var(--pg-radius-sm); padding: .62rem 1.3rem; font-size: .92rem; letter-spacing: .03em; transition: transform .12s ease, background-color .15s ease, border-color .15s ease; } .btn:active { transform: translateY(1px); } .btn-accent { background: var(--pg-orange); border: 1px solid var(--pg-orange); color: var(--pg-on-orange); } .btn-accent:hover, .btn-accent:focus { background: var(--pg-orange-light); border-color: var(--pg-orange-light); color: var(--pg-on-orange); } .btn-outline-soft, .btn-ghost { background: transparent; border: 1.5px solid var(--pg-border-strong); color: var(--pg-text); } .btn-outline-soft:hover, .btn-outline-soft:focus, .btn-ghost:hover, .btn-ghost:focus { background: var(--pg-surface-2); border-color: var(--pg-border-strong); color: var(--pg-text); } .btn-lg { padding: .85rem 1.8rem; font-size: 1rem; } .btn-sm { padding: .35rem .8rem; font-size: .82rem; } .pg-icon-link { color: var(--pg-text-faint); text-decoration: none; transition: color .15s ease; } .pg-icon-link:hover, .pg-icon-link:focus { color: var(--pg-orange-text); } .pg-arrow-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; color: var(--pg-orange-text); } .pg-arrow-link i { transition: transform .15s ease; } .pg-arrow-link:hover i { transform: translateX(3px); } /* -------------------------------------------------------------------------- 5. Hero -------------------------------------------------------------------------- */ .pg-hero { position: relative; overflow: hidden; background: var(--pg-bg); padding-block: clamp(3rem, 8vw, 6rem); padding-top: calc(clamp(3rem, 8vw, 6rem) + var(--pg-nav-height)); border-bottom: 1px solid var(--pg-border); } /* Diagonal glöd bakom innehållet: orange uppe till höger, grönt nere till vänster. Ren CSS, så den kostar ingen bild och ser likadan ut oavsett skärmbredd. */ .pg-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 500px at 88% 0%, rgba(220, 111, 52, .2), transparent 60%), radial-gradient(700px 460px at 0% 100%, rgba(30, 60, 51, .55), transparent 62%); pointer-events: none; } /* Ljust läge behöver kraftigare toningar, inte svagare. Mot cream syns en toning på 12 % knappt alls, medan samma värde mot nästan svart läser som en tydlig ljusfläck. */ [data-theme="light"] .pg-hero::before { background: radial-gradient(900px 500px at 88% 0%, rgba(220, 111, 52, .26), transparent 58%), radial-gradient(700px 420px at 0% 100%, rgba(30, 60, 51, .16), transparent 58%), radial-gradient(500px 300px at 50% 40%, rgba(220, 111, 52, .07), transparent 65%); } .pg-hero > .container { position: relative; z-index: 1; } .pg-hero h1, .pg-hero-title { font-size: clamp(2.4rem, 5.6vw, 4.1rem); line-height: 1.02; margin-bottom: 1.15rem; } .pg-hero h1 em, .pg-hero-title em { font-style: normal; color: var(--pg-orange-text); } .pg-hero-text { font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.7; color: var(--pg-text-muted); margin-bottom: 0; max-width: 36rem; } .pg-hero-points { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .65rem; } .pg-hero-points li { display: flex; align-items: flex-start; gap: .65rem; color: var(--pg-text); font-size: .97rem; line-height: 1.55; } .pg-hero-points i { color: var(--pg-orange); margin-top: .2rem; flex: none; } .pg-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; } /* Bildrutan bredvid texten. Utan riktig bild visas en ritad platshållare med varumärkets färger i stället för ett tomt hål. */ .pg-hero-media { position: relative; border-radius: var(--pg-radius-lg); overflow: hidden; border: 1px solid var(--pg-border); background: linear-gradient(150deg, var(--pg-green), var(--pg-surface)); aspect-ratio: 4 / 3; box-shadow: var(--pg-shadow-lg); } .pg-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .pg-hero-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; height: 100%; color: rgba(241, 237, 227, .6); text-align: center; padding: 2rem; } .pg-hero-placeholder i { font-size: 2.6rem; color: var(--pg-orange); } /* Snabbfakta under hero, samma rytm som Strandbergs trygghetsremsa. */ .pg-quickbar { background: var(--pg-bg-alt); border-bottom: 1px solid var(--pg-border); padding-block: 1.15rem; } .pg-quickbar-item { display: flex; align-items: center; justify-content: center; gap: .55rem; text-decoration: none; color: var(--pg-text-muted); font-size: .88rem; font-weight: 500; text-align: center; min-height: 100%; padding: .15rem .25rem; transition: color .15s ease; } a.pg-quickbar-item:hover { color: var(--pg-text); } .pg-quickbar-item i { font-size: 1.05rem; color: var(--pg-orange); flex-shrink: 0; } /* -------------------------------------------------------------------------- 6. Sidhuvuden och sektioner -------------------------------------------------------------------------- */ .pg-page-header { background: var(--pg-bg-alt); border-bottom: 1px solid var(--pg-border); padding-block: clamp(2rem, 5vw, 3rem); padding-top: calc(clamp(2rem, 5vw, 3rem) + var(--pg-nav-height)); margin-bottom: 2rem; } .pg-page-title { font-size: clamp(1.8rem, 3.8vw, 2.7rem); margin-bottom: .4rem; } .pg-page-subtitle { color: var(--pg-text-muted); margin-bottom: 0; max-width: 46rem; } .pg-section { padding-block: clamp(3rem, 7vw, 5.5rem); } main > .pg-section:first-child { padding-top: calc(clamp(3rem, 7vw, 5.5rem) + var(--pg-nav-height)); } .pg-section-alt { background: var(--pg-bg-alt); } .pg-section-title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin-bottom: .8rem; } .pg-section-head { margin-bottom: 2.25rem; } .pg-cta-band { background: var(--pg-bg-alt); border-block: 1px solid var(--pg-border); padding-block: clamp(3rem, 7vw, 5.5rem); text-align: center; } .pg-cta-band, .pg-cta-band h2 { color: var(--pg-text); } .pg-cta-band p { color: var(--pg-text-muted); margin-inline: auto; } /* -------------------------------------------------------------------------- 7. Kort och paneler -------------------------------------------------------------------------- */ .pg-card, .pg-panel { background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-lg); padding: clamp(1.25rem, 3vw, 1.85rem); } .pg-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } /* Tre säljande punkter på startsidan. */ .pg-feature { position: relative; height: 100%; background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-lg); padding: 1.8rem 1.6rem; transition: border-color .18s ease, transform .18s ease; } .pg-feature:hover { border-color: var(--pg-orange); transform: translateY(-3px); } .pg-feature-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--pg-radius-sm); background: var(--pg-orange); color: var(--pg-on-orange); font-size: 1.2rem; margin-bottom: 1.1rem; flex: none; } .pg-feature h3 { font-size: 1.18rem; margin-bottom: .55rem; } .pg-feature p { color: var(--pg-text-muted); margin-bottom: 0; font-size: .94rem; line-height: 1.65; } /* Baren och serveringstillståndet: startsidans mittpunkt. Grön toning mot ytan, så att avsnittet sticker ut från korten runt omkring utan att byta färgskala. */ .pg-bar-panel { position: relative; border-radius: var(--pg-radius-lg); border: 1px solid var(--pg-border); border-top: 3px solid var(--pg-orange); background: radial-gradient(120% 90% at 0% 0%, rgba(220, 111, 52, .16), transparent 55%), linear-gradient(150deg, rgba(30, 60, 51, .85), var(--pg-surface) 75%); padding: clamp(1.75rem, 5vw, 3.25rem); box-shadow: var(--pg-shadow-lg); } [data-theme="light"] .pg-bar-panel { background: radial-gradient(120% 90% at 0% 0%, rgba(220, 111, 52, .14), transparent 55%), linear-gradient(150deg, rgba(30, 60, 51, .14), var(--pg-surface) 75%); } .pg-bar-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: 999px; background: var(--pg-orange); color: var(--pg-on-orange); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .pg-bar-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; } .pg-bar-list li { display: flex; gap: 1rem; align-items: center; background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius); padding: 1rem 1.15rem; } .pg-bar-list h3 { font-size: 1.12rem; margin-bottom: .15rem; } .pg-bar-list p { color: var(--pg-text-muted); margin-bottom: 0; font-size: .93rem; line-height: 1.55; } /* Bildgalleri på nyheter och tävlingar. */ .pg-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; } .pg-gallery a { display: block; aspect-ratio: 4 / 3; border-radius: var(--pg-radius); overflow: hidden; border: 1px solid var(--pg-border); } .pg-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; } .pg-gallery a:hover img { transform: scale(1.04); } /* Bildväljaren i admin: miniatyrer med kryssruta. */ .pg-gallery-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; max-height: 320px; overflow-y: auto; padding: .15rem; } .pg-gallery-option { position: relative; display: block; border: 2px solid var(--pg-border); border-radius: var(--pg-radius-sm); overflow: hidden; cursor: pointer; font-size: .72rem; color: var(--pg-text-muted); } .pg-gallery-option img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .pg-gallery-option span { display: block; padding: .25rem .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pg-gallery-option input { position: absolute; top: .4rem; left: .4rem; width: 1.1rem; height: 1.1rem; accent-color: var(--pg-orange); } .pg-gallery-option:has(input:checked) { border-color: var(--pg-orange); } /* Tränarens foto bredvid presentationen. */ .pg-trainer-photo { border-radius: var(--pg-radius-lg); overflow: hidden; border: 1px solid var(--pg-border); aspect-ratio: 4 / 5; max-width: 300px; background: linear-gradient(150deg, var(--pg-green), var(--pg-surface)); } .pg-trainer-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Siffror på om-sidan. */ .pg-stat { text-align: center; background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-lg); padding: 1.5rem 1rem; height: 100%; } .pg-stat-value { font-family: "Barlow Condensed", sans-serif; font-size: 2.7rem; font-weight: 700; line-height: 1; color: var(--pg-orange-text); } .pg-stat-label { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pg-text-muted); margin-top: .5rem; margin-bottom: 0; } /* Numrerade steg. */ .pg-step { display: flex; gap: 1.1rem; margin-bottom: 1.75rem; } .pg-step:last-child { margin-bottom: 0; } .pg-step-number { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--pg-radius-sm); background: var(--pg-orange); color: var(--pg-on-orange); font-family: "Barlow Condensed", sans-serif; font-size: 1.5rem; font-weight: 700; } .pg-step h3 { font-size: 1.15rem; margin-bottom: .35rem; } .pg-step p { color: var(--pg-text-muted); line-height: 1.65; margin-bottom: 0; } /* Ruta som lyfter fram säsongen på startsidan. */ .pg-callout { background: var(--pg-surface); border: 1px solid var(--pg-border); border-left: 3px solid var(--pg-orange); border-radius: var(--pg-radius-lg); padding: clamp(1.6rem, 4vw, 2.5rem); } .pg-callout h2 { font-size: 1.35rem; margin-bottom: .5rem; } .pg-callout p { color: var(--pg-text-muted); margin-bottom: 0; line-height: 1.65; } .pg-badge-accent { display: inline-block; padding: .25rem .65rem; border-radius: 999px; background: var(--pg-orange); color: var(--pg-on-orange); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .pg-tag { display: inline-block; padding: .2rem .6rem; border-radius: 999px; background: var(--pg-surface-2); border: 1px solid var(--pg-border); color: var(--pg-text-muted); font-size: .78rem; font-weight: 500; } /* -------------------------------------------------------------------------- 8. Priser och öppettider -------------------------------------------------------------------------- */ .pg-price-card { background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-lg); overflow: hidden; } .pg-price-card-head { padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--pg-border); background: var(--pg-surface-2); } .pg-price-card-head h2, .pg-price-card-head h3 { font-size: 1.2rem; margin-bottom: 0; } .pg-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .95rem 1.4rem; border-bottom: 1px solid var(--pg-border); } .pg-price-row:last-child { border-bottom: 0; } .pg-price-row.is-featured { background: var(--pg-orange-soft); } .pg-price-label { font-weight: 600; } .pg-price-detail { display: block; font-size: .85rem; font-weight: 400; color: var(--pg-text-muted); margin-top: .15rem; } .pg-price-value { font-family: "Barlow Condensed", sans-serif; font-size: 1.5rem; font-weight: 700; white-space: nowrap; color: var(--pg-orange-text); } .pg-hours-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--pg-border); } .pg-hours-row:last-child { border-bottom: 0; } .pg-hours-label { font-weight: 600; } .pg-hours-value { font-family: "Barlow Condensed", sans-serif; font-size: 1.3rem; font-weight: 700; } /* -------------------------------------------------------------------------- 9. Tävlingar -------------------------------------------------------------------------- */ .pg-card-grid > [class*="col"] { display: flex; } .pg-card-grid > [class*="col"] > .pg-story-card { width: 100%; } .pg-story-card { display: flex; flex-direction: column; background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .18s ease, transform .18s ease; } .pg-story-card:hover { border-color: var(--pg-orange); transform: translateY(-3px); color: inherit; } .pg-story-card.is-finished { opacity: .72; } .pg-story-media { aspect-ratio: 16 / 9; background: var(--pg-surface-2); overflow: hidden; flex-shrink: 0; } .pg-story-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .pg-story-fallback { height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, rgba(220, 111, 52, .28), transparent 55%), linear-gradient(160deg, var(--pg-green), var(--pg-surface)); } .pg-story-fallback img { width: 58%; height: auto; object-fit: contain; opacity: .9; } .pg-story-body { padding: 1.25rem 1.35rem 1.35rem; display: flex; flex-direction: column; flex-grow: 1; gap: .35rem; } .pg-story-kicker { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pg-text-faint); font-weight: 700; margin: 0; min-height: 1.6rem; } .pg-story-title { font-size: 1.25rem; line-height: 1.25; margin: 0; min-height: 2.5em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .pg-story-summary { color: var(--pg-text-muted); line-height: 1.55; margin: 0 0 .75rem; min-height: 6.2em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .pg-story-body .pg-arrow-link { margin-top: auto; } .pg-comp-card { display: none; } .pg-status { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border: 1px solid transparent; } .pg-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .status-ongoing { color: #4ec97e; border-color: rgba(78, 201, 126, .4); background: rgba(78, 201, 126, .12); } .status-upcoming { color: var(--pg-orange-text); border-color: rgba(220, 111, 52, .4); background: var(--pg-orange-soft); } .status-finished { color: var(--pg-text-faint); border-color: var(--pg-border); background: var(--pg-surface-2); } [data-theme="light"] .status-ongoing { color: #1a7a45; } /* Deltävlingarna som en tidslinje. */ .pg-rounds { list-style: none; padding: 0; margin: 0; } .pg-round { position: relative; padding: 0 0 1.5rem 1.75rem; border-left: 2px solid var(--pg-border); } .pg-round:last-child { padding-bottom: 0; border-left-color: transparent; } .pg-round::before { content: ""; position: absolute; left: -7px; top: .3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--pg-orange); border: 3px solid var(--pg-bg); } .pg-round-name { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-text-faint); font-weight: 700; } .pg-round-course { font-weight: 600; font-size: 1.05rem; } .pg-round-dates { color: var(--pg-text-muted); font-size: .9rem; } .pg-round-result { margin-top: .25rem; font-weight: 600; } /* -------------------------------------------------------------------------- 10. Nyheter -------------------------------------------------------------------------- */ /* Enskilt inlägg och en enskild tävling, samlat i en ruta. */ .pg-read { max-width: 46rem; margin: 0 auto; } .pg-read-card { background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-lg); overflow: hidden; } .pg-read-hero { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; display: block; } .pg-read-body { padding: 1.75rem 1.75rem 2rem; } .pg-read-title { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.05; margin: 0 0 .75rem; } .pg-read-lead { font-size: 1.1rem; color: var(--pg-text-muted); margin-bottom: 1.25rem; } .pg-read-heading { font-size: 1.15rem; margin: 1.75rem 0 .75rem; } .pg-read-heading:first-child { margin-top: 0; } .pg-read-result, .pg-read-signup { margin-top: 1.75rem; padding: 1.25rem 1.25rem 1.35rem; border-radius: var(--pg-radius); background: var(--pg-surface-2); border: 1px solid var(--pg-border); } .pg-read-result .pg-read-heading, .pg-read-signup .pg-read-heading { margin-top: 0; } .pg-read .pg-gallery { margin-top: 1.75rem; } .pg-article { max-width: 44rem; } .pg-article-image { border-radius: var(--pg-radius-lg); overflow: hidden; margin-bottom: 2rem; border: 1px solid var(--pg-border); } .pg-article-image img { width: 100%; height: auto; display: block; } /* -------------------------------------------------------------------------- 11. Banor -------------------------------------------------------------------------- */ .pg-course-card { position: relative; border-radius: var(--pg-radius-lg); overflow: hidden; border: 1px solid var(--pg-border); aspect-ratio: 4 / 3; background: linear-gradient(150deg, var(--pg-green), var(--pg-surface)); } .pg-course-card img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Toning under texten, så att namnet är läsbart oavsett hur ljus bilden är. */ .pg-course-overlay { position: absolute; inset: auto 0 0 0; padding: 1.5rem 1.1rem .95rem; background: linear-gradient(to top, rgba(8, 13, 12, .92), transparent); color: var(--pg-cream); } .pg-course-name { font-size: 1.1rem; margin-bottom: .1rem; color: var(--pg-cream); } .pg-course-meta { font-size: .82rem; color: rgba(241, 237, 227, .75); } /* Bana utan bild: ett textkort med samma yta som övriga kort, inte en tom bildruta. Namnet står då på ytan i stället för på en toning. */ .pg-course-card.is-empty { aspect-ratio: auto; height: 100%; background: var(--pg-surface); padding: 1.35rem 1.25rem; } .pg-course-card.is-empty .pg-feature-icon { margin-bottom: .9rem; } .pg-course-card.is-empty .pg-course-overlay { position: static; padding: 0; background: none; } .pg-course-card.is-empty .pg-course-name { color: var(--pg-text); } .pg-course-card.is-empty .pg-course-meta { color: var(--pg-text-muted); } /* -------------------------------------------------------------------------- 12. Formulär -------------------------------------------------------------------------- */ .form-label { font-weight: 600; margin-bottom: .35rem; font-size: .93rem; } .form-control, .form-select { background: var(--pg-surface-2); border: 1px solid var(--pg-border); color: var(--pg-text); border-radius: var(--pg-radius-sm); padding: .6rem .8rem; } .form-control:focus, .form-select:focus { background: var(--pg-surface-2); border-color: var(--pg-orange); color: var(--pg-text); box-shadow: 0 0 0 3px var(--pg-orange-soft); } .form-control::placeholder { color: var(--pg-text-faint); } .form-control:disabled, .form-control[readonly] { background: var(--pg-surface-3); opacity: .7; } .form-text { color: var(--pg-text-faint); font-size: .84rem; } .invalid-feedback { color: #f2836b; font-size: .86rem; } [data-theme="light"] .invalid-feedback { color: #c0392b; } .form-control.is-invalid, .form-select.is-invalid { border-color: #f2836b; } .form-check-input { background-color: var(--pg-surface-2); border-color: var(--pg-border-strong); } .form-check-input:checked { background-color: var(--pg-orange); border-color: var(--pg-orange); } .form-check-input:focus { box-shadow: 0 0 0 3px var(--pg-orange-soft); border-color: var(--pg-orange); } .form-check-label { color: var(--pg-text-muted); } .input-group-text { background: var(--pg-surface-3); border-color: var(--pg-border); color: var(--pg-text-muted); } /* Lockbetet mot skräppostrobotar. Göms för människor men lämnas kvar i DOM:en, eftersom en robot letar efter fält och inte efter synlighet. aria-hidden och tabindex håller det borta från skärmläsare och tabbning. */ .pg-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Kontaktkortet bredvid formuläret. */ .pg-contact-item { display: flex; gap: .9rem; margin-bottom: 1.35rem; } .pg-contact-item:last-child { margin-bottom: 0; } .pg-contact-item i { font-size: 1.15rem; color: var(--pg-orange); margin-top: .15rem; } .pg-contact-label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-text-faint); font-weight: 700; } .pg-contact-value { font-weight: 600; } .pg-contact-value a { color: inherit; text-decoration: none; } .pg-contact-value a:hover { color: var(--pg-orange-text); } .pg-map { border: 1px solid var(--pg-border); border-radius: var(--pg-radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--pg-surface-2); } .pg-map iframe { width: 100%; height: 100%; border: 0; display: block; } /* -------------------------------------------------------------------------- 13. Administration -------------------------------------------------------------------------- */ .pg-admin { padding-block: 2rem 4rem; padding-top: calc(2rem + var(--pg-nav-height)); } .pg-admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; } .pg-admin-title { font-size: 1.9rem; margin-bottom: .3rem; } /* Sidomenyn i administrationen. */ .pg-admin-nav { position: sticky; top: 5rem; background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-lg); padding: .5rem; } .pg-admin-nav-group { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-text-faint); font-weight: 700; padding: .85rem .75rem .4rem; } .pg-admin-nav a { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; border-radius: var(--pg-radius-sm); color: var(--pg-text-muted); text-decoration: none; font-weight: 500; font-size: .93rem; } .pg-admin-nav a:hover { background: var(--pg-surface-2); color: var(--pg-text); } .pg-admin-nav a.is-active { background: var(--pg-orange-soft); color: var(--pg-orange-text); font-weight: 600; } .pg-admin-nav a i { width: 1.1rem; text-align: center; } /* Nyckeltalen på översikten. */ .pg-metric { background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-lg); padding: 1.25rem; height: 100%; text-decoration: none; color: inherit; display: block; transition: border-color .18s ease, transform .18s ease; } a.pg-metric:hover { border-color: var(--pg-orange); transform: translateY(-3px); color: inherit; } .pg-metric-value { font-family: "Barlow Condensed", sans-serif; font-size: 2.2rem; font-weight: 700; line-height: 1; } .pg-metric-label { color: var(--pg-text-muted); font-size: .88rem; margin-top: .35rem; } .pg-metric.is-alert .pg-metric-value { color: var(--pg-orange-text); } /* Tabeller i administrationen. */ .pg-table { width: 100%; margin-bottom: 0; } .pg-table th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pg-text-faint); font-weight: 700; padding: .75rem 1rem; border-bottom: 1px solid var(--pg-border); white-space: nowrap; } .pg-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--pg-border); vertical-align: middle; color: var(--pg-text); } .pg-table tr:last-child td { border-bottom: 0; } .pg-table tbody tr:hover { background: var(--pg-surface-2); } .pg-table .is-hidden-row td { opacity: .55; } .pg-table-wrap { background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius); overflow-x: auto; } /* Pilarna som flyttar en rad. Två små knappar i en grupp. */ .pg-sort-buttons { display: inline-flex; gap: .2rem; } .pg-sort-buttons button { border: 1px solid var(--pg-border); background: var(--pg-surface-2); color: var(--pg-text-muted); border-radius: var(--pg-radius-sm); width: 30px; height: 30px; line-height: 1; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .pg-sort-buttons button:hover { background: var(--pg-surface-3); color: var(--pg-text); } /* Markerar en text som ändrats från standardvärdet. */ .pg-changed-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pg-orange); margin-left: .4rem; vertical-align: middle; } /* Ett meddelande i inkorgen. */ .pg-message-row.is-unread { border-left: 3px solid var(--pg-orange); } .pg-message-row.is-unread .pg-message-name { font-weight: 700; } /* Bildbiblioteket. */ .pg-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } .pg-media-item { border: 1px solid var(--pg-border); border-radius: var(--pg-radius-sm); overflow: hidden; background: var(--pg-surface); } .pg-media-thumb { aspect-ratio: 4 / 3; background: var(--pg-surface-2); } .pg-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pg-media-info { padding: .6rem .7rem; font-size: .78rem; color: var(--pg-text-muted); } .pg-media-name { display: block; color: var(--pg-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Förhandsvisning av vald bild i ett formulär. */ .pg-image-preview { border: 1px solid var(--pg-border); border-radius: var(--pg-radius-sm); overflow: hidden; max-width: 220px; } .pg-image-preview img { width: 100%; height: auto; display: block; } /* Deltävlingsraderna i tävlingsformuläret. */ .pg-round-fields { background: var(--pg-surface-2); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-sm); padding: 1rem; margin-bottom: .75rem; } /* -------------------------------------------------------------------------- 14. Tomma lägen, flash och sidfot -------------------------------------------------------------------------- */ .pg-empty { text-align: center; padding: 3rem 1.5rem; border: 1px dashed var(--pg-border-strong); border-radius: var(--pg-radius-lg); background: var(--pg-surface); } .pg-empty-icon { font-size: 2.4rem; color: var(--pg-text-faint); margin-bottom: .85rem; display: block; } .pg-empty-text { color: var(--pg-text-muted); max-width: 30rem; margin-inline: auto; } .pg-toast-stack { position: fixed; top: calc(var(--pg-nav-height) + .75rem); left: 50%; transform: translateX(-50%); width: min(92vw, 480px); z-index: 1035; display: grid; gap: .55rem; pointer-events: none; } body.pg-menu-open .pg-toast-stack { display: none; } body:has(.pg-navbar .dropdown-menu.show) .pg-toast-stack { display: none; } .pg-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .65rem; padding: .85rem 1rem; border-radius: var(--pg-radius); border: 1px solid var(--pg-border); background: var(--pg-surface); box-shadow: var(--pg-shadow-lg); color: var(--pg-text); animation: pg-toast-in .28s ease both; } @keyframes pg-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .pg-toast i:first-child { color: var(--pg-orange); margin-top: .1rem; flex: none; } .pg-toast--success { border-left: 3px solid var(--pg-orange); background: var(--pg-orange-soft); } .pg-toast--danger { border-left: 3px solid #ff6b6b; background: rgba(255, 107, 107, .1); } .pg-toast--warning { border-left: 3px solid var(--pg-orange-dark); background: var(--pg-orange-soft); } .pg-toast--info { border-left: 3px solid var(--pg-border-strong); background: var(--pg-surface-2); } .pg-toast-close { border: 0; background: transparent; color: var(--pg-text-muted); padding: 0; line-height: 1; margin-left: auto; } .pg-flash-wrap { padding-top: 1.25rem; } .alert { border-radius: var(--pg-radius); border: 1px solid var(--pg-border); background: var(--pg-surface); color: var(--pg-text); } .alert-success { border-color: rgba(78, 201, 126, .45); background: rgba(78, 201, 126, .1); color: #4ec97e; } .alert-danger { border-color: rgba(242, 131, 107, .45); background: rgba(242, 131, 107, .1); color: #f2836b; } .alert-warning { border-color: rgba(220, 111, 52, .45); background: var(--pg-orange-soft); color: var(--pg-orange-text); } .alert-info { border-color: var(--pg-border-strong); background: var(--pg-surface-2); color: var(--pg-text); } /* Färgerna ovan är valda för att lysa mot en nästan svart bakgrund. Mot cream blir samma toner för svaga för att läsas som text, så de går ett par steg mörkare här. Bakgrund och kant behåller sin ljusare ton. */ [data-theme="light"] .alert-success { color: #14804a; } [data-theme="light"] .alert-danger { color: #b02a37; } .btn-close { filter: invert(1) grayscale(1) brightness(2); } [data-theme="light"] .btn-close { filter: none; } .pg-footer { background: var(--pg-bg-alt); border-top: 1px solid var(--pg-border); padding-block: 3rem 2rem; margin-top: 4rem; } .pg-footer-logo { height: 42px; width: auto; } .pg-footer-text { color: var(--pg-text-muted); line-height: 1.7; } .pg-footer-heading { color: var(--pg-orange-text); font-family: var(--bs-body-font-family); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .85rem; } .pg-footer-links li { margin-bottom: .55rem; color: var(--pg-text-muted); line-height: 1.5; } .pg-footer-links a { color: var(--pg-text-muted); text-decoration: none; } .pg-footer-links a:hover, .pg-footer-links a:focus { color: var(--pg-orange-text); } .pg-company { font-size: .9rem; color: var(--pg-text-muted); line-height: 1.5; } .pg-company__name { font-weight: 700; color: var(--pg-text); margin: 0 0 .35rem; } .pg-company__list { list-style: none; padding: 0; margin: 0; } .pg-company__list li { margin-bottom: .2rem; } .pg-company a { color: inherit; } .pg-company a:hover { color: var(--pg-orange-text); } .pg-legal h2 { font-size: 1.15rem; margin: 1.75rem 0 .65rem; } .pg-legal h2:first-of-type { margin-top: 0; } .pg-legal p, .pg-legal li { color: var(--pg-text-muted); line-height: 1.6; } .pg-legal ul { padding-left: 1.15rem; } .pg-legal li { margin-bottom: .4rem; } .pg-legal .pg-company { margin: .75rem 0 1.25rem; } .pg-mobile-menu { position: fixed; top: var(--pg-nav-height); left: 0; right: 0; bottom: 0; z-index: 1070; pointer-events: none; } .pg-mobile-menu[hidden] { display: none !important; } .pg-mobile-menu.is-open { display: block; } .pg-mobile-menu__overlay { position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, .45); pointer-events: auto; } .pg-mobile-menu__sheet { position: absolute; top: .5rem; z-index: 1; pointer-events: auto; right: max(.75rem, calc(50% - 540px + .75rem)); width: min(calc(100% - 1.5rem), 320px); max-height: calc(100dvh - var(--pg-nav-height) - 1.5rem); overflow: auto; background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-lg); box-shadow: var(--pg-shadow-lg); padding: .85rem; display: flex; flex-direction: column; gap: .75rem; } .pg-mobile-menu__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .pg-mobile-menu__title { font-family: "Barlow Condensed", sans-serif; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .95rem; } .pg-mobile-menu__close { border: 0; background: var(--pg-surface-2); color: var(--pg-text); width: 34px; height: 34px; border-radius: 10px; } .pg-mobile-profile { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; border-radius: var(--pg-radius); background: var(--pg-orange-soft); border: 1px solid var(--pg-border); text-decoration: none; color: inherit; } .pg-mobile-profile__text { min-width: 0; flex: 1; } .pg-mobile-menu__links { display: grid; gap: .15rem; } .pg-mobile-link { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem .5rem; border-radius: 10px; text-decoration: none; color: var(--pg-text); font-weight: 600; font-size: .92rem; } .pg-mobile-link:hover { background: var(--pg-surface-2); color: var(--pg-text); } .pg-mobile-link--cta { color: var(--pg-orange-text); } .pg-mobile-link-arrow { color: var(--pg-text-faint); font-size: .85rem; } .pg-mobile-menu__foot { margin-top: auto; padding-top: .35rem; border-top: 1px solid var(--pg-border); } .pg-cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; padding: 1rem 0; background: var(--pg-surface); border-top: 1px solid var(--pg-border); } .pg-cookie-bar[hidden] { display: none !important; } .pg-cookie-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .pg-cookie-bar__title { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .25rem; color: var(--pg-text); } .pg-cookie-bar__text { font-size: .92rem; line-height: 1.5; color: var(--pg-text-muted); } .pg-social { display: flex; gap: .6rem; } .pg-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--pg-radius-sm); border: 1px solid var(--pg-border); color: var(--pg-text-muted); font-size: 1.05rem; text-decoration: none; transition: background-color .15s ease, color .15s ease; } .pg-social a:hover { background: var(--pg-orange); border-color: var(--pg-orange); color: #ffffff; } /* -------------------------------------------------------------------------- 15. Hjälpklasser Sidans CSP tillåter ingen inline-stil, alltså inga style="..."-attribut i mallarna. Det är ett medvetet val — samma regel som stänger ute inline-JS stänger ute inline-CSS — och det som annars hade skrivits direkt i taggen bor därför här. -------------------------------------------------------------------------- */ /* Bredder på formulärkort och liknande. */ .pg-w-sm { max-width: 26rem; } .pg-w-md { max-width: 32rem; } .pg-w-lg { max-width: 44rem; } /* Tabellkolumn som ska ta så lite plats som möjligt. */ .pg-col-tight { width: 1%; white-space: nowrap; } /* Lista där raderna skiljs av en linje, utan linje efter den sista. */ .pg-divided { margin-bottom: 0; } .pg-divided > li { padding-block: .55rem; border-bottom: 1px solid var(--pg-border); } .pg-divided > li:last-child { border-bottom: 0; } /* Ett fält i innehållsredigeringen, med avdelare mellan fälten. */ .pg-field-block { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--pg-border); } .pg-field-block:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } /* Hopfällbar fråga på FAQ-sidan.
i stället för Bootstraps accordion: fungerar utan JavaScript och går att söka i med webbläsarens egen sidsökning även när svaret är hopfällt. */ .pg-faq-item { padding: 1rem; border-bottom: 1px solid var(--pg-border); } .pg-faq-item:last-child { border-bottom: 0; } .pg-faq-item > summary { cursor: pointer; font-weight: 600; } .pg-faq-item > summary::marker { color: var(--pg-orange); } /* Större variant av den runda ikonen, för avsnitt som bär en egen bild. */ .pg-feature-icon-lg { width: 76px; height: 76px; font-size: 2.2rem; } .pg-feature-icon-xl { width: 96px; height: 96px; font-size: 2.6rem; } /* Mindre variant, till listor i administrationen. */ .pg-feature-icon-sm { width: 40px; height: 40px; font-size: 1.1rem; margin-bottom: 0; } /* Miniatyrbild i en tabellrad. */ .pg-thumb { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; display: block; } /* Bild som fyller sitt kort. */ .pg-image-full { width: 100%; height: auto; border-radius: var(--pg-radius-sm); display: block; } /* Text från en besökare visas som den skrevs, med radbrytningar bevarade. */ .pg-preformatted { white-space: pre-wrap; line-height: 1.7; } /* Småsaker. */ .pg-select-auto { width: auto; } .pg-icon-md { font-size: 1.3rem; } .pg-unread-dot { font-size: .5rem; vertical-align: middle; } /* -------------------------------------------------------------------------- 16. Responsivt -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .pg-navbar .navbar-collapse { padding-block: .75rem; } .pg-navbar .nav-link { padding-inline: .5rem; } /* På mobil blir sidomenyn en rad att svepa i, så att formuläret syns direkt i stället för efter en hel skärm med menyval. */ .pg-admin-nav { position: static; display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding: .35rem; margin-bottom: .5rem; } .pg-admin-nav::-webkit-scrollbar { display: none; } .pg-admin-nav-group { display: none; } .pg-admin-nav a { flex: none; white-space: nowrap; padding: .45rem .75rem; } } @media (max-width: 575.98px) { .pg-hero { padding-block: 3rem; padding-top: calc(3rem + var(--pg-nav-height)); } .pg-hero-actions .btn, .pg-cta-band .btn { width: 100%; } .pg-card, .pg-panel { padding: 1.15rem; } .pg-price-row { flex-direction: column; gap: .25rem; } .pg-price-value { font-size: 1.35rem; } .pg-section { padding-block: 2.5rem; } main > .pg-section:first-child { padding-top: calc(2.5rem + var(--pg-nav-height)); } .pg-page-header { padding-block: 1.75rem; padding-top: calc(1.75rem + var(--pg-nav-height)); } } /* Respektera systemets inställning för minskad rörelse. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .pg-feature:hover, .pg-story-card:hover, a.pg-metric:hover { transform: none; } } /* Utskrift: sidan ska gå att skriva ut som prislista utan att spilla bläck på ett svart underlag. */ @media print { .pg-navbar, .pg-footer, .pg-cta-band, .pg-skip-link, .btn, .pg-cookie-bar, .pg-mobile-menu, .pg-toast-stack { display: none !important; } body { background: #ffffff; color: #000000; } .pg-card, .pg-price-card, .pg-panel { border-color: #cccccc; break-inside: avoid; } }