/* =========================================================================== site.css — shared base for sarakay.me Phase 1 of the subpage glowup. Extracted verbatim from index.html's inline styles so every page speaks the same visual language and the CSS stops drifting page-to-page. Page-specific layout stays inline on each page. Sections: 1. Tokens (no-JS fallback + 4 mode/theme combos) 2. Reset + base document 3. Backgrounds (pro + gremlin body glow) 4. Focus / skip-link / reduced motion 5. Typography 6. Container 7. Nav (top-nav, links, keycaps) 8. View controls / toggles / customize panel 9. Sparkle 10. Footer =========================================================================== */ /* --- 1. Tokens ------------------------------------------------------------- No-JS fallback palette (pro light / system dark). The pre-paint script sets data-mode/data-theme before render; these keep an un-scripted page readable. */ :root { --bg: #FAFAF8; --text: #1A1A18; --text-2: #6B6B67; --accent: #FF1493; --border: rgba(0, 0, 0, 0.08); --card-bg: #FFFFFF; --nav-h: 58px; } @media (prefers-color-scheme: dark) { :root { --bg: #111110; --text: #F0EEE8; --text-2: #888880; --border: rgba(255, 255, 255, 0.08); --card-bg: #1C1C1A; } } :root[data-mode="pro"][data-theme="light"] { --bg: #FAFAF8; --bg-2: #F2F0EC; --text: #1A1A18; --text-2: #6B6B67; --accent: #FF1493; --accent-glow: rgba(255, 20, 147, 0.2); --border: rgba(0, 0, 0, 0.08); --card-bg: #FFFFFF; --card-shadow: rgba(0, 0, 0, 0.04); --card-hover-shadow: rgba(255, 20, 147, 0.15); } :root[data-mode="pro"][data-theme="dark"] { --bg: #111110; --bg-2: #1C1C1A; --text: #F0EEE8; --text-2: #888880; --accent: #FF1493; --accent-glow: rgba(255, 20, 147, 0.25); --border: rgba(255, 255, 255, 0.08); --card-bg: #1C1C1A; --card-shadow: rgba(0, 0, 0, 0.3); --card-hover-shadow: rgba(255, 20, 147, 0.2); } :root[data-mode="gremlin"][data-theme="light"] { --bg: #F6F1F6; --mat: linear-gradient(152deg, #FFDDEB 0%, #ECD6F6 48%, #CFE7FB 100%); --mat-edge: rgba(255, 255, 255, 0.55); --keyshadow: rgba(138, 111, 174, 0.30); --bg-2: rgba(255, 255, 255, 0.35); --text: #4A3560; --text-2: #5E4278; --accent: #F4A7C3; --pink: #F4A7C3; --blue: #89C4E1; --lavender: #C4A8E0; --mint: #A8E0C4; --peach: #F9C8A0; --card-bg: #FFFFFF; --outline: #FFFFFF; --stroke: #C9A8E0; --border: rgba(138, 111, 174, 0.2); --card-shadow: rgba(100, 80, 150, 0.15); } :root[data-mode="gremlin"][data-theme="dark"] { --bg: #141019; --mat: linear-gradient(152deg, #3a2342 0%, #272250 48%, #142a44 100%); --mat-edge: rgba(255, 255, 255, 0.06); --keyshadow: rgba(0, 0, 0, 0.55); --bg-2: rgba(255, 255, 255, 0.08); --text: #F0D6FF; --text-2: #C4A8E0; --accent: #F4A7C3; --pink: #F4A7C3; --blue: #89C4E1; --lavender: #C4A8E0; --mint: #A8E0C4; --peach: #F9C8A0; --card-bg: #221B2E; --outline: rgba(255, 255, 255, 0.2); --stroke: #8B6FAE; --border: rgba(196, 168, 224, 0.2); --card-shadow: rgba(100, 80, 150, 0.3); } /* --- 2. Reset + base document --------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); } body { background: var(--bg); color: var(--text); transition: background-color 0.35s ease, color 0.35s ease; overflow-x: hidden; line-height: 1.6; } [data-mode="pro"] body { font-family: 'DM Sans', sans-serif; } [data-mode="gremlin"] body { font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 15px; background-attachment: fixed; } /* --- 3. Backgrounds -------------------------------------------------------- Pro: barely-there pink radial wash. Gremlin: calm static corner glow (the drifting rainbow was retired in the v2 deskscape pass). */ [data-mode="pro"][data-theme="dark"] body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: radial-gradient(circle at 20% 50%, rgba(255, 20, 147, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 20, 147, 0.02) 0%, transparent 50%); pointer-events: none; } [data-mode="pro"][data-theme="light"] body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: radial-gradient(circle at 20% 50%, rgba(255, 20, 147, 0.02) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 20, 147, 0.015) 0%, transparent 50%); pointer-events: none; } [data-mode="gremlin"][data-theme="dark"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(1100px circle at 88% -10%, rgba(180,140,224,0.18), transparent 60%), radial-gradient(1000px circle at 5% 108%, rgba(80,120,180,0.14), transparent 58%); pointer-events: none; } [data-mode="gremlin"][data-theme="light"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(1100px circle at 88% -10%, rgba(244,167,195,0.16), transparent 60%), radial-gradient(1000px circle at 5% 108%, rgba(137,196,225,0.12), transparent 58%); pointer-events: none; } /* De-glass: gremlin uses solid surfaces, no decorative blur. */ [data-mode="gremlin"] *, [data-mode="gremlin"] *::before, [data-mode="gremlin"] *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* --- 4. Focus / skip-link / reduced motion -------------------------------- */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--accent); color: white; padding: 8px 16px; text-decoration: none; z-index: 10000; font-weight: 600; border-radius: 0 0 4px 0; } .skip-link:focus { top: 0; } *:focus { outline: 3px solid var(--accent); outline-offset: 2px; } *:focus:not(:focus-visible) { outline: none; } *:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } [data-mode="pro"] *:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 6px var(--accent-glow); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --- 5. Typography --------------------------------------------------------- Base headings/prose. Pages may override sizes inline; these are the shared defaults the article-style pages (privacy, accessibility) build on. */ h1 { font-size: 2.5rem; line-height: 1.2; color: var(--accent); } [data-mode="gremlin"] h1 { font-family: 'Bubblegum Sans', cursive; font-weight: 400; } a { color: var(--accent); text-decoration: none; } /* Gremlin light: the pastel accent fails contrast on the pale surround, so accent-colored text steps up to a deeper pink (5.4:1). */ [data-mode="gremlin"][data-theme="light"] h1, [data-mode="gremlin"][data-theme="light"] a { color: #9C2D63; } [data-mode="gremlin"][data-theme="light"] *:focus-visible { outline-color: #9C2D63; } /* --- 6. Container ---------------------------------------------------------- */ .container { max-width: 1200px; margin: 0 auto; padding: 80px 40px 0; } /* --- 7. Nav ---------------------------------------------------------------- */ .top-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 999; display: flex; justify-content: space-between; align-items: center; background: var(--card-bg); padding: 16px 32px; border-bottom: 1px solid var(--border); } [data-mode="gremlin"] .top-nav { border-bottom: 2px solid var(--stroke); } .nav-links { display: flex; gap: 32px; align-items: center; } .nav-link { color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 6px; transition: background-color 0.2s ease, color 0.2s ease; font-family: 'DM Mono', monospace; text-transform: lowercase; position: relative; } [data-mode="pro"] .nav-link::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--accent); transition: width 0.3s ease; } [data-mode="pro"] .nav-link:hover::after { width: calc(100% - 24px); } .nav-link:hover { color: var(--accent); background: transparent; } .nav-link.active { color: var(--accent); font-weight: 600; } [data-mode="pro"] .nav-link.active::after { width: calc(100% - 24px); } /* Gremlin nav links become pressable keycaps. */ [data-mode="gremlin"] .nav-links { gap: 14px; flex-wrap: wrap; } [data-mode="gremlin"] .nav-link { font-family: 'DM Mono', monospace; font-size: 12.5px; background: var(--card-bg); border: 1px solid var(--border); box-shadow: 0 4px 0 var(--keyshadow); border-radius: 10px; padding: 7px 10px 9px; transition: transform 0.08s ease, box-shadow 0.08s ease; } [data-mode="gremlin"] .nav-link:hover { transform: translateY(-2px); background: var(--card-bg); color: var(--accent); } [data-mode="gremlin"] .nav-link.active { transform: translateY(3px); box-shadow: 0 1px 0 var(--keyshadow); color: var(--accent); } /* Toolshed nav sparkle: first-visit highlight, calms after seen. NOTE: this is mirrored inline in components/nav.html so it reaches the pages that don't load site.css yet (pre-GLOWUP-Phase-1). Keep the two in sync until every page migrates, then this becomes the single source. */ .nav-link-shelf { position: relative; } .shelf-spark { font-size: 0.7em; margin-left: 3px; vertical-align: super; color: var(--accent); display: inline-block; } [data-mode="pro"] .nav-link-shelf { font-weight: 600; } [data-mode="gremlin"] .shelf-spark.spark-live { animation: sparkPop 0.35s ease-out 0.6s 1 backwards; } @keyframes sparkPop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .nav-link-shelf:hover .shelf-spark { transform: scale(1.25); transition: transform 0.2s ease; } /* Seen: spark drops to the nav's muted tone, no extra opacity (keeps AA). */ .nav-link-shelf.shelf-seen .shelf-spark { color: var(--text-2); } [data-mode="pro"] .nav-link-shelf.shelf-seen { font-weight: 500; } @media (prefers-reduced-motion: reduce) { [data-mode="gremlin"] .shelf-spark.spark-live { animation: none; } .nav-link-shelf:hover .shelf-spark { transform: none; } } /* --- 8. View controls / toggles / customize panel ------------------------- */ .view-controls { position: relative; display: flex; gap: 8px; align-items: center; } .view-controls::before { content: "press to change"; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-2); opacity: .62; align-self: center; margin-right: 4px; white-space: nowrap; } /* Direct keycap toggles for mode + theme (the current default control). */ .view-key { font-family: 'DM Mono', monospace; font-size: 12.5px; color: var(--text); background: var(--card-bg); border: 1px solid var(--border); box-shadow: 0 4px 0 var(--keyshadow, rgba(0,0,0,0.14)); border-radius: 10px; padding: 7px 12px 9px; cursor: pointer; white-space: nowrap; transition: transform 0.08s ease, box-shadow 0.08s ease; } .view-key:hover { transform: translateY(-2px); } .view-key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--keyshadow, rgba(0,0,0,0.14)); } [data-mode="gremlin"] #modeKey { color: #fff; background: linear-gradient(135deg, var(--pink), var(--lavender)); border: none; box-shadow: 0 4px 0 #9a78c2; } /* Keycap labels swap text on toggle ('pro' vs 'gremlin ✦', '☀ light' vs '☾ dark'). Reserve the widest label's footprint so the right cluster doesn't change width and shove the whole bar on every press. */ .view-key { text-align: center; } #modeKey { min-width: 96px; } #themeKey { min-width: 82px; } /* Mode/theme swap: snap the nav in one frame. Nav geometry (gap, padding, font-size, wrap) can't be transitioned, so easing colors and transforms while geometry snaps makes the bar look broken until it settles. During the 350ms swap window, suppress transitions inside the nav entirely. */ .mode-transitioning .top-nav, .mode-transitioning .top-nav * { transition: none !important; } /* Legacy dropdown "customize" panel + its buttons (kept for pages that still use the .view-toggle / .view-dropdown pattern). */ .view-toggle { background: transparent; color: var(--text-2); padding: 8px 16px; cursor: pointer; font-size: 13px; font-family: 'DM Mono', monospace; display: flex; align-items: center; gap: 8px; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; border-radius: 20px; position: relative; } [data-mode="pro"] .view-toggle { border: 1.5px solid rgba(255, 20, 147, 0.4); } [data-mode="pro"] .view-toggle::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 2px; } [data-mode="pro"] .view-toggle .view-toggle-text::after { content: ' ⇄'; } [data-mode="pro"] .view-toggle:hover { background: rgba(255, 20, 147, 0.08); color: var(--text); } [data-mode="gremlin"] .view-toggle { font-family: 'Bubblegum Sans', cursive; font-size: 14px; border: 1.5px solid var(--stroke); } [data-mode="gremlin"] .view-toggle::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); margin-right: 2px; } [data-mode="gremlin"] .view-toggle:hover { background: var(--bg-2); color: var(--text); } .view-toggle-icon { transition: transform 0.2s ease; width: 16px; height: 16px; } .view-toggle.active .view-toggle-icon { transform: rotate(180deg); } .view-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; min-width: 240px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; box-shadow: 0 8px 24px var(--card-shadow); } .view-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); } [data-mode="gremlin"] .view-dropdown { border: 2px solid var(--stroke); box-shadow: 0 0 0 3px var(--outline), 0 8px 24px var(--card-shadow); } .view-section { display: flex; flex-direction: column; gap: 10px; } .view-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); font-family: 'DM Mono', monospace; } [data-mode="gremlin"] .view-label { font-family: 'Bubblegum Sans', cursive; text-transform: none; font-size: 13px; } .view-buttons { display: flex; gap: 8px; } .view-btn { flex: 1; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 6px; } .view-btn:hover { background: var(--bg); border-color: var(--accent); transform: translateY(-1px); } [data-mode="pro"] .view-btn:hover { box-shadow: 0 4px 12px var(--accent-glow); } .view-btn.active { background: var(--accent); color: white; border-color: var(--accent); } [data-mode="pro"] .view-btn.active { box-shadow: 0 4px 16px var(--accent-glow); } .view-separator { height: 1px; background: var(--border); margin: 12px 0; } /* Suppress backdrop-filter churn during a mode/theme swap. */ .mode-transitioning *, .mode-transitioning *::before, .mode-transitioning *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* --- 9. Sparkle ------------------------------------------------------------ */ .sparkle { display: inline-block; animation: sparkle-pulse 2s ease-in-out infinite; color: var(--pink); } .sparkle-sm { font-size: 0.9rem; } .sparkle-lg { font-size: 1.4rem; } @keyframes sparkle-pulse { 0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.5; } 50% { transform: scale(1.3) rotate(20deg); opacity: 1; } } .sparkle-burst { position: fixed; pointer-events: none; z-index: 9999; font-size: 24px; animation: burst-out 800ms ease-out forwards; } @keyframes burst-out { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(var(--burst-x), var(--burst-y)) scale(1.5); opacity: 0; } } [data-mode="pro"] .sparkle { display: none; } /* --- 10. Footer ------------------------------------------------------------ */ .site-footer { margin-top: 80px; padding: 48px 24px 32px; border-top: 2px solid var(--border); background: var(--card-bg); color: var(--text-2); font-size: 14px; } .site-footer-inner { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 36px 56px; justify-content: space-between; } .footer-contact { max-width: 340px; } .footer-contact h2 { font-size: 1.5rem; margin: 0 0 10px; color: var(--text); font-weight: 700; } [data-mode="gremlin"] .footer-contact h2 { font-family: 'Bubblegum Sans', cursive; font-weight: 400; } .footer-contact p { margin: 0 0 16px; line-height: 1.55; color: var(--text-2); } .footer-email { display: inline-block; font-size: 1.1rem; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s ease; } .footer-email:hover { border-bottom-color: var(--accent); } .footer-socials { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 18px; } .footer-socials a { color: var(--text-2); text-decoration: none; font-weight: 500; transition: color .2s ease; } .footer-socials a:hover { color: var(--accent); } .footer-nav { display: flex; flex-wrap: wrap; gap: 40px; } .footer-col h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-2); opacity: .65; margin: 0 0 12px; font-weight: 700; } .footer-col a { display: block; color: var(--text); text-decoration: none; padding: 5px 0; font-size: 14px; transition: color .2s ease; border-bottom: none; } .footer-col a:hover { color: var(--accent); } .site-footer-base { max-width: 1080px; margin: 36px auto 0; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-2); } .footer-base-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .footer-base-links a { color: var(--text-2); text-decoration: none; transition: color .2s ease; border-bottom: none; } .footer-base-links a:hover { color: var(--accent); } .footer-base-links span { opacity: .5; } @media (max-width: 600px) { .site-footer { padding: 36px 20px 28px; } .footer-nav { gap: 28px; } .site-footer-inner { gap: 28px; } } /* 4-column footer: 2×2 on tablet/large phone, single column on the narrowest phones */ @media (max-width: 700px) { .footer-nav { gap: 28px 24px; } .footer-col { flex: 1 1 calc(50% - 24px); } } @media (max-width: 440px) { .footer-col { flex-basis: 100%; } } /* footer gremlin-light contrast */ [data-mode="gremlin"][data-theme="light"] .footer-email { color: #9C2D63; } [data-mode="gremlin"][data-theme="light"] .footer-email:hover { border-bottom-color: #9C2D63; } [data-mode="gremlin"][data-theme="light"] .footer-col a:hover { color: #9C2D63; } [data-mode="gremlin"][data-theme="light"] .footer-socials a:hover { color: #9C2D63; } /* --- Mobile nav ------------------------------------------------------------ */ @media (max-width: 768px) { body { padding-top: var(--nav-h); } .top-nav { padding: 10px 14px; gap: 10px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); } .top-nav::-webkit-scrollbar { display: none; } .nav-links, [data-mode="gremlin"] .nav-links { flex-wrap: nowrap; flex: 0 0 auto; gap: 8px; min-width: 0; overflow-x: visible; -webkit-mask-image: none; mask-image: none; } .nav-link, [data-mode="pro"] .nav-link, [data-mode="gremlin"] .nav-link { white-space: nowrap; flex: 0 0 auto; } .view-controls { display: flex; flex: 0 0 auto; } .view-controls::before { display: none; } .view-key { white-space: nowrap; } .container { padding: 0 20px; } } /* a11y-ink (contrast audit 2026-07-11): gremlin-light accent text was pastel-on-pale; ink pink reads. Pastel stays decorative via --pink. */ :root[data-mode="gremlin"][data-theme="light"]{ --accent:#9C2D63; } [data-mode="gremlin"][data-theme="light"] #modeKey{ background:linear-gradient(135deg,#B14371,#7E5FA3); box-shadow:0 4px 0 #6d4f93; }