@import url("https://use.typekit.net/ilv2ywg.css"); /* ========================================================================== Cantera Co. — base styles Colour + spacing tokens pulled from Figma (node 103:2). ========================================================================== */ :root { --color-bg: #d1c1af; /* Base 1 — page background */ --color-bg-dark: #6e5844; /* Base 3 — header / footer */ --color-accent: #b59d85; /* Base 2 — buttons */ --color-hero-bg: #cfb79d; /* Hero background */ --color-ink: #0f0f0f; --color-white: #ffffff; --color-placeholder: #d9d9d9; /* Contralto Xsmall is a licensed display serif used throughout the Figma file for headings, nav, and logotype-adjacent copy. It's served via the Adobe/Typekit @import at the top of this file, published under the family name "contralto-xsmall" (not the display name "Contralto Xsmall" — font-family matching is exact, so the value here has to match what the kit actually publishes). The kit ships weight 300 (Light) and 400 (regular + italic). Cormorant Garamond is the fallback if the Typekit request ever fails. */ --font-display: "contralto-xsmall", "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --container-width: 1440px; --container-padding: clamp(24px, 5vw, 82px); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } /* The [hidden] attribute is used to hide a few elements (Book Now button, footer social links) without deleting their markup. It loses to any author-stylesheet `display` rule at equal specificity, so it needs reasserting here. */ [hidden] { display: none !important; } /* Scroll-reveal utility — see script.js. Elements marked .reveal start fully visible so content still shows for no-JS visitors or if the script errors before it runs. Only once script.js confirms it's running (by stamping .js on , first line executed) do .reveal elements drop to their hidden state, ready for the IntersectionObserver below to fade them in as each scrolls into view. */ .reveal { transition: opacity 0.6s ease, transform 0.6s ease; } .js .reveal { opacity: 0; transform: translateY(24px); } .reveal.is-visible { opacity: 1; transform: translateY(0); } h1, h2, h3, p { margin: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; font-family: var(--font-body); font-size: 16px; transition: opacity 0.2s ease, background-color 0.2s ease; } .btn--pill { background: var(--color-accent); color: var(--color-white); border-radius: 999px; padding: 12px 32px; white-space: nowrap; } .btn--pill:hover { opacity: 0.85; } /* ========================================================================== Header ========================================================================== */ .site-header { background: var(--color-bg-dark); position: sticky; top: 0; z-index: 50; } .site-header__inner { max-width: var(--container-width); margin: 0 auto; padding: 14px var(--container-padding); /* 20px * 0.7 — 30% shorter header */ display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: inline-flex; flex-shrink: 0; } .logo__mark { width: 118px; height: auto; } /* The nav is a hamburger-triggered dropdown at every viewport size: a collapsed panel anchored under the header, out of normal flow (so it doesn't push header content around). .site-header is the nearest positioned ancestor (position: sticky establishes a containing block), so the panel spans the full header width, not just .site-header__inner's padded content box. Reveal uses the grid-template-rows 0fr → 1fr technique rather than a max-height guess: .main-nav-panel sits in a single grid row that animates smoothly from zero to its own content height — no magic ceiling number, no pause/jerk if content height ever changes. */ .main-nav { position: absolute; top: 100%; left: 0; width: 100%; background: var(--color-bg-dark); display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; } .main-nav.is-open { grid-template-rows: 1fr; } .main-nav__panel { min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; /* Links fade + slide in slightly after the panel starts opening, and reverse instantly on close so they don't linger visible while the panel collapses. */ opacity: 0; transform: translateY(-8px); transition: opacity 0.2s ease 0.05s, transform 0.2s ease 0.05s; } .main-nav.is-open .main-nav__panel { opacity: 1; transform: translateY(0); transition: opacity 0.25s ease 0.1s, transform 0.25s ease 0.1s; } .main-nav__list { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--container-padding) 20px; } .main-nav__list a { display: block; padding: 12px 0; font-family: var(--font-display); font-weight: 200; font-size: 17px; letter-spacing: 0.02em; text-transform: capitalize; color: var(--color-white); transition: opacity 0.2s ease; } .main-nav__list a:hover { opacity: 0.75; } /* Hamburger trigger — always visible; toggles .main-nav's open state. */ .nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 5px; width: 32px; height: 32px; padding: 0; border: none; background: none; cursor: pointer; flex-shrink: 0; } .nav-toggle__bar { display: block; height: 2px; background: var(--color-white); transition: transform 0.2s ease, opacity 0.2s ease; } /* Morph the three bars into an X while the dropdown is open. */ .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== Hero ========================================================================== */ .hero { background: var(--color-hero-bg) url("assets/landing-page.png") center / cover no-repeat; min-height: clamp(420px, 56vw, 812px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 48px var(--container-padding); /* Plays once on page load, above the fold — pure CSS (not the .reveal/ IntersectionObserver pattern below) so it always plays regardless of scroll position or JS timing; animation-fill-mode: both holds opacity at 0 before it starts and 1 after it ends. */ animation: hero-fade-in 1s ease both; } @keyframes hero-fade-in { from { opacity: 0; } to { opacity: 1; } } .hero__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; } .hero__tagline { font-family: var(--font-body); font-size: clamp(16px, 1.6vw, 23px); color: var(--color-bg-dark); } /* ========================================================================== Intro ========================================================================== */ .intro { padding: clamp(64px, 9vw, 128px) var(--container-padding) clamp(48px, 6vw, 96px); } .intro__inner { max-width: 958px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 24px; } .intro__inner p { font-family: var(--font-display); font-weight: 200; font-size: clamp(20px, 2.2vw, 32px); line-height: 1.5; color: var(--color-ink); } /* ========================================================================== Concepts ========================================================================== */ .concepts { padding: clamp(48px, 6vw, 96px) 0 clamp(96px, 10vw, 160px); } .concepts__inner { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding); display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(32px, 6vw, 64px); } .concepts__intro { width: 250px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; } .concepts__intro h2 { font-family: var(--font-display); font-weight: 200; font-size: 32px; color: var(--color-ink); } .concepts__intro p { font-family: var(--font-display); font-weight: 200; font-size: 16px; line-height: 1.5; color: var(--color-ink); } .carousel { position: relative; flex: 1 1 480px; min-width: 0; width: 100%; } .carousel__viewport { position: relative; /* containing block for .carousel__arrow, so it centers on the cards, not the dots row below */ width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .carousel__viewport::-webkit-scrollbar { display: none; } .carousel__track { display: flex; gap: 24px; /* leave room so each card's decorative backdrop (which overflows its nominal box slightly) doesn't get clipped by the scroll viewport */ padding: 24px 0 20px; } .carousel__arrow { position: absolute; top: 50%; /* centered on the cards themselves — .carousel__viewport wraps just the track, not the dots row below it */ transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.2); color: var(--color-white); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; } .carousel__arrow--prev { left: 8px; } .carousel__arrow--next { right: 8px; } .carousel__arrow:hover { background: rgba(0, 0, 0, 0.35); } .carousel__arrow span { transform: translateY(-1px); } /* ---- Concept card ---- */ .concept-card { scroll-snap-align: start; position: relative; flex: 0 0 300px; width: 300px; /* Mat border reveal around the photo, and room below for the title + description — everything sits inside the polaroid frame's bounds. */ padding: 15px 23px 24px; } /* Decorative polaroid mat — sits behind the whole card (photo, title and description alike), sized to the card's full box via inset:0 so the padding above becomes the visible mat border on every side. Width/height are set explicitly (not just inset) because an absolutely positioned with only inset and no width/height auto-sizes to its own intrinsic ratio instead of stretching to fill the box; the SVG itself uses preserveAspectRatio="none" so it stretches cleanly. */ .concept-card__frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; /* override the global img{max-width:100%} reset, which would otherwise clamp this back to the image's width */ z-index: -1; pointer-events: none; } /* The key image — each concept's hero photography, 16:9 landscape per the brand's photo direction, with the wordmark overlaid on top of it. Width stays at the card's full content width; height is derived from it. */ .concept-card__photo { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } .concept-card__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(90%); /* tint the photo 10% darker */ } /* Sized as a square (not a wide box): logo files range from square marks to wide wordmarks, and object-fit: contain scales each to fit its box without distortion. A box no wider than it is tall guarantees every logo — square or wide — ends up constrained by width rather than height, so they all render at the same width regardless of their own aspect ratio. */ .concept-card__logo-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 97.5%; /* 65% * 1.5 — the box is square, so this sets logo width too */ aspect-ratio: 1 / 1; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)); pointer-events: none; } .concept-card__title { font-family: var(--font-display); font-weight: 200; font-size: 24px; color: var(--color-ink); margin-top: 20px; } .concept-card__desc { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--color-ink); margin-top: 8px; } .carousel__dots { display: flex; justify-content: center; gap: 10px; margin-top: 32px; } .carousel__dots button { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(0, 0, 0, 0.3); cursor: pointer; } .carousel__dots button[aria-selected="true"] { background: var(--color-ink); } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--color-bg-dark); color: var(--color-white); padding: clamp(48px, 6vw, 76px) var(--container-padding) 32px; } .site-footer__inner { max-width: var(--container-width); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; } .site-footer__brand { display: flex; flex-direction: column; gap: 12px; } .site-footer__logo { width: 118px; height: auto; } .site-footer__tagline { font-family: var(--font-body); font-size: 16px; } .site-footer__signup { grid-column: 1; margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 324px; } .site-footer__divider { display: block; grid-column: 1; /* was previously implicit as .site-footer__signup's first child; kept in-grid now that the signup form it introduced is hidden */ width: 73px; height: 1px; margin-top: 24px; /* matches .site-footer__signup's own margin-top, so the line lands where it always did */ background: var(--color-white); } .site-footer__signup h3 { font-family: var(--font-display); font-weight: 200; font-size: 16px; } .signup-form { width: 100%; } .signup-form input { width: 100%; height: 34px; background: rgba(209, 193, 175, 0.1); border: 1px solid var(--color-white); color: var(--color-white); font-family: var(--font-body); font-size: 14px; padding: 0 12px; } .signup-form input::placeholder { color: rgba(255, 255, 255, 0.5); } .signup-form input:focus { outline: 1px solid var(--color-white); outline-offset: 2px; } .site-footer__links { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; justify-self: end; } .site-footer__links a { font-family: var(--font-body); font-size: 14px; text-decoration: underline; text-underline-offset: 2px; } .site-footer__links a:hover { opacity: 0.8; } .site-footer__copyright { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; font-family: var(--font-body); font-size: 14px; text-align: right; white-space: nowrap; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 900px) { .concepts__inner { flex-direction: column; flex-wrap: nowrap; } .concepts__intro { width: 100%; } .carousel { width: 100%; } .site-footer__inner { grid-template-columns: 1fr; } .site-footer__links { grid-column: 1; grid-row: auto; align-items: flex-start; justify-self: start; } .site-footer__copyright { grid-column: 1; grid-row: auto; text-align: left; justify-self: start; } }