/* ===================================================================== Havrais Dire — shared styles (design system) Refined warm brand: cream paper, terracotta accents, editorial serif. Sub-sites re-tint the whole system by overriding --accent* on . ===================================================================== */ :root { /* Brand */ --terracotta: #D64826; --terracotta-d: #B23A1D; --coral: #E8825E; --peach: #F6DCCC; --peach-soft: #FBEDE3; --cream: #FAF5EE; --paper: #FFFCF8; --gold: #A8862B; --ink: #2A211D; --ink-soft: #6F625A; --line: rgba(42, 33, 29, .10); /* Accent — clubs/sub-sites override these three to re-tint the UI */ --accent: #D64826; --accent-d: #B23A1D; --accent-soft: #FBEDE3; --maxw: 1140px; --radius: 22px; --shadow: 0 24px 60px -28px rgba(120, 50, 25, .30); --shadow-sm: 0 10px 30px -18px rgba(120, 50, 25, .30); --ease: cubic-bezier(.22, 1, .36, 1); --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Smooth cross-page fades (progressive enhancement, Chromium ≥126) */ @view-transition { navigation: auto; } /* ---------- Reset-ish ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; font-family: var(--sans); color: var(--ink); line-height: 1.65; background-color: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } h1, h2, h3 { font-family: var(--serif); font-weight: 620; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); } ::selection { background: var(--peach); color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; } /* Small-caps section label */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .eyebrow::before { content: ""; width: 26px; height: 1.5px; background: currentColor; opacity: .7; } /* Section scaffolding — hairline rules give the page an editorial rhythm */ .section { padding: 96px 0; } .section + .section > .container { border-top: 1px solid var(--line); padding-top: 96px; } .section + .section { padding-top: 0; } .section h2 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); margin: .1em 0 .5em; } .lead { font-size: 1.14rem; color: var(--ink-soft); max-width: 62ch; } @media (max-width: 700px) { .section { padding: 64px 0; } .section + .section > .container { padding-top: 64px; } } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: .55em; background: var(--accent); color: #fff; padding: .85em 1.6em; border-radius: 999px; font-weight: 600; font-family: var(--sans); font-size: .98rem; border: 1.5px solid var(--accent); transition: transform .3s var(--ease), background .25s ease, border-color .25s ease, box-shadow .3s var(--ease); box-shadow: var(--shadow-sm); } .btn:hover { background: var(--accent-d); border-color: var(--accent-d); transform: translateY(-2px); box-shadow: var(--shadow); } .btn:active { transform: translateY(0); } .btn--ghost { background: transparent; color: var(--accent); box-shadow: none; } .btn--ghost:hover { background: var(--accent); color: #fff; } .btn .arr { transition: transform .3s var(--ease); } .btn:hover .arr { transform: translateX(4px); } /* ===================================================================== BETA NOTICE (injected by main.js — remove via BETA_NOTICE flag) ===================================================================== */ .beta-bar { background: var(--ink); color: var(--cream); font-size: .84rem; line-height: 1.45; } .beta-bar__inner { max-width: var(--maxw); margin-inline: auto; padding: 9px 24px; text-align: center; } .beta-bar strong { color: #F3C77B; font-weight: 650; } @media (max-width: 620px) { .beta-bar { font-size: .78rem; } .beta-bar__inner { padding: 8px 16px; } } /* ===================================================================== NAVBAR (injected by main.js) — floating pill ===================================================================== */ .nav { position: sticky; top: 14px; z-index: 100; padding-inline: 14px; } .nav__inner { max-width: calc(var(--maxw) - 40px); margin-inline: auto; display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 24px; min-height: 58px; background: rgba(255, 252, 248, .82); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 8px 30px -18px rgba(120, 50, 25, .25); transition: box-shadow .3s ease; } .nav.is-scrolled .nav__inner { box-shadow: 0 14px 40px -18px rgba(120, 50, 25, .35); } .nav__brand { margin-right: auto; font-family: var(--serif); font-style: italic; font-weight: 640; font-size: 1.32rem; letter-spacing: -.015em; color: var(--terracotta); transition: opacity .2s ease; } .nav__brand:hover { opacity: .8; } .nav__links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav__link { display: inline-block; padding: 10px 14px; border-radius: 10px; color: var(--ink); font-weight: 550; font-size: .95rem; position: relative; transition: color .15s ease; } .nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1.5px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav__link:hover { color: var(--accent); } .nav__link:hover::after { transform: scaleX(1); } .nav__links .btn { padding: .6em 1.25em; font-size: .92rem; margin-left: 8px; } /* Dropdown / mega-menu */ .nav__item--drop { position: relative; } .nav__toggle { font: inherit; cursor: pointer; background: none; border: 0; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 10px; color: var(--ink); font-weight: 550; font-size: .95rem; transition: color .15s ease; } .nav__toggle .chev { transition: transform .3s var(--ease); } .nav__item--drop[aria-expanded="true"] .chev { transform: rotate(180deg); } .nav__item--drop[aria-expanded="true"] .nav__toggle { color: var(--accent); } .mega { position: absolute; right: 0; top: calc(100% + 12px); width: min(700px, 90vw); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 24px 26px 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 24px; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.99); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } .nav__item--drop[aria-expanded="true"] .mega { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .mega__group { grid-column: span 1; } .mega__heading { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 6px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .mega__link { display: block; padding: 6px 9px; border-radius: 8px; color: var(--ink); font-weight: 550; font-size: .92rem; transition: background .18s ease, color .18s ease, padding-left .2s var(--ease); } .mega__link:hover { background: var(--peach-soft); color: var(--terracotta); padding-left: 14px; } .mega__link .tag { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin-left: 7px; } .mega__all { grid-column: 1 / -1; margin-top: 10px; padding: 12px 9px 8px; border-top: 1px solid var(--line); font-weight: 600; font-size: .92rem; color: var(--terracotta); } .mega__all:hover .arr { transform: translateX(4px); } .mega__all .arr { display: inline-block; transition: transform .3s var(--ease); } /* Hamburger */ .nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .nav__burger span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s var(--ease); } .nav__burger span + span { margin-top: 6px; } .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; } .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } @media (max-width: 900px) { .nav__burger { display: block; order: 3; margin-right: 6px; } .nav__links { position: absolute; left: 14px; right: 14px; top: calc(100% + 8px); flex-direction: column; align-items: stretch; gap: 2px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 12px 18px; box-shadow: var(--shadow); max-height: 0; overflow: hidden; transition: max-height .35s var(--ease), padding .35s var(--ease); padding-block: 0; border-width: 0; } .nav.is-open .nav__links { max-height: 74vh; overflow-y: auto; padding-block: 14px; border-width: 1px; } .nav__link::after { display: none; } .nav__links .btn { display: flex; margin: 8px 0 4px; justify-content: center; } .mega { position: static; width: auto; box-shadow: none; border: 0; padding: 0 6px; grid-template-columns: 1fr; opacity: 1; visibility: visible; transform: none; max-height: 0; overflow: hidden; transition: max-height .35s var(--ease), padding .35s var(--ease); background: transparent; } .nav__item--drop[aria-expanded="true"] .mega { max-height: 1500px; padding: 4px 6px 10px; } } /* ===================================================================== FOOTER (injected by main.js) — dark, modern close to the page ===================================================================== */ .footer { background: #241C17; color: #EFE6DC; margin-top: 96px; } .footer__inner { max-width: var(--maxw); margin-inline: auto; padding: 72px 24px 44px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; } .footer__wordmark { font-family: var(--serif); font-style: italic; font-weight: 640; font-size: 1.9rem; letter-spacing: -.02em; color: #F6DCCC; display: inline-block; margin-bottom: 14px; } .footer__brand p { color: rgba(239, 230, 220, .65); max-width: 36ch; margin: 0 0 20px; font-size: .95rem; } .footer h4 { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(239, 230, 220, .5); margin: 6px 0 16px; } .footer ul { list-style: none; margin: 0; padding: 0; } .footer li { margin-bottom: 10px; } .footer a { color: #EFE6DC; font-weight: 500; font-size: .95rem; transition: color .18s ease; } .footer a:hover { color: var(--coral); } .socials { display: flex; gap: 10px; } .socials a { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(239, 230, 220, .08); color: #EFE6DC; border: 1px solid rgba(239, 230, 220, .14); transition: transform .3s var(--ease), background .2s ease, color .2s ease; } .socials a:hover { transform: translateY(-3px); background: var(--terracotta); border-color: var(--terracotta); color: #fff; } .socials svg { width: 19px; height: 19px; } .footer__bottom { border-top: 1px solid rgba(239, 230, 220, .12); text-align: center; padding: 20px 24px; color: rgba(239, 230, 220, .45); font-size: .85rem; } .footer__bottom a { color: rgba(239, 230, 220, .65); } .footer__bottom a:hover { color: var(--coral); } @media (max-width: 780px) { .footer__inner { grid-template-columns: 1fr; gap: 30px; padding-block: 54px 34px; } } /* ===================================================================== Scroll-reveal (driven by main.js) ===================================================================== */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: .08s; } .reveal[data-delay="2"] { transition-delay: .16s; } .reveal[data-delay="3"] { transition-delay: .24s; } .reveal[data-delay="4"] { transition-delay: .32s; } .reveal[data-delay="5"] { transition-delay: .40s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }