/* Kundvyn. * * Grundmallen som varje ny restaurang ärver. En restaurang som aldrig rört * utseendefliken ska se färdig ut — inte som ett omålat utkast — så allt här * står på egna ben utan uppladdade bilder och utan valda färger. * * --primar och --accent sätts per restaurang i sidans och faller * tillbaka på husets olivgröna och terrakotta. Resten av paletten är fast: * kräm som papper, salvia som stödton, grafit som text. Inga standardfärger * från ett ramverk — hela poängen är att sidan ska kännas som en restaurang * och inte som en administrationsvy. * * Sidan är byggd mobilt först. En pizzabeställning görs på en telefon, ofta * stående, ofta med en tumme. Skrivbordsvyn är samma spalt, bara luftigare. */ :root { /* --- paletten ------------------------------------------------------- */ --oliv: #2e4b3f; --oliv-mork: #223a30; --oliv-ljus: #3d6252; --terrakotta: #b85c38; --terrakotta-mork: #96482a; --creme: #f5f1e8; --creme-djup: #ece6d8; --salvia: #8a9686; --salvia-blek: #c8cfc1; --grafit: #252525; /* --- ytor ----------------------------------------------------------- */ --papper: #fffdf8; --blek: var(--creme); --kant: #e2dacb; --kant-svag: #ede7db; --text: var(--grafit); --dampad: #6d6759; /* Status lånar ur paletten i stället för att dra in gröna och röda toner utifrån. Ett kvitto ska höra ihop med resten av sidan. */ --gron: var(--oliv); --gron-bakgrund: #e5ebe2; --rod: #9a3218; --rod-bakgrund: #f7e7e0; --sand: #f2e6cc; --sand-text: #7a5a22; /* --- form ----------------------------------------------------------- */ --radie-s: 10px; --radie: 16px; --radie-l: 24px; /* Skuggor i grafit, inte i svart: en varm sida med kallsvart skugga under korten ser smutsig ut. */ --skugga-1: 0 1px 2px rgba(37, 37, 37, .04), 0 2px 8px rgba(37, 37, 37, .05); --skugga-2: 0 2px 4px rgba(37, 37, 37, .05), 0 14px 30px -10px rgba(37, 37, 37, .16); --skugga-3: 0 28px 70px -22px rgba(37, 37, 37, .38); /* Bakåtkompatibelt namn: används fortfarande av panelerna. */ --skugga: var(--skugga-1); /* --- rörelse -------------------------------------------------------- */ /* Startar snabbt och landar mjukt. Allt som rör sig i gränssnittet delar kurva, annars känns sidan hopplockad. */ --mjuk: cubic-bezier(.22, .9, .28, 1); --studs: cubic-bezier(.34, 1.56, .64, 1); /* --- spalten -------------------------------------------------------- */ /* En spalt för hela sidan. Toppbaren, kategorierna, menyn och foten hämtar sin bredd härifrån, så ingenting kan glida i sidled i förhållande till något annat. */ --spalt: 68rem; --sidmarginal: clamp(1.15rem, 4vw, 2.5rem); --innerspalt: calc(var(--spalt) - 2 * var(--sidmarginal)); /* --- typografi ------------------------------------------------------ */ /* Serif i rubrikerna, som logotypen. Systemets egna gammalstilsantikvor i tur och ordning: ingen nedladdning, inget som saknas offline, och en kund på 3G slipper vänta på ett typsnitt för att kunna läsa menyn. */ --rubrikfont: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Hoefler Text", Georgia, "Times New Roman", serif; --brodfont: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } /* Varje klass med egen display slår ut webbläsarens regel för hidden. Utan den här låg vagnknappen kvar och visade "0 kr" på en tom vagn. En gång här i stället för en undantagsregel per komponent. */ [hidden] { display: none !important; } body { margin: 0; font-family: var(--brodfont); font-size: 1.0625rem; line-height: 1.65; color: var(--text); background: var(--blek); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* --------------------------------------------------------------- spalten */ /* Allt som ska ligga i samma lodräta linje får den härifrån. Bakgrunder får gärna gå kant till kant; innehållet gör det aldrig. */ .spalt, .menyn, .kassa, .orderstatus, .textsida, .offlinesida { width: min(var(--spalt), 100%); margin-inline: auto; padding-inline: var(--sidmarginal); } /* Läsande sidor har en smalare spalt än menyn — men samma mittlinje, så toppbaren och foten står kvar där de stod. */ .kassa, .orderstatus, .textsida { --spalt: 44rem; } .offlinesida { --spalt: 34rem; } /* --------------------------------------------------------------- typografi */ h1, h2, h3 { margin: 0; font-family: var(--rubrikfont); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; } h1 { font-size: clamp(1.95rem, 1.5rem + 1.6vw, 2.75rem); } h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); } h3 { font-size: 1.15rem; } a { color: inherit; } img { max-width: 100%; } .dampad { color: var(--dampad); font-size: .9rem; font-weight: 400; line-height: 1.5; } .valfritt { color: var(--dampad); font-weight: 400; font-size: .85em; } .hjalptext { font-size: .85rem; line-height: 1.55; color: var(--dampad); font-weight: 400; margin: .4rem 0 0; } /* -------------------------------------------------------------------- topp */ .topp { position: sticky; top: 0; z-index: 20; background: rgba(245, 241, 232, .82); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--kant-svag); } .toppinnehall { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; } .marke { display: flex; align-items: center; gap: .65rem; font-family: var(--rubrikfont); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; color: var(--oliv); } .marke img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; } /* Vagnknappen är alltid inom räckhåll och visar hela tiden vad det kostar. Ett dolt pris tills sista steget är det som får folk att hoppa av. */ .vagnknapp { display: flex; align-items: center; gap: .55rem; padding: .5rem .95rem; border: 0; border-radius: 999px; background: var(--primar); color: #fff; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; box-shadow: var(--skugga-1); transition: transform .25s var(--mjuk), box-shadow .25s var(--mjuk), filter .2s; } .vagnknapp:hover { transform: translateY(-1px); box-shadow: var(--skugga-2); filter: brightness(1.06); } .vagnknapp:active { transform: translateY(0) scale(.97); } .vagnantal { min-width: 1.45rem; height: 1.45rem; display: grid; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: .8rem; font-variant-numeric: tabular-nums; } /* Kvitteringen på att varan hamnade i vagnen. Knappen ska kännas som att den tar emot något, inte bara räkna upp en siffra. */ @keyframes vagnpuls { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 60% { transform: scale(.97); } 100% { transform: scale(1); } } .vagnknapp.pulsar { animation: vagnpuls .5s var(--studs); } /* -------------------------------------------------------------------- hero */ .hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(17rem, 44vw, 27rem); padding-block: clamp(3.5rem, 9vw, 6rem) clamp(2rem, 4vw, 3rem); background-color: var(--primar); background-size: cover; background-position: center; color: #fff; overflow: hidden; } /* Slöjan. Bilder är oförutsägbara: utan den blir texten oläslig så fort någon laddar upp ett ljust foto, och med den får varje foto samma djup nedtill. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(178deg, rgba(37, 37, 37, .08) 0%, rgba(37, 37, 37, .40) 46%, rgba(34, 58, 48, .88) 100%), radial-gradient(120% 85% at 18% 8%, rgba(255, 255, 255, .16), transparent 62%); } /* Ingen bild uppladdad: då får gradienten bära hela intrycket. Två mjuka ljuskällor mot olivgrönt, med en terrakottaglöd i nedre hörnet. */ .hero.utanbild { background-image: radial-gradient(95% 80% at 82% 108%, rgba(184, 92, 56, .55), transparent 62%), radial-gradient(80% 70% at 12% -10%, rgba(200, 207, 193, .38), transparent 60%), linear-gradient(165deg, var(--oliv-ljus), var(--oliv-mork)); } .hero.utanbild::before { background: linear-gradient(180deg, rgba(34, 58, 48, .10), rgba(34, 58, 48, .45)); } /* Övergången ned i sidan. Kanten mellan hero och meny ska tona ut, inte klippas av med en rak linje. */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4.5rem; z-index: -1; background: linear-gradient(180deg, rgba(245, 241, 232, 0), rgba(245, 241, 232, .38)); } .heroinnehall { position: relative; z-index: 1; } .heroetikett { margin: 0 0 .6rem; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } .hero h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.25rem); margin-bottom: 1rem; text-shadow: 0 2px 24px rgba(20, 30, 25, .35); } .lagesrad { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .38rem .9rem; border-radius: 999px; font-size: .875rem; font-weight: 600; background: rgba(255, 255, 255, .14); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .18); } .lagesrad::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 3px currentColor; opacity: .95; } .lagesrad.oppen { color: #b8d8bd; } .lagesrad.stangd { color: #e7b8a5; } .hero .vantetid { margin: .7rem 0 0; font-size: .92rem; color: rgba(255, 255, 255, .82); } /* ------------------------------------------------------------------- notis */ .notis { max-width: var(--innerspalt); margin: 1.25rem auto; padding: .95rem 1.2rem; border-radius: var(--radie); border: 1px solid transparent; background: var(--gron-bakgrund); color: var(--gron); font-size: .92rem; } .notis.stangdnotis { background: var(--sand); color: var(--sand-text); } /* -------------------------------------------------------------------- meny */ .kategorimeny { position: sticky; top: 3.6rem; z-index: 15; background: rgba(245, 241, 232, .88); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--kant-svag); } .kategorirad { display: flex; gap: .5rem; padding-block: .7rem; overflow-x: auto; scrollbar-width: none; } .kategorirad::-webkit-scrollbar { display: none; } .kategorimeny a { flex: none; padding: .4rem .95rem; border: 1px solid var(--kant); border-radius: 999px; background: var(--papper); font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .25s var(--mjuk), border-color .25s var(--mjuk), color .25s var(--mjuk), transform .25s var(--mjuk); } .kategorimeny a:hover { background: var(--primar); border-color: var(--primar); color: #fff; transform: translateY(-1px); } .menyn { padding-block: clamp(1.75rem, 4vw, 3rem) 6rem; } .kategori { margin-bottom: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: 7.5rem; } /* Rubrikbandet. En mjuk toning som markerar var en ny del av menyn börjar. Bandet håller sig innanför spalten — en sektion som sticker ut i sidled är precis det som får en sida att se ihopplockad ut. Toningen får göra jobbet, inte kanten. */ .kategori > h2 { position: relative; padding: .9rem 0 .8rem; background: linear-gradient(180deg, rgba(46, 75, 63, .075), rgba(46, 75, 63, 0) 85%); } .kategori > h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--salvia), rgba(138, 150, 134, 0) 72%); } .kategori > .dampad { margin: .8rem 0 0; max-width: 42rem; } .rattlista { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .75rem; } .rattknapp { display: flex; align-items: center; gap: 1rem; width: 100%; padding: .9rem 1.1rem .9rem .9rem; border: 1px solid var(--kant-svag); border-radius: var(--radie); background: var(--papper); box-shadow: var(--skugga-1); font: inherit; text-align: left; cursor: pointer; transition: transform .3s var(--mjuk), box-shadow .3s var(--mjuk), border-color .3s var(--mjuk); } .rattknapp:hover { transform: translateY(-2px); border-color: var(--salvia-blek); box-shadow: var(--skugga-2); } .rattknapp:active { transform: translateY(0) scale(.99); } /* Rutan bär djupet, bilden bara motivet: en inre ram mot ljusa foton, en skugga under, och en toning i nedre hörnet så att bilden får volym i stället för att se ut som en urklippt miniatyr. */ .rattbildruta { position: relative; flex: none; width: 86px; height: 86px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(37, 37, 37, .07), 0 8px 16px -8px rgba(37, 37, 37, .45); } .rattbildruta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(37, 37, 37, 0) 42%, rgba(37, 37, 37, .34)); } .rattbild { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--mjuk); } .rattknapp:hover .rattbild { transform: scale(1.07); } .ratttext { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; } .ratttext strong { font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; } .allergener { font-size: .72rem; color: var(--salvia); text-transform: uppercase; letter-spacing: .08em; } .rattpris { font-family: var(--rubrikfont); font-size: 1.1rem; font-weight: 600; white-space: nowrap; color: var(--oliv); } .oppettabell { width: 100%; border-collapse: collapse; font-size: .95rem; margin-top: 1.25rem; } .oppettabell th { text-align: left; font-weight: 500; padding: .55rem 0; border-bottom: 1px solid var(--kant-svag); } .oppettabell td { text-align: right; color: var(--dampad); padding: .55rem 0; border-bottom: 1px solid var(--kant-svag); } .oppettabell tr:last-child th, .oppettabell tr:last-child td { border-bottom: 0; } /* --------------------------------------------------------------- dialogen */ .rattdialog { width: min(33rem, 100vw); max-height: 88vh; padding: 0; border: 0; border-radius: var(--radie-l) var(--radie-l) 0 0; background: var(--papper); color: var(--text); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--skugga-3); } /* display: flex ovanför slår ut webbläsarens egen regel om att en stängd dialog inte syns, och då låg en tom vit ruta kvar längst ned på menyn. */ .rattdialog:not([open]) { display: none; } .rattdialog::backdrop { background: rgba(34, 58, 48, .5); backdrop-filter: blur(3px); } .rattdialog[open] { margin: auto auto 0; animation: dialogupp .32s var(--mjuk); } @keyframes dialogupp { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } .dialogtopp { display: flex; justify-content: flex-end; padding: .7rem .7rem 0; } .dialogtopp button { width: 2.2rem; height: 2.2rem; border: 0; border-radius: 999px; background: var(--creme-djup); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background-color .2s, transform .2s var(--mjuk); } .dialogtopp button:hover { background: var(--salvia-blek); transform: rotate(90deg); } .dialoginnehall { padding: 0 1.4rem 1.4rem; overflow-y: auto; } .dialoginnehall h2 { margin-bottom: .35rem; } .tillvalsgrupp { margin: 1.5rem 0 0; padding: 0; border: 0; } .tillvalsgrupp legend { padding: 0 0 .5rem; font-weight: 600; font-size: .95rem; } .kryss { display: flex; align-items: baseline; gap: .6rem; padding: .45rem 0; font-size: .95rem; } .kryss input { margin: 0; flex: none; accent-color: var(--primar); } .halvval, .noteringsfalt { display: flex; flex-direction: column; gap: .4rem; margin-top: 1.5rem; font-weight: 600; font-size: .95rem; } .dialogfot { display: flex; gap: .75rem; align-items: center; padding: 1rem 1.4rem; border-top: 1px solid var(--kant-svag); background: var(--papper); } .antalsvaljare { display: flex; align-items: center; gap: .1rem; border: 1px solid var(--kant); border-radius: 999px; padding: .15rem; } .antalsvaljare button { width: 2.3rem; height: 2.3rem; border: 0; border-radius: 999px; background: transparent; font-size: 1.15rem; cursor: pointer; transition: background-color .2s, transform .18s var(--mjuk); } .antalsvaljare button:hover { background: var(--creme-djup); } .antalsvaljare button:active { transform: scale(.9); } .antalsvaljare output { min-width: 1.85rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- vagnen */ .vagn { position: fixed; right: 0; bottom: 0; z-index: 40; width: min(27rem, 100vw); max-height: 85vh; display: flex; flex-direction: column; background: var(--papper); border-radius: var(--radie-l) var(--radie-l) 0 0; box-shadow: var(--skugga-3); animation: vagnupp .3s var(--mjuk); } @keyframes vagnupp { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } } .vagn[hidden] { display: none; } .vagn header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem .5rem; } .vagn header button { width: 2.2rem; height: 2.2rem; border: 0; border-radius: 999px; background: var(--creme-djup); font-size: 1.2rem; cursor: pointer; transition: background-color .2s, transform .2s var(--mjuk); } .vagn header button:hover { background: var(--salvia-blek); transform: rotate(90deg); } .vagn footer { padding: 1rem 1.4rem 1.4rem; border-top: 1px solid var(--kant-svag); } .skugga { position: fixed; inset: 0; z-index: 30; background: rgba(34, 58, 48, .42); backdrop-filter: blur(2px); animation: tona .25s ease; } @keyframes tona { from { opacity: 0; } to { opacity: 1; } } .skugga[hidden] { display: none; } .vagnrader { list-style: none; margin: 0; padding: 0 1.4rem; overflow-y: auto; } .vagnrad, .orderrader li { display: flex; align-items: baseline; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--kant-svag); } .vagnrad:last-child, .orderrader li:last-child { border-bottom: 0; } /* Den nyss tillagda raden. Kvitteringen på trycket: raden kommer nedifrån, växer förbi sin slutstorlek och lägger sig till rätta. */ @keyframes radin { 0% { transform: translateY(10px) scale(.96); opacity: 0; } 55% { transform: translateY(0) scale(1.02); opacity: 1; } 100% { transform: none; } } .vagnrad.ny { animation: radin .45s var(--studs); } .antal { font-weight: 600; color: var(--salvia); flex: none; font-variant-numeric: tabular-nums; } .radnamn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .radpris { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } .taBort { flex: none; width: 1.85rem; height: 1.85rem; border: 0; border-radius: 999px; background: transparent; color: var(--dampad); font-size: 1.1rem; cursor: pointer; transition: background-color .2s, color .2s, transform .18s var(--mjuk); } .taBort:hover { background: var(--rod-bakgrund); color: var(--rod); transform: scale(1.1); } .tomvagn { padding: 1.75rem 1.4rem; text-align: center; color: var(--dampad); } .summarad { display: flex; justify-content: space-between; margin-bottom: .9rem; font-family: var(--rubrikfont); font-size: 1.15rem; } /* --------------------------------------------------------------- knappar */ .knapp { display: inline-block; padding: .85rem 1.35rem; border: 1px solid var(--kant); border-radius: 999px; background: var(--papper); color: var(--text); font: inherit; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: transform .22s var(--mjuk), box-shadow .28s var(--mjuk), background-color .22s, border-color .22s, filter .2s; } .knapp:hover { transform: translateY(-1px); box-shadow: var(--skugga-2); } .knapp:active { transform: translateY(0) scale(.985); box-shadow: var(--skugga-1); } .knapp.primar { background: var(--primar); border-color: var(--primar); color: #fff; } .knapp.primar:hover { filter: brightness(1.08); } .knapp.bred { display: block; width: 100%; } .knapp.fara { color: var(--rod); border-color: var(--rod-bakgrund); background: transparent; } .knapp.fara:hover { background: var(--rod-bakgrund); } .knapp[disabled], .knapp.avstangd { opacity: .4; pointer-events: none; box-shadow: none; } /* ---------------------------------------------------------------- kassan */ .kassa, .orderstatus, .textsida { padding-block: clamp(1.5rem, 4vw, 2.75rem) 5rem; } .tillbaka { display: inline-block; margin-bottom: 1.25rem; font-size: .9rem; text-decoration: none; color: var(--dampad); transition: color .2s, transform .2s var(--mjuk); } .tillbaka:hover { color: var(--primar); transform: translateX(-3px); } .kassa h1, .orderstatus h1 { margin-bottom: 1.25rem; } .panel { margin: 1.15rem 0; padding: 1.35rem; background: var(--papper); border: 1px solid var(--kant-svag); border-radius: var(--radie); box-shadow: var(--skugga-1); } .panel h2 { margin-bottom: 1rem; } .panel .vagnrader { padding: 0; } .fel { padding: .95rem 1.2rem; border-radius: var(--radie); background: var(--rod-bakgrund); color: var(--rod); font-size: .92rem; } .fel[hidden] { display: none; } .kassaformular label { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; font-weight: 600; font-size: .925rem; } .kassaformular label:last-child { margin-bottom: 0; } .kassaformular .kryss { flex-direction: row; align-items: flex-start; flex-wrap: wrap; } .kassaformular .kryss .hjalptext { flex-basis: 100%; margin-left: 1.6rem; } input[type="text"], input[type="tel"], input[type="email"], input[type="time"], input[type="date"], input[type="number"], select, textarea { width: 100%; padding: .75rem .9rem; border: 1px solid var(--kant); border-radius: var(--radie-s); background: var(--papper); font: inherit; color: inherit; transition: border-color .2s, box-shadow .2s; } input:hover, select:hover, textarea:hover { border-color: var(--salvia-blek); } input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .faltpar { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .valrad { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .valknapp { display: flex; flex-direction: column; gap: .2rem; padding: .95rem; border: 1px solid var(--kant); border-radius: var(--radie); cursor: pointer; font-weight: 600; font-size: .925rem; transition: border-color .22s var(--mjuk), box-shadow .22s var(--mjuk), background-color .22s, transform .22s var(--mjuk); } .valknapp:hover { border-color: var(--salvia-blek); transform: translateY(-1px); } .valknapp span { font-size: .82rem; color: var(--dampad); font-weight: 400; } .valknapp input { position: absolute; opacity: 0; pointer-events: none; } .valknapp:has(input:checked) { border-color: var(--primar); background: rgba(46, 75, 63, .045); box-shadow: inset 0 0 0 1px var(--primar); } .summering { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--kant-svag); } .summering div { display: flex; justify-content: space-between; padding: .25rem 0; } /* Måste stå efter regeln ovan: den sätter display på samma element som JS döljer med hidden-attributet, och en klassregel vinner över webbläsarens egen [hidden] { display: none }. Utan den här raden syns "Rabatt" utan belopp och "Leverans – Ingen avgift" även när kunden hämtar själv. */ .summering div[hidden] { display: none; } .summering dt, .summering dd { margin: 0; } .summering dd { font-variant-numeric: tabular-nums; } .summering .rabattrad { color: var(--gron); } .summering .totalrad { margin-top: .6rem; padding-top: .7rem; border-top: 1px solid var(--kant); font-family: var(--rubrikfont); font-size: 1.3rem; font-weight: 600; } .summering[hidden] { display: none; } /* ----------------------------------------------------------- stämpelkort */ /* Kortet ska kännas som ett kort, inte som en siffra. Stämplarna faller in en och en när uppslaget kommer tillbaka, och mätaren växer fram — det är den lilla belöningen som gör att någon bryr sig om att fylla det. */ .stampelkort { margin: 0 0 1rem; padding: 1rem 1.15rem; border-radius: var(--radie); border: 1px solid var(--salvia-blek); background: linear-gradient(160deg, var(--gron-bakgrund), var(--papper)); color: var(--gron); font-size: .9rem; } .stampelkort[hidden] { display: none; } .stampelkort p { margin: 0; } .kortpost + .kortpost { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--salvia-blek); } .kortrad { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; } .kortrad strong { font-family: var(--rubrikfont); font-size: 1.02rem; font-weight: 600; } .kortkvar { font-size: .82rem; color: var(--dampad); white-space: nowrap; } .stamplar { display: flex; flex-wrap: wrap; gap: .38rem; margin-top: .7rem; } .stampel { width: 1.05rem; height: 1.05rem; border-radius: 999px; border: 1.5px solid var(--salvia); background: transparent; transform: scale(.72); opacity: .45; transition: transform .38s var(--studs), opacity .38s var(--mjuk), background-color .38s var(--mjuk), border-color .38s var(--mjuk); } .stampel.fylld { background: var(--primar); border-color: var(--primar); transform: scale(1); opacity: 1; } .kortfullt { margin-top: .7rem; padding: .55rem .85rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .88rem; font-weight: 600; animation: kortpuls .6s var(--studs); } @keyframes kortpuls { 0% { transform: scale(.94); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1); } } /* ------------------------------------------------------------- betalning */ .betalmetoder { display: flex; gap: .5rem; margin: 0 0 .75rem; flex-wrap: wrap; } .metod { padding: .35rem .8rem; border: 1px solid var(--kant); border-radius: 999px; background: var(--papper); font-size: .82rem; font-weight: 600; } .metod-swish { border-color: transparent; background: #f2ecff; color: #4b2a86; } .integritetstext { font-size: .82rem; line-height: 1.6; color: var(--dampad); margin: 1.25rem 0; } /* ---------------------------------------------------------- orderstatus */ .statuskort { padding: 2.25rem 1.5rem; text-align: center; background: linear-gradient(170deg, var(--papper), var(--creme)); border: 1px solid var(--kant-svag); border-radius: var(--radie-l); box-shadow: var(--skugga-2); } .ordernummer { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--salvia); font-weight: 600; } .statuskort h1 { margin: .5rem 0 .4rem; } .statuskort .vantetid { color: var(--dampad); font-size: .93rem; } .betalstatus { margin: 1.25rem 0 0; } .bricka { display: inline-block; padding: .3rem .85rem; border: 1px solid var(--kant); border-radius: 999px; background: var(--papper); font-size: .8rem; font-weight: 600; } .bricka.gron { background: var(--gron-bakgrund); border-color: transparent; color: var(--gron); } .bricka.rod { background: var(--rod-bakgrund); border-color: transparent; color: var(--rod); } .orderrader { list-style: none; margin: 0; padding: 0; } .spara-lank { margin-top: 1.75rem; text-align: center; font-size: .85rem; color: var(--dampad); } /* ------------------------------------------------------------- textsida */ .textsida h2 { margin: 2rem 0 .5rem; } .textsida p { margin: 0; } /* ------------------------------------------------- offline och hemskärm */ /* Sitter överst på sidan och trycker ned innehållet i stället för att lägga sig över det — ett meddelande som täcker en knapp är värre än inget. */ .natbanner { margin: 0; padding: .75rem 1rem; background: var(--sand); color: var(--sand-text); font-size: .875rem; text-align: center; } .natbanner[hidden] { display: none; } .hemskarm { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; /* Samma sidmarginal som resten av sidan har via sin container. Ett kort som går ut i kanten ser ut som något som ramlat in utifrån. */ max-width: min(var(--innerspalt), 100% - 2rem); margin: 1.75rem auto; padding: 1.35rem; background: var(--papper); border: 1px solid var(--kant-svag); border-radius: var(--radie); box-shadow: var(--skugga-1); } /* min-width tvingar knapparna ned på egen rad på en telefon i stället för att klämma texten till tre ord per rad. */ .hemskarmtext { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 15rem; } .hemskarmtext span { font-size: .875rem; color: var(--dampad); } .hemskarmknappar { display: flex; gap: .5rem; align-items: center; } .hemskarmknappar .knapp { padding: .65rem 1.1rem; font-size: .9rem; } /* Ett nej ska vara lika lätt att hitta som ett ja, men inte lika högljutt. */ .knapp.tyst { border-color: transparent; background: transparent; color: var(--dampad); font-weight: 500; } .knapp.tyst:hover { background: var(--creme-djup); box-shadow: none; } .offlinesida { padding-block: 4rem 5rem; text-align: center; } .offlinesida h1 { margin-bottom: .75rem; } .offlinesida .ledtext { color: var(--dampad); font-size: .95rem; } .offlinesida .notis { text-align: left; margin: 1.75rem 0; } .offlinesida .knapp { min-width: 12rem; } /* ------------------------------------------------------------------- fot */ .fot { padding-block: 2.5rem 3.5rem; font-size: .875rem; color: var(--dampad); border-top: 1px solid var(--kant-svag); background: var(--creme-djup); } .fot p { margin: .25rem 0; } .fot .fotnamn { font-family: var(--rubrikfont); font-size: 1.05rem; color: var(--oliv); } .fot a { transition: color .2s; } .fot a:hover { color: var(--primar); } /* ---------------------------------------------------------- stor skärm */ @media (min-width: 720px) { .rattlista { grid-template-columns: 1fr 1fr; gap: .85rem; } .rattdialog { border-radius: var(--radie-l); } .rattdialog[open] { margin: auto; } .vagn { bottom: 1.5rem; right: 1.5rem; border-radius: var(--radie-l); } } @media (max-width: 420px) { .valrad, .faltpar { grid-template-columns: 1fr; } } /* Rörelsen är dekor. Den som bett systemet om lugn ska få en sida som står still, inte en som studsar lite mindre. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .stampel { transform: scale(1); } }