/* Serviceintervall-sidor: hubb, markessidor och modellsidor. * * Egen visuell linje som ligger narmare ett dokument an en marknadssida: * platta ytor, harfina linjer, editorial typografi och skarpa radier. * Inga gradienter. * * Alla token-overskrivningar ar scopade till .si-page pa , sa att * ovriga sidor pa serviceboken.com ar oforandrade. */ .si-page { /* Typsnittet ar sajtens eget (Open Sans, arvs fran styles.css). Mono anvands bara pa smaa dataetiketter: metarad, motorchips och kortens undertext. */ --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Skarpare radier och harfina linjer an resten av sajten. */ --radius: 10px; --radius-lg: 12px; --radius-xl: 12px; --border: #E7E3DA; --hairline: rgba(26, 26, 26, 0.09); --bone: #FBFAF7; /* Skuggor nastan bort. */ --shadow-sm: none; --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.03); --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-glow: 0 2px 8px rgba(0, 0, 0, 0.05); font-family: var(--font-body); background: var(--surface); } .si-page .navbar-title, .si-page h1, .si-page h2, .si-page h3 { font-family: var(--font-display); } /* ---------- SIDHUVUD ---------- */ .si-hero { padding: 132px 0 44px; background: var(--surface); border-bottom: 1px solid var(--hairline); } /* Samma textbredd som innehallet, annars bryter rubriken vansterkanten. */ .si-hero .container, .si-cta .container { max-width: 780px; } .breadcrumb { display: flex; gap: 8px; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 24px; flex-wrap: wrap; } .breadcrumb a { color: var(--text-muted); transition: color var(--transition); } .breadcrumb a:hover { color: var(--text); } .breadcrumb span { opacity: 0.4; } .si-hero h1 { font-size: 3rem; font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; margin-bottom: 20px; max-width: 800px; color: var(--text); } /* Metaraden lases som data, inte brodtext. */ .si-meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0; } /* ---------- INNEHALL ---------- */ .si-content { padding: 64px 0 96px; background: var(--surface); } .si-content .container { max-width: 780px; } .si-content h2 { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; margin: 88px 0 20px; color: var(--text); } .si-content h2:first-of-type { margin-top: 0; } .si-content h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; margin: 40px 0 10px; color: var(--text); } .si-content p { font-size: 1rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 20px; } .si-content ul, .si-content ol { margin: 0 0 22px 20px; color: var(--text-secondary); line-height: 1.7; } .si-content li { margin-bottom: 6px; font-size: 0.95rem; } .si-content strong { color: var(--text); font-weight: 600; } /* Brodtextlankar understryks, men inte knappar eller kort. */ .si-content a:not(.btn):not(.si-grid a) { color: var(--text); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; transition: text-decoration-color var(--transition); } .si-content a:not(.btn):not(.si-grid a):hover { text-decoration-color: var(--text); } .si-content .btn { text-decoration: none; } /* ---------- SNABBSVAR ---------- */ .si-answer { background: var(--bone); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 28px 30px; margin-bottom: 44px; } .si-answer p { margin-bottom: 0; font-size: 1.08rem; line-height: 1.6; letter-spacing: -0.012em; color: var(--text); } .si-answer p + p { margin-top: 12px; } /* ---------- ARSMODELLSNAVIGERING ---------- */ .si-toc { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 22px 0; margin-bottom: 64px; } .si-toc p { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; } .si-toc ul { list-style: none; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; } .si-toc li { margin: 0; font-size: 0.92rem; } .si-toc a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 1px; transition: border-color var(--transition); } .si-toc a:hover { border-color: var(--text); } /* ---------- MOTORFAKTA ---------- */ .si-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; } .si-chip { display: inline-block; background: var(--surface-dim); border-radius: 9999px; padding: 5px 12px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); } /* ---------- TABELL ---------- */ .si-table-wrap { overflow-x: auto; margin: 0 0 32px; } .si-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; } .si-table th { font-family: var(--font-mono); font-weight: 400; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 0 0 12px; text-align: left; border-bottom: 1px solid var(--text); white-space: nowrap; } .si-table td { padding: 15px 0; border-bottom: 1px solid var(--hairline); color: var(--text); vertical-align: baseline; } .si-table td:first-child { font-weight: 400; padding-right: 24px; } .si-table th:last-child, .si-table td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-secondary); } .si-table tr:last-child td { border-bottom: 1px solid var(--hairline); } /* ---------- NOTISER ---------- */ .si-note, .si-warning { border-radius: var(--radius); padding: 18px 22px; margin: 0 0 32px; } .si-note { background: var(--surface-dim); border: 1px solid var(--hairline); } .si-note p { font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary); margin-bottom: 0; } .si-note strong { color: var(--text); } /* Blekt rott enligt paletten, ingen fargad platta i storre format. */ .si-warning { background: #FDEBEC; border: 1px solid rgba(159, 47, 45, 0.14); } .si-warning p { font-size: 0.9rem; line-height: 1.6; color: #9F2F2D; margin-bottom: 0; } .si-warning strong { color: #9F2F2D; } /* ---------- GRIND MOT APPEN ---------- */ .si-gate { background: var(--bone); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 36px 38px; margin: 72px 0; } .si-gate p { font-size: 0.98rem; line-height: 1.65; color: var(--text); margin-bottom: 12px; max-width: 52ch; } .si-gate p + p { color: var(--text-secondary); font-size: 0.92rem; margin-bottom: 22px; } .si-gate .btn { box-shadow: none; border-radius: 8px; } .si-gate .btn:hover { box-shadow: none; } /* ---------- LANKRUTNAT ---------- */ .si-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 28px 0 40px; } .si-grid a { display: block; padding: 18px 20px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); color: var(--text); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.012em; text-decoration: none; transition: background var(--transition), border-color var(--transition), transform var(--transition); } .si-grid a:hover { background: #FFF8E8; border-color: rgba(250, 204, 85, 0.45); transform: translateY(-1px); } .si-grid a span { display: block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.04em; color: var(--text-muted); margin-top: 5px; } /* ---------- KALLOR ---------- */ .si-sources { font-size: 0.84rem; color: var(--text-muted); line-height: 1.7; } /* Kallorna innehaller langa obrytbara strangar, bade lankar och ren text (t.ex. "archive.org/details/VerkstadshandbokSaab900198188Grundmotor"). Brytningen maste sitta pa raden, inte bara pa , annars spracker textkallorna layouten under 462 px. */ .si-sources li { font-size: 0.84rem; overflow-wrap: anywhere; } .si-sources a { color: var(--text-muted); overflow-wrap: anywhere; } /* ---------- AVSLUTANDE CTA ---------- */ .si-cta { padding: 88px 0; background: var(--bone); border-top: 1px solid var(--hairline); text-align: center; } .si-cta h2 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 14px; } .si-cta p { font-size: 1rem; line-height: 1.65; color: var(--text-secondary); margin: 0 auto 32px; max-width: 46ch; } .si-cta .btn { box-shadow: none; border-radius: 8px; } .si-cta .btn:hover { box-shadow: none; } /* ---------- MIKROINTERAKTION ---------- */ @media (prefers-reduced-motion: no-preference) { .si-page .btn:active { transform: scale(0.98); } } /* ---------- RESPONSIVT ---------- */ @media (max-width: 768px) { .si-hero { padding: 108px 0 32px; } .si-hero h1 { font-size: 2.1rem; letter-spacing: -0.03em; } .si-content { padding: 48px 0 72px; } .si-content h2 { font-size: 1.35rem; margin-top: 64px; } .si-answer { padding: 22px 22px; } .si-answer p { font-size: 1rem; } .si-gate { padding: 28px 24px; margin: 56px 0; } .si-cta { padding: 64px 0; } } @media (max-width: 480px) { .si-hero h1 { font-size: 1.8rem; } .si-grid { grid-template-columns: 1fr; } }