:root { --testColorMain: #FFFFFF; --testColorSecondary: #003c64; } div.logo-inline-style#mainNavbar > ul.navbar-nav > li > a { color: #FFFFFF; border-color: #FFFFFF !important; } div.stacked-style#mainNavbar > ul.navbar-nav { background-color: rgba(255,87,0, 1) !important; } div.stacked-style#mainNavbar > ul.navbar-nav > li > a { color: #000 !important; } div.stacked-inverse-style#mainNavbar > ul.navbar-nav { background-color: rgba(255,87,0, 1) !important; } div.stacked-inverse-style#mainNavbar > ul.navbar-nav > li > a { color: #fff !important; } .main-navbar .navbar-brand { color: #FFFFFF; } .main-navbar .navbar-toggler { color: #FFFFFF; } .main-navbar .navbar-brand { height: 175px; margin-top: 15px; margin-bottom: 15px; overflow: hidden; } @media (max-width: 991px) { .main-navbar .navbar-brand { max-height: 120px; important } .main-navbar .navbar-brand img { max-height: 120px; important } } @media (min-width: 992px) { div.logo-inline-style#mainNavbar > ul.navbar-nav > li > a { border: 1px solid #FFFFFF; } } .main-navbar { background-color: #003c64; color: #FFFFFF; } .dropdown-submenu { position: relative; } .dropdown-submenu a::after { transform: rotate(-90deg); position: absolute; right: 6px; top: .8em; } .dropdown-submenu .dropdown-menu { position: relative !important; margin: 1rem !important; } .custom-link-color a, .custom-link-color a:link, .custom-link-color a:visited, .custom-link-color a:active { color: #222222; } .m-t-r { padding-top: 81px; } @media (max-width: 979px) { .header-banner { margin-right: -20px; margin-left: -20px; padding-right: 20px; padding-left: 20px; padding-top: 20px; } .navbar-fixed-top { margin-bottom: 0; } } #content-area .header-color, #dialog-area .header-color { background-color: #003c64; color: #FFFFFF; } .panel-header-color { border-color: #003c64; } .addLogoText { font-size: 2.5em; font-family: Tahoma, "Arial Narrow", verdana, sans-serif; font-weight: bold; padding-left: 10px; margin-bottom: 20px; letter-spacing: 0.05em; line-height: 205px; float: left; } .logoText { line-height: 205px; } .logo a, .m-t-r .brand { color: #FFFFFF; } .content-color { background-color: #FFFFFF; color: #222222; } .content-lower-container { background-color: #003c64; color:#FFFFFF; text-decoration: none; } @media (max-width: 767px) { .content-lower-container { background-color: #fff; color:#FFFFFF; text-decoration: none; } .footer-item { background-color: #003c64; margin-bottom: 1rem; } } .content-lower-container a, .content-lower-container a:hover{ color:#FFFFFF; } .nav-back { background-color: #33A5FF; } .menu-colors { color: #FFFFFF; background-color: #33A5FF; } .banner .links a { color: #FFFFFF; background-color: #33A5FF; } .list-group-item.active, .nav-pills .nav-link.active { color: #ffffff !important; background-color: #003c64 !important; border-color: #003c64 !important; } .list-group-item a, .nav-pills .nav-item a.nav-link { color: #003c64 !important; } .list-group-item.active a, .nav-pills .nav-item a.nav-link.active { color: #ffffff !important; } .dropdown-item.active, .dropdown-item:active { background-color: #003c64 !important; } /* ================================================================== HADSTEN HÅNDBOLD — eget CSS til goMember/MemberLink VERSION 3 — 14. september 2026 ================================================================== DETTE ER DEN ENESTE CSS-KILDE. Tidligere lå designet i fire filer, der var drevet fra hinanden: hadsten-gomember.css og 0-css-til-egne-css-styles.css (begge v1, udgåede farver) samt hadsten-gomember-v2.css (v1's struktur med v2-farver lagt på). Alle tre ligger nu i arkiv/ og må ikke lægges på sitet. Ændret siden v2 — to rettelser hentet fra hadsten-gomember-v2.css, som v2 manglede. Begge står med "v3:" dér hvor de er lavet: - .box klipper ikke længere sit eget indhold (overflow: hidden væk). - Prisbåndets farveregel rammer ikke længere knapper, badges og formularfelter. Uden undtagelsen blev de hvid på hvid. Bevidst IKKE taget med fra hadsten-gomember-v2.css: undtagelsen .activities-view .btn-light. Den er overflødig her, fordi .btn-light nu er hvid med navy kontur og .btn-secondary fyldt navy — de to toggle-tilstande kan skelnes uden den. Se afsnit 7. ================================================================== Sættes ind i feltet "Egne CSS Styles" under Site indstillinger → Design/farver → Avanceret. Skrifterne hentes separat via snippets/0-fonts-til-special-indhold-head.html. Ændret siden v1: - Farverne er nu de kanoniske fra brandsystemets tokens.json v1.4.1: navy #003C64 og orange #F06428. v1 brugte #01335B/#E36824, som er udgået pr. 20. august 2026. - Orange er reserveret til ÉN ting: den knap der skaber medlemmer. Log ind-knappen er nu en hvid kontur, ikke orange. - .btn-primary (knappen "Tilmeld") var ustylet i v1 og stod Bootstrap-blå. Den er sitets vigtigste knap. - Undersider får et rigtigt sidehoved i navy i stedet for en løs h1. - Nyhedslisten har fået hierarki: topnyhed stor, resten kompakte. - .date-info i kalenderen havde en grå inline-baggrund fra goMember, som v1 ikke overskrev. - Etiketterne (.tag-name) får ikke længere tilfældige farver. - Sektionsnumrene er gennemgående (v1 sprang fra 8 til 14). Verificeret ved injektion på det levende site 1. september 2026 (forside, U11 Piger, Tilmelding og kontingent) i 390, 1280 og 1800 px bredde. ------------------------------------------------------------------ ARBEJDSDELING MED "SITE DESIGN INDSTILLINGER" (opdateret 9/9 2026) ------------------------------------------------------------------ Admin er nu set indefra. Flere af de farver, denne fil overskriver, kommer fra native felter, der ender i klubbens genererede Site925-stylesheet. De felter SKAL sættes rigtigt — se trin 0c i GUIDE-goMember.md. Så står siden også pænt, hvis CSS-feltet en dag bliver tømt, og værdierne kan tages med til nye goMember. Top baggrundsfarve #0A1737 -> #003C64 Nedre område baggrund #E56E2A -> #003C64 Undermenu valgt baggrundsfarve #0d6efd -> #003C64 Undermenu link farve #0d6efd -> #003C64 Logo / Profil billede navy firkant -> landscape-white.png Logo højde 175 -> LAD STÅ (se nedenfor) Reglerne herunder er derfor sele OG seler: de retter farverne uanset hvad felterne står på, og de tilføjer det felterne ikke kan — gradient, kanter, skygger, typografi og responsiv logohøjde. ================================================================== */ /* ------------------------------------------------------------------ 0. DESIGNTOKENS ------------------------------------------------------------------ Alt herunder bruger disse værdier. Skal en farve eller en afstand ændres, ændres den ét sted her — ikke nede i reglerne. ------------------------------------------------------------------ */ :root { /* Brand */ --hh-navy: #003C64; --hh-navy-dyb: #002943; --hh-navy-dybest: #001B30; --hh-orange: #F06428; --hh-orange-dyb: #D9531A; /* Flader */ --hh-papir: #F7F6F3; --hh-hvid: #FFFFFF; --hh-inset: #F1EDE4; /* Tekst */ --hh-tekst: #001B30; --hh-tekst-svag: #2D3B4A; --hh-paa-navy: #FFFFFF; --hh-paa-navy-svag: #CFE0EE; --hh-paa-orange: #001B30; /* Aldrig hvid tekst på orange — 2,5:1 */ /* Linjer og dybde */ --hh-linje: #E6E1D6; --hh-skygge: 0 1px 2px rgba(0,27,48,.06), 0 8px 24px -12px rgba(0,27,48,.18); --hh-skygge-loeft: 0 2px 4px rgba(0,27,48,.08), 0 16px 32px -14px rgba(0,27,48,.28); /* Rytme */ --hh-sp-1: 8px; --hh-sp-2: 16px; --hh-sp-3: 24px; --hh-sp-4: 32px; --hh-sp-6: 48px; /* Form */ --hh-radius: 14px; --hh-radius-lille: 8px; --hh-radius-pille: 999px; /* Bredde. goMembers egen .container er 1400 px, hvilket giver linjelængder på 150+ tegn på en bred skærm. */ --hh-bredde: 1180px; /* Skrifter */ --hh-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; --hh-body: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; } /* ------------------------------------------------------------------ 1. GRUNDLAG ------------------------------------------------------------------ */ body { font-family: var(--hh-body) !important; background-color: var(--hh-papir) !important; color: var(--hh-tekst); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Én bredde for hele sitet, så menu, sidehoved og indhold flugter */ .main-navbar > .container, .display-wrapper .container, #content-area > .container { max-width: var(--hh-bredde); } /* Overskrifter. letter-spacing er 0 med vilje: Barlow Condensed har brede sidebearings på Ø og Å, og med ekstra spærring bliver "ÅRSMØDE" læst som "ÅRSMØ DE". */ h1, h2, h3, h4, h5 { font-family: var(--hh-display) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0; line-height: 1.08; color: var(--hh-navy) !important; } h1 { font-size: clamp(34px, 4.6vw, 58px) !important; font-weight: 800 !important; } h2 { font-size: clamp(24px, 2.4vw, 32px) !important; } h3 { font-size: clamp(21px, 1.9vw, 26px) !important; } h4 { font-size: 20px !important; } h5 { font-size: 18px !important; } /* Læsbar linjelængde i redigerbart indhold */ .TextPageItemViewer p, .TextPageItemViewer li { max-width: 68ch; } /* Links i brødtekst */ #content-area a, .TextPageItemViewer a { color: var(--hh-navy); text-decoration: underline; text-decoration-color: rgba(240,100,40,.55); text-decoration-thickness: 2px; text-underline-offset: .18em; } #content-area a:hover, .TextPageItemViewer a:hover { color: var(--hh-orange-dyb); text-decoration-color: currentColor; } /* Synlig tastaturfokus overalt */ a:focus-visible, .btn:focus-visible, button:focus-visible { outline: 3px solid var(--hh-orange); outline-offset: 2px; } /* ------------------------------------------------------------------ 2. TOPPEN ------------------------------------------------------------------ */ /* Gradienten dækker samtidig bannerbilledet fra feltet "Banner billede". Bliver banneret slettet i admin, kommer "Top baggrundsfarve" frem — samme navy, så resultatet er ens med og uden denne regel. */ .main-navbar { background: linear-gradient(180deg, var(--hh-navy) 0%, var(--hh-navy-dyb) 100%) !important; background-image: linear-gradient(180deg, var(--hh-navy) 0%, var(--hh-navy-dyb) 100%) !important; border-bottom: 4px solid var(--hh-orange); box-shadow: 0 10px 30px -20px rgba(0,27,48,.9); } /* Feltet "Logo højde" skriver height på .navbar-brand — men goMember sætter INTET max-height på selve billedet. Målt på det levende site 9/9 2026: `max-height: none` ved 992 px og opefter. At logoet passer i dag skyldes udelukkende, at den nuværende fils proportioner tilfældigvis rammer 175 px. Derfor: lad feltet stå på 175. Sættes det til 100, bliver det nye landscape-white-logo 136 px højt ved 1280 px bredde og klippet af `overflow: hidden`, hvis denne fil ikke er indlæst. max-height herunder er det, der faktisk holder logoet på plads, og det er den eneste af de to der kan være responsiv. */ .main-navbar .navbar-brand { height: clamp(72px, 8.5vw, 100px) !important; margin-top: var(--hh-sp-2) !important; margin-bottom: var(--hh-sp-2) !important; } .main-navbar .navbar-brand img { max-height: clamp(60px, 7.5vw, 88px) !important; width: auto !important; } /* Menupunkter: orange understregning i stedet for pille-baggrund. OBS specificitet: feltet "Menu farve" genererer `div.logo-inline-style#mainNavbar > ul.navbar-nav > li > a { border: 1px solid #FFFFFF }` inde i en min-width:992px-mediequery. Den selektor er stærkere end vores, så `border: none` skal have !important for at fjerne rammerne om menupunkterne. */ #mainNavbar > ul.navbar-nav > li > a { font-family: var(--hh-display) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; font-size: 1.05rem; color: var(--hh-paa-navy) !important; background: transparent !important; border: none !important; border-radius: 0; padding: .55rem .1rem !important; margin: 0 .7rem; position: relative; } #mainNavbar > ul.navbar-nav > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--hh-orange); /* Bootstraps .dropdown-toggle tegner sin caret-pil i PRAECIS det samme ::after. Uden denne nulstilling bliver pilens kanter staaende oven paa vores bjaelke: border-top 4px hvid giver en hvid streg, og de gennemsigtige 4px side-kanter lader den orange baggrund skinne igennem som trekanter i hjoernerne. Maalt paa dropdown-punkterne 14/9 2026. */ border: 0 !important; width: auto; transform: scaleX(0); transform-origin: left; transition: transform .18s ease; } #mainNavbar > ul.navbar-nav > li > a:hover::after, #mainNavbar > ul.navbar-nav > li > a:focus::after, #mainNavbar > ul.navbar-nav > li.show > a::after { transform: scaleX(1); } /* Logget ind ser man tre topniveau-punkter mere end gæster: "Til spillere", "Til trænere" og "Udvalg" (aflæst i menuopsætningen 9/9 2026). Med otte punkter ombrød menuen til to linjer på almindelige skærme og efterlod "Om Hadsten Håndbold" alene på anden linje. En let stramning mellem 992 og 1400 px holder dem på én linje. Bliver der flere punkter, ombryder den stadig pænt. */ @media (min-width: 992px) and (max-width: 1399.98px) { #mainNavbar > ul.navbar-nav > li > a { margin: 0 .45rem; font-size: 1rem; letter-spacing: .035em; } } /* På mobil folder menuen ud som en liste — dér er understregning forkert */ @media (max-width: 991.98px) { #mainNavbar > ul.navbar-nav > li > a { margin: 0; padding: .7rem .8rem !important; border-radius: var(--hh-radius-lille); } #mainNavbar > ul.navbar-nav > li > a::after { display: none; } #mainNavbar > ul.navbar-nav > li > a:hover, #mainNavbar > ul.navbar-nav > li > a:focus { background: rgba(255,255,255,.12) !important; } } .dropdown-menu { border: 1px solid var(--hh-linje) !important; border-radius: var(--hh-radius-lille) !important; box-shadow: var(--hh-skygge-loeft) !important; padding: .4rem !important; overflow: hidden; } .dropdown-item { font-family: var(--hh-body) !important; font-size: .93rem; font-weight: 500; border-radius: 6px; padding: .5rem .8rem !important; color: var(--hh-tekst) !important; } .dropdown-item:hover, .dropdown-item:focus { background: var(--hh-papir) !important; color: var(--hh-navy) !important; } .dropdown-item.active, .dropdown-item:active { background: var(--hh-navy) !important; color: #fff !important; } /* ------------------------------------------------------------------ 2b. UNDERMENUER PÅ INDHOLDSSIDER ------------------------------------------------------------------ Felterne "Undermenu valgt baggrundsfarve" og "Undermenu link farve" står på goMembers Bootstrap-blå #0d6efd og genererer reglerne herunder i Site925. Det er den tydeligste standardsystem-markør på sitet. Felterne bør sættes til navy — men v2 dækkede dem slet ikke, så her er de med, hvis nogen glemmer det eller ændrer dem tilbage. */ .list-group-item a, .nav-pills .nav-item a.nav-link { color: var(--hh-navy) !important; } .list-group-item.active, .nav-pills .nav-link.active { background-color: var(--hh-navy) !important; border-color: var(--hh-navy) !important; color: var(--hh-paa-navy) !important; } .list-group-item.active a, .nav-pills .nav-item a.nav-link.active { color: var(--hh-paa-navy) !important; } /* Rester i klubbens stylesheet med en lys blå #33A5FF. De er ikke set i brug på nogen offentlig side, men dukker de op, er de forkerte. */ .nav-back, .menu-colors, .banner .links a { background-color: var(--hh-navy) !important; color: var(--hh-paa-navy) !important; } /* ------------------------------------------------------------------ 3. SIDEHOVED PÅ UNDERSIDER ------------------------------------------------------------------ goMember lægger sidens h1 alene i
. Vi gør den wrapper fuldbredde og navy, så hver underside får et rigtigt sidehoved. :has() er progressive enhancement: kan browseren det ikke, står overskriften som før — intet går i stykker. ------------------------------------------------------------------ */ .container.mt-4:has(> h1) { max-width: none; width: 100%; margin-top: 0 !important; margin-bottom: var(--hh-sp-4); padding: clamp(28px, 4.5vw, 52px) 15px clamp(24px, 3.5vw, 44px); background: var(--hh-navy); border-bottom: 4px solid var(--hh-orange); } .container.mt-4:has(> h1) > h1 { max-width: var(--hh-bredde); margin: 0 auto; color: var(--hh-paa-navy) !important; } /* ------------------------------------------------------------------ 4. KORT (widgets) ------------------------------------------------------------------ goMembers JavaScript sætter baggrund, kant og tekstfarve som inline style på .widget. Derfor er !important nødvendig her. ------------------------------------------------------------------ */ .widget, .widget.rounded { background-color: var(--hh-hvid) !important; border: 1px solid var(--hh-linje) !important; border-radius: var(--hh-radius) !important; box-shadow: var(--hh-skygge); padding: clamp(18px, 2.2vw, 28px) !important; color: var(--hh-tekst) !important; } /* Luften inde i kortene. clamp'en ovenfor skalerer efter SKAERMEN, ikke efter spalten. På en bred skærm i en smal sidespalte (col-md-4 er 363 px) blev 28 px derfor for meget: målt 14/9 2026 gik 393 px kolonne ned til 239 px indhold — 39 % luft, fordelt på fire lag uden på hinanden. To rettelser: smalle spalter får mindre luft, og goMembers egen element-padding fjernes, fordi .widget allerede giver luften. */ .col-md-3 .widget, .col-md-3 .widget.rounded, .col-md-4 .widget, .col-md-4 .widget.rounded { padding: 18px !important; } .widget > .TextPageItemViewer, .widget > div > .TextPageItemViewer { padding: 0 !important; } /* Sikkerhedsnet mod hvid-på-hvid. goMember sætter inline color:rgb(255,255,255) på elementer der oprindeligt lå på en mørk flade (trænergalleriet er det kendte tilfælde). Når vi gør kortet hvidt, forsvinder teksten. Reglen rammer præcis den inline-værdi og intet andet. */ .widget [style*="255, 255, 255"] { color: var(--hh-tekst) !important; } /* Luft mellem kortene */ .widget-wrapper { margin-bottom: var(--hh-sp-3); } .cell-wrapper { margin-bottom: 0; } /* Sektionsoverskriften i et kort er en etikette, ikke en titel */ .widget h2 { font-size: 20px !important; letter-spacing: .08em; color: var(--hh-navy) !important; margin: 0 0 var(--hh-sp-3); padding-bottom: var(--hh-sp-1); position: relative; } .widget h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; background: var(--hh-orange); } /* Sponsorlogoerne er lagt i en

uden tekst — kun et billede. Uden disse to linjer tegnes en løs orange streg under hvert sponsorlogo, og logoet får overskrift-margener. */ .widget h2:empty { margin: 0; padding: 0; } .widget h2:empty::after { display: none; } .widget h2:has(img) { margin: 0; padding: 0; } .widget h2:has(img)::after { display: none; } /* ------------------------------------------------------------------ 5. NYHEDER ------------------------------------------------------------------ Uden styling er alle fem nyheder lige store med fuldbredde-billede, så forsiden bliver en endeløs stak identiske blokke. Her får den øverste hovedrollen, og resten bliver kompakte rækker. OM "DESIGN"-DROPDOWNEN (bekræftet 9/9 2026) Nyhedselementet har to valg og kun to: 1. "Billede vises større over nyheden" <- i brug i dag 2. "Billede visess mindre til venstre for nyheden" Ingen af dem giver stor topnyhed OG kompakte rækker under. Det gør kombinationen af valg 1 og reglerne herunder — derfor beholdes valg 1. Skiftes der alligevel til valg 2, ændres markup'en, og :has(img)- og > .col-12-selektorerne herunder holder simpelthen op med at matche. Så står den native listevisning tilbage. Intet går i stykker. ------------------------------------------------------------------ */ .news-wrapper img.rounded { border-radius: var(--hh-radius-lille) !important; aspect-ratio: 16 / 9; object-fit: cover; } .news-wrapper img.shadow { box-shadow: none !important; } .news-wrapper .row.mb-3 { padding-bottom: var(--hh-sp-3); margin-bottom: var(--hh-sp-3) !important; border-bottom: 1px solid var(--hh-linje); } .news-wrapper .row.mb-3:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0 !important; } /* Topnyheden */ .news-wrapper .row.mb-3:first-child .news-link h5 { font-size: clamp(24px, 2.6vw, 34px) !important; } /* Nyhed 2 og frem: miniature til venstre, tekst til højre */ @media (min-width: 576px) { .news-wrapper .row.mb-3:not(:first-child):has(img) { flex-wrap: nowrap; align-items: flex-start; gap: var(--hh-sp-3); } .news-wrapper .row.mb-3:not(:first-child) > .col-12:first-child { flex: 0 0 200px; max-width: 200px; } .news-wrapper .row.mb-3:not(:first-child) > .col-12:last-child { flex: 1 1 auto; max-width: none; } .news-wrapper .row.mb-3:not(:first-child) img.rounded { margin-bottom: 0 !important; } } .news-link h5 { font-family: var(--hh-display) !important; font-size: 22px !important; color: var(--hh-navy) !important; transition: color .15s ease; } .news-link:hover h5, .news-link:focus h5 { color: var(--hh-orange-dyb) !important; } /* Manchetten klippes til tre linjer, så listen kan skimmes */ .news-wrapper .d-flex.flex-column > .mb-2 { font-size: 15px; color: var(--hh-tekst-svag); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-wrapper small.text-muted { font-family: var(--hh-display); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: 13px !important; color: var(--hh-tekst-svag) !important; margin-left: 0 !important; } /* ------------------------------------------------------------------ 6. KALENDER "Det sker" ------------------------------------------------------------------ goMember sætter en grå inline-baggrund på .date-info. Uden background:transparent står der grå bjælker midt i designet. VIGTIGT om .design-1: kalenderelementet har en "Design"-dropdown i admin. Den nuværende indstilling — "Opdelt på dato og tiden vises til venstre" — udsender
, og grid-layoutet herunder er skrevet til præcis den markup. Vælges et andet design, får wrapperen en anden klasse, og reglerne holder op med at gælde i stedet for at mangle noget. Derfor er de scopet til .design-1. ------------------------------------------------------------------ */ .event-day { margin-bottom: var(--hh-sp-3); } .event-day .date-info { background: transparent !important; font-family: var(--hh-display) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .07em; font-size: 14px; color: var(--hh-navy) !important; text-align: left !important; border-bottom: 2px solid var(--hh-orange); border-radius: 0 !important; padding: 0 0 .3rem !important; margin-bottom: var(--hh-sp-1); } .design-1 .event { display: grid; grid-template-columns: 108px 1fr; gap: 0 var(--hh-sp-2); align-items: baseline; padding: .55rem .5rem; margin: 0 -.5rem; border-left: none; border-radius: var(--hh-radius-lille); transition: background .15s ease; } .event:hover { background: var(--hh-papir); } .event-time { font-family: var(--hh-display); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--hh-navy) !important; white-space: nowrap; } .event-headline { font-weight: 600; font-size: 16px; color: var(--hh-tekst) !important; } .add-event-info { font-size: 13px; color: var(--hh-tekst-svag); } @media (max-width: 575.98px) { .design-1 .event { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ 7. KNAPPER ------------------------------------------------------------------ Ét system, tre roller: .btn-primary = orange. Den handling der skaber medlemmer. .btn-light = hvid med navy kant. Alt hjælpeagtigt. .btn-secondary = fyldt navy. Systemknapper i dialoger. Fordi .btn-light og .btn-secondary nu ser forskellige ud, kan aktivitetskalenderens visnings-toggle stadig skelnes. v1's undtagelse for .activities-view er derfor væk. ------------------------------------------------------------------ */ .btn { font-family: var(--hh-display) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; border-radius: var(--hh-radius-lille) !important; transition: background .15s ease, color .15s ease, border-color .15s ease; } .btn-primary { background: var(--hh-orange) !important; border: none !important; color: var(--hh-paa-orange) !important; padding: .7rem 1.4rem !important; font-size: 1.05rem !important; } .btn-primary:hover, .btn-primary:focus { background: var(--hh-orange-dyb) !important; color: var(--hh-paa-orange) !important; } .btn-light { background: var(--hh-hvid) !important; border: 1px solid var(--hh-navy) !important; color: var(--hh-navy) !important; font-weight: 700 !important; } .btn-light:hover, .btn-light:focus { background: var(--hh-navy) !important; color: var(--hh-paa-navy) !important; } .btn-secondary { background: var(--hh-navy) !important; border: 1px solid var(--hh-navy) !important; color: var(--hh-paa-navy) !important; } .btn-secondary:hover, .btn-secondary:focus { background: var(--hh-navy-dyb) !important; color: #fff !important; } /* Log ind sidder på den navy bjælke. Hvid kontur, så orange forbliver forbeholdt indmeldelse. Skrevet som .btn.btn-signin (specificitet 0,2,0) så den vinder uanset rækkefølgen i filen — det var v1's fejl. */ .btn.btn-signin { background: transparent !important; border: 1px solid rgba(255,255,255,.6) !important; color: var(--hh-paa-navy) !important; border-radius: var(--hh-radius-pille) !important; padding: .35rem 1rem !important; } .btn.btn-signin:hover, .btn.btn-signin:focus { background: rgba(255,255,255,.14) !important; border-color: #fff !important; color: #fff !important; } /* Blokke som skabelonen farver med "header-color". Site925 sætter dem til #0A1737 fra feltet "Top baggrundsfarve". Når feltet er #003C64, er de rigtige uden denne regel. */ #content-area .header-color, #dialog-area .header-color { background-color: var(--hh-navy) !important; color: var(--hh-paa-navy) !important; } .panel-header-color { border-color: var(--hh-navy) !important; } /* ------------------------------------------------------------------ 8. TILMELDINGSSIDEN — holdkort og prisbånd ------------------------------------------------------------------ goMember giver hvert hold sin egen inline-farve på kant og prisbånd (grå, lilla, orange...). Her ensrettes de. ------------------------------------------------------------------ */ .box { background: var(--hh-hvid) !important; border: 1px solid var(--hh-linje) !important; border-radius: var(--hh-radius) !important; box-shadow: var(--hh-skygge); transition: box-shadow .18s ease, transform .18s ease; /* v3: "overflow: hidden" er fjernet. Prisbåndet ligger midt i kortet (efter .box-name), ikke i toppen, så der er ingen fuldbredde-flade der skal klippes til de runde hjørner. Til gengæld klippede reglen alt hvad der stikker uden for kortet — tastaturets fokusmarkering på Tilmeld-knappen og eventuelle dropdowns. */ } .box:hover { box-shadow: var(--hh-skygge-loeft); transform: translateY(-2px); } /* Ens indre geometri. Holdnavnene fylder 1-2 linjer og prisbåndets tekst 1-3 linjer, så uden faste højder starter hvert kort sit indhold i sin egen højde, og de orange knapper står i trappe hen over rækken. De to min-height'er låser navnefeltet og prisbåndet, så knapperne flugter. Kortene selv strækkes af goMembers grid, så rækken er lige høj — forskellen i kravtekst bliver til luft i bunden, ikke til forskudte knapper. Derfor er der IKKE margin-top:auto på .box-content. */ .price-grid .box { display: flex; flex-direction: column; } .price-grid .box-content { margin-top: 0; } .box-name { padding: var(--hh-sp-2) var(--hh-sp-2) 0 !important; min-height: 60px; display: flex; align-items: flex-start; } .box-name h5 { font-size: 18px !important; line-height: 1.15; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .box-price-container { background: var(--hh-navy) !important; padding: var(--hh-sp-2) !important; margin-top: var(--hh-sp-2); min-height: 86px; display: flex; align-items: center; } /* v3: undtagelserne er hentet fra hadsten-gomember-v2.css. Uden dem ramte reglen ogsaa knapper, badges og formularfelter inde i baandet. De har deres egen lyse baggrund og blev derfor hvid paa hvid — paa praecis den side hvor folk melder deres boern ind. */ .box-price-container, .box-price-container *:not(.btn):not(.badge):not(input):not(select):not(textarea) { color: var(--hh-paa-navy) !important; } .box-price { flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; } .box-price .price { font-family: var(--hh-display); font-weight: 800; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; flex: none; } .box-price .unit { font-size: 12px; line-height: 1.3; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .box-content { padding: var(--hh-sp-2) !important; } .product-requirement { font-size: 14px; color: var(--hh-tekst-svag) !important; } /* ------------------------------------------------------------------ 9. TRÆNERKORT (MemberGallery) ------------------------------------------------------------------ */ .MemberGalleryPageItemViewer, .MemberGalleryPageItemViewer span, .MemberGalleryPageItemViewer div { color: var(--hh-tekst) !important; } .MemberGalleryPageItemViewer h2, .MemberGalleryPageItemViewer h3 { color: var(--hh-navy) !important; } .MemberGalleryPageItemViewer .member-picture { position: relative; border-radius: var(--hh-radius-lille); overflow: hidden; } .MemberGalleryPageItemViewer .member-picture img { border-radius: var(--hh-radius-lille) !important; } /* Rollen ligger som etikette oven på billedet. goMember sætter den som halvgennemsigtig sort i højre hjørne — den skal have højere specificitet end en ren .MemberGalleryPageItemViewer small.title for at vinde. */ .MemberGalleryPageItemViewer .member-picture small.title { background: var(--hh-orange) !important; color: var(--hh-paa-orange) !important; font-family: var(--hh-display); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; left: 0 !important; right: auto !important; bottom: 0 !important; top: auto !important; padding: 2px 8px !important; border-radius: 0 6px 0 0 !important; } /* Telefonnumre. IKKE orange — orange småtekst ligger på ca. 2,9:1 mod hvid og falder under kravet. Det gjorde v1. */ .MemberGalleryPageItemViewer ul.contact-info, .MemberGalleryPageItemViewer ul { list-style: none; padding-left: 0; margin: .2rem 0 var(--hh-sp-1); } .MemberGalleryPageItemViewer li { color: var(--hh-tekst-svag) !important; font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ 10. ETIKETTER (hold-tags i kalenderen) ------------------------------------------------------------------ goMember tildeler hver etikette en tilfældig farve inline (rød, grøn, orange). Det er den tydeligste rest af standardsystemet. ------------------------------------------------------------------ */ .Tag .tag-name { background: var(--hh-inset) !important; color: var(--hh-navy) !important; font-family: var(--hh-display); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 11px; border-radius: var(--hh-radius-pille); padding: 2px 10px; } /* ------------------------------------------------------------------ 11. TOMME MODULER ------------------------------------------------------------------ En tom opslagstavle på hver holdside er en synlig påmindelse om at systemet er halvtomt. Tomme NYHEDS-moduler har ingen egen klasse og kan ikke rammes med CSS — de skal fjernes i sideopsætningen. ------------------------------------------------------------------ */ .widget-wrapper:has(.no-posts) { display: none; } /* ------------------------------------------------------------------ 12. FOOTER ------------------------------------------------------------------ Footerens farve kommer fra feltet "Nedre område baggrund", som i dag står på orange #E56E2A og bør sættes til navy. Uanset feltet genererer goMember denne mobilregel: @media (max-width: 767px) { .content-lower-container { background-color: #fff; color: #FFFFFF } .footer-item { background-color: } } Hvid tekst på hvid baggrund. Alt der ligger direkte i containeren og ikke i et .footer-item er usynligt på telefoner i dag. Reglerne herunder retter den fejl — også selvom feltet bliver sat rigtigt. ------------------------------------------------------------------ */ .footer, .content-lower-container { background: var(--hh-navy) !important; color: var(--hh-paa-navy-svag) !important; border-top: 4px solid var(--hh-orange); margin-top: var(--hh-sp-6); } .footer h4 { color: var(--hh-paa-navy) !important; font-size: 15px !important; letter-spacing: .08em; border-bottom: 2px solid var(--hh-orange); display: inline-block; padding-bottom: .2rem; margin-bottom: var(--hh-sp-2); } .footer a, .footer li, .footer p { color: var(--hh-paa-navy-svag) !important; } .footer a:hover, .footer a:focus { color: #fff !important; } .footer-item { background: transparent !important; } .memberlink-footer { background: var(--hh-navy-dybest) !important; color: #8FAAC2 !important; border-top: 1px solid rgba(255,255,255,.08); } /* ------------------------------------------------------------------ 13. SMÅJUSTERINGER ------------------------------------------------------------------ */ img.shadow { box-shadow: none !important; } .album-view img.rounded, .PictureExplorerPageItemViewer img { border-radius: var(--hh-radius-lille) !important; } /* Tabeller skrevet i tekstelementer */ .TextPageItemViewer table { width: 100%; border-collapse: collapse; } .TextPageItemViewer th { font-family: var(--hh-display); text-transform: uppercase; letter-spacing: .05em; background: var(--hh-navy); color: #fff; text-align: left; padding: 10px 13px; } .TextPageItemViewer td { padding: 10px 13px; border-bottom: 1px solid var(--hh-linje); } .TextPageItemViewer tbody tr:nth-child(even) td { background: var(--hh-papir); } /* Respektér brugere der har slået animation fra */ @media (prefers-reduced-motion: reduce) { *, *::after { transition: none !important; animation: none !important; } .box:hover { transform: none; } }