/* ============================================================ Little Ripper LA — hand-rebuilt stylesheet Palette + fonts extracted from the original Squarespace site.css (:root HSL palette) and custom.css. ============================================================ */ /* ---------- Fonts (local woff2/woff, from /fonts) ---------- */ @font-face { font-family: 'Bau-Pro-Regular'; src: url('fonts/baupro-webfont.woff2') format('woff2'), url('fonts/baupro-webfont.woff') format('woff'); font-display: swap; } @font-face { font-family: 'Apercru-Pro-Medium'; src: url('fonts/apercupro-medium-webfont.woff2') format('woff2'), url('fonts/apercupro-medium-webfont.woff') format('woff'); font-display: swap; } @font-face { font-family: 'Apercru-Pro-Regular'; src: url('fonts/apercupro-regular-webfont.woff') format('woff'); font-display: swap; } @font-face { font-family: 'Apercru-Mono-Pro-Regular'; src: url('fonts/apercumonoproregular-webfont.woff2') format('woff2'), url('fonts/apercumonoproregular-webfont.woff') format('woff'); font-display: swap; } /* ---------- Palette (computed from site.css :root HSL) ---------- */ :root { --cream: #f8e8c9; /* white hsl(39.57,77.05%,88.04%) */ --brown: #651702; /* black hsl(12.73,96.12%,20.2%) */ --orange: #e94700; /* accent hsl(18.28,100%,45.69%) */ --blue: #b6d5ef; /* lightAccent */ --teal: #2b5e54; /* darkAccent */ --maxw: 1500px; --gutter: 4vw; --mobile-gutter: 6vw; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cream); color: var(--brown); font-family: 'Apercru-Pro-Regular', system-ui, sans-serif; font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--orange); color: var(--cream); padding: .5rem 1rem; z-index: 1000; } .skip-link:focus { left: 0; } @keyframes shake { 0% { transform: rotate(1.5deg); } 50% { transform: rotate(-1.5deg); } 100% { transform: rotate(1.5deg); } } /* ============================================================ SCROLL REVEAL — reproduces the Squarespace 7.1 load/scroll animation (style: fade, type: fade, curve: ease, detailed). Exact timing pulled from the original site CSS: transition: opacity 800ms cubic-bezier(.4,0,.2,1), transform 800ms cubic-bezier(.4,0,.2,1) start: opacity:0; transform: translateY(20px) (fade + slide-up) end (.is-inview): opacity:1; transform: none The .reveal class is added by app.js (so no-JS users see content). Per-element stagger via inline transition-delay set in app.js. ============================================================ */ /* FAIL-SAFE reveal: content is visible by DEFAULT. Only when JS confirms it can animate (by adding `.js-reveals` to ) do we arm the hidden start-state, and even then a load-time + scroll backstop guarantees every element ends visible. With JS off (or if anything errors) nothing is ever hidden, so the page can never render blank or washed out. */ .js-reveals .reveal { opacity: 0; transform: translateY(20px); transition: opacity 800ms cubic-bezier(.4, 0, .2, 1), transform 800ms cubic-bezier(.4, 0, .2, 1); will-change: opacity, transform; } .js-reveals .reveal.is-inview { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveals .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Typography ---------- */ h1, h2, h3 { font-family: 'Bau-Pro-Regular', serif; font-weight: 500; margin: 0; line-height: 1.15; } h1 strong, h2 strong, h3 strong { font-weight: 500; text-transform: uppercase; } p { font-family: 'Apercru-Pro-Regular', sans-serif; margin: 0 0 1rem; } p strong { text-transform: uppercase; letter-spacing: .02rem; } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: 'Apercru-Pro-Regular', sans-serif; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; border-radius: 999px; /* primary-button-shape-pill */ padding: .5rem 1.5rem; cursor: pointer; border: 1px solid transparent; transition: color .3s ease, background-color .3s ease, border-color .3s ease; } .btn-primary { background: var(--orange); color: var(--cream); } /* white-bold theme hover (from custom.css) */ [data-theme="white-bold"] .btn-primary:hover, [data-theme="white"] .btn-primary:hover { color: var(--orange); background: var(--cream); border: 1px solid var(--orange); animation: shake 750ms infinite linear; } /* bright theme hover (footer) */ [data-theme="bright"] .btn-primary:hover { color: var(--cream); background: var(--orange); border: 1px solid var(--cream); animation: shake 750ms infinite linear; } /* ============================================================ HEADER ============================================================ */ .site-header { position: absolute; /* tweak-transparent-header */ top: 0; left: 0; right: 0; z-index: 100; padding: 1vw 2.5vw; /* header-vert-padding + pagePadding */ } /* tweak-fixed-header-style-scroll-back: once scrolled past the hero the header becomes fixed with a cream backdrop, hides on scroll-down and slides back on scroll-up. JS toggles .is-fixed / .is-hidden. */ .site-header.is-fixed { position: fixed; background: var(--cream); box-shadow: 0 1px 0 rgba(101, 23, 2, .08); transition: transform .4s cubic-bezier(.4, 0, .2, 1); } .site-header.is-fixed.is-hidden { transform: translateY(-100%); } .header-inner { display: flex; align-items: flex-start; justify-content: space-between; position: relative; } .header-logo img { height: 82px; /* header-logo-height */ width: auto; } .header-nav { display: flex; gap: 1.4rem; margin-top: 1.4rem; } .header-nav a { font-family: 'Apercru-Mono-Pro-Regular', monospace; text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; text-decoration: none; color: var(--brown); } .header-nav a:hover { animation: shake 750ms infinite linear; } /* Burger (double line hamburger) */ .burger { display: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: 0; width: 34px; height: 24px; padding: 0; cursor: pointer; } .burger-line { display: block; width: 100%; height: 2px; background: var(--orange); margin: 7px 0; transition: transform .3s ease, opacity .3s ease; } /* ============================================================ OVERLAY MENU ============================================================ */ .overlay-nav { position: fixed; inset: 0; background: var(--cream); z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; /* menuOverlayAnimation: fade */ } body.menu-open .overlay-nav { opacity: 1; visibility: visible; } .overlay-logo { width: 100%; max-width: 520px; max-height: 320px; margin-bottom: 1rem; } .overlay-nav-list { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .overlay-nav-list a { font-family: 'Bau-Pro-Regular', serif; text-transform: uppercase; color: var(--orange); text-decoration: none; font-size: 1.6rem; padding: 5px; } .overlay-nav-list a:hover { animation: shake 750ms infinite linear; } body.menu-open .burger-line { background: var(--orange); } body.menu-open .burger-line:first-child { transform: translateY(9px) rotate(45deg); } body.menu-open .burger-line:last-child { transform: translateY(-9px) rotate(-45deg); } /* ============================================================ SECTION SHELL + THEMES ============================================================ */ .section { position: relative; padding: 5.5rem 2.5vw; /* stable vertical rhythm (was 8vh) */ } [data-theme="white"], [data-theme="white-bold"] { background: var(--cream); color: var(--brown); } [data-theme="bright"] { background: var(--orange); color: var(--cream); } .section .btn-primary { /* default within content */ } /* ============================================================ SECTION 1 — HERO ============================================================ */ .sec-hero { padding-top: 11rem; /* clears the absolute header */ padding-bottom: 0; } .sec-hero-grid { width: 100%; max-width: var(--maxw); margin: 0 auto; display: grid; /* meta blocks clustered on the left, title fills the right half */ grid-template-columns: 0.9fr 1.1fr 2fr; grid-template-areas: "m1 m3 title" "m2 . title"; column-gap: 2.4rem; row-gap: 1.2rem; align-items: start; } .hero-meta-1 { grid-area: m1; } /* address */ .hero-meta-2 { grid-area: m2; } /* hours */ .hero-meta-3 { grid-area: m3; } /* phone / email */ .hero-meta p { font-size: .72rem; letter-spacing: .02em; line-height: 1.5; margin: 0; } .hero-meta p strong { font-weight: 400; } .hero-meta a { text-decoration: none; } .hero-title { grid-area: title; align-self: center; color: var(--orange); font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 400; text-transform: none; max-width: 18ch; line-height: 1.15; } /* ============================================================ SECTION 2 — INTRO + IMAGE (sticky two column on desktop) ============================================================ */ .sec-intro { padding-top: 2rem; } .intro-image { max-width: var(--maxw); margin: 0 auto 2.4rem; } .intro-image img { border-radius: 12px; width: 100%; aspect-ratio: 2500 / 1100; object-fit: cover; object-position: center 40%; } .sec-intro-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 4vw; align-items: start; } .intro-copy p { font-size: 1.05rem; line-height: 1.6; max-width: 52ch; } .intro-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1.4rem; text-align: right; } .intro-address p { font-size: .9rem; margin: 0; } .intro-address a { text-decoration: none; } /* ============================================================ SECTION 3 — FROM BREKKIE TO DINNER ============================================================ */ .brekkie-head { max-width: var(--maxw); margin: 0 auto 2.4rem; display: flex; align-items: center; gap: 1.4rem; } .brekkie-head-spread { width: 110px; flex: none; } .brekkie-h1 { color: var(--orange); font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 400; text-transform: uppercase; line-height: 1.05; margin: 0; } .sec-brekkie-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4vw; align-items: start; } .brekkie-col-left img, .brekkie-col-right img.brekkie-img-b { border-radius: 12px; width: 100%; } .brekkie-col-left img { aspect-ratio: 4 / 5; object-fit: cover; } .brekkie-col-right { display: flex; flex-direction: column; gap: 2rem; } .brekkie-col-right img.brekkie-img-b { aspect-ratio: 3 / 2; object-fit: cover; } .brekkie-text { position: relative; } .brekkie-h2 { color: var(--orange); font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 400; text-transform: uppercase; margin: 0 0 .6em; } .brekkie-h2 .cap { font-weight: 400; } .brekkie-text p { font-size: .95rem; line-height: 1.6; max-width: 46ch; } .deco-coffee { width: 72px; margin: 0 0 1rem; } .deco-spread { width: 120px; } /* ============================================================ SECTION 4 — EVENTS ============================================================ */ .sec-events-inner { max-width: var(--maxw); margin: 0 auto; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 2.6rem; } .events-menu-btn { align-self: center; margin-bottom: 1.5rem; } .events-title { color: var(--orange); font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 400; text-transform: uppercase; max-width: 24ch; } .events-list { width: 100%; display: flex; flex-direction: column; } .events-list p { color: var(--orange); font-size: .95rem; line-height: 1.5; margin: 0; padding: 1.4rem 0; border-top: 1px solid rgba(233, 71, 0, .35); } .events-list p:last-child { border-bottom: 1px solid rgba(233, 71, 0, .35); } .events-list p strong { color: var(--orange); } .events-cta-title { color: var(--orange); font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 400; text-transform: uppercase; margin-top: 1.5rem; } /* ============================================================ SECTION 5 — GALLERY ============================================================ */ .sec-gallery-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4vw; align-items: center; position: relative; } .gallery-title { grid-column: 1 / -1; font-size: clamp(1.6rem, 3vw, 2.4rem); text-transform: none; text-align: center; margin-bottom: 2.4rem; } .gal { border-radius: 14px; width: 100%; transform: rotate(var(--rot, 0deg)); } .gal-1 { --rot: -4deg; } .gal-2 { --rot: 3deg; } .gal-3 { --rot: 4deg; } .gal-4 { --rot: -3deg; } .gal-spread { position: absolute; right: 2vw; bottom: -20px; width: 110px; } /* ============================================================ FOOTER (bright) ============================================================ */ .sec-footer { padding: 4rem 2.5vw 5rem; } .sec-footer-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 4vw; align-items: start; } .sec-footer h2 { color: var(--cream); font-size: 1.5rem; line-height: 1.4; } .sec-footer h2 strong { text-transform: uppercase; } .sec-footer a { text-decoration: none; } .footer-menu h2 { text-align: right; } .footer-menu a:hover, .sec-footer h2 a:hover { animation: shake 750ms infinite linear; } .footer-logo-wrap { display: flex; justify-content: center; } .footer-logo { width: 250px; max-width: 100%; } .footer-address h2 { text-align: right; } .footer-wine { display: flex; justify-content: flex-start; } .small-wine-light { width: 100px; } .footer-credits { grid-column: 1 / -1; text-align: center; margin-top: 2rem; } .footer-credits p { color: var(--cream); font-size: .85rem; margin: 0; } /* Newsletter form */ .newsletter-form { max-width: 360px; } .newsletter-title { color: var(--cream); font-weight: 400; font-size: 1.6rem; margin: 0 0 .6rem; font-family: 'Bau-Pro-Regular', serif; text-transform: none; } .newsletter-row { display: flex; align-items: flex-end; gap: 1rem; } #newsletter-email { flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--cream); color: var(--cream); border-radius: 0; padding: .4rem 0; font-family: 'Apercru-Pro-Regular', sans-serif; font-size: .9rem; text-transform: uppercase; letter-spacing: -.02em; } #newsletter-email::placeholder { color: var(--cream); opacity: 1; } #newsletter-email:focus { outline: none; } .newsletter-btn { background: transparent; border: none; color: var(--cream); font-size: .9rem; font-weight: 700; text-transform: uppercase; cursor: pointer; font-family: 'Apercru-Pro-Regular', sans-serif; } .newsletter-btn:hover { animation: shake 750ms infinite linear; } .newsletter-thanks { color: var(--cream); margin-top: 1rem; } /* ============================================================ DESKTOP — sticky two-column behaviour (>=768px) Mirrors custom.css intent for white-bold/bright sections. ============================================================ */ @media (min-width: 768px) { /* Keep the brekkie text aligned to the top of its tall image column. */ .brekkie-text { position: sticky; top: 7rem; align-self: start; } } /* ============================================================ MOBILE (<=767px) — Squarespace breakpoint ============================================================ */ @media (max-width: 767px) { .header-nav { display: none; } .burger { display: block; } .header-logo img { height: 45px; } /* header-mobile-logo-max-height */ .site-header { padding: 6vw 2.5vw; } .section { padding: 4rem 6vw; } .sec-hero { padding-top: 6.5rem; } .sec-hero-grid { grid-template-columns: 1fr; grid-template-areas: "m1" "m2" "m3" "title"; row-gap: 1.4rem; } .hero-title { font-size: clamp(2rem, 10vw, 3rem); } .sec-intro-grid, .sec-brekkie-grid, .sec-gallery-grid, .sec-footer-grid { grid-template-columns: 1fr; } .intro-image { grid-row: auto; } .brekkie-images .deco-spread { position: static; margin: 1rem auto 0; } .footer-menu h2, .footer-address h2 { text-align: left; } .footer-logo { width: 160px; } .small-wine-light { width: 60px; } .gal-spread { position: static; margin: 1rem auto 0; width: 80px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }