/* ============================================================ declan.land — shared base Dark, technical, engineer feel. Deep violet-ink palette bridging Spellbook (gold/violet) and Planex (blue). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Spectral:ital,wght@0,400;0,500;1,400;1,500;1,600&display=swap'); :root { /* shared, theme-independent */ --sans: 'Geist', system-ui, -apple-system, sans-serif; --mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace; --serif: 'Spectral', Georgia, serif; --wrap: 1140px; --radius: 18px; --radius-lg: 26px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ============================================================ HACKER THEME (default) — phosphor terminal ============================================================ */ [data-mode="hacker"] { --bg: oklch(0.135 0.014 215); --bg-1: oklch(0.173 0.017 215); --bg-2: oklch(0.223 0.021 210); --line: oklch(0.85 0.12 160 / 0.16); --line-soft: oklch(0.85 0.12 160 / 0.08); --text: oklch(0.945 0.028 158); --text-dim: oklch(0.79 0.05 160); --text-faint: oklch(0.62 0.06 162); /* --accent-h / --accent-h2 are swappable by the color picker (set inline on ) */ --accent-h: oklch(0.85 0.2 152); /* phosphor green (default) */ --accent-h2: oklch(0.82 0.13 205); /* cyan */ --accent: var(--accent-h); --accent-2: var(--accent-h2); --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent); --amber: oklch(0.83 0.16 78); --font-head: var(--mono); --head-spacing: -0.005em; --display-size: clamp(2.3rem, 5.6vw, 4.3rem); } [data-mode="hacker"] body { overflow: hidden; height: 100svh; } /* ============================================================ PRO THEME — clean violet engineer ============================================================ */ [data-mode="pro"] { --bg: oklch(0.145 0.018 285); --bg-1: oklch(0.185 0.022 285); --bg-2: oklch(0.235 0.026 285); --line: oklch(0.78 0.02 285 / 0.13); --line-soft: oklch(0.78 0.02 285 / 0.07); --text: oklch(0.965 0.006 285); --text-dim: oklch(0.74 0.016 285); --text-faint: oklch(0.56 0.02 285); --accent: oklch(0.68 0.17 288); --accent-2: oklch(0.72 0.15 250); --accent-soft: oklch(0.68 0.17 288 / 0.14); --amber: oklch(0.8 0.13 85); --font-head: var(--sans); --head-spacing: -0.03em; --display-size: clamp(2.6rem, 7vw, 5.4rem); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.6; font-weight: 400; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background 0.6s var(--ease), color 0.6s var(--ease); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent-soft); color: var(--text); } /* ---- layout ---- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 28px; } .wrap-wide { max-width: 1320px; } section { position: relative; } /* ---- type helpers ---- */ .kicker { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); display: inline-flex; align-items: center; gap: 0.6em; } .kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.6; } .kicker.no-rule::before { display: none; } h1, h2, h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: var(--head-spacing); line-height: 1.04; } .display { font-family: var(--font-head); font-size: var(--display-size); font-weight: 800; letter-spacing: var(--head-spacing); line-height: 1.0; } [data-mode="pro"] .display { line-height: 0.98; } .h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; letter-spacing: var(--head-spacing); } .lede { font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--text-dim); line-height: 1.55; } .mono { font-family: var(--mono); } .dim { color: var(--text-dim); } .faint { color: var(--text-faint); } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; padding: 0.85em 1.4em; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 0.35s var(--ease), background 0.3s, border-color 0.3s, color 0.3s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: oklch(0.16 0.02 285); font-weight: 700; } .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); } .btn-ghost { background: transparent; border-color: var(--line); color: var(--text); } .btn-ghost:hover { border-color: var(--text-faint); background: oklch(0.78 0.02 285 / 0.05); } .btn .arr { transition: transform 0.35s var(--ease); } .btn:hover .arr { transform: translateX(3px); } /* ---- top nav ---- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s; border-bottom: 1px solid transparent; } .site-nav.scrolled { background: oklch(0.145 0.018 285 / 0.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: var(--line-soft); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .wordmark { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); display: inline-flex; align-items: center; gap: 0.5em; } .wordmark .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { font-size: 14.5px; font-weight: 500; color: var(--text-dim); padding: 0.5em 0.9em; border-radius: 999px; white-space: nowrap; transition: color 0.25s, background 0.25s; } .nav-links a:hover { color: var(--text); background: oklch(0.78 0.02 285 / 0.06); } .nav-links a.cta { color: var(--text); border: 1px solid var(--line); } .nav-links a.cta:hover { border-color: var(--accent); color: var(--accent); } @media (max-width: 680px) { .nav-links .hide-sm { display: none; } } /* ---- footer ---- */ .site-footer { border-top: 1px solid var(--line-soft); padding: 72px 0 48px; margin-top: 40px; } .footer-grid { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-start; } .footer-brand { max-width: 360px; } .footer-brand .wordmark { font-size: 18px; margin-bottom: 14px; } .footer-cols { display: flex; gap: 64px; flex-wrap: wrap; } .footer-col h4 { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 16px; } .footer-col a { display: block; color: var(--text-dim); font-size: 15px; padding: 5px 0; transition: color 0.2s; } .footer-col a:hover { color: var(--text); } .footer-base { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 12.5px; color: var(--text-faint); } /* ---- scroll reveal ---- NOTE: opacity is intentionally INSTANT (not transitioned) so content is never trapped invisible in environments that don't tick CSS transitions. Only transform animates, giving a clean slide-up in real browsers. */ .reveal { opacity: 0; transform: translateY(22px); transition: transform 0.85s var(--ease); will-change: transform; } .reveal.is-visible { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 0.07s; } .reveal[data-delay="2"] { transition-delay: 0.14s; } .reveal[data-delay="3"] { transition-delay: 0.21s; } .reveal[data-delay="4"] { transition-delay: 0.28s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---- generic device shot framing ---- */ .shot { border-radius: 30px; overflow: hidden; box-shadow: 0 40px 90px -30px oklch(0 0 0 / 0.7); } /* ---- pills / tags ---- */ .tag { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.45em 0.85em; border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim); } /* ---- section spacing ---- */ .section-pad { padding-block: clamp(72px, 12vw, 140px); } /* ============================================================ MODE TOGGLE (HACK ⇆ PRO) — present in both themes ============================================================ */ .mode-toggle { display: inline-flex; align-items: center; gap: 0; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: oklch(0.78 0.02 285 / 0.05); cursor: pointer; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; position: relative; transition: border-color 0.3s; -webkit-tap-highlight-color: transparent; } .mode-toggle:hover { border-color: var(--text-faint); } .mode-toggle .mt-opt { position: relative; z-index: 2; padding: 0.5em 0.95em; border-radius: 999px; color: var(--text-faint); transition: color 0.35s var(--ease); display: inline-flex; align-items: center; gap: 0.45em; } .mode-toggle .mt-opt svg { width: 13px; height: 13px; } .mode-toggle .mt-thumb { position: absolute; z-index: 1; top: 3px; bottom: 3px; border-radius: 999px; background: var(--accent); transition: left 0.4s var(--ease), width 0.4s var(--ease), background 0.4s; box-shadow: 0 0 16px -2px var(--accent); } [data-mode="hacker"] .mode-toggle .mt-opt.hack, [data-mode="pro"] .mode-toggle .mt-opt.pro { color: var(--bg); } @media (max-width: 540px) { .mode-toggle .mt-opt span { display: none; } .mode-toggle .mt-opt { padding: 0.5em 0.7em; } } /* smooth cross-theme fade for skinned surfaces */ .site-nav, .pcard, .chip, .clink, .contact, .tag, .btn { transition: background 0.5s var(--ease), border-color 0.5s var(--ease), color 0.5s var(--ease), transform 0.35s var(--ease), box-shadow 0.5s var(--ease); }