/* ============================================================ GABE RENE LLC — DESIGN SYSTEM ENTRY POINT Consumers link this one file. Import order matters: fonts and tokens first, utility classes last. Source of truth: reference/brand_source.html ============================================================ */ @import url('tokens/fonts.css'); @import url('tokens/colors.css'); @import url('tokens/typography.css'); @import url('tokens/spacing.css'); @import url('tokens/base.css'); /* GRW: Kind Avenue subhead tracking */ .gr-sub { letter-spacing: .035em; } /* ============================================================ GRW — motion + hover enhancements (site-wide) Scroll-reveal is gated on .has-anim (added to by /site-enhance.js only when motion is allowed), so no-JS and reduced-motion users always see fully-visible content. ============================================================ */ /* Horizontal transforms below can briefly push content past the edge mid-sweep; clip it at the page level so no horizontal scrollbar ever appears. */ html { overflow-x: hidden; } @media (prefers-reduced-motion: no-preference) { .has-anim [data-reveal] { opacity: 0; transition: opacity .8s ease, transform .9s cubic-bezier(.16,.84,.34,1); will-change: opacity, transform; } .has-anim [data-reveal="left"] { transform: translateX(-70px); } .has-anim [data-reveal="right"] { transform: translateX(70px); } .has-anim [data-reveal="up"] { transform: translateY(34px); } .has-anim [data-reveal].in-view { opacity: 1; transform: none; } /* Trendy Booth character — gentle continuous bob + tilt, gets excited on hover */ .tb-mascot { animation: tbBob 3.4s ease-in-out infinite; transform-origin: 50% 80%; } .tb-mascot:hover { animation-duration: .7s; } @keyframes tbBob { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-7px); } } } /* Hover micro-interactions (always on, transitions are harmless w/o motion) */ .gr-btn { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease; } .gr-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(38,27,25,.22); } .gr-btn:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(38,27,25,.2); } .gr-card { transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease; } .gr-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(38,27,25,.16); } a { transition: color .2s ease, opacity .2s ease; } @media (prefers-reduced-motion: reduce) { .gr-btn, .gr-card { transition: none; } .gr-btn:hover, .gr-card:hover { transform: none; } } /* ============================================================ Responsive grid collapse (tablet + phone) The layout grids are set with inline styles (no classes), which can't be media-queried directly, so we match them by their inline grid-template-columns value and override with !important. This is the single source of responsive behavior for every page. ============================================================ */ /* Tablet: multi-column card/stat grids go 2-up; 2-column text headers stack. */ @media (max-width: 1024px) { [style*="grid-template-columns: repeat(3, 1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* the dc-runtime re-serializes ".9fr" as "0.9fr" in the DOM, so match that form */ [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns: 1.05fr 0.95fr"], [style*="grid-template-columns: 0.95fr 1.05fr"], [style*="grid-template-columns: 1.1fr 0.9fr"], [style*="grid-template-columns: 0.9fr 1.1fr"], [style*="grid-template-columns: 1.15fr 0.85fr"], [style*="grid-template-columns: 0.85fr 1.15fr"] { grid-template-columns: 1fr !important; } /* tighten oversized headline tracking a touch on smaller screens */ .gr-eyebrow { flex-wrap: wrap; } } /* Phone: single column for cards, footer (1.5fr 1fr 1.2fr), and 2-col grids; stats (repeat(4)) stay 2-up. */ @media (max-width: 680px) { [style*="grid-template-columns: repeat(3, 1fr)"], [style*="grid-template-columns: repeat(2, 1fr)"], [style*="grid-template-columns: 1.5fr 1fr"] { grid-template-columns: 1fr !important; } } /* Guard: media never forces a horizontal scrollbar on small screens. */ img, video, iframe { max-width: 100%; } /* Trendy Booth cross-sell: stack + center on phones so the CTA doesn't collide with the bleeding mascot. */ @media (max-width: 680px) { .tb-callout { flex-direction: column; align-items: center; text-align: center; gap: 16px; } .tb-callout-lead { flex-direction: column; align-items: center; text-align: center; gap: 8px; } .tb-callout .tb-mascot { height: 96px !important; margin: -8px 0 2px !important; } } /* Phone footer: once the 3-col grid above collapses to one column (680px), the content is left-flush in a narrow column with a lot of dead space beside it. Center the whole thing. Everything in the footer is authored inline, so these need !important to land. */ @media (max-width: 680px) { footer[data-screen-label="Footer"] { text-align: center; } /* logos are display:block, so text-align alone won't move them */ footer[data-screen-label="Footer"] img { margin-left: auto !important; margin-right: auto !important; } /* the brand blurb (max-width:36ch) and the cities list */ footer[data-screen-label="Footer"] p { margin-left: auto !important; margin-right: auto !important; } /* Explore is a flex column */ footer[data-screen-label="Footer"] nav { align-items: center !important; } /* social row, the bottom bar (space-between), and its two groups */ footer[data-screen-label="Footer"] div[style*="display: flex"] { justify-content: center !important; } /* Bottom bar: stack the two groups instead of letting them wrap. The "we cuss a little" line is ~350px on its own, so side-by-side it collides with the back-to-top circle and the row stops reading as centered. */ footer[data-screen-label="Footer"] > div:last-child { flex-direction: column !important; gap: 20px !important; } /* and stack the items inside each group, so the GRL signature sits on its own line above the copyright rather than beside it */ footer[data-screen-label="Footer"] > div:last-child > div { flex-direction: column !important; gap: 14px !important; } }