/* ================================================================ FAWN DOOLEY — style.css Token-first: all colours, fonts, sizes are CSS custom properties. Theme swap = one data-theme attr on . ================================================================ */ /* ── Theme 1: Lemon & Green (default) ──────────────────────────── */ :root { --paper: #fcfaf4; --paper-2: #f6f1e6; --card: #ffffff; --ink: #1b2a38; --ink-soft: #2a3b4b; --line: #e6decf; --text: #25323e; --muted: #66717c; --accent-1: #f2c84b; --accent-1-soft: #faeba8; --accent-1-dk: #a9821b; --accent-2: #4e9a75; --accent-2-dk: #2f6b4f; --fawn-color: #3d2b1a; --font-display: "Fraunces", Georgia, serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "IBM Plex Mono", monospace; --h1-size: clamp(2.6rem, 5.8vw, 4.3rem); --h2-size: clamp(1.9rem, 4.4vw, 2.8rem); --display-weight: 500; --stats-bg: var(--ink); --note-bg: var(--ink); } /* ── Theme 2: Peach & Sky ───────────────────────────────────────── */ [data-theme="peach"] { --paper: #fdf8f5; --paper-2: #f8eee8; --card: #ffffff; --ink: #2c1f1a; --ink-soft: #3d2b24; --line: #edd9cf; --text: #321e18; --muted: #8a7068; --accent-1: #e8956a; --accent-1-soft: #f8d4c0; --accent-1-dk: #9e4e22; --accent-2: #7eb8cc; --accent-2-dk: #2e7a95; --fawn-color: #6b3a28; --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "IBM Plex Mono", monospace; --h1-size: clamp(2.9rem, 6.2vw, 4.8rem); --h2-size: clamp(2.1rem, 4.8vw, 3.2rem); --display-weight: 400; --stats-bg: #3d2b24; --note-bg: #3d2b24; } /* ── Theme 3: Studio Dark ───────────────────────────────────────── */ [data-theme="dark"] { --paper: #0f1117; --paper-2: #161922; --card: #1c2030; --ink: #f0f2f8; --ink-soft: #c8cedc; --line: #2a2f42; --text: #e2e6f0; --muted: #7a82a0; --accent-1: #a78bfa; --accent-1-soft: #2d2152; --accent-1-dk: #c4b0ff; --accent-2: #60a5fa; --accent-2-dk: #93c5fd; --fawn-color: #a78bfa; --font-display: "DM Sans", system-ui, sans-serif; --font-body: "DM Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", monospace; --h1-size: clamp(2.4rem, 4.8vw, 3.8rem); --h2-size: clamp(1.8rem, 3.8vw, 2.6rem); --display-weight: 600; --stats-bg: #080a0f; --note-bg: #080a0f; } /* ── Reset ──────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--paper); line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background 0.35s ease, color 0.35s ease; } h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); line-height: 1.08; margin: 0; letter-spacing: -0.01em; transition: font-family 0.35s; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { letter-spacing: -0.02em; } a { color: inherit; } .serif-i { font-family: var(--font-display); font-style: italic; font-weight: var(--display-weight); } [data-theme="dark"] .serif-i { font-style: normal; letter-spacing: 0.01em; } .hl { background: linear-gradient(transparent 60%, var(--accent-1-soft) 60%); padding: 0 0.06em; transition: background 0.35s; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; transition: color 0.35s; } .eyebrow::before { content: ""; width: 22px; height: 2px; flex-shrink: 0; background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); transition: background 0.35s; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0; text-decoration: none; } .skip-link:focus { left: 0; } /* ── Nav ────────────────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.25s, border-color 0.25s; border-bottom: 1px solid transparent; } .nav--scrolled { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; } .nav__mark { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); flex-shrink: 0; transition: color 0.35s; } .nav__mark-img { width: 32px; height: 32px; display: block; object-fit: contain; } /* Inline SVG fawn mark — is in DOM so currentColor works via color token */ .fawn-svg { color: var(--fawn-color); transition: color 0.35s ease; display: block; } .nav__mark span { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; letter-spacing: -0.01em; white-space: nowrap; transition: font-family 0.35s; } [data-theme="dark"] .nav__mark span { letter-spacing: -0.02em; } .nav__links { display: flex; align-items: center; gap: 22px; } .nav__link { font-size: 0.92rem; text-decoration: none; color: var(--text); font-weight: 500; transition: color 0.15s; white-space: nowrap; } .nav__link:hover { color: var(--accent-1-dk); } .nav__cta { font-size: 0.9rem; text-decoration: none; font-weight: 600; color: var(--ink); border: 1.5px solid var(--line); padding: 8px 16px; border-radius: 999px; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; } .nav__cta:hover { background: var(--accent-1); border-color: var(--accent-1); color: var(--paper); } [data-theme="dark"] .nav__cta:hover { color: #0f1117; } /* Theme switcher */ .theme-switcher { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .theme-switcher label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color 0.35s; } .theme-switcher select { font-family: var(--font-mono); font-size: 0.72rem; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 26px 5px 8px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2366717C' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; transition: border-color 0.15s, background 0.35s, color 0.35s; } .theme-switcher select:focus { outline: none; border-color: var(--accent-2); } .theme-swatch { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line); flex-shrink: 0; background: linear-gradient(135deg, var(--accent-1) 50%, var(--accent-2) 50%); transition: background 0.35s, border-color 0.35s; } .nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; flex-shrink: 0; } .nav__burger span { width: 22px; height: 2px; background: var(--ink); display: block; transition: background 0.35s; } /* ── Buttons ────────────────────────────────────────────────────── */ .btn { display: inline-block; text-decoration: none; font-weight: 600; padding: 13px 26px; border-radius: 999px; font-size: 0.95rem; transition: transform 0.12s, filter 0.15s, background 0.15s, color 0.15s, border-color 0.15s; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent-1); color: var(--ink); } [data-theme="dark"] .btn--primary { color: #0f1117; } .btn--primary:hover { filter: brightness(1.1); } .btn--ghost { border: 1.5px solid var(--line); color: var(--ink); } .btn--ghost:hover { border-color: var(--accent-1); } /* ── Hero ───────────────────────────────────────────────────────── */ .hero { padding: 150px 0 80px; } .hero__inner { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 48px; align-items: center; } .hero h1 { font-size: var(--h1-size); max-width: 20ch; margin-bottom: 24px; line-height: 1.06; } .hero__sub { font-size: clamp(1.05rem, 2.1vw, 1.22rem); color: var(--ink-soft); max-width: 54ch; margin: 0 0 36px; transition: color 0.35s; } .hero__actions { display: flex; gap: 14px; flex-wrap: wrap; } .hero__art { display: flex; justify-content: center; align-items: flex-end; } .hero__fawn-wrap { display: flex; flex-direction: column; align-items: center; } /* Hero fawn is inline SVG — color follows --fawn-color token, no PNG blend hacks needed */ .hero__fawn-svg { display: block; width: min(300px, 88%); height: auto; /* subtle drop shadow to lift it off the background */ filter: drop-shadow( 0 12px 28px color-mix(in srgb, var(--fawn-color) 30%, transparent) ); transition: color 0.35s ease, filter 0.35s ease; } .hero__ground { width: 80%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); margin: 8px auto 0; transition: background 0.35s; } /* ── Stats bar ──────────────────────────────────────────────────── */ .stats { background: var(--stats-bg); color: var(--paper); padding: 38px 0; transition: background 0.35s; } .stats__row { display: flex; justify-content: center; flex-wrap: wrap; } .stat { text-align: center; padding: 12px 48px; border-right: 1px solid rgba(255, 255, 255, 0.1); } .stat:last-child { border-right: 0; } .stat__num { font-family: var(--font-display); font-size: 2.7rem; font-weight: var(--display-weight); color: var(--accent-1); line-height: 1; display: block; transition: color 0.35s, font-family 0.35s; } .stat__label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-top: 7px; display: block; } /* ── Bridge span ────────────────────────────────────────────────── */ .span3 { margin: 70px auto 0; display: grid; grid-template-columns: 1fr auto 1.25fr auto 1fr; align-items: stretch; max-width: 920px; } .node { border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; justify-content: center; border-top-width: 3px; transition: background 0.35s, border-color 0.35s; } .node__tag { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; } .node strong { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.02rem; color: var(--ink); display: block; transition: color 0.35s, font-family 0.35s; } .node small { color: var(--muted); font-size: 0.8rem; transition: color 0.35s; } .node--design { border-top-color: var(--accent-1); } .node--design .node__tag { color: var(--accent-1-dk); transition: color 0.35s; } .node--build { border-top-color: var(--accent-2); } .node--build .node__tag { color: var(--accent-2-dk); transition: color 0.35s; } .node--me { border-top-color: transparent; background: linear-gradient(180deg, var(--card), var(--paper)); box-shadow: 0 14px 38px -20px rgba(0, 0, 0, 0.35); position: relative; } .node--me::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); transition: background 0.35s; } .node--me .node__tag { color: var(--ink); transition: color 0.35s; } .node--me strong { font-size: 1.08rem; } .link { position: relative; align-self: center; height: 2px; min-width: 40px; background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); transition: background 0.35s; } .pulse { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--accent-1); animation: travel 2.6s ease-in-out infinite; transition: background 0.35s; } .link--r .pulse { animation-delay: 1.3s; } @keyframes travel { 0%, 100% { left: 0; opacity: 0.22; } 50% { left: calc(100% - 7px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pulse { animation: none; left: 50%; } } /* ── Sections ───────────────────────────────────────────────────── */ section { padding: 92px 0; } .section-head { max-width: 62ch; margin-bottom: 48px; } .section-head h2 { font-size: var(--h2-size); margin-bottom: 16px; } .section-head p { color: var(--muted); font-size: 1.06rem; margin: 0; transition: color 0.35s; } /* ── What I own ─────────────────────────────────────────────────── */ .own { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: background 0.35s; } .own__card { background: var(--card); padding: 32px 30px; transition: background 0.35s; } .own__tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-2-dk); letter-spacing: 0.1em; transition: color 0.35s; } .own__card h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: var(--display-weight); margin: 10px 0 8px; transition: font-family 0.35s; } .own__card p { color: var(--muted); font-size: 0.97rem; margin: 0; transition: color 0.35s; } .own__card code { font-family: var(--font-mono); font-size: 0.86em; background: var(--accent-1-soft); padding: 1px 5px; border-radius: 4px; color: var(--accent-1-dk); transition: background 0.35s, color 0.35s; } .scope-note { margin-top: 22px; font-size: 0.94rem; color: var(--muted); line-height: 1.72; transition: color 0.35s, border-color 0.35s; border-left: 3px solid var(--accent-1); padding-left: 20px; } .scope-note strong { color: var(--text); font-weight: 600; transition: color 0.35s; } /* ── How I work ─────────────────────────────────────────────────── */ .work { background: var(--paper-2); transition: background 0.35s; } .steps { counter-reset: step; border-top: 1px solid var(--line); } .step { display: grid; grid-template-columns: 40px 1fr; gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .step__no { counter-increment: step; font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--accent-1-dk); font-weight: var(--display-weight); transition: color 0.35s, font-family 0.35s, font-style 0.35s; } [data-theme="dark"] .step__no { font-style: normal; font-size: 1.1rem; letter-spacing: 0.05em; } .step__no::before { content: counter(step, decimal-leading-zero); } .step h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: var(--display-weight); margin-bottom: 6px; transition: font-family 0.35s; } .step p { color: var(--muted); font-size: 0.99rem; margin: 0; max-width: 64ch; transition: color 0.35s; } /* ── Selected work ──────────────────────────────────────────────── */ .sel__list { border-top: 1.5px solid var(--ink); transition: border-color 0.35s; } .sel__row { display: grid; grid-template-columns: 220px 1fr auto; gap: 32px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--line); } .sel__client { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; transition: font-family 0.35s; padding-top: 2px; } .sel__desc { color: var(--muted); font-size: 0.97rem; transition: color 0.35s; } .sel__role { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); white-space: nowrap; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); transition: background 0.35s, border-color 0.35s, color 0.35s; margin-top: 2px; } /* ── Note band ──────────────────────────────────────────────────── */ .note { background: var(--note-bg); color: var(--paper); transition: background 0.35s; } .note .wrap { max-width: 780px; } .note p { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.34; font-weight: var(--display-weight); margin: 0; color: rgba(255, 255, 255, 0.88); transition: font-family 0.35s; } .note p span { font-style: italic; color: var(--accent-1); transition: color 0.35s; } [data-theme="dark"] .note p span { font-style: normal; } /* ── Contact ────────────────────────────────────────────────────── */ .contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; } .contact__intro p { color: var(--muted); font-size: 1.05rem; transition: color 0.35s; } .contact__intro h2 { font-size: var(--h2-size); margin-bottom: 16px; } .contact__direct { font-family: var(--font-mono); font-size: 0.9rem; margin-top: 22px; } .contact__direct a { color: var(--accent-2-dk); text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color 0.15s, color 0.35s; } .contact__direct a:hover { border-color: var(--accent-2-dk); } .field { margin-bottom: 18px; } .field label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 7px; } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 0.96rem; background: var(--card); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s, background 0.35s, color 0.35s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 20%, transparent); } .field textarea { resize: vertical; min-height: 120px; } .hp { position: absolute; left: -9999px; } .form-status { font-size: 0.92rem; margin-top: 6px; min-height: 1.2em; } .form-status.is-error { color: #e05555; } .form-status.is-success { color: var(--accent-2-dk); } #submitBtn { border: 0; cursor: pointer; font-family: inherit; } #submitBtn[disabled] { opacity: 0.6; cursor: default; } /* ── Footer ─────────────────────────────────────────────────────── */ footer { padding: 40px 0; border-top: 1px solid var(--line); transition: border-color 0.35s; } .footer__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 0.86rem; color: var(--muted); } .footer__mark { display: flex; align-items: center; gap: 8px; } .footer__fawn { width: 22px; height: 22px; display: block; } .footer__inner a { color: var(--muted); text-decoration: none; transition: color 0.15s; } .footer__inner a:hover { color: var(--text); } /* ── Reveal ─────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } .hero__art { order: -1; justify-content: flex-start; } .hero__fawn-svg { width: 180px; } .hero__ground { margin: 8px 0 0; width: 180px; } .stat { padding: 12px 28px; } } @media (max-width: 820px) { .span3 { grid-template-columns: 1fr; gap: 12px; max-width: 400px; } .link { min-width: 0; width: 2px; height: 24px; justify-self: center; background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); } .pulse { animation: travelv 2.6s ease-in-out infinite; } @keyframes travelv { 0%, 100% { top: 0; left: 50%; opacity: 0.22; } 50% { top: calc(100% - 7px); opacity: 1; } } } /* ── Burger X / bars toggle ─────────────────────────── */ .burger-close { display: none; } .nav__burger[aria-expanded="true"] .burger-bar { display: none; } .nav__burger[aria-expanded="true"] .burger-close { display: block; } @media (max-width: 760px) { .nav__links { display: none; } .nav__burger { display: flex; align-items: center; justify-content: center; } .nav__links.is-open { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; position: absolute; top: 66px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 24px 24px 28px; transition: background 0.35s; } /* Theme switcher inside mobile menu */ .theme-switcher--mobile-menu { display: flex; } .own, .contact__grid { grid-template-columns: 1fr; } .sel__row { grid-template-columns: 1fr; gap: 6px; } .sel__role { align-self: start; } .step { grid-template-columns: 1fr; gap: 4px; } .stats__row { gap: 0; } .stat { padding: 14px 16px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); width: 50%; } .stat:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.08); } /* Fawn — smaller and centered on mobile */ .hero__fawn-svg { width: 140px; } .hero__fawn-wrap { align-items: center; width: 100%; } .hero__ground { width: 140px; } } /* Hide mobile-only switcher on desktop */ .theme-switcher--mobile-menu { display: none; }