/* ============================================================ theme.css — bensadece.com shared design tokens ("Warm Alabaster") ============================================================ Single source of truth for every color and font-stack variable used across kimlik.html, iki-gokyuzu.html, index.html, icindeki-harita/index.html, bensadece-v2.html. Link this instead of embedding a :root block — that was the actual duplication risk (same colors, hand-copied into 5 files, silently able to drift the way astronomy-engine.js did). Two variable-naming schemes exist in the wild across the project's history — kept BOTH here as aliases of the same values, rather than forcing every file to rename its CSS, so linking this file requires no changes beyond swapping the :root block for a tag: - "literal" names (--gold, --teal, --bg-soft) — kimlik.html, iki-gokyuzu.html, index.html - "semantic" names (--accent, --accent-ink, --border) — icindeki-harita.html, bensadece-v2.html; this scheme also carries --danger and --border-strong, which the literal scheme never had an equivalent for, so those are defined directly here, not aliased. --maxw is deliberately NOT set here — kimlik (640px), İki Gökyüzü (680px), and the landing page (760px) are legitimately different content widths, not an inconsistency to unify. Each file sets its own --maxw locally, after linking this file. ============================================================ */ :root{ /* ---- Base palette (the actual source of truth) ---- */ --bg:#FAF8F3; --bg-soft:#F3EFE5; --card:#FFFFFF; --card2:#F3EFE5; --line:#E6DFCE; --line-strong:#DAD0B6; --text:#2A2620; --muted:#726C61; --muted-dim:#8f8878; --gold:#8F6C2A; --gold-fill:#C9A15A; --teal:#2F6355; --teal-fill:#7FB0A0; /* Terracotta — the one semantic color the "literal" scheme never had a name for at all (used for friction/warning/danger states). */ --danger:#D97757; /* Text-safe terracotta (5.3:1 on white; raw --danger is 3.1:1 and fails AA for small text). Same fill/ink pairing as gold -> --gold and teal-fill -> --teal. */ --danger-ink:#B34B29; /* ---- Frame accents (the numbered cards 01-06 on index-v3.html) ---- Each frame sets a fill/ink pair: --fa (fill: left border, badge ring) and --fai (ink: badge number and text; must pass AA, so never a raw -fill colour). 01 gold self (İç Kimliğim) 02, 03 teal sky, one deliberate family (transit and chart readings, told apart by depth, not kind) 04 gold|teal split badge two people (Ortak Nokta) 05 terracotta friction / fit (Doğru Yön): --danger / --danger-ink 06 neutral, dashed future, not yet open The gold and teal fills have the same lightness (L* 68 and 68): they stay distinguishable for every colour-vision type (deltaE 37-49) but collapse in pure grayscale. So colour never carries meaning alone: every card also has its number and title. The 04 split is decorative for that reason, and its number uses dark ink (#1a1712) because white fails on both halves. */ /* Frame-badge markers ("updated" dot, Sun-change "!"): a blue-violet that none of the frame accents (gold, teal, terracotta) uses. White text on it is about 6.2:1. */ --shift:#4F5BA8; /* ---- "Semantic" naming scheme, aliased to the same base colors ---- --accent-ink / --accent2-ink are the darkened, text-safe versions — raw --gold-fill/--teal-fill fail WCAG AA (~2.4:1) as text on a light background, so headings/labels should use the -ink variants, same rule the original icindeki-harita.html/bensadece-v2.html comment already documented — preserved here, not just the colors. */ --accent:var(--gold-fill); --accent-ink:var(--gold); --accent2:var(--teal-fill); --accent2-ink:var(--teal); --border:var(--line); --border-strong:var(--line-strong); --radius:18px; /* ---- Fonts ---- --sans: the literal-scheme files apply this to the whole page. --font-heading: the semantic-scheme files apply Poppins to headings/buttons ONLY, with body text on system fonts — a real, deliberate difference between the two file generations, not a gap to close. Both stacks point at the same self-hosted-eventually Poppins-first list; only which elements USE which stays per-file. */ --sans: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } *{box-sizing:border-box;} /* ============================================================ SITE LOGO — single shared asset (logo.png, real PNG extracted from what was previously an inline base64 copy in bensadece-v2.html only) plus one CSS block here. Change the logo everywhere by replacing logo.png; change its size/position everywhere by editing here — no per-page duplication, matching the same discipline as the color tokens above. Placed top-right, absolutely positioned within whichever container the page opts it into (see .logo-anchor below) — NOT position:fixed, so it sits in the corner of each page's own top area and scrolls away with it, rather than floating over content as screens change underneath it (several of these apps swap entire screens via JS; a permanently floating logo would end up overlapping different things on different screens). ============================================================ */ .logo-anchor{position:relative;} .site-logo{ position:absolute; top:0; right:0; height:auto; display:block; pointer-events:none; /* decorative — never intercepts taps meant for the content under/around it */ } .site-logo--sm{width:34px;} /* dense screens: kimlik, İki Gökyüzü, İçindeki Harita — logo shouldn't compete with the task/content it sits above */ .site-logo--md{width:52px;} /* standard app intro screens: Doğum Anın */ .site-logo--lg{width:76px;} /* landing page hero — the one place the logo can afford to be the most prominent */ /* Which image goes in the (CSS can't choose it): logo-mark.png — the small mark, no outer ring — for --sm and --md, since the logo set says to use it under ~64px, where the primary's ring blurs; logo.png — the primary — for --lg and anything larger. Both are square. */ @media (max-width:420px){ .site-logo--md{width:42px;} .site-logo--lg{width:56px;} } /* ============================================================ RETURN BAR (return-bar.js): the standalone apps' way back to İç Kimliğim, top-left in the band the logo already occupies top-right. The app root (.app, also .logo-anchor) gets .has-return-bar. The band is reserved by .app.logo-anchor below (logo height + 6px: 48px, 58px above 420px wide), bar or no bar, so a title can never run under the bar or the logo. Nothing is added when the page has no valid ?return= (a direct visit): no bar, the same reserved space. ============================================================ */ .return-bar{ position:absolute; top:0; left:18px; right:68px; height:44px; z-index:2; display:flex; align-items:center; } .return-bar-btn{ background:none; border:none; padding:0; min-height:44px; text-align:left; cursor:pointer; font-family:var(--font-heading); font-size:.88rem; font-weight:600; color:var(--teal); } .return-bar-btn:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:4px;} @media (min-width:421px){ .return-bar{right:78px; height:52px;} } /* LOGO CLEARANCE: the standalone apps (.app.logo-anchor: Doğum Anın, İçindeki Harita) reserve the band the logo and the return bar share, ALWAYS, bar or no bar: logo height + 6px (42 + 6 = 48 on a phone, 52 + 6 = 58 above 420px). A title can therefore never run under the logo, however long it gets; before, only a visit with the bar reserved it and the direct-visit clearance depended on today's titles being short. The bar sits in this same band, so its presence changes nothing about the space (.has-return-bar is only a marker now). Both apps use the same band, although İçindeki Harita's logo is the smaller 34px. */ .app.logo-anchor{padding-top:48px;} @media (min-width:421px){ .app.logo-anchor{padding-top:58px;} } /* ============================================================ LOCATION TRAILS (.nav-trail): the rule for any "where am I" text that can get long (building > floor > sub-screen). It NEVER wraps to a second line. When too long it truncates from the FRONT with a leading "...", keeping the END: the most specific part, "where I am right now". Default text-overflow does the opposite (keeps the start). Markup: building > floor > screen The title carries the full text (touch users cannot hover; screen readers read the DOM anyway). How: the container is direction:rtl, so its inline-end (where text-overflow draws the ellipsis) is the LEFT edge; the text sits in so it still reads left to right and trailing punctuation stays at the end. Two traps, both tested: - rtl on the container alone drops/moves trailing punctuation ("14:30." lost its "."): keep the . - do NOT add unicode-bidi:plaintext to the container: Turkish text then resolves as left-to-right, which overrides the direction and puts the ellipsis back at the END, silently. Tested with Turkish diacritics, numbers, Latin capitals and trailing "." and ")" in Chromium ONLY; iOS Safari and Firefox are unverified: check both before the first real use. Not for static labels, brand names or action buttons (they may wrap; truncating the front of a brand name or a label's name would remove the part that identifies it). ============================================================ */ .nav-trail{ display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; direction:rtl; text-align:left; }