/* =================================================== The Mews by Hawk & Heron — Global Stylesheet =================================================== */ /* --- Google Fonts: Cormorant (display) + Alegreya Sans (body) --- */ @import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); /* --- Outfit ExtraBold (title) --- font-display: block — pair with in each page's so the block period resolves before first paint (and in any case, happens behind the page loader overlay). Prevents the hero title from flashing into the fallback font then swapping. */ @font-face { font-family: 'Outfit'; src: url('resources/fonts/Outfit/static/Outfit-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: block; } /* --- CSS Custom Properties (Design Tokens) --- */ :root { /* Brand colours – parchment palette */ --color-parchment: #f5f0e1; --color-parchment-light: #faf6eb; --color-parchment-dark: #e8dfc8; --color-ink: #2c2418; --color-ink-light: #4a3f2f; --color-ink-faded: #7a6f5f; --color-accent: #8b7355; --color-accent-hover: #6d5a42; --color-border: rgba(120, 100, 70, 0.25); --color-border-hover: rgba(120, 100, 70, 0.5); --color-shadow: rgba(60, 50, 30, 0.12); /* Typography */ --font-display: 'Alegreya Sans', 'Cormorant', Georgia, 'Times New Roman', serif; --font-body: 'Alegreya Sans', 'Segoe UI', Roboto, sans-serif; --font-mono: 'Courier New', Courier, monospace; /* Sizing */ --max-width-page: 960px; --max-width-content: 720px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--color-ink); background-color: var(--color-parchment); margin: 0; padding: 0; min-height: 100vh; position: relative; } /* Background image layer */ body::before { content: ''; position: fixed; inset: 0; background-image: url('resources/Bodleian-Library-MS-Bodl-264-pt-I_00508_fol-128r.jpg'); background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0.07; z-index: -1; pointer-events: none; } /* Parchment vignette — softens background behind content for readability */ body::after { content: ''; position: fixed; inset: 0; background: radial-gradient( ellipse 70% 60% at 50% 45%, rgba(245, 240, 225, 0.75) 0%, rgba(245, 240, 225, 0.45) 50%, rgba(245, 240, 225, 0) 100% ); z-index: -1; pointer-events: none; } a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 160ms ease; } a:hover, a:focus-visible { color: var(--color-accent-hover); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; color: var(--color-ink); } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-parchment-dark); padding: 2px 6px; border-radius: var(--radius-sm); } /* --- Page wrapper --- */ .page-wrapper { padding: 0 20px 60px; } /* =================================================== TOP NAV =================================================== */ .top-nav { display: flex; justify-content: flex-end; align-items: center; max-width: var(--max-width-page); margin: 0 auto; padding: 20px 20px 0; } .top-nav a { font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; color: var(--color-ink-light); padding: 6px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } .top-nav a:hover, .top-nav a:focus-visible { background: rgba(120, 100, 70, 0.1); border-color: var(--color-border-hover); color: var(--color-ink); outline: none; } /* =================================================== HERO / HEADER =================================================== */ .hero { max-width: var(--max-width-page); margin: 60px auto 0; padding: 40px 20px 0; display: flex; justify-content: center; } .hero-brand { display: flex; align-items: center; gap: 16px; } .hero-logo { width: auto; height: clamp(84px, 14vw, 130px); aspect-ratio: 2570 / 1865; /* reserve width to prevent CLS */ object-fit: contain; flex-shrink: 0; /* Tint the black logo to match --color-ink (#2c2418) */ filter: invert(12%) sepia(20%) saturate(800%) hue-rotate(10deg) brightness(95%); } .hero-text { display: flex; flex-direction: column; } .hero-title { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: clamp(2.5rem, 7vw, 5.25rem); /* ≈84px at desktop */ font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; color: var(--color-ink); line-height: 1; } .hero-tagline { font-family: 'Alegreya Sans', var(--font-body); font-size: clamp(1.5rem, 4vw, 3rem); /* ≈48px at desktop */ font-weight: 600; color: var(--color-accent); margin: 0 0 0 8px; letter-spacing: 0.04em; } .hero-description { max-width: 540px; margin: 32px auto 0; font-size: 1.05rem; color: var(--color-ink-light); line-height: 1.7; } /* =================================================== MAIN BUTTONS =================================================== */ .main-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: var(--max-width-content); margin: 36px auto 0; } .button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; font-family: 'Alegreya Sans', var(--font-body); font-size: 1rem; font-weight: 500; border-radius: var(--radius-pill); border: 1px solid var(--color-border); text-decoration: none; color: var(--color-ink); background: transparent; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; } .button:hover, .button:focus-visible { background: rgba(120, 100, 70, 0.12); border-color: var(--color-border-hover); color: var(--color-ink); outline: none; } /* =================================================== SECONDARY ACTIONS (About, Substack, Sign In, More) =================================================== */ .secondary-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; max-width: var(--max-width-content); margin: 16px auto 0; } /* =================================================== MORE PROJECTS DROPDOWN =================================================== */ .more-projects { position: relative; display: inline-flex; } .more-projects summary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; font-family: var(--font-display); font-size: 1rem; font-weight: 500; border-radius: var(--radius-pill); border: 1px solid var(--color-border); text-decoration: none; color: var(--color-ink); background: transparent; cursor: pointer; list-style: none; user-select: none; transition: background 160ms ease, border-color 160ms ease; } .more-projects summary::-webkit-details-marker { display: none; } .more-projects summary:hover, .more-projects summary:focus-visible { background: rgba(120, 100, 70, 0.12); border-color: var(--color-border-hover); outline: none; } .more-projects[open] summary { background: rgba(120, 100, 70, 0.12); border-color: var(--color-border-hover); } .more-projects-menu { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); min-width: 260px; background: var(--color-parchment-light); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 8px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 4px 16px var(--color-shadow); z-index: 100; } .more-projects-menu a { padding: 8px 14px; border-radius: 8px; text-decoration: none; color: var(--color-ink); font-size: 0.95rem; transition: background 160ms ease; white-space: nowrap; } .more-projects-menu a:hover, .more-projects-menu a:focus-visible { background: rgba(120, 100, 70, 0.12); outline: none; } .dropdown-divider { height: 1px; background: var(--color-border); margin: 4px 8px; } /* =================================================== SPLASH IMAGE (hidden but kept in markup) =================================================== */ .splash { display: none; } /* =================================================== SECTIONS (general) =================================================== */ .section { max-width: var(--max-width-content); margin: 24px auto 0; padding: 0 4px; } /* =================================================== ABOUT PAGE =================================================== */ .about-page { max-width: var(--max-width-content); margin: 40px auto 0; } .about-card { display: flex; gap: 22px; align-items: center; padding: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-parchment-light); } .avatar { width: 96px; height: 96px; border-radius: var(--radius-pill); object-fit: cover; border: 1px solid var(--color-border); } .about-card h1 { margin: 0; font-size: 1.6rem; } .about-card .subtitle { opacity: 0.7; margin: -4px 0 4px; font-style: italic; } .about-links { margin-top: 28px; } .about-links h2 { font-size: 1.3rem; margin-bottom: 12px; } .project-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 16px; } .project-list a { font-weight: 600; } .project-list p { margin: 6px 0 0; opacity: 0.8; } /* =================================================== CARD (generic) =================================================== */ .card { max-width: var(--max-width-content); margin: 0 auto; padding: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-parchment-light); } .pantheon-card { margin-bottom: 16px; } .pantheon-actions { margin-top: 12px; } /* =================================================== DESIGN SYSTEM PAGE =================================================== */ .ds-page { max-width: var(--max-width-content); margin: 40px auto 0; } .ds-page h1 { font-size: 2.4rem; margin-bottom: 8px; } .ds-page h2 { font-size: 1.5rem; margin-top: 40px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border); } .ds-page h3 { font-size: 1.15rem; margin-top: 24px; margin-bottom: 8px; } .ds-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin: 16px 0; } .ds-swatch { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .ds-swatch-color { height: 72px; } .ds-swatch-label { padding: 8px 10px; font-size: 0.85rem; background: var(--color-parchment-light); } .ds-swatch-label strong { display: block; margin-bottom: 2px; } .ds-swatch-label code { font-size: 0.8rem; } .ds-type-sample { margin: 16px 0; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-parchment-light); } .ds-button-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; } .ds-token-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.95rem; } .ds-token-table th, .ds-token-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--color-border); } .ds-token-table th { font-weight: 600; color: var(--color-ink-faded); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; } /* =================================================== LANDING NAV (Windhover History home) =================================================== */ .landing-nav { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 360px; margin: 48px auto 0; padding: 0 20px; } .landing-nav-link { width: 100%; justify-content: center; font-size: 1.1rem; padding: 14px 24px; } /* =================================================== CREDITS (about page) =================================================== */ .site-credits { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--color-border); } .site-credits h2 { font-size: 1.3rem; margin: 0 0 8px; } .site-credits h3 { font-size: 1.05rem; font-weight: 600; margin: 20px 0 8px; color: var(--color-ink-light); } .credits-intro { font-size: 0.95rem; color: var(--color-ink-faded); margin: 0 0 4px; } .credits-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .credits-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: rgba(245, 240, 225, 0.4); } .credits-meta { font-size: 0.85rem; color: var(--color-ink-faded); } .credits-note { font-size: 0.85rem; font-style: italic; color: var(--color-ink-faded); } /* =================================================== FOOTER =================================================== */ .site-footer { text-align: center; padding: 40px 20px 24px; font-size: 0.9rem; color: var(--color-ink-faded); } .site-footer p { margin: 0; } .site-footer a { color: inherit; text-decoration-color: rgba(120, 100, 70, 0.35); } .site-footer a:hover { color: var(--color-accent); } /* =================================================== RESPONSIVE =================================================== */ @media (max-width: 600px) { .hero-brand { gap: 10px; } .hero-logo { height: 64px; } .hero-title { font-size: 2rem; } .hero-tagline { font-size: 1.1rem; margin: 0 0 0 4px; } .hero { margin-top: 32px; padding-top: 20px; } .main-actions { flex-direction: column; align-items: center; } .about-card { flex-direction: column; text-align: center; } .more-projects-menu { min-width: 220px; } }