/* Golden State Novelty — public marketing site ("Fogline" design system) Apple-clean, California-light. Loaded only on app/templates/public/*. Fonts: Syne (display) + DM Sans (body) — see base_public.html . */ :root { --fog-bg: #f7f8fa; --fog-bg-deep: #eef1f4; --fog-ink: #121417; --fog-muted: #5c6570; --fog-accent: #0b4f6c; --fog-accent-strong: #083c53; --fog-accent-soft: #e4eef2; --fog-gold: #c4a35a; --fog-line: #e2e5e9; --fog-surface: #ffffff; --fog-font-display: "Syne", "Outfit", ui-sans-serif, sans-serif; --fog-font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif; --fog-ease: cubic-bezier(0.16, 1, 0.3, 1); --fog-section-y: clamp(4rem, 9vw, 8rem); } /* ---------- Base ---------- */ .fog-body { margin: 0; background: var(--fog-bg); color: var(--fog-ink); font-family: var(--fog-font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } .fog-body :focus-visible { outline: 2px solid var(--fog-accent); outline-offset: 3px; border-radius: 2px; } .fog-body a { color: inherit; } .fog-section { padding-block: var(--fog-section-y); } .fog-rule-gold { display: block; width: 3rem; height: 2px; background: var(--fog-gold); border: 0; margin: 0 0 1.25rem; } .fog-eyebrow { font-family: var(--fog-font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fog-muted); } /* ---------- Nav ---------- */ .fog-nav { position: sticky; top: 0; z-index: 40; background: rgba(247, 248, 250, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--fog-ease), background-color 0.3s var(--fog-ease); } .fog-nav.is-scrolled { border-bottom-color: var(--fog-line); } .fog-nav-inner { max-width: 78rem; margin-inline: auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .fog-nav-word { font-family: var(--fog-font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--fog-ink); text-decoration: none; white-space: nowrap; } .fog-nav-links { display: none; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 48rem) { .fog-nav-links { display: flex; } } .fog-nav-links a { font-size: 0.9rem; font-weight: 500; color: var(--fog-muted); text-decoration: none; transition: color 0.2s var(--fog-ease); } .fog-nav-links a:hover { color: var(--fog-ink); } .fog-nav-cta { display: inline-flex; align-items: center; padding: 0.55rem 1.1rem; font-size: 0.85rem; font-weight: 600; color: #fff; background: var(--fog-accent); border-radius: 999px; text-decoration: none; white-space: nowrap; transition: background-color 0.2s var(--fog-ease), transform 0.2s var(--fog-ease); } .fog-nav-cta:hover { background: var(--fog-accent-strong); transform: translateY(-1px); } /* ---------- Hero (full-bleed atmosphere, one composition) ---------- */ .fog-hero { position: relative; isolation: isolate; min-height: min(92vh, 56rem); display: flex; align-items: center; overflow: hidden; } .fog-hero-atmosphere { position: absolute; inset: 0; z-index: -4; background: radial-gradient(120% 90% at 18% 8%, #ffffff 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #f9fafb 0%, #eef2f5 32%, #d9e4ea 62%, #bcd0da 82%, #9dbccb 100%); } /* Optional atmospheric product photo (showcase.0.image_url) — full-bleed, not a card */ .fog-hero-feature { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: center; opacity: 0.5; filter: saturate(1.05) contrast(1.02); -webkit-mask-image: linear-gradient( 100deg, transparent 0%, rgba(0, 0, 0, 0.35) 32%, rgba(0, 0, 0, 0.75) 55%, #000 78% ); mask-image: linear-gradient( 100deg, transparent 0%, rgba(0, 0, 0, 0.35) 32%, rgba(0, 0, 0, 0.75) 55%, #000 78% ); } @media (max-width: 56rem) { .fog-hero-feature { display: block; opacity: 0.28; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%); } } .fog-hero-wash { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(247, 248, 250, 0.1) 0%, rgba(247, 248, 250, 0.5) 55%, rgba(247, 248, 250, 0.94) 100%); pointer-events: none; } /* Soft fog banks drifting across the hero */ .fog-hero-atmosphere::before, .fog-hero-atmosphere::after { content: ""; position: absolute; left: -10%; right: -10%; height: 40%; background: radial-gradient(60% 100% at 50% 50%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); filter: blur(6px); } .fog-hero-atmosphere::before { top: 8%; opacity: 0.8; } .fog-hero-atmosphere::after { bottom: -6%; opacity: 0.55; } /* Abstract bridge-tower silhouette, drawn in CSS — sits low on the horizon */ .fog-hero-skyline { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; } .fog-hero-skyline svg { width: 100%; height: 100%; display: block; } .fog-hero-content { position: relative; z-index: 1; max-width: 78rem; margin-inline: auto; padding: 7rem 1.5rem 5rem; width: 100%; } .fog-hero-kicker { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fog-accent-strong); margin: 0 0 1.5rem; } .fog-hero-brand { font-family: var(--fog-font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 0.98; font-size: clamp(2.75rem, 7vw, 5.75rem); margin: 0 0 0.9rem; color: var(--fog-ink); } .fog-hero-headline { font-family: var(--fog-font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.12; font-size: clamp(1.5rem, 3vw, 2.35rem); max-width: 34rem; margin: 0 0 1.1rem; color: var(--fog-accent-strong); } .fog-hero-sub { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.65; color: var(--fog-muted); max-width: 34rem; margin: 0 0 2.25rem; } .fog-cta-group { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .fog-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.75rem; border-radius: 999px; font-size: 0.95rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color 0.2s var(--fog-ease), color 0.2s var(--fog-ease), border-color 0.2s var(--fog-ease), transform 0.2s var(--fog-ease), box-shadow 0.2s var(--fog-ease); } .fog-btn-primary { background: var(--fog-accent); color: #fff; box-shadow: 0 10px 24px -12px rgba(11, 79, 108, 0.55); } .fog-btn-primary:hover { background: var(--fog-accent-strong); transform: translateY(-1px); } .fog-btn-ghost { background: transparent; color: var(--fog-ink); border-color: rgba(18, 20, 23, 0.22); } .fog-btn-ghost:hover { border-color: var(--fog-ink); background: rgba(255, 255, 255, 0.5); } .fog-btn-on-dark { background: #fff; color: var(--fog-accent-strong); } .fog-btn-on-dark:hover { background: var(--fog-gold); color: var(--fog-accent-strong); transform: translateY(-1px); } /* ---------- Motion: hero entrance ---------- */ .fog-anim-in { opacity: 0; transform: translateY(18px); animation: fogRise 0.85s var(--fog-ease) forwards; } .fog-anim-delay-1 { animation-delay: 0.08s; } .fog-anim-delay-2 { animation-delay: 0.18s; } .fog-anim-delay-3 { animation-delay: 0.28s; } .fog-anim-delay-4 { animation-delay: 0.38s; } @keyframes fogRise { to { opacity: 1; transform: translateY(0); } } /* ---------- Scroll reveal (products / story) ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--fog-ease), transform 0.7s var(--fog-ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ---------- Section headers ---------- */ .fog-section-head { max-width: 40rem; margin: 0 0 3rem; } .fog-section-title { font-family: var(--fog-font-display); font-weight: 700; letter-spacing: -0.01em; font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin: 0 0 0.85rem; color: var(--fog-ink); } .fog-section-sub { font-size: 1.05rem; color: var(--fog-muted); margin: 0; } /* ---------- Products ---------- */ .fog-products { background: var(--fog-bg); } .fog-products-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2.5rem 1.75rem; } @media (min-width: 40rem) { .fog-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .fog-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .fog-product-tile { display: block; } .fog-products-grid .reveal:nth-child(1) { transition-delay: 0s; } .fog-products-grid .reveal:nth-child(2) { transition-delay: 0.08s; } .fog-products-grid .reveal:nth-child(3) { transition-delay: 0.16s; } .fog-products-grid .reveal:nth-child(4) { transition-delay: 0.24s; } .fog-products-grid .reveal:nth-child(5) { transition-delay: 0.32s; } .fog-products-grid .reveal:nth-child(6) { transition-delay: 0.4s; } .fog-product-media { position: relative; aspect-ratio: 4 / 5; border-radius: 1.25rem; overflow: hidden; background: linear-gradient(155deg, #e4eef2 0%, #cfe0e8 45%, #b9d3de 100%); margin-bottom: 1.1rem; } .fog-product-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--fog-ease); } .fog-product-tile:hover .fog-product-media img { transform: scale(1.045); } .fog-product-media-placeholder { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 1.25rem; font-family: var(--fog-font-display); font-weight: 700; font-size: 1.1rem; color: var(--fog-accent-strong); } .fog-product-name { font-family: var(--fog-font-display); font-weight: 700; font-size: 1.05rem; color: var(--fog-ink); margin: 0 0 0.3rem; } .fog-product-desc { font-size: 0.92rem; color: var(--fog-muted); margin: 0; line-height: 1.55; } /* ---------- Story ---------- */ .fog-story { background: var(--fog-surface); border-top: 1px solid var(--fog-line); border-bottom: 1px solid var(--fog-line); } .fog-story-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } @media (min-width: 56rem) { .fog-story-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } } .fog-story-copy p { font-size: 1.05rem; line-height: 1.75; color: var(--fog-ink); margin: 0 0 1.25rem; } .fog-story-copy p:last-child { margin-bottom: 0; } .fog-story-note { font-size: 0.95rem; color: var(--fog-muted); border-left: 2px solid var(--fog-gold); padding-left: 1.1rem; margin: 0; } .fog-story-notes { display: flex; flex-direction: column; gap: 1.5rem; } /* ---------- Join / email conversion band ---------- */ .fog-join { position: relative; background: linear-gradient(160deg, var(--fog-accent-strong) 0%, var(--fog-accent) 60%, #146684 100%); color: #fff; overflow: hidden; } .fog-join::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 85% 0%, rgba(196, 163, 90, 0.28), rgba(196, 163, 90, 0) 60%); pointer-events: none; } .fog-join-inner { position: relative; max-width: 46rem; margin-inline: auto; padding-inline: 1.5rem; text-align: center; } .fog-join-title { font-family: var(--fog-font-display); font-weight: 700; letter-spacing: -0.01em; font-size: clamp(1.9rem, 3.6vw, 2.75rem); margin: 0 0 0.9rem; } .fog-join-sub { font-size: 1.05rem; color: rgba(255, 255, 255, 0.85); margin: 0 0 2.5rem; } .fog-form { display: flex; flex-direction: column; gap: 1rem; max-width: 30rem; margin: 0 auto; text-align: left; } @media (min-width: 34rem) { .fog-form { flex-direction: row; align-items: flex-start; flex-wrap: wrap; } } .fog-field { flex: 1 1 12rem; min-width: 0; } .fog-field label { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.85); margin-bottom: 0.4rem; } .fog-form input[type="text"], .fog-form input[type="email"] { width: 100%; padding: 0.85rem 1rem; border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.96); color: var(--fog-ink); font-family: var(--fog-font-body); font-size: 0.95rem; transition: box-shadow 0.2s var(--fog-ease), border-color 0.2s var(--fog-ease); } .fog-form input[type="text"]::placeholder, .fog-form input[type="email"]::placeholder { color: var(--fog-muted); } .fog-form input[type="text"]:focus, .fog-form input[type="email"]:focus { outline: none; border-color: var(--fog-gold); box-shadow: 0 0 0 3px rgba(196, 163, 90, 0.35); } .fog-form .errorlist { list-style: none; margin: 0.35rem 0 0; padding: 0; font-size: 0.8rem; color: #ffe3c2; } .fog-form-submit { flex: 0 0 auto; align-self: flex-end; } @media (max-width: 33.99rem) { .fog-form-submit { align-self: stretch; } .fog-form-submit .fog-btn { width: 100%; } } .fog-join-note { margin: 1.5rem 0 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); } .fog-join-success { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.5rem 0 0.5rem; } .fog-join-success-mark { width: 3rem; height: 3rem; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.4); display: flex; align-items: center; justify-content: center; } .fog-join-success-title { font-family: var(--fog-font-display); font-weight: 700; font-size: 1.3rem; margin: 0; } .fog-join-success-sub { font-size: 0.98rem; color: rgba(255, 255, 255, 0.85); margin: 0; max-width: 26rem; } /* ---------- Footer ---------- */ .fog-footer { background: #14110e; color: rgba(246, 241, 231, 0.62); } .fog-footer-inner { max-width: 78rem; margin-inline: auto; padding: 1.15rem 1.5rem 1.35rem; border-top: 1px solid rgba(201, 162, 74, 0.35); } .fog-footer-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.65rem; font-size: 0.78rem; letter-spacing: 0.01em; text-align: center; line-height: 1.4; } .fog-footer-line a { color: rgba(255, 255, 255, 0.72); text-decoration: none; } .fog-footer-line a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .fog-anim-in { animation: none; opacity: 1; transform: none; } .reveal { opacity: 1; transform: none; transition: none; } .fog-product-tile:hover .fog-product-media img { transform: none; } } /* ---------- Welcome slide (PowerPoint-style) ---------- */ html:has(body.pc-slide-page), body.pc-slide-page { height: 100%; overflow: hidden; } body.pc-slide-page { height: 100dvh; max-height: 100dvh; background: #0b1218; } body.pc-slide-page .fog-footer { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .pc-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 40; height: 2.75rem; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(0.9rem, 2.5vw, 1.75rem); background: rgba(11, 18, 24, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #fff; pointer-events: none; } .pc-nav a { pointer-events: auto; } .pc-nav-brand { font-family: var(--fog-font-display); font-weight: 700; font-size: clamp(0.88rem, 1.35vw, 1rem); letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.96); text-decoration: none; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.32); } .pc-nav-actions { display: flex; align-items: center; gap: 1.15rem; } .pc-nav-link { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; border: 0; border-bottom: 1px solid transparent; padding: 0; background: none; border-radius: 0; } .pc-nav-link:hover, .pc-nav-link.is-on { color: rgba(255, 255, 255, 0.95); border-bottom-color: rgba(232, 197, 106, 0.55); } .pc-nav-solid { position: sticky; top: 0; background: rgba(11, 18, 24, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; pointer-events: auto; } .postcard { --pc-paper: #f6f1e7; --pc-paper-deep: #ebe4d6; --pc-ink: #1a1c1f; --pc-muted: #5c564c; --pc-gold: #c9a24a; --pc-gold-bright: #e8c56a; position: relative; height: 100dvh; max-height: 100dvh; overflow: hidden; color: var(--pc-ink); background: #0b1218; } .postcard-art { --pc-parallax-x: 0px; --pc-parallax-y: 0px; position: absolute; inset: 0; z-index: 0; overflow: hidden; isolation: isolate; background: #0b1218; } .postcard-plates { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .postcard-plate { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: 48% 34%; opacity: 0; transform: translate3d(var(--pc-parallax-x), var(--pc-parallax-y), 0) scale(1.05); transition: opacity 0.95s var(--fog-ease), transform 0.45s var(--fog-ease); z-index: 0; pointer-events: none; } .postcard-plate.is-on { opacity: 1; z-index: 1; animation: pc-pan 34s ease-in-out infinite alternate; } @keyframes pc-pan { from { object-position: 42% 32%; } to { object-position: 58% 40%; } } .postcard-veil { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(8, 12, 18, 0.28) 0%, transparent 20%, transparent 52%, rgba(8, 12, 18, 0.38) 100%); pointer-events: none; } .postcard-fx { position: absolute; inset: 0; z-index: 4; /* above landmark plates + veil; under product banner */ pointer-events: none; overflow: hidden; color: rgba(255, 255, 255, 0.82); } .postcard-fx::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 55% at 20% 70%, rgba(226, 234, 242, 0.42), transparent 62%), radial-gradient(ellipse 70% 45% at 85% 18%, rgba(255, 248, 230, 0.22), transparent 58%), linear-gradient(180deg, rgba(210, 222, 232, 0.18) 0%, transparent 34%, rgba(220, 228, 236, 0.2) 100%); pointer-events: none; } /* Product showcase banner — continuous L→R postcard ribbon */ .postcard-banner { position: absolute; top: calc(2.75rem + 0.4rem); left: 0; right: 0; z-index: 6; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .postcard-banner-track { display: flex; width: max-content; gap: clamp(0.55rem, 1.4vw, 0.9rem); padding: 0.3rem 0.5rem; animation: pc-banner-marquee 120s linear infinite; will-change: transform; } .postcard-banner-card { flex: 0 0 auto; width: clamp(4.4rem, 12vw, 6.2rem); padding: 0.32rem 0.32rem 0.4rem; border-radius: 0.2rem; background: linear-gradient(168deg, #fffdf7 0%, #f4ead8 58%, #ebe1cf 100%); border: 1px solid rgba(201, 162, 74, 0.45); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 10px 22px -14px rgba(0, 0, 0, 0.5); display: grid; gap: 0.22rem; } .postcard-banner-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0.1rem; background: #efe6d6; box-shadow: 0 0 0 1px rgba(26, 28, 31, 0.06); } .postcard-banner-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .postcard-banner-name { display: block; padding: 0 0.15rem; font-size: clamp(0.5rem, 1.5vw, 0.58rem); font-weight: 600; line-height: 1.2; color: #4a4338; text-align: center; max-height: 2.4em; overflow: hidden; } @keyframes pc-banner-marquee { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @media (min-width: 900px) { .postcard-banner-card { width: clamp(4.8rem, 7vw, 6.4rem); } } /* Per-scene landmark framing */ .postcard-plate[data-scene="bridge"] { object-position: 46% 32%; } .postcard-plate[data-scene="city"] { object-position: 50% 30%; } .postcard-plate[data-scene="houses"] { object-position: 52% 40%; } .postcard-plate[data-scene="alcatraz"] { object-position: 50% 36%; } .postcard-plate[data-scene="ferry"] { object-position: 48% 34%; } /* Scene-aware atmosphere (sun / fog / birds) */ .pc-sun, .pc-sun-ray, .pc-karl, .pc-mist, .pc-cloud, .pc-bird { transition: opacity 0.5s ease, top 0.5s ease, right 0.5s ease, bottom 0.5s ease, left 0.5s ease; } .postcard[data-scene="bridge"] .pc-sun { top: 8%; right: 12%; opacity: 1; } .postcard[data-scene="bridge"] .pc-karl { opacity: 0.78; } .postcard[data-scene="bridge"] .pc-mist { opacity: 0.7; } .postcard[data-scene="bridge"] .pc-bird { opacity: 0.72; } .postcard[data-scene="city"] .pc-sun { top: 6%; right: 10%; opacity: 1; } .postcard[data-scene="city"] .pc-karl { opacity: 0.35; } .postcard[data-scene="city"] .pc-mist { opacity: 0.28; } .postcard[data-scene="city"] .pc-bird { opacity: 0.7; } .postcard[data-scene="houses"] .pc-sun { top: 10%; right: 18%; opacity: 0.88; filter: blur(0.4px); } .postcard[data-scene="houses"] .pc-karl { opacity: 0.45; } .postcard[data-scene="houses"] .pc-mist { opacity: 0.55; } .postcard[data-scene="houses"] .pc-bird { opacity: 0.4; } .postcard[data-scene="alcatraz"] .pc-sun, .postcard[data-scene="alcatraz"] .pc-sun-ray { opacity: 0; } .postcard[data-scene="alcatraz"] .pc-bird { opacity: 0; } .postcard[data-scene="alcatraz"] .pc-karl { opacity: 0.98; } .postcard[data-scene="alcatraz"] .pc-mist { opacity: 0.92; } .postcard[data-scene="alcatraz"] .pc-cloud { opacity: 0.85; } .postcard[data-scene="ferry"] .pc-sun { top: 14%; right: 22%; opacity: 0.82; } .postcard[data-scene="ferry"] .pc-karl { opacity: 0.7; } .postcard[data-scene="ferry"] .pc-mist { opacity: 0.75; } .postcard[data-scene="ferry"] .pc-bird { opacity: 0.65; } /* Afternoon sun over the bay */ .pc-sun { position: absolute; top: 8%; right: 12%; width: clamp(3.5rem, 7vw, 5.5rem); height: clamp(3.5rem, 7vw, 5.5rem); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6d6 0%, #f0c85a 42%, rgba(232, 170, 60, 0.2) 68%, transparent 72%); animation: pc-sun-pulse 14s ease-in-out infinite alternate; filter: blur(0.2px); } .pc-sun-ray { position: absolute; top: 4%; right: 6%; width: 28vw; height: 28vw; max-width: 22rem; max-height: 22rem; background: conic-gradient( from 200deg at 70% 30%, transparent 0deg, rgba(255, 220, 140, 0.16) 18deg, transparent 36deg, rgba(255, 220, 140, 0.1) 54deg, transparent 72deg, rgba(255, 220, 140, 0.12) 96deg, transparent 120deg ); animation: pc-sun-rays 48s linear infinite; opacity: 0.85; mix-blend-mode: screen; } .pc-sun-ray-b { animation-duration: 72s; animation-direction: reverse; opacity: 0.62; mix-blend-mode: screen; } @keyframes pc-sun-pulse { from { transform: scale(1); opacity: 0.88; } to { transform: scale(1.04); opacity: 1; } } @keyframes pc-sun-rays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Karl the Fog — rolling marine layer */ .pc-karl { position: absolute; border-radius: 60% 40% 55% 45%; filter: blur(26px); background: rgba(232, 238, 244, 0.72); animation: pc-karl-roll 64s ease-in-out infinite alternate; mix-blend-mode: screen; } .pc-karl-a { left: -35%; bottom: 42%; width: 70vw; height: 28vh; opacity: 0.92; animation-duration: 58s; } .pc-karl-b { left: -20%; bottom: 34%; width: 85vw; height: 22vh; opacity: 0.78; background: rgba(214, 224, 234, 0.7); animation-duration: 78s; animation-delay: -18s; border-radius: 50% 50% 40% 60%; } .pc-karl-c { right: -40%; top: 10%; width: 55vw; height: 24vh; opacity: 0.62; background: rgba(248, 250, 252, 0.68); animation-duration: 86s; animation-delay: -30s; animation-name: pc-karl-drift; } @keyframes pc-karl-roll { from { transform: translate3d(0, 3%, 0) scale(1); } to { transform: translate3d(14vw, -4%, 0) scale(1.06); } } @keyframes pc-karl-drift { from { transform: translate3d(0, 0, 0); opacity: 0.4; } to { transform: translate3d(-16vw, 5%, 0); opacity: 0.7; } } .pc-cloud { position: absolute; border-radius: 999px; background: rgba(255, 255, 255, 0.48); filter: blur(14px); animation: pc-drift 78s linear infinite; opacity: 0.95; mix-blend-mode: screen; } .pc-cloud-a { width: 22vw; height: 8vh; top: 14%; left: -25%; } .pc-cloud-b { width: 14vw; height: 5vh; top: 24%; left: -30%; opacity: 0.8; animation-duration: 96s; animation-delay: -28s; } .pc-mist { position: absolute; border-radius: 999px; background: rgba(255, 255, 255, 0.32); filter: blur(18px); animation: pc-mist-sway 52s ease-in-out infinite alternate; mix-blend-mode: screen; } .pc-mist-a { left: -10%; bottom: 48%; width: 48vw; height: 11vh; opacity: 0.85; animation-duration: 46s; } .pc-mist-b { left: 25%; bottom: 40%; width: 40vw; height: 9vh; opacity: 0.72; animation-duration: 62s; animation-delay: -12s; } .pc-mist-c { right: -15%; bottom: 52%; width: 36vw; height: 8vh; opacity: 0.58; animation-duration: 70s; animation-delay: -22s; animation-name: pc-mist-rise; } @keyframes pc-mist-sway { from { transform: translate3d(0, 0, 0); opacity: 0.48; } to { transform: translate3d(8vw, -1.5vh, 0); opacity: 0.78; } } @keyframes pc-mist-rise { from { transform: translate3d(0, 1.5vh, 0); opacity: 0.36; } to { transform: translate3d(-7vw, -3vh, 0); opacity: 0.66; } } .pc-bird { position: absolute; animation: pc-fly 42s linear infinite; opacity: 0.72; } .pc-bird-a { top: 18%; left: -8%; } .pc-bird-b { top: 28%; left: -14%; animation-duration: 54s; animation-delay: -16s; opacity: 0.6; } .pc-bird-c { top: 22%; left: -20%; opacity: 0.5; animation-duration: 64s; animation-delay: -10s; } @keyframes pc-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(140vw, 1.5vh, 0); } } @keyframes pc-fly { 0% { transform: translate3d(0, 0, 0); } 35% { transform: translate3d(45vw, -1.8vh, 0); } 70% { transform: translate3d(90vw, 1.2vh, 0); } 100% { transform: translate3d(125vw, -0.6vh, 0); } } .postcard-deck { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; max-height: min(46dvh, 26rem); padding: 0.95rem clamp(0.9rem, 2.5vw, 1.75rem) 0.65rem; background: linear-gradient(180deg, rgba(246, 241, 231, 0.93) 0%, rgba(235, 228, 214, 0.97) 100%); border-top: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; transform: translateY(18px); opacity: 0; transition: transform 0.7s var(--fog-ease), opacity 0.7s var(--fog-ease); } .postcard.is-ready .postcard-deck { transform: translateY(0); opacity: 1; } body.pc-slide-page .pc-nav { opacity: 0; transform: translateY(-8px); transition: opacity 0.55s var(--fog-ease) 0.08s, transform 0.55s var(--fog-ease) 0.08s; } body.pc-slide-page:has(.postcard.is-ready) .pc-nav { opacity: 1; transform: translateY(0); } .postcard-deck-row { display: flex; flex-direction: column; gap: 0.75rem; max-width: 72rem; margin: 0 auto; } @media (min-width: 900px) { .postcard-deck { max-height: min(42dvh, 24rem); padding: 1.1rem clamp(1.25rem, 3vw, 2.25rem) 0.7rem; } } .postcard-caption { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; } .postcard-copy { position: relative; } .postcard-kicker { margin: 0 0 0.25rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8a7340; } .postcard-brand { margin: 0 0 0.4rem; font-family: var(--fog-font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; font-size: clamp(1.55rem, 3.6vw, 2.55rem); color: var(--pc-ink); } .postcard-lore { margin: 0 0 0.45rem; font-size: clamp(0.9rem, 1.35vw, 1.05rem); line-height: 1.45; color: var(--pc-ink); } .postcard-headline { margin: 0; font-size: clamp(0.86rem, 1.2vw, 0.98rem); line-height: 1.35; color: var(--pc-muted); min-height: 1.35em; font-style: italic; transition: opacity 0.2s var(--fog-ease); } /* Phone: keep copy readable in a shorter measure. */ @media (max-width: 899px) { .postcard-copy, .postcard-lore { max-width: 38rem; } } .postcard-headline.is-fading { opacity: 0; } .postcard.is-scene-tick .postcard-stamp.is-on { transform: translateY(-1px) scale(1.03); } .postcard-stamps { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: nowrap; gap: 0.35rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; } .postcard-stamps::-webkit-scrollbar { display: none; } @media (max-width: 899px) { .postcard-stamps li { flex: 0 0 auto; } } .postcard-stamp { appearance: none; border: 1px dashed rgba(201, 162, 74, 0.7); background: rgba(255, 255, 255, 0.65); color: var(--pc-ink); font-family: var(--fog-font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: -0.01em; line-height: 1; text-align: center; padding: 0.55rem 0.75rem; border-radius: 0.28rem; cursor: pointer; min-height: 40px; white-space: nowrap; transition: background-color 0.2s var(--fog-ease), border-color 0.2s var(--fog-ease), transform 0.2s var(--fog-ease); } .postcard-stamp:hover { background: #fff; transform: translateY(-1px); } .postcard-stamp.is-on { background: var(--pc-gold-bright); border-style: solid; border-color: var(--pc-gold); } .postcard-shelf { max-width: none; margin: 0; padding: 0; } .postcard-shelf-label { display: none; } .postcard-picks { margin: 0; padding: 0; list-style: none; display: none; gap: 0.45rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .postcard-picks::-webkit-scrollbar { display: none; } .postcard-picks.is-on { display: flex; animation: pc-picks-in 0.35s var(--fog-ease); } @keyframes pc-picks-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .postcard-pick { flex: 0 0 auto; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); align-items: center; gap: 0.5rem; width: min(12.5rem, 68vw); min-height: 3.4rem; padding: 0.32rem 0.55rem 0.32rem 0.32rem; border-radius: 0.22rem; background: linear-gradient(168deg, #fffdf7 0%, #f3ead9 100%); color: var(--pc-ink); border: 1px solid rgba(201, 162, 74, 0.4); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; } .postcard-pick img { width: 3.2rem; height: 2.45rem; object-fit: cover; border-radius: 0.12rem; background: #efe6d6; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(26, 28, 31, 0.06); } .postcard-pick span { font-size: 0.72rem; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .postcard-pick-empty { background: rgba(255, 253, 247, 0.55); color: var(--pc-muted); box-shadow: none; grid-template-columns: 1fr; } /* Desktop: stretch copy + stamps across the full bottom paper band. */ @media (min-width: 900px) { .postcard-deck-row { display: flex; flex-direction: column; max-width: none; width: 100%; } .postcard-caption, .postcard-copy, .postcard-shelf, .postcard-stamps, .postcard-picks.is-on { width: 100%; max-width: none; } .postcard-brand { font-size: clamp(2.05rem, 3.6vw, 3.25rem); } .postcard-lore { max-width: none; font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.5; } .postcard-headline { font-size: clamp(0.98rem, 1.3vw, 1.12rem); } .postcard-stamps { display: flex; flex-wrap: nowrap; gap: 0.45rem; overflow: visible; } .postcard-stamps li { flex: 1 1 0; min-width: 0; } .postcard-stamp { width: 100%; padding-inline: 0.35rem; } .postcard-pick { flex: 1 1 0; min-width: 0; width: auto; } } .pc-join { background: transparent; color: var(--pc-ink, #1a1c1f); border: 0; padding: 0; min-width: 0; } .pc-join-inner { max-width: none; margin: 0; padding: 0.7rem 0.8rem 0.75rem; text-align: left; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(26, 28, 31, 0.08); border-radius: 0.6rem; } .pc-join-title { font-family: var(--fog-font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 1.15rem; margin: 0 0 0.15rem; color: var(--pc-ink, #1a1c1f); } .pc-join-sub { font-size: 0.82rem; color: var(--pc-muted, #5c564c); margin: 0 0 0.55rem; line-height: 1.35; } .pc-form { display: flex; flex-direction: column; gap: 0.45rem; text-align: left; } .pc-form-submit { margin-top: 0.1rem; } .pc-field label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; color: var(--pc-muted, #5c564c); margin-bottom: 0.2rem; } .pc-optional { opacity: 0.75; font-weight: 400; } .pc-form input[type="text"], .pc-form input[type="email"] { width: 100%; padding: 0.55rem 0.7rem; border-radius: 0.4rem; border: 1px solid rgba(26, 28, 31, 0.14); background: #fff; color: var(--pc-ink, #1a1c1f); font-family: var(--fog-font-body); font-size: 0.9rem; transition: box-shadow 0.2s var(--fog-ease), border-color 0.2s var(--fog-ease); } .pc-form input[type="text"]:focus, .pc-form input[type="email"]:focus { outline: none; border-color: var(--pc-gold, #c9a24a); box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.28); } .pc-form .errorlist { list-style: none; margin: 0.2rem 0 0; padding: 0; font-size: 0.75rem; color: #9a3412; } .pc-submit { appearance: none; width: 100%; min-height: 40px; border: 0; border-radius: 0.4rem; background: var(--pc-gold-bright, #e8c56a); color: var(--pc-ink, #1a1c1f); font-family: var(--fog-font-body); font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: background-color 0.2s var(--fog-ease), transform 0.2s var(--fog-ease); } .pc-submit:hover { background: #f0d489; transform: translateY(-1px); } .pc-join-note { display: none; } .pc-join-contact { margin: 0.45rem 0 0; font-size: 0.8rem; color: var(--pc-ink, #1a1c1f); line-height: 1.35; } .pc-join-contact a { color: #8a7340; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .pc-join-contact a:hover { color: #6e5b32; } .pc-join-success { padding: 0.1rem 0; } .pc-slide-foot { max-width: 72rem; margin: 0.35rem auto 0; text-align: right; font-size: 0.72rem; } .pc-slide-foot a { color: rgba(26, 28, 31, 0.55); text-decoration: none; } .pc-slide-foot a:hover { color: var(--pc-ink); text-decoration: underline; } @media (max-width: 899px) { /* Reserve a clear top art band; deck stays shorter and scrollable. */ .postcard-deck { max-height: min(50dvh, 28rem); overflow-y: auto; -webkit-overflow-scrolling: touch; } .postcard-banner-card { width: clamp(4.2rem, 20vw, 5.6rem); } .postcard-plate { inset: 0; width: 100%; height: 100%; object-fit: cover; /* Upper-center: keep landmarks in the visible hero above the paper band. */ object-position: 50% 28%; transform: none; } .postcard-plate[data-scene="bridge"] { object-position: 48% 26%; } .postcard-plate[data-scene="city"] { object-position: 50% 24%; } .postcard-plate[data-scene="houses"] { object-position: 54% 34%; } .postcard-plate[data-scene="alcatraz"] { object-position: 50% 30%; } .postcard-plate[data-scene="ferry"] { object-position: 46% 28%; } .postcard-plate.is-on { animation: none; } .postcard-veil { background: linear-gradient( 180deg, rgba(8, 12, 18, 0.28) 0%, transparent 18%, transparent 42%, rgba(8, 12, 18, 0.22) 72%, rgba(8, 12, 18, 0.5) 100% ); } .pc-sun { top: 10%; right: 10%; } .pc-karl-a { bottom: 48%; } .pc-karl-b { bottom: 40%; } .pc-mist-a { bottom: 52%; } .pc-mist-b { bottom: 46%; } .pc-mist-c { bottom: 56%; } .pc-field-optional { display: none; } } @media (max-width: 899px) and (max-height: 720px) { .postcard-deck { max-height: min(48dvh, 24rem); } .postcard-plate { object-position: 50% 24%; } } @media (max-height: 720px) { /* Keep picks in DOM for stamp-rain images; hide visually only. */ .postcard-shelf { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .postcard-brand { font-size: clamp(1.4rem, 3.2vw, 2.1rem); } .postcard-lore { font-size: 0.88rem; } .postcard-deck { max-height: min(52dvh, 26rem); } } @media (prefers-reduced-motion: reduce) { .postcard-plate, .postcard-headline, .postcard-picks.is-on, .postcard-deck, body.pc-slide-page .pc-nav { transition: none; animation: none; } .pc-cloud, .pc-mist, .pc-bird, .pc-karl, .pc-sun, .pc-sun-ray, .postcard-plate.is-on, .postcard-banner-track { animation: none; } .postcard-plate { transform: none; } .postcard-deck, body.pc-slide-page .pc-nav { opacity: 1; transform: none; } } /* —— Public subpages (Inquire / Contact): one viewport, like the welcome slide —— */ html:has(body.pub-page), body.pub-page { height: 100%; overflow: hidden; } body.pub-page { height: 100dvh; max-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(ellipse at 20% 0%, rgba(232, 197, 106, 0.12), transparent 45%), linear-gradient(180deg, #f7f3ea 0%, #ebe4d6 100%); color: #1a1c1f; } body.pub-page .fog-footer { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body.pub-page .pc-nav-solid { position: absolute; top: 0; left: 0; right: 0; z-index: 40; flex-shrink: 0; } .pub-shell { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; width: min(40rem, calc(100% - 2rem)); margin: 0 auto; padding: calc(2.75rem + 0.55rem) 0 0.85rem; min-height: 0; box-sizing: border-box; } .pub-panel { width: 100%; max-height: 100%; overflow: hidden; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(26, 28, 31, 0.08); border-radius: 0.65rem; padding: clamp(0.85rem, 2.2dvh, 1.5rem) clamp(0.95rem, 2.5vw, 1.35rem); box-shadow: 0 18px 40px -32px rgba(0, 0, 0, 0.35); } .pub-kicker { margin: 0 0 0.25rem; font-size: clamp(0.62rem, 1.6dvh, 0.7rem); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8a7340; } .pub-title { margin: 0 0 clamp(0.25rem, 1dvh, 0.5rem); font-family: var(--fog-font-display); font-size: clamp(1.35rem, 3.5dvh, 2rem); font-weight: 800; letter-spacing: -0.02em; } .pub-lede { margin: 0 0 clamp(0.65rem, 2dvh, 1.15rem); color: #5c564c; line-height: 1.4; font-size: clamp(0.88rem, 2.1dvh, 1rem); } .pub-form .pc-field { margin-bottom: clamp(0.45rem, 1.4dvh, 0.85rem); } .pub-form .pc-field label { font-size: clamp(0.78rem, 1.8dvh, 0.9rem); } .pub-form .pc-field input, .pub-form .pc-field textarea { padding-block: clamp(0.45rem, 1.2dvh, 0.65rem); } .pub-actions { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; margin: clamp(0.55rem, 1.5dvh, 1rem) 0 0; } .pub-actions a { color: #0b4f6c; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .letterhead { width: 100%; max-height: 100%; overflow: hidden; background: #fffef9; border: 1px solid rgba(26, 28, 31, 0.12); box-shadow: 0 22px 48px -34px rgba(0, 0, 0, 0.4); padding: clamp(0.85rem, 2.4dvh, 2.25rem) clamp(0.95rem, 3vw, 2.25rem); box-sizing: border-box; } .letterhead-top { display: flex; align-items: center; gap: clamp(0.65rem, 2vw, 1rem); } .letterhead-logo { width: clamp(2.4rem, 7dvh, 3.5rem); height: clamp(2.4rem, 7dvh, 3.5rem); object-fit: contain; flex-shrink: 0; } .letterhead-name { margin: 0; font-family: var(--fog-font-display); font-size: clamp(1.15rem, 3.2dvh, 1.75rem); font-weight: 800; letter-spacing: -0.02em; } .letterhead-tag { margin: 0.15rem 0 0; font-size: clamp(0.75rem, 1.8dvh, 0.85rem); color: #5c564c; } .letterhead-rule { height: 2px; margin: clamp(0.55rem, 1.8dvh, 1.15rem) 0 clamp(0.6rem, 2dvh, 1.25rem); background: linear-gradient(90deg, #c9a24a 0%, rgba(201, 162, 74, 0.15) 100%); } .letterhead-title { margin: 0 0 clamp(0.35rem, 1.2dvh, 0.75rem); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8a7340; } .letterhead-address { margin: 0 0 clamp(0.55rem, 1.6dvh, 1.1rem); font-family: inherit; font-size: clamp(0.88rem, 2.2dvh, 1rem); line-height: 1.45; white-space: pre-wrap; color: #1a1c1f; } .letterhead-channels { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.3rem, 1dvh, 0.55rem); } .letterhead-channels li { display: grid; gap: 0.05rem; } .letterhead-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8a7340; } .letterhead-channels a { color: #0b4f6c; text-decoration: none; font-weight: 600; } .letterhead-channels a:hover { text-decoration: underline; text-underline-offset: 2px; } .letterhead-foot { margin-top: clamp(0.65rem, 2dvh, 1.5rem); padding-top: clamp(0.5rem, 1.4dvh, 1rem); border-top: 1px solid rgba(26, 28, 31, 0.1); font-size: clamp(0.8rem, 1.9dvh, 0.88rem); color: #5c564c; } .letterhead-foot a { color: #0b4f6c; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } body.pub-page .pc-nav-solid .pc-nav-brand, body.pub-page .pc-nav-solid .pc-nav-link { color: rgba(255, 255, 255, 0.78); } body.pub-page .pc-nav-solid .pc-nav-link:hover, body.pub-page .pc-nav-solid .pc-nav-link.is-on { color: rgba(255, 255, 255, 0.96); } @media (max-height: 640px) { .pub-shell { padding-top: calc(2.5rem + 0.35rem); padding-bottom: 0.5rem; } .pub-lede { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .letterhead-tag { display: none; } }