/* --------------------------------------------------------------------------- * Ovation Hub — designsystem * * Farver, typografi og spacing er laast i PRD afsnit 3 og defineres i * theme.json. Her aliases de kun. Ret aldrig en vaerdi her — ret theme.json. * * Klassenavnene oh-* er arvet fra den tidligere iteration og omdoebes * i fase 5, hvor sidernes markup alligevel skrives om. * ------------------------------------------------------------------------- */ :root{ --ink:var(--wp--preset--color--ink); --ink-hover:var(--wp--preset--color--ink-hover); --paper:var(--wp--preset--color--paper); --accent:var(--wp--preset--color--accent); --accent-hover:var(--wp--preset--color--accent-hover); --muted:var(--wp--preset--color--muted); --dot:var(--wp--preset--color--dot); --line:var(--ink); --grid:#333333; /* gitterlinjer, 1:1 med designkilden */ --grid-size:14px; /* gitterets cellestoerrelse — laeses ogsaa af grid-snap.js */ /* Containere, PRD afsnit 3 */ --wrap-wide:1200px; /* header og footer */ --wrap-content:880px; /* indholdsblokke */ --block-pad:32px 40px; /* Papir-glorien der maskerer baggrundsgitteret bag indholdsblokke. * Vaerdien er glorie-raekkevidden, ikke en skygge. Se .oh-block::before. * box-shadow blev brugt her foer, men dens blur er gaussisk: den har et * plateau med ~100% daekning, hvis ydre graense ses som en haard kant mod * gitteret. En gradient giver den lineaere 100% -> 0% rampe der skal til. */ --halo:32px; } /* Baggrund: tegneark-gitter + prik-lag, paa . * * Gitterlinjerne er #333333 uden gennemsigtighed ved 14px, 1:1 med * designkilden (Context/README.md linje 44). Bekraeftet af designer. * Laesbarheden bag indholdsblokke sikres af --halo, ikke af opacitet. */ body{ position:relative; margin:0; background:var(--paper); background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); background-size:var(--grid-size) var(--grid-size); } body::before{ content:""; position:absolute; top:0;left:0; width:100%;height:100%; z-index:0; pointer-events:none; background-image: radial-gradient(circle 9px at 274px 543px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 270px 423px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 177px 154px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 441px 541px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 303px 535px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 410px 446px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 357px 495px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 112px 31px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 432px 188px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 230px 101px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 262px 381px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 543px 160px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 95px 162px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 127px 543px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 207px 532px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 135px 485px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 499px 89px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 495px 323px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 543px 537px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 360px 389px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 81px 19px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 338px 420px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 320px 499px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 37px 79px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 369px 161px, var(--dot) 99%, transparent 100%), radial-gradient(circle 9px at 325px 449px, var(--dot) 99%, transparent 100%); background-repeat:repeat; background-size:560px 560px; } /* Alle overskrifter, PRD afsnit 3 */ h1,h2,h3,h4,h5,h6,.wp-block-heading{text-wrap:balance} .oh-site{position:relative;z-index:1;color:var(--ink);font-family:"Space Mono",ui-monospace,monospace;line-height:1.6} .oh-site a{color:inherit} .oh-site main{position:relative;z-index:1} /* Containere ---------------------------------------------------------------- */ /* Ingen vandret padding her: .oh-footer ejer den. To lag ville laegge * indholdet 64px inde og saenke den effektive bredde til 1136px. */ .oh-wrap{box-sizing:border-box;max-width:var(--wrap-wide);margin:0 auto} .oh-section{background:transparent;padding:24px 32px 48px;display:flex;justify-content:center} .oh-page-hero{padding-top:72px;padding-bottom:48px} .oh-block{box-sizing:border-box;max-width:var(--wrap-content);width:100%;margin:0 auto;padding:var(--block-pad);background:var(--paper);position:relative;z-index:1} /* Glorien: en papirflade der raekker --halo ud over blokken paa alle fire * sider, maskeret af to lineaere gradienter. Rampen loeber praecis fra * blokkens kant (100%) til --halo udenfor (0%), saa der ikke findes et * plateau med haard ydre graense. De to gradienter skaeres sammen med * mask-composite, saa hjoernerne toner i begge akser. */ .oh-block::before, .oh-events__bar::before{ content:""; position:absolute; inset:calc(var(--halo) * -1); z-index:-1; background:var(--paper); -webkit-mask-image: linear-gradient(to right,transparent,#000 var(--halo),#000 calc(100% - var(--halo)),transparent), linear-gradient(to bottom,transparent,#000 var(--halo),#000 calc(100% - var(--halo)),transparent); mask-image: linear-gradient(to right,transparent,#000 var(--halo),#000 calc(100% - var(--halo)),transparent), linear-gradient(to bottom,transparent,#000 var(--halo),#000 calc(100% - var(--halo)),transparent); -webkit-mask-composite:source-in; mask-composite:intersect; } .oh-block > *:first-child{margin-top:0} .oh-block > *:last-child{margin-bottom:0} /* Prosa --------------------------------------------------------------------- */ .oh-prose p{margin:0 0 16px} .oh-prose p:last-child{margin-bottom:0} .oh-prose a{color:var(--ink);text-underline-offset:3px} .oh-prose a:hover{color:var(--ink-hover)} .oh-site .oh-lead{font-family:"Space Grotesk",sans-serif;font-size:20px;font-weight:500;margin-top:24px;text-align:center} .oh-site .oh-kicker{margin:0 0 12px} .oh-site .oh-section__title{margin:0 0 24px} /* Forside: hero ------------------------------------------------------------- */ .oh-hero{background:transparent;padding:24px 32px 48px;display:flex;flex-direction:column;align-items:center;gap:28px} .oh-hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px} .oh-hero__title{margin:0;font-size:36px;line-height:40px} .oh-word{display:inline-block} .oh-word--in{animation:oh-word-in .35s ease both} @keyframes oh-word-in{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}} .oh-site .oh-hero__lead{max-width:60ch;margin:0;font-size:17px;line-height:1.55} /* Forside: collage ---------------------------------------------------------- */ .oh-collage{display:grid;grid-template-columns:repeat(12,1fr);gap:20px 24px;width:100%;max-width:var(--wrap-wide);margin:0 auto;padding:24px 0 0} .oh-collage__item{ grid-column:var(--oh-col);height:var(--oh-h);margin-top:var(--oh-mt); overflow:hidden;border:1px solid var(--line);background:var(--paper); } .oh-collage__item img{width:100%;height:100%;object-fit:cover;display:block} /* Forside: tilbudskort ------------------------------------------------------ */ /* Tilbudskort som slider: hvert kort fylder 80% af panelet, saa 20% af det * naeste stikker frem. Ren CSS — scroll-snap giver touch, trackpad og * tastatur uden JS. Masken feather'er det yderste kort ud mod hoejre. */ .oh-cards{ display:flex; gap:24px; margin:0;padding:0;list-style:none; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 72px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 72px),transparent 100%); } .oh-cards::-webkit-scrollbar{display:none} .oh-cards:focus-visible{outline:2px solid var(--ink);outline-offset:4px} /* 80% giver den oenskede 20%-peek paa smalle skaerme. Loftet paa 420px * findes, fordi 1:1 ellers goer billedet ~640px hoejt paa desktop. */ .oh-card{flex:0 0 min(80%,420px);scroll-snap-align:start;display:flex;flex-direction:column;background:var(--paper)} .oh-card__media{aspect-ratio:1/1;overflow:hidden;background:var(--paper);border:1px solid var(--line);box-sizing:border-box} .oh-card__media img{width:100%;height:100%;object-fit:cover;display:block} .oh-card__body{display:flex;flex-direction:column;flex:1;padding:20px 0 0} .oh-site .oh-card__title{margin:0 0 10px} .oh-site .oh-card__text{flex:1;margin:0 0 20px;font-size:14px;line-height:1.55} .oh-card__cta{margin:0} /* Værksteder ----------------------------------------------------------------- */ /* Hvert vaerksted er sin egen .oh-block i sin egen .oh-section, saa * afstanden imellem dem kommer fra sektionsrytmen (96px, se fase 7 H.2). * En margin her ville baade laegge oveni og slaa .oh-block's margin:0 auto. */ .oh-site .oh-workshop__title{margin:16px 0 8px} .oh-site .oh-workshop__equipment{font-size:14px;color:var(--muted);font-style:italic} .oh-workshop p{margin:0 0 12px} /* Slider --------------------------------------------------------------------- */ .oh-slider{position:relative;width:100%;height:420px;border:1px solid var(--ink);box-sizing:border-box;overflow:hidden} .oh-slider__track{display:flex;width:100%;height:100%;touch-action:pan-y;transition:transform .5s cubic-bezier(.2,.7,.2,1)} .oh-slider--reduced-motion .oh-slider__track{transition:none} .oh-slider__slide{position:relative;min-width:100%;height:100%;overflow:hidden} .oh-slider__slide img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none} /* Én kontrolraekke i bunden: forrige venstre, prikker midt, naeste hoejre. */ .oh-slider__controls{ position:absolute;left:0;right:0;bottom:16px;z-index:2; box-sizing:border-box;padding:0 16px; display:flex;align-items:center;justify-content:space-between;gap:16px; } .oh-slider__arrow{ display:inline-flex;align-items:center;justify-content:center; padding:6px 13px;border-radius:999px;cursor:pointer; background:rgba(246,246,246,.92); border:1px solid var(--ink);color:var(--ink); font-family:"Space Grotesk",sans-serif;font-size:9px;font-weight:500; letter-spacing:.12em;text-transform:uppercase; } .oh-slider__dots{display:flex;gap:8px} .oh-slider__dot{ width:10px;height:10px;padding:0;border-radius:999px;cursor:pointer; border:1px solid var(--ink);background:var(--paper); } /* JS saetter aria-current; .is-active understoettes ogsaa. */ .oh-slider__dot.is-active, .oh-slider__dot[aria-current="true"]{background:var(--accent)} .oh-credit{position:absolute;left:0;right:0;bottom:0;margin:0;padding:8px 12px;background:var(--paper);border-top:1px solid var(--line);font-size:12px} /* Personer -------------------------------------------------------------------- */ .oh-people{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:0;padding:0;list-style:none} /* Kortet har ingen ramme — den sidder kun om billedet, og teksten staar flush * med billedets kant. 1:1 og 14px mellem tekstlinjerne er designkildens. */ .oh-pcard{display:flex;flex-direction:column;gap:14px;background:var(--paper);padding:0 0 24px} .oh-pcard__media{aspect-ratio:1/1;overflow:hidden;background:var(--paper);border:1px solid var(--line);box-sizing:border-box} .oh-pcard__media:empty{display:flex;align-items:center;justify-content:center} .oh-pcard__media img{width:100%;height:100%;object-fit:cover;display:block} .oh-pcard__body{display:flex;flex-direction:column;gap:14px;padding:0} .oh-site .oh-pcard__role{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .oh-site .oh-pcard__name{margin:0} .oh-site .oh-pcard__title{margin:0;font-size:14px;line-height:1.5} /* 14px body-gap + 2px = designets 16px fra titel ned til foerste kontaktlinje. */ .oh-pcard__contact{display:flex;flex-direction:column;gap:6px;margin-top:2px} .oh-pcard__contact a{font-size:13px;line-height:1.5;text-decoration:none} .oh-pcard__contact a:hover,.oh-pcard__contact a:focus-visible{text-decoration:underline;text-underline-offset:3px} /* Kontaktsektion ---------------------------------------------------------------- */ .oh-contact__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap} .oh-contact__copy{flex:1 1 380px} /* WordPress' block-gap giver knappen 24px margin-top som andet barn. I raekken * taeller margin med i align-items:center, saa knappen lander 12px under midten; * i kolonnen paa mobil laegger den sig oven i gap'et, saa afstanden bliver 56px * i stedet for de 32 der staar. Nulstilles begge steder. */ .oh-contact__inner > .oh-button{margin-top:0} .oh-contact__copy h2{margin:0} /* Header ------------------------------------------------------------------------ */ .oh-bar{position:relative;z-index:10;background:var(--paper);border-bottom:1px solid var(--line);padding:0 32px} .oh-bar__inner{box-sizing:border-box;max-width:var(--wrap-wide);margin:0 auto;min-height:76px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:16px 0} .oh-logo{display:flex;align-items:flex-end;line-height:0;text-decoration:none} .oh-logo img{display:block;height:33px;width:auto} /* Burger-toggle. Skjult over 680px; panelet aabnes i mobilblokken nederst. */ .oh-nav-toggle{ display:none;box-sizing:border-box; width:44px;height:44px;margin-right:-10px; align-items:center;justify-content:center; padding:0;border:0;background:none;color:var(--ink);cursor:pointer; } .oh-nav-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .oh-nav-toggle__box, .oh-nav-toggle__box::before, .oh-nav-toggle__box::after{display:block;width:22px;height:1px;background:currentColor} .oh-nav-toggle__box{position:relative} .oh-nav-toggle__box::before,.oh-nav-toggle__box::after{ content:"";position:absolute;left:0;transition:top .16s ease,transform .16s ease; } .oh-nav-toggle__box::before{top:-7px} .oh-nav-toggle__box::after{top:7px} /* Aaben tilstand: stregerne bliver til et kryds, saa knappen ogsaa laeses som luk. */ .oh-nav-toggle[aria-expanded="true"] .oh-nav-toggle__box{background:transparent} .oh-nav-toggle[aria-expanded="true"] .oh-nav-toggle__box::before{top:0;transform:rotate(45deg)} .oh-nav-toggle[aria-expanded="true"] .oh-nav-toggle__box::after{top:0;transform:rotate(-45deg)} .oh-nav__list{display:flex;align-items:flex-end;gap:36px;flex-wrap:wrap;margin:0;padding:0;list-style:none} .oh-nav__list li{margin:0} .oh-nav__list a{font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none} .oh-nav__list a:hover,.oh-nav__list a:focus-visible,.oh-nav__list a[aria-current="page"],.oh-nav__list .current-menu-item > a{color:var(--ink-hover);text-decoration:underline;text-underline-offset:5px} /* Footer -------------------------------------------------------------------------- */ .oh-footer{position:relative;z-index:1;background:var(--paper);border-top:1px solid var(--line);padding:0 32px 32px;margin-top:calc(48px + var(--oh-snap,0px))} .oh-footer__cols{display:grid;grid-template-columns:1fr auto;gap:48px;padding:40px 0} .oh-footer__cols-right{display:flex;gap:64px;flex-wrap:wrap} /* h2- og p-reglerne er kvalificeret med .oh-site, fordi .oh-site h2 (28px/400) * og .oh-site p (15px/1.6) staar senere i filen med samme specificitet og * ellers vinder. Roer man praefikset, falder footerens typografi tilbage til * sitets grundstoerrelser. */ .oh-site .oh-footer h2{margin:0;font-family:"Space Grotesk",sans-serif;font-size:24px;font-weight:500;line-height:1.2;letter-spacing:normal;text-transform:none;text-wrap:balance} .oh-footer h4{margin:0 0 6px;font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.12em} .oh-site .oh-footer p{margin:0 0 6px;font-size:14px;line-height:1.55} .oh-footer__cols-right a{font-size:13px} .oh-site .oh-footer__cols-right p{margin:0 0 10px} /* Genveje og Foelg med er nu menuer, altsaa

frem for

. Samme rytme. */ .oh-footer__nav{list-style:none;margin:0;padding:0} .oh-footer__nav li{margin:0 0 10px} .oh-footer__nav li:last-child{margin-bottom:0} .oh-footer__nav a{font-size:13px} .oh-site .oh-footer__cols-right p:last-child{margin-bottom:0} .oh-footer a{text-decoration:none} .oh-footer a:hover,.oh-footer a:focus-visible{text-decoration:underline;text-underline-offset:3px} .oh-footer__bottom{margin-top:0;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:16px 0 0;font-size:12px} /* Nulstiller WordPress' block-gap, der ellers giver logoet 24px margin-top. */ .oh-footer__bottom > *{margin-top:0} .oh-site .oh-footer__bottom p{margin:0;font-size:12px} .oh-footer__bottom img.oh-footer__partner-logo{height:64px;width:auto;display:block} /* --------------------------------------------------------------------------- * Knap — designets eneste variant, PRD afsnit 3 * ------------------------------------------------------------------------- */ .oh-button, .oh-site .wp-block-button__link{ display:inline-flex; align-items:center; justify-content:center; padding:8px 17px; border:1px solid var(--ink); border-radius:999px; background:var(--accent); color:var(--ink); font-family:"Space Grotesk",sans-serif; font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; white-space:nowrap; transition:background .18s ease; } .oh-button:hover, .oh-site .wp-block-button__link:hover{background:var(--accent-hover);color:var(--ink);text-decoration:none} /* --------------------------------------------------------------------------- * Typeskala — PRD afsnit 3 * ------------------------------------------------------------------------- */ .oh-site h1,.oh-hero__title{font-family:"Space Grotesk",sans-serif;font-size:36px;font-weight:400;line-height:40px;margin:0} .oh-site h2{font-family:"Space Grotesk",sans-serif;font-size:28px;font-weight:400;line-height:1.2;margin:0} .oh-site h3{font-family:"Space Grotesk",sans-serif;font-size:22px;font-weight:500;line-height:1.2;margin:0} .oh-site p{font-size:15px;line-height:1.6} /* margin:0 ovenfor er rigtigt i flex-containere, der selv saetter gap, men i * .entry-content er WordPress' block-gap afstandsmekanismen — og den taber til * .oh-site h2 (0,1,1 mod :where() 0,0,0). Uden dette staar en h2 klistret op ad * blokken foer sig. 20px er designkildens gap i slider-sektionen. */ .oh-site .entry-content h2:not(:first-child){margin-top:20px} .oh-site .oh-kicker{font-family:"Space Mono",ui-monospace,monospace;font-size:14px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)} /* --------------------------------------------------------------------------- * Arrangementer — PRD fase 6 * ------------------------------------------------------------------------- */ /* Hvert arrangement er sin egen blok, paa alle bredder. Den ydre .oh-block--events er derfor ren gennemgang: den holder bredden paa 880px, men er hverken papir eller glorie. Baren (filter + overskrift) er sin egen blok; panelet er kun en gruppering og har ingen flade. */ .oh-block--events{background:none;padding:0} .oh-block--events::before{content:none} .oh-events{display:flex;flex-direction:column;gap:96px} .oh-events__bar{ box-sizing:border-box; position:relative;z-index:1; background:var(--paper); padding:var(--block-pad); } .oh-events__bar > *:first-child{margin-top:0} .oh-events__bar > *:last-child{margin-bottom:0} /* Baren har to overskrifter, hvoraf kun én vises ad gangen. :last-child rammer den skjulte, saa den synlige ville beholde sin bundmargin. */ .oh-events__bar > [data-oh-panel]{margin-bottom:0} .oh-events__filter{display:flex;gap:12px;margin:0 0 24px} .oh-filter{ display:inline-flex;align-items:center;justify-content:center; padding:6px 13px;border:1px solid var(--ink);border-radius:999px; background:var(--paper);color:var(--ink);cursor:pointer; font-family:"Space Grotesk",sans-serif;font-size:9px;font-weight:500; letter-spacing:.12em;text-transform:uppercase; } .oh-filter.is-active{background:var(--accent)} .oh-filter:focus-visible, .oh-slider__arrow:focus-visible, .oh-slider__dot:focus-visible, .oh-button:focus-visible, .oh-button--past:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .oh-site .oh-events__heading{margin:0 0 20px} .oh-events__list{display:flex;flex-direction:column;gap:96px;margin:0;padding:0;list-style:none} /* To kolonner: tekst til venstre, billede til hoejre. Den centrerede datoblok er udgaaet — datoen er nu underrubrik i .oh-event__meta. */ .oh-event{ box-sizing:border-box; display:flex;align-items:stretch;justify-content:space-between;gap:40px; } .oh-event__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px} .oh-site .oh-event__meta{ margin:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap; font-family:"Space Mono",ui-monospace,monospace;font-size:12px; letter-spacing:.12em;text-transform:uppercase;color:var(--muted); } .oh-event__badge{ display:inline-flex;align-items:center;padding:2px 10px; border:1px solid var(--muted);border-radius:999px; font-family:"Space Mono",ui-monospace,monospace;font-size:11px; letter-spacing:.12em;text-transform:uppercase;color:var(--muted); } .oh-site .oh-event__title{margin:0;font-size:24px;font-weight:500;line-height:1.2} /* Maks fire linjer, derefter ellipse. Klippes paa den renderede linje, ikke paa ordantal, saa den holder uanset kortbredde. Teksten bliver i DOM'en — skaermlaesere faar den fulde beskrivelse. */ .oh-site .oh-event__text{ margin:4px 0 0;font-size:14px;line-height:1.55; display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:4;line-clamp:4;overflow:hidden; } .oh-event__cta{margin:auto 0 0} /* flugter med bunden af billedet */ .oh-event__thumb{flex:0 0 275px;width:275px;height:275px;border:1px solid var(--line);overflow:hidden} .oh-event__thumb img{width:100%;height:100%;object-fit:cover;display:block} /* Afholdt. Farven staar aldrig alene: den diagonale streg paa knappen og "Afholdt"-labelen i datoblokken baerer betydningen. */ .oh-event--past{color:var(--muted)} .oh-event--past .oh-event__thumb{border-color:var(--muted)} /* CTA i afholdt-tilstand: transparent outline med diagonal 1px-streg, ikke en fyldt pille med line-through. */ .oh-button--past{ align-self:flex-start; position:relative; background:var(--paper); border:1px solid var(--muted); color:var(--muted); text-decoration:none; } .oh-button--past > span{position:relative;z-index:1} .oh-button--past::after{ content:"";position:absolute;inset:0; /* Hjoerne-noegleordet navngiver gradientens AKSE; stregen loeber vinkelret paa den. 'to top right' giver derfor en streg fra oeverste venstre til nederste hoejre. Verificeret visuelt, ikke udledt. border-radius:inherit lader pillens kant skaere stregen af. */ border-radius:inherit; background:linear-gradient(to top right, transparent calc(50% - 0.5px), var(--muted) calc(50% - 0.5px), var(--muted) calc(50% + 0.5px), transparent calc(50% + 0.5px)); } .oh-button--past:hover{background:#e9e9e9;color:var(--muted)} /* Galleri med kreditering ---------------------------------------------------- */ /* Designkildens gallerimaal. Sektion- og panelvaerdierne ligger som varianter, * fordi .oh-section, .oh-block og .oh-section__title deles af hele sitet. */ .oh-block--gallery{display:flex;flex-direction:column;gap:32px;padding:32px 40px 48px} .oh-site .oh-block--gallery .oh-section__title{margin:0;text-align:center} .oh-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none} .oh-gallery__item{display:flex;flex-direction:column;gap:8px;min-width:0} .oh-gallery__media{height:190px} .oh-gallery__media img{width:100%;height:100%;object-fit:cover;display:block;border:1px solid var(--ink);box-sizing:border-box} .oh-site .oh-gallery__credit{margin:0;padding:0;border:0;font-size:12px;color:var(--ink)} /* --------------------------------------------------------------------------- * Animationer — PRD fase 7 * ------------------------------------------------------------------------- */ .oh-anim{max-width:100%;flex:0 0 auto} .oh-anim > *{display:block;width:100%;height:100%} .oh-page-hero__row{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap} .oh-page-hero__copy{flex:1 1 380px;min-width:0} /* Ordrotationen staar stille ved reduced motion — de fem web components haandterer det selv. */ @media (prefers-reduced-motion:reduce){ .oh-word--in{animation:none} .oh-slider__track{transition:none} } /* Hit-targets og sliderhoejde for de klasser fase 7-rettelserne beroerer. 9px chips og 10px prikker beholder deres visuelle stoerrelse; trykfeltet udvides usynligt til 44px. */ @media (max-width:780px){ .oh-filter{min-height:44px} .oh-slider{height:320px} .oh-slider__dot{position:relative} .oh-slider__dot::before{ content:"";position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);width:44px;height:44px; } } @media (max-width:520px){ .oh-slider{height:240px} } /* --------------------------------------------------------------------------- * Mobil, under 680px — fase 7 afsnit I. * * Blokken staar sidst med vilje: flere af komponentreglerne er kvalificeret * med .oh-site (0,2,0), saa mobiloverstyringerne skal have mindst samme * specificitet OG komme senere for at vinde. Se afsnit H.1. * ------------------------------------------------------------------------- */ @media (max-width:680px){ :root{ --block-pad:32px 20px; /* I.6: panelpadding vandret 40 -> 20 */ --halo:16px; /* I.5: glorien maa ikke naa laengere ud end sektionens vandrette padding, ellers flyder den ud over kanten */ } /* I.6 sektionspadding vandret 32 -> 16 --------------------------------- */ .oh-section,.oh-hero{padding-left:16px;padding-right:16px} /* Blokafstand 96 -> 48px. Afstanden er sektionens bundpadding + WordPress' block-gap + naeste sektions toppadding. Block-gap nulstilles her, saa de to paddings alene styrer tallet: 24 + 0 + 24 = 48. */ .oh-section,.oh-hero{margin-top:0;padding-top:24px;padding-bottom:24px} /* Header -> foerste blok: 96 -> 48px. main bidrager med 24px block-gap, saa side-heroens toppadding skal ned fra 72 til 24. Uden denne linje ville .oh-page-hero's baseregel paa 72px vinde. */ .oh-page-hero{padding-top:24px} /* Blok -> footer: 96 -> 48px. Sektionens bundpadding giver 24, footeren de sidste 24. --oh-snap laegges stadig oveni af grid-snap.js. */ .oh-footer{margin-top:calc(24px + var(--oh-snap,0px))} /* Prik-animationen over overskriften paa undersiderne. To ting foelger med skiftet til kolonne: - flex-basis 380px paa copy var taenkt som BREDDE i en raekke; i en kolonne bliver den til hoejde og tvinger blokken 380px hoej. - block-gap regner i DOM-raekkefoelge, ikke visuel. Animationen er andet barn og faar derfor 24px margin-top, selv om order goer den til den foerste man ser. */ .oh-page-hero__row{flex-direction:column;align-items:flex-start} .oh-page-hero__copy{order:2;flex:0 0 auto} .oh-page-hero__row .oh-anim{order:1;margin-top:0} .oh-bar{padding-left:16px;padding-right:16px} .oh-footer{padding-left:16px;padding-right:16px} /* I.1 header og burgermenu -------------------------------------------- */ /* 44px toggle + 2x10px padding = 64px. Uden at saenke padding'en fra 16px ville hoejden blive 76px uanset min-height, fordi toggle'en er hoejest. */ .oh-bar__inner{min-height:64px;padding:10px 0} .oh-logo img{height:28px} .oh-nav-toggle{display:inline-flex} /* Panelet er en efterkommer af .oh-bar med z-index 19. Logo og toggle er statiske og males derfor UNDER det. De skal loeftes eksplicit, ellers forsvinder krydset og logoet naar panelet aabnes. */ .oh-logo,.oh-nav-toggle{position:relative;z-index:21} /* Headeren bliver fixed mens panelet er aabent, saa logo og lukkeknap er naabare uanset scrollposition. Bund-stregen fjernes, saa der ikke staar to vandrette linjer lige under hinanden. */ .oh-bar.is-nav-open{position:fixed;top:0;left:0;right:0;z-index:20;border-bottom:0} .oh-nav{ position:fixed;inset:0;z-index:19; background:var(--paper); padding-top:var(--oh-bar-h,64px); opacity:0;visibility:hidden; transition:opacity .16s ease,visibility 0s linear .16s; } .oh-nav.is-open{opacity:1;visibility:visible;transition:opacity .16s ease,visibility 0s} .oh-nav__list{flex-direction:column;align-items:stretch;gap:0;padding:8px 16px} .oh-nav__list li{margin:0} .oh-nav__list a{display:flex;align-items:center;min-height:48px;font-size:20px} /* I.6 typografi -------------------------------------------------------- */ .oh-site h1,.oh-site .oh-hero__title{font-size:30px;line-height:34px} .oh-site h2{font-size:24px} .oh-site .oh-contact__copy h2{font-size:26px;line-height:30px} /* Kontakt-CTA'en centreres paa mobil — baade tekst og knap. flex-basis 380px paa copy var taenkt som BREDDE i en raekke; i en kolonne bliver den til hoejde og ville polstre blokken. Samme faelde som i side-heroen. */ .oh-contact__inner{flex-direction:column;align-items:center;text-align:center} .oh-contact__copy{flex:0 0 auto} /* I.3 piller: box-sizing FOERST, ellers laegger min-height sig oven paa padding og pillen bliver 66px hoej i stedet for 44px ------------------ */ .oh-button,.oh-site .wp-block-button__link,.oh-filter{ box-sizing:border-box; min-height:44px; padding:0 20px; font-size:12px; } /* Undtagelsen: tre sliderkontroller kan ikke vaere fuldhoeje paa 366px uden at roere hinanden. De ligger oven paa et billede. */ .oh-slider__arrow{box-sizing:border-box;min-height:28px;padding:0 12px;font-size:10px} /* I.2 eventkort stakket ------------------------------------------------ */ /* Ingen ramme om kortet paa mobil — enklere udtryk. Thumbnailens egen ramme bliver, saa billedet stadig har en kant. */ /* Billedet foerst, derefter dato, titel, tekst, knap — samme raekkefoelge som foer. Kun kilden til datoen er flyttet ind i .oh-event__body. */ .oh-event{flex-direction:column;align-items:stretch;gap:14px} .oh-event__thumb{order:1;flex:none;width:100%;height:auto;aspect-ratio:1/1} .oh-event__body{order:2;gap:10px} .oh-site .oh-event__title{font-size:22px} /* margin:auto fra desktop ville skubbe knappen til bunden af en kolonne uden defineret hoejde. Nulstilles her. */ .oh-event__cta{display:block;margin:4px 0 0} .oh-event__cta .oh-button{display:flex;width:100%} /* I.4 kontaktkort én kolonne ------------------------------------------- */ .oh-people{grid-template-columns:1fr;gap:32px} .oh-pcard{min-width:0;gap:8px} .oh-site .oh-pcard__role{margin-top:8px} .oh-pcard__contact{gap:4px} /* I.6 slider: fast hoejde bliver til kvadrat --------------------------- */ .oh-slider{height:auto;aspect-ratio:1/1} .oh-slider__controls{bottom:12px;padding:0 12px} /* I.6 footer én kolonne ------------------------------------------------ */ .oh-footer__cols{grid-template-columns:1fr;gap:32px} .oh-footer__cols-right{flex-direction:column;gap:32px} .oh-footer__bottom img.oh-footer__partner-logo{height:52px} } @media (max-width:680px) and (prefers-reduced-motion:reduce){ .oh-nav,.oh-nav-toggle__box::before,.oh-nav-toggle__box::after{transition:none} } /* Arrangementer paa mobil: filter + overskrift isoleret i egen blok. Den ydre .oh-block--events holder op med at vaere et panel og bliver ren gennemgang, saa baren og listen kan blive hver sin. Glorien arves fra selektorlisten ved .oh-block::before. */ @media (max-width:680px){ /* 48px foelger rytmen mellem alle andre blokke paa mobil, og overstiger de to glorier a 16px, saa gitteret naar at komme til syne mellem kortene. */ .oh-events{gap:48px} .oh-events__list{gap:48px} } /* Galleriet paa mobil: ét billede pr. raekke. Tre spor paa 318px giver ~90px brede billeder — for smaa til at vise noget. Kun mobil; kilden fastholder tre kolonner paa desktop. */ @media (max-width:680px){ .oh-gallery{grid-template-columns:1fr} } /* Forsidens collage paa mobil: to billeder pr. raekke. De forskudte hoejder og spring fra designkilden slaas fra — i to spor ville uens hoejder give ujaevne raekker, fordi hver raekke tager hoejde efter sit hoejeste element. Kvadratisk beskaering matcher de oevrige mobilbilleder (eventkort, personkort, tilbudskort). */ @media (max-width:680px){ .oh-collage{grid-template-columns:repeat(2,1fr);padding-top:0} .oh-collage__item{grid-column:auto;height:auto;aspect-ratio:1/1;margin-top:0} }