/* ========================================================================== Santa Cruz Party Company — shared stylesheet Original design, built for the static rebuild of santacruzpartycompany.com ========================================================================== */ :root { --pink: #d6205d; --pink-dark: #b5184c; --purple: #7b2ff7; --purple-dark: #5c1fd1; --green: #7fcc2d; --green-dark: #66a824; --yellow: #ffd23f; --ink: #3a2f45; --ink-soft: #6a5d76; --cream: #fdf3f8; --white: #ffffff; --shadow: 0 10px 25px rgba(214, 32, 93, 0.15); --radius: 22px; --font-head: "Baloo 2", "Segoe UI", sans-serif; --font-body: "Nunito", "Segoe UI", sans-serif; } * { box-sizing: border-box; } /* ---------------- Seasonal promo sections ---------------- */ /* Visibility is driven by the data-season attribute base.njk stamps onto before paint (see the inline script in ). Each promo section is marked data-season="halloween" / "christmas" / "easter" / "default"; only the one matching today's date is shown. */ section[data-season] { display: none; } html[data-season="halloween"] section[data-season="halloween"], html[data-season="christmas"] section[data-season="christmas"], html[data-season="easter"] section[data-season="easter"], html[data-season="default"] section[data-season="default"] { display: block; } html { scroll-behavior: smooth; font-size: 112.5%; } /* 18px base instead of 16px — same fonts, just bigger, so text fills the boxed column better */ @media (max-width: 700px) { /* The desktop-oriented bump above is too much on a phone: h1's clamp(2rem, 4vw, 3rem) barely responds to viewport width once it's this narrow (4vw is tiny), so it sits at its 2rem *floor* — which the 112.5% root turns into 36px instead of 32px, oversized for a small screen. Scale back down to the standard 16px base here; every rem-based size (headings, .prose text, buttons, nav) follows it. */ html { font-size: 100%; } } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--green) url("../images/greenback21.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; line-height: 1.65; overflow-x: hidden; } .boxed { width: 80%; max-width: 1900px; margin: 0 auto; background: var(--white); box-shadow: 0 0 40px rgba(0,0,0,0.25); min-height: 100vh; overflow: hidden; } img { max-width: 100%; display: block; } a { color: var(--pink-dark); text-decoration: none; } a:hover { color: var(--purple); } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--purple-dark); line-height: 1.2; margin: 0 0 0.5em; } h1 { font-size: clamp(2rem, 4vw, 3rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } h3 { font-size: 1.3rem; } p { margin: 0 0 1em; } .container { /* 90% of whichever ancestor it's actually inside — almost always .boxed, so this scales with .boxed's own width instead of capping at a fixed pixel value regardless of screen size. */ width: 90%; margin: 0 auto; padding: 0 20px; } /* ---------------- Top bar ---------------- */ .topbar { background: var(--green); color: var(--white); font-size: 0.85rem; padding: 12px 0; } .topbar a { color: var(--white); font-weight: 800; text-decoration: underline; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; } .topbar-msg { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.3; } .topbar-tagline { font-size: 1.15rem; opacity: 0.92; } .topbar-phone { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; letter-spacing: 0.01em; } .topbar-links { flex: 0 0 auto; white-space: nowrap; } .topbar-links a { color: #fff; font-size: 1.05rem; font-weight: 700; margin-left: 18px; opacity: 0.9; } .topbar-links a:first-child { margin-left: 0; } .topbar-links a:hover { color: var(--yellow); opacity: 1; } /* ---------------- Header / Nav ---------------- */ .site-header { background: var(--pink) url("../images/starburst-header4.jpg") repeat-x center center; background-size: auto 100%; box-shadow: 0 2px 12px rgba(45, 33, 64, 0.08); position: relative; } .header-inner { display: flex; align-items: center; justify-content: center; padding: 14px 16px; flex-wrap: nowrap; } .brand { display: flex; align-items: center; justify-content: center; width: 100%; } .brand img.brand-banner { width: 100%; max-width: none; height: auto; border-radius: 0; } .menu-toggle { position: absolute; top: 16px; right: 16px; } .header-phone { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--pink-dark); white-space: nowrap; } .header-phone small { display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; } .menu-toggle { display: none; background: var(--green); color: var(--white); border: none; font-size: 1.5rem; width: 46px; height: 46px; border-radius: 12px; cursor: pointer; } nav.main-nav { background: var(--pink); } nav.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; } nav.main-nav > ul > li { position: relative; } nav.main-nav > ul > li > a, nav.main-nav > ul > li > span.nav-toggle { display: block; padding: 14px 18px; color: var(--white); font-weight: 700; font-family: var(--font-head); letter-spacing: 0.02em; cursor: pointer; white-space: nowrap; } nav.main-nav > ul > li > a:hover, nav.main-nav > ul > li.open > span.nav-toggle, nav.main-nav > ul > li > a.active { background: rgba(255, 255, 255, 0.18); color: var(--yellow); } nav.main-nav .dropdown { list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; left: 0; min-width: 230px; border-radius: 0 0 14px 14px; box-shadow: var(--shadow); display: none; overflow: hidden; z-index: 50; } nav.main-nav li.open .dropdown, nav.main-nav li:hover .dropdown { display: block; } /* Green rows, with the hovered/selected item turning pink — matching the original site's nav style. */ nav.main-nav .dropdown li a { display: block; padding: 12px 20px; color: var(--white); font-family: var(--font-body); font-weight: 700; background: var(--green); } nav.main-nav .dropdown li a:hover { background: var(--pink); } nav.main-nav .caret::after { content: " \25BE"; font-size: 0.7em; } /* ---------------- Hero ---------------- */ .hero { background: var(--cream); color: var(--ink); padding: 56px 0 50px; text-align: center; position: relative; overflow: hidden; } .hero h1 { color: var(--purple); position: relative; } .hero p { margin: 0 auto 1.2em; font-size: 1.15rem; color: var(--ink-soft); position: relative; } .hero .eyebrow { display: inline-block; background: var(--pink); color: var(--white); border-radius: 999px; padding: 6px 18px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 14px; } /* ---------------- Hero carousel ---------------- */ /* Panel eligibility (which slides even exist today) is decided by js/main.js at page load, reading the data-active-seasons attribute base.njk stamps onto (more than one seasonal panel can be live at once). The "birthday" and "characters" panels are always eligible. The carousel has no fixed height — each slide is just as tall as its own content needs. Since each slide's mini-gallery is a horizontally- scrolling strip (one row, not a wrapping grid), this stays a small, predictable height even for a panel with lots of photos, like Christmas. */ .hero-carousel { position: relative; } .hero-slide { display: none; } .hero-slide.is-active { display: block; animation: heroFadeIn 0.35s ease; } @keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } } .hero-nav { position: absolute; top: 45%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.85); border: none; width: 42px; height: 42px; border-radius: 50%; font-size: 1.1rem; line-height: 1; color: var(--pink-dark); cursor: pointer; z-index: 5; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); } .hero-nav:hover { background: var(--white); color: var(--purple); } .hero-nav.prev { left: 4px; } .hero-nav.next { right: 4px; } .hero-dots { display: flex; justify-content: center; gap: 9px; margin-top: 6px; position: relative; z-index: 5; } .hero-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(123, 47, 247, 0.25); border: none; padding: 0; cursor: pointer; } .hero-dot.is-active { background: var(--purple); } /* Photo strip inside a hero slide — a horizontally-scrolling row (NOT the wrapping grid used by .gallery-grid/.figure-row elsewhere on the site), so a hero panel with lots of photos doesn't grow the whole homepage hero to match. The prev/next .mini-nav buttons (JS in main.js) scroll it one photo at a time; dragging/swiping the strip directly also works. Click any photo to open it in the lightbox as usual. */ .mini-gallery { margin-top: 20px; position: relative; } .mini-gallery .figure-row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-behavior: smooth; margin: 0; padding-bottom: 4px; /* Scrollbar hidden — the mini-nav prev/next buttons are the intended way to move through the strip; a visible scrollbar here is just clutter. */ scrollbar-width: none; -ms-overflow-style: none; } .mini-gallery .figure-row::-webkit-scrollbar { display: none; } .mini-gallery .figure-row img, .mini-gallery .figure-row .video-thumb { flex: 0 0 auto; } /* No object-fit safety net here on purpose (unlike .gallery-grid img) — this row scrolls instead of wrapping, so a wide photo is meant to render at its true natural width and just make the strip scroll further, rather than being capped to the visible width and letterboxed. */ .mini-gallery .figure-row img { width: auto; max-width: none; height: 260px; } .mini-gallery .figure-row .video-thumb { width: 340px; max-width: none; height: 260px; } .mini-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.85); border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 1rem; line-height: 1; color: var(--pink-dark); cursor: pointer; z-index: 4; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); } .mini-nav:hover { background: var(--white); color: var(--purple); } .mini-nav.prev { left: -6px; } .mini-nav.next { right: -6px; } .mini-nav[hidden] { display: none; } @media (max-width: 700px) { .hero-nav { width: 36px; height: 36px; font-size: 0.95rem; } .mini-gallery .figure-row img { width: auto; max-width: none; height: 200px; } .mini-gallery .figure-row .video-thumb { width: 260px; max-width: none; height: 200px; } .mini-nav { width: 30px; height: 30px; font-size: 0.85rem; } } .btn { display: inline-block; background: var(--yellow); color: var(--ink); font-family: var(--font-head); font-weight: 700; padding: 14px 32px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,0.18); transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,0.22); color: var(--ink); } /* ---------------- Content sections ---------------- */ .section { padding: 60px 0; } .section-alt { background: var(--white); } .section-tint { background: linear-gradient(180deg, #fff0f8, #f5edff); } .prose p { font-size: 1.05rem; color: var(--ink-soft); } .prose.center { margin: 0 auto; text-align: center; } /* Split feature: photo on one side, text on the other. The photo keeps its natural aspect ratio (no cropping) — use this instead of .figure-row when there's a single portrait/tall photo alongside a block of text. */ .split-feature { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; } .split-feature-media { flex: 1 1 260px; max-width: 33%; margin: 0 auto; } .split-feature-media img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); } .split-feature-text { flex: 2 1 400px; } .split-feature-text h2:first-child { margin-top: 0; } @media (max-width: 700px) { .split-feature-media { max-width: 260px; } } /* A single portrait/tall photo with no text to pair it with (nothing to put in a .split-feature next to it) — centered, natural aspect ratio, no cropping. Use instead of .figure-row for a lone photo like this. */ .photo-frame { max-width: 320px; margin: 0 auto 30px; } .photo-frame img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; margin-top: 34px; } .card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform 0.2s ease; border: 3px solid transparent; } .card:hover { transform: translateY(-6px); border-color: var(--yellow); } .card img { height: 220px; width: 100%; object-fit: cover; } .card-body { padding: 18px 20px 22px; } .card-body h3 { margin-bottom: 6px; color: var(--pink-dark); } .card-body p { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 10px; } /* Photo gallery grid — grows to whatever height fits every photo (wraps to as many rows as needed); no internal scrollbar, so a visitor sees the whole gallery just by scrolling the page like normal, never a separate scroll-within-a-box on top of that. */ .gallery-grid { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 14px; margin-top: 30px; padding: 4px 4px 4px 0; } /* Justified-gallery sizing: every photo shares the same height and keeps its own natural width (flex: 0 0 auto + width: auto), so a tall/narrow portrait photo renders as a narrow column and a wide photo as a wide one — no cropping, and no leftover empty space around a photo that doesn't match some guessed box size. */ .gallery-grid img { flex: 0 0 auto; width: auto; height: 230px; /* Safety net, not the normal case: on a narrow phone screen the global `img { max-width: 100% }` reset can force a wide photo's rendered width below what "auto" would otherwise give it at this height. Since only width would be capped there (height stays a literal 230px), the photo would squish instead of just scaling down, without this. */ object-fit: contain; border-radius: 14px; box-shadow: 0 6px 16px rgba(45,33,64,0.15); transition: transform 0.2s ease; cursor: zoom-in; } .gallery-grid img:hover { transform: scale(1.04); } .figure-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 30px 0; } .figure-row img, .figure-row .video-thumb { border-radius: 18px; box-shadow: var(--shadow); flex: 0 0 auto; width: auto; height: 310px; /* Safety net for narrow phone screens — see .gallery-grid img above. */ object-fit: contain; } .figure-row img { cursor: zoom-in; } @media (max-width: 700px) { /* A shared height that works nicely on a wide desktop container is often just too tall for a phone: a wide/landscape photo needs so much width at that height that it no longer fits, and gets letterboxed by the object-fit: contain safety net above instead of filling its box. A shorter shared height keeps ordinary landscape photos comfortably within a phone's width without that. */ .gallery-grid img { height: 180px; } .figure-row img, .figure-row .video-thumb { height: 220px; } } /* Video thumbnail: a play-icon overlay on a muted, controls-less