/* * tokens.css — Unified Design Token System * Şiir Tutkusu Redesign * * Usage: add data-theme="ink" or data-theme="rosewater" to * Default: ink (Ink & Parchment) * * All components reference only CSS custom properties, never hex values. */ /* ───────────────────────────────────────────── GOOGLE FONTS ───────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Noto+Serif:ital,wght@0,400;0,600;1,400;1,600&family=Inter:wght@300;400;500;600&family=Work+Sans:wght@300;400;500;600&display=swap'); /* Material Symbols */ @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'); /* ───────────────────────────────────────────── BASE: shared structural tokens ───────────────────────────────────────────── */ :root { /* Typography roles */ --font-headline: 'Newsreader', Georgia, serif; --font-body: 'Noto Serif', Georgia, serif; --font-label: 'Inter', system-ui, sans-serif; /* Type scale - Restored to high-fidelity draft specs */ --text-display: 3.75rem; /* 60px */ --text-headline-l: 1.875rem; /* 30px */ --text-headline-m: 1.5rem; /* 24px */ --text-headline-s: 1.25rem; /* 20px */ --text-body-l: 1.125rem; /* 18px */ --text-body-m: 1rem; /* 16px */ --text-body-s: 0.875rem; /* 14px */ --text-label: 0.75rem; /* 12px */ --text-label-s: 0.6875rem; /* 11px */ --text-label-xs: 0.625rem; /* 10px */ /* Line heights */ --leading-display: 1.0; --leading-headline: 1.1; --leading-body: 1.6; --leading-label: 1.2; /* Letter spacing */ --tracking-label: 0.12em; --tracking-meta: 0.2em; --tracking-caps: 0.3em; /* Transitions */ --duration-fast: 150ms; --duration-base: 300ms; --duration-slow: 500ms; --duration-slower: 700ms; --ease-default: cubic-bezier(0.2, 0, 0, 1); /* Z-index scale */ --z-base: 0; --z-raised: 10; --z-header: 50; --z-overlay: 100; --z-modal: 200; /* Layout & Spacing */ --reading-max-width: 680px; --content-max-width: 1536px; --header-height: 72px; --bottom-nav-height: 80px; --section-spacing-v: 4rem; /* 64px */ --section-spacing-v-s: 3rem; /* 48px */ --container-gutter: 3rem; /* 48px */ --bento-gap: 1.5rem; /* 24px */ --card-padding: 2.5rem; /* 40px */ } /* ───────────────────────────────────────────── THEME A: Ink & Parchment (default) ───────────────────────────────────────────── */ :root, [data-theme="ink"] { /* Surface scale */ --color-background: #fff9ed; --color-surface: #fff9ed; --color-surface-bright: #fff9ed; --color-surface-container-lowest: #ffffff; --color-surface-container-low: #fdf3d4; --color-surface-container: #f7eecf; --color-surface-container-high: #f2e8c9; --color-surface-container-highest: #ece2c4; --color-surface-dim: #e3dabc; --color-surface-variant: #ece2c4; /* Content on surfaces */ --color-on-surface: #201c09; --color-on-background: #201c09; --color-on-surface-variant: #544341; /* Primary — near-black with red accent */ --color-primary: #290003; --color-primary-container: #52000b; --color-on-primary: #ffffff; --color-on-primary-container: #ffdad6; --color-surface-tint: #bb152c; /* accent red */ /* Secondary — forest green */ --color-secondary: #4d6453; --color-secondary-container: #cde6d1; --color-on-secondary: #ffffff; --color-on-secondary-container: #1c3322; /* Tertiary */ --color-tertiary-container: #4a0e0e; --color-on-tertiary-container: #ffdad6; /* Inverse */ --color-inverse-surface: #35301c; --color-inverse-on-surface: #faf0d2; --color-inverse-primary: #ffb3aa; /* Borders */ --color-outline: #877270; --color-outline-variant: #dac1bf; /* Error */ --color-error: #ba1a1a; --color-error-container: #ffdad6; /* Typography */ --font-body: 'Noto Serif', Georgia, serif; --font-label: 'Inter', system-ui, sans-serif; --icon-weight: 400; /* Border radius — architectural (sharp) */ --radius-none: 0px; --radius-sm: 0px; --radius-base: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-full: 9999px; /* Bento gap */ --bento-gap: 1.5rem; /* gap-6 */ --bento-gap-mobile: 1.5rem; /* Grain */ --grain-opacity: 0; /* Footer */ --color-footer-bg: #201c09; --color-footer-text: #fff9ed; --color-footer-muted: rgba(255, 249, 237, 0.5); --color-footer-accent: #bb152c; } /* ───────────────────────────────────────────── THEME B: Rosewater & Vellum ───────────────────────────────────────────── */ [data-theme="rosewater"] { /* Surface scale */ --color-background: #fff8f7; --color-surface: #fff8f7; --color-surface-bright: #fff8f7; --color-surface-container-lowest: #ffffff; --color-surface-container-low: #fcf1f1; --color-surface-container: #f6ebeb; --color-surface-container-high: #f0e6e6; --color-surface-container-highest: #ebe0e0; --color-surface-dim: #e2d8d8; --color-surface-variant: #ebe0e0; /* Content on surfaces */ --color-on-surface: #1f1a1b; --color-on-background: #1f1a1b; --color-on-surface-variant: #554243; /* Primary — rose red */ --color-primary: #872d3b; --color-primary-container: #a64452; --color-on-primary: #ffffff; --color-on-primary-container: #ffdad7; --color-surface-tint: #872d3b; /* Secondary */ --color-secondary: #705959; --color-secondary-container: #f8d8d8; --color-on-secondary: #ffffff; --color-on-secondary-container: #2a1515; /* Tertiary */ --color-tertiary-container: #825b57; --color-on-tertiary-container: #ffdad7; /* Inverse */ --color-inverse-surface: #352f2f; --color-inverse-on-surface: #f9eeee; --color-inverse-primary: #ffb3b8; /* Borders */ --color-outline: #887273; --color-outline-variant: #dbc0c1; /* Error */ --color-error: #ba1a1a; --color-error-container: #ffdad6; /* Typography */ --font-body: 'Newsreader', Georgia, serif; --font-label: 'Work Sans', system-ui, sans-serif; --icon-weight: 300; /* Border radius — softly rounded */ --radius-none: 0px; --radius-sm: 0.125rem; --radius-base: 0.125rem; --radius-md: 0.25rem; --radius-lg: 0.25rem; --radius-xl: 0.5rem; --radius-full: 0.75rem; /* Bento gap */ --bento-gap: 2rem; /* gap-8 desktop */ --bento-gap-mobile: 1rem; /* gap-4 mobile */ /* Grain texture */ --grain-opacity: 0.04; /* Footer */ --color-footer-bg: #fcf1f1; --color-footer-text: #1f1a1b; --color-footer-muted: rgba(31, 26, 27, 0.5); --color-footer-accent: #872d3b; } html.dark, [data-theme="dark"] { /* Surface scale - slightly brightened for better contrast */ --color-background: #1e1518; --color-surface: #281e22; --color-surface-bright: #38282e; --color-surface-container-lowest: #140d10; --color-surface-container-low: #22171a; --color-surface-container: #2d2125; --color-surface-container-high: #36282d; --color-surface-container-highest: #423237; --color-surface-dim: #1a1215; --color-surface-variant: #402e33; /* Content on surfaces - whiter for better readability */ --color-on-surface: #fef5f7; --color-on-background: #fef5f7; --color-on-surface-variant: #dfcacc; /* Primary */ --color-primary: #f1b4bf; --color-primary-container: #f1b4bf; --color-on-primary: #181214; --color-on-primary-container: #181214; --color-surface-tint: #db8b9a; /* Secondary */ --color-secondary: #a08a8e; /* Tertiary */ --color-tertiary-container: #3d1a20; /* Borders */ --color-outline: #7a5f65; --color-outline-variant: #463238; /* Footer */ --color-footer-bg: #0d080a; --color-footer-text: #fff9ed; --color-footer-muted: rgba(255, 249, 237, 0.4); --color-footer-accent: #db8b9a; } /* ───────────────────────────────────────────── GLOBAL BASE STYLES ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background-color: var(--color-background); color: var(--color-on-background); font-family: var(--font-body); font-size: var(--text-body-m); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Grain overlay (Rosewater theme only) */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-overlay); opacity: var(--grain-opacity, 0); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); background-size: 256px 256px; mix-blend-mode: multiply; } /* ───────────────────────────────────────────── UTILITY CLASSES (theme-aware) ───────────────────────────────────────────── */ /* Typography utilities */ .font-headline { font-family: var(--font-headline); } .font-body { font-family: var(--font-body); } .font-label { font-family: var(--font-label); } .text-display { font-size: var(--text-display); line-height: var(--leading-display); } .text-headline-l { font-size: var(--text-headline-l); line-height: var(--leading-headline); } .text-headline-m { font-size: var(--text-headline-m); line-height: var(--leading-headline); } .text-headline-s { font-size: var(--text-headline-s); line-height: var(--leading-headline); } .text-body-l { font-size: var(--text-body-l); line-height: var(--leading-body); } .text-body-m { font-size: var(--text-body-m); line-height: var(--leading-body); } .text-label { font-size: var(--text-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-family: var(--font-label); } .text-label-s { font-size: var(--text-label-s); line-height: var(--leading-label); letter-spacing: var(--tracking-meta); text-transform: uppercase; font-family: var(--font-label); } .text-meta { font-size: var(--text-label-s); line-height: var(--leading-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-family: var(--font-label); } /* Surface utilities */ .bg-surface { background-color: var(--color-surface); } .bg-surface-container-lowest { background-color: var(--color-surface-container-lowest); } .bg-surface-container-low { background-color: var(--color-surface-container-low); } .bg-surface-container { background-color: var(--color-surface-container); } .bg-surface-container-high { background-color: var(--color-surface-container-high); } .bg-surface-container-highest { background-color: var(--color-surface-container-highest); } .bg-surface-dim { background-color: var(--color-surface-dim); } .bg-surface-variant { background-color: var(--color-surface-variant); } .bg-primary { background-color: var(--color-primary); } .bg-primary-container { background-color: var(--color-primary-container); } .bg-secondary-container { background-color: var(--color-secondary-container); } .bg-tertiary-container { background-color: var(--color-tertiary-container); } .bg-inverse-surface { background-color: var(--color-inverse-surface); } /* Text color utilities */ .text-on-surface { color: var(--color-on-surface); } .text-on-surface-variant { color: var(--color-on-surface-variant); } .text-on-primary { color: var(--color-on-primary); } .text-on-primary-container { color: var(--color-on-primary-container); } .text-on-secondary-container { color: var(--color-on-secondary-container); } .text-on-tertiary-container { color: var(--color-on-tertiary-container); } .text-on-inverse-surface { color: var(--color-inverse-on-surface); } .text-primary { color: var(--color-primary); } .text-tint { color: var(--color-surface-tint); } .text-outline { color: var(--color-outline); } .text-outline-variant { color: var(--color-outline-variant); } /* Border utilities */ .border-outline { border-color: var(--color-outline); } .border-outline-variant { border-color: var(--color-outline-variant); } /* Radius utilities */ .rounded-none { border-radius: var(--radius-none); } .rounded-sm { border-radius: var(--radius-sm); } .rounded { border-radius: var(--radius-base); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-full { border-radius: var(--radius-full); } /* Tonal ghost border (no drop shadows rule) */ .ghost-border { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-outline-variant) 15%, transparent); } /* Selection */ ::selection { background-color: var(--color-primary-container); color: var(--color-on-primary-container); } /* Material Symbols base */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-variation-settings: 'FILL' 0, 'wght' var(--icon-weight, 400), 'GRAD' 0, 'opsz' 24; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* ───────────────────────────────────────────── READING CANVAS ───────────────────────────────────────────── */ .reading-column { max-width: var(--reading-max-width); margin-inline: auto; padding-inline: 1.5rem; } .poem-stanza { margin-bottom: 3rem; /* space-y-12 */ } .poem-line { display: block; font-family: var(--font-body); font-size: var(--text-body-l); line-height: var(--leading-body); color: var(--color-on-surface); } /* Drop cap (Rosewater variant) */ [data-theme="rosewater"] .poem-stanza:first-child .poem-line:first-child::first-letter { float: left; font-family: var(--font-headline); font-size: 4em; line-height: 0.75; margin-right: 0.1em; margin-top: 0.1em; color: var(--color-primary); } /* ───────────────────────────────────────────── BENTO GRID ───────────────────────────────────────────── */ .bento-grid { display: grid; gap: var(--bento-gap-mobile); grid-template-columns: 1fr 1fr; } @media (min-width: 1024px) { .bento-grid { grid-template-columns: repeat(4, 1fr); gap: var(--bento-gap); } } .bento-cell { border-radius: var(--radius-base); overflow: hidden; transition: transform var(--duration-base) var(--ease-default); } .bento-cell:hover { transform: translateY(-2px); } /* ───────────────────────────────────────────── NAVIGATION ───────────────────────────────────────────── */ /* Top nav glass */ .nav-glass { background-color: color-mix(in srgb, var(--color-surface) 88%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [data-theme="rosewater"] .nav-glass { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Bottom nav (mobile) */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-nav-height); background-color: var(--color-surface-container-low); border-top: 1px solid var(--color-outline-variant); display: flex; align-items: center; justify-content: space-around; z-index: var(--z-header); border-radius: 0; } [data-theme="rosewater"] .bottom-nav { border-radius: var(--radius-xl) var(--radius-xl) 0 0; background-color: var(--color-surface-container); } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5rem 1rem; color: var(--color-on-surface-variant); text-decoration: none; transition: color var(--duration-base) var(--ease-default); cursor: pointer; background: none; border: none; font-family: var(--font-label); } .bottom-nav-item.active { color: var(--color-primary); border-top: 2px solid var(--color-surface-tint); } .bottom-nav-item span.material-symbols-outlined { font-size: 24px; } .bottom-nav-item .nav-label { font-size: var(--text-label-s); letter-spacing: var(--tracking-label); text-transform: uppercase; } /* ───────────────────────────────────────────── BUTTONS ───────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-family: var(--font-label); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; cursor: pointer; border: none; border-radius: var(--radius-base); transition: all var(--duration-base) var(--ease-default); } .btn-primary { background-color: var(--color-primary); color: var(--color-on-primary); } [data-theme="rosewater"] .btn-primary { background: linear-gradient(to right, var(--color-primary), var(--color-primary-container)); } .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--color-on-surface); border: 1px solid var(--color-outline-variant); } .btn-outline:hover { border-color: var(--color-outline); background-color: var(--color-surface-container-low); } /* FAB (Ink theme only — hidden in Rosewater) */ .fab { position: fixed; bottom: calc(var(--bottom-nav-height) + 1.5rem); right: 1.5rem; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-full); background-color: var(--color-primary); color: var(--color-on-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 30%, transparent); cursor: pointer; border: none; transition: transform var(--duration-base) var(--ease-default); z-index: var(--z-raised); } .fab:hover { transform: scale(1.05); } [data-theme="rosewater"] .fab { display: none; } /* ───────────────────────────────────────────── CHIPS / FILTER TAGS ───────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.75rem; border-radius: var(--radius-full); border: 1px solid var(--color-outline-variant); font-family: var(--font-label); font-size: var(--text-label-s); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-on-surface-variant); background: transparent; cursor: pointer; transition: all var(--duration-base) var(--ease-default); white-space: nowrap; } .chip:hover, .chip.active { background-color: var(--color-primary-container); color: var(--color-on-primary-container); border-color: var(--color-primary-container); } /* ───────────────────────────────────────────── IMAGE TREATMENT ───────────────────────────────────────────── */ .img-grayscale { filter: grayscale(100%); transition: filter var(--duration-slow) var(--ease-default); } .img-grayscale:hover, .img-grayscale-soft { filter: grayscale(20%); } .img-grayscale-soft:hover { filter: grayscale(0%); } /* ───────────────────────────────────────────── QUOTE INTERSTITIAL ───────────────────────────────────────────── */ .quote-section { padding-block: 6rem; text-align: center; max-width: 56rem; margin-inline: auto; } .quote-text { font-family: var(--font-headline); font-style: italic; font-size: var(--text-headline-m); line-height: var(--leading-headline); color: var(--color-on-surface); margin: 0 0 1.5rem; } .quote-attribution { font-family: var(--font-label); font-size: var(--text-label-s); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-on-surface-variant); } .quote-attribution::before { content: '— '; } /* ───────────────────────────────────────────── DARK INVERSE SECTION (shared CTA / footer) ───────────────────────────────────────────── */ .section-inverse { background-color: var(--color-inverse-surface); color: var(--color-inverse-on-surface); } .section-inverse .text-muted { color: color-mix(in srgb, var(--color-inverse-on-surface) 50%, transparent); } .section-inverse .text-accent { color: var(--color-surface-tint); } /* ───────────────────────────────────────────── RESPONSIVE CONTAINER ───────────────────────────────────────────── */ .container { width: 100%; max-width: var(--content-max-width); margin-inline: auto; padding-inline: 1.5rem; } @media (min-width: 1024px) { .container { padding-inline: var(--container-gutter); } } /* 12-col grid */ .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; } /* ───────────────────────────────────────────── READING CONTROLS BAR ───────────────────────────────────────────── */ .reading-controls { position: fixed; bottom: calc(var(--bottom-nav-height) + 1rem); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0; background-color: var(--color-surface-container-high); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-none); overflow: hidden; z-index: var(--z-raised); } [data-theme="rosewater"] .reading-controls { border-radius: var(--radius-full); gap: 0.25rem; padding: 0.25rem; } .reading-controls-btn { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background: none; border: none; color: var(--color-on-surface-variant); cursor: pointer; transition: all var(--duration-base) var(--ease-default); border-radius: var(--radius-none); } [data-theme="rosewater"] .reading-controls-btn { border-radius: var(--radius-full); } .reading-controls-btn:hover { color: var(--color-on-surface); background-color: var(--color-surface-container-highest); } /* ───────────────────────────────────────────── SEARCH INPUT ───────────────────────────────────────────── */ .search-input { width: 100%; background: none; border: none; border-bottom: 1px solid var(--color-outline-variant); outline: none; font-family: var(--font-headline); font-style: italic; font-size: var(--text-headline-s); color: var(--color-on-surface); padding: 0.75rem 0; transition: border-color var(--duration-base) var(--ease-default); } .search-input:focus { border-bottom-color: var(--color-outline); } .search-input::placeholder { color: var(--color-on-surface-variant); opacity: 0.6; }