/* garan.work -- shared stylesheet. Light theme = the clean b/w register of the live brokenpromises.dev/neat. Dark theme = the gate-1 dark shell. Both are token-level; the toggle stamps data-theme on , prefers-color-scheme decides when nothing is stamped. Fonts are loaded via tags in each page head (Inter + Source Serif 4). */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* --- TOKENS: light (default) --- */ :root { --bg: #fafaf9; --fg: #1a1a1a; --fg-muted: #6b6b6b; --accent: #0066ff; --accent-soft: #e8f0ff; --accent-link: rgba(0, 102, 255, 0.35); --border: #e5e5e5; --nav-bg: rgba(250, 250, 249, 0.85); --code-bg: #f1f1ef; --selection-fg: #ffffff; --section-gap: clamp(5rem, 10vh, 8rem); --max-w: 720px; } /* --- TOKENS: dark (system preference, unless light explicitly chosen) --- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f0f0e; --fg: #ececea; --fg-muted: #a3a39c; --accent: #6aa1ff; --accent-soft: rgba(106, 161, 255, 0.12); --accent-link: rgba(106, 161, 255, 0.35); --border: #262625; --nav-bg: rgba(15, 15, 14, 0.85); --code-bg: #1a1a19; --selection-fg: #0f0f0e; } } /* --- TOKENS: dark (explicitly chosen) --- */ :root[data-theme="dark"] { --bg: #0f0f0e; --fg: #ececea; --fg-muted: #a3a39c; --accent: #6aa1ff; --accent-soft: rgba(106, 161, 255, 0.12); --accent-link: rgba(106, 161, 255, 0.35); --border: #262625; --nav-bg: rgba(15, 15, 14, 0.85); --code-bg: #1a1a19; --selection-fg: #0f0f0e; } html { scroll-behavior: smooth; font-size: 18px; } body { font-family: 'Inter', -apple-system, system-ui, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.7; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent); color: var(--selection-fg); } /* --- NAV --- */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.3s; } nav.scrolled { border-bottom-color: var(--border); } nav .logo { font-weight: 600; font-size: 0.9rem; letter-spacing: -0.02em; color: var(--fg); text-decoration: none; white-space: nowrap; flex-shrink: 0; } nav .logo span { color: var(--accent); } .nav-right { display: flex; align-items: center; gap: 1.5rem; min-width: 0; } nav ul { list-style: none; display: flex; gap: 1.6rem; flex-wrap: nowrap; } nav ul a { color: var(--fg-muted); text-decoration: none; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; transition: color 0.2s; white-space: nowrap; } nav ul a:hover { color: var(--fg); } /* --- THEME TOGGLE --- */ .theme-toggle { flex-shrink: 0; width: 17px; height: 17px; padding: 0; border-radius: 50%; border: 1.5px solid var(--fg-muted); background: linear-gradient(90deg, var(--fg-muted) 50%, transparent 50%); cursor: pointer; transition: border-color 0.2s, transform 0.2s; } .theme-toggle:hover { border-color: var(--accent); transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .theme-toggle:hover { transform: none; } } /* --- SECTIONS --- */ section { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; } /* --- HERO --- */ .hero { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; padding-top: 5rem; } .hero-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem; } .hero h1 { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 1.5rem; } .hero p { font-size: 1.1rem; color: var(--fg-muted); max-width: 560px; line-height: 1.8; } .hero-meta { margin-top: 3rem; display: flex; gap: 2rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--fg-muted); } .hero-meta a { color: var(--fg-muted); text-decoration: none; border-bottom: 1px solid var(--border); transition: all 0.2s; } .hero-meta a:hover { color: var(--accent); border-color: var(--accent); } /* --- GENERIC SECTION HEADINGS --- */ .section-block { padding-top: var(--section-gap); } .section-block h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 2rem; } .section-block > div > p, .section-block p.body { margin-bottom: 1.5rem; color: var(--fg-muted); } .section-block p strong { color: var(--fg); font-weight: 500; } .highlight-line { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.3rem; font-style: italic; color: var(--fg); line-height: 1.6; margin: 2.5rem 0; padding-left: 1.5rem; border-left: 3px solid var(--accent); } /* --- ARTIFACT CARDS --- */ .artifact-card { display: block; border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem 1.8rem; margin-bottom: 1.2rem; text-decoration: none; color: inherit; transition: border-color 0.2s, background 0.2s; } .artifact-card:hover { border-color: var(--accent); background: var(--accent-soft); } .artifact-card h3 { font-size: 1rem; font-weight: 600; color: var(--fg); margin-bottom: 0.4rem; } .artifact-card p { font-size: 0.9rem; color: var(--fg-muted); line-height: 1.6; } .artifact-card .go { display: inline-block; margin-top: 0.7rem; font-size: 0.8rem; font-weight: 500; color: var(--accent); } /* --- WORK ITEMS --- */ .work-item { margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--border); } .work-item:last-child { border-bottom: none; } .work-item .meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem; } .work-item .company { font-weight: 600; font-size: 1rem; } .work-item .period { font-size: 0.8rem; color: var(--fg-muted); } .work-item .role { font-size: 0.85rem; color: var(--fg-muted); margin-bottom: 1rem; } .work-item .story-line { color: var(--fg-muted); font-size: 0.95rem; line-height: 1.7; } .work-item .stat { display: inline-block; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 4px; margin-top: 0.8rem; } .sub-highlights { list-style: none; margin: 1rem 0 0; padding: 0; } .sub-highlights li { position: relative; padding-left: 1.1rem; margin-bottom: 0.45rem; font-size: 0.85rem; line-height: 1.6; color: var(--fg-muted); } .sub-highlights li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.45rem; height: 1.5px; background: var(--accent); } .sub-highlights a { color: var(--accent); text-decoration: none; } .sub-highlights a:hover { text-decoration: underline; } /* --- BELIEFS --- */ .belief { margin-bottom: 2.5rem; } .belief h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; } .belief p { color: var(--fg-muted); font-size: 0.95rem; } /* --- TAGS --- */ .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; } .tag { font-size: 0.75rem; font-weight: 500; padding: 0.35rem 0.8rem; border: 1px solid var(--border); border-radius: 100px; color: var(--fg-muted); } /* --- CONTACT --- */ .contact-links { display: flex; gap: 1.5rem; flex-wrap: wrap; } .contact-links a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 500; color: var(--fg); text-decoration: none; padding: 0.6rem 1.2rem; border: 1px solid var(--border); border-radius: 8px; transition: all 0.2s; } .contact-links a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* --- FOOTER --- */ footer { max-width: var(--max-w); margin: 0 auto; padding: 2rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--fg-muted); display: flex; justify-content: space-between; flex-wrap: wrap; } footer a { color: var(--fg-muted); text-decoration: none; } footer a:hover { color: var(--accent); } .footmark { display: inline-flex; align-items: center; gap: 0.5em; } .footmark svg { opacity: 0.55; } /* --- ARTICLE PAGES --- */ article { max-width: var(--max-w); margin: 0 auto; padding: 8rem 2rem 4rem; } article .kicker { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.2rem; } article h1 { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 1.5rem; } article h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; margin: 3rem 0 1rem; } article p { color: var(--fg-muted); margin-bottom: 1.3rem; } article p.lead { color: var(--fg); font-size: 1.05rem; } article strong { color: var(--fg); font-weight: 600; } article a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-link); } article a:hover { border-bottom-color: var(--accent); } article ul, article ol { margin: 0 0 1.3rem 1.3rem; color: var(--fg-muted); } article li { margin-bottom: 0.6rem; } article code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.85em; background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 0.1em 0.35em; } article table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 1.5rem; } article th, article td { text-align: left; padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--border); color: var(--fg-muted); vertical-align: top; } article th { color: var(--fg); font-weight: 600; } .table-scroll { overflow-x: auto; margin-bottom: 1.5rem; } .backlink { display: inline-block; margin-bottom: 2rem; font-size: 0.8rem; } .stub-note { border: 1px dashed var(--border); border-radius: 8px; padding: 1rem 1.2rem; color: var(--fg-muted); font-size: 0.9rem; } /* --- DIAGRAMS (inline SVG, inherits theme tokens) --- */ .diagram { margin: 2rem 0; overflow-x: auto; } .diagram svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; } .diagram .d-box { fill: none; stroke: var(--fg-muted); stroke-width: 1.4; } .diagram .d-box-accent { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 5 4; } .diagram .d-arrow { fill: none; stroke: var(--fg-muted); stroke-width: 1.3; } .diagram .d-arrow-accent { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 3 4; } .diagram text { font-family: 'Inter', -apple-system, system-ui, sans-serif; font-size: 13px; fill: var(--fg); } .diagram .d-label { fill: var(--fg-muted); font-size: 11.5px; } .diagram .d-accent-text { fill: var(--accent); font-size: 12px; font-weight: 600; } .diagram-caption { font-size: 0.78rem; color: var(--fg-muted); text-align: center; margin-top: -0.8rem; } /* --- CV PAGE --- */ .cv-header { margin-bottom: 2.5rem; } .cv-header .cv-contact { font-size: 0.85rem; color: var(--fg-muted); display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: 0.8rem; } .cv-entry { margin-bottom: 2rem; } .cv-entry .meta { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1rem; } .cv-entry .company { font-weight: 600; } .cv-entry .period { font-size: 0.8rem; color: var(--fg-muted); } .cv-entry .role { font-size: 0.85rem; color: var(--fg-muted); margin-bottom: 0.6rem; } .cv-entry ul { margin: 0 0 0 1.2rem; font-size: 0.9rem; } .cv-entry li { margin-bottom: 0.4rem; } .cv-skills dt { font-weight: 600; font-size: 0.9rem; margin-top: 0.8rem; } .cv-skills dd { color: var(--fg-muted); font-size: 0.9rem; margin: 0; } /* --- REVEAL ANIMATION --- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* --- RESPONSIVE --- */ @media (max-width: 640px) { html { font-size: 16px; } nav { padding: 1rem 1.2rem; gap: 0.8rem; } nav ul { gap: 0.9rem; } nav ul a { font-size: 0.72rem; } .nav-right { gap: 0.9rem; } .hero-meta { flex-direction: column; gap: 0.5rem; } .work-item .meta { flex-direction: column; } footer { flex-direction: column; gap: 0.5rem; } } /* --- PRINT (the /cv/ page is the main consumer) --- */ @media print { :root, :root[data-theme="dark"] { --bg: #ffffff; --fg: #111111; --fg-muted: #444444; --accent: #0044aa; --accent-soft: #ffffff; --accent-link: #999999; --border: #cccccc; --nav-bg: #ffffff; --code-bg: #ffffff; --selection-fg: #ffffff; } nav, footer, .backlink, .theme-toggle, .scroll-hint { display: none !important; } html { font-size: 11pt; } body { background: #ffffff; } article { padding: 0; max-width: none; } article a { border-bottom: none; color: inherit; } .cv-entry, .belief { break-inside: avoid; } }