/* ========================================================================= Modern Teknoloji — base.css Design tokens + reset + base typography. Editorial system inspired by warm-paper magazine layouts, reworked with an original, more playful tech-editorial voice (§2–3, §79). ========================================================================= */ :root { /* ---- Color roles (overridden live by Theme Settings → Colors, see inc/enqueue.php:mt_dynamic_css()) ---- */ --mt-color-body-bg: #fbfbf7; /* Cream Paper */ --mt-color-header-bg: #fbfbf7; --mt-color-footer-bg: #1a202c; /* Charcoal Slate */ --mt-color-text: #000000; /* Ink Black */ --mt-color-text-muted: #767676; /* Stone Gray */ --mt-color-accent: #2ea3f2; /* Electric Blue */ --mt-color-link: #2ea3f2; --mt-color-button-bg: #000000; --mt-color-button-text: #fbfbf7; --mt-color-border: #e4ded0; --mt-color-card-bg: #fbfbf7; --mt-color-ticker-bg: #000000; --mt-color-ticker-text: #fbfbf7; --mt-color-badge-bg: #000000; --mt-color-badge-text: #fbfbf7; --mt-color-ad-bg: #efe8dc; /* Parchment */ /* ---- Fixed brand palette (§4) — used for accent-only decoration ---- */ --mt-parchment: #efe8dc; --mt-charcoal: #1a202c; --mt-gunmetal: #1f2937; --mt-iron-gray: #4b5563; --mt-deep-violet: #4c40e0; --mt-indigo-bloom: #454ad3; --mt-marigold: #ffd92a; --mt-sage: #91dea8; --mt-sky-mist: #90d3e3; /* ---- Typography (§7) ---- */ --mt-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mt-font-script: "Caveat", "Qwitcher Grypen", cursive; --mt-h1: clamp(36px, 5vw, 76px); --mt-h2: clamp(28px, 4vw, 52px); --mt-h3: clamp(22px, 3vw, 36px); --mt-h4: clamp(20px, 2vw, 28px); --mt-body: 17px; --mt-body-lh: 1.65; /* ---- Spacing, 8px base (§6) ---- */ --mt-space-1: 4px; --mt-space-2: 8px; --mt-space-3: 12px; --mt-space-4: 16px; --mt-space-5: 24px; --mt-space-6: 32px; --mt-space-7: 40px; --mt-space-8: 48px; --mt-space-9: 64px; --mt-space-10: 80px; --mt-space-11: 96px; --mt-space-12: 120px; /* ---- Radius (§3) ---- */ --mt-radius-card: 0px; --mt-radius-control: 6px; --mt-radius-pill: 999px; /* ---- Layout ---- */ --mt-container: 1200px; --mt-article-width: 760px; /* ---- Motion (§80) ---- */ --mt-duration: 180ms; --mt-ease: cubic-bezier(0.2, 0.6, 0.3, 1); } /* Dark mode variant — applied to (§54) */ html[data-mt-theme="dark"] { --mt-color-body-bg: #101418; --mt-color-header-bg: #12161b; --mt-color-footer-bg: #05070a; --mt-color-text: #f4f2ea; --mt-color-text-muted: #9aa0a6; --mt-color-border: #2a2f36; --mt-color-card-bg: #171b20; --mt-color-ad-bg: #1b2027; } /* --------------------------------------------------------------------- Reset --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html, body { overflow-x: hidden; /* backstop only — real fixes target the source (§122) */ } body { margin: 0; background: var(--mt-color-body-bg); color: var(--mt-color-text); font-family: var(--mt-font-sans); font-size: var(--mt-body); line-height: var(--mt-body-lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { max-width: 100%; display: block; } ul, ol { margin: 0; padding: 0; } figure { margin: 0; } a { color: var(--mt-color-link); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } table { border-collapse: collapse; width: 100%; } /* --------------------------------------------------------------------- Typography --------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--mt-space-4); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: break-word; word-break: break-word; } h1 { font-size: var(--mt-h1); line-height: 1.02; } h2 { font-size: var(--mt-h2); line-height: 1.08; } h3 { font-size: var(--mt-h3); } h4 { font-size: var(--mt-h4); } p { margin: 0 0 var(--mt-space-4); overflow-wrap: break-word; word-break: break-word; } .mt-script-accent { font-family: var(--mt-font-script); font-weight: 500; color: var(--mt-deep-violet); font-size: clamp(32px, 4vw, 48px); line-height: 1; display: inline-block; } /* --------------------------------------------------------------------- Accessibility (§53) --------------------------------------------------------------------- */ .mt-skip-link { position: absolute; left: -9999px; top: auto; z-index: 10000; background: var(--mt-color-text); color: var(--mt-color-body-bg); padding: var(--mt-space-3) var(--mt-space-5); border-radius: var(--mt-radius-control); } .mt-skip-link:focus { left: var(--mt-space-4); top: var(--mt-space-4); } :focus-visible { outline: 2px solid var(--mt-color-accent); outline-offset: 2px; } .mt-screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }