/* ===================================================================== THEME: allt viktigt för utseendet samlat här --------------------------------------------------------------------- Värden märkta [ADMIN] ställs normalt in på /admin och skriver då över det som står här. Övriga värden ändras bara i den här filen. ===================================================================== */ :root { /* ---------- Färger ---------- */ --accent: #ffffff; /* [ADMIN] huvudfärg: meny, logotext och text på startbilden */ --bg: #ffffff; /* [ADMIN] bakgrund / ytan mellan bilderna */ --fg: #111111; /* textfärg (t.ex. logotext utan logga) */ --nav-color: var(--accent); /* [ADMIN] menytext (tom i admin = huvudfärgen) */ --nav-active-color: #ffffff; /* [ADMIN] vald kategori */ --nav-blend: difference; /* [ADMIN] difference = menyn inverteras mot bilden, normal = vanlig */ --nav-shadow: none; /* [ADMIN] skugga bakom menytexten (läget "mjuk skugga") */ --nav-item-bg: transparent; /* [ADMIN] ruta bakom varje menyval */ --nav-item-padding: 0 0 2px; --nav-bg: transparent; /* bakgrund bara bakom menyraden (oftast transparent) */ --header-bg: transparent; /* [ADMIN] header: transparent eller en färg */ --header-height: 0px; /* [ADMIN] höjd på solid header, dator (0 = genomskinlig) */ --header-height-mobile: 0px; /* [ADMIN] höjd på solid header, mobil */ --placeholder: #eeeeee; /* färg medan en bild laddas */ --lightbox-bg: #ffffff; /* [ADMIN] bakgrund i helskärm */ --lightbox-ui: #111111; /* färg på videokontroller i helskärm */ /* ---------- Typsnitt ---------- */ --font-style: normal; /* [ADMIN] italic = kursiv på all text */ --font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* [ADMIN] */ --nav-size: 13px; /* [ADMIN] */ --nav-weight: 500; /* [ADMIN] */ --nav-letter-spacing: 0.08em; /* [ADMIN] */ --nav-transform: uppercase; /* [ADMIN] uppercase | none */ --nav-item-spacing: 1.6em; /* avstånd mellan menyval */ --nav-underline: 1px; /* linje under vald kategori, 0 = ingen */ --nav-justify: flex-end; /* [ADMIN] flex-end = höger, center, flex-start = vänster */ --header-padding: 24px; /* luft runt menyn */ /* ---------- Logga ---------- */ --logo-width: 180px; /* [ADMIN] */ --logo-width-mobile: 110px; /* [ADMIN] */ --logo-top: 24px; /* [ADMIN] */ --logo-left: 24px; /* [ADMIN] */ --logo-rotate: 0deg; /* [ADMIN] rotation av loggan */ --logo-display-mobile: block; /* [ADMIN] none = loggan dold på mobil */ --logo-text-size: 26px; /* [ADMIN] logotext (när ingen bild-logga), dator */ --logo-text-size-mobile: 18px; /* [ADMIN] logotext, mobil */ --logo-text-line-height: 1.05; /* radavstånd när logotexten har två rader */ --logo-text-bg: transparent; /* [ADMIN] ruta bakom varje rad (tom i admin = samma som rubrik 1 på startbilden) */ --logo-text-color: #ffffff; /* [ADMIN] */ --logo-font: var(--font-family); /* [ADMIN] typsnitt bara för logotexten */ --logo-text-blend: var(--nav-blend); --logo-text-shadow: var(--nav-shadow); --logo-text-padding: 0.12em 0.4em; /* luft i rutan runt varje rad */ --logo-text-gap: 4px; /* [ADMIN] avstånd mellan raderna */ --logo-line2-factor: 0.55; /* storlek på rad 2 i förhållande till rad 1 */ --logo-text-line2-scale: calc(var(--logo-line2-factor) * 1em); --logo-text-line2-transform: none; /* rad 2 som skriven (små bokstäver). uppercase = versaler */ --logo-rotate-origin: center; /* vridpunkt: center, top left osv */ /* ---------- Grid ---------- */ --gap: 20px; /* [ADMIN] vit yta mellan bilder */ --gap-mobile: 10px; /* [ADMIN] */ --outer-margin: 0px; /* [ADMIN] 0 = utfallande kant i kant */ --columns-desktop: 3; /* [ADMIN] */ --columns-tablet: 2; /* [ADMIN] */ --columns-mobile: 1; /* [ADMIN] */ --grid-ratio: 1.5; /* [ADMIN] liggande format i griden, bredd/höjd (1.5 = 3:2) */ --breakpoint-tablet: 1100; /* px, under detta används tablet-kolumner */ --breakpoint-mobile: 640; /* px, under detta används mobil-kolumner */ /* ---------- Rörelse & effekter ---------- */ --ease: cubic-bezier(.2, .7, .2, 1); --duration: 450ms; /* flytt av bilder vid filtrering */ --fade: 300ms; /* in/uttoning */ --hover-dim: 0.85; /* opacitet vid hover (hover: dim) */ --hover-zoom: 1.03; /* skala vid hover (hover: zoom) */ /* ---------- Startbild ---------- */ --hero-fit: cover; /* [ADMIN] cover = fyll skärmen, contain = hela bilden */ --hero-position: center; /* vilken del som syns när bilden beskärs, t.ex. center top */ --hero-bg: var(--bg); /* bakgrund bakom startbilden (syns vid contain) */ --hero-fade: 600ms; /* in- och uttoning */ --hero-logo-opacity: 1; /* [ADMIN] 0 = logga/logotext dold på startbilden */ --hero-logo-visibility: visible; /* [ADMIN] */ --hero-text-color: var(--accent); /* färg på texten mitt på startbilden */ --hero-text-shadow: none; /* [ADMIN] skugga bakom texten */ --hero-text-gap: 4px; /* [ADMIN] avstånd mellan rubrik 1, rubrik 2 och bildtext */ --hero-h1-size: 56px; /* [ADMIN] rubrik 1 */ --hero-h1-weight: 600; /* [ADMIN] */ --hero-h1-letter-spacing: 0.02em; --hero-h1-transform: none; /* uppercase för versaler */ --hero-h2-size: 22px; /* [ADMIN] rubrik 2 */ --hero-h2-weight: 400; --hero-h2-letter-spacing: 0.02em; --hero-caption-size: 13px; /* [ADMIN] bildtext */ --hero-caption-letter-spacing: 0.08em; --hero-caption-transform: uppercase; --hero-caption-bottom: 32px; /* avstånd från botten när bildtexten ligger längst ner */ --hero-h1-bg: transparent; /* [ADMIN] solid bakgrund bakom rubrik 1 */ --hero-h2-bg: transparent; /* [ADMIN] bakom rubrik 2 */ --hero-caption-bg: transparent; /* [ADMIN] bakom bildtexten */ --hero-box-padding: 0.12em 0.4em; /* luft inuti textrutorna (upp/ner, sidor) */ --hero-mobile-scale: 0.6; /* rubrikerna skalas ner så här mycket på mobil */ /* ---------- Om mig / kontakt ---------- */ --about-bg: var(--bg); /* bakgrund */ --about-fg: var(--fg); /* textfärg */ --about-columns: 1fr 1fr; /* bild | text. T.ex. 2fr 3fr för smalare bild */ --about-image-order: 0; /* 0 = bild till vänster, 2 = bild till höger */ --about-image-position: center; /* vilken del av bilden som syns */ --about-padding: 64px; /* luft runt texten */ --about-max-width: 34em; /* textens maxbredd */ --about-title-size: 28px; --about-title-weight: 600; --about-text-size: 16px; --about-line-height: 1.6; /* ---------- Bildtexter (kund + info) ---------- */ --caption-bg: #000000; /* [ADMIN] */ --caption-color: #ffffff; /* [ADMIN] */ --caption-size: 11px; /* [ADMIN] */ --caption-font: var(--font-family); /* [ADMIN] typsnitt för bildtexter */ --caption-align: flex-start; /* [ADMIN] flex-start = vänster, center, flex-end = höger */ --caption-text-align: left; /* [ADMIN] */ --caption-padding: 0.25em 0.5em; /* luft i rutan runt texten */ --caption-offset: 12px; /* avstånd från bildens kant */ --caption-line-gap: 0.2em; /* avstånd mellan kund och bildtext */ --caption-client-transform: uppercase; /* kundnamnet i versaler, none = som skrivet */ --caption-client-letter-spacing: 0.06em; /* ---------- Helskärm ---------- */ --lightbox-padding: 0px; /* [ADMIN] luft runt bilden i helskärm */ } /* Egna typsnittsfiler: lägg dem i /public/fonts och avkommentera. @font-face { font-family: "MittTypsnitt"; src: url("/fonts/MittTypsnitt.woff2") format("woff2"); font-weight: 400; font-display: swap; } Skriv sedan "MittTypsnitt", sans-serif som typsnitt på adminsidan. */