/* ============================================================ BASE.CSS — Design Tokens, Reset, Typography Mersin Su Kaçağı Tespiti — Premium Corporate Design System ============================================================ */ /* ---- Font faces (self-hosted, preloaded in ) ---- Split into latin / latin-ext subsets so the browser only downloads what a given page needs; latin-ext carries Turkish ş ğ ı İ etc. */ @font-face { font-family: "Manrope"; src: url("../fonts/Manrope-latin.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Manrope"; src: url("../fonts/Manrope-latin-ext.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-latin.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-latin-ext.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; } /* ---- Design tokens ---- */ :root { /* Color — named palette, derived from the real equipment in the field: signal orange = the Rothenberger/inspection-camera housings, depth teal = water & copper pipe, ink = precision/trust */ --c-ink: #101820; --c-ink-soft: #2A343D; --c-paper: #F7F7F5; --c-paper-raised: #FFFFFF; --c-mist: #EEF1F2; --c-line: #E1E5E7; --c-steel: #56636F; --c-steel-soft: #7C8790; --c-signal: #E15726; --c-signal-dark: #C4441A; --c-signal-tint: #FDECE4; --c-depth: #0B4F5C; --c-depth-dark: #073A44; --c-depth-tint: #E4EEEF; --c-success: #1F8A5C; /* Elevation */ --shadow-sm: 0 1px 2px rgba(16,24,32,0.06), 0 1px 1px rgba(16,24,32,0.04); --shadow-md: 0 8px 24px rgba(16,24,32,0.08), 0 2px 8px rgba(16,24,32,0.05); --shadow-lg: 0 24px 48px rgba(16,24,32,0.14), 0 8px 16px rgba(16,24,32,0.06); --shadow-glow: 0 0 0 1px rgba(225,87,38,0.12), 0 16px 40px rgba(225,87,38,0.18); /* Radius */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-full: 999px; /* 8pt spacing scale */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px; /* Type */ --f-display: "Manrope", "Segoe UI", sans-serif; --f-body: "Inter", "Segoe UI", sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, monospace; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1.0625rem; --fs-md: 1.25rem; --fs-lg: 1.75rem; --fs-xl: 2.5rem; --fs-2xl: 3.25rem; --fs-3xl: 4.25rem; --lh-tight: 1.1; --lh-snug: 1.35; --lh-normal: 1.6; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 620ms; --container: 1240px; --header-h: 84px; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { font-family: var(--f-body); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--c-ink); background: var(--c-paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg, video { max-width: 100%; display: block; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } ul, ol { list-style: none; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--c-ink); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); } p { color: var(--c-steel); } /* ---- Accessible focus ring ---- */ :focus-visible { outline: 2.5px solid var(--c-signal); outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } /* ---- Selection ---- */ ::selection { background: var(--c-signal); color: #fff; } /* Skip link for keyboard/screen reader users */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--c-ink); color: #fff; padding: 12px 20px; z-index: 999; border-radius: 0 0 var(--r-sm) 0; } .skip-link:focus { left: 0; }