/* ============================================================ LUN MC — felles stilark Røff garasje-estetikk · mørk kull + varm aksent Tre retninger styres via [data-dir] på : garasje (default) · asfalt · heritage ============================================================ */ /* ---- Fonter ---- */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=DM+Serif+Display&family=IBM+Plex+Sans:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Zilla+Slab:wght@500;600;700&family=Barlow+Condensed:wght@500;600;700&display=swap'); /* ---- Tokens (standard = palett "fjord", lys) ---- */ :root{ --bg:#E7E5DC; --bg-2:#E0DDD2; --panel:#F3F1EA; --panel-2:#ECE9DF; --panel-3:#DFDBCD; --line:#CCC7B7; --line-soft:#DAD5C7; --ink:#16242D; --ink-2:#3D4A52; --ink-3:#5C686D; --ink-4:#8A8F8B; --accent:#9C3A2C; --accent-2:#7E2B20; --accent-ink:#F6F2E9; --accent-glow:rgba(156,58,44,.12); --font-display:'Zilla Slab'; --font-cond:'Barlow Condensed'; --font-body:'Barlow'; --display-weight:700; --display-tracking:0; --radius:3px; --grain:1; --maxw:1240px; --gutter:clamp(20px,5vw,64px); --ease:cubic-bezier(.2,.7,.3,1); } /* ---- Paletter (data-palette på ) ---- */ /* FJORD — bjørke-/kartpapir, dypt fjordblått blekk, naustrød (lys) */ :root[data-palette="fjord"]{ --bg:#E7E5DC; --bg-2:#E0DDD2; --panel:#F3F1EA; --panel-2:#ECE9DF; --panel-3:#DFDBCD; --line:#CCC7B7; --line-soft:#DAD5C7; --ink:#16242D; --ink-2:#3D4A52; --ink-3:#5C686D; --ink-4:#8A8F8B; --accent:#9C3A2C; --accent-2:#7E2B20; --accent-ink:#F6F2E9; --accent-glow:rgba(156,58,44,.12); } /* GRANITT — kjølig fjellstein, skifer-blekk, isbre-turkis (lys) */ :root[data-palette="granitt"]{ --bg:#E3E4E1; --bg-2:#DBDCD8; --panel:#EEEFEC; --panel-2:#E6E7E3; --panel-3:#DADBD6; --line:#C5C7C1; --line-soft:#D5D6D1; --ink:#1A262A; --ink-2:#3C484C; --ink-3:#586366; --ink-4:#868C8B; --accent:#2C6E72; --accent-2:#1E5256; --accent-ink:#EDF2F1; --accent-glow:rgba(44,110,114,.12); } /* MIDNATT — dyp fjordblå natt, isbre-hvitt, lykte-rav (mørk) */ :root[data-palette="midnatt"]{ --bg:#0E1820; --bg-2:#121F28; --panel:#14222C; --panel-2:#1B2C37; --panel-3:#243845; --line:#294150; --line-soft:#1B2C37; --ink:#E6ECEC; --ink-2:#B0BEC1; --ink-3:#889799; --ink-4:#516263; --accent:#D9A24E; --accent-2:#ECC382; --accent-ink:#161009; --accent-glow:rgba(217,162,78,.18); } /* SKOG — dyp gran, bjørke-hvitt, lav/bjørk-gull (mørk) */ :root[data-palette="skog"]{ --bg:#0F1712; --bg-2:#131E17; --panel:#16221A; --panel-2:#1D2D23; --panel-3:#26392D; --line:#2B4435; --line-soft:#1D2D23; --ink:#E9E8DB; --ink-2:#BEC2AE; --ink-3:#92A088; --ink-4:#5B6A5B; --accent:#C6A75A; --accent-2:#E0C586; --accent-ink:#14120A; --accent-glow:rgba(198,167,90,.18); } /* BAKERI — varm melkrem/mel, rugbrunt blekk, skorpe-gyllen (lys) */ :root[data-palette="bakeri"]{ --bg:#ECE4D1; --bg-2:#E5DCC4; --panel:#F5EFDF; --panel-2:#EDE5D0; --panel-3:#E2D7BE; --line:#D0C09C; --line-soft:#DED2B4; --ink:#2A2016; --ink-2:#544731; --ink-3:#685A40; --ink-4:#94855F; --accent:#8A4E14; --accent-2:#6E3D0F; --accent-ink:#F8F1DF; --accent-glow:rgba(138,78,20,.12); } /* ASFALT — natt-svart asfalt, bremselys-rød, kald stål-hvit (mørk) */ :root[data-palette="asfalt"]{ --bg:#100D0D; --bg-2:#161111; --panel:#1A1414; --panel-2:#221919; --panel-3:#2E2121; --line:#3A2A2A; --line-soft:#241B1B; --ink:#EFE7E5; --ink-2:#BFB2B0; --ink-3:#8E807E; --ink-4:#5C504F; --accent:#CB2E27; --accent-2:#9E1C16; --accent-ink:#F7ECEA; --accent-glow:rgba(203,46,39,.22); } /* ---- Lys-modus (Fjord/Granitt/Bakeri): overstyr mørke effekter ---- */ :root:is([data-palette="fjord"],[data-palette="granitt"],[data-palette="bakeri"]) body::before{ background: radial-gradient(120% 80% at 50% -10%, rgba(0,0,0,.012), transparent 58%), radial-gradient(150% 120% at 50% 120%, rgba(40,60,70,.06), transparent 60%); } :root:is([data-palette="fjord"],[data-palette="granitt"],[data-palette="bakeri"]) body::after{ opacity:calc(.035 * var(--grain));mix-blend-mode:multiply} :root:is([data-palette="fjord"],[data-palette="granitt"],[data-palette="bakeri"]) .ph{ background-image:repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 2px, transparent 2px 11px);} /* Logo: vis svart kunst på lyse paletter, hvit kunst på mørke */ .logo-light{display:block} .logo-dark{display:none} :root:is([data-palette="midnatt"],[data-palette="skog"],[data-palette="asfalt"]) .logo-light{display:none} :root:is([data-palette="midnatt"],[data-palette="skog"],[data-palette="asfalt"]) .logo-dark{display:block} :root:is([data-palette="fjord"],[data-palette="granitt"],[data-palette="bakeri"]) .av{ background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 1px,transparent 1px 6px)} /* mel-drys: ørliten flekk-tekstur kun i Bakeri */ :root[data-palette="bakeri"] body{ background-image:radial-gradient(rgba(120,90,40,.05) 1px, transparent 1.4px); background-size:26px 26px; } /* ---- Font-par (data-dir på ) ---- */ :root[data-dir="verksted"]{ /* Archivo grotesk + Barlow */ --font-display:'Archivo'; --font-body:'Barlow'; --font-cond:'Barlow Condensed'; --display-weight:800; --display-tracking:-.015em; --radius:2px; --grain:1; } :root[data-dir="kondens"]{ /* Oswald smal + Barlow */ --font-display:'Oswald'; --font-body:'Barlow'; --font-cond:'Barlow Condensed'; --display-weight:600; --display-tracking:.005em; --radius:3px; --grain:1; } :root[data-dir="slab"]{ /* Zilla Slab + Barlow */ --font-display:'Zilla Slab'; --font-body:'Barlow'; --font-cond:'Barlow Condensed'; --display-weight:700; --display-tracking:0; --radius:3px; --grain:.8; } :root[data-dir="kart"]{ /* Space Grotesk + IBM Plex Sans (kart/teknisk) */ --font-display:'Space Grotesk'; --font-body:'IBM Plex Sans'; --font-cond:'Barlow Condensed'; --display-weight:700; --display-tracking:-.02em; --radius:4px; --grain:.7; } :root[data-dir="editorial"]{ /* DM Serif Display + Barlow */ --font-display:'DM Serif Display'; --font-body:'Barlow'; --font-cond:'Barlow Condensed'; --display-weight:400; --display-tracking:0; --radius:3px; --grain:.7; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body),system-ui,sans-serif; font-size:18px; line-height:1.6; letter-spacing:.005em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } /* warm vignette + film grain overlay */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.022), transparent 58%), radial-gradient(140% 100% at 50% 120%, rgba(0,0,0,.5), transparent 55%); } body::after{ content:"";position:fixed;inset:0;z-index:1;pointer-events:none; opacity:calc(.05 * var(--grain)); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit} /* ---- Typografi ---- */ .display{ font-family:var(--font-display),'Oswald',sans-serif; font-weight:var(--display-weight); line-height:1.05; letter-spacing:var(--display-tracking); text-transform:uppercase; padding-bottom:.12em; } /* serif/slab-par: ikke versaler i overskrift */ :root[data-dir="editorial"] .display{text-transform:none;line-height:1.06;letter-spacing:0;} :root[data-dir="slab"] .display{letter-spacing:0;} /* kart-par: labels i Space Grotesk tåler mindre sperring */ :root[data-dir="kart"] .eyebrow{letter-spacing:.16em} :root[data-dir="kart"] .mono{letter-spacing:.1em} .eyebrow{ font-family:var(--font-cond),sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.2em; font-size:14px; color:var(--accent); display:inline-flex;align-items:center;gap:10px; } .eyebrow::before{ content:"";width:26px;height:2px;background:var(--accent);display:inline-block; } .mono{ font-family:'Barlow Condensed',ui-monospace,monospace; letter-spacing:.12em;text-transform:uppercase;font-size:14.5px;font-weight:600; color:var(--ink-3); } /* ---- Layout ---- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2} .section{position:relative;z-index:2;padding:clamp(56px,9vw,120px) 0} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px;flex-wrap:wrap} .section-head h2{ margin:12px 0 0;font-size:clamp(30px,4vw,50px);white-space:nowrap; } .section-head .display{margin:0} /* ---- Topbar ---- */ .topbar{ position:relative;z-index:50; background:var(--bg); border-bottom:1px solid var(--line-soft); } .topbar .wrap{display:flex;align-items:center;gap:28px;height:120px} .brand{display:flex;align-items:center;gap:18px;flex:none} .brand img{height:107px;width:auto} .brand .wm{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1} .brand .wm b{font-family:var(--font-display),sans-serif;font-weight:var(--display-weight); font-size:38px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap} .brand .wm span{font-family:var(--font-cond);font-weight:600;letter-spacing:.34em; font-size:18px;color:var(--ink-3);text-transform:uppercase;margin-top:7px;white-space:nowrap;text-indent:.34em} .nav{display:flex;align-items:center;gap:6px;margin-left:auto} .nav a{ font-family:var(--font-cond);font-weight:600;text-transform:uppercase; letter-spacing:.06em;font-size:18px;color:var(--ink-2);white-space:nowrap; padding:9px 11px;border-radius:var(--radius);transition:color .15s,background .15s; } .nav a:hover{color:var(--ink);background:var(--panel-2)} .nav a.active{color:var(--accent)} .nav a.active:hover{background:var(--accent-glow)} /* ---- Knapper ---- */ .btn{ display:inline-flex;align-items:center;gap:10px;cursor:pointer;white-space:nowrap; font-family:var(--font-cond);font-weight:700;text-transform:uppercase; letter-spacing:.08em;font-size:16.5px; padding:15px 26px;border-radius:var(--radius);border:1px solid transparent; transition:transform .12s var(--ease),background .15s,border-color .15s,color .15s; } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--accent);color:var(--accent-ink); box-shadow:0 6px 24px -8px var(--accent-glow)} .btn-primary:hover{background:var(--accent-2)} .btn-ghost{border-color:var(--line);color:var(--ink);background:transparent} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .btn .arr{font-size:16px;line-height:0} .pill{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-cond);font-weight:600;text-transform:uppercase;letter-spacing:.12em; font-size:13.5px;padding:7px 13px;border-radius:999px;border:1px solid var(--line); color:var(--ink-2);background:var(--panel-2); } .pill.accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:var(--accent-glow)} .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)} .pill.live .dot{box-shadow:0 0 0 0 var(--accent);animation:pulse 1.8s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} /* ---- Kart-chip (overlay på kart/bilder) ---- */ .map-chip{position:absolute;left:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:8px; font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:13.5px; color:var(--ink);background:color-mix(in srgb,var(--panel) 82%,transparent); border:1px solid var(--line);padding:7px 12px 6px;border-radius:5px;backdrop-filter:blur(5px)} .map-chip .chip-ic{width:14px;height:14px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .map-chip .dist{color:var(--accent);font-weight:700} /* ---- Bilde-plassholdere ---- */ .ph{ position:relative;overflow:hidden;background:var(--panel-2); border:1px solid var(--line);border-radius:var(--radius); background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 11px); display:flex;align-items:flex-end; } .ph::before{ content:"";position:absolute;inset:0; background:radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%); } .ph .ph-tag{ position:relative;margin:14px;font-family:'Barlow Condensed',monospace; font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3); background:color-mix(in srgb,var(--bg) 70%,transparent); border:1px solid var(--line);padding:5px 9px;border-radius:3px;backdrop-filter:blur(4px); } .ph.center{align-items:center;justify-content:center} .ph.center .ph-tag{margin:0} /* ---- Avatar (genererte portretter) ---- */ .avatar{position:relative;overflow:hidden;background:var(--panel-3)} .avatar svg{position:absolute;inset:0;width:100%;height:100%;display:block} /* ---- Kort ---- */ .card{ background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); position:relative;transition:border-color .18s,transform .18s var(--ease); } .card:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))} :root[data-dir="editorial"] .card{box-shadow:inset 0 0 0 1px var(--line-soft)} /* tynn aksentstrek (rolig, ikke faresone-striper) */ .hazard{height:2px;background:var(--accent);opacity:.85} /* ---- Stempel-segl (bakeri-inspirert klubbsegl) ---- */ .seal{position:absolute;pointer-events:none;color:var(--accent);opacity:.4;transform:rotate(-7deg)} .seal svg{display:block;width:100%;height:100%} .seal text{font-family:var(--font-cond),sans-serif;font-weight:600;fill:currentColor;letter-spacing:.06em} .seal .yr{font-family:var(--font-display),serif;font-weight:var(--display-weight);letter-spacing:.01em} :root:is([data-palette="midnatt"],[data-palette="skog"],[data-palette="asfalt"]) .seal{opacity:.34} /* ---- Footer ---- */ .footer{position:relative;z-index:2;border-top:1px solid var(--line);background:var(--bg-2);margin-top:40px} .footer .wrap{padding-top:64px;padding-bottom:40px} .foot-grid{display:flex;flex-direction:column;gap:52px} .foot-head{display:grid;grid-template-columns:30% 1fr;gap:44px;align-items:center} .foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px} .foot-intro p{color:var(--ink-2);max-width:62ch;margin:0;font-size:17.5px;line-height:1.62} .footer h4{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.14em; font-size:13px;color:var(--ink-3);margin:0 0 16px} .footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .footer a{color:var(--ink-2);font-size:16.5px} .footer a:hover{color:var(--accent)} .foot-brand img{width:100%;height:auto;max-width:380px;margin:0} .foot-bottom{display:flex;justify-content:space-between;align-items:center; margin-top:48px;padding-top:24px;border-top:1px solid var(--line-soft);flex-wrap:wrap;gap:12px} .foot-bottom .mono{color:var(--ink-3)} /* ---- Diverse ---- */ .divider{height:1px;background:var(--line-soft);border:0;margin:0} .meta-row{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center} .meta-item{display:flex;align-items:center;gap:9px;color:var(--ink-2);font-size:16px} .meta-item .k{font-family:'Barlow Condensed';text-transform:uppercase;letter-spacing:.1em; font-size:13px;color:var(--ink-3);display:block;line-height:1.25} .meta-item .v{color:var(--ink);font-weight:500;display:block;line-height:1.3;font-size:16.5px} a.meta-link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);transition:.15s} a.meta-link:hover{text-decoration-color:var(--accent)} .meta-item svg{flex:none;color:var(--accent)} /* avatars */ .avstack{display:flex;align-items:center} .av{width:34px;height:34px;border-radius:50%;border:2px solid var(--panel); margin-left:-10px;background:var(--panel-3);display:flex;align-items:center;justify-content:center; font-family:'Barlow Condensed';font-weight:700;font-size:13px;color:var(--ink-2); background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 6px)} .av:first-child{margin-left:0} .av.more{background:var(--accent);color:var(--accent-ink)} /* responsive helpers set later per-page */ @media(max-width:880px){ .nav{display:none} .foot-head{grid-template-columns:1fr;gap:24px} .foot-cols{grid-template-columns:1fr 1fr} }