------------------------------------------------------------------ */ .hs-hero { position: relative; min-height: clamp(620px, 92vh, 940px); display:flex; align-items:flex-end; } .hs-hero .hero-bg { position:absolute; inset:0; } .hs-hero .hero-bg img { width:100%; height:100%; object-fit:cover; } .hs-hero .hero-bg::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,40,30,0.40) 0%, rgba(20,40,30,0.28) 40%, rgba(20,40,30,0.88) 100%); } .hs-hero .hero-inner { position:relative; z-index:1; width:100%; padding-bottom: clamp(56px,8vh,108px); padding-top:78px; } .hs-hero .hero-copy { max-width: 780px; } .hs-hero .display { margin: 24px 0 26px; max-width: 15ch; } .hs-hero .lede { max-width: 50ch; margin-bottom: 38px; } .intent-hero { padding-top: 78px; } .intent-hero .ih-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px,5vw,84px); align-items: center; padding-block: clamp(56px,8vw,110px); } .intent-hero .ih-copy .display { margin: 24px 0 24px; max-width: 14ch; } .intent-hero .ih-copy .lede { max-width: 48ch; } .intent-hero .ih-media { aspect-ratio: 5/6; border-radius: 3px; overflow: hidden; position: relative; } .intent-hero .ih-media img { width:100%; height:100%; object-fit: cover; } .fact-strip { background: var(--green); } .fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-green); } .fact { background: var(--green); padding: clamp(30px,3.5vw,46px) clamp(22px,2.5vw,34px); } .fact .f-lab { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 14px; } .fact .f-val { font-family:'Crimson Pro',serif; font-size: 1.25rem; color: var(--on-green); line-height: 1.3; } .fact .f-val small { display:block; font-family:'Inter',sans-serif; font-size:0.8rem; color: var(--on-green-soft); margin-top:6px; letter-spacing:0; } .do-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); margin-top: 48px; } .do-list li { padding: 26px 8px 26px 0; border-bottom: 1px solid var(--line); font-family:'Crimson Pro',serif; font-size: 1.3rem; color: var(--green); display:flex; align-items:center; gap:14px; } .do-list li::before { content:""; width:6px; height:6px; background: var(--gold); border-radius:50%; flex-shrink:0; } /* ---------- FAQ (delad — se faq-data.js / faq.js) ---------- */ .faq { max-width: 820px; margin-top: 44px; } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between; gap: 24px; align-items: center; font-family: 'Crimson Pro', serif; font-size: 1.25rem; color: var(--green); } .faq summary::-webkit-details-marker { display: none; } .faq summary .fq-plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; } .faq summary .fq-plus::before, .faq summary .fq-plus::after { content: ""; position: absolute; background: var(--gold); transition: transform .4s var(--ease); } .faq summary .fq-plus::before { top: 50%; left: 0; right: 0; height: 1.4px; transform: translateY(-50%); } .faq summary .fq-plus::after { left: 50%; top: 0; bottom: 0; width: 1.4px; transform: translateX(-50%); } .faq details[open] summary .fq-plus::after { transform: translateX(-50%) scaleY(0); } .faq .fq-body { padding: 0 0 26px; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; max-width: 64ch; } .faq .fq-body a { color: var(--green); text-decoration: underline; text-decoration-color: var(--line-gold); text-underline-offset: 3px; } /* INLINE-LANKAR I LOPTEXT ------------------------------------------------------------ Den globala regeln a { color: inherit; text-decoration: none } gor varje lank i brodtext osynlig. Bara .fq-body hade en egen regel, sa 160 lankar pa 48 sidor gick inte att se som lankar, daribland "Hemservice" och "Housekeeping" i tjanstesektionen pa samtliga nio ortssidor. Samma behandling som FAQ-svaren. :not([class]) lamnar .link-arrow, .btn och .fact-link i fred, de bar sin egen form. */ .st-body p a:not([class]), .tm-body p a:not([class]), .nf-way p a:not([class]), .kc-val a:not([class]), .ih-inner p a:not([class]), .ph-inner p a:not([class]), .fh-inner p a:not([class]), .tj-grid p a:not([class]), .bt-list li a:not([class]), .st-body li a:not([class]), .container > ul li a:not([class]) { color: var(--green); text-decoration: underline; text-decoration-color: var(--line-gold); text-underline-offset: 3px; } /* Pa gron botten far lanken ljus text och guldstreck i stallet, annars blir den osynlig igen. */ .on-green p a:not([class]), .on-green .st-body p a:not([class]) { color: var(--on-green); text-decoration-color: var(--gold-light); } .faq-more { margin-top: 28px; } /* FAQ-huvudsidan: filter + grupper */ .faq-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; } .faq-filter .ff-btn { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 100px; padding: 8px 16px; background: transparent; transition: all .35s var(--ease); } .faq-filter .ff-btn:hover { border-color: var(--line-gold); color: var(--green); } .faq-filter .ff-btn.on { background: var(--green); border-color: var(--green); color: var(--cream); } .faq-group { margin-top: clamp(48px, 6vw, 76px); } .faq-group[hidden] { display: none; } .faq details[hidden] { display: none; } .faq-group-title { font-size: clamp(1.5rem, 2.4vw, 2rem); padding-bottom: 6px; border-bottom: 1px solid var(--line-gold); max-width: 820px; } .faq-group .faq { margin-top: 8px; } /* Avsnitt utan bild. En textspalt i en sektion som är 1440px bred lämnar 900px tomma till höger, och det läser som oavslutat snarare än luftigt. Rubriken flyttas ut i egen spalt: samma text, hela bredden använd. */ .split-text { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(28px,4.5vw,72px); align-items: start; } .split-text .st-head h2 { margin-top: 2px; } .split-text .st-body p { margin-bottom: 15px; } .split-text .st-body p:last-child { margin-bottom: 0; } .split-text .st-body > ul { margin-top: 4px; } /* Bild i rubrikspalten. Ett avsnitt med fyra stycken text ger en hög textspalt och en rubrikspalt som är tom under rubriken. Bilden fyller den, i stället för att ligga i en egen halva och sväva mitt i den. */ .split-text .st-media { margin-top: clamp(20px, 2.6vw, 34px); } .split-text .st-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; } @media (max-width: 880px) { .split-text { grid-template-columns: 1fr; gap: 18px; } .split-text .st-media { margin-top: 16px; margin-bottom: 4px; } } /* ---------- Artikelsidor (sidtyp A) ---------- Delas av de sex migrerade artiklarna. En läsbredd, inga kort, inga block: sidan ska läsas uppifrån och ned och sluta i en länk till den tjänstesida artikeln tjänar. */ .art-hero { padding-top: 78px; } .art-hero .ah-inner { padding-block: clamp(50px,7vw,96px); max-width: 58ch; } .art-hero .display { margin: 22px 0 22px; font-size: clamp(2.1rem,4.4vw,3.4rem); } .art-hero .lede { max-width: 56ch; } .art-body { max-width: 62ch; } .art-body > h2 { margin-top: clamp(40px,4.6vw,64px); margin-bottom: 14px; font-size: clamp(1.35rem,2.3vw,1.85rem); } .art-body > h2:first-child { margin-top: 0; } .art-body p { margin-bottom: 16px; } .art-body p:last-child { margin-bottom: 0; } .art-close { max-width: 62ch; margin-top: clamp(44px,5vw,72px); padding-top: clamp(26px,3vw,38px); border-top: 1px solid var(--line-gold); } .uplink-band { border-top: 1px solid var(--line); } .uplink-band .ub-inner { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding-block: clamp(40px,5vw,72px); } .uplink-band .ub-text { font-family:'Crimson Pro',serif; font-size: clamp(1.4rem,2.4vw,2rem); color: var(--green); max-width: 22ch; } @media (max-width: 880px) { .intent-hero .ih-inner { grid-template-columns: 1fr; } .intent-hero .ih-media { order:-1; aspect-ratio: 4/3; } /* Hero-ramen byter proportion har: 5/6 staende pa skrivbord, 4/3 liggande pa mobil. Samma fil ska alltsa fungera i bada, och med object-fit: cover beskars mitten. Pa /tvatt och /en/laundry ar motivet en person, och mitten av en staende bild hamnar da over pannan -- huvudet kapas. Raden flyttar det synliga bandet uppat sa ansiktet far plats. Scopad till sidan med flit: ortssidornas hero ar miljobilder dar centrerat ar ratt. Matt 21 okt pa Pixel 5. */ [data-page="tvatt"] .intent-hero .ih-media img { object-position: center 22%; } .fact-grid { grid-template-columns: 1fr 1fr; } .do-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .fact-grid { grid-template-columns: 1fr; } .do-list { grid-template-columns: 1fr; } } /* ============================================================ LIVING LAYER v2 — motion & ambience Ny teknik: scroll-choreografi, blur-reveals, count-up, kinetisk typografi, Ken Burns + parallax, mikrointeraktioner. Allt respekterar prefers-reduced-motion. ============================================================ */ :root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- page entrance ---------- */ /* HELSIDEFADET BORTTAGET 20 okt. Raden var: body { animation: page-in .7s var(--ease-out) both; } Den tonade in hela sidan fran opacity 0. Chrome raknar aldrig ett element som LCP-kandidat om det eller nagon foralder har opacity 0, och med fill-mode both ligger body pa noll redan innan animationen startat. Pa skrivbord hinner den igang direkt. Pa mobil, med fyra gangers processorstrypning, hann den inte -- och da rapporterade Lighthouse NO_LCP: ingen LCP alls, inget prestandabetyg, och tva felmarkerade matvarden. Matt 20 okt: med raden borta gick samma sida fran inget betyg till 71, och LCP blev matbar. Sidan tonar fortfarande in blockvis via [data-reveal]. Det var bara helsidefadet som bade dolde matningen och fordrojde forsta malningen. ANKOMSTEN TILLBAKA, 21 okt. Johan: utan fadet kanns sidan platt och stel. Den invandningen ar riktig -- fotot slog till i full styrka i samma sekund som sidan kom. Lost i tva delar, bada utan att rora det som gjorde matningen omojlig. A PROVADES OCH TOGS BORT 21 okt, samma morgon. Tanken var att lata allt utom hero-fotot tona in. Resultatet blev samre an bade fore och efter: menyn och rubrikerna tonade medan fotot redan lag dar i full styrka, sa ogat drogs till att texten var otydlig i stallet for att sidan anlande mjukt. Forr tonade allt samtidigt och last som EN rorelse. Delar man upp den far man tva. Hero-texten fick dessutom dubbel toning: page-in pa behallaren plus rise-in pa varje rad med upp till 0,95 sekunders fordrojning. Kvar ar bara B. Hero-texten reser sig som den alltid gjort, menyn och innehallet ar lasbara fran forsta bildrutan, och mjukheten kommer fran fotot. B. Fotot kommer i stallet upp ur en mjuk oskarpa. Chrome diskvalificerar bara opacity noll som LCP-kandidat, inte filter, sa bilden males och raknas vid samma tidpunkt som forut -- den ar bara inte skarp an. Det ar darfor det har ar arligt och slojan vi valde bort inte var det: med en sloja mater vi en bild besokaren inte ser. */ /* B. Hero-fotot loser upp sig ur oskarpa i stallet for ur genomskinlighet. kb-animationen ligger kvar; de ror olika egenskaper och krockar inte. */ @keyframes hero-skarpa { from { filter: blur(14px); } to { filter: blur(0); } } /* ---------- upgraded reveal: fade-up + de-blur ---------- */ [data-reveal] { opacity: 0; transform: translateY(34px); filter: blur(7px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out); will-change: opacity, transform, filter; } [data-reveal].is-visible { opacity: 1; transform: none; filter: none; } /* ---------- media curtain reveal ---------- */ .media-frame[data-reveal] { transform: none; filter: none; clip-path: inset(10% 4% 10% 4% round 3px); transition: clip-path 1.4s var(--ease-out), opacity .9s var(--ease-out); } .media-frame[data-reveal] img { transform: scale(1.14); transition: transform 1.8s var(--ease-out); } .media-frame[data-reveal].is-visible { clip-path: inset(0 0 0 0 round 3px); } .media-frame[data-reveal].is-visible img { transform: scale(1); } /* ---------- hero choreography (index) ---------- */ .hero .hero-copy .eyebrow, .hero .hero-copy .lede, .hero .hero-copy .btn-row { opacity: 0; } .hero .hero-copy .eyebrow { animation: rise-in 1s var(--ease-out) .12s both; } .hero .hero-copy .lede { animation: rise-in 1.1s var(--ease-out) .75s both; } .hero .hero-copy .btn-row { animation: rise-in 1.1s var(--ease-out) .95s both; } @keyframes rise-in { from { opacity: 0; transform: translateY(26px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } } /* kinetisk rubrik — ord för ord */ .display.is-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; } .display.is-split .w > b { display: inline-block; font-weight: inherit; transform: translateY(115%); } .hero .display.is-split .w > b { animation: word-up 1.15s var(--ease-out) both; animation-delay: calc(0.26s + var(--wi, 0) * 0.05s); } @keyframes word-up { to { transform: translateY(0); } } .hero .hero-copy .display:not(.is-split) { opacity: 0; } .hero .hero-copy .display:not(.is-split) { animation: rise-in 1.1s var(--ease-out) .3s both; } /* Ken Burns i hero (startsidan + kärnsidor) — Design-facit */ .hero-bg { overflow: hidden; } .hero-bg img { animation: kb 38s var(--ease) alternate infinite, hero-skarpa .9s var(--ease-out) both; will-change: transform; } @keyframes kb { from { transform: scale(1.06) translate(0,0); } to { transform: scale(1.14) translate(-1.4%, 1.2%); } } /* scroll cue */ .scroll-cue { position: absolute; right: var(--gutter); bottom: 46px; z-index: 2; width: 1px; height: 68px; overflow: hidden; } .scroll-cue::before { content: ""; position: absolute; inset: 0; background: rgba(212,179,117,0.3); } .scroll-cue::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 42%; background: var(--gold-light); animation: cue-drop 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes cue-drop { 0% { transform: translateY(-110%); } 55%, 100% { transform: translateY(260%); } } /* ---------- stats: count-up + hairline ---------- */ .stat { position: relative; } .stat .num { font-variant-numeric: tabular-nums; } .stat::after { content: ""; position: absolute; left: 50%; bottom: clamp(18px, 2.6vw, 34px); width: 26px; height: 1px; background: var(--gold-light); opacity: .55; transform: translateX(-50%) scaleX(0); transition: transform 1.2s var(--ease-out) .5s; } [data-reveal].is-visible .stat::after { transform: translateX(-50%) scaleX(1); } /* ---------- header hide/show on scroll ---------- */ .site-header { transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), transform .55s var(--ease-out); } .site-header.is-hidden { transform: translateY(-100%); } /* ---------- micro-interactions ---------- */ .btn { position: relative; overflow: hidden; } .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 46%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent); transform: skewX(-18deg); } .btn:hover::after { left: 130%; transition: left .9s var(--ease-out); } .btn:hover { transform: translateY(-1px); } .niva-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out); } .niva-card:hover::before { transform: scaleX(1); } .niva-card.featured::before { transform: scaleX(1); opacity: .55; } .niva-card.featured:hover::before { opacity: 1; } .insikt-card .ic-media { position: relative; } .insikt-card .ic-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(20,48,38,0.22)); opacity: 0; transition: opacity .6s var(--ease-out); } .insikt-card:hover .ic-media::after { opacity: 1; } .insikt-card h3 { transition: color .45s var(--ease-out); } .insikt-card:hover h3 { color: var(--green-700); } /* intent-sidornas hero får också liv */ .intent-hero .ih-copy > * { opacity: 0; animation: rise-in 1s var(--ease-out) both; } .intent-hero .ih-copy > *:nth-child(1) { animation-delay: .1s; } .intent-hero .ih-copy > *:nth-child(2) { animation-delay: .22s; } .intent-hero .ih-copy > *:nth-child(3) { animation-delay: .34s; } .intent-hero .ih-copy > *:nth-child(4) { animation-delay: .46s; } /* ---------- subtle grain (djup utan brus) ---------- */ body::before { content: ""; position: fixed; inset: -50%; z-index: 2000; pointer-events: none; opacity: 0.028; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; } /* ---------- reduced motion: allt av ---------- */ @media (prefers-reduced-motion: reduce) { body { animation: none; } body::before { display: none; } [data-reveal], .media-frame[data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } .media-frame[data-reveal] img { transform: none !important; } .hero .hero-copy .eyebrow, .hero .hero-copy .lede, .hero .hero-copy .btn-row, .hero .hero-copy .display:not(.is-split), .intent-hero .ih-copy > * { opacity: 1; animation: none !important; } .display.is-split .w > b { transform: none !important; animation: none !important; } .hero-bg img { animation: none !important; filter: none !important; } [data-parallax] img { transform: none !important; } .scroll-cue { display: none; } .site-header.is-hidden { transform: none; } } /* ============================================================ DESIGN-FACIT (Chat-projektet) — parallax, sticky, filmstrip ============================================================ */ /* Parallax-bas */ [data-parallax] { overflow: hidden; } [data-parallax] img { will-change: transform; transform: scale(1.3); transition: none !important; } /* Sticky bäddservice (startsidan) */ .sticky-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; } .sticky-media { position: sticky; top: 110px; height: min(74vh, 640px); border-radius: 3px; } .sticky-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; } .sticky-steps { display: flex; flex-direction: column; } .sticky-step { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; } .sticky-step .step-word { font-family: 'Crimson Pro', serif; font-weight: 500; color: var(--green); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -0.01em; } .sticky-step .step-word em { font-style: italic; color: var(--gold); } .sticky-step p { color: var(--ink-soft); max-width: 42ch; } .sticky-step:last-child { min-height: 40vh; } @media (max-width: 900px) { .sticky-split { grid-template-columns: 1fr; } .sticky-media { position: relative; top: 0; height: 46vh; } .sticky-step { min-height: 0; padding-block: 34px; } } /* Filmremsa (startsidan) */ /* Filmremsan roterar av sig sjalv, lugnt och utan slut. VARFOR CSS OCH INTE JS. Den drevs tidigare av scrollen i motion.js: remsan flyttades i sidled i takt med att sidan rullade och stod alltsa stilla sa fort lasaren gjorde det. En remsa som bara ror sig nar man rullar ar inte en karusell. VARFOR FIGURERNA STAR TVA GANGER I HTML. Spåret innehaller samma sex bilder tva ganger, och animationen gar fran 0 till -50 procent. Vid -50 procent star kopian exakt dar originalet stod vid 0, sa varvet borjar om utan att nagot hoppar. Med bara en uppsattning hade remsan tagit slut och studsat tillbaka. 80 sekunder pa ett varv ar omkring 30 pixlar i sekunden. Tillrackligt for att det ska synas att den ror sig, langsamt nog att den inte drar blicken fran texten omkring. */ .filmstrip { overflow: hidden; padding-block: clamp(40px, 6vh, 72px); } .fs-track { display: flex; gap: 20px; width: max-content; will-change: transform; animation: fs-drift 80s linear infinite; } @keyframes fs-drift { from { transform: translateX(0); } /* Halva sparet, plus halva mellanrummet som ligger mellan de tva uppsattningarna. Utan det glappet blir det ett hopp pa 20px per varv. */ to { transform: translateX(calc(-50% - 10px)); } } /* Remsan ar dekor. Den som bett om mindre rorelse ska slippa den helt, inte fa en langsammare version. */ @media (prefers-reduced-motion: reduce) { .fs-track { animation: none; } } .fs-track figure { width: clamp(240px, 30vw, 420px); aspect-ratio: 4/3; flex-shrink: 0; overflow: hidden; border-radius: 3px; margin: 0; } .fs-track figure.tall { aspect-ratio: 3/4; align-self: center; width: clamp(200px, 22vw, 320px); } .fs-track img { width: 100%; height: 100%; object-fit: cover; } /* Nivåjämförelse (hemservice) */ .tier-table-wrap { margin-top: 52px; overflow-x: auto; } .tier-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; font-size: 0.95rem; } .tier-table th, .tier-table td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: center; } .tier-table th:first-child, .tier-table td:first-child { text-align: left; color: var(--ink); } .tier-table thead th { font-family: 'Crimson Pro', serif; font-size: 1.2rem; font-weight: 500; color: var(--green); padding-top: 24px; position: relative; } .tier-table thead th .th-sub { display: block; font-family: 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; } .tier-table thead th.pop { border-top: 2px solid var(--gold); } .tier-table thead th.pop .th-badge { display: inline-block; background: var(--gold); color: #1a160c; font-family: 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; margin-bottom: 8px; } .tier-table td.yes { color: var(--green); } .tier-table td.no { color: var(--ink-faint); } .tier-table td.opt { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); } .tier-table tbody tr:hover td { background: rgba(31, 63, 48, 0.025); } /* På telefon var tabellen 490 px i en behållare på 346. Den gick att dra i sidled, men tredje nivån syntes inte alls och inget antydde att den fanns. Nu ryms alla tre: mindre text, smalare celler, och underrubriken under nivånamnet utgår eftersom det är den som gör kolumnen bred. */ /* På telefon var tabellen 490 px i en behållare på 346. Den gick att dra i sidled, men tredje nivån syntes inte alls och inget antydde att den fanns. Att pressa in tre kolumner går inte utan att "Housekeeping" bryts mitt i ordet, så under 760 px staplas raderna i stället: en rad per sak, med de tre nivåerna under varandra. Nivånamnen kommer från ::before, så innehållet finns bara en gång i HTML-koden. */ @media (max-width: 760px) { .tier-table-wrap { overflow-x: visible; margin-top: 34px; } .tier-table { display: block; border-radius: 3px; font-size: 0.92rem; } .tier-table thead { display: none; } .tier-table tbody { display: block; } .tier-table tr { display: block; padding: 15px 16px; border-bottom: 1px solid var(--line); } .tier-table tr:last-child { border-bottom: none; } .tier-table tbody tr:hover td { background: none; } .tier-table td { display: block; border-bottom: none; padding: 0; text-align: left; } .tier-table td:first-child { font-weight: 500; color: var(--ink); margin-bottom: 9px; } .tier-table td:not(:first-child) { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 4px 0; } .tier-table td:not(:first-child)::before { font-family: 'Inter', sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; } .tier-table td:nth-child(2)::before { content: 'Hemstäd'; } .tier-table td:nth-child(3)::before { content: 'Hemservice'; } .tier-table td:nth-child(4)::before { content: 'Housekeeping'; } .tier-table td.opt { font-size: 0.78rem; letter-spacing: 0.04em; } } } .tier-foot { margin-top: 22px; font-size: 0.88rem; color: var(--ink-soft); max-width: 74ch; } @media (max-width: 760px) { .tier-table { font-size: 0.85rem; } .tier-table th, .tier-table td { padding: 11px 10px; } } /* Faktarutans prislänk (tjänstesidor) */ .fact .fact-link { color: var(--on-green); border-bottom: 1px solid var(--line-gold); padding-bottom: 2px; transition: color .3s var(--ease), border-color .3s var(--ease); } .fact .fact-link:hover { color: var(--gold-light); border-color: var(--gold-light); } /* ============================================================ BUTIKSPANEL — utfällbar flik från höger (hela sajten) ============================================================ */ .butik-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 240; writing-mode: vertical-rl; background: var(--green); color: var(--gold-light); border: 1px solid var(--line-green); border-right: none; border-radius: 4px 0 0 4px; padding: 18px 9px; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; box-shadow: -8px 0 30px -18px rgba(20,40,30,0.5); transition: background .3s var(--ease), padding .3s var(--ease); } .butik-tab:hover { background: var(--green-700, #143026); padding-right: 13px; } /* Fliken är fäst i högerkanten och tar 36 px av en telefonskärm på 390. Den låg alltså ovanpå löptexten på varje sida, och på /foretag över rubriken. Under 900 px göms den. Adress, öppettider och telefon finns i mobilmenyns fot, och butikssidan ligger i sidfoten. */ @media (max-width: 900px) { .butik-tab { display: none; } } .butik-overlay { position: fixed; inset: 0; z-index: 250; background: rgba(20, 40, 30, 0.4); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); } .butik-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 260; width: min(420px, 92vw); background: var(--green); color: var(--on-green); padding: clamp(36px, 5vh, 60px) clamp(28px, 3vw, 44px); transform: translateX(104%); transition: transform .6s var(--ease-out); overflow-y: auto; box-shadow: -30px 0 80px -30px rgba(0,0,0,0.45); display: flex; flex-direction: column; gap: 26px; } body.butik-open .butik-overlay { opacity: 1; pointer-events: auto; } body.butik-open .butik-panel { transform: translateX(0); } .butik-panel .bp-close { position: absolute; top: 20px; right: 22px; width: 34px; height: 34px; cursor: pointer; color: var(--on-green-soft); font-size: 1.1rem; line-height: 1; border: 1px solid var(--line-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: color .3s var(--ease), border-color .3s var(--ease); } .butik-panel .bp-close:hover { color: var(--gold-light); border-color: var(--gold-light); } .butik-panel .eyebrow { color: var(--gold-light); } .butik-panel h3 { font-family: 'Crimson Pro', serif; font-size: 1.7rem; color: var(--on-green); font-weight: 500; margin-top: -8px; } .butik-panel .bp-block p { color: var(--on-green-soft); line-height: 1.8; } .butik-panel .bp-label { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 10px; } .butik-panel a { color: var(--on-green); border-bottom: 1px solid var(--line-gold); } .butik-hours { width: 100%; border-collapse: collapse; } .butik-hours td { padding: 11px 0; border-bottom: 1px solid var(--line-green); color: var(--on-green-soft); font-size: 0.95rem; } .butik-hours td:last-child { text-align: right; color: var(--on-green); font-family: 'Crimson Pro', serif; font-size: 1.05rem; } .butik-hours tr:last-child td { border-bottom: none; } .butik-panel .bp-foot { margin-top: auto; padding-top: 18px; font-size: 0.82rem; color: var(--on-green-faint); } @media (prefers-reduced-motion: reduce) { .butik-panel { transition: none; } .butik-overlay { transition: none; } } /* ============================================================ FORMULÄR (delade — boka, kontakt, jobba, hemservice + /en/) Låg tidigare inline i hemservice.html, vilket gjorde att alla andra formulärsidor renderades ostylade. ============================================================ */ .hembesok-grid { display:grid; grid-template-columns: 1.3fr 0.9fr; gap: clamp(40px,5vw,80px); align-items:start; } .form-card { background: var(--cream); border-radius:4px; padding: clamp(30px,3vw,46px); border:1px solid var(--line-green); } .on-green .form-card { background: rgba(255,255,255,0.04); border-color: var(--line-green); } .field { margin-bottom:22px; } .field label { display:block; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:9px; } .on-green .field label { color: var(--on-green-soft); } .field input, .field textarea, .field select { width:100%; background:transparent; border:none; border-bottom:1px solid var(--line); color:var(--ink); font-family:'Inter',sans-serif; font-size:1rem; padding:10px 0; transition: border-color .35s var(--ease); } .on-green .field input, .on-green .field textarea, .on-green .field select { border-bottom-color: var(--line-green); color: var(--on-green); } .field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color: var(--gold); } .on-green .field input:focus, .on-green .field textarea:focus, .on-green .field select:focus { border-color: var(--gold-light); } .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); } .on-green .field input::placeholder, .on-green .field textarea::placeholder { color: var(--on-green-faint); } .field textarea { resize:vertical; min-height:64px; } .field select { appearance:none; cursor:pointer; } .field select option { color: var(--ink); background: var(--cream); } .form-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; } /* Godkannande av integritetspolicyn. Star OVANFOR skickaknappen, inte i en fotnot: utan kryssen sparas inga personuppgifter (Johan 20 okt), och da ska rutan sta dar beslutet fattas. Egen klass och inte .check-row, eftersom den har ar ett krav och inte ett val bland flera. */ .form-godkann { display:flex; align-items:flex-start; gap:10px; margin:18px 0 14px; font-size:0.88rem; line-height:1.5; color:var(--ink-soft); cursor:pointer; } .form-godkann input { flex:none; width:18px; height:18px; margin-top:1px; accent-color: var(--green, #204327); cursor:pointer; } .form-godkann a { color:inherit; text-decoration:underline; text-underline-offset:2px; } .on-green .form-godkann { color:var(--on-green-soft); } .form-godkann input:focus-visible { outline:2px solid var(--gold); outline-offset:2px; } .check-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; } .check-row label { display:inline-flex; align-items:center; gap:8px; font-size:0.88rem; color:var(--ink-soft); border:1px solid var(--line); border-radius:100px; padding:8px 16px; cursor:pointer; transition: all .3s var(--ease); text-transform:none; letter-spacing:0; margin:0; } .on-green .check-row label { color:var(--on-green-soft); border-color: var(--line-green); } .check-row input { display:none; } .check-row label:has(input:checked) { background: var(--gold); color:#1a160c; border-color: var(--gold); } .contact-aside h4, .contact-aside .ca-head { color: var(--gold); font-family:'Inter',sans-serif; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; margin-bottom:18px; } .on-green .contact-aside h4, .on-green .contact-aside .ca-head { color: var(--gold-light); } .contact-aside p { color: var(--ink-soft); line-height:1.9; } .on-green .contact-aside p { color: var(--on-green-soft); } .contact-aside a { color: var(--green); border-bottom:1px solid var(--line-gold); } .on-green .contact-aside a { color: var(--on-green); } /* Bekräftelsen efter inskick. forms.js sätter klassen "show" — utan denna regel visades den aldrig. */ .form-done { display:none; padding:18px 0; color:var(--gold); font-family:'Crimson Pro',serif; font-size:1.3rem; } .on-green .form-done { color:var(--gold-light); } .form-done.show { display:block; } .form-error { margin-top:18px; font-size:0.9rem; color:#A6412F; line-height:1.6; } .on-green .form-error { color:#E8A08F; } .form-error a { border-bottom:1px solid currentColor; } .form-micro { margin-top:16px; font-size:0.8rem; color: var(--ink-faint); } .on-green .form-micro { color: var(--on-green-faint); } @media (max-width: 880px) { .hembesok-grid { grid-template-columns: 1fr; } .form-grid2 { grid-template-columns: 1fr; } } /* ---------- Brödsmulor (playbook §5) ---------- */ .breadcrumbs { border-bottom: 1px solid var(--line); background: var(--cream); position: relative; z-index: 5; } .breadcrumbs .bc-inner { padding-block: 14px; font-size: 0.8rem; color: var(--ink-faint); display: flex; flex-wrap: wrap; align-items: center; gap: 2px; } .breadcrumbs a { color: var(--ink-soft); transition: color .3s var(--ease); } .breadcrumbs a:hover { color: var(--green); } .breadcrumbs [aria-current="page"] { color: var(--green); } .breadcrumbs .bc-sep { color: var(--gold); opacity: .6; margin-inline: 8px; } /* Sidor med mörk hero: brödsmulan hamnar under hjälten, inte ovanpå */ body[data-hero-dark] .breadcrumbs { border-top: 1px solid var(--line); } @media (max-width: 640px) { .breadcrumbs .bc-inner { font-size: 0.74rem; } } /* Ankaralias: bevarar gamla #id efter att sektionens id bytts (SEO/absorption) */ .anchor-alias { display:block; position:relative; top:-78px; height:0; visibility:hidden; } /* ============================================================ Inlämningsvägar (.way-steps) — delad komponent Låg tidigare duplicerad inline på 13 sidor. Hemstädsidan saknade basregeln helt, vilket gjorde att sektionen "Städning vid enstaka tillfällen" föll ihop till en oformaterad lista. Definieras nu en gång här. Lägg aldrig tillbaka den i en enskild sida. ============================================================ */ .way-steps { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(28px,4vw,60px); margin-top: clamp(40px,5vw,60px); } .way { border-top: 1px solid var(--line-gold); padding-top: 22px; } .way .w-num { font-family:'Crimson Pro',serif; color: var(--gold); font-size:1.05rem; margin-bottom: 12px; } .way h3 { font-size: 1.15rem; margin-bottom: 8px; } .way h3 a { color: inherit; border-bottom: 1px solid var(--line-gold); transition: color .3s var(--ease); } .way h3 a:hover { color: var(--green); } .way p { color: var(--ink-soft); font-size: 0.93rem; line-height: 1.6; } .way-note { margin-top: 26px; color: var(--ink-soft); font-size: 0.92rem; max-width: 70ch; } @media (max-width: 880px) { .way-steps { grid-template-columns: 1fr; gap: 26px; } } /* Knappelement som bär .btn eller .fact-link ska se ut precis som motsvarande länk. Används där handlingen öppnar bokningsguiden i stället för att navigera till en sida. */ button.btn, button.fact-link { font-family: inherit; cursor: pointer; } button.btn { border-width: 1px; border-style: solid; } button.fact-link { background: none; border: none; padding: 0; text-align: left; } button.header-cta { font-family: inherit; border: none; cursor: pointer; } /* Brödsmulor överst på sidor med ljus hero. De tar den 78px-remsa som heron annars bara reserverar åt den fixerade headern, så sidan blir inte längre av att brödsmulan finns. Se site.js buildBreadcrumbs. */ .breadcrumbs.bc-top { padding-top: 79px; } body.has-top-crumbs > section:first-of-type { padding-top: 0; } /* ---------- Teamavsnittet på /om och /en/about ---------- Skrivs av bygg_team.py ur team-data.js. Sju personer i ett rutnät, inte i en lista: en lista med sju stycken à 50 till 80 ord blir en textvägg, och det är ansiktena som gör avsnittet till det bevis rubriken ovanför lovar. */ .tm-head { max-width: 52ch; margin-bottom: clamp(32px, 4vw, 56px); } .tm-head h2 { margin-top: 4px; } /* Fyra kolumner. Med det kompakta kortet blir åtta personer 4+4, alltså två jämna rader, och hela avsnittet ryms på en skärm. */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3.2vw, 44px) clamp(20px, 2.2vw, 32px); } .tm-card { display: flex; flex-direction: column; } /* 4:5 är stående. Ett porträtt beskuret till liggande format kapar huvudet eller axlarna, och en rad med åtta olika beskärningar syns. MAX-WIDTH OCH INTE KOLUMNBREDD. Porträttet i full fjärdedelsbredd blir ~320px, vilket gör översikten till åtta affischer. Här är bilden ett igenkänningstecken bredvid namnet, inte avsnittets innehåll — innehållet ligger på profilsidan. 132px räcker för att känna igen ett ansikte. */ .tm-media { display: block; aspect-ratio: 4/5; width: 100%; max-width: 132px; margin-bottom: 16px; } .tm-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; } /* Platshållaren ärver .ph:s mönster men sitter i ramen i stället för absolut inuti den, eftersom korten inte har position: relative. */ .tm-ph { background: repeating-linear-gradient(135deg, rgba(31,63,48,0.05) 0 2px, transparent 2px 11px), var(--cream-warm); display: flex; align-items: center; justify-content: center; } .tm-ph span { color: var(--ink-faint); font-family: 'Inter', monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; } .tm-namn { font-size: clamp(1.15rem, 1.5vw, 1.35rem); margin: 0; } .tm-roll { font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 6px 0 0; } .tm-namn a { color: inherit; text-decoration: none; } .tm-namn a:hover { text-decoration: underline; text-decoration-color: var(--line-gold); text-underline-offset: 4px; } .tm-tagline { font-style: italic; color: var(--ink-soft); margin: 12px 0 0; max-width: 34ch; } /* margin-top: auto trycker länken till kortets botten. Taglinen är en eller två rader beroende på person, och utan det hamnar länkarna på olika höjd i samma rad, vilket syns som en ojämn kant. */ .tm-body { display: flex; flex-direction: column; flex: 1; } .tm-mer { margin: 14px 0 0; padding-top: 2px; } .team-grid .tm-mer { margin-top: auto; } .tm-mer a { font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; color: var(--green); text-decoration: none; } .tm-mer a:hover { text-decoration: underline; text-underline-offset: 3px; } .tm-mer .arr { transition: transform 0.2s ease; display: inline-block; } .tm-mer a:hover .arr { transform: translateX(3px); } /* Kolumnantalet valjs av bygg_team.py efter hur manga personer som star i oversikten, sa att sista raden inte blir en ensam rest. */ .team-grid[data-kolumner="3"] { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1180px) { .team-grid, .team-grid[data-kolumner="3"] { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .team-grid, .team-grid[data-kolumner="3"] { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .team-grid, .team-grid[data-kolumner="3"] { grid-template-columns: 1fr; gap: 28px; } /* Åtta stående bilder i full bredd ger en sida som aldrig tar slut. På mobil ligger bilden bredvid namnet i stället. */ .tm-card { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start; } .tm-media { aspect-ratio: 4/5; margin-bottom: 0; max-width: 76px; } } /* ---------- Rosten pa en tjanstesida ---------- Skrivs av bygg_roster.py. En medarbetare bredvid pastaendet om det arbete hen faktiskt gor. Samma .container och .split-text som sidans ovriga avsnitt, av samma skal som granskarraden: ett eget rutnat mitt i en sida hamnar varken i rubrikspalten eller i textspalten. */ /* Radet. Guldlinjen till vanster skiljer personens egna ord fran presentationen ovanfor utan att behova en egen rubrik. */ .rost-tips { margin: 22px 0 0; padding-left: 20px; border-left: 2px solid var(--line-gold); } .rost-av { margin: 22px 0 0; } .rost-av a { font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-gold); text-underline-offset: 3px; } .rost-roll { font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-left: 12px; } @media (max-width: 620px) { .rost-roll { display: block; margin: 6px 0 0; } } /* ---------- Profilsidorna /om/[slug] och /en/about/[slug] ---------- Skrivs av bygg_profiler.py. Sidtyp F: en förtroendesida utan egen KPI, som aldrig mäts på position. */ /* Heron på en profilsida är samma .intent-hero som på en tjänstesida, men innehållet är en bråkdel: namn, roll, tagline. Tjänsteheron är byggd för en rubrik på tre rader och en ingress på fyra, och porträttet i 5:6 blir 744px högt vid full spaltbredd. Resultatet var en förstaskärm som till tre fjärdedelar var tomrum. Smalare porträtt, mindre luft och toppjustering i stället för centrering: namnet ska ligga där ögat landar, inte i mitten av en halvtom skärm. */ .pr-hero .ih-inner { grid-template-columns: 1.2fr 0.8fr; align-items: start; padding-block: clamp(36px, 4.5vw, 64px); } /* width: 100% behovs. En grid-item med margin-left: auto far shrink-to-fit-bredd, och platshallaren kollapsade da till textens bredd i stallet for spaltens. */ .pr-hero .ih-media { aspect-ratio: 4/5; width: 100%; max-width: 330px; margin-left: auto; } .pr-hero .ih-copy .display { margin: 18px 0 18px; max-width: 18ch; } @media (max-width: 860px) { .pr-hero .ih-media { max-width: 200px; margin-left: 0; } } /* LinkedIn-länken på profilsidan. Den bär rel="me", som är det som gör kopplingen ömsesidig när LinkedIn-profilen länkar tillbaka. Låg under taglinen i heron: en verifieringssignal, inte en uppmaning, men den ska synas utan att man scrollar. */ .pr-lank { margin: 20px 0 0; } .pr-lank a { font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; color: var(--green); text-decoration: underline; text-decoration-color: var(--line-gold); text-underline-offset: 3px; } /* Platshållaren för porträttet i heron, samma mönster som .tm-ph men i heroformat. */ .pr-ph { aspect-ratio: 4/5; background: repeating-linear-gradient(135deg, rgba(31,63,48,0.05) 0 2px, transparent 2px 11px), var(--cream-warm); display: flex; align-items: center; justify-content: center; border-radius: 3px; } .pr-ph span { color: var(--ink-faint); font-family: 'Inter', monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; } /* Platshållarfiguren. Johans besked 20 okt: en siluett i stället för en tom ram tills porträtten finns. Den står PÅ mönstret och inte i stället för det — rutan ska fortfarande läsa som en plats där en bild ska komma, inte som en bild. Därför också dämpad: en siluett i full styrka drar till sig blicken som om den vore ett ansikte. */ /* Höjden styr, inte bredden. Med bredden som mått blev figuren högre än rutan i smalare spalter, och eftersom den är bottenställd var det huvudet som hamnade utanför — en siluett utan hjässa. Höjdmåttet kan aldrig bli för högt för ramen. */ /* Väljaren måste bära .tm-media: regeln på rad 1110 sätter width/height 100% och object-fit COVER på varje bild i rutan, och väger tyngre än en ensam klass. Det var cover som kapade huvudena — figuren beskars som ett fotografi i stället för att skalas. Höjden styr, inte bredden: ett höjdmått kan aldrig bli för högt för ramen, och det är hjässan som ligger i farozonen. */ .tm-media .tm-figur { height: 72%; width: auto; max-width: 62%; object-fit: contain; opacity: .5; align-self: flex-end; border-radius: 0; } /* Heroramen på profilsidan är mycket större än rutan i översikten. Samma andel där gör siluetten nästan porträttstor, och då slutar den läsa som en markering och börjar läsa som ett ansikte. Väljaren måste bära .intent-hero: regeln på rad 476 sätter width:100% på varje bild i heron och väger tyngre än en väljare med två klasser. */ .intent-hero .pr-ph-figur .tm-figur { height: 48%; width: auto; max-width: 40%; object-fit: contain; } /* Listan över granskade artiklar. Det är den som stänger kedjan artikel -> person -> artikel; utan den pekar profilen bara utåt. */ .pr-artiklar { list-style: none; margin: 0; padding: 0; } .pr-artiklar li { padding: 14px 0; border-bottom: 1px solid var(--line); } .pr-artiklar li:first-child { padding-top: 0; } .pr-artiklar li:last-child { border-bottom: 0; } .pr-artiklar a { color: var(--ink); text-decoration: none; font-size: clamp(1.02rem, 1.2vw, 1.14rem); } .pr-artiklar a:hover { text-decoration: underline; text-decoration-color: var(--line-gold); text-underline-offset: 4px; } /* Granskarraden sist i en artikel. Ligger i samma .container och .split-text som artikelns övriga avsnitt: etiketten i rubrikspalten, namnet i textspalten. Första versionen var en fristående div mellan två sektioner, med egen max-width och auto-marginaler. Den hamnade varken i den ena spalten eller den andra, linjen började på ett ställe och texten på ett annat, och den flöt i 160px tomrum eftersom båda grannsektionerna redan bär full sektionsluft. Egen, kortare padding av samma skäl: raden är en signatur och inte ett avsnitt, och ska inte ta lika mycket plats som ett. */ .art-av { padding-block: clamp(30px, 3.6vw, 46px); } .art-av .av-inner { border-top: 1px solid var(--line-gold); padding-top: clamp(24px, 2.8vw, 34px); } .av-namn { font-family: 'Crimson Pro', Georgia, serif; font-size: clamp(1.15rem, 1.5vw, 1.35rem); color: var(--green); margin: 0; } .av-namn a { text-decoration: underline; text-decoration-color: var(--line-gold); text-underline-offset: 4px; } .av-roll { font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin: 5px 0 0; } @media (max-width: 880px) { /* .split-text fäller ihop till en spalt under 880px, och då hamnar etiketten direkt ovanför namnet, vilket är rätt läsordning ändå. */ .art-av .av-inner { gap: 12px; } } /* ORTSTEAM ------------------------------------------------------------ Vilket eller vilka team som utgar fran orten. Teamnamnet barn identiteten, fornamnen gor den till manniskor. Efternamn publiceras inte. Plats for konceptdjuret ar forberedd i .ot-ikon, som star tom tills ikonerna finns i Airtable. */ .ot-grid { display: grid; gap: 18px; margin-top: 28px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); max-width: 720px; } .ot-kort { border: 1px solid var(--line); border-radius: 3px; padding: 22px 24px; text-align: center; } /* Kvadratisk ruta, inte fast hojd. Djuren har vitt skilda kroppsformer och med hojd som matt blir ett lejon dubbelt sa brett som en flamingo, vilket lases som att det ena teamet ar viktigare. object-fit skalar in djuret i rutan oavsett proportion. */ .ot-ikon { display: block; width: 96px; height: 96px; object-fit: contain; margin: 12px auto 10px; } .ot-namn { font-family: 'Crimson Pro', serif; font-size: 1.45rem; color: var(--green); font-weight: 500; line-height: 1.2; } .ot-personer { margin-top: 6px; color: var(--ink-soft); font-size: 0.95rem; } @media (max-width: 520px) { .ot-grid { grid-template-columns: 1fr; } } /* Not vid ett formulärfält. Används för Compliances mening om vad som inte ska skrivas i fritextfältet på /jobba — den ska läsas innan någon skriver, inte stå som en fotnot under knappen. */ .field-note{ margin:0 0 8px; font-size:13px; line-height:1.5; color:var(--ink-soft); max-width:60ch; } /* Raden i den engelska sidfoten om att villkoren är svenska. Står vid länken, inte som en fotnot, så att besökaren vet innan hen klickar. Utgår när en/terms.html återuppstår efter lansering. */ .footer-sprak{ display:block; margin-top:6px; font-size:12px; line-height:1.5; opacity:.72; max-width:46ch; } /* Samtyckesruta i ett formulär. Till skillnad från .check-row, som döljer rutan och visar ett piller, måste den här synas: den sökande ska kunna se att den INTE är förkryssad. Ett samtycke som ser ikryssat ut är inget samtycke. */ .consent{ display:flex; gap:11px; align-items:flex-start; cursor:pointer; margin:0 0 18px; padding:13px 15px; border:1px solid var(--line); border-radius:3px; font-size:0.88rem; line-height:1.55; color:var(--ink-soft); text-transform:none; letter-spacing:0; transition: border-color .3s var(--ease); } .consent:hover{ border-color:var(--gold); } .consent input{ display:block; width:16px; height:16px; margin:2px 0 0; flex:none; accent-color:var(--green); cursor:pointer; }