/* ========================================================================== STYLE.CSS — layout & look of the "Coming Soon" page specifically ========================================================================== This file is written MOBILE-FIRST. That means: - Every rule below with NO @media wrapper is the phone-screen version. - Each `@media (min-width: ...)` block further down OVERRIDES a few properties once the screen is at least that wide, to make better use of the extra space on tablets/laptops/desktops. Reading order top-to-bottom = layout order top-to-bottom on the page: page background -> page shell -> header/logo -> hero text -> button -> footer -> birthday pop-up (a fixed overlay, independent of the flow above). Every color/size/spacing value here is a `var(--token-name)` pulled from tokens.css — see that file if you want to know what a value actually is. ========================================================================== */ /* -------------------------------------------------------------------------- PAGE BACKGROUND — the full-bleed hero photo Lives on rather than `.page`, on purpose: `.page` gets a max-width at desktop (below) so its CONTENT doesn't stretch edge-to-edge on huge monitors, but we still want the PHOTO to cover the entire browser window no matter how wide it is. Putting the background one level up, on , gives us both at once. This intentionally overrides the design system's general "no photo as a full-page background" rule, specifically for this page, per request. A dark gradient is painted BETWEEN the photo and the page content so headline/countdown text stays readable on top of it. Backgrounds paint in the order listed, first-on-top — so the gradient (listed first) sits visually above the photo (listed second). On phones (this base rule) the text column runs nearly full-width, so the scrim is a flat, fairly dark wash across the whole image — enough contrast for white text anywhere on the page. Wider screens get a left-to-right version below, matching the original mockup: dark behind the text on the left, fading out so the photo reads clearly on the right where there's no text over it. */ body { min-height: 100svh; /* "small viewport height" — full screen height, safe on mobile browser UI */ background-image: linear-gradient(rgba(11,11,11,.82), rgba(11,11,11,.82)), url("../images/hero-background.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } /* -------------------------------------------------------------------------- PAGE SHELL `.page` is the layout wrapper in index.html — it stacks header/hero/ footer top to bottom and pushes the footer down even on a tall, mostly- empty phone screen. It no longer carries the background itself (that's on now, see above) — it's purely a layout + max-width container. -------------------------------------------------------------------------- */ .page { position: relative; /* establishes the positioning context other elements sit against */ min-height: 100svh; display: flex; flex-direction: column; padding: var(--space-6) var(--space-5); /* 24px top/bottom, 20px sides on phones */ } /* -------------------------------------------------------------------------- HEADER — logo + tagline -------------------------------------------------------------------------- */ .site-header { position: relative; z-index: 1; /* sit above .hero-mark */ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); } .logo-link { display: inline-flex; /* shrinks the clickable/focusable area to fit the image exactly */ } .logo { height: 28px; width: auto; display: block; } /* The thin vertical line between the logo and the tagline, like the mockup. `aria-hidden="true"` is set on it in the HTML since it's purely visual. */ .header-divider { width: 1px; height: 24px; background: var(--border-strong); } .tagline { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); line-height: 1.25; color: var(--text-primary); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); /* see the note on .hero below */ } .tagline .accent { color: var(--text-accent); } /* -------------------------------------------------------------------------- HERO — the big "Coming Soon" moment `.hero` grows to fill the leftover vertical space and centers its content in that space, so the block sits mid-page instead of glued to the header. -------------------------------------------------------------------------- */ .hero { position: relative; z-index: 1; flex: 1; /* take up all the room .site-header and .site-footer don't use */ display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); max-width: 640px; /* keeps text lines from stretching unreadably wide on desktop */ padding-block: var(--space-9); /* A soft dark shadow directly behind every letter, as a contrast safety net independent of exactly what photo pixel happens to sit behind the text. `text-shadow` is inherited automatically, so this one line covers .headline, .lede, and the pine-colored .accent spans inside them too — no need to repeat it on each. Why this matters: the dark overlay on intentionally fades out toward the right edge on wide screens (see the "PAGE BACKGROUND" comment near the top of this file) so the photo stays visible there — but that also means text wrapping close to that fade zone gets less overlay protection. This shadow keeps it readable either way, without needing to darken the whole photo more than the design calls for. */ text-shadow: 0 2px 12px rgba(0, 0, 0, .65); } .headline { font-family: var(--font-display); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tr-display); line-height: var(--lh-tight); /* clamp(MIN, PREFERRED, MAX) = fluid font size: it scales smoothly with the viewport width but never goes below/above these bounds. This is what makes the huge mockup headline shrink gracefully on a small phone instead of overflowing the screen. */ font-size: clamp(3rem, 14vw, 6.5rem); } .lede { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-body); max-width: 46ch; /* "ch" = roughly one character width — caps the paragraph's measure for readability */ } .lede .accent { color: var(--text-accent); } /* -------------------------------------------------------------------------- DIVIDER — the short accent line above the button, like the mockup -------------------------------------------------------------------------- */ .divider-line { width: 32px; height: 2px; background: var(--pine-300); border: none; border-radius: var(--radius-pill); } /* -------------------------------------------------------------------------- BUTTON — pill shape with the brand's signature "leading dot" arrow -------------------------------------------------------------------------- */ .btn { align-self: flex-start; /* don't stretch full-width on mobile — hug the text */ display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--pad-control-y) var(--pad-control-x); border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-body-sm); letter-spacing: var(--tr-label); white-space: nowrap; cursor: pointer; transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .btn:active { transform: scale(var(--press-scale)); } .btn-primary { background: var(--bg-accent); color: var(--text-on-accent); border: 1px solid transparent; box-shadow: var(--shadow-accent); } .btn-primary:hover { background: var(--bg-accent-hover); } .btn-dot { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--radius-pill); background: #fff; color: var(--bg-accent); transition: transform var(--dur-base) var(--ease-out); } /* The little arrow rotates 45° on hover — a signature detail from the design system's Button component. */ .btn:hover .btn-dot { transform: rotate(45deg); } /* -------------------------------------------------------------------------- FOOTER -------------------------------------------------------------------------- */ .site-footer { position: relative; z-index: 1; font-family: var(--font-body); font-size: var(--fs-caption); /* --text-faint was too low-contrast here (~3.7:1 against the dark background — WCAG AA needs 4.5:1 for text this small). --text-muted is a lighter gray that clears that bar comfortably (~6:1). */ color: var(--text-muted); /* Extra safety net regardless of what's directly behind this text — see the note on .hero above for why every text block over the photo has one. */ text-shadow: 0 1px 8px rgba(0, 0, 0, .7); } /* -------------------------------------------------------------------------- BIRTHDAY POP-UP A personal surprise that pops in shortly after the page loads (see assets/js/birthday.js), sitting on top of everything else. Hidden by default via opacity/visibility so it can fade AND scale in smoothly — the `hidden` HTML attribute can't be transitioned, so we don't use it. -------------------------------------------------------------------------- */ .birthday-overlay { position: fixed; inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 — covers the whole viewport */ z-index: 100; /* above everything else on the page (hero content sits at z-index 1) */ display: grid; place-items: center; /* centers the card both horizontally and vertically */ padding: var(--space-5); background: rgba(7, 7, 7, .78); backdrop-filter: blur(6px); /* softly blurs the page behind the overlay */ opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); /* wait until the fade finishes before fully hiding */ } /* JS adds this class to trigger the entrance; removing it reverses it. */ .birthday-overlay.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-slow) var(--ease-out); } .birthday-card { position: relative; width: 100%; max-width: 440px; padding: var(--pad-card-lg); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); text-align: center; /* The actual "pop": starts slightly small and transparent, then settles into place. Runs on a slightly longer, custom duration (480ms) rather than the standard --dur-slow token, so this one special celebratory moment feels a touch more deliberate than everyday hovers/transitions. */ transform: scale(.85); opacity: 0; transition: transform 480ms var(--ease-entrance), opacity 480ms var(--ease-entrance); } .birthday-overlay.is-open .birthday-card { transform: scale(1); opacity: 1; } .birthday-heading { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h2); letter-spacing: var(--tr-display); color: var(--text-primary); margin-bottom: var(--space-4); } .birthday-message { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--text-body); } .birthday-close { position: absolute; top: var(--space-4); right: var(--space-4); width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); background: transparent; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .birthday-close:hover { background: var(--bg-ghost-hover); color: var(--text-primary); } /* Press feedback, matching the same shrink used on the main CTA button (.btn:active above) — this button was missing that third state. */ .birthday-close:active { transform: scale(var(--press-scale)); } /* ========================================================================== RESPONSIVE BREAKPOINTS Mobile-first: base rules above already work on any screen size. These just take advantage of extra space once it's available. ========================================================================== */ /* Small tablets and larger phones in landscape */ @media (min-width: 640px) { .page { padding: var(--space-8) var(--space-9); } .logo { height: 32px; } .hero { gap: var(--space-7); } } /* Tablets and small laptops */ @media (min-width: 900px) { /* Now that the text column (.hero, max-width below) no longer spans the full screen, switch the scrim to a left-to-right fade: strong over the text on the left, easing away so the photo shows clearly on the right — matching the original mockup's composition. Still on , so it stays full-width no matter how wide the window gets. The minimum (rightmost) opacity is deliberately kept fairly high — .55, not the near-transparent .30 this used to be. `.page` is centered on very wide monitors (see the 1200px+ breakpoint below), so the exact pixel position where the text column ends keeps shifting as the window gets wider — a lower floor risked the fade thinning out right behind wrapped text on those screens. Combined with the text-shadow on .hero/ .tagline/.site-footer above, this keeps things readable without needing to track that position exactly. */ body { background-image: linear-gradient(100deg, rgba(11,11,11,.93) 0%, rgba(11,11,11,.85) 35%, rgba(11,11,11,.68) 60%, rgba(11,11,11,.55) 100%), url("../images/hero-background.jpg"); } .page { padding: var(--space-9) var(--space-12); } .hero { max-width: 680px; padding-block: var(--space-11); } } /* Desktop */ @media (min-width: 1200px) { .page { /* Keep CONTENT readable on very wide monitors: centre a max-width column instead of letting text stretch edge-to-edge. The background photo on is unaffected by this and still spans the full browser width. */ max-width: var(--page-max); margin-inline: auto; padding-block: var(--space-11); } }