/* ==================================================================== Scott Fox Insurance — Link-in-bio Brand: Mid-century modern atomic-age (Canva brand kit kAFxuoiTFZ8) ==================================================================== PRIMARY PALETTE — exact values from agentic-os/brand_context/assets.md --cream #fef7ec page background (never pure white) --black #181818 typography, primary CTA --brand-red #ba1f24 HEART MARK ONLY — not for CTAs or body --rust #b26a26 atomic-age accent --teal #3b646c atomic-age accent (cool anchor) --mustard #eeae38 atomic-age accent (starbursts) --brown #8f3f17 atomic-age accent (grounding) FONTS (loaded in ): Headings: Fredoka One — display face, sparing use Body: Quicksand — geometric sans, default ==================================================================== */ :root { --cream: #fef7ec; --cream-2: #f5ecdb; --black: #181818; --black-soft: #2a2a2a; --brand-red: #ba1f24; --rust: #b26a26; --teal: #3b646c; --mustard: #eeae38; --brown: #8f3f17; --line: #e6dcc6; --muted: #6b5f4a; --font-display: "Fredoka One", "Fredoka", system-ui, sans-serif; --font-body: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --tap: 56px; --radius: 14px; --maxw: 480px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--cream); color: var(--black); font-family: var(--font-body); font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { min-height: 100dvh; display: flex; justify-content: center; padding: 0 16px 24px; } a { color: inherit; } .page { width: 100%; max-width: var(--maxw); } /* ---------- Brand decorative bands ---------- */ .decor { display: block; max-width: 100%; height: auto; margin: 0 auto; } .decor--top { width: 100%; margin-bottom: 6px; } .decor--bottom { width: 62%; max-width: 280px; margin: 30px auto 14px; } /* ---------- Brand header (logo lockup + tagline stack) ---------- */ .brand { text-align: center; margin: 14px 0 28px; } .lockup { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 0 4px; } .lockup__mark { width: 44px; height: 44px; flex-shrink: 0; } .lockup__wordmark { font-family: var(--font-display); font-size: 1.65rem; color: var(--black); line-height: 1; letter-spacing: -0.005em; white-space: nowrap; } .brand__tagline { font-family: var(--font-display); font-size: 1.05rem; margin: 4px 8px 6px; color: var(--brown); line-height: 1.2; } .brand__subtagline { font-family: var(--font-body); font-weight: 500; font-size: 0.92rem; color: var(--black-soft); margin: 0 8px 4px; line-height: 1.4; max-width: 360px; margin-left: auto; margin-right: auto; } .brand__location { font-size: 0.8rem; color: var(--muted); margin: 4px 0 0; letter-spacing: 0.02em; } /* ---------- Link sections ---------- */ .links { display: block; } .group { margin-bottom: 22px; } .group__label { font-family: var(--font-display); font-size: 0.85rem; font-weight: 400; letter-spacing: 0.04em; color: var(--teal); margin: 0 4px 10px; } .tile { display: flex; align-items: center; gap: 14px; width: 100%; min-height: var(--tap); padding: 14px 18px; margin-bottom: 10px; border: 1.5px solid var(--black); border-radius: var(--radius); background: #ffffff; color: var(--black); text-decoration: none; font-family: var(--font-body); font-size: 1rem; font-weight: 600; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; box-shadow: 3px 3px 0 var(--black); } .tile:hover, .tile:focus-visible { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--black); outline: none; } .tile:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--black); } .tile__icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--rust); display: inline-flex; } .tile__icon svg { width: 100%; height: 100%; } .tile__label { flex: 1; } .tile--primary { background: var(--black); color: var(--cream); border-color: var(--black); font-weight: 700; } .tile--primary .tile__icon { color: var(--mustard); } .tile--primary:hover, .tile--primary:focus-visible { background: var(--black-soft); } /* ---------- Footer ---------- */ .foot { margin-top: 4px; text-align: center; font-family: var(--font-body); font-size: 0.78rem; color: var(--muted); line-height: 1.55; } .foot__line { margin: 4px 0; } .foot__line--strong { font-family: var(--font-display); font-size: 0.95rem; color: var(--black); margin-bottom: 6px; } .foot__line--fine { font-style: italic; font-size: 0.72rem; margin: 8px auto; max-width: 380px; } .foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } .foot a:hover { color: var(--rust); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover, .tile:focus-visible, .tile:active { transform: none; } } /* ---------- Larger viewports ---------- */ @media (min-width: 640px) { body { padding: 0 16px 40px; } .lockup__mark { width: 52px; height: 52px; } .lockup__wordmark { font-size: 1.95rem; } .brand__tagline { font-size: 1.2rem; } .brand__subtagline { font-size: 0.98rem; } .decor--bottom { max-width: 320px; } }