/* ========================================================================= Girls On The Green — Marketing site styles Layered on top of colors_and_type.css. Inverts the default palette: green-dominant (60), cream paper (25), blush accent (10), claret pop (5). ========================================================================= */ :root { /* Re-tune neutrals: warm cream paper, not pink. */ --gg-paper: #FAF5EA; /* warm off-white, the "second" surface */ --gg-paper-deep: #F1E9D6; /* a hair darker for inset bands */ --gg-ink: #1B2A20; /* near-black green-tinted ink */ /* Re-map semantics for a green-dominant site */ --bg: var(--gg-green); --bg-paper: var(--gg-paper); --bg-blush: var(--gg-pink); --fg: var(--gg-pink); /* default text reads on green */ --fg-on-paper: var(--gg-green); --fg-on-blush: var(--gg-burgundy); --fg-muted-light:rgba(252, 212, 208, 0.7); --max-w: 1200px; --gutter: clamp(20px, 5vw, 64px); /* Soften the logo offset so it reads like a hairline, not a stamp */ --logo-offset: 2px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); } html { /* Offset in-page anchor jumps (e.g. #join) so targets clear the sticky header. */ scroll-padding-top: 110px; /* Kill horizontal scroll. overflow-x on alone is unreliable on iOS Safari, so clip at the root too. `clip` (not `hidden`) avoids creating a scroll container, so the sticky nav keeps working. */ overflow-x: clip; max-width: 100%; } body { font-size: 16px; line-height: 1.55; overflow-x: clip; max-width: 100%; /* Containing block for absolutely-positioned decorations (tape, badges) so their negative offsets get clipped instead of widening the page. */ position: relative; } img { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; cursor: pointer; } /* Reusable long-form body — sentence case Tinos for paragraphs */ .prose { font-family: var(--font-body); font-size: 17px; line-height: 1.6; font-weight: 400; letter-spacing: 0; text-transform: none; } .prose p + p { margin-top: 1em; } /* ========================================================================= Layout primitives ========================================================================= */ .wrap { max-width: var(--max-w); margin: 0 auto; padding-inline: var(--gutter); } .surface-green { background: var(--gg-green); color: var(--gg-pink); } .surface-green .fg-script { color: var(--gg-pink); } .surface-paper { background: var(--bg-paper); color: var(--gg-green); } .surface-blush { background: var(--gg-pink); color: var(--gg-burgundy); } /* Subtle scalloped transition between bands — paper top edge over green */ .deckle-top { position: relative; } .deckle-top::before { content: ""; position: absolute; inset: -1px 0 auto 0; height: 14px; background: radial-gradient(ellipse 14px 14px at 14px 0, var(--bg-paper) 13px, transparent 14px) repeat-x; background-size: 28px 14px; pointer-events: none; } /* ========================================================================= Top navigation ========================================================================= */ .nav { position: sticky; top: 0; z-index: 40; background: var(--gg-green); border-bottom: 1px solid rgba(252, 212, 208, 0.18); } .nav__inner { max-width: var(--max-w); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .nav__brand { display: inline-flex; align-items: center; gap: 0; text-decoration: none; color: var(--gg-pink); line-height: 1; } .nav__brand-logo { display: block; height: 60px; width: auto; /* Asset has a solid --gg-green background that matches the nav, so it blends seamlessly. The crop ratio is ~1.025:1. */ } @media (min-width: 760px) { .nav__brand-logo { height: 68px; } } .nav__links { display: none; gap: 28px; align-items: center; } .nav__link { font-family: var(--font-body); font-weight: 700; font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gg-pink); text-decoration: none; padding: 4px 2px; position: relative; } .nav__link:hover, .nav__link[aria-current="page"] { color: var(--gg-pink); } .nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--gg-burgundy); } .nav__cta { display: none; background: var(--gg-pink); color: var(--gg-burgundy); border: 1.5px solid var(--gg-pink); border-radius: 999px; padding: 9px 18px; font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; } .nav__cta:hover { background: var(--gg-burgundy); color: var(--gg-pink); border-color: var(--gg-burgundy); } .nav__menu-btn { background: transparent; border: 1.5px solid var(--gg-pink); border-radius: 999px; color: var(--gg-pink); font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; padding: 8px 14px; } .nav__sheet { display: none; position: fixed; inset: 0; background: #1F4430; z-index: 50; padding: 80px var(--gutter) var(--gutter); overflow-y: auto; } .nav__sheet[open] { display: block; } .nav__sheet-close { position: absolute; top: 18px; right: var(--gutter); background: transparent; border: 1.5px solid var(--gg-pink); color: var(--gg-pink); border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; padding: 8px 14px; } .nav__sheet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .nav__sheet-list a { display: block; font-family: var(--font-display); font-size: 44px; line-height: 1.05; color: var(--gg-pink); text-shadow: 2px 2px 0 var(--gg-burgundy); text-decoration: none; padding: 8px 0; text-align: center; } .nav__sheet-list a .script { font-family: var(--font-script); text-shadow: 2px 2px 0 var(--gg-burgundy); margin-left: 8px; display: inline-block; transform: translateY(6px); } .nav__sheet-tag { margin-top: 32px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--fg-muted-light); } @media (min-width: 760px) { .nav__links { display: inline-flex; } .nav__cta { display: inline-flex; align-items: center; } .nav__menu-btn { display: none; } } /* ========================================================================= Hero — green canvas with offset wordmark ========================================================================= */ .hero { position: relative; background: var(--gg-green); color: var(--gg-pink); padding: 56px var(--gutter) 64px; overflow: hidden; } .hero__inner { max-width: var(--max-w); margin: 0 auto; position: relative; } .hero__eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-muted-light); margin-bottom: 24px; display: inline-flex; align-items: center; gap: 12px; } .hero__eyebrow::before, .hero__eyebrow::after { content: ""; width: 28px; height: 1px; background: rgba(252, 212, 208, 0.4); } .hero__wordmark { font-family: var(--font-display); color: var(--gg-pink); text-shadow: var(--logo-offset) var(--logo-offset) 0 var(--gg-burgundy); line-height: 0.92; letter-spacing: -0.01em; margin: 0; font-size: clamp(64px, 14vw, 168px); font-weight: 400; } .hero__wordmark .line { display: block; } /* "Every girl belongs on the Green." variant — longer phrase, scale down */ .hero__wordmark--belongs { font-size: clamp(48px, 9.5vw, 124px); line-height: 0.94; } /* Events hero headline — sized to fit "What we're up to, all summer." */ .hero__wordmark--events { font-size: clamp(56px, 9vw, 96px); line-height: 0.96; } /* --- STACK: three left-aligned lines, fully responsive so it fits any width down to small phones. "Green." rides its own script line, so there is no baseline conflict with the roman text above it. --- */ .hero__wordmark--stack { font-size: clamp(46px, 7.6vw, 116px); line-height: 0.9; text-align: left; } .hero__wordmark--stack .line { display: block; } .hero__wordmark--stack .line--lead { font-size: 1em; } .hero__wordmark--stack .line--mid { font-size: 0.74em; line-height: 0.96; } .hero__wordmark--stack .line--script { margin-top: 0.04em; } .hero__wordmark--stack .script { font-family: var(--font-script); font-size: 1.42em; line-height: 0.9; display: inline-block; vertical-align: baseline; margin-left: 0; text-shadow: var(--logo-offset) var(--logo-offset) 0 var(--gg-burgundy); } /* ========================================================================= Headline variants — the .hero__wordmark-host shows exactly one child based on its data-headline attribute. Default "stack" matches the original editorial layout; others let the user audition typographic takes via the Tweaks panel. ========================================================================= */ .hero__wordmark-host { position: relative; } .hero__wordmark-host > .hero__wordmark { display: none; } .hero__wordmark-host[data-headline="stack"] > [data-variant="stack"], .hero__wordmark-host[data-headline="block"] > [data-variant="block"], .hero__wordmark-host[data-headline="script-led"] > [data-variant="script-led"], .hero__wordmark-host[data-headline="compact"] > [data-variant="compact"], .hero__wordmark-host[data-headline="manifesto"] > [data-variant="manifesto"] { display: block; } /* --- BLOCK: all-caps, all-display, deep claret offset --- */ .hero__wordmark--block { font-family: var(--font-display); color: var(--gg-pink); text-shadow: 4px 4px 0 var(--gg-burgundy); line-height: 0.92; letter-spacing: 0.005em; text-transform: uppercase; font-size: clamp(40px, 8.5vw, 116px); margin: 0; font-weight: 400; } .hero__wordmark--block .line { display: block; } /* --- SCRIPT-LED: Allura up top, display below --- */ .hero__wordmark--script-led { font-family: var(--font-display); color: var(--gg-pink); line-height: 0.92; margin: 0; font-weight: 400; font-size: clamp(48px, 9.5vw, 124px); } .hero__wordmark--script-led .line { display: block; } .hero__wordmark--script-led .line:first-child { /* "Every girl" in script — leads with personality */ margin-bottom: 0.04em; } .hero__wordmark--script-led .line:first-child .script { font-family: var(--font-script); font-size: 1.15em; line-height: 0.85; text-shadow: 3px 3px 0 var(--gg-burgundy); display: inline-block; } .hero__wordmark--script-led .line:nth-child(2) { padding-left: 0.18em; } .hero__wordmark--script-led .line:nth-child(2) .small { font-size: 0.38em; letter-spacing: 0.02em; text-transform: uppercase; font-family: var(--font-body); font-weight: 700; color: var(--gg-pink); opacity: 0.85; vertical-align: 0.4em; } .hero__wordmark--script-led .line:nth-child(3) { padding-left: 0.06em; text-shadow: 4px 4px 0 var(--gg-burgundy); } /* --- COMPACT: 2 punchy lines --- */ .hero__wordmark--compact { font-family: var(--font-display); color: var(--gg-pink); text-shadow: var(--logo-offset, 3px) var(--logo-offset, 3px) 0 var(--gg-burgundy); line-height: 0.96; margin: 0; font-weight: 400; font-size: clamp(44px, 8vw, 104px); } .hero__wordmark--compact .line { display: block; } .hero__wordmark--compact .line:nth-child(2) { padding-left: 0.08em; margin-top: 0.06em; } .hero__wordmark--compact .small { font-family: var(--font-display); font-size: 0.5em; margin-right: 0.18em; vertical-align: 0.16em; letter-spacing: 0.01em; } .hero__wordmark--compact .script { font-family: var(--font-script); font-size: 1em; display: inline-block; line-height: 0.85; } /* --- MANIFESTO: italic prose + script flourish --- */ .hero__wordmark--manifesto { font-family: "iowan-old-style", "Cormorant Garamond", "Times New Roman", serif; color: var(--gg-pink); line-height: 1.02; margin: 0; font-weight: 400; font-style: italic; font-size: clamp(36px, 6.4vw, 80px); letter-spacing: -0.005em; } .hero__wordmark--manifesto .line { display: block; } .hero__wordmark--manifesto .manifesto-prose { font-style: italic; } .hero__wordmark--manifesto .line:last-child { font-style: normal; margin-top: 0.04em; padding-left: 0.4em; } .hero__wordmark--manifesto .script { font-family: var(--font-script); font-size: 2em; line-height: 0.78; text-shadow: 4px 4px 0 var(--gg-burgundy); display: inline-block; } .hero__wordmark .small { font-family: var(--font-display); font-size: 0.42em; letter-spacing: 0.01em; vertical-align: 0.18em; margin-left: 0.18em; } .hero__wordmark .script { font-family: var(--font-script); font-size: 0.78em; display: inline-block; line-height: 1; vertical-align: -0.04em; margin-left: 0.12em; } .hero__tagline { font-family: var(--font-body); font-size: clamp(15px, 2.2vw, 18px); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.55; max-width: 38ch; margin: 28px 0 0; color: var(--gg-pink); } .hero__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; } .hero__pill-row { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 18px 28px; font-family: var(--font-body); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted-light); } .hero__pill-row span { display: inline-flex; align-items: center; gap: 8px; } /* Split layout: text + group photo */ .hero__inner--split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } .hero__text { min-width: 0; } .hero__photo { position: relative; margin: 0; width: 100%; aspect-ratio: 3 / 4; /* Soft green placeholder behind the photo. Reads as "the green tones are still loading" instead of the dark-red "broken page" burgundy flash. */ background: linear-gradient(180deg, #3a6b50 0%, #2c5c41 40%, #1f4631 100%); box-shadow: 10px 10px 0 0 var(--gg-burgundy), 0 30px 60px -20px rgba(0,0,0,0.45); transform: rotate(0.6deg); } .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.02) contrast(1.02); } .hero__photo-cap { position: absolute; left: 14px; bottom: 14px; right: 14px; display: flex; align-items: end; justify-content: space-between; gap: 12px; color: var(--gg-pink); text-shadow: 0 1px 6px rgba(0,0,0,0.55); pointer-events: none; } .hero__photo-cap-script { font-family: var(--font-script); font-size: clamp(22px, 2.4vw, 30px); line-height: 1; } .hero__photo-cap-meta { font-family: var(--font-body); white-space: nowrap; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.9; text-align: right; line-height: 1.4; } /* Little paper-tape corners — nod to the scrapbook feel of the brand */ .hero__photo-tape { position: absolute; width: 78px; height: 22px; background: rgba(252, 212, 208, 0.72); box-shadow: 0 1px 3px rgba(0,0,0,0.18); pointer-events: none; } .hero__photo-tape--tl { top: -10px; left: -18px; transform: rotate(-18deg); } .hero__photo-tape--br { bottom: -12px; right: -16px; transform: rotate(14deg); background: rgba(255, 247, 246, 0.78); } @media (min-width: 760px) { .hero { padding: 88px var(--gutter) 112px; } .hero__inner--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; } .hero__photo { transform: rotate(1.2deg); } } @media (min-width: 1100px) { .hero__inner--split { gap: 96px; } .hero__photo { aspect-ratio: 4 / 5; /* width must stay definite: an auto margin would make this grid item shrink to its (zero) in-flow content, collapsing the aspect-ratio box. */ width: min(100%, 520px); justify-self: end; } } /* ========================================================================= Who-we-are layout: prose + founders photo side-by-side on desktop ========================================================================= */ .who__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 860px) { .who__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; } } @media (min-width: 1100px) { .who__grid { gap: 96px; } } /* ========================================================================= Founders photo — landscape framed portrait with burgundy offset + tape ========================================================================= */ .founders-photo { position: relative; margin: 0 auto; width: 100%; aspect-ratio: 4 / 3; background: var(--gg-burgundy); box-shadow: 10px 10px 0 0 var(--gg-burgundy), 0 30px 60px -20px rgba(0,0,0,0.35); transform: rotate(-0.8deg); max-width: 640px; } .founders-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.02); } .founders-photo figcaption { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: end; justify-content: space-between; gap: 12px; color: var(--gg-pink); text-shadow: 0 1px 6px rgba(0,0,0,0.55); pointer-events: none; } .founders-photo__script { font-family: var(--font-script); font-size: clamp(22px, 2.4vw, 30px); line-height: 1; } .founders-photo__meta { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; text-align: right; line-height: 1.4; } .founders-photo__tape { position: absolute; width: 90px; height: 24px; background: rgba(252, 212, 208, 0.78); box-shadow: 0 1px 3px rgba(0,0,0,0.18); pointer-events: none; } .founders-photo__tape--tl { top: -12px; left: -20px; transform: rotate(-14deg); } .founders-photo__tape--br { bottom: -14px; right: -18px; transform: rotate(12deg); background: rgba(255, 247, 246, 0.82); } @media (min-width: 760px) { .founders-photo { transform: rotate(-1.2deg); } } /* Decorative golf-pin flag — restored for inner-page heroes (events, about, partners). On index.html the hero uses the group photo instead, so any inline .hero__pin there should be removed; these styles keep it as a faint, behind-the-content flourish on the other pages. */ .hero__pin { position: absolute; top: 24px; right: 0; width: clamp(120px, 18vw, 200px); height: auto; opacity: 0.18; pointer-events: none; z-index: 0; } @media (min-width: 760px) { .hero__pin { right: 24px; top: 48px; opacity: 0.22; } } /* Decorative cutout stickers — little pink coasters pinned to the green felt, each holding one of the brand line drawings. */ .hero__sticker { position: absolute; pointer-events: none; z-index: 0; display: grid; place-items: center; background: var(--gg-pink); border-radius: 50%; box-shadow: 4px 4px 0 var(--gg-burgundy); } .hero__sticker img { display: block; width: 72%; height: 72%; object-fit: contain; /* dashed inner ring */ } .hero__sticker::before { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(129, 44, 44, 0.35); border-radius: 50%; pointer-events: none; } .hero__sticker--cart { width: 130px; height: 130px; bottom: 16px; right: 6%; transform: rotate(-6deg); } .hero__sticker--wine { width: 96px; height: 96px; bottom: 100px; right: calc(6% + 120px); transform: rotate(10deg); } @media (min-width: 760px) { .hero__sticker--cart { width: 168px; height: 168px; bottom: 40px; right: 7%; } .hero__sticker--wine { width: 124px; height: 124px; bottom: 150px; right: calc(7% + 160px); } } @media (max-width: 520px) { .hero__sticker--wine { display: none; } .hero__sticker--cart { width: 100px; height: 100px; right: 4%; bottom: 12px; } } /* ========================================================================= Buttons ========================================================================= */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 700; font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; padding: 14px 24px; border-radius: 999px; text-decoration: none; border: 1.5px solid transparent; transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--pink { background: var(--gg-pink); color: var(--gg-burgundy); border-color: var(--gg-pink); } .btn--pink:hover { background: var(--gg-burgundy); color: var(--gg-pink); border-color: var(--gg-burgundy); } .btn--ghost-pink { background: transparent; color: var(--gg-pink); border-color: var(--gg-pink); } .btn--ghost-pink:hover { background: var(--gg-pink); color: var(--gg-burgundy); } .btn--green { background: var(--gg-green); color: var(--gg-pink); border-color: var(--gg-green); } .btn--green:hover { background: var(--gg-burgundy); color: var(--gg-pink); border-color: var(--gg-burgundy); } .btn--ghost-green { background: transparent; color: var(--gg-green); border-color: var(--gg-green); } .btn--ghost-green:hover { background: var(--gg-green); color: var(--gg-pink); } .btn .arr { display: inline-block; transition: transform .15s ease; } .btn:hover .arr { transform: translateX(3px); } /* ========================================================================= Section scaffolding ========================================================================= */ .section { padding: 72px var(--gutter); } @media (min-width: 760px) { .section { padding: 112px var(--gutter); } } .section__inner { max-width: var(--max-w); margin: 0 auto; } .section__eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 11.5px; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 16px; color: var(--gg-burgundy); display: inline-flex; align-items: center; gap: 10px; } .section__eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--gg-burgundy); } .section__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 6.5vw, 76px); line-height: 0.98; letter-spacing: -0.01em; margin: 0 0 20px; } .section__title .script { font-family: var(--font-script); display: inline-block; transform: translateY(0.18em); margin-left: 0.12em; color: var(--gg-burgundy); } .section__lede { font-family: var(--font-body); font-size: 18px; line-height: 1.6; font-weight: 400; letter-spacing: 0; text-transform: none; max-width: 60ch; margin: 0; } /* ========================================================================= Photo placeholders — striped, with monospace explainer caption ========================================================================= */ .photo { position: relative; background: repeating-linear-gradient( 135deg, rgba(124, 159, 121, 0.18) 0 10px, rgba(124, 159, 121, 0.08) 10px 20px ), var(--gg-sage); border-radius: 4px; overflow: hidden; color: var(--gg-paper); isolation: isolate; } .photo--paper { background: repeating-linear-gradient( 135deg, rgba(44, 92, 65, 0.10) 0 10px, rgba(44, 92, 65, 0.04) 10px 20px ), var(--gg-paper-deep); color: var(--gg-green); } .photo--blush { background: repeating-linear-gradient( 135deg, rgba(129, 44, 44, 0.10) 0 10px, rgba(129, 44, 44, 0.03) 10px 20px ), var(--gg-pink); color: var(--gg-burgundy); } .photo__caption { position: absolute; bottom: 10px; left: 12px; right: 12px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.85; display: flex; align-items: center; gap: 6px; } .photo__caption::before { content: "▢"; font-size: 9px; opacity: 0.6; } .photo--ratio-4x3 { aspect-ratio: 4 / 3; } .photo--ratio-1x1 { aspect-ratio: 1 / 1; } .photo--ratio-3x4 { aspect-ratio: 3 / 4; } .photo--ratio-16x9 { aspect-ratio: 16 / 9; } .photo--ratio-21x9 { aspect-ratio: 21 / 9; } /* ========================================================================= "Featured event" card ========================================================================= */ .feature-event { display: grid; grid-template-columns: 1fr; gap: 24px; background: var(--gg-paper); color: var(--gg-green); border: 1.5px solid var(--gg-burgundy); border-radius: 4px; overflow: hidden; } .feature-event__media { position: relative; min-height: 220px; } .feature-event__body { padding: 28px; display: flex; flex-direction: column; gap: 16px; } .feature-event__date { display: inline-flex; align-items: stretch; border: 1.5px solid var(--gg-burgundy); border-radius: 999px; overflow: hidden; align-self: flex-start; font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; } .feature-event__date span { padding: 8px 14px; } .feature-event__date .a { background: var(--gg-pink); color: var(--gg-burgundy); } .feature-event__date .b { background: var(--gg-burgundy); color: var(--gg-pink); } .feature-event__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 5vw, 56px); line-height: 1; letter-spacing: -0.01em; margin: 0; } .feature-event__title .amp { font-family: var(--font-script); color: var(--gg-burgundy); display: inline-block; transform: translateY(0.18em); margin: 0 0.06em; } .feature-event__meta { font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--gg-burgundy); display: flex; flex-wrap: wrap; gap: 6px 18px; } .feature-event__copy { font-family: var(--font-body); font-size: 16px; line-height: 1.6; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gg-ink); margin: 0; } .feature-event__cta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 10px; } @media (min-width: 760px) { .feature-event { grid-template-columns: 5fr 6fr; } .feature-event__media { min-height: 100%; } .feature-event__body { padding: 40px; gap: 20px; } } /* ========================================================================= Partner logo strip (home + dedicated page reuse) ========================================================================= */ .partner-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; padding-top: 12px; } .partner-strip__name { font-family: var(--font-display); font-size: 22px; color: var(--gg-burgundy); letter-spacing: 0; white-space: nowrap; } .partner-strip__sep { width: 6px; height: 6px; border-radius: 50%; background: var(--gg-burgundy); opacity: 0.5; } /* Mobile: stack names vertically, drop the floating bullet separators */ @media (max-width: 600px) { .partner-strip { flex-direction: column; gap: 10px; } .partner-strip__name { font-size: 20px; white-space: normal; text-align: center; } .partner-strip__sep { display: none; } } /* Partner names laid out as a balanced grid — three across, two rows. */ .partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 36px; padding-top: 12px; max-width: 760px; margin: 0 auto; } .partner-grid__name { font-family: var(--font-display); font-size: 22px; color: var(--gg-burgundy); letter-spacing: 0; text-align: center; } /* Mobile: two across so the names stay readable without crowding. */ @media (max-width: 600px) { .partner-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; } .partner-grid__name { font-size: 18px; } } /* ========================================================================= Instagram grid placeholders ========================================================================= */ .ig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @media (min-width: 600px) { .ig-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; } } @media (min-width: 900px) { .ig-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; } } .ig-tile { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; text-decoration: none; isolation: isolate; } .ig-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .ig-tile:hover img { transform: scale(1.04); } .ig-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,42,32,0) 60%, rgba(27,42,32,0.35) 100%); opacity: 0; transition: opacity .25s ease; z-index: 1; } .ig-tile:hover::after { opacity: 1; } /* ========================================================================= Join / RSVP ribbon ========================================================================= */ .ribbon { background: var(--gg-pink); color: var(--gg-burgundy); border-top: 1.5px solid var(--gg-burgundy); border-bottom: 1.5px solid var(--gg-burgundy); padding: 64px var(--gutter); position: relative; } .ribbon__inner { max-width: 900px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; } .ribbon__kicker { font-family: var(--font-script); font-size: clamp(32px, 5vw, 52px); line-height: 1; color: var(--gg-burgundy); } .ribbon__title { font-family: var(--font-display); font-size: clamp(36px, 6vw, 64px); line-height: 1; margin: 0; color: var(--gg-green); text-shadow: 2px 2px 0 var(--gg-burgundy); } .ribbon__copy { font-family: var(--font-body); font-size: 17px; line-height: 1.55; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gg-burgundy); max-width: 56ch; margin: 0; } /* ========================================================================= Footer ========================================================================= */ .footer { background: var(--gg-green); color: var(--gg-pink); padding: 72px var(--gutter) 48px; position: relative; } .footer__inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 36px; } .footer__mark { margin: 0; line-height: 0; } .footer__mark-logo { display: block; height: 140px; width: auto; /* Asset bg matches the green footer; blends seamlessly. */ } @media (max-width: 600px) { .footer__mark-logo { height: 110px; } } .footer__tag { margin-top: 12px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted-light); } .footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; } .footer__col h4 { font-family: var(--font-body); font-weight: 700; font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gg-pink); margin: 0 0 14px; opacity: 0.7; } .footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .footer__col a { font-family: var(--font-body); font-size: 15px; color: var(--gg-pink); text-decoration: none; letter-spacing: 0; text-transform: none; font-weight: 400; } .footer__col a:hover { text-decoration: underline; text-decoration-color: var(--gg-burgundy); text-underline-offset: 4px; } .footer__ornament { position: absolute; right: var(--gutter); bottom: 16px; width: 120px; opacity: 0.3; filter: brightness(1.4) saturate(0.6); pointer-events: none; } .footer__bottom { border-top: 1px solid rgba(252, 212, 208, 0.18); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted-light); } .footer__bottom a { color: inherit; text-decoration: none; } .footer__bottom a:hover { color: var(--gg-pink); text-decoration: underline; text-underline-offset: 4px; } @media (min-width: 760px) { .footer__inner { grid-template-columns: 1.2fr 2fr; gap: 64px; } .footer__cols { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================= Checker flag motif — small punctuation accent ========================================================================= */ .check { display: inline-block; width: 18px; height: 18px; background: linear-gradient(var(--gg-burgundy) 0 0) 0 0 / 50% 50% no-repeat, linear-gradient(var(--gg-burgundy) 0 0) 100% 100% / 50% 50% no-repeat; vertical-align: -2px; } .check--pink { background: linear-gradient(var(--gg-pink) 0 0) 0 0 / 50% 50% no-repeat, linear-gradient(var(--gg-pink) 0 0) 100% 100% / 50% 50% no-repeat; } /* ========================================================================= Helpers ========================================================================= */ /* ========================================================================= Gallery strip — continuous marquee of polaroids under the hero ========================================================================= */ .gallery-strip { position: relative; padding: 56px 0 64px; overflow: hidden; border-top: 1px solid rgba(129,44,44,0.18); border-bottom: 1px solid rgba(129,44,44,0.18); } .gallery-strip__label { max-width: var(--max-w); margin: 0 auto 28px; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; } .gallery-strip__script { font-family: var(--font-script); font-size: clamp(36px, 4.4vw, 54px); line-height: 1; color: var(--gg-burgundy); text-shadow: none; } .gallery-strip__meta { font-family: var(--font-body); font-weight: 700; font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gg-burgundy); opacity: 0.75; } .gallery-strip__viewport { width: 100%; overflow: hidden; /* soft fade-out edges so the loop feels endless */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); } .gallery-strip__track { display: flex; gap: 28px; width: max-content; padding: 24px 14px; animation: gallery-marquee 90s linear infinite; will-change: transform; } .gallery-strip:hover .gallery-strip__track, .gallery-strip:focus-within .gallery-strip__track { animation-play-state: paused; } @keyframes gallery-marquee { from { transform: translate3d(0, 0, 0); } /* 50% because the track is duplicated 1:1 */ to { transform: translate3d(-50%, 0, 0); } } .gallery-card { flex: 0 0 auto; margin: 0; width: clamp(180px, 22vw, 260px); aspect-ratio: 3 / 4; background: var(--gg-paper); padding: 10px 10px 36px; box-shadow: 6px 6px 0 0 var(--gg-green), 0 18px 36px -16px rgba(0,0,0,0.35); transform: rotate(var(--tilt, 0deg)); transition: transform 0.35s ease, box-shadow 0.35s ease; position: relative; } .gallery-card:hover { transform: rotate(0deg) translateY(-4px) scale(1.02); box-shadow: 8px 10px 0 0 var(--gg-green), 0 24px 48px -16px rgba(0,0,0,0.4); z-index: 2; } .gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; background: #2A3D2E; } /* Make some cards wider/landscape for rhythm */ .gallery-card:nth-child(4n+2) { aspect-ratio: 4 / 5; } .gallery-card:nth-child(6n+3) { aspect-ratio: 1 / 1; } @media (prefers-reduced-motion: reduce) { .gallery-strip__track { animation: none; } .gallery-strip__viewport { overflow-x: auto; } } @media (max-width: 640px) { .gallery-strip { padding: 40px 0 48px; } .gallery-strip__track { gap: 18px; animation-duration: 70s; } .gallery-card { width: clamp(150px, 60vw, 220px); } } .center { text-align: center; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================= Mobile (<= 720px). Unified center axis plus tightened type. Hero, eyebrow, headline, tagline, CTAs all share one center axis. Long-form prose stays left-aligned but the column centers in its parent. ========================================================================= */ @media (max-width: 720px) { /* ---------- Hero, all pages ---------- Home uses .hero__text; Events / Partners / About use .hero__inner directly. Center both. */ .hero__inner, .hero__text { text-align: center; } .hero__eyebrow { /* inline-flex needs an inline-level centering hook */ display: inline-flex; margin-left: auto; margin-right: auto; } .hero__wordmark, .hero__wordmark .line { text-align: center; padding-left: 0 !important; /* kill the desktop ragged indents */ } .hero__tagline { margin-left: auto; margin-right: auto; max-width: 38ch; } .hero__ctas, .hero__pill-row { justify-content: center; } /* ---------- Hero type scale: predictable across pages ---------- */ .hero__wordmark--belongs, /* Home */ .hero__wordmark { /* Events / Partners / About generic */ font-size: clamp(40px, 10.5vw, 56px); line-height: 1.0; } .hero__tagline { font-size: 16px; line-height: 1.5; } /* ---------- Section headers (eyebrow + title pairs) ---------- */ .section__eyebrow { display: inline-flex; margin-left: auto; margin-right: auto; } /* Eyebrow sitting directly under .section__inner (e.g. Home "OUR PARTNERS"). inline-flex won't center on its own here, so switch to flex and center the dash + text as a unit. */ .section__inner > .section__eyebrow { display: flex; justify-content: center; margin-left: auto; margin-right: auto; } .section__title { text-align: center; font-size: clamp(32px, 8vw, 44px); text-wrap: balance; } /* The "title left / button right" rows on Home + Events + Partners. Inline styles use `justify-content:space-between`; stack and center. The inline styles also carry `align-items:end`, which beats a plain class rule and pushes children to the right edge once we go column — hence the !important on align-items. */ .section .section__inner > div[style*="justify-content:space-between"], .section .section__inner > div[style*="justify-content: space-between"] { flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center; } .section .section__inner > div[style*="justify-content:space-between"] > div, .section .section__inner > div[style*="justify-content: space-between"] > div { text-align: center; width: 100%; } /* ---------- Body copy: column centered, text stays left ---------- */ .prose, .who__grid .prose, .founders__intro, .section__lede { text-align: left; margin-left: auto; margin-right: auto; max-width: 36ch; } /* About-page intro paragraph has an inline style="text-align:center". Respect the centered look but cap the column. */ .founders__intro p[style*="text-align: center"], .founders__intro p[style*="text-align:center"] { max-width: 38ch !important; } /* ---------- Featured event card ---------- */ .feature-event__body { text-align: center; align-items: center; } .feature-event__date { align-self: center; } .feature-event__cta { justify-content: center; } .feature-event__meta { justify-content: center; } .feature-event__copy { text-align: left; max-width: 36ch; margin-left: auto; margin-right: auto; } /* ---------- Who / founders / surface-green sections ---------- */ .who__grid > div:not(.founders-photo) { text-align: center; } /* ---------- Ribbon ---------- */ .ribbon__title { font-size: 36px; line-height: 1.05; } .ribbon__copy { font-size: 16px; max-width: 36ch; } .ribbon__kicker { font-size: 32px; } /* ---------- Partner strip on home ---------- */ .partner-strip { gap: 10px 18px; } .partner-strip__name { font-size: 18px; } /* ---------- Decorative hero pin: keep it inside the viewport ---------- */ .hero__pin { right: 0; width: clamp(80px, 22vw, 140px); opacity: 0.14; } /* ---------- Footer ---------- */ .footer__inner { text-align: center; justify-items: center; } .footer__cols { justify-items: center; text-align: center; } .footer__col { width: 100%; } .footer__bottom { justify-content: center; } /* ---------- Events page: center the month toolbar ---------- The view toggle is hidden on mobile, so the space-between toolbar would otherwise leave the month nav flush left. */ .ev-toolbar { justify-content: center !important; } .ev-monthnav { justify-content: center; } /* ---------- Events hero: give the cart sticker room ---------- The hero clips overflow, so extra bottom padding grows the green band and drops the cart below the three-line tagline. The hero carries an inline padding-bottom, hence !important. */ body[data-screen-label="03 Events"] .hero, .hero:has(.hero__sticker--cart) { padding-bottom: 140px !important; } .hero__sticker--cart { bottom: 18px; right: 6%; width: 88px; height: 88px; } /* ---------- Buttons fit narrow viewports ---------- */ .btn { padding: 13px 20px; font-size: 12px; } } /* ---------- Even narrower phones (<= 400px) ---------- */ @media (max-width: 400px) { .hero__wordmark--belongs, .hero__wordmark { font-size: clamp(36px, 11vw, 48px); } .section__title { font-size: clamp(28px, 8.5vw, 38px); } .prose, .section__lede { max-width: 32ch; } }