/* Theme Name: Sille Schnoor Theme URI: https://silleschnoor.dk Author: Brødrene Frosch Author URI: https://broedrenefrosch.dk Description: Lyst "gallery paper"-tema til skuespiller- og castingsite. Varm ivory baggrund, teater-rød accent, guld-detaljer. Bygget til Sille Schnoor Nielsen og designet så det kan genbruges som skabelon. Version: 1.23.5 Requires at least: 6.4 Tested up to: 7.0 Requires PHP: 7.4 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: silleschnoor Tags: portfolio, one-column, custom-menu, featured-images, translation-ready */ /* ============================================================ tokens ==== */ :root{ --bg:#F3EFE6; --bg-2:#EAE3D5; --card:#FBF8F2; /* Formularernes tre lag: siden (--bg), boksen, feltet. Boksen er et trin moerkere end siden, feltet det lyse papir, man skriver paa. */ --boks:#ECE6DA; --felt:var(--card); --text:#241E17; --text-soft:#6E6355; --line:rgba(36,30,23,.14); --line-strong:rgba(36,30,23,.28); --accent:#7E1B2B; --gold:#9A7638; --max:1240px; --strip:#17120F; --strip-line:rgba(251,248,242,.10); --shadow:0 26px 60px -34px rgba(36,30,23,.55); --serif:'Marcellus',Georgia,serif; --sans:'Mulish',system-ui,-apple-system,sans-serif; --display:'Oswald','Helvetica Neue',sans-serif; /* Ét hjørne-tal for hele sitet. Knapper, felter og kort deler det, saa de ikke kan komme til at staa med hver sit. Piller (99px) og cirkler (50%) er noget andet og hoerer ikke med her. */ /* Displayskriftens vaegt ét sted. Oswald er variabel, saa et hvilket som helst tal rammer praecist i stedet for at runde til naermeste fil. */ --display-vaegt:350; /* Kun eyebrow og knapper stod tungere end resten fra starten. */ --display-vaegt-kraftig:400; --radius:5px; --radius-flyder:14px; } /* ============================================================== base ==== */ *{margin:0;padding:0;box-sizing:border-box} /* hidden betyder skjult. Browserens egen [hidden]-regel er kun display:none, og den taber til den foerste den bedste .klasse{display:grid} laengere nede. Det har allerede kostet to fejl her — en foldet blok, der aldrig foldede sammen igen. Saa vinder attributten, uanset hvad der ellers staar. */ [hidden]{display:none!important} html{scroll-behavior:smooth;scroll-padding-top:6rem} body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:300;line-height:1.65;overflow-x:hidden} ::selection{background:var(--accent);color:#FBF8F2} img{display:block;max-width:100%;height:auto} a{color:inherit} svg{display:block} /* Papirkorn — dekorativt, ligger over alt og fanger ingen klik. Uden mix-blend-mode: et fast lag over hele skaermen, der blandes med alt under sig, tvinger browseren til at male hele siden om ved hver scroll. */ body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;opacity:.025; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")} @media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto}} .skip-link{position:absolute;left:-9999px;top:0;z-index:5000;background:var(--accent);color:#FBF8F2;padding:.9rem 1.4rem;font-family:var(--display);font-weight:var(--display-vaegt);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;text-decoration:none} .skip-link:focus{left:1rem;top:1rem} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} /* ======================================================== typografi ==== */ .eyebrow{font-family:var(--display);font-weight:var(--display-vaegt-kraftig);text-transform:uppercase;letter-spacing:.34em;font-size:.72rem;color:var(--accent)} h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.12;color:var(--text)} h2{font-size:clamp(2rem,4.5vw,3.4rem);letter-spacing:.01em} h3{font-size:clamp(1.4rem,2.5vw,1.9rem)} .wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)} .section{padding:clamp(4rem,8vw,7rem) 0;position:relative} .lead{color:var(--text-soft);font-size:1.05rem;max-width:38rem} .divider{height:1px;background:var(--line);max-width:var(--max);margin:0 auto} /* =========================================================== knapper ==== */ .btn{font-family:var(--display);font-weight:var(--display-vaegt-kraftig);font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;padding:.95rem 2.1rem;text-decoration:none;border-radius:var(--radius);transition:all .25s;display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;border:1px solid transparent;background:none;color:var(--text)} .btn-solid{background:var(--accent);color:#FBF8F2;border-color:var(--accent)} .btn-solid:hover{filter:brightness(1.12);transform:translateY(-1px)} .btn-ghost{border-color:var(--accent);color:var(--accent)} .btn-ghost:hover{border-color:var(--text);color:var(--text)} .btn-gold{border-color:var(--gold);color:var(--gold)} .btn-gold:hover{background:var(--gold);color:#FBF8F2} /* ========================================================== navigation == */ nav.site{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:1.35rem clamp(1.5rem,4vw,3.25rem);background:transparent;transition:background .3s,border-color .3s,box-shadow .3s;border-bottom:1px solid transparent} nav.site.scrolled{background:rgba(243,239,230,.94);backdrop-filter:blur(8px);border-bottom-color:var(--line);box-shadow:0 8px 30px -22px rgba(36,30,23,.5)} .logo{font-family:var(--serif);font-size:1.5rem;letter-spacing:.28em;text-transform:uppercase;text-decoration:none;color:var(--text)} .logo span{color:var(--accent)} .navlinks{display:flex;gap:2.1rem;align-items:center;list-style:none} .navlinks a{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--text);opacity:.72;transition:opacity .2s,color .2s;position:relative;padding:.2rem 0;display:inline-block} .navlinks a:hover,.navlinks a:focus-visible{opacity:1;color:var(--accent)} .navlinks .current-menu-item>a,.navlinks .current_page_item>a,.navlinks a.active{opacity:1} .navlinks .current-menu-item>a::after,.navlinks .current_page_item>a::after,.navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--accent)} .navlinks a.btn-login{background:var(--accent);border:1px solid var(--accent);color:#FBF8F2!important;opacity:1!important;padding:.72rem 1.9rem;margin-left:1.3rem;border-radius:var(--radius);line-height:1;transition:filter .2s,transform .2s!important} .navlinks a.btn-login:hover{filter:brightness(1.15);transform:translateY(-1px)} .btn-login::after,.btn-login.active::after{display:none!important} /* Kontrolpanelet laa her som en fyldt knap i logoets moerke ved siden af den roede »Min profil«. Den er flyttet til footeren: to fyldte knapper gjorde menuraekken 110 px bredere, og saa braekkede den til to linjer mellem 1080 og 1440 px paa hver eneste side, naar Sille var logget ind. */ .navlinks a.btn-login{white-space:nowrap} .burger{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer;line-height:1; /* Selve tegnet er 24 px hoejt. Knappen er den, en tommelfinger skal ramme, og den er 44 — ellers rammer man logoet ved siden af. */ min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:0} /* Menuen var seks ord midt paa en flade — den lignede en fejl mere end en menu. Nu er den et ark: logo og en vej ud i toppen, punkterne under hinanden med en haarfin streg imellem, og handlingen nederst. Samme opbygning som en trykt indholdsfortegnelse, hvilket er hele sitets sprog. */ /* Over den faste header, ikke under. Med z-index 999 laa headeren oeverst, og saa sad menuens egen LUK-knap bag den og kunne ikke rammes. */ .mobile-menu{position:fixed;inset:0;z-index:1100;background:var(--bg);display:none;flex-direction:column; padding:.9rem clamp(1.5rem,6vw,2.5rem) 2.5rem;overflow-y:auto;overscroll-behavior:contain} .mobile-menu.open{display:flex} .mm-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem} .mm-top .logo{font-size:1rem} .mm-luk{display:flex;align-items:center;gap:.6rem;background:none;border:none;cursor:pointer;color:var(--text); font-family:var(--display);font-weight:var(--display-vaegt-kraftig);font-size:.66rem;letter-spacing:.28em; text-transform:uppercase;padding:.4rem 0} .mm-luk:hover{color:var(--accent)} .mm-kryds{font-family:var(--serif);font-size:1.5rem;line-height:1;letter-spacing:0} .mobile-links{list-style:none;margin:0} .mobile-links li{border-bottom:1px solid var(--line)} .mobile-links li:first-child{border-top:1px solid var(--line)} .mobile-links a{display:block;padding:.85rem .1rem;font-family:var(--serif);font-size:1.5rem; line-height:1.2;letter-spacing:.01em;color:var(--text);text-decoration:none;transition:color .2s} .mobile-links a:hover,.mobile-links a:focus-visible{color:var(--accent)} .mobile-links .current-menu-item>a,.mobile-links .current_page_item>a{color:var(--accent)} /* Log ud står centreret under handlingen, lille og i accenten: en vej ud og ikke et punkt. */ .mm-log-ud{display:flex;justify-content:center;margin:.5rem 0 0;text-align:center} .mm-log-ud a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display); font-weight:var(--display-vaegt-kraftig);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase; color:var(--accent);text-decoration:none} .mm-log-ud a:hover,.mm-log-ud a:focus-visible{color:var(--text)} /* Log ind er ikke et menupunkt paa linje med de andre — det er handlingen. */ .mobile-links li:has(a.btn-login){border:none;margin-top:1.4rem} .mobile-links a.btn-login{font-family:var(--display);font-weight:var(--display-vaegt-kraftig);font-size:.74rem; letter-spacing:.26em;text-transform:uppercase;background:var(--accent);color:#FBF8F2;text-align:center; padding:1.15rem 2rem;border-radius:var(--radius);transition:filter .2s} .mobile-links a.btn-login:hover{filter:brightness(1.15);color:#FBF8F2} /* Menuen fik et punkt mere med nyhederne, og den wrappede til to linjer lige foer burgeren overtager. Afstandene strammes paa de smalle desktopbredder frem for at sende flere skaerme over i burgeren. */ /* Strammes tidligere end foer — to knapper fylder mere end én. */ @media(max-width:1400px){.navlinks{gap:1.5rem}.navlinks a.btn-login{margin-left:.8rem;padding:.72rem 1.4rem}} @media(max-width:1240px){.navlinks{gap:1.1rem}.navlinks a{font-size:.82rem}.navlinks a.btn-login{padding:.66rem 1.1rem;font-size:.7rem}.logo{font-size:1.34rem}} @media(max-width:1060px){.navlinks{display:none}.burger{display:inline-flex}.logo{font-size:1.28rem}} @media(max-width:400px){.logo{font-size:1.06rem;letter-spacing:.2em}} /* ========================================================= sidehoved ==== */ .page-hero{padding:9rem 0 3rem;border-bottom:1px solid var(--line)} /* Formularen skal ikke ligge en hel skaerm nede. Heroen har allerede sagt, hvad siden er — luften derimellem maa gerne vaere halvt saa hoej. */ .cast-opret{padding-top:clamp(2rem,4vw,3.5rem)} .page-hero .eyebrow{margin-bottom:1rem} .page-hero h1{font-size:clamp(2.6rem,7vw,5rem);letter-spacing:.02em} .page-hero p{margin-top:1.2rem} .hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.2rem} /* Hero med medie: tekst til venstre, billede til højre. */ .page-hero.har-medie{padding-bottom:clamp(3rem,6vw,5rem)} .page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} @media(max-width:900px){.page-hero-grid{grid-template-columns:1fr}.page-hero-medie{order:-1}} .page-hero .tag-row{justify-content:flex-start;margin-top:1rem} .page-hero .tag-intro{margin-top:2.4rem;font-family:var(--display);font-weight:var(--display-vaegt);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-soft)} /* Farven baerer linket i stedet for stregen: under en versallinje med bogstavspor ligger understregningen for taet paa bogstaverne. */ .page-hero .tag-intro a{color:var(--accent);text-decoration:none;transition:opacity .2s} .page-hero .tag-intro a:hover,.page-hero .tag-intro a:focus-visible{opacity:.7;text-decoration:underline} /* ============================================================ footer ==== */ footer.site{padding:clamp(3.5rem,7vw,5.5rem) 0 2.5rem;border-top:1px solid var(--line);background:var(--bg-2)} .foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.3fr;gap:clamp(2rem,4vw,3.5rem)} @media(max-width:1000px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}.foot-brand{grid-column:1/-1}} /* Paa en telefon blev de fire blokke til én lang soejle, man skulle scrolle igennem. Sider staar nu til venstre og faar hoejden, Kontakt og Foelg stables til hoejre — samme indhold, halvt saa langt. */ @media(max-width:640px){ .foot-grid{grid-template-columns:1fr 1fr;gap:2rem 1.6rem; grid-template-areas:"brand brand" "sider kontakt" "sider foelg"} /* Med to smalle spalter laeser venstrestillet tekst som om den er skubbet ud i kanten. Centreret staar de to spalter som et opslag. */ footer.site{text-align:center} .foot-politik{justify-content:center} .foot-some{justify-content:center} .foot-some a{justify-content:center} .legal{justify-content:center;text-align:center} .legal-venstre{justify-content:center} .legal-credit{text-align:center} .foot-brand{grid-area:brand} .foot-sider{grid-area:sider} .foot-kontakt{grid-area:kontakt} .foot-foelg{grid-area:foelg;align-self:start} /* Navnet ved siden af ikonet gav fire raekker under hinanden. Ikonerne er genkendelige i sig selv — uden teksten kan de staa to og to. */ .foot-some{grid-template-columns:repeat(2,max-content);gap:.9rem} .foot-some-navn{display:none} } .foot-navn{font-family:var(--serif);font-size:1.5rem;letter-spacing:.18em;text-transform:uppercase;line-height:1.15} .foot-navn span{color:var(--accent)} .foot-eyebrow{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-top:.5rem} .foot-om{color:var(--text-soft);margin-top:1.2rem;max-width:26rem;font-size:.95rem} .foot-grid .eyebrow{margin-bottom:1rem} .foot-kontakt-navn{font-family:var(--serif);font-size:1.02rem;padding:.3rem 0;color:var(--text)} /* Footerens overskrift er semantisk et h2 (den følger sidens h1), men skal tegne som et h3 — ellers overdøver den sidens egen overskrift. */ footer.site h2,footer.site h3{font-size:clamp(1.4rem,2.5vw,1.9rem);margin:.7rem 0 1.1rem} footer.site a{text-decoration:none;opacity:.82;transition:opacity .2s,color .2s} footer.site a:hover{opacity:1;color:var(--accent)} .foot-list{list-style:none} .foot-list a{display:block;padding:.3rem 0;font-size:.92rem} .foot-log-ud{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--line)} .foot-log-ud a{font-size:.84rem} .legal{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:1rem 2rem} .legal-venstre{display:flex;flex-wrap:wrap;gap:.4rem 2rem;font-family:var(--display);font-weight:var(--display-vaegt);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)} /* Krediteringen er en sætning, ikke en etiket — derfor brødtekst og ikke versaler med .3em luft, som ingen gider læse tre linjer af. */ .legal-credit{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-soft);text-align:right} /* SoMe med kanalernes egne farver, under hinanden. */ .foot-some{list-style:none;display:grid;gap:.7rem} /* Hover var et spring paa 3 px, og det kom uden animation: `footer.site a` (0,1,2) satte sin egen `transition` og slog `.foot-some a` (0,1,1), saa loeftet skete i ét billede. Nu bevaeger linket sig ikke — kun ikonet vokser en anelse og faar en blød skygge, og navnet glider over i accenten. Samme praefiks som resten af foden, saa reglen vinder paa specificitet. */ footer.site .foot-some a{display:flex;align-items:center;gap:.75rem;text-decoration:none;opacity:1;transition:none} .foot-some-ikon,.some-ikon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:0 0 auto; transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s cubic-bezier(.22,.61,.36,1)} footer.site .foot-some a:hover .foot-some-ikon,footer.site .foot-some a:focus-visible .foot-some-ikon, .some-raekke a:hover .some-ikon,.some-raekke a:focus-visible .some-ikon{ transform:translateY(-1px) scale(1.07);box-shadow:0 7px 16px -9px rgba(36,30,23,.55)} .foot-some svg{width:17px;height:17px;fill:#fff} /* IMDb's gule kraever moerkt ikon for at kunne ses. */ .foot-some-ikon.er-lys svg{fill:#000} .foot-some-navn{font-size:.92rem;color:var(--text-soft);transition:color .35s ease} footer.site .foot-some a:hover .foot-some-navn,footer.site .foot-some a:focus-visible .foot-some-navn{color:var(--accent)} /* Politikkerne staar under beskrivelsen i venstre spalte. */ /* Én linje per politik, ogsaa paa en bred skaerm: tre korte links i en raekke laeses som ét rod af versaler, mens de under hinanden laeses som tre ting. */ .foot-politik{list-style:none;display:grid;gap:.5rem;justify-items:start;margin-top:1.8rem; font-family:var(--display);font-weight:var(--display-vaegt);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase} /* Ingen streg — heller ikke den, der voksede frem ved hover. Den blev bedt fjernet to gange, og foerste gang blev browserens `text-decoration` slaaet fra, mens svoebet blev staaende som et baggrundsbillede. To maader at tegne den samme streg paa er én at overse. Hover er en farve. */ /* `footer.site a:hover` (0,2,2) slog `.foot-politik a:hover` (0,2,1), saa hover blev aldrig moerk, og hvilen stod med 0,82 i opacitet. Samme praefiks paa begge, saa de vinder paa specificitet og ikke paa held. */ footer.site .foot-politik a{text-decoration:none;background-image:none;color:var(--accent);opacity:1; transition:color .28s cubic-bezier(.22,.61,.36,1)} footer.site .foot-politik a:hover,footer.site .foot-politik a:focus-visible{color:var(--text);opacity:1} /* Sprogskiftet staar under politikkerne — samme form og samme farve som dem. Stregen over er det eneste, der skiller det ud. */ .foot-panel{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line)} .foot-sprog{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase} footer.site .foot-sprog a{text-decoration:none;background-image:none;color:var(--accent);opacity:1; transition:color .28s cubic-bezier(.22,.61,.36,1)} footer.site .foot-sprog a:hover,footer.site .foot-sprog a:focus-visible{color:var(--text);opacity:1} /* Copyright-linjen er Silles dør til kontrolpanelet. Den maa ikke ligne et link: samme farve, ingen streg og ingen hover. */ footer.site .legal-venstre a.legal-doer,footer.site .legal-venstre a.legal-doer:hover,footer.site .legal-venstre a.legal-doer:focus-visible{color:inherit;opacity:1;text-decoration:none;background-image:none;transform:none} /* Krediteringen nederst. Her stod to hover-regler oven i hinanden: en passepartout af to streger, der voksede ind fra siden og loeftede teksten, og laengere nede en understregning med halv gennemsigtighed. Sammen blev det en streg over, en under og en tredje midt i — det, der saa forkert ud. Nu er det samme sprog som politikkerne: accenten, og moerk ved hover. */ footer.site .legal-credit a{text-decoration:none;background-image:none;color:var(--accent);opacity:1; transition:color .28s cubic-bezier(.22,.61,.36,1)} footer.site .legal-credit a:hover,footer.site .legal-credit a:focus-visible{color:var(--text);opacity:1} @media (prefers-reduced-motion:reduce){ footer.site .legal-credit a,footer.site .foot-politik a,.foot-some-ikon,.some-ikon,.foot-some-navn,.some-navn{transition:none} } @media(max-width:560px){ .foot-politik{justify-items:center} } /* Til toppen. */ .til-top{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:900;display:grid; place-items:center;width:38px;height:38px;border-radius:50%;background:var(--card); border:1px solid var(--line-strong);color:var(--text-soft);cursor:pointer;box-shadow:var(--shadow); transition:border-color .2s,color .2s,transform .2s} .til-top:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} .til-top svg{width:17px;height:17px} /* ========================================================== politik ==== */ .politik-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start} @media(max-width:900px){.politik-grid{grid-template-columns:1fr}} .politik-side{position:sticky;top:7rem} @media(max-width:900px){.politik-side{position:static}} .politik-menu{list-style:none;margin:1rem 0 2rem;display:grid;gap:.4rem} .politik-menu a{display:block;padding:.85rem 1.1rem;text-decoration:none;background:var(--card); border:1px solid var(--line);font-family:var(--display);font-weight:var(--display-vaegt);font-size:.66rem;letter-spacing:.16em; text-transform:uppercase;color:var(--text-soft);transition:border-color .2s,color .2s} .politik-menu a:hover{border-color:var(--line-strong);color:var(--text)} .politik-menu a[aria-current="page"]{border-color:var(--accent);color:var(--accent);background:rgba(126,27,43,.05)} .politik-kort{background:var(--card);border:1px solid var(--line);padding:1.3rem;font-size:.85rem;color:var(--text-soft)} .politik-kort p+p{margin-top:.4rem} .politik-navn{font-family:var(--serif);font-size:1.05rem;color:var(--text)} .politik-kort a{color:var(--accent)} .politik-indhold{max-width:44rem} .politik-indhold h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:2.6rem} .politik-indhold h2:first-child{margin-top:0} .politik-indhold h3{font-size:1.1rem;margin-top:1.8rem} .politik-indhold ul{padding-left:1.3rem;color:var(--text-soft)} .politik-indhold li{margin-bottom:.5rem} .politik-indhold p{color:var(--text-soft)} .politik-dato{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line); font-family:var(--display);font-weight:var(--display-vaegt);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase} /* Cookie-knappen ligger fast i nederste venstre hjoerne. Den sidste linje i footeren laa under den — derfor centreret og med plads nok under sig til, at knappen staar paa tom bund og ikke oven i en saetning. */ @media (max-width:640px), (max-aspect-ratio:1/1){ .legal-credit{text-align:center} .legal{text-align:center;justify-content:center} .legal-venstre{justify-content:center;width:100%} footer.site{padding-bottom:calc(2.5rem + 68px)} } /* ========================================================== animation === */ /* Indfoldning ved scroll. Udgangspunktet er synligt indhold — først når vi ved at JavaScript kører, skjules det for at kunne foldes ind. Ellers ville et fejlet script efterlade hele sitet usynligt. */ .reveal{opacity:1;transform:none} .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease} .js .reveal.in{opacity:1;transform:none} /* Kommer site.js aldrig (en firewall, der nulstiller forbindelsen, en fejl i et andet script), staar indholdet ikke usynligt for evigt: efter 2,5 s glider det frem af sig selv. site.js saetter .js-klar med det samme, og saa gaelder reglen ikke, og rullevisningen styrer som foer. */ .js:not(.js-klar) .reveal{animation:sille-vis .8s ease 2.5s forwards} @keyframes sille-vis{to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}} /* ========================================================== lightbox ==== */ .lb{position:fixed;inset:0;z-index:3000;background:rgba(243,239,230,.94);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center} .lb.open{display:flex} .lb figure{max-width:min(92vw,820px);max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;align-items:center;gap:.9rem} .lb img{max-width:100%;max-height:80vh;max-height:80dvh;object-fit:contain;box-shadow:var(--shadow);border:6px solid var(--card)} .lb figcaption{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-soft);text-align:center} .lb .close{position:absolute;z-index:3;top:1.2rem;right:1.6rem;background:none;border:none;color:var(--text);font-size:2rem;cursor:pointer;font-family:var(--serif);line-height:1} /* Pilene staar fast og foelger ikke billedet. De var flex-soeskende til rammen, altsaa haeftet til billedets egen bredde. Et portraet og et landskab er ikke lige brede, saa pilene sprang halvandet hundrede pixels, hver gang man bladrede — og det andet klik landede dermed ved siden af. Nu ligger de uden for rammens stoerste bredde (820 px), maalt fra midten, saa de staar det samme sted hele serien igennem. Maerket er kun vinklen. Cirklen om den var en knap, der konkurrerede med billedet. Feltet, man rammer, er derimod stoerre end foer: en hoej spalte, der ikke naar op til lukkeknappen. */ .lb .navbtn{position:absolute;top:calc(50% - 115px);height:230px;z-index:2; width:clamp(72px,10vw,120px); background:none;border:none;border-radius:0;padding:0; color:var(--text-soft);font-family:var(--serif);font-size:clamp(2rem,3.4vw,2.9rem);line-height:1; cursor:pointer;display:grid;place-items:center;opacity:.72; transition:color .28s ease,opacity .28s ease,transform .28s ease} .lb .navbtn.prev{right:calc(50% + min(46vw,418px))} .lb .navbtn.next{left:calc(50% + min(46vw,418px))} .lb .navbtn:hover,.lb .navbtn:focus-visible{color:var(--accent);opacity:1} .lb .navbtn.prev:hover,.lb .navbtn.prev:focus-visible{transform:translateX(-3px)} .lb .navbtn.next:hover,.lb .navbtn.next:focus-visible{transform:translateX(3px)} .lb{gap:clamp(.4rem,2vw,1.8rem)} @media(max-width:640px){.lb{gap:.3rem}} /* Graensen er 1200 px og ikke de 900, der stod her foerst — den var gaettet, og `test-responsivt.py` maalte 1024 px og fandt begge piletaster uden for kanten (naeste sluttede paa 1032 px i et 1024 px vindue). Regnestykket: spalten skal kunne staa mellem midten plus 418 px og skaermkanten, altsaa kraeves 50% − 418px >= bredden. Ved 1024 px er der 94 px til raadighed og spalten er 102 px. Foerst omkring 1200 px er bredden faldet paa plads paa sit loft (120 px), og saa er der 182 px at staa paa. Under graensen laegger spalterne sig i skaermkanten og hen over billedets rand — den samme bevaegelse, en finger i forvejen laver. */ @media(max-width:1200px){ .lb .navbtn.prev{right:auto;left:0} .lb .navbtn.next{left:auto;right:0} } @media (prefers-reduced-motion:reduce){ .lb .navbtn{transition:color .28s ease} .lb .navbtn.prev:hover,.lb .navbtn.next:hover{transform:none} } .reel-efter{display:flex;justify-content:center;margin-top:1.8rem} /* ============================================================ episoder == */ .ep-play{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--accent);display:grid;place-items:center; transition:transform .25s,filter .25s} .ep-play::after{content:"";border-left:11px solid #FBF8F2;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px} a.ep:hover .ep-play{transform:scale(1.08);filter:brightness(1.1)} /* =========================================================== showreel === */ /* Baandet er moerkt med vilje. Sitet er lyst hele vejen, og rullen skal laese som en biograf — ikke som endnu et afsnit paa papir. */ .reel-sektion{background:var(--strip);color:#F3EFE6;scroll-margin-top:76px} .reel-sektion .eyebrow{color:var(--gold)} .reel-sektion h2{color:#F7F3EC} .reel-hoved{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:1rem;margin-bottom:1.1rem} .reel-sektion .btn-ghost{border-color:var(--strip-line);color:#EDE7DC} .reel-sektion .btn-ghost:hover{border-color:var(--gold);color:var(--gold)} .reel-lead{max-width:56ch;color:rgba(243,239,230,.66);margin-bottom:2.2rem} .reel-scene{position:relative;padding:clamp(10px,1.2vw,16px);background:rgba(251,248,242,.05); outline:1px solid var(--strip-line);outline-offset:-1px;border-radius:var(--radius);box-shadow:var(--shadow)} .reel-lb-yder .close{color:var(--text)} .reel-lb{position:relative;width:min(92vw,1100px);aspect-ratio:16/9;background:#0C0A08; border:6px solid var(--card);box-shadow:var(--shadow);border-radius:var(--radius);overflow:hidden} .reel-lb iframe,.reel-lb video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain} .reel-ramme{position:relative;width:100%;aspect-ratio:16/9;background:#0C0A08;border-radius:var(--radius);overflow:hidden} .reel-ramme iframe,.reel-ramme video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain} /* Plakaten — YouTube-varianten. Den staar der kun indtil nogen trykker play. */ .reel-plakat{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem; background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.09),transparent 62%),#0C0A08;border:none;cursor:pointer; background-size:cover;background-position:center} /* Med et rigtigt billede under sig skal knappen stadig kunne laeses. Sloeret ligger paa et lag for sig, saa det ikke moerklaegger selve plakaten mere end noedvendigt — og letter, naar musen er der. */ .reel-plakat.har-billede::before{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(12,10,8,.72),rgba(12,10,8,.28) 55%,rgba(12,10,8,.34));transition:background .3s} .reel-plakat.har-billede:hover::before{background:linear-gradient(to top,rgba(12,10,8,.62),rgba(12,10,8,.16) 55%,rgba(12,10,8,.22))} .reel-plakat.har-billede .ring,.reel-plakat.har-billede .reel-tekst{position:relative;z-index:1} .reel-tekst{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:#F3EFE6} /* Vores egen afspiller: én knap i midten, og ellers ingenting. */ .reel-egen video{cursor:pointer} .reel-knap{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;background:none;border:none;cursor:pointer;transition:opacity .3s} .reel-egen.spiller .reel-knap{opacity:0} .reel-egen.spiller:hover .reel-knap,.reel-egen.spiller .reel-knap:focus-visible{opacity:1} .reel-knap .ring,.reel-plakat .ring{width:72px;height:72px;border-radius:50%;background:var(--accent);display:grid;place-items:center; box-shadow:0 10px 30px -12px rgba(0,0,0,.8);transition:transform .3s} .reel-knap:hover .ring,.reel-plakat:hover .ring{transform:scale(1.07)} .reel-knap .ring::after,.reel-plakat .ring::after{content:"";border-left:18px solid #FBF8F2;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px} /* Spiller den, er knappen en pause — to streger i stedet for en trekant. */ .reel-egen.spiller .reel-knap .ring::after{border:none;width:16px;height:19px;margin:0; background:linear-gradient(90deg,#FBF8F2 0 5px,transparent 5px 11px,#FBF8F2 11px 16px)} .reel-bjaelke{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem; background:linear-gradient(to top,rgba(0,0,0,.72),transparent);opacity:0;transition:opacity .3s} .reel-egen:hover .reel-bjaelke,.reel-egen.spiller .reel-bjaelke,.reel-egen:focus-within .reel-bjaelke{opacity:1} .reel-tid{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.6rem;letter-spacing:.16em;color:#F3EFE6;white-space:nowrap;font-variant-numeric:tabular-nums} .reel-spor{flex:1;height:3px;background:rgba(251,248,242,.28);cursor:pointer;border-radius:99px} .reel-spor:hover{height:5px} .reel-fyld{display:block;height:100%;width:0;background:var(--accent);border-radius:99px} .reel-fuld{background:none;border:none;color:#F3EFE6;cursor:pointer;font-size:1rem;line-height:1;padding:0 .2rem} .reel-fuld:hover{color:var(--gold)} @media(max-width:640px){ .reel-knap .ring,.reel-plakat .ring{width:58px;height:58px} .reel-knap .ring::after,.reel-plakat .ring::after{border-left-width:15px;border-top-width:10px;border-bottom-width:10px} } /* ======================================================= login-modal ==== */ /* Dialogen ligger over lightboxen (3000), fordi et login altid er det øverste lag: man kan nå den fra en åben lightbox, aldrig omvendt. */ /* `vh` er den store viewport — paa en iPhone uden Safaris vaerktoejslinje — saa et kort paa 92vh kan staa under linjen nederst. Hver hoejde paa et overlag staar derfor to gange: `vh` til en browser, der ikke kender `dvh`, og saa `dvh`. Det gaelder ogsaa lightboxen, profilens sidekort og pluginets popup og billedvisning. */ .sille-modal{position:fixed;inset:0;z-index:3500;display:none;align-items:center;justify-content:center;padding:1.5rem} /* »Husk mig« i sitets accent og ikke browserens blaa. */ .sille-modal input[type="checkbox"]{accent-color:var(--accent);width:1.05rem;height:1.05rem} .sille-modal.open{display:flex} .modal-bag{position:absolute;inset:0;background:rgba(36,30,23,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .modal-kort{position:relative;z-index:1;background:var(--card);width:min(100%,430px);max-height:92vh;max-height:92dvh;overflow-y:auto; padding:2.6rem clamp(1.5rem,4vw,2.4rem);box-shadow:var(--shadow);border:1px solid var(--line);border-radius:var(--radius); animation:modal-ind .28s ease} @keyframes modal-ind{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.modal-kort{animation:none}} .modal-kort h2{font-size:clamp(1.9rem,4vw,2.4rem);margin:.5rem 0 1.6rem} .modal-luk{position:absolute;top:.8rem;right:1rem;background:none;border:none;font-family:var(--serif);font-size:1.9rem; line-height:1;color:var(--text-soft);cursor:pointer;padding:.2rem .4rem;transition:color .2s} .modal-luk:hover{color:var(--accent)} /* WordPress' egen loginformular klædes på som resten af sitets felter. */ .modal-kort #loginform p{margin-bottom:1rem} .modal-kort #loginform label{display:block;font-family:var(--display);font-weight:var(--display-vaegt);font-size:.58rem;letter-spacing:.22em; text-transform:uppercase;color:var(--text-soft);margin-bottom:.4rem} .modal-kort #loginform input[type="text"],.modal-kort #loginform input[type="password"]{width:100%;background:var(--bg); border:1px solid var(--line-strong);color:var(--text);padding:.8rem .9rem;font-family:inherit;font-size:.95rem;border-radius:var(--radius)} .modal-kort #loginform input:focus{outline:none;border-color:var(--accent)} .modal-kort .login-remember label{display:flex;align-items:center;gap:.5rem;font-size:.72rem;letter-spacing:.12em;color:var(--text-soft)} .modal-kort .login-remember input{accent-color:var(--accent)} .modal-kort #wp-submit{width:100%;font-family:var(--display);font-weight:var(--display-vaegt-kraftig);font-size:.74rem;letter-spacing:.26em;text-transform:uppercase; padding:.95rem 2.1rem;border-radius:var(--radius);cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:#FBF8F2; transition:filter .2s,transform .2s} .modal-kort #wp-submit:hover{filter:brightness(1.12);transform:translateY(-1px)} .modal-social{display:grid;gap:.6rem;margin-bottom:.4rem} .modal-social a,.modal-social .nsl-button{width:100%} .modal-eller{display:flex;align-items:center;gap:1rem;margin:1.4rem 0;color:var(--text-soft); font-family:var(--display);font-weight:var(--display-vaegt);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase} .modal-eller::before,.modal-eller::after{content:"";flex:1;height:1px;background:var(--line)} .modal-fod{margin-top:1.2rem;font-size:.85rem;color:var(--text-soft);text-align:center} .modal-fod a{color:var(--accent)} .modal-opret{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;flex-direction:column; align-items:center;gap:.9rem} .modal-opret .btn{color:var(--text)} /* ============================================================== hero ==== */ .hero{position:relative;height:var(--vh100,100vh);min-height:660px;overflow:hidden;background:var(--bg)} .hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fokus,74% 12%)} .hero .scrim{position:absolute;inset:0;background: linear-gradient(90deg,var(--bg) 3%,rgba(243,239,230,.9) 26%,rgba(243,239,230,.4) 46%,rgba(243,239,230,0) 64%), linear-gradient(to bottom,rgba(243,239,230,.92) 2%,rgba(243,239,230,.55) 9%,transparent 20%), linear-gradient(to top,var(--bg) 0,rgba(243,239,230,.82) 7%,rgba(243,239,230,.45) 15%,transparent 30%)} .hero-inner{position:relative;z-index:3;height:100%;padding-top:3rem;max-width:var(--max);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center} .hero-copy{max-width:34rem} .hero .eyebrow{opacity:0;animation:rise 1s .45s forwards} .hero .eyebrow-under{margin-top:1.1rem} .hero-name{font-family:var(--serif);font-size:clamp(3rem,8vw,6.6rem);line-height:.96;letter-spacing:.01em;text-transform:uppercase;margin:0;opacity:0;animation:rise 1.1s .25s forwards} .hero-tag{margin-top:1.6rem;color:var(--text-soft);font-size:clamp(1rem,1.3vw,1.15rem);max-width:29rem;opacity:0;animation:rise 1s .75s forwards} .hero-cta{margin-top:2.4rem;display:flex;gap:1rem;flex-wrap:wrap;opacity:0;animation:rise 1s .95s forwards} .hero-stats{margin-top:2.8rem;display:flex;gap:2.2rem;flex-wrap:wrap;opacity:0;animation:rise 1s 1.15s forwards} .hero-stats div{border-left:1px solid var(--gold);padding-left:1rem} .hero-stats dt{font-family:var(--serif);font-size:1.6rem} .hero-stats dd{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-soft);margin-top:.2rem} @keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.hero .eyebrow,.hero-name,.hero-tag,.hero-cta,.hero-stats{opacity:1;animation:none}} .hero-play{position:absolute;right:clamp(1.5rem,5vw,4rem);bottom:2.2rem;z-index:4;display:flex;align-items:center;gap:1rem;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:.5rem 1.4rem .5rem .5rem;cursor:pointer;box-shadow:var(--shadow);transition:transform .3s} .hero-play:hover{transform:translateY(-2px)} .hero-play .ring{width:46px;height:46px;border-radius:50%;background:var(--accent);display:grid;place-items:center} .hero-play .ring::after{content:"";border-left:12px solid #FBF8F2;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px} .hero-play span:last-child{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text)} /* Portraet er ikke et smallere landskab. Paa en telefon staar teksten oven paa hende — og en halvgennemsigtig flade over et ansigt er hverken et laeseligt ord eller et laeseligt billede. Fladen deles derfor i to: hun faar den oeverste del og skubbes helt ud til hoejre, saa ansigtet staar frit, og teksten faar den nederste paa daekkende papir. Ingen kontrast at haabe paa. */ /* Det afgoerende er sideforholdet, ikke bredden. En iPad i portraet er 820 px bred — den slap forbi en max-width:640px-graense og fik landskabs-heroen paa en staaende skaerm: sloeret gik fra venstre mod hoejre, og teksten landede oven paa hende. Er skaermen hoejere end bred, skal fladen deles i to, uanset hvor bred den er. */ @media (max-width:640px), (max-aspect-ratio:1/1){ .hero{height:var(--vh100,100vh)} .hero .bg{object-position:var(--fokus-mobil,56% 26%)} .hero .scrim{background:linear-gradient(to top, var(--bg) 0%, var(--bg) 38%, rgba(243,239,230,.86) 48%, rgba(243,239,230,.42) 60%, rgba(243,239,230,0) 74%)} /* Indholdet loeftes en tiendedel af skaermen op fra bunden, saa noegletallene ikke ligger klods op ad kanten — og saa cookie-ikonet i hjoernet ikke lander oven i dem. */ .hero-inner{justify-content:flex-end;padding-bottom:calc(2.6rem + var(--vh100,100vh) * .05)} .hero-copy{max-width:none} .hero-play{display:none} } /* Kun paa telefonen skal skriften skrumpe. En tablet i portraet har plads til den almindelige stoerrelse — den mangler bare den rigtige opdeling ovenfor. */ @media(max-width:640px){ .hero-name{font-size:clamp(2.6rem,13vw,3.6rem);margin-top:.7rem} .hero-tag{margin-top:.9rem;font-size:.95rem;max-width:32ch} .hero-cta{margin-top:1.5rem;gap:.7rem} .hero-cta .btn{padding:.85rem 1.5rem;font-size:.68rem;letter-spacing:.2em} .hero-stats{margin-top:1.8rem;gap:1.1rem;flex-wrap:nowrap} .hero-stats div{padding-left:.7rem} .hero-stats dt{font-size:1.15rem} .hero-stats dd{font-size:.5rem;letter-spacing:.18em} } /* Adresselinjen paa en telefon spiser en del af 100vh, saa heroen blev hoejere end skaermen og skubbede knapperne under kanten. svh er den synlige hoejde. Paa en touchskaerm er hoejden laast i px (--vh100, sat af sille_vh() i ): i Instagrams og andre in-app-browsere vokser svh, naar adresselinjen glider vaek, og saa skiftede heroen hoejde midt i en scroll. */ @supports (height:100svh){@media (max-width:640px), (max-aspect-ratio:1/1){.hero{height:var(--vh100,100svh);min-height:0}}} /* Det tredje tal har kun plads over 420 px. Etiketterne står i 12 px paa en telefon (se nedenfor), og »Seneste premiere« stak 25 px ud over kanten paa en almindelig iPhone (390 px) — maalt med begge skrifter, ogsaa den, der vises, foer Oswald er hentet. */ @media(max-width:420px){.hero-stats div:nth-child(3){display:none}} /* En sektion slutter med ét kald til handling. Paa en telefon staar den alene paa skaermen, og saa er en tynd ramme for lidt — den skal se ud som noget, man trykker paa. Paa desktop bliver den ved med at vaere diskret, fordi den dér staar ved siden af sit indhold og ikke alene. */ @media (max-width:640px), (max-aspect-ratio:1/1){ .t-body .btn-ghost,.reel-efter .btn-ghost,.nyheder-top .btn-ghost, .cv-side .btn-ghost{ background:var(--accent);border-color:var(--accent);color:#FBF8F2} } /* Touch har ingen hover. Uden en tilstand for selve trykket foeles knappen doed, indtil siden skifter. */ @media (hover:none){ .btn:active,.fc-btn:active,.strip-nav:active,.lb .navbtn:active{ transform:scale(.96);filter:brightness(.92)} .btn,.fc-btn{transition:transform .12s ease,filter .12s ease,background .2s,border-color .2s,color .2s} } /* =========================================================== teasere ==== */ .teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center} @media(max-width:820px){.teaser{grid-template-columns:1fr}} .teaser.flip .t-media{order:2} @media(max-width:820px){.teaser.flip .t-media{order:0}} .t-media{aspect-ratio:4/5;overflow:hidden;position:relative;box-shadow:var(--shadow);background:var(--card);padding:10px} .t-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .t-media:hover img{transform:scale(1.03)} .t-body h2{margin:1rem 0 1.3rem} .t-body p{color:var(--text-soft);margin-bottom:1.6rem;max-width:34rem} /* Eyebrow'en er ogsaa et

, og .t-body p / .casting-band p er mere specifikke end .eyebrow. Uden de her to selektorer staar Om Sille, Curriculum Vitae, Podcast og Casting i broedtekstens graa i stedet for accentfarven — som de eneste eyebrows paa sitet. */ .t-body .eyebrow,.casting-band .eyebrow{color:var(--accent)} .t-credits b{color:var(--text);font-family:var(--serif);font-weight:400} /* ============================================================== reel ==== */ .reel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 20px;scrollbar-width:none;list-style:none} .reel::-webkit-scrollbar{display:none} .reel .cell{flex:0 0 min(64vw,300px);aspect-ratio:3/4;scroll-snap-align:center;overflow:hidden;position:relative;cursor:pointer;background:var(--card);padding:8px;box-shadow:var(--shadow)} .reel .cell.wide{flex-basis:min(80vw,470px);aspect-ratio:16/10} .reel .cell img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .reel .cell:hover img{transform:scale(1.04)} .reel .cell a{display:block;width:100%;height:100%} /* ------------------------------------------------------- filmstrimmel -- */ /* Rullen tegnes som en rigtig filmstrimmel: mørkt bånd i fuld bredde med perforering foroven og forneden. Hullerne males i --hole, fordi de skal matche sektionen bagved — sæt den om, hvis strimlen lægges et andet sted. Derfor er den også en variabel og ikke en fast farve: strimlen er ment til at kunne genbruges på et andet tema. */ /* Strimlen er bredere end siden med vilje (se nedenfor). Uden en klipning her stikker de 8 % ud over viewporten, og saa kan hele siden traekkes sidelaens paa en telefon — 411 px indhold i en 393 px skaerm. overflow-x:clip og ikke hidden: hidden ville goere indpakningen til en scroll-beholder og klippe rotationens top og bund med. */ .filmstrip-wrap{position:relative;padding:1.6rem 0;overflow-x:clip} /* Strimlen står en anelse på skrå, som en filmstrimmel lagt på et bord. Den er bredere end sektionen, fordi rotationen ellers ville efterlade trekantede huller i hjørnerne. */ .filmstrip{--hole:var(--bg-2);position:relative;background:var(--strip);padding:44px 0; width:108%;margin-left:-4%;transform:rotate(-1.1deg); box-shadow:inset 0 16px 30px -20px #000,inset 0 -16px 30px -20px #000} .filmstrip::before,.filmstrip::after{content:"";position:absolute;left:0;right:0;height:44px;pointer-events:none; background-image:repeating-linear-gradient(90deg,var(--hole) 0 26px,var(--strip) 26px 48px); background-size:auto 16px;background-repeat:repeat-x;background-position:center} .filmstrip::before{top:0} .filmstrip::after{bottom:0} /* Paa en telefon fyldte ét felt naesten hele skaermen, og strimlen laeste som ét billede ad gangen frem for som en rulle. Felterne er derfor mindre, og perforeringen skaleres med — bliver hullerne staaende i fuld stoerrelse om en lavere strimmel, ligner det en fejl i stedet for en filmstrimmel. */ @media(max-width:640px){ .filmstrip-wrap{padding:1rem 0} .filmstrip{padding:26px 0} .filmstrip::before,.filmstrip::after{height:26px;background-size:auto 11px; background-image:repeating-linear-gradient(90deg,var(--hole) 0 16px,var(--strip) 16px 30px)} } /* Inde i strimlen falder det lyse pap-mount væk — billederne er selve filmen. */ .filmstrip .reel{gap:10px;padding:0 10px;scroll-snap-type:none;cursor:grab} .filmstrip .reel.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none} /* Under træk må hverken billeder eller links kapre musen. */ .filmstrip .reel.dragging a{pointer-events:none} .filmstrip .reel img{-webkit-user-drag:none;user-select:none} .filmstrip .reel .cell{flex-basis:min(61vw,285px)} .filmstrip .reel .cell.wide{flex-basis:min(76vw,447px)} /* Samme selektor og efter dem — ellers vinder de to ovenfor baade paa specificitet og paa raekkefoelge, og strimlen bliver staaende, som den var. */ @media(max-width:640px){ .filmstrip .reel .cell{flex-basis:min(40vw,178px)} .filmstrip .reel .cell.wide{flex-basis:min(54vw,238px)} } /* Pilene ligger uden for rotationen, så de står lige. */ .strip-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:54px;height:54px;border-radius:50%; background:var(--card);border:1px solid var(--line-strong);color:var(--text);display:grid;place-items:center; cursor:pointer;box-shadow:var(--shadow);transition:border-color .2s,color .2s,opacity .2s,transform .2s} .strip-nav:hover{border-color:var(--accent);color:var(--accent)} .strip-nav:disabled{opacity:.5;cursor:default;border-color:var(--line-strong);color:var(--text)} .strip-nav.prev{left:clamp(.7rem,2.2vw,1.8rem)} .strip-nav.next{right:clamp(.7rem,2.2vw,1.8rem)} .strip-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} @media(max-width:640px){.strip-nav{width:44px;height:44px}.strip-nav svg{width:16px;height:16px}} .filmstrip .reel .cell{background:none;padding:0;box-shadow:none;outline:1px solid var(--strip-line);outline-offset:-1px} .filmstrip .reel .cell::after{content:"";position:absolute;inset:0;pointer-events:none; box-shadow:inset 0 0 40px rgba(0,0,0,.35)} @media(max-width:560px){.filmstrip{padding:30px 0;transform:rotate(-.8deg)}.filmstrip::before,.filmstrip::after{height:30px;background-size:auto 12px}} /* ============================================================ bånd ===== */ .award-band{border:1px solid var(--gold);background:linear-gradient(120deg,rgba(154,118,56,.10),transparent 62%);padding:2rem clamp(1.5rem,4vw,3rem);display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;border-radius:var(--radius)} .award-band .laurel{font-size:2rem} .award-band p{max-width:46rem;color:var(--text-soft)} .award-band b{font-family:var(--serif);font-weight:400;color:var(--accent)} /* Paa CV'et er baandet ikke en nyhed — det er én linje i en meritliste. Med ramme, guldgradient og 2 rem luft fyldte det en blok over krediteringerne og skubbede dermed dét, siden handler om, under skaermkanten. Her er det ikonet foran teksten og ikke mere. */ .award-band.kompakt{border:none;background:none;border-radius:0;padding:0; gap:.55rem;align-items:baseline;margin-bottom:.2rem} .award-band.kompakt .laurel{font-size:1rem;line-height:1} .award-band.kompakt p{font-size:.86rem;flex:1 1 20rem;max-width:64rem} .award-band.kompakt b{font-size:.92rem} .casting-band{background:radial-gradient(ellipse 80% 120% at 50% 0%,rgba(126,27,43,.10),transparent 60%),var(--bg-2);text-align:center} .casting-band h2{max-width:20ch;margin:1.1rem auto 1.3rem} .casting-band p{max-width:38rem;margin:0 auto;color:var(--text-soft)} .tag-row{margin-top:2.4rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;list-style:none} .tag-row li{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--line-strong);padding:.42rem .95rem;border-radius:99px;color:var(--text-soft)} /* ============================================================= om ====== */ .om-hero{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center} @media(max-width:900px){.om-hero{grid-template-columns:1fr}} .om-portrait{aspect-ratio:4/5;overflow:hidden;position:relative;background:var(--card);padding:12px;box-shadow:var(--shadow)} .om-portrait img{width:100%;height:100%;object-fit:cover} .om-hero p{color:var(--text-soft);margin:1.1rem 0} .om-hero h1{font-size:clamp(2.4rem,5vw,3.6rem);margin:1rem 0 1.4rem} .specs{margin-top:2.2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border-top:1px solid var(--line)} .specs div{padding:1rem .2rem;border-bottom:1px solid var(--line)} .specs dt{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-soft)} .specs dd{font-family:var(--serif);font-size:1.08rem;margin-top:.35rem} .skills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem;list-style:none} .skills li{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--gold);color:var(--gold);padding:.45rem 1rem;border-radius:99px} .two-col{columns:2;column-gap:3rem;color:var(--text-soft)} .two-col p{margin-bottom:1rem} @media(max-width:700px){.two-col{columns:1}} /* ========================================================== galleri ==== */ .filterbar{display:flex;gap:.6rem;flex-wrap:wrap;margin:2.5rem 0} /* Knapperne filtrerer kun med JavaScript. Uden staar alle billeder fremme, og knapper, der ingenting goer, skal ikke staa ovenover. */ html:not(.js) .filterbar{display:none} /* Uden JavaScript er det browserens egne knapper paa videoen, der virker. */ html:not(.js) .reel-egen .reel-knap,html:not(.js) .reel-egen .reel-bjaelke{display:none} .filterbar button{font-family:var(--display);font-weight:var(--display-vaegt-kraftig);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;background:none;border:1px solid var(--line-strong);color:var(--text-soft);padding:.55rem 1.3rem;border-radius:99px;cursor:pointer;transition:all .2s} .filterbar button:hover{color:var(--text)} .filterbar button[aria-pressed="true"]{background:var(--accent);color:#FBF8F2;border-color:var(--accent)} .grid{columns:3;column-gap:16px} @media(max-width:900px){.grid{columns:2}} @media(max-width:560px){.grid{columns:1}} /* Passepartout'en er en RAMME og ikke padding, og det er hele pointen. `overflow:hidden` klipper ved padding-kanten, altsaa uden om de 8 px. Saa groede billedet ud over rammen, naar det skalerede 1,04 paa hover — deraf kanten i toppen — og den moerke tekstbund laa hen over rammen forneden i stedet for at slutte med billedet. Med en border klipper browseren inden for rammen, og begge dele holder op af sig selv: billedet bliver i sit udsnit, og bunden gaar praecis til billedets kanter. */ .grid .item{break-inside:avoid;margin-bottom:16px;position:relative;overflow:hidden;cursor:zoom-in;background:var(--card);padding:0;box-shadow:var(--shadow);border:8px solid var(--card);width:100%;display:block;text-decoration:none;color:inherit} .grid .item img{width:100%;display:block;transition:transform .6s} .grid .item:hover img{transform:scale(1.04)} /* Gradienten loeber over hele feltets hoejde med tre stop. Med to stop over 2,2 rem staar overgangen som en synlig stribe; det er ikke en kant i billedet, det er gradienten der er for kort til at naa at forsvinde. */ .grid .item .cap{position:absolute;left:0;right:0;bottom:0;padding:3.2rem .95rem .85rem;font-family:var(--display);font-weight:var(--display-vaegt);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:#FBF8F2;background:linear-gradient(to top,rgba(20,16,12,.80) 0%,rgba(20,16,12,.56) 34%,rgba(20,16,12,.20) 66%,rgba(20,16,12,0) 100%);opacity:0;transition:opacity .3s;text-align:left} .grid .item:hover .cap,.grid .item:focus-visible .cap{opacity:1} .grid-empty{color:var(--text-soft);padding:2rem 0} /* ================================================================ cv ==== */ .cv-layout{display:grid;grid-template-columns:1fr 300px;gap:clamp(2rem,5vw,4rem);align-items:start} @media(max-width:860px){.cv-layout{grid-template-columns:1fr}} .col-head{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);padding-bottom:.9rem;border-bottom:1px solid var(--line-strong);margin:2.6rem 0 .3rem} .credit-row{display:grid;grid-template-columns:5rem 1fr auto;gap:1.3rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--line)} .credit-row .year{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.78rem;letter-spacing:.12em;color:var(--text-soft)} .credit-row .title{font-family:var(--serif);font-size:1.15rem} .credit-row .role{font-size:.84rem;color:var(--text-soft);font-style:italic;text-align:right} @media(max-width:560px){.credit-row{grid-template-columns:3.6rem 1fr}.credit-row .role{grid-column:2;text-align:left}} .cv-side{position:sticky;top:6rem;background:var(--card);padding:1.8rem;box-shadow:var(--shadow)} .cv-side dl div{padding:.7rem 0;border-bottom:1px solid var(--line)} .cv-side dt{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text-soft)} .cv-side dd{font-family:var(--serif);font-size:1rem;margin-top:.25rem} .cv-note{color:var(--text-soft);font-size:.8rem;margin-top:1.2rem} /* 12,8 px er ikke en lille skrift paa en telefon, det er en skrift man lader vaere med at laese. Noten siger, at listen ikke er hele CV'et — det skal en producer kunne se. */ @media(max-width:640px){.cv-note{font-size:.875rem}} /* Portraettet i CV-kortet. Et skuespiller-CV uden billede er en liste, og billedet er det foerste en caster kigger paa — derfor oeverst i kortet og ikke nede i teksten. */ .cv-portraet{margin:-1.8rem -1.8rem 1.6rem} .cv-portraet img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;display:block} .cv-portraet figcaption{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.58rem; letter-spacing:.26em;text-transform:uppercase;color:var(--text-soft);padding:.9rem 1.8rem 0} /* Naar spalterne stables, kommer kortet foerst. Ellers skal man scrolle forbi hele krediteringslisten for at se, hvem den handler om. */ @media(max-width:860px){ .cv-layout{grid-template-columns:1fr} .cv-side{order:-1;position:static;max-width:420px} } .cv-actions{margin-top:2.5rem;display:flex;gap:1rem;flex-wrap:wrap} /* =========================================================== podcast ==== */ .pod-cover{aspect-ratio:1/1;overflow:hidden;position:relative;background:var(--card);padding:12px;box-shadow:var(--shadow)} .pod-cover img{width:100%;height:100%;object-fit:cover} .pod-cover .badge{position:absolute;left:1.4rem;top:1.4rem;font-family:var(--display);font-weight:var(--display-vaegt);font-size:.58rem;letter-spacing:.36em;text-transform:uppercase;color:#FBF8F2;background:var(--accent);padding:.4rem .9rem} audio{width:100%;margin-top:1rem} .ep-list{list-style:none} /* Raekken havde to elementer og fordelte dem ud til hver sin kant. Med en afspilknap er der tre, og saa endte titlen svaevende midt i tomrummet. Knap og titel hoerer sammen til venstre; maerkatet staar for sig til hoejre. */ .ep{display:flex;gap:1rem;align-items:center;padding:1.05rem 0;border-bottom:1px solid var(--line);text-decoration:none;transition:color .2s} .ep .ep-title{flex:1 1 auto;min-width:0} .ep:hover{color:var(--accent)} .ep .no{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.68rem;letter-spacing:.2em;color:var(--text-soft);white-space:nowrap} .ep-title{font-family:var(--serif);font-size:1.15rem} /* Coveret staaende ved siden af listen, saa siden har et ansigt hele vejen ned og ikke bare er en raekke titler. */ .pod-layout{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start} .pod-side{position:sticky;top:96px;display:grid;gap:1rem} .pod-abonner{justify-self:stretch;text-align:center} @media(max-width:820px){ .pod-layout{grid-template-columns:1fr} .pod-side{position:static;max-width:340px} } /* Nyeste episode ligger klar i afspilleren. Selve iframen bygges foerst ved klik — ellers saetter Spotify cookies paa alle, der bare kigger paa listen. Plakaten har samme hoejde som iframen, saa siden ikke hopper ved klik. */ .pod-afspiller{margin-bottom:1.6rem;border-radius:var(--radius);overflow:hidden;background:var(--card); border:1px solid var(--line);min-height:152px;display:grid} .pod-afspiller iframe{display:block;width:100%;height:152px;border:0} .pod-start{display:flex;align-items:center;gap:1.1rem;min-height:152px;padding:1.2rem 1.4rem; text-decoration:none;color:var(--text);transition:background .2s} .pod-start:hover{background:var(--bg-2)} .pod-start .ep-play{width:46px;height:46px} .pod-start .ep-play::after{border-left-width:14px;border-top-width:9px;border-bottom-width:9px;margin-left:4px} .pod-start:hover .ep-play{transform:scale(1.08);filter:brightness(1.1)} .pod-start-tekst{flex:1 1 auto;min-width:0;display:grid;gap:.35rem} .pod-start-label{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.6rem;letter-spacing:.24em; text-transform:uppercase;color:var(--accent)} .pod-start-titel{font-family:var(--serif);font-size:1.25rem;line-height:1.25} .pod-start-cta{flex:0 0 auto;font-family:var(--display);font-weight:var(--display-vaegt);font-size:.6rem; letter-spacing:.2em;text-transform:uppercase;color:var(--text-soft);white-space:nowrap} @media (max-width:600px){ .pod-start-cta{display:none} .pod-start{gap:.9rem;padding:1.1rem} .pod-start-titel{font-size:1.1rem} } /* Den episode, der spiller, skal kunne ses i listen. */ .ep.aktiv{color:var(--accent)} .ep.aktiv .ep-play{filter:brightness(1.1)} .ep.aktiv .ep-title{font-style:italic} .platforms{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem} .pod-note{color:var(--text-soft);font-size:.85rem;margin-top:1.4rem} .pod-note a{color:var(--accent)} /* ========================================================== nyheder ==== */ /* Silles egen stroem: opslag om indslag, interviews og alt det, der sker undervejs. Kortene er bygget af de samme dele som resten af sitet — papir, hairline, displayskrift i metalinjen — saa en nyhedsside ikke ligner en anden hjemmeside. */ .nyheder-top{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:1.2rem;margin-bottom:2.6rem} .nyheder-top .eyebrow{margin-bottom:1rem} .nyheder-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(1.6rem,3vw,2.6rem)} /* Hele kortet er klikbart, men der er kun ét link i det: overskriftens link traekkes ud over kortet. To links til samme sted er stoej for den, der tabber sig igennem siden. */ .nyhed-kort{position:relative;display:flex;flex-direction:column;background:var(--card);padding:10px 10px 0; box-shadow:var(--shadow);border-radius:var(--radius);transition:transform .3s} .nyhed-kort:hover{transform:translateY(-4px)} .nk-medie{aspect-ratio:4/3;overflow:hidden;background:var(--bg-2);border-radius:calc(var(--radius) - 2px)} .nk-medie img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .nyhed-kort:hover .nk-medie img{transform:scale(1.04)} /* Uden fremhaevet billede tegnes et papirfelt med sitets navn — et kort uden billede skal ikke se ud som et kort, hvor billedet er faldet ned. */ .nk-medie.tom{display:grid;place-items:center;background:var(--bg-2)} .nk-medie.tom span{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.72rem;letter-spacing:.3em; text-transform:uppercase;color:var(--text-soft);opacity:.65} .nk-krop{flex:1 1 auto;display:flex;flex-direction:column;padding:1.4rem .6rem 1.6rem} .nk-meta{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.62rem;letter-spacing:.22em; text-transform:uppercase;color:var(--text-soft)} .nk-titel{font-size:1.35rem;line-height:1.2;margin:.7rem 0 .8rem} .nk-titel a{text-decoration:none} .nk-titel a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)} .nyhed-kort:hover .nk-titel{color:var(--accent)} .nk-uddrag{color:var(--text-soft);font-size:.95rem;margin-bottom:1.2rem} .nk-mere{margin-top:auto;font-family:var(--display);font-weight:var(--display-vaegt-kraftig);font-size:.66rem; letter-spacing:.24em;text-transform:uppercase;color:var(--accent)} .nk-mere::after{content:" \2192"} /* Nyeste opslag paa oversigten laaner forsidens teaser-layout. */ .nyhed-stor h2 a{text-decoration:none} .nyhed-stor h2 a:hover{color:var(--accent)} .nyhed-stor .nk-meta{margin:.9rem 0 1.2rem} /* ------------------------------------------------- det enkelte opslag --- */ .nyhed-billede{margin:0;background:var(--card);padding:10px;box-shadow:var(--shadow);border-radius:var(--radius)} .nyhed-billede img{width:100%;border-radius:calc(var(--radius) - 2px)} .nyhed-billede figcaption{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.62rem;letter-spacing:.2em; text-transform:uppercase;color:var(--text-soft);padding:.9rem .4rem .3rem} .nyhed-meta{margin-top:1.4rem} /* Billedet er allerede luft nok mellem hero og broedtekst. */ .nyhed-brod{padding-top:clamp(2.4rem,4vw,3.4rem)} /* Broedteksten holdes paa en laesbar linjelaengde. Billeder maa gerne bryde ud — derfor align-wide i functions.php. */ .nyhed-brod .entry-content{max-width:44rem;margin-inline:auto;font-size:1.05rem} .nyhed-brod .entry-content>.alignwide{max-width:min(100%,58rem);width:min(100%,58rem);margin-inline:calc(50% - min(50%,29rem))} .nyhed-brod .entry-content>.alignfull{max-width:none;width:auto;margin-inline:calc(50% - 46vw)} @media(max-width:820px){ .nyhed-brod .entry-content>.alignwide, .nyhed-brod .entry-content>.alignfull{width:auto;max-width:100%;margin-inline:0} } .nyhed-brod .entry-content blockquote{border-left:2px solid var(--accent);padding-left:1.4rem;margin:2rem 0; font-family:var(--serif);font-size:1.25rem;line-height:1.45} .nyhed-brod .entry-content figure{margin:2rem 0} .nyhed-sider{margin-top:2rem;font-family:var(--display);font-weight:var(--display-vaegt);font-size:.68rem; letter-spacing:.22em;text-transform:uppercase;color:var(--text-soft)} .nyhed-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:1.4rem;align-items:center; margin-top:clamp(3rem,6vw,4.5rem);padding-top:2.2rem;border-top:1px solid var(--line)} .nn-link{text-decoration:none;display:grid;gap:.35rem;min-width:0} .nn-hoejre{text-align:right;justify-items:end} .nn-label{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.6rem;letter-spacing:.24em; text-transform:uppercase;color:var(--text-soft)} .nn-titel{font-family:var(--serif);font-size:1.05rem;line-height:1.25} .nn-link:hover .nn-titel{color:var(--accent)} @media(max-width:700px){ .nyhed-nav{grid-template-columns:1fr;text-align:center} .nn-hoejre{text-align:center;justify-items:center} .nn-alle{justify-self:center} } /* --------------------------------------------------------- sideskift --- */ .pagination{margin-top:clamp(2.6rem,5vw,3.6rem)} .pagination .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center} .pagination .page-numbers{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.72rem;letter-spacing:.18em; text-transform:uppercase;text-decoration:none;min-width:2.6rem;padding:.7rem .9rem;text-align:center; border:1px solid var(--line);border-radius:var(--radius);transition:all .2s} .pagination a.page-numbers:hover{border-color:var(--accent);color:var(--accent)} .pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#FBF8F2} .pagination .page-numbers.dots{border-color:transparent} /* =========================================================== casting ==== */ .cast-hero{background:radial-gradient(ellipse 90% 120% at 72% 10%,rgba(126,27,43,.12),transparent 58%),var(--bg);padding:clamp(2.5rem,5vw,4rem) 0 4rem;border-bottom:1px solid var(--line)} .cast-tags-intro{margin-top:2.4rem;font-family:var(--display);font-weight:var(--display-vaegt);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-soft)} .cast-hero .tag-row{justify-content:flex-start;margin-top:1rem} .cast-hero .grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start} @media(max-width:900px){.cast-hero .grid2{grid-template-columns:1fr}} .cast-hero h1{font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:.02em;margin:1rem 0 1.3rem} .cast-hero p{color:var(--text-soft);max-width:34rem} .cast-cta{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap} .auth{background:var(--boks);border:1px solid var(--line);border-radius:var(--radius);padding:2rem} .field{margin-bottom:1rem} .field label{display:block;font-family:var(--display);font-weight:var(--display-vaegt);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-soft);margin-bottom:.4rem} .field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line-strong);color:var(--text);padding:.75rem .9rem;font-family:inherit;font-size:.9rem;border-radius:var(--radius)} .field textarea{min-height:130px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)} .muted{color:var(--text-soft);font-size:.78rem;margin-top:1rem;text-align:center} .muted a{color:var(--accent)} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.5rem;list-style:none} @media(max-width:800px){.steps{grid-template-columns:1fr}} .step{background:var(--card);padding:1.8rem;box-shadow:var(--shadow);position:relative;overflow:hidden; transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s} /* En streg i guld vokser op langs venstre kant, kortet loefter sig, og tallet skifter til accenten. Tre trin, man skal laese i raekkefoelge — saa de skal ogsaa kunne mærkes ét ad gangen. */ .step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold); transform:scaleY(0);transform-origin:bottom;transition:transform .32s cubic-bezier(.4,0,.2,1)} .step:hover,.step:focus-within{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(36,30,23,.55)} .step:hover::before,.step:focus-within::before{transform:scaleY(1)} .step .n{transition:color .28s} .step:hover .n{color:var(--accent)} @media (prefers-reduced-motion:reduce){.step,.step::before,.step .n{transition:none}.step:hover{transform:none}} .step .n{font-family:var(--serif);font-size:2.2rem;color:var(--gold);line-height:1} .step h3{margin:.8rem 0 .5rem;font-size:1.15rem} .step p{color:var(--text-soft);font-size:.9rem} .admin-note{border-left:2px solid var(--gold);padding:.4rem 0 .4rem 1.3rem;color:var(--text-soft);font-size:.85rem;max-width:40rem;margin-top:2rem} /* =========================================================== kontakt ==== */ .k-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start} @media(max-width:820px){.k-grid{grid-template-columns:1fr}} .k-info div{padding:1.1rem 0;border-bottom:1px solid var(--line)} .k-info dt{font-family:var(--display);font-weight:var(--display-vaegt);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-soft)} .k-info dd{font-family:var(--serif);font-size:1.3rem;margin-top:.3rem} .k-info dd a{text-decoration:none} .k-info dd a:hover{color:var(--accent)} .k-social{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem} .kform{background:var(--card);box-shadow:var(--shadow);padding:2rem} .kform .btn{width:100%} .form-status{padding:.9rem 1.1rem;margin-bottom:1.4rem;border-left:2px solid var(--gold);background:rgba(154,118,56,.08);font-size:.9rem} .form-status.ok{border-left-color:var(--accent);background:rgba(126,27,43,.07)} .form-status.fejl{border-left-color:#a8341f;background:rgba(168,52,31,.07)} .form-status p+p{margin-top:.4rem} /* Honeypot: skal være usynlig for mennesker, men findes for bots. */ .sille-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} /* ==================================== casting-plugin & redaktionelt ==== */ /* Frosch Casting-plugin'et rendrer sine egne shortcodes; her får det samme formsprog som resten af sitet uden at plugin'et skal kende temaet. Plugin = funktion, tema = udseende — også for portalens egne sider. */ .fc-box{max-width:none} .fc-form,.fc-panel{background:var(--boks);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem)} .fc-card,.fc-opslag{background:var(--card);box-shadow:var(--shadow);padding:clamp(1.4rem,3vw,2.2rem)} .fc-form input,.fc-form select,.fc-form textarea,.fc-panel input,.fc-panel select,.fc-field input,.fc-field select,.fc-field textarea{width:100%;background:var(--felt);border:1px solid var(--line-strong);color:var(--text);padding:.75rem .9rem;font-family:inherit;font-size:.95rem;border-radius:var(--radius)} .fc-form input:focus,.fc-form textarea:focus,.fc-form select:focus{outline:none;border-color:var(--accent)} .fc-form label,.fc-panel label,.fc-field label,.fc-field .fc-feltnavn{display:block;font-family:var(--display);font-weight:var(--display-vaegt);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-soft);margin-bottom:.55rem} /* Den store roede knap er formularens afsender — ikke enhver