@import url("/css/fonts.css"); @import url("/css/tokens.css"); /* ========================================================================== Grund ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; /* Slat olivgron grund. Det tidigare parlmonstret och papperskornigheten hor till ett tryckt formsprak - forlagan ar mjuk och slat, och pa en tonad grund blev monstret dessutom smutsigt. */ background-color: var(--bg); color: var(--text); font-family: var(--font-brod); font-size: var(--steg-0); line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-rubrik); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 var(--rum-2); color: var(--oliv-djup); } h1 { font-size: var(--steg-3); } h2 { font-size: var(--steg-2); } h3 { font-size: var(--steg-1); } p { margin: 0 0 var(--rum-2); max-width: 62ch; text-wrap: pretty; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-mork); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent-mork); outline-offset: 3px; border-radius: 2px; } /* Hoppa till innehall - syns bara vid tangentbordsfokus */ .hoppa { position: absolute; left: var(--rum-2); top: -4rem; z-index: 100; background: var(--oliv-djup); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--radie-rund); text-decoration: none; transition: top var(--snabb) var(--kurva); } .hoppa:focus { top: var(--rum-2); color: var(--papper); } /* Ingen papperskornighet langre - se kommentaren i body. */ .matta { width: var(--matta); margin-inline: auto; } .matta-bred { width: var(--matta-bred); margin-inline: auto; } .matta-smal { width: var(--matta-smal); margin-inline: auto; } .sektion { padding-block: var(--rum-5); } .mitt { text-align: center; } .mitt p { margin-inline: auto; } .dold { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ogonbryn { font-size: var(--steg--1); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-svag); margin-bottom: var(--rum-2); } /* Tunn dekorlinje under ogonbrynet - ger sidorna en redaktionell ram */ .ogonbryn::after { content: ""; display: block; width: 2.5rem; height: 1px; background: var(--accent); margin-top: 0.75rem; opacity: 0.5; } .mitt .ogonbryn::after { margin-inline: auto; } /* ========================================================================== Rorelse - allt avstangt under prefers-reduced-motion ========================================================================== */ /* Intoningen ar en forbattring, inte ett krav. Innehallet doljs BARA om skriptet hunnit sla pa .avslojning pa - annars star allt synligt. Forut lag korten pa opacity:0 fran borjan, sa ett skript som inte kordes gjorde hela rutnatet permanent osynligt. */ .avslojning .avslojas { opacity: 0; transform: translateY(18px); } .avslojning .avslojas.synlig { opacity: 1; transform: none; transition: opacity var(--lugn) var(--kurva), transform var(--lugn) var(--kurva); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .avslojning .avslojas { opacity: 1; transform: none; } } /* ========================================================================== Knappar - minst 44px traffyta ========================================================================== */ .knapp { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: var(--traffyta); padding: 0.8rem 1.75rem; font-family: var(--font-brod); font-size: var(--steg--1); font-weight: 600; letter-spacing: 0.01em; border: 1px solid var(--knapp-kant); border-radius: var(--radie-rund); white-space: nowrap; background: var(--knapp); color: var(--knapp-text); box-shadow: var(--skugga); text-decoration: none; cursor: pointer; transition: background var(--snabb) var(--kurva), transform var(--snabb) var(--kurva), box-shadow var(--snabb) var(--kurva); } .knapp:hover { background: var(--knapp-hover); color: var(--knapp-text); border-color: var(--knapp-text); transform: translateY(-2px); box-shadow: var(--skugga-lyft); } .knapp:active { transform: translateY(0); } /* Lugn variant: samma grona platta som primarknappen, men utan lyft-skugga - Max ville ha en enda knappgron med vit text pa hela sajten (2026-09-04) */ .knapp--lugn { background: var(--knapp); color: var(--knapp-text); border-color: var(--knapp-kant); box-shadow: none; } .knapp--lugn:hover { background: var(--knapp-hover); color: var(--knapp-text); border-color: var(--knapp-text); } /* Textlank som beter sig som knapp */ .knapp-text { display: inline-flex; align-items: center; min-height: var(--traffyta); background: none; border: 0; padding: 0; font: inherit; font-size: var(--steg--1); color: var(--accent-mork); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .knapp-text:hover { color: var(--accent); } /* ========================================================================== Toppmeny ========================================================================== */ .topp { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--kant); } .topp__inre { display: flex; align-items: center; justify-content: space-between; gap: var(--rum-3); padding-block: 0.9rem; } .topp__namn { font-family: var(--font-rubrik); font-size: var(--steg-1); color: var(--oliv-djup); text-decoration: none; line-height: 1.1; } .topp__namn small { display: block; font-family: var(--font-brod); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-svag); } .topp nav { display: flex; align-items: center; gap: var(--rum-3); } .topp .knapp { min-height: 0; padding: 0.6rem 1.25rem; } .topp nav a { display: inline-flex; align-items: center; min-height: var(--traffyta); font-size: var(--steg--1); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ink-mjuk); transition: color var(--snabb) var(--kurva); } .topp nav a:hover, .topp nav a[aria-current="page"] { color: var(--accent-mork); } /* ...men gronplattorna i toppen ska ha vit text. Reglerna ovanfor ar mer specifika an .knapp och .vaxel, sa de maste skrivas over har. */ .topp nav > a.knapp, .topp nav > a.knapp:hover { color: var(--knapp-text); } .topp .vaxel a[aria-current="page"], .topp .vaxel a[aria-current="page"]:hover { color: var(--knapp-text); } /* Vaxlaren mellan de tva varldarna */ .vaxel { display: inline-flex; padding: 3px; border: 1px solid var(--kant); border-radius: 999px; background: var(--bg-alt); } .vaxel a { min-height: 0; padding: 0.5rem 0.95rem; border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--ink-mjuk); transition: background var(--snabb) var(--kurva), color var(--snabb) var(--kurva); } .vaxel a[aria-current="page"] { background: var(--knapp); color: var(--knapp-text); box-shadow: 0 1px 3px rgb(48 56 38 / 0.18); } /* Mobil: fyra saker far inte plats pa en rad, sa toppen bryts i tva - namnet overst, navigationen under. Da ryms bade "Om mig" och kontaktknappen utan att nagot klams ihop till tva textrader. */ @media (max-width: 640px) { .topp__inre { flex-wrap: wrap; gap: var(--rum-1) var(--rum-2); padding-block: 0.7rem; } .topp__namn { flex: 1 0 100%; font-size: var(--steg-0); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topp nav { flex: 1 0 100%; gap: var(--rum-2); justify-content: space-between; } /* alla lankar far synas nu nar de har en egen rad */ .topp nav > a { display: inline-flex; min-height: 0; } .topp nav > a.knapp { padding: 0.5rem 0.9rem; flex: 0 0 auto; } .vaxel a { padding: 0.5rem 0.8rem; font-size: 0.68rem; } } /* Riktigt smala skarmar: vaxlaren far krympa forst */ @media (max-width: 400px) { .topp nav { gap: var(--rum-1); } .vaxel a { padding: 0.5rem 0.6rem; font-size: 0.64rem; letter-spacing: 0.06em; } .topp nav > a:not(.knapp) { font-size: 0.68rem; letter-spacing: 0.04em; } } /* ========================================================================== Entresidan ========================================================================== */ .entre { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; background: var(--bg); } .entre__topp { padding: var(--rum-5) 0 var(--rum-4); text-align: center; } .entre__titel { font-size: var(--steg-5); margin-bottom: var(--rum-2); } .entre__under { color: var(--ink-mjuk); max-width: 46ch; margin-inline: auto; } .portar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rum-3); padding: 0 var(--rum-3) var(--rum-4); } @media (max-width: 760px) { .portar { grid-template-columns: 1fr; } /* Pa mobil blev 46svh per port en stor tom yta med texten langst ner, och det andra valet hamnade utanfor skarmen. Lat innehallet styra hojden i stallet. */ .port { min-height: auto; padding: var(--rum-4) var(--rum-3); justify-content: flex-start; } .entre__topp { padding: var(--rum-4) 0 var(--rum-3); } .entre__titel { font-size: var(--steg-4); } .entre { min-height: 0; } } .port { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 15rem; padding: var(--rum-4) var(--rum-3); text-decoration: none; color: inherit; overflow: hidden; border: 1px solid var(--linje); border-radius: var(--radie-xl); box-shadow: var(--skugga); transition: background var(--lugn) var(--kurva), transform var(--lugn) var(--kurva), box-shadow var(--lugn) var(--kurva); } .port:hover { transform: translateY(-3px); box-shadow: var(--skugga-lyft); } .port--smycken { background: var(--yta); } .port--smycken:hover { background: var(--yta); } .port--bocker { background: var(--yta-lugn); } .port--bocker:hover { background: var(--yta-lugn); } .port__namn { font-family: var(--font-rubrik); font-size: var(--steg-3); color: var(--oliv-djup); margin-bottom: var(--rum-2); line-height: 1.1; } .port__text { color: var(--ink-mjuk); max-width: 34ch; margin-bottom: var(--rum-2); } .port__pil { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--steg--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-mork); } .port__pil::after { content: "\2192"; transition: transform var(--snabb) var(--kurva); } .port:hover .port__pil::after { transform: translateX(4px); } .port--smycken .port__pil { color: var(--salvia-mork); } .port--bocker .port__pil { color: var(--oliv-mork); } .entre__fot { padding: var(--rum-3) 0 var(--rum-4); text-align: center; color: var(--ink-svag); font-size: var(--steg--1); } .entre__fot p { margin: 0 auto; max-width: 46ch; } /* ========================================================================== Hero ========================================================================== */ /* Redaktionell hjalte: rubriken tar plats, ingressen star som en smal spalt bredvid i stallet for under. Var tidigare en centrerad kloss. */ .hero { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--rum-3); align-items: end; /* Rundad panel med mjuk toning i stallet for oppen sida - forlagans hero-band, men infattat sa den olivgrona grunden syns runt om. */ margin-top: var(--rum-3); padding: var(--rum-5) var(--rum-4) var(--rum-4); background: var(--toning-hjalte); border: 1px solid color-mix(in srgb, var(--kant) 70%, transparent); border-radius: var(--radie-xl); box-shadow: var(--skugga); overflow: hidden; } /* Ett armband i kontur - cirkel av parlor, ritad med prickad linje. Ligger i det tomrum som annars blev over till hoger om rubriken. */ .hero::before { content: ""; position: absolute; pointer-events: none; right: 30%; top: 33%; width: 275px; height: 275px; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='86' fill='none' stroke='%236F7F55' stroke-width='9' stroke-linecap='round' stroke-dasharray='0.1 15'/%3E%3C/svg%3E"); opacity: 0.22; } .hero > * { position: relative; } @media (max-width: 1150px) { .hero::before { width: 210px; height: 210px; right: 33%; } } @media (max-width: 900px) { .hero::before { display: none; } } .hero .ogonbryn { grid-column: 1 / -1; } .hero__titel { grid-column: 1 / span 8; margin: 0; font-size: var(--steg-5); letter-spacing: -0.035em; line-height: 0.98; } .hero__ingress { grid-column: 9 / span 4; margin: 0 0 0.6rem; font-size: var(--steg-0); color: var(--ink-mjuk); line-height: 1.6; border-left: 1px solid var(--kant); padding-left: var(--rum-2); } /* Hjaltens knapprad - forlagan satter alltid en tydlig uppmaning har */ .hero__knappar { grid-column: 1 / span 8; display: flex; flex-wrap: wrap; gap: var(--rum-2); margin-top: var(--rum-3); } @media (max-width: 900px) { .hero__knappar { margin-top: var(--rum-3); } } /* Anfang - inledande versal i serif, som i en tryckt bok */ .hero__ingress::first-letter { float: left; font-family: var(--font-rubrik); font-weight: 400; font-size: 3.1em; line-height: 0.82; color: var(--accent-mork); margin: 0.06em 0.1em 0 0; } @media (max-width: 900px) { .hero { display: block; padding: var(--rum-4) var(--rum-3); } .hero__titel { font-size: var(--steg-4); max-width: 14ch; margin-bottom: var(--rum-3); } .hero__ingress { border-left: 0; padding-left: 0; max-width: 46ch; } } /* ========================================================================== "Sa gar det till" - en enda rad ovanfor rutnatet. Var tidigare ett helt stycke; det var mer text an nagon laser innan hon fatt se smyckena. ========================================================================== */ .sagardet { display: flex; align-items: baseline; gap: var(--rum-2) var(--rum-3); padding-block: var(--rum-2); margin-bottom: var(--rum-4); font-size: var(--steg--1); color: var(--ink); } .sagardet .ogonbryn { margin: 0; flex: none; color: var(--ink-mjuk); } .sagardet .ogonbryn::after { display: none; } .sagardet p { margin: 0; max-width: none; } .sagardet em { font-family: var(--font-rubrik); font-style: italic; color: var(--ink); } @media (max-width: 620px) { .sagardet { flex-direction: column; gap: var(--rum-1); } } /* ========================================================================== Parlrad - avdelare gjord av sma parlor pa ett strack. Dekorationen ar hamtad ur det hon faktiskt gor: parlarmband. Ren CSS, inga bilder. ========================================================================== */ .parlrad { display: block; position: relative; height: 13px; margin-block: var(--rum-4); border: 0; } /* traden */ .parlrad::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: var(--kant); } /* parlorna */ .parlrad::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at center, var(--accent) 3.6px, transparent 4.2px); background-size: 15px 13px; background-repeat: repeat-x; background-position: center; opacity: 0.45; } /* kort variant, centrerad - anvands som avslutning i stallet for full bredd */ .parlrad--kort { width: 8.5rem; margin-inline: auto; } /* Avdelare: parlrad - ornament - parlrad */ .avdelare { display: flex; align-items: center; gap: var(--rum-3); margin-block: var(--rum-5); } .avdelare .parlrad { flex: 1; margin: 0; } .avdelare .ornament { flex: none; margin: 0; } /* ========================================================================== Ornament - tunn linjeteckning av kors och parla, hennes egna motiv ========================================================================== */ .ornament { display: block; width: 46px; height: 62px; margin: 0 auto; color: var(--accent); opacity: 0.55; } .ornament path, .ornament circle, .ornament line { vector-effect: non-scaling-stroke; } /* ========================================================================== Citatbrytning - stor kursiv rad som delar rutnatet pa mitten ========================================================================== */ .brytning { padding-block: var(--rum-4); text-align: center; } .brytning__ord { font-family: var(--font-rubrik); font-style: italic; font-weight: 400; font-size: var(--steg-3); line-height: 1.25; letter-spacing: -0.02em; color: var(--oliv-djup); max-width: 20ch; margin: 0 auto; text-wrap: balance; } .brytning__vem { display: block; margin-top: var(--rum-3); font-family: var(--font-brod); font-style: normal; font-size: var(--steg--1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-svag); } .brytning .ornament { margin-bottom: var(--rum-3); } .brytning .parlrad--kort { margin-top: var(--rum-3); } /* ========================================================================== Rutnat av verk - bilden ar produkten ========================================================================== */ /* Redaktionellt rutnat: tva verk per rad i omvaxlande bredd, det hogra nedskjutet. En jamn 4-upp-rad gav ingen rytm alls - allt lag pa linje och sidan sag ut som en mall. */ .rutnat { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--rum-3); row-gap: var(--rum-4); list-style: none; padding: 0; margin: 0; } @media (max-width: 900px) { .rutnat { grid-template-columns: 1fr 1fr; column-gap: var(--rum-2); row-gap: var(--rum-3); } } @media (max-width: 460px) { .rutnat { grid-template-columns: 1fr; } } .verk { display: flex; flex-direction: column; } /* Lopnummer, som i en tryckt katalog */ .verk__nr { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-rubrik); font-style: italic; font-size: var(--steg-1); line-height: 1; color: var(--nummer); margin-bottom: 0.75rem; } /* harfin linje ut fran siffran - ger varje kort en egen overkant */ .verk__nr::after { content: ""; flex: 1; height: 1px; background: var(--kant); } /* i faktarutan star siffran ensam */ .faktaruta .verk__nr::after { display: none; } .verk__oppna { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; } /* Passepartout - bilden ar monterad i en ram med marginal, som ett inramat tryck, i stallet for att ligga naken mot papperet. */ .verk__ram { position: relative; display: block; padding: 12px; border: 1px solid color-mix(in srgb, var(--kant) 70%, transparent); border-radius: var(--radie-xl); background: var(--yta); box-shadow: var(--skugga); transition: border-color var(--lugn) var(--kurva), box-shadow var(--lugn) var(--kurva), transform var(--lugn) var(--kurva); } .verk__oppna:hover .verk__ram { border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--skugga-lyft); transform: translateY(-3px); } .verk__yta { position: relative; display: block; overflow: hidden; border-radius: var(--radie-l); /* Explicit bakgrund: multiply blandar mot narmaste bakgrund, och utan en sadan forsvinner bilden helt i Safari pa iPhone. Med papperet satt har blir resultatet detsamma men deterministiskt. Sedan grunden blev olivgron maste den vara kortytan, inte sidans bakgrund - annars drar multiply hela fotot at gront. */ background: var(--yta); isolation: isolate; } /* Fotona ar tagna mot vitt/ljusgratt underlag. Multiplicerar man dem mot sidan blir det vita till papper och smycket ligger kvar - da slutar bilderna se ut som pafastade rutor och sidan haller ihop. Lyfter samtidigt kontrasten nagot; telefonfotona ar lite flacka. */ .verk__bild { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; opacity: 1; mix-blend-mode: multiply; filter: contrast(1.06) saturate(1.04); transition: transform var(--lugn) var(--kurva); } .verk__oppna:hover .verk__bild { transform: scale(1.04); } /* Diskret uppmaning som tonar in over bilden vid hover - goms pa touch */ .verk__hint { position: absolute; inset-inline: 0; bottom: 0; padding: 2.5rem 1rem 0.9rem; background: linear-gradient(to top, var(--slojan), transparent); color: var(--papper); font-size: var(--steg--1); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; opacity: 0; transition: opacity var(--snabb) var(--kurva); } .verk__oppna:hover .verk__hint, .verk__oppna:focus-visible .verk__hint { opacity: 1; } @media (hover: none) { .verk__hint { display: none; } } /* Beskrivningen ar etiketten - kursiv serif, satt som en bildtext. Smyckena har med flit inga produktnamn (se README). */ .verk__text { display: block; font-family: var(--font-rubrik); font-style: italic; font-size: var(--steg-0); line-height: 1.45; color: var(--oliv-djup); margin: var(--rum-2) 0 0.35rem; max-width: 34ch; } .verk__oppna:hover .verk__text { color: var(--accent-mork); } .faktaruta__rubrik { font-family: var(--font-rubrik); font-style: italic; font-weight: 400; font-size: var(--steg-1); line-height: 1.4; color: var(--oliv-djup); margin: 0 0 var(--rum-2); letter-spacing: 0; } .verk__pris { color: var(--ink-mjuk); font-size: var(--steg--1); letter-spacing: 0.08em; margin: 0; } .verk__slut { color: var(--salvia-mork); font-size: var(--steg--1); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; } /* ========================================================================== Bocker ========================================================================== */ .bocker { display: grid; gap: var(--rum-4) var(--rum-3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); list-style: none; padding: 0; margin: 0; } @media (max-width: 620px) { .bocker { grid-template-columns: 1fr 1fr; gap: var(--rum-3) var(--rum-2); } } .bok__omslag { aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radie); border: 1px solid color-mix(in srgb, var(--kant) 60%, transparent); box-shadow: var(--skugga); background: var(--bg-alt); width: 100%; transition: transform var(--lugn) var(--kurva), box-shadow var(--lugn) var(--kurva); } .bok:hover .bok__omslag { transform: translateY(-4px); box-shadow: var(--skugga-lyft); } .bok__titel { font-family: var(--font-rubrik); font-size: var(--steg-1); margin: var(--rum-2) 0 0.2rem; color: var(--oliv-djup); line-height: 1.25; } .bok__meta { color: var(--ink-mjuk); font-size: var(--steg--1); margin-bottom: 0.35rem; } /* ========================================================================== Faktarutor - pa mobil ett ark som glider upp underifran ========================================================================== */ dialog.bokruta, dialog.faktaruta { border: 1px solid color-mix(in srgb, var(--kant) 70%, transparent); border-radius: var(--radie-xl); box-shadow: var(--skugga-lyft); padding: var(--rum-3); max-width: 42rem; width: min(42rem, calc(100% - 2rem)); background: var(--yta); color: var(--text); } dialog.bokruta::backdrop, dialog.faktaruta::backdrop { background: var(--bakgrundsdis); backdrop-filter: blur(3px); } .faktaruta__bild { width: 100%; max-width: 20rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radie-l); border: 1px solid var(--kant); margin-bottom: var(--rum-3); } .faktaruta__rad { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rum-2); margin-top: var(--rum-3); } @media (max-width: 620px) { dialog.bokruta, dialog.faktaruta { width: 100%; max-width: none; margin: 0; margin-top: auto; max-height: 92svh; border-radius: var(--radie-xl) var(--radie-xl) 0 0; border-bottom: 0; padding: var(--rum-3) var(--rum-3) var(--rum-4); } .faktaruta__bild { max-width: none; } .faktaruta__rad .knapp { width: 100%; } } /* ========================================================================== Veckans ord ========================================================================== */ .veckans-ord { width: var(--matta); margin: var(--rum-4) auto 0; background: var(--yta-lugn); color: var(--ink); padding-block: var(--rum-5); text-align: center; border: 1px solid var(--kant); border-radius: var(--radie-xl); } .veckans-ord h2 { color: var(--oliv-mork); font-size: var(--steg--1); letter-spacing: 0.2em; text-transform: uppercase; font-family: var(--font-brod); } .veckans-ord__intro { color: var(--ink-mjuk); font-size: var(--steg--1); margin: var(--rum-1) auto 0; max-width: 34ch; } .veckans-ord blockquote { margin: var(--rum-3) auto 0; max-width: 34ch; font-family: var(--font-rubrik); font-size: var(--steg-2); line-height: 1.35; color: var(--ink); } .veckans-ord cite { display: block; margin-top: var(--rum-3); font-style: normal; font-size: var(--steg--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-svag); } /* ========================================================================== Fortroende - tre korta loften ovanfor kontakt ========================================================================== */ .loften { display: grid; gap: var(--rum-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; padding: 0; margin: 0; } .lofte { background: var(--yta); border: 1px solid color-mix(in srgb, var(--kant) 70%, transparent); border-radius: var(--radie-l); padding: var(--rum-3); box-shadow: var(--skugga); } .lofte__rubrik { font-family: var(--font-rubrik); font-size: var(--steg-1); color: var(--oliv-djup); margin: 0 0 0.35rem; line-height: 1.25; } .lofte p { color: var(--ink-mjuk); font-size: var(--steg--1); margin: 0; max-width: 32ch; } /* ========================================================================== Kontakt ========================================================================== */ .kontakt { position: relative; background: var(--bg-alt); } .kontakt > * { position: relative; } .kontakt__rad { display: flex; flex-wrap: wrap; gap: var(--rum-2); justify-content: center; margin-top: var(--rum-3); } @media (max-width: 480px) { .kontakt__rad .knapp { width: 100%; } } /* Mobilens fasta kontaktrad - dyker upp nar besokaren scrollat forbi hjalten */ .snabbkontakt { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: none; gap: 0.5rem; padding: 0.6rem; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--kant); transform: translateY(110%); transition: transform var(--lugn) var(--kurva); } .snabbkontakt.synlig { transform: none; } .snabbkontakt .knapp { flex: 1; padding-inline: 0.75rem; font-size: var(--steg--1); } @media (max-width: 620px) { .snabbkontakt { display: flex; } body.har-snabbkontakt { padding-bottom: 4.5rem; } } /* ========================================================================== Fot ========================================================================== */ /* undertitel i bokrutan - titeln star for sig, undertiteln under den */ .bok__undertitel { margin: calc(var(--rum-1) * -1) 0 var(--rum-2); font-style: italic; color: var(--ink-mjuk); } .fot { padding-block: var(--rum-2); font-size: var(--steg--1); color: var(--ink-svag); } /* parlraden i foten ar en avslutning, inte en avdelare - den behover inte rum-4 pa bada sidor */ .fot .parlrad { margin-block: 0 var(--rum-2); } .fot__inre { display: flex; flex-wrap: wrap; gap: var(--rum-1) var(--rum-3); justify-content: space-between; align-items: center; } .fot a { color: var(--ink-mjuk); } .fot nav { display: flex; flex-wrap: wrap; gap: var(--rum-1) var(--rum-2); } /* Syns bara sa lange en text ar ett ogodkant utkast */ .utkast { background: var(--utkast-bg); border: 1px solid var(--salvia); border-radius: var(--radie-l); padding: var(--rum-2); color: var(--salvia-mork); font-size: var(--steg--1); max-width: none; }