/* ========================================================================== THEME.CSS — Brylee Bird Colours, fonts and imagery only. If you ever want to restyle the whole site, this is the only file you touch. Nothing in core.css hard-codes a colour. Palette: warm cream, soft taupe, mocha brown, near-black. Deliberately low-saturation — nothing on the page competes with the content itself, which is the point of a portfolio. ========================================================================== */ :root { /* ---- Fonts ------------------------------------------------------------ Fraunces — soft, warm serif for headlines. Reads editorial, not stuffy. Jost — clean geometric sans for body, buttons and labels. Both load from Google Fonts in the of index.html. */ --font-display: "Fraunces", "Georgia", "Times New Roman", serif; --font-ui: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ---- Neutrals --------------------------------------------------------- Everything is warm. There is no pure white and no pure black anywhere on the page — that is most of what makes it feel expensive instead of like a default template. */ --bg: #F7F3EC; /* cream page background */ --bg-alt: #EFE8DD; /* alternating section background */ --surface: #FDFBF7; /* cards, inputs */ --ink-strong: #1B1613; /* headlines — warm near-black */ --ink: #3D352E; /* body copy */ --ink-soft: #5A5046; /* secondary copy */ --ink-mute: #8C8074; /* labels, captions */ --line: #E3DACC; /* hairlines */ --line-strong: #CFC2AE; /* borders, inputs */ /* ---- Accent — mocha --------------------------------------------------- */ --accent: #9A7A5B; --accent-deep: #6F553E; --accent-soft: #D8C3A8; --accent-tint: #F2E9DC; --accent-glow: rgba(154, 122, 91, .20); /* ---- On dark ---------------------------------------------------------- */ --on-dark: #F7F3EC; --on-dark-mute: #B5A897; --on-ink: #F7F3EC; /* text sitting on the near-black button */ --danger: #A8503F; /* ---- Surfaces & washes ------------------------------------------------ */ --header-bg: rgba(247, 243, 236, .82); /* Placeholder gradient behind every image box. If a photo has not been uploaded yet the page still looks intentional rather than broken. */ --media-bg: linear-gradient(150deg, #E8DFD2 0%, #D9CCBA 52%, #C6B69F 100%); /* Warm light falling across the hero */ --hero-wash: radial-gradient(90% 70% at 78% 8%, rgba(216, 195, 168, .40) 0%, rgba(216, 195, 168, 0) 62%), radial-gradient(70% 60% at 0% 100%, rgba(154, 122, 91, .12) 0%, rgba(154, 122, 91, 0) 60%); } /* -------------------------------------------------------------------------- Type personality Fraunces ships with optical-size and softness axes. Dialling softness up and weight down is what gives the headlines that hand-set look. -------------------------------------------------------------------------- */ h1, h2 { font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144; font-weight: 300; } h3, h4 { font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 24; font-weight: 400; } /* Body sans sits a touch wider than default, which reads calmer */ body { letter-spacing: .006em; } /* Fraunces fuses f+t into a single ligature glyph, which reads as a typo at headline sizes ("after" looked like one broken letter). Ligatures earn their keep in running text, not in five-word headlines, so they come off everywhere the display face is used. Body copy in Jost is untouched. */ h1, h2, h3, h4, .brandmark, .hero__tag, .quote__text, .footer__name, .stat__num, .step__num, .brandstrip__name, .svc__price { font-variant-ligatures: none; } /* The italic display used for the tagline and pull quotes */ .hero__tag, .quote__text { font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 72; }