/* Theme Name: e.isik.one — Instrument Theme URI: https://e.isik.one Description: Direction C "Instrument" child theme for Hello Elementor. Token system per instructions/05-design-direction.md. Sans display / serif body inversion, deep instrument green as the sole interaction colour, left rail as live status panel. Author: Erkan Isik Author URI: https://e.isik.one Template: hello-elementor Version: 0.1.0 License: GPL-2.0-or-later Text Domain: e-isik-child */ /* ========================================================================== 1. Tokens Single source of truth. Nothing in this theme uses a raw value. ========================================================================== */ /* --- Palette sources ------------------------------------------------------- Values live here once. The application blocks below reference them, so a colour is never written twice and the two themes cannot drift apart. Measured contrast (see tools/contrast.py): LIGHT on #F8F7F4 ink 16.58 AAA · muted 5.23 AA · signal 6.82 AA · alert 6.66 AA DARK on #000000 ink 15.05 AAA · muted 6.58 AA · signal 8.13 AAA · alert 5.61 AA (soft on #171A1C ink 12.54 AAA · muted 5.76 AA · signal 7.21 AAA · alert 4.97 AA) --muted is the tightest pair in both themes. It never drops below 14px and never carries information available nowhere else. --rule is non-text only in both themes, never meaning-bearing. --alert is reserved. Once on the whole site, or never. -------------------------------------------------------------------------- */ :root { /* Light — "Bone": barely-warm off-white, chosen 2026-07-27. Reads as good paper stock rather than cream — warmth you feel but do not name. Replaces #FBE8CE, which was too yellow. Measured on #F8F7F4: ink 16.58 AAA · muted 5.23 AA · signal 6.82 AA · alert 6.66 AA */ --l-paper: #F8F7F4; --l-ink: #17181A; --l-muted: #65686C; --l-rule: #E2E0DA; --l-signal: #1B6151; --l-alert: #9C3520; /* The welcome section runs on pure white so the greeting reads cleanly over the fluid animation — Bone is warm enough to mute it. Measured on #FFF: ink 17.77 AAA · muted 5.60 AA · signal 7.30 AAA, so every pair improves rather than degrades. */ --l-greet-bg: #FFFFFF; /* Dark — OLED black. On an OLED panel a true #000 pixel is switched off: deeper contrast and lower power draw than any near-black. Measured on #000: ink 15.05 AAA · muted 6.58 AA · signal 8.13 AAA · alert 5.61 AA. Ink is deliberately not pure white — #FFF on #000 halates badly at reading sizes, and the extra ratio buys nothing above AAA. */ --d-paper: #000000; --d-ink: #D2D6D4; --d-muted: #8B9194; --d-rule: #2E3336; --d-signal: #4FB295; --d-alert: #CF6455; /* Panels must not disappear. Derived from the ground by color-mix, surface would land at 1.12:1 against pure black and the floating rail and dock would read as holes rather than objects. So it is explicit here. */ --d-surface: #101314; /* Dark keeps the true black — an OLED panel switching pixels off is the whole point, and a lifted welcome panel would undo it. */ --d-greet-bg: #000000; /* A shade below the ground so the rail and dock read as raised objects rather than as the page itself. */ --l-surface: #EFEDE7; } /* Softer dark, the previous default. Set data-palette="soft" on if OLED black proves too harsh on a non-OLED screen. */ :root[data-palette="soft"] { --d-paper: #171A1C; --d-ink: #D8DBD9; --d-muted: #8F9598; --d-rule: #2C3134; --d-signal: #57B79C; --d-alert: #D4695A; --d-surface: #1E2224; } /* --- Application ---------------------------------------------------------- */ :root { color-scheme: light; --paper: var(--l-paper); --ink: var(--l-ink); --muted: var(--l-muted); --rule: var(--l-rule); --signal: var(--l-signal); --alert: var(--l-alert); --surface: var(--l-surface); --greet-bg: var(--l-greet-bg); } /* System preference. Yields to an explicit choice in either direction. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: var(--d-paper); --ink: var(--d-ink); --muted: var(--d-muted); --rule: var(--d-rule); --signal: var(--d-signal); --alert: var(--d-alert); --surface: var(--d-surface); --greet-bg: var(--d-greet-bg); } } /* Explicit choice always wins. */ :root[data-theme="dark"] { color-scheme: dark; --paper: var(--d-paper); --ink: var(--d-ink); --muted: var(--d-muted); --rule: var(--d-rule); --signal: var(--d-signal); --alert: var(--d-alert); --surface: var(--d-surface); --greet-bg: var(--d-greet-bg); } :root { /* Type families */ --font-display: "IBM Plex Sans Condensed", ui-sans-serif, system-ui, sans-serif; --font-body: "Source Serif 4", Georgia, "Times New Roman", serif; --font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale — 1.25 mobile / 1.333 desktop */ --display-1: clamp(2.25rem, 5vw, 3.75rem); --display-2: clamp(1.5rem, 3vw, 2rem); --display-3: 1.25rem; --body: 1.0625rem; --body-sm: 0.9375rem; --mono-label: 0.75rem; --mono-data: 0.875rem; --lh-display: 1.08; --lh-body: 1.65; --lh-data: 1.5; --track-display: -0.02em; --track-label: 0.08em; /* Measure — the reading column never exceeds this */ --measure: 68ch; /* Space — 8px base, one value per step. No arbitrary margins. */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; /* Section rhythm */ --section-gap: var(--s-9); /* Rail — collapsed is the resting state; expanded overlays on hover/focus. */ --rail-collapsed: 4rem; --rail-expanded: 14rem; --rail-bar-h: 2.75rem; /* mobile collapsed bar height */ /* Fluid page gutter. Full-bleed layout, so the gutter does the breathing. */ --gutter: clamp(1rem, 4vw, 4rem); /* Where text starts. Containers run edge to edge so backgrounds and transitions can span the viewport; only the content inside them is inset, clearing the floating rail on the left. */ --content-inset: calc(var(--rail-collapsed) + var(--gutter)); /* Floating surfaces — rail and control dock. Direction C's original "no cards, no shadows, no rounded panels" rule was withdrawn by request on 2026-07-26. Surfaces are now deliberate objects. */ --radius: 14px; --shadow-rb: 6px 6px 0 -1px color-mix(in srgb, var(--ink) 6%, transparent), 14px 18px 34px -12px color-mix(in srgb, var(--ink) 34%, transparent); /* Paper plane, inline SVG as a data URI so it needs no extra request and can be masked to currentColor. */ --icon-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15 1 1 7.2l5.1 1.9L14 3.1 8.6 10v4.3l2.4-2.9L14 12.6z'/%3E%3C/svg%3E"); /* Motion — every transition references this, so reduced-motion kills all of them at once */ --motion-fast: 120ms; --motion-base: 240ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); } @media (max-width: 47.99em) { :root { --section-gap: var(--s-7); } } /* ========================================================================== 2. Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); transition: background-color var(--motion-base) var(--ease), color var(--motion-base) var(--ease); font-family: var(--font-body); font-size: var(--body); line-height: var(--lh-body); font-synthesis-weight: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ========================================================================== 3. Typography Sans display over serif body. This inversion is the deliberate choice — it reads as documentation rather than as a CV. ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-display); letter-spacing: var(--track-display); color: var(--ink); margin: 0 0 var(--s-4); text-wrap: balance; } h1 { font-size: var(--display-1); } h2 { font-size: var(--display-2); } h3 { font-size: var(--display-3); } p, li { max-width: var(--measure); } p { margin: 0 0 var(--s-4); } /* Long-form prose — blog posts and the Background narrative */ .prose p, .prose li { text-wrap: pretty; } .prose { hyphens: auto; } /* Mono label — rail entries, section designators, spec keys */ .label { font-family: var(--font-data); font-size: var(--mono-label); line-height: var(--lh-data); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); } /* Mono data — dates, spec values, code */ .data, code, kbd, samp, pre { font-family: var(--font-data); font-size: var(--mono-data); line-height: var(--lh-data); font-variant-numeric: tabular-nums; } pre { overflow-x: auto; padding: var(--s-4); border: 1px solid var(--rule); background: transparent; max-width: 100%; } /* ========================================================================== 4. Links and interaction --signal marks interaction and current state. It never decorates. Green anywhere that is neither interactive nor a state readout is a bug. ========================================================================== */ a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 2px; } /* Focus ring — never removed. Visible on both light ground and inverted chips. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 1px; } /* Skip link — first tab stop */ .skip-link { position: absolute; left: var(--s-4); top: var(--s-4); z-index: 999; padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--paper); font-family: var(--font-data); font-size: var(--mono-data); transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); } /* ========================================================================== 5. Rules and structure One continuous document. No cards, no shadows, no rounded panels. ========================================================================== */ hr, .rule { border: 0; border-top: 1px solid var(--rule); margin: var(--section-gap) 0; } img, svg, video { max-width: 100%; height: auto; } /* Wide content must scroll inside its own container, never the page body */ .scroll-x { overflow-x: auto; max-width: 100%; } /* ========================================================================== 6. Motion The rail marker is the only thing that moves. Reduced-motion kills it all. ========================================================================== */ @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; } } /* ========================================================================== 7. Elementor suppression Elementor's instinct is to wrap everything in a padded container with a background. Direction C does not use containers as visual objects. ========================================================================== */ .elementor-widget-container > :last-child { margin-bottom: 0; } .e-con, .e-con-inner { --border-radius: 0; }