/* Theme Name: Biloppkjøp.no Theme URI: https://biloppkjop.no Description: Custom standalone theme for Biloppkjøp.no Author: Nettsmed AS Author URI: https://nettsmed.no Version: 1.0.0 Requires PHP: 8.1 Text Domain: biloppkjop */ /* ============================================================ Biloppkjøp.no — Design Tokens Kilde: DESIGN.md (2026.04 Refresh) ============================================================ */ :root { /* Brand */ --color-primary: #B23A2C; --color-primary-dark: #8A2A1F; --color-ink-darkest: #2C0A0A; --color-ink: #1A1A1F; --color-ink-body: #3D3D44; --color-ink-muted: #6E6E76; --color-surface: #F4F2EE; --color-surface-soft: #FBFAF7; --color-line: #E5E0D6; --color-hero-accent: #FF9090; /* Semantic */ --color-success: #2A6B3A; --color-danger: #C0392B; /* Typography */ --font-display: 'Saira Condensed', system-ui, sans-serif; --font-body: 'Public Sans', system-ui, -apple-system, sans-serif; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 5rem; --space-3xl: 7.5rem; /* Border radius */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(20,15,15,0.04), 0 3px 8px rgba(20,15,15,0.05); --shadow-md: 0 1px 2px rgba(20,15,15,0.04), 0 6px 16px rgba(20,15,15,0.05); --shadow-lg: 0 8px 20px rgba(178,58,44,0.35); /* Easing */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ============================================================ Identitetsmotiv — Speed Streak Brukes på: footer, brand-blokk, hero lower-bar IKKE på: lyse seksjoner, CTA-rød ============================================================ */ .has-motif { position: relative; overflow: hidden; } .has-motif > * { position: relative; z-index: 1; } .motif-speed-dark::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient( 100deg, rgba(255, 144, 144, 0.11) 0px, rgba(255, 144, 144, 0.11) 2px, transparent 2px, transparent 160px ), repeating-linear-gradient( 100deg, rgba(255, 144, 144, 0.05) 0px, rgba(255, 144, 144, 0.05) 1px, transparent 1px, transparent 40px ); mask-image: radial-gradient(ellipse 65% 90% at 90% 50%, black 0%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 65% 90% at 90% 50%, black 0%, black 30%, transparent 80%); } .motif-speed-dark::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 45% 60% at 88% 40%, rgba(178, 58, 44, 0.18), transparent 60%), radial-gradient(ellipse 25% 90% at 0% 50%, rgba(20, 5, 5, 0.5), transparent 55%), radial-gradient(ellipse 80% 30% at 50% 100%, rgba(20, 5, 5, 0.4), transparent 80%); } /* ============================================================ Scroll-reveal — progressiv forbedring ============================================================ .js-ready settes på av inline-script i header.php FØR første paint. Elementer er synlige som standard og animasjonen aktiveres kun når JS kjører. Dette sikrer synlig innhold for søkeroboter og noscript. */ /* Standard: synlig (no-JS, bots, rendere uten JS) */ .reveal { opacity: 1; transform: none; } /* Med JS: skjul og forbered overgang */ .js-ready .reveal { opacity: 0; transform: translateY(20px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); } /* Aktivert av IntersectionObserver */ .js-ready .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } /* Vis uansett JS-tilstand */ .js-ready .reveal, .js-ready .reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Print */ @media print { .js-ready .reveal { opacity: 1 !important; transform: none !important; } }