/* bnfldt — style.css ───────────────────────────────────────────────────────────────────────────── 1. Custom properties 2. Reset & base 3. Utilities 4. Site logo (fixed, JS-animated) 5. Site header (glass bg + nav only) 6. Hero section 7. Container & section base 8. Services section 9. Work section 9b. Preview / "Your site next?" section 10. Approach section 11. CTA section 12. Site footer 13. Keyframe animations 14. Reduced motion 15. Print */ /* ─── 1. Custom properties ─────────────────────────────────────────────────── */ :root { color-scheme: dark; /* Brand palette */ --brand-dark: #1D1D1D; --brand-smoke: #E7EDEB; --brand-bone: #FCFAF8; /* Theme tokens — dark default */ --color-bg: #0a0a0a; --color-bg-section: #0e0e0e; --color-bg-elevated: #141414; --color-canvas-bg: #0a0a0a; --color-text: #E7EDEB; --color-text-muted: rgba(231, 237, 235, 0.65); --color-text-faint: rgba(231, 237, 235, 0.44); --color-border: rgba(231, 237, 235, 0.08); --color-border-hover: rgba(231, 237, 235, 0.22); --color-header-bg: rgba(10, 10, 10, 0.78); --color-footer-bg: #080808; /* Typography */ --font-display: 'Hubot Sans', sans-serif; --font-body: 'Geist', sans-serif; /* Spacing */ --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; --space-2xl: 12rem; /* Easing */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Header dimensions — used by JS for logo landing position */ --header-pad-x: 2.5rem; /* 40px at 16px base */ --header-pad-y: 1.25rem; /* 20px at 16px base */ } /* Light mode override — dark is the primary theme */ @media (prefers-color-scheme: light) { :root { color-scheme: light dark; --color-bg: #FCFAF8; --color-bg-section: #F4F2F0; --color-bg-elevated: #FFFFFF; --color-canvas-bg: #FCFAF8; --color-text: #1D1D1D; --color-text-muted: rgba(29, 29, 29, 0.68); --color-text-faint: rgba(29, 29, 29, 0.48); --color-border: rgba(29, 29, 29, 0.10); --color-border-hover: rgba(29, 29, 29, 0.30); --color-header-bg: rgba(252, 250, 248, 0.88); --color-footer-bg: #ECEAE6; } } /* Manual theme overrides — set via data-theme attribute on */ html[data-theme="dark"] { color-scheme: dark; --color-bg: #0a0a0a; --color-bg-section: #0e0e0e; --color-bg-elevated: #141414; --color-canvas-bg: #0a0a0a; --color-text: #E7EDEB; --color-text-muted: rgba(231, 237, 235, 0.65); --color-text-faint: rgba(231, 237, 235, 0.44); --color-border: rgba(231, 237, 235, 0.08); --color-border-hover: rgba(231, 237, 235, 0.22); --color-header-bg: rgba(10, 10, 10, 0.78); --color-footer-bg: #080808; } html[data-theme="light"] { color-scheme: light dark; --color-bg: #FCFAF8; --color-bg-section: #F4F2F0; --color-bg-elevated: #FFFFFF; --color-canvas-bg: #FCFAF8; --color-text: #1D1D1D; --color-text-muted: rgba(29, 29, 29, 0.68); --color-text-faint: rgba(29, 29, 29, 0.48); --color-border: rgba(29, 29, 29, 0.10); --color-border-hover: rgba(29, 29, 29, 0.30); --color-header-bg: rgba(252, 250, 248, 0.88); --color-footer-bg: #ECEAE6; } /* ─── 2. Reset & base ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-weight: 300; font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } ::selection { background: #E7EDEB; color: #1D1D1D; } img { display: block; max-width: 100%; height: auto; } ul { list-style: none; } a { color: inherit; text-decoration: none; } /* ─── 3. Utilities ─────────────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 9999; padding: 0.5rem 1rem; background: var(--color-text); color: var(--color-bg); font-size: 0.85rem; font-family: var(--font-body); border-radius: 0 0 4px 4px; transition: top 0.2s ease; } .skip-link:focus { top: 0; outline: none; } /* ─── 4. Site logo — fixed, CSS-transition animated ───────────────────────── */ /* Always position:fixed anchored at left:0; top:0. JS measures both states once (after fonts load) and injects a