/* Fonts are loaded via in each page's (with preconnect), so no @import here — avoids a second, render-blocking request. */ /* ===================================================================== Grizzly Health — Design System & Styles (Dark editorial theme) Deep forest green · cream serif · full-bleed imagery Single shared stylesheet for all pages. ===================================================================== */ /* ---------- Design tokens ---------- */ :root { /* Greens (dark → light) */ --green-900: #0d1b13; /* darkest — footer */ --green-850: #112016; --green-800: #15281c; /* page background */ --green-750: #1a3122; /* alternate section */ --green-700: #21402f; /* panels / borders */ --green-650: #2a5038; --green-600: #356a47; --green-500: #468a5c; /* Cream / accents */ --cream: #f2ead7; /* primary text & headings */ --cream-2: #e3d9bf; /* slightly dimmer cream */ --sage: #a9bba6; /* muted secondary text */ --gold: #c7a86b; /* subtle warm accent */ --bg: var(--green-800); --surface: #1b3324; /* card / panel background */ --ink: var(--cream); --muted: var(--sage); --line: rgba(242, 234, 215, 0.14); --primary: var(--cream); --accent: var(--cream); /* Typography */ --font-display: "Anton", "Impact", "Haettenschweiler", system-ui, sans-serif; /* bold impact caps */ --font-ui: "Archivo", "Poppins", "Segoe UI", system-ui, sans-serif; /* strong UI labels */ --font-body: "Barlow", "Segoe UI", system-ui, sans-serif; --font-logo: "Goldman", "Archivo Black", "Impact", sans-serif; /* wide, strong, sharp logo */ /* Shape & depth */ --radius: 0; --radius-sm: 0; --shadow: 0 14px 34px rgba(0, 0, 0, 0.32); --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.45); /* Springy "pop" easing — the hero action-button hover motion, reused site-wide */ --ease-pop: cubic-bezier(0.2, 0.85, 0.25, 1); --maxw: 1200px; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.02; margin: 0 0 0.4em; letter-spacing: 0.012em; text-transform: uppercase; color: var(--cream); } h1 { font-size: clamp(2.7rem, 5.6vw, 4.8rem); } h2 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); } h3 { font-size: 1.5rem; } p { margin: 0 0 1rem; } a { color: var(--cream); text-decoration: none; } a:hover { color: var(--gold); } img { max-width: 100%; display: block; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--gold); color: var(--green-900); } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; } /* Accessible keyboard focus ring (doesn't show on mouse click) */ a:focus-visible, button:focus-visible, .orbit:focus-visible, [data-add]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .section { padding: clamp(60px, 9vw, 120px) 0; } .section--tight { padding: clamp(44px, 6vw, 76px) 0; } .bg-soft { background: var(--green-750); } .bg-dark { background: linear-gradient(160deg, var(--green-850), var(--green-900)); } .eyebrow { display: inline-block; font-family: var(--font-ui); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); background: rgba(199, 168, 107, 0.12); border: 1px solid rgba(199, 168, 107, 0.28); padding: 6px 15px; border-radius: 0; margin-bottom: 20px; } .section-head { max-width: 680px; margin-bottom: 54px; } .section-head.center { margin-inline: auto; text-align: center; } .section-head p { color: var(--muted); font-size: 1.12rem; margin: 0; } .lead { font-size: 1.2rem; color: var(--cream-2); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-ui); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 15px 30px; border-radius: 0; border: 1px solid transparent; cursor: pointer; transition: transform 0.28s var(--ease-pop), box-shadow 0.28s var(--ease-pop), background 0.2s ease, color 0.2s ease, border-color 0.2s ease; white-space: nowrap; line-height: 1; } .btn:hover { transform: translateY(-3px) scale(1.03); } .btn:active { transform: translateY(0) scale(0.98); } .btn svg { width: 1.25em; height: 1.25em; } .btn--primary { background: var(--cream); color: var(--green-900); border-color: var(--cream); } .btn--primary:hover { background: #fff9ec; color: var(--green-900); transform: translateY(-2px); } .btn--accent { background: var(--cream); color: var(--green-900); border-color: var(--cream); } .btn--accent:hover { background: #fff9ec; color: var(--green-900); transform: translateY(-2px); } .btn--outline { background: transparent; color: var(--cream); border-color: rgba(242, 234, 215, 0.45); } .btn--outline:hover { background: var(--cream); color: var(--green-900); border-color: var(--cream); } .btn--ghost-light { background: rgba(242, 234, 215, 0.08); color: var(--cream); border-color: rgba(242, 234, 215, 0.4); } .btn--ghost-light:hover { background: var(--cream); color: var(--green-900); } .btn--sm { padding: 11px 20px; font-size: 0.74rem; } .btn--block { width: 100%; justify-content: center; } /* Featured/“best value” CTAs go gold to match the hero All-Access button */ .tier--featured .btn--accent, .choice-card--featured .btn--accent { background: var(--gold); border-color: var(--gold); color: var(--green-900); } .tier--featured .btn--accent:hover, .choice-card--featured .btn--accent:hover { background: #d8bd84; color: var(--green-900); } /* ---------- Promo bar ---------- */ .promo-bar { background: var(--green-900); color: var(--cream-2); text-align: center; font-size: 0.86rem; letter-spacing: 0.02em; padding: 10px 16px; border-bottom: 1px solid var(--line); } .promo-bar strong { color: var(--gold); font-weight: 600; } .promo-bar a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; } .promo-bar a:hover { color: var(--gold); } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: #16291d; border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; gap: 24px; height: 82px; } .nav__right { margin-left: auto; } .brand { display: inline-flex; align-items: center; gap: 0.55em; flex: none; white-space: nowrap; font-family: var(--font-logo); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--cream); } .brand:hover { color: var(--cream); } .brand:hover::before { transform: rotate(-4deg) scale(1.06); } /* Fierce three-claw-slash mark (gold scratches) */ .brand::before { content: ""; width: 1.75em; height: 1.35em; flex: none; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cg fill='%23c7a86b'%3E%3Cpath transform='rotate(-14 13 24)' d='M13 2C19 14 20 30 13 46 6 30 7 14 13 2Z'/%3E%3Cpath transform='rotate(0 32 24)' d='M32 1C38 13 39 31 32 47 25 31 26 13 32 1Z'/%3E%3Cpath transform='rotate(14 51 24)' d='M51 2C57 14 58 30 51 46 44 30 45 14 51 2Z'/%3E%3C/g%3E%3C/svg%3E"); transition: transform 0.25s ease; } .brand__mark { display: none; } .brand__text { line-height: 1.1; } .brand__grizzly { font-family: "Permanent Marker", "Anton", cursive; font-weight: 400; letter-spacing: 0.04em; color: var(--gold); } .brand__health { font-family: var(--font-logo); font-weight: 700; } .brand__tagline { display: block; font-family: var(--font-ui); font-weight: 400; font-size: 0.5em; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage); margin-top: 2px; } .nav__links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; } .nav__links a { display: inline-block; font-family: var(--font-ui); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-2); padding: 4px 2px; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } /* faux-bold via text-stroke keeps the box width stable, so hovering one tab never nudges its neighbours sideways */ .nav__links a:hover { color: var(--gold); -webkit-text-stroke: 0.5px currentColor; } .nav__links a.active { color: var(--gold); -webkit-text-stroke: 0.5px currentColor; border-bottom-color: var(--gold); } .nav__right { display: flex; align-items: center; gap: 16px; } .nav__consult { white-space: nowrap; font-size: 0.7rem; padding: 8px 16px; } .cart-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); background: rgba(242, 234, 215, 0.08); border: 1px solid var(--line); padding: 9px 15px; border-radius: 0; transition: transform 0.28s var(--ease-pop), border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .cart-chip:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px) scale(1.05); } .cart-chip:active { transform: translateY(0) scale(0.97); } .cart-chip svg { width: 17px; height: 17px; } .cart-chip .label { display: none; } /* icon-only chips to keep the nav tidy */ .cart-chip { padding: 9px 12px; gap: 7px; } .cart-count { background: var(--cream); color: var(--green-900); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 0; font-size: 0.74rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .nav__cta { display: inline-flex; } .nav__toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--cream); } .nav__toggle svg { width: 28px; height: 28px; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); /* height tracks viewport WIDTH so the runner's full body stays in frame regardless of window height (mobile falls back to the 540px floor) */ min-height: clamp(540px, 58vw, 840px); display: flex; align-items: flex-end; } .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center 49%; /* show the runner head-to-stride */ background-repeat: no-repeat; filter: contrast(1.08) brightness(0.95); } .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--green-900) 0%, rgba(13, 27, 19, 0.92) 16%, rgba(13, 27, 19, 0.5) 36%, rgba(13, 27, 19, 0.22) 58%, rgba(13, 27, 19, 0.12) 100%); } .hero__inner { position: relative; z-index: 1; padding-bottom: clamp(36px, 5vw, 60px); } .hero h1 { margin-bottom: 0.3em; font-size: clamp(2.3rem, 6vw, 4.6rem); } .hero h1 .hl { color: var(--gold); } @media (min-width: 760px) { .hero h1 { white-space: nowrap; } } .hero__sub { font-size: 1.18rem; color: var(--cream-2); max-width: 52ch; margin-bottom: 0; font-weight: 300; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; } /* ---- Home hero: full-body runner with orbiting buttons ---- */ /* Height tracks viewport WIDTH (not height) so the portrait photo's full runner — head to stride — always stays in frame on wide screens. */ .hero--photo { align-items: stretch; min-height: clamp(620px, 58vw, 1000px); border-bottom: none; } .hero--photo .hero__bg { background-position: center 46%; /* drop the frame so the runner's head clears the header */ background-size: cover; } .hero--photo .hero__bg::after { background: linear-gradient(to top, rgba(11, 22, 16, 0.92) 0%, rgba(11, 22, 16, 0.32) 30%, rgba(11, 22, 16, 0.06) 55%, rgba(11, 22, 16, 0.5) 100%), radial-gradient(120% 78% at 20% 32%, rgba(11, 22, 16, 0.82) 0%, rgba(11, 22, 16, 0.2) 44%, transparent 72%); } .hero--photo .hero__overlay { position: relative; z-index: 1; display: block; padding: 0; min-height: clamp(620px, 58vw, 1000px); } .hero__pitch { position: absolute; top: clamp(24px, 5vw, 64px); left: 0; max-width: min(680px, 62%); } .hero__pitch h1 { font-size: clamp(2.8rem, 6.2vw, 6.4rem); margin: 0 0 18px; white-space: normal; line-height: 1.06; text-transform: uppercase; letter-spacing: 0.005em; color: var(--cream); } .hero__pitch h1 .hl { color: var(--gold); } .hero__line2 { font-size: 0.72em; } .hero__pitch .hero__sub { margin: 0 0 26px; max-width: none; white-space: nowrap; font-family: var(--font-ui); font-weight: 600; font-size: clamp(0.62rem, 1.06vw, 0.98rem); letter-spacing: 0.07em; text-transform: uppercase; color: var(--cream-2); } /* Action buttons positioned around the runner */ .hero__orbit { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .orbit { position: absolute; pointer-events: auto; overflow: visible; /* allow a controlled type break */ display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 22px 24px; border-radius: 0; border: 2px solid rgba(242, 234, 215, 0.34); background: rgba(11, 22, 16, 0.5); backdrop-filter: blur(9px) saturate(1.1); -webkit-backdrop-filter: blur(9px) saturate(1.1); text-decoration: none; color: var(--cream); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); transition: transform 0.32s cubic-bezier(0.2, 0.85, 0.25, 1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; } .orbit__k { font-family: var(--font-ui); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .orbit__l { font-family: var(--font-display); line-height: 0.85; text-transform: uppercase; font-size: clamp(2.5rem, 4.4vw, 4.6rem); letter-spacing: 0.01em; white-space: nowrap; align-self: flex-start; margin: 0; } /* Icon sits to the left of the title */ .orbit__head { display: flex; align-items: center; gap: 14px; } .orbit__icon { color: var(--gold); display: inline-flex; flex: none; } .orbit__icon svg { width: clamp(34px, 2.8vw, 44px); height: clamp(34px, 2.8vw, 44px); display: block; } /* Subtitle — same style as the hero subline */ .orbit__sub { margin-top: 10px; font-family: var(--font-ui); font-weight: 600; font-size: clamp(0.6rem, 0.86vw, 0.86rem); letter-spacing: 0.07em; text-transform: uppercase; color: var(--cream-2); line-height: 1.35; } /* Brand claw watermark */ .orbit__claw { position: absolute; right: 6px; bottom: 6px; width: clamp(78px, 6.5vw, 108px); height: auto; color: var(--cream); opacity: 0.07; transform: rotate(8deg); pointer-events: none; transition: opacity 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.85, 0.25, 1); } /* Secondary actions — grow toward the runner on hover */ .orbit--fitness, .orbit--fuel, .orbit--consult, .orbit--events { right: 2.5%; width: clamp(300px, 24vw, 364px); min-height: clamp(92px, 8.4vw, 112px); padding: 14px 24px; justify-content: center; transform-origin: right center; } .orbit--fitness { top: 1.5%; } .orbit--fuel { top: 19%; } .orbit--events { top: 36.5%; } .orbit--consult { top: 54%; } .orbit__icon { transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.25, 1); } .orbit__sub { transition: color 0.3s ease; } .orbit:hover { transform: scale(1.08); border-color: var(--gold); background: rgba(11, 22, 16, 0.66); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55); z-index: 6; } .orbit:hover .orbit__l { color: var(--gold); } .orbit:hover .orbit__sub { color: var(--cream); } .orbit:hover .orbit__icon { transform: scale(1.18) rotate(-6deg); } .orbit:hover .orbit__claw { opacity: 0.2; color: var(--gold); transform: rotate(2deg) scale(1.08); } /* Primary CTA — the big, powerful one. Bigger, gold, hard-edged shadow. */ .orbit--all { position: relative; overflow: visible; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; justify-content: center; background: var(--gold); color: var(--green-900); border: 2px solid var(--green-900); padding: 22px 40px 30px 34px; box-shadow: 12px 12px 0 var(--green-900); transform-origin: left center; transition: transform 0.28s cubic-bezier(0.2, 0.85, 0.25, 1), box-shadow 0.28s ease, background 0.28s ease; } .orbit--all .orbit__k { color: var(--green-900); opacity: 0.82; font-size: 0.82rem; letter-spacing: 0.18em; } .orbit--all .orbit__row { display: flex; align-items: center; gap: 18px; } .orbit--all .orbit__l { color: var(--green-900); font-size: clamp(2.9rem, 5vw, 5.2rem); line-height: 0.82; margin: 0; } .orbit--all .orbit__go { font-family: var(--font-ui); font-weight: 800; font-size: clamp(2rem, 3vw, 3rem); line-height: 0.8; color: var(--green-900); transition: transform 0.28s ease; } .orbit--all .orbit__claw { right: 14px; bottom: 12px; color: var(--green-900); opacity: 0.14; } /* Big price tag that breaks the bottom edge of the button */ .orbit--all .orbit__price { position: relative; z-index: 3; align-self: flex-start; display: inline-flex; align-items: baseline; gap: 2px; background: var(--green-900); color: var(--gold); border: 2px solid var(--green-900); padding: 9px 18px; margin: 10px 0 -30px; /* sits below the label, then breaks the bottom edge */ font-family: var(--font-display); font-size: clamp(2.1rem, 3vw, 3rem); line-height: 0.9; transition: transform 0.28s ease; } .orbit--all .orbit__price small { font-family: var(--font-ui); font-weight: 800; font-size: 0.4em; letter-spacing: 0.04em; opacity: 0.85; } .orbit--all:hover { transform: translate(-6px, -6px); background: #d8bd84; box-shadow: 20px 20px 0 var(--green-900); } .orbit--all:hover .orbit__l { color: var(--green-900); } .orbit--all:hover .orbit__go { transform: translateX(10px); } .orbit--all:hover .orbit__claw { color: var(--green-900); opacity: 0.2; transform: rotate(8deg); } .btile { position: relative; overflow: hidden; border-radius: 0; border: 1px solid var(--line); display: flex; align-items: flex-end; text-decoration: none; color: var(--cream); background: var(--surface); cursor: pointer; min-height: 0; min-width: 0; width: 100%; text-align: left; font-family: inherit; } .btile > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .btile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(11, 22, 16, 0.94) 0%, rgba(11, 22, 16, 0.4) 48%, rgba(11, 22, 16, 0.05) 100%); } .btile:hover { border-color: var(--gold); } .btile:hover > img { transform: scale(1.07); } .btile__body { position: relative; z-index: 2; padding: 13px 15px; width: 100%; display: flex; flex-direction: column; gap: 1px; } .btile__kicker { font-family: var(--font-ui); font-weight: 600; font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); } .btile__name { font-family: var(--font-ui); font-weight: 700; font-size: 1.02rem; letter-spacing: 0.01em; } .btile__price { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.05; color: var(--cream); } .btile__price small { font-family: var(--font-ui); font-size: 0.58rem; color: var(--cream-2); } .btile--plan .btile__price { font-size: 1.2rem; } /* All-Access pitch over the photo */ .btile__flag { font-family: var(--font-ui); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } .btile__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .btile__price--lg { font-size: 2.3rem; } @media (max-width: 880px) { /* Stack: full-width runner photo on top, headline + buttons below it */ .hero--photo { display: block; min-height: auto; } .hero--photo .hero__bg { position: relative; display: block; width: 100%; height: clamp(360px, 78vw, 560px); } .hero--photo .hero__bg::after { background: linear-gradient(to top, var(--green-800) 2%, rgba(11, 22, 16, 0.18) 46%, rgba(11, 22, 16, 0.45) 100%); } .hero--photo .hero__overlay { position: static; min-height: 0; padding: clamp(18px, 5vw, 28px) 0 8px; } .hero__pitch { position: static; max-width: none; margin-bottom: 22px; } .hero__pitch h1 { font-size: clamp(2.4rem, 11vw, 3.6rem); } .hero__pitch .hero__sub { max-width: none; white-space: normal; margin-bottom: 20px; } .hero__orbit { position: static; display: grid; grid-template-columns: 1fr; gap: 14px; padding: 8px 24px 4px; } .orbit { position: static; width: auto; min-height: 112px; transform: none; } .orbit__l { font-size: clamp(2.4rem, 11vw, 3.4rem); } .orbit:hover { transform: scale(1.03); } .orbit--all { width: 100%; box-shadow: 8px 8px 0 var(--green-900); margin-bottom: 44px; } .orbit--all .orbit__l { font-size: clamp(2.6rem, 12vw, 4rem); } .orbit--all .orbit__price { margin: 10px 0 -26px; } .orbit--all:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--green-900); } } /* ---------- Press / logo bar ---------- */ .press { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--green-850); padding: 28px 0; } .press__row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px 52px; } .press__label { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .press__logo { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.04em; color: var(--cream-2); opacity: 0.7; } .press__logo span { color: var(--gold); } /* ---------- Page banner (interior pages) ---------- */ .page-banner { position: relative; color: var(--cream); text-align: center; padding: clamp(84px, 12vw, 168px) 0 clamp(70px, 9vw, 128px); background: var(--green-850); overflow: hidden; border-bottom: 1px solid var(--line); } .page-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.34; } .page-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 27, 19, 0.55), rgba(13, 27, 19, 0.88)); } .page-banner .container { position: relative; z-index: 1; } .page-banner h1 { color: var(--cream); } .page-banner p { color: var(--cream-2); max-width: 58ch; margin: 0 auto; font-size: 1.16rem; font-weight: 300; } /* ---------- Feature strip ---------- */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; } .feature__icon { width: 56px; height: 56px; border-radius: 0; background: rgba(242, 234, 215, 0.08); color: var(--gold); display: grid; place-items: center; margin-bottom: 22px; } .feature__icon svg { width: 28px; height: 28px; } .feature h3 { margin-bottom: 10px; } .feature p { color: var(--muted); margin: 0; } /* ---------- How it works (steps) ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .step { padding-top: 8px; } .step__num { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; width: 56px; height: 56px; border-radius: 50%; background: var(--cream); color: var(--green-900); display: grid; place-items: center; margin-bottom: 22px; } .step h3 { margin-bottom: 10px; } .step p { color: var(--muted); margin: 0; } /* ---------- Card grid (plans + cookbooks) ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; } /* Compact 5-across row (plans page à la carte) — wraps down on smaller screens */ .card-grid--row { grid-template-columns: repeat(5, 1fr); gap: 18px; } .card-grid--row .card__body { padding: 18px 16px 20px; } .card-grid--row .card__body h3 { font-size: 1.15rem; } .card-grid--row .card__desc { font-size: 0.88rem; margin-bottom: 16px; } .card-grid--row .price { font-size: 1.35rem; } @media (max-width: 1100px) { .card-grid--row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .card-grid--row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .card-grid--row { grid-template-columns: 1fr; } } /* ---- Plan cards: unified to the gold/cream system so they read as a set and match the hero action buttons ---- */ .plan-card { --pa: var(--gold); position: relative; } .plan-card .card__media { border-top: 3px solid var(--pa); } /* Tag styled like the hero button kickers (Archivo caps, gold) */ .plan-card .tag { font-family: var(--font-ui); font-weight: 700; background: rgba(199, 168, 107, 0.14); color: var(--gold); border: 1px solid rgba(199, 168, 107, 0.34); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.66rem; padding: 5px 12px; } .plan-card .card__body h3 { text-transform: uppercase; letter-spacing: 0.012em; } .plan-card .card__body h3 a { color: var(--cream); } .plan-card .card__body h3 a:hover { color: var(--gold); } .plan-card .price { color: var(--gold); } .plan-card:hover { border-color: var(--gold); } /* Brand claw watermark, echoing the hero buttons */ .plan-card::after { content: ""; position: absolute; right: -10px; bottom: -12px; width: 92px; height: 70px; pointer-events: none; opacity: 0.06; z-index: 2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cg fill='%23f2ead7'%3E%3Cpath transform='rotate(-14 13 24)' d='M13 2C19 14 20 30 13 46 6 30 7 14 13 2Z'/%3E%3Cpath transform='rotate(0 32 24)' d='M32 1C38 13 39 31 32 47 25 31 26 13 32 1Z'/%3E%3Cpath transform='rotate(14 51 24)' d='M51 2C57 14 58 30 51 46 44 30 45 14 51 2Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain; transition: opacity 0.3s ease; } .plan-card:hover::after { opacity: 0.13; } .card { background: var(--surface); border: 2px solid rgba(242, 234, 215, 0.18); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.32s var(--ease-pop), box-shadow 0.32s var(--ease-pop), border-color 0.3s ease; } .card { position: relative; } .card:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-lg); border-color: var(--gold); z-index: 2; } .card__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; display: block; } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; } .card:hover .card__media img { transform: scale(1.06); } /* Plan photos are portrait with the subject up top — keep the face in frame when the landscape card crops them (applies on the detail pages too). */ .card__media img[src*="strength-training"], .pd__media img[src*="strength-training"] { object-position: center 6%; } .card__media img[src*="athletic-performance"], .pd__media img[src*="athletic-performance"] { object-position: center 22%; } .card__media img[src*="/speed"], .pd__media img[src*="/speed"] { object-position: center 40%; } .card__media img[src*="/hyrox"], .pd__media img[src*="/hyrox"] { object-position: center 34%; } .card__badge { position: absolute; top: 14px; left: 14px; background: var(--green-900); color: var(--cream); font-family: var(--font-ui); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 13px; border-radius: 0; border: 1px solid var(--line); } .card__badge--accent { background: var(--cream); color: var(--green-900); border-color: var(--cream); } .card__body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .tag { font-family: var(--font-ui); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-2); background: rgba(242, 234, 215, 0.08); border: 1px solid var(--line); padding: 5px 11px; border-radius: 0; } .card__body h3 { margin-bottom: 10px; font-size: 1.5rem; } .card__body h3 a { color: inherit; } .card__body h3 a:hover { color: var(--gold); } .card__rating { color: var(--gold); font-size: 0.85rem; margin-bottom: 12px; letter-spacing: 1px; } .card__rating span { color: var(--muted); font-family: var(--font-body); margin-left: 6px; } .card__desc { color: var(--muted); font-size: 0.97rem; margin-bottom: 22px; } .card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .price { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; color: var(--cream); } .price small { font-size: 0.78rem; font-weight: 500; color: var(--muted); font-family: var(--font-ui); } .price del { font-size: 1rem; font-weight: 500; color: var(--muted); margin-right: 8px; } /* Wide / featured card (e.g. membership on the plans page) */ .card--wide { border-color: rgba(199, 168, 107, 0.5); background: radial-gradient(620px 320px at 95% -20%, rgba(199, 168, 107, 0.12), transparent 60%), var(--surface); } .card--wide .card__body h3 { font-size: 1.9rem; } .card--wide .price { font-size: 2rem; } @media (min-width: 680px) { .card--wide { display: grid; grid-template-columns: 1fr 1.3fr; align-items: stretch; } .card--wide .card__media { aspect-ratio: auto; height: 100%; min-height: 320px; } .card--wide .card__body { padding: clamp(28px, 4vw, 48px); justify-content: center; } } /* "Added" success state for cookbook buttons */ .btn.is-added { background: var(--green-650); color: var(--cream); border-color: var(--green-650); } /* ---------- Stats band ---------- */ .stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .stat-item strong { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 4.6vw, 3.8rem); color: var(--cream); display: block; line-height: 1; } .stat-item span { color: var(--muted); font-size: 0.86rem; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-ui); } /* ---------- Testimonials ---------- */ .tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .tcard { background: var(--surface); border: 2px solid rgba(242, 234, 215, 0.16); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; transition: border-color 0.3s ease, transform 0.32s var(--ease-pop), box-shadow 0.32s var(--ease-pop); } .tcard:hover { border-color: var(--gold); transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-lg); } .tcard .stars { color: var(--gold); letter-spacing: 1px; margin-bottom: 16px; } .tcard blockquote { margin: 0 0 24px; font-family: var(--font-ui); font-size: 1.28rem; font-style: italic; font-weight: 600; line-height: 1.5; color: var(--cream); } .tcard__author { display: flex; align-items: center; gap: 13px; margin-top: auto; } .tcard__author img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .tcard__author strong { font-family: var(--font-ui); display: block; font-size: 0.96rem; color: var(--cream); } .tcard__author span { color: var(--muted); font-size: 0.84rem; } /* ---------- Pricing choice (home: membership vs single plan) ---------- */ .choice { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 26px; align-items: stretch; } .choice-card { position: relative; overflow: hidden; background: var(--surface); border: 2px solid rgba(242, 234, 215, 0.18); border-radius: var(--radius); padding: clamp(28px, 4vw, 46px); display: flex; flex-direction: column; transition: border-color 0.3s ease, transform 0.32s var(--ease-pop), box-shadow 0.32s var(--ease-pop); } .choice-card:hover { border-color: var(--gold); transform: translateY(-5px) scale(1.015); box-shadow: var(--shadow-lg); z-index: 2; } .choice-card h3 { text-transform: uppercase; letter-spacing: 0.01em; } .choice-card--featured::after { transition: opacity 0.3s ease, transform 0.4s var(--ease-pop); } .choice-card--featured:hover::after { opacity: 0.14; transform: rotate(-4deg) scale(1.08); } .choice-card--featured { border-color: var(--gold); background: radial-gradient(620px 320px at 92% -15%, rgba(199, 168, 107, 0.16), transparent 60%), var(--surface); } .choice-card--featured::after { content: ""; position: absolute; right: -16px; bottom: -20px; width: 150px; height: 112px; pointer-events: none; opacity: 0.07; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cg fill='%23c7a86b'%3E%3Cpath transform='rotate(-14 13 24)' d='M13 2C19 14 20 30 13 46 6 30 7 14 13 2Z'/%3E%3Cpath transform='rotate(0 32 24)' d='M32 1C38 13 39 31 32 47 25 31 26 13 32 1Z'/%3E%3Cpath transform='rotate(14 51 24)' d='M51 2C57 14 58 30 51 46 44 30 45 14 51 2Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain; } .choice-card--alt { background: var(--green-750); } .choice-card__media { margin: calc(-1 * clamp(28px, 4vw, 46px)) calc(-1 * clamp(28px, 4vw, 46px)) 22px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; aspect-ratio: 16 / 9; } .choice-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 26%; } .choice-card__flag { align-self: flex-start; font-family: var(--font-ui); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-900); background: var(--gold); padding: 5px 12px; border-radius: 0; margin-bottom: 18px; } .choice-card h3 { font-family: var(--font-display); font-size: 1.7rem; margin-bottom: 4px; } .choice-card__price { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.5rem); color: var(--cream); line-height: 1; margin: 8px 0 16px; } .choice-card__price small { font-family: var(--font-ui); font-size: 0.92rem; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; text-transform: none; } .choice-card p { color: var(--cream-2); font-weight: 300; } .choice-card .checklist { margin: 20px 0 28px; } .choice-card .btn { margin-top: auto; } @media (max-width: 860px) { .choice { grid-template-columns: 1fr; } } /* Compact variant — fits both options above the fold (cookbook page) */ .choice--compact .choice-card { padding: clamp(22px, 2.6vw, 30px); } .choice--compact .choice-card p { font-size: 0.95rem; } .choice--compact .choice-card .checklist { margin: 14px 0 20px; gap: 10px; } .choice--compact .choice-card__flag { margin-bottom: 12px; } .choice--compact .choice-card__price { margin: 6px 0 12px; } /* ---------- Membership tiers (3-up pricing) ---------- */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; } .tier { position: relative; overflow: hidden; background: var(--surface); border: 2px solid rgba(242, 234, 215, 0.18); border-radius: var(--radius); padding: clamp(26px, 3vw, 38px); display: flex; flex-direction: column; transition: border-color 0.3s ease, transform 0.32s var(--ease-pop), box-shadow 0.32s var(--ease-pop); } .tier:hover { border-color: var(--gold); transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-lg); z-index: 2; } .tier__ic { transition: transform 0.32s var(--ease-pop); } .tier:hover .tier__ic { transform: scale(1.15) rotate(-6deg); } .tier--featured::after { transition: opacity 0.3s ease, transform 0.4s var(--ease-pop); } .tier--featured:hover::after { opacity: 0.16; transform: rotate(-4deg) scale(1.08); } .tier__name { text-transform: uppercase; letter-spacing: 0.01em; } .tier--featured { border-color: var(--gold); background: radial-gradient(560px 300px at 90% -20%, rgba(199, 168, 107, 0.16), transparent 60%), var(--surface); } .tier--featured::after { content: ""; position: absolute; right: -14px; bottom: -18px; width: 124px; height: 93px; pointer-events: none; opacity: 0.08; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cg fill='%23c7a86b'%3E%3Cpath transform='rotate(-14 13 24)' d='M13 2C19 14 20 30 13 46 6 30 7 14 13 2Z'/%3E%3Cpath transform='rotate(0 32 24)' d='M32 1C38 13 39 31 32 47 25 31 26 13 32 1Z'/%3E%3Cpath transform='rotate(14 51 24)' d='M51 2C57 14 58 30 51 46 44 30 45 14 51 2Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain; } .tier__flag { align-self: flex-start; font-family: var(--font-ui); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-900); background: var(--gold); padding: 4px 11px; border-radius: 0; margin-bottom: 14px; } .tier__ic { color: var(--gold); display: inline-flex; margin-bottom: 16px; } .tier__ic svg { width: 38px; height: 38px; display: block; } .tier__name { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 6px; } .tier__price { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 2.9rem); color: var(--cream); line-height: 1; } .tier__price small { font-family: var(--font-ui); font-size: 0.8rem; color: var(--muted); font-weight: 600; letter-spacing: 0.03em; } .tier__desc { color: var(--cream-2); font-weight: 300; font-size: 0.96rem; margin: 14px 0 0; } .tier .checklist { margin: 22px 0 26px; gap: 11px; } .tier .checklist li { font-size: 0.93rem; } .tier .checklist svg { width: 20px; height: 20px; } .tier .btn { margin-top: auto; } @media (max-width: 860px) { .tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } } /* ---------- Quantity stepper (session packs) ---------- */ .qty-stepper { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 0; background: rgba(242, 234, 215, 0.05); } .qty-stepper__label { font-family: var(--font-ui); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .qty-stepper__btn { width: 34px; height: 34px; flex: none; border-radius: 0; border: 1px solid var(--line); background: rgba(242, 234, 215, 0.06); color: var(--cream); font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: border-color 0.2s ease, color 0.2s ease, transform 0.28s var(--ease-pop), background 0.2s ease; } .qty-stepper__btn:hover { border-color: var(--gold); color: var(--gold); transform: scale(1.12); background: rgba(199, 168, 107, 0.12); } .qty-stepper__btn:active { transform: scale(0.94); } .qty-stepper__num { font-family: var(--font-display); font-size: 1.4rem; min-width: 1.6ch; text-align: center; color: var(--cream); } .qty-stepper__price { margin-left: auto; font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); } /* ---------- Split / about ---------- */ .split { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 60px; align-items: center; } .split__media { position: relative; } .split__media > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; box-shadow: var(--shadow-lg); } /* About-page photo: tighter crop so the subject fills the frame */ .split__media--about > img { aspect-ratio: 3 / 4; object-position: center 30%; transform: scale(1.18); transform-origin: center 38%; } .split__media--about { overflow: hidden; } .split__float { position: absolute; bottom: 24px; right: -20px; background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: 16px 22px; box-shadow: var(--shadow); text-align: center; } .split__float strong { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; color: var(--gold); display: block; line-height: 1; } .split__float span { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-ui); } .checklist { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; gap: 14px; } .checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--cream-2); } .checklist svg { flex: none; width: 24px; height: 24px; color: var(--gold); margin-top: 1px; } /* ---------- FAQ accordion ---------- */ .faq { max-width: 800px; margin-inline: auto; } .faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 14px; overflow: hidden; } .faq__q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; color: var(--cream); padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq__q svg { flex: none; width: 22px; height: 22px; color: var(--gold); transition: transform 0.25s ease; } .faq__item.open .faq__q svg { transform: rotate(45deg); } .faq__a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq__a p { color: var(--muted); margin: 0; padding: 0 24px 24px; } /* ---------- CTA / newsletter band ---------- */ .cta-band { background: radial-gradient(640px 320px at 82% 120%, rgba(199, 168, 107, 0.16), transparent 60%), linear-gradient(150deg, var(--green-700), var(--green-850)); border: 1px solid var(--line); border-radius: 0; padding: clamp(48px, 6vw, 84px); text-align: center; position: relative; overflow: hidden; } .cta-band h2 { color: var(--cream); position: relative; } .cta-band p { color: var(--cream-2); max-width: 54ch; margin: 0 auto 32px; position: relative; font-weight: 300; } .cta-band .hero__cta { justify-content: center; position: relative; } .newsletter-form { display: flex; gap: 12px; max-width: 500px; margin: 0 auto; position: relative; } .newsletter-form input { flex: 1; font: inherit; padding: 15px 20px; border-radius: 0; border: 1px solid rgba(242, 234, 215, 0.35); background: rgba(242, 234, 215, 0.06); color: var(--cream); } .newsletter-form input::placeholder { color: var(--muted); } .newsletter-form input:focus { outline: none; border-color: var(--gold); background: rgba(242, 234, 215, 0.1); } .newsletter-note { margin-top: 18px; font-size: 0.84rem; color: var(--muted); position: relative; } .newsletter-note.ok { color: var(--gold); font-weight: 500; } /* ---------- Contact form ---------- */ .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 4vw, 44px); } .field { margin-bottom: 18px; } .field label { display: block; font-family: var(--font-ui); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 9px; color: var(--cream-2); } .field input, .field select, .field textarea { width: 100%; font: inherit; color: var(--cream); padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--green-850); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field input::placeholder, .field textarea::placeholder { color: rgba(169, 187, 166, 0.7); } .field select { color: var(--cream); } .field select option { background: var(--green-850); color: var(--cream); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(199, 168, 107, 0.2); } .field textarea { resize: vertical; min-height: 130px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-note { margin-top: 14px; font-size: 0.84rem; color: var(--muted); text-align: center; } .form-success { display: none; align-items: center; gap: 12px; background: rgba(70, 138, 92, 0.16); border: 1px solid var(--green-500); color: var(--cream); border-radius: var(--radius-sm); padding: 16px 18px; font-family: var(--font-ui); font-weight: 500; margin-bottom: 20px; } .form-success.show { display: flex; } .form-success svg { width: 26px; height: 26px; flex: none; color: var(--gold); } .contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; align-items: start; } .contact-info p { color: var(--muted); } .contact-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 18px; } .contact-list li { display: flex; gap: 14px; align-items: center; } .contact-list .ic { width: 46px; height: 46px; border-radius: 0; background: rgba(242, 234, 215, 0.08); color: var(--gold); display: grid; place-items: center; flex: none; } .contact-list .ic svg { width: 22px; height: 22px; } .contact-list strong { font-family: var(--font-ui); display: block; color: var(--cream); } .contact-list span { color: var(--muted); font-size: 0.92rem; } /* ---------- Footer ---------- */ .site-footer { background: var(--green-900); color: var(--sage); padding: 72px 0 28px; border-top: 1px solid var(--line); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; } .site-footer .brand { color: var(--cream); margin-bottom: 16px; font-size: 1.3rem; } .site-footer p { color: var(--sage); max-width: 32ch; } .footer-col h4 { font-family: var(--font-ui); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-2); margin-bottom: 18px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; } .footer-col a { color: var(--sage); } .footer-col a:hover { color: var(--gold); } .socials { display: flex; gap: 12px; margin-top: 20px; } .socials a { width: 42px; height: 42px; border-radius: 0; background: rgba(242, 234, 215, 0.06); border: 1px solid var(--line); display: grid; place-items: center; color: var(--cream-2); transition: transform 0.28s var(--ease-pop), background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .socials a:hover { background: var(--cream); color: var(--green-900); border-color: var(--cream); transform: translateY(-3px) scale(1.08) rotate(-4deg); } .socials svg { width: 19px; height: 19px; } .footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 0.86rem; } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .reveal.is-visible { opacity: 1; transform: none; } .reveal:nth-child(2) { transition-delay: 0.08s; } .reveal:nth-child(3) { transition-delay: 0.16s; } .reveal:nth-child(4) { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .split { grid-template-columns: 1fr; gap: 40px; } .split__media { max-width: 460px; order: -1; } .split__float { right: 18px; } .contact-grid { grid-template-columns: 1fr; gap: 34px; } .features, .steps, .tgrid { grid-template-columns: 1fr; } .stats-band { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; } .footer-grid { grid-template-columns: 1fr 1fr; } .nav__cta { display: none; } .nav__links { gap: 16px; } .nav__links a { font-size: 0.7rem; letter-spacing: 0.1em; } } @media (max-width: 640px) { .nav__toggle { display: inline-flex; } .nav__cta { display: none; } .nav__links { position: absolute; top: 82px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--green-850); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px 0; display: none; } .nav__links.open { display: flex; } .nav__links a { padding: 15px 24px; font-size: 0.78rem; letter-spacing: 0.16em; } .nav__links a.active::after { display: none; } .nav__links a.active { background: rgba(242, 234, 215, 0.06); } .cart-chip span.label { display: none; } a.cart-chip.cart-chip--account { display: none; } .nav__consult { display: none; } .brand { font-size: 1.1rem; } .nav { gap: 12px; } .brand__tagline { display: none; } } @media (max-width: 560px) { .container { padding-inline: 20px; } .field-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .newsletter-form { flex-direction: column; } .newsletter-form .btn { width: 100%; justify-content: center; } .hero__cta { width: 100%; } .hero__cta .btn { flex: 1; justify-content: center; } h1 { font-size: clamp(2.2rem, 8vw, 3rem); } .hero__sub { font-size: 1.05rem; } } /* ===================================================================== Product detail pages (plan.html / book.html) ===================================================================== */ a.card__media { display: block; } /* Breadcrumb */ .breadcrumb { padding-top: 28px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-ui); color: var(--muted); } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--gold); } .breadcrumb i { font-style: normal; margin: 0 9px; opacity: 0.5; } .breadcrumb b { color: var(--cream); font-weight: 500; } /* Detail hero */ .pd { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; padding-top: 32px; } .pd__media { position: relative; } .pd__media > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; box-shadow: var(--shadow-lg); } .pd__media .card__badge { top: 18px; left: 18px; } .pd__eyebrow { font-family: var(--font-ui); color: var(--gold); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.74rem; } .pd__info h1 { font-size: clamp(2.4rem, 4.4vw, 3.4rem); margin: 14px 0 14px; } .pd__rating { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .pd__rating .stars { color: var(--gold); letter-spacing: 1px; } .pd__rating span { color: var(--muted); font-size: 0.92rem; } .pd__blurb { font-size: 1.16rem; color: var(--cream-2); font-weight: 300; } .pd__price { font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; color: var(--cream); margin: 22px 0 6px; } .pd__price del { font-size: 1.4rem; font-weight: 500; color: var(--muted); margin-right: 12px; } .pd__price small { font-size: 0.95rem; font-weight: 500; color: var(--muted); font-family: var(--font-ui); } .pd__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 20px; } .pd__guarantee { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.9rem; } .pd__guarantee svg { width: 20px; height: 20px; color: var(--gold); flex: none; } .pd__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); } .pd__fact { display: flex; gap: 13px; align-items: center; } .pd__fact .ic { width: 44px; height: 44px; border-radius: 0; background: rgba(242, 234, 215, 0.08); color: var(--gold); display: grid; place-items: center; flex: none; } .pd__fact .ic svg { width: 22px; height: 22px; } .pd__fact strong { font-family: var(--font-ui); display: block; line-height: 1.2; color: var(--cream); font-weight: 500; } .pd__fact span { color: var(--muted); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; } /* Includes checklist */ .includes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; } .includes li { display: flex; gap: 12px; align-items: flex-start; color: var(--cream-2); } .includes svg { flex: none; width: 23px; height: 23px; color: var(--gold); margin-top: 2px; } /* Curriculum (plans) */ .curriculum { display: grid; gap: 14px; max-width: 860px; } .cur-item { display: flex; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px 24px; } .cur-item .num { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--cream); color: var(--green-900); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; display: grid; place-items: center; } .cur-item h4 { margin: 0 0 6px; font-size: 1.25rem; } .cur-item p { margin: 0; color: var(--muted); } /* Sample recipes (books) */ .recipe-chips { display: flex; flex-wrap: wrap; gap: 12px; } .recipe-chip { background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: 12px 20px; font-family: var(--font-ui); font-weight: 500; font-size: 0.92rem; color: var(--cream-2); display: inline-flex; align-items: center; gap: 10px; } .recipe-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } /* Recipe gallery (photo grid) */ .gallery-cat { font-family: var(--font-ui); font-size: 0.88rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin: 36px 0 16px; } .gallery-cat:first-child { margin-top: 0; } .recipe-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .recipe-card { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); border: 1px solid var(--line); } .recipe-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform 0.4s ease; } .recipe-card:hover img { transform: scale(1.06); } .recipe-card span { display: block; padding: 12px 14px; font-family: var(--font-ui); font-weight: 700; font-size: 0.92rem; color: var(--cream); text-transform: uppercase; letter-spacing: 0.03em; } a.recipe-card { text-decoration: none; display: block; transition: border-color 0.3s ease, transform 0.32s var(--ease-pop), box-shadow 0.32s var(--ease-pop); } a.recipe-card:hover { border-color: var(--gold); transform: translateY(-4px) scale(1.03); box-shadow: var(--shadow); z-index: 2; } /* ============ RECIPE PAGE ============ */ .recipe-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .recipe-hero__media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); } .recipe-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .recipe-cat-tag { position: absolute; top: 16px; left: 16px; background: var(--green-900); color: var(--gold); font-family: var(--font-ui); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 14px; border-radius: 0; border: 1px solid var(--line); } .recipe-hero__info h1 { font-size: clamp(2.4rem, 4.5vw, 3.6rem); margin-bottom: 0.3em; } .recipe-meta { display: flex; flex-wrap: wrap; gap: 22px; margin: 22px 0 26px; } .recipe-meta span { display: inline-flex; align-items: center; gap: 9px; color: var(--cream-2); font-family: var(--font-ui); font-weight: 600; font-size: 0.95rem; } .recipe-meta svg { width: 20px; height: 20px; color: var(--gold); } /* Macro cards */ .macro-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .macro-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 14px; text-align: center; position: relative; overflow: hidden; } .macro-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold); } .macro-card--p::before { background: #6fb98f; } .macro-card--c::before { background: #d9b365; } .macro-card--f::before { background: #c98b6b; } .macro-card strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; color: var(--cream); line-height: 1; } .macro-card span { font-family: var(--font-ui); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } /* Ingredients + method */ .recipe-cols { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; } .recipe-cols h2 { font-size: 1.9rem; margin-bottom: 22px; } .ing-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .ing-list li { display: flex; gap: 13px; align-items: flex-start; color: var(--cream-2); padding-bottom: 12px; border-bottom: 1px solid var(--line); } .ing-list .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-top: 9px; } .method-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: step; } .method-list li { display: flex; gap: 18px; align-items: flex-start; } .method-list .step-num { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--cream); color: var(--green-900); font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; display: grid; place-items: center; } .method-list p { margin: 0; color: var(--cream-2); padding-top: 7px; } /* Micros */ .micro-strip { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); } .micro-strip h3 { font-size: 0.82rem; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 16px; } .micro-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .micro { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; } .micro strong { display: block; font-family: var(--font-ui); font-weight: 700; color: var(--cream); font-size: 1.05rem; } .micro span { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } /* Recipe coming-soon (scaffolded entries) */ .recipe-soon { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .recipe-soon__media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); } .recipe-soon__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } @media (max-width: 860px) { .recipe-hero, .recipe-cols, .recipe-soon { grid-template-columns: 1fr; gap: 32px; } .macro-cards { grid-template-columns: repeat(2, 1fr); } } /* Reviews */ .reviews { display: grid; gap: 18px; max-width: 860px; } .review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 26px 28px; } .review__top { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; } .review__top img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .review__top strong { font-family: var(--font-ui); display: block; color: var(--cream); } .review__top span { color: var(--muted); font-size: 0.84rem; } .review__top .stars { margin-left: auto; color: var(--gold); letter-spacing: 1px; } .review p { margin: 0; color: var(--cream-2); font-family: var(--font-ui); font-size: 1.18rem; font-style: italic; font-weight: 600; line-height: 1.5; } /* Not-found fallback */ .pd-missing { text-align: center; padding: 90px 0; } @media (max-width: 960px) { .pd { grid-template-columns: 1fr; gap: 36px; } .pd__media { max-width: 560px; } } @media (max-width: 560px) { .pd__facts, .includes { grid-template-columns: 1fr; } .pd__cta { width: 100%; } .pd__cta .btn { flex: 1; justify-content: center; } } /* ===================================================================== MACRO APP — marketing / showcase page ===================================================================== */ .app-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .app-hero .pill { display: inline-flex; align-items: center; gap: 9px; background: rgba(199,168,107,0.12); border: 1px solid rgba(199,168,107,0.4); color: var(--gold); font-family: var(--font-ui); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 15px; border-radius: 0; margin-bottom: 22px; } .app-hero h1 { font-size: clamp(2.7rem, 5.2vw, 4.4rem); } .app-hero h1 .hl { color: var(--gold); } .app-hero__lead { font-size: 1.24rem; color: var(--cream-2); font-weight: 300; max-width: 46ch; margin-bottom: 30px; } .store-btns { display: flex; flex-wrap: wrap; gap: 14px; } .store-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--cream); color: var(--green-900); border-radius: 0; padding: 12px 22px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .store-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--green-900); } .store-btn svg { width: 26px; height: 26px; flex: none; } .store-btn small { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; } .store-btn strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; line-height: 1; letter-spacing: 0.01em; } .app-note { margin-top: 16px; color: var(--muted); font-size: 0.85rem; } /* Phone mockup */ .phone-wrap { display: flex; justify-content: center; } .phone { position: relative; width: 300px; max-width: 80vw; background: #0a140e; border: 11px solid #05100a; border-radius: 0; padding: 11px; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(242,234,215,0.08); } .phone::before { content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 120px; height: 26px; background: #05100a; border-radius: 0; z-index: 3; } .phone__screen { border-radius: 0; overflow: hidden; background: var(--green-850); aspect-ratio: 9 / 19; display: flex; flex-direction: column; } .appui { display: flex; flex-direction: column; height: 100%; color: var(--cream); } .appui__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 8px; font-family: var(--font-ui); font-weight: 700; font-size: 0.74rem; } .appui__bar .brandmini { color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; } .appui__shot { position: relative; margin: 4px 14px 0; border-radius: 0; overflow: hidden; aspect-ratio: 5 / 4; } .appui__shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .appui__scan { position: absolute; inset: 0; border: 2px solid rgba(199,168,107,0.85); border-radius: 0; margin: 18px; } .appui__scan span { position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--gold); color: var(--green-900); font-family: var(--font-ui); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 0; } .appui__card { margin: 16px 14px 0; background: rgba(242,234,215,0.06); border: 1px solid var(--line); border-radius: 0; padding: 15px 16px; } .appui__title { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-ui); font-weight: 700; font-size: 0.95rem; margin-bottom: 14px; } .appui__title b { font-family: var(--font-display); font-weight: 400; color: var(--gold); font-size: 1.25rem; } .mbar { margin-bottom: 11px; } .mbar__top { display: flex; justify-content: space-between; font-family: var(--font-ui); font-weight: 600; font-size: 0.7rem; color: var(--cream-2); margin-bottom: 5px; letter-spacing: 0.04em; } .mbar__track { height: 7px; border-radius: 0; background: rgba(242,234,215,0.12); overflow: hidden; } .mbar__fill { height: 100%; border-radius: 0; width: var(--w, 50%); background: var(--gold); } .mbar--p .mbar__fill { background: #6fb98f; } .mbar--c .mbar__fill { background: #d9b365; } .mbar--f .mbar__fill { background: #c98b6b; } .appui__foot { margin-top: auto; padding: 14px; display: flex; justify-content: space-around; border-top: 1px solid var(--line); color: var(--muted); } .appui__foot svg { width: 21px; height: 21px; } .appui__foot .on { color: var(--gold); } /* Ring (dashboard phone) */ .appui__ring { display: flex; flex-direction: column; align-items: center; padding: 18px 0 6px; } .ring { position: relative; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold) calc(var(--p,72%)), rgba(242,234,215,0.1) 0); } .ring::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--green-850); } .ring__txt { position: relative; text-align: center; } .ring__txt strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; line-height: 1; color: var(--cream); } .ring__txt span { font-family: var(--font-ui); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } /* How it works (app) */ .app-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: astep; } .app-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; position: relative; } .app-step .n { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; width: 46px; height: 46px; border-radius: 50%; background: var(--cream); color: var(--green-900); display: grid; place-items: center; margin-bottom: 20px; } .app-step h3 { font-size: 1.4rem; margin-bottom: 10px; } .app-step p { color: var(--muted); margin: 0; } /* App features grid */ .app-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .afeature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; } .afeature__ic { width: 50px; height: 50px; border-radius: 0; background: rgba(199,168,107,0.12); color: var(--gold); display: grid; place-items: center; margin-bottom: 18px; } .afeature__ic svg { width: 26px; height: 26px; } .afeature h3 { font-size: 1.25rem; margin-bottom: 8px; } .afeature p { color: var(--muted); margin: 0; font-size: 0.96rem; } /* App + website tie-in band */ .app-sync { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .app-sync__media { display: flex; justify-content: center; } @media (max-width: 900px) { .app-hero, .app-sync { grid-template-columns: 1fr; gap: 40px; } .app-steps, .app-features { grid-template-columns: 1fr; } } /* ===================================================================== PLANS / CART / BUILD-YOUR-OWN / CHECKOUT ===================================================================== */ .btn--block { display: block; width: 100%; text-align: center; } .byo-card .btn--block + .btn--block { margin-top: 10px; } /* Price with alt line (monthly + 3-month) */ .price .price-alt, .pd__price-alt { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.02em; color: var(--muted); text-transform: none; } .pd__price-alt { margin: -2px 0 4px; font-size: 0.95rem; } .card__foot .price { line-height: 1.15; } /* Cart count badge */ .cart-count.has-items { background: var(--gold); color: var(--green-900); } /* Build-your-own promo band (on plans page) */ .byo-promo { margin-top: 46px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 34px; } .byo-promo__text h2 { margin: 6px 0 8px; font-size: 1.9rem; } .byo-promo__text p { margin: 0; color: var(--muted); max-width: 60ch; } /* ---- Builder ---- */ .builder { display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start; } .builder__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .builder-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .builder-col__head { background: var(--green-650); color: var(--cream); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.15rem; padding: 16px 20px; } .builder-col__body { padding: 12px; display: grid; gap: 8px; } .builder-col__empty { color: var(--muted); padding: 16px; margin: 0; } .svc { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: rgba(242,234,215,0.02); } .svc__toggle { width: 100%; display: flex; align-items: center; gap: 13px; background: none; border: 0; cursor: pointer; text-align: left; padding: 13px 15px; color: var(--cream-2); font-family: var(--font-body); font-size: 0.95rem; } .svc__check { flex: none; width: 22px; height: 22px; border-radius: 0; border: 2px solid var(--muted); display: grid; place-items: center; transition: all 0.15s ease; } .svc__toggle.on .svc__check { background: var(--gold); border-color: var(--gold); } .svc__toggle.on .svc__check::after { content: "✓"; color: var(--green-900); font-size: 0.8rem; font-weight: 900; } .svc__name { flex: 1; } .svc__name em { color: var(--muted); font-style: normal; font-size: 0.85em; } .svc__price { font-family: var(--font-ui); font-weight: 700; color: var(--cream); white-space: nowrap; } .svc__price small { color: var(--muted); font-weight: 600; } .svc__toggle.on { color: var(--cream); } .svc__toggle.on ~ .svc__opts, .svc.on { background: rgba(199,168,107,0.06); } .svc:has(.svc__toggle.on) { border-color: var(--gold); } .svc__opts { display: flex; gap: 12px; flex-wrap: wrap; padding: 0 15px 14px 50px; } .svc__opt { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .svc__opt select, .svc__opt input { font-family: var(--font-body); font-size: 0.9rem; color: var(--cream); background: var(--green-850); border: 1px solid var(--line); border-radius: 0; padding: 8px 10px; } .svc__opt input { width: 80px; } /* Builder summary */ .builder__summary { position: sticky; top: 98px; } .byo-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .byo-card h2 { font-size: 1.5rem; margin-bottom: 16px; } .byo-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; max-height: 320px; overflow: auto; } .byo-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; color: var(--cream-2); border-bottom: 1px solid var(--line); padding-bottom: 9px; } .byo-list li b { color: var(--cream); font-family: var(--font-ui); white-space: nowrap; } .byo-empty { color: var(--muted) !important; border: 0 !important; } .byo-total { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 18px; padding-top: 14px; border-top: 2px solid var(--line); } .byo-total span { color: var(--muted); font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem; } .byo-total strong { font-family: var(--font-display); font-size: 2rem; color: var(--cream); } .byo-note { color: var(--muted); font-size: 0.8rem; margin: 14px 0 0; } /* ---------- Build-your-own meal prep (Food page) ---------- */ .mealprep { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; } .mp-options { display: flex; flex-wrap: wrap; gap: 22px 34px; margin-bottom: 26px; } .mp-opt { display: flex; flex-direction: column; gap: 9px; } .mp-opt__label { font-family: var(--font-ui); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .mp-chips { display: flex; flex-wrap: wrap; gap: 8px; } .mp-chip { font-family: var(--font-ui); font-weight: 600; font-size: 0.86rem; color: var(--cream); background: rgba(242, 234, 215, 0.06); border: 1px solid var(--line); border-radius: 0; padding: 9px 16px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .mp-chip em { font-style: normal; color: var(--gold); font-size: 0.72rem; margin-left: 4px; } .mp-chip:hover { border-color: var(--gold); } .mp-chip.on { background: var(--cream); color: var(--green-900); border-color: var(--cream); } .mp-chip.on em { color: var(--green-700); } .meal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; } .meal { position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; display: flex; align-items: flex-end; } .meal > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .meal::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(11, 22, 16, 0.95), rgba(11, 22, 16, 0.15) 72%); } .meal__tag { position: absolute; top: 10px; left: 10px; z-index: 2; font-family: var(--font-ui); font-weight: 600; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); background: rgba(13, 27, 19, 0.6); border: 1px solid var(--line); padding: 4px 9px; border-radius: 0; } .meal__foot { position: relative; z-index: 2; width: 100%; padding: 12px 13px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .meal__name { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 0.92rem; color: var(--cream); } .meal__price { display: block; font-family: var(--font-display); font-size: 1.2rem; color: var(--gold); margin-top: 2px; } .meal__qty { display: flex; align-items: center; gap: 7px; background: rgba(13, 27, 19, 0.72); border: 1px solid var(--line); border-radius: 0; padding: 4px; flex: none; } .meal__btn { width: 27px; height: 27px; border-radius: 50%; border: none; background: rgba(242, 234, 215, 0.12); color: var(--cream); font-size: 1.05rem; line-height: 1; cursor: pointer; display: grid; place-items: center; } .meal__btn:hover { background: var(--gold); color: var(--green-900); } .meal__num { font-family: var(--font-display); font-size: 1.05rem; min-width: 1ch; text-align: center; color: var(--cream); } .mealprep__side { position: sticky; top: 96px; } .mp-save { display: flex; justify-content: space-between; font-size: 0.88rem; color: var(--sage); margin-top: 4px; } .mp-save b { color: var(--gold); } .mp-min { color: var(--gold); font-size: 0.85rem; margin: 2px 0 12px; } @media (max-width: 900px) { .mealprep { grid-template-columns: 1fr; } .mealprep__side { position: static; } } /* ---- Checkout ---- */ .checkout { display: grid; grid-template-columns: 1fr 360px; gap: 34px; align-items: start; } .cart-line { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); } .cart-line__info strong { display: block; color: var(--cream); font-family: var(--font-ui); font-weight: 700; } .cart-line__info span { color: var(--muted); font-size: 0.85rem; } .cart-line__qty { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 0; padding: 5px 12px; } .cart-line__qty button { background: none; border: 0; color: var(--cream); font-size: 1.1rem; cursor: pointer; line-height: 1; width: 18px; } .cart-line__qty span { min-width: 16px; text-align: center; font-family: var(--font-ui); } .cart-line__price { font-family: var(--font-ui); font-weight: 700; color: var(--cream); min-width: 70px; text-align: right; } .cart-line__remove { background: none; border: 0; color: var(--muted); font-size: 1.4rem; cursor: pointer; line-height: 1; transition: color 0.15s ease; } .cart-line__remove:hover { color: var(--cream); } .checkout__add { display: inline-block; margin-top: 20px; color: var(--gold); font-family: var(--font-ui); font-weight: 600; } .order-summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; position: sticky; top: 98px; } .order-summary h2 { font-size: 1.5rem; margin-bottom: 18px; } .discount-row { display: flex; gap: 10px; } .discount-row input { flex: 1; min-width: 0; background: var(--green-850); border: 1px solid var(--line); border-radius: 0; padding: 11px 13px; color: var(--cream); font-family: var(--font-body); } .discount-remove { background: none; border: 0; color: var(--muted); font-size: 0.82rem; cursor: pointer; margin-top: 8px; text-decoration: underline; } .discount-msg { font-size: 0.85rem; margin: 10px 0 0; min-height: 1em; } .discount-msg.ok { color: #8fd0a6; } .discount-msg.err { color: #e0a0a0; } .totals { margin: 20px 0; border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 11px; } .trow { display: flex; justify-content: space-between; color: var(--cream-2); font-family: var(--font-ui); } .trow--total { border-top: 1px solid var(--line); padding-top: 14px; font-size: 1.3rem; color: var(--cream); font-weight: 700; } .trow--total span:last-child { font-family: var(--font-display); } .checkout__note { color: var(--muted); font-size: 0.8rem; margin: 14px 0 0; } .checkout__hint { color: var(--muted); font-size: 0.8rem; margin: 10px 0 0; } .checkout__hint code { background: rgba(242,234,215,0.08); padding: 2px 7px; border-radius: 0; color: var(--gold); font-size: 0.9em; } .cart-empty { text-align: center; padding: 50px 0 70px; } .order-confirm { max-width: 620px; margin: 30px auto; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 48px 36px; } .order-confirm__icon { width: 70px; height: 70px; border-radius: 50%; background: var(--gold); color: var(--green-900); display: grid; place-items: center; margin: 0 auto 22px; } .order-confirm__icon svg { width: 36px; height: 36px; } @media (max-width: 900px) { .builder { grid-template-columns: 1fr; } .builder__cols { grid-template-columns: 1fr; } .builder__summary, .order-summary { position: static; } .checkout { grid-template-columns: 1fr; } } @media (max-width: 520px) { .cart-line { grid-template-columns: 1fr auto; row-gap: 10px; } .cart-line__price { grid-column: 1; text-align: left; } .cart-line__remove { grid-column: 2; } } /* ===================================================================== PROFILE / ACCOUNT ===================================================================== */ .container--narrow { max-width: 760px; } .cart-chip--account.active { border-color: var(--gold); color: var(--cream); } .profile-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; } .pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; } .pf-grid .full { grid-column: 1 / -1; } .profile-form .field { margin-bottom: 16px; } .pf-inline { display: flex; align-items: center; gap: 8px; } .pf-inline input { flex: 1; min-width: 0; } .pf-inline span { color: var(--muted); font-family: var(--font-ui); font-weight: 600; font-size: 0.85rem; } .pf-error { color: #e0a0a0; margin: 4px 0 14px; font-size: 0.9rem; } .pf-note { color: var(--muted); font-size: 0.82rem; margin-top: 18px; text-align: center; } .profile-form .btn--block + .btn--block { margin-top: 10px; } /* Dashboard */ .dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; } .dash-head p { color: var(--muted); margin: 0; max-width: 55ch; } .dash-actions { display: flex; gap: 10px; } .profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 26px; } .profile-stats .micro { text-align: center; } .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .dash-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; } .dash-panel h3 { font-size: 1.3rem; margin-bottom: 16px; } .dash-panel--cta { background: linear-gradient(135deg, var(--green-700), var(--green-800)); } .dash-panel--cta p { color: var(--cream-2); } .dash-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .dash-list li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 11px; } .dash-list span { color: var(--muted); } .dash-list b { color: var(--cream); font-family: var(--font-ui); } @media (max-width: 680px) { .pf-grid { grid-template-columns: 1fr; } .profile-stats { grid-template-columns: 1fr 1fr; } .dash-grid { grid-template-columns: 1fr; } } /* ===================================================================== FUN ANIMATIONS — steam off food + runners in the background ===================================================================== */ /* Steam: drop a .steam element over any food image container (position:relative) */ .steam { position: absolute; top: 0; left: 0; right: 0; height: 60%; pointer-events: none; z-index: 2; overflow: hidden; } .steam span { position: absolute; bottom: 0; width: 16px; height: 60%; background: radial-gradient(ellipse at center, rgba(255,255,255,0.5), rgba(255,255,255,0) 70%); border-radius: 50%; filter: blur(7px); opacity: 0; will-change: transform, opacity; animation: steam-rise 4.5s ease-in-out infinite; } .steam span:nth-child(1) { left: 28%; animation-delay: 0s; } .steam span:nth-child(2) { left: 50%; animation-delay: 1.4s; width: 22px; } .steam span:nth-child(3) { left: 70%; animation-delay: 2.6s; } @keyframes steam-rise { 0% { transform: translateY(20%) scaleX(1); opacity: 0; } 25% { opacity: 0.7; } 60% { opacity: 0.5; } 100% { transform: translateY(-90%) scaleX(1.8) translateX(8px); opacity: 0; } } /* Runner band: silhouettes jogging across a strip */ .runner-band { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; overflow: hidden; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .runner { position: absolute; bottom: 8px; left: 0; width: 46px; height: 64px; color: var(--gold); opacity: 0.22; --s: 1; will-change: transform; animation: runner-dash linear infinite; } .runner svg { width: 100%; height: 100%; display: block; animation: runner-bob 0.5s ease-in-out infinite alternate; } .runner--1 { animation-duration: 13s; animation-delay: 0s; --s: 0.8; } .runner--2 { animation-duration: 17s; animation-delay: -6s; opacity: 0.16; --s: 1; } .runner--3 { animation-duration: 10s; animation-delay: -3s; --s: 0.65; opacity: 0.13; } @keyframes runner-dash { from { transform: translateX(-10vw) scale(var(--s)); } to { transform: translateX(110vw) scale(var(--s)); } } @keyframes runner-bob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-4px) rotate(2deg); } } /* Hero value chips (replaces the old star rating) */ .hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .hero-chip { font-family: var(--font-ui); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cream-2); background: rgba(242, 234, 215, 0.06); border: 1px solid var(--line); padding: 9px 15px; border-radius: 0; transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .hero-chip:hover { transform: translateY(-3px) rotate(-1.5deg); border-color: var(--gold); color: var(--cream); } /* Promise / "Grizzly way" cards */ .promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .promise-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 1000px; margin: 0 auto; } .promise { background: var(--surface); border: 2px solid rgba(242, 234, 215, 0.16); border-radius: var(--radius); padding: 30px 26px; transition: transform 0.32s var(--ease-pop), border-color 0.3s ease, box-shadow 0.32s var(--ease-pop); } .promise:hover { transform: translateY(-6px) scale(1.02); border-color: var(--gold); box-shadow: var(--shadow-lg); } .promise__ic { width: 54px; height: 54px; border-radius: 0; background: rgba(199, 168, 107, 0.12); color: var(--gold); display: grid; place-items: center; margin-bottom: 18px; transition: transform 0.32s var(--ease-pop); } .promise__ic svg { width: 28px; height: 28px; } .promise:hover .promise__ic { transform: rotate(-8deg) scale(1.14); } .promise h3 { font-size: 1.3rem; margin-bottom: 9px; } .promise p { color: var(--muted); margin: 0; font-size: 0.96rem; } @media (max-width: 880px) { .promise-grid, .promise-grid--3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .promise-grid, .promise-grid--3 { grid-template-columns: 1fr; } } /* ---- Extra fun motion ---- */ /* Hero aurora drift */ .hero::after { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 75%; background: radial-gradient(420px 280px at 30% 30%, rgba(70, 138, 92, 0.18), transparent 70%), radial-gradient(360px 240px at 75% 20%, rgba(199, 168, 107, 0.10), transparent 70%); z-index: 0; pointer-events: none; will-change: transform; animation: aurora 16s ease-in-out infinite alternate; } @keyframes aurora { from { transform: translate(-3%, -2%) scale(1); } to { transform: translate(4%, 3%) scale(1.12); } } /* Floating hero cards bob gently */ .hero__float { animation: float-bob 5s ease-in-out infinite; } .hero__float--br { animation-delay: -2.5s; } @keyframes float-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Feature-card icon pop on hover */ .afeature__ic { transition: transform 0.3s ease; } .afeature:hover .afeature__ic { transform: rotate(-10deg) scale(1.1); } /* Button pop */ .btn--primary:hover, .btn--accent:hover, .btn--outline:hover { transform: translateY(-3px) scale(1.03); } .btn--primary:active, .btn--accent:active, .btn--outline:active { transform: translateY(0) scale(0.98); } /* Steam appears on hover over recipe cards (injected by main.js) */ .recipe-card { position: relative; } .recipe-card .steam { height: 55%; opacity: 0; transition: opacity 0.35s ease; z-index: 3; } .recipe-card .steam span { animation-play-state: paused; } .recipe-card:hover .steam { opacity: 1; } .recipe-card:hover .steam span { animation-play-state: running; } /* Claw mark swipes in on load */ .brand::before { animation: claw-swipe 0.6s ease-out 1; } @keyframes claw-swipe { 0% { opacity: 0; transform: translateX(-12px) rotate(-14deg) scale(0.8); } 100% { opacity: 1; transform: none; } } /* Pause off-screen background animations (set by main.js) to free the compositor */ .hero.anim-off::after, .hero.anim-off .runner, .hero.anim-off .runner svg, .hero.anim-off .hero__float, .steam.anim-off span { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .steam span, .runner, .runner svg, .brand::before, .hero::after, .hero__float { animation: none !important; } .steam, .runner-band { display: none; } } /* ===================================================================== RECIPE MEMBERSHIP — locks, paywall, Volume 1 book mockup ===================================================================== */ .recipe-card .recipe-lock { position: absolute; top: 10px; right: 10px; z-index: 4; width: 30px; height: 30px; border-radius: 50%; padding: 0; background: rgba(13, 27, 19, 0.72); color: var(--gold); display: grid; place-items: center; border: 1px solid rgba(199, 168, 107, 0.5); } .recipe-card .recipe-lock svg { width: 15px; height: 15px; } .recipe-lockwall { max-width: 620px; margin: 0 auto; text-align: center; } .recipe-lockwall__icon { width: 66px; height: 66px; border-radius: 50%; background: rgba(199, 168, 107, 0.14); color: var(--gold); display: grid; place-items: center; margin: 0 auto 20px; } .recipe-lockwall__icon svg { width: 30px; height: 30px; } .recipe-lockwall h2 { font-size: 2rem; margin-bottom: 12px; } .recipe-lockwall p { color: var(--cream-2); } .recipe-lockwall__note { color: var(--muted); font-size: 0.85rem; margin-top: 20px; display: inline-flex; align-items: center; gap: 7px; } .recipe-lockwall__note svg { width: 14px; height: 14px; color: var(--gold); } .membership__note { color: var(--muted); font-size: 0.85rem; margin-top: 16px; } .membership__note a { color: var(--gold); } /* Volume 1 */ .vol1 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .vol1__book { display: flex; justify-content: center; } @media (max-width: 820px) { .vol1 { grid-template-columns: 1fr; gap: 40px; } } /* 3D book mockup */ .book3d { perspective: 1600px; padding: 14px 0; } .book3d__case { transform: rotateY(-26deg) rotateX(5deg); transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); } .book3d:hover .book3d__case { transform: rotateY(-13deg) rotateX(3deg); } .book3d__cover { position: relative; width: 280px; height: 380px; border-radius: 0 9px 9px 4px; overflow: hidden; background: var(--green-850); box-shadow: 16px 22px 46px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(242, 234, 215, 0.06); } .book3d__cover::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 16px; z-index: 5; background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.10) 55%, rgba(0, 0, 0, 0.30)); } .book3d__hero { width: 100%; height: 40%; object-fit: cover; display: block; } .book3d__strip { display: flex; gap: 5px; padding: 5px 5px 0 21px; } .book3d__strip img { width: 50%; height: 66px; object-fit: cover; border-radius: 0; } .book3d__title { padding: 14px 16px 20px 21px; background: linear-gradient(transparent, var(--green-900) 22%); } .book3d__brand { font-family: var(--font-logo); text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold); font-size: 0.7rem; } .book3d__title strong { display: block; font-family: var(--font-display); text-transform: uppercase; color: var(--cream); font-size: 1.85rem; line-height: 0.92; margin: 7px 0 9px; } .book3d__vol { font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.64rem; color: var(--cream-2); } /* ===================================================================== PROFILE CUSTOMIZATION — avatar + accent ===================================================================== */ .pf-avatars, .pf-accents { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .pf-avatar { width: 48px; height: 48px; border-radius: 0; border: 2px solid var(--line); background: rgba(242, 234, 215, 0.05); font-size: 1.45rem; cursor: pointer; display: grid; place-items: center; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .pf-avatar:hover { transform: translateY(-2px); } .pf-avatar.on { border-color: var(--gold); background: rgba(199, 168, 107, 0.16); transform: translateY(-2px); } .pf-accent { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 3px var(--green-850); transition: transform 0.15s ease; } .pf-accent:hover { transform: scale(1.1); } .pf-accent.on { border-color: var(--cream); transform: scale(1.14); } .dash-head__id { display: flex; align-items: center; gap: 18px; } .dash-avatar { width: 84px; height: 84px; border-radius: 0; display: grid; place-items: center; font-size: 2.6rem; flex: none; background: var(--accent-user, var(--gold)); border: 2px solid var(--accent-user, var(--gold)); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); } .dash-avatar span { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); } .dash-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 14px; border-radius: 0; border: 1px solid var(--line); margin-top: 14px; } .dash-status svg { width: 15px; height: 15px; } .dash-status--on { color: #8fd0a6; border-color: rgba(143, 208, 166, 0.4); background: rgba(143, 208, 166, 0.08); } .dash-status--off { color: var(--gold); border-color: rgba(199, 168, 107, 0.4); background: rgba(199, 168, 107, 0.08); } @media (max-width: 560px) { .dash-avatar { width: 64px; height: 64px; font-size: 2rem; } } /* ===================================================================== HEADER FITNESS / NUTRITION TABS + plan video ===================================================================== */ .header-tabs { border-top: 1px solid var(--line); background: #16291d; } .header-tabs .container { display: flex; gap: 8px; padding-top: 11px; padding-bottom: 11px; } .htab { font-family: var(--font-ui); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-2); background: none; border: 1px solid var(--line); border-radius: 0; padding: 8px 20px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .htab:hover { color: var(--cream); border-color: var(--gold); transform: translateY(-1px); } .htab.is-active { background: var(--gold); color: var(--green-900); border-color: var(--gold); } /* Plan feature video */ .plan-video { max-width: 880px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #000; line-height: 0; } .plan-video video { width: 100%; height: auto; display: block; max-height: 70vh; } /* ---------- About bio: name block + NASM badge ---------- */ .about-bio { position: relative; min-height: 520px; padding-bottom: 130px; } .about-bio__name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2.8rem, 6.2vw, 4.6rem); line-height: 0.9; letter-spacing: 0.005em; margin: 0 0 18px; } .about-bio__role, .about-bio__creds { display: block; font-family: var(--font-ui); text-transform: uppercase; } .about-bio__role { font-weight: 800; font-size: clamp(1.05rem, 1.7vw, 1.4rem); letter-spacing: 0.08em; color: var(--gold); margin-top: 14px; } .about-bio__creds { font-weight: 700; font-size: clamp(0.78rem, 0.95vw, 0.9rem); letter-spacing: 0.1em; color: var(--muted); margin-top: 8px; white-space: nowrap; } .about-bio__creds i { font-style: normal; opacity: 0.55; margin: 0 8px; } .nasm-badge { position: absolute; right: 0; bottom: 0; z-index: 2; width: clamp(132px, 14vw, 176px); padding: 12px 14px; background: #ffffff; border: 1px solid rgba(26, 54, 97, 0.18); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } .nasm-badge img { width: 100%; height: auto; display: block; } @media (max-width: 900px) { .about-bio { min-height: 0; padding-bottom: 0; } .about-bio__creds { white-space: normal; } .nasm-badge { position: static; margin: 26px 0 0; width: 160px; } } /* ---------- All-Access Food CTA (home-page gold button, banner form) ---------- */ .gold-cta { position: relative; overflow: visible; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--gold); color: var(--green-900); border: 2px solid var(--green-900); border-radius: 0; padding: clamp(20px, 2.6vw, 30px) clamp(24px, 3vw, 42px); margin-bottom: clamp(28px, 4vw, 46px); box-shadow: 10px 10px 0 var(--green-900); cursor: pointer; text-align: left; font-family: inherit; transition: transform 0.28s var(--ease-pop), box-shadow 0.28s var(--ease-pop), background 0.2s ease; } .gold-cta:hover { transform: translate(-5px, -5px); background: #d8bd84; box-shadow: 16px 16px 0 var(--green-900); } .gold-cta__main { display: flex; flex-direction: column; gap: 5px; position: relative; z-index: 1; } .gold-cta__k { font-family: var(--font-ui); font-weight: 800; font-size: clamp(0.6rem, 1vw, 0.78rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-900); opacity: 0.78; } .gold-cta__l { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.5rem, 3.1vw, 2.7rem); line-height: 0.9; } .gold-cta__price { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 0.9; white-space: nowrap; } .gold-cta__price small { font-family: var(--font-ui); font-weight: 800; font-size: 0.4em; } .gold-cta__go { font-family: var(--font-ui); font-weight: 800; transition: transform 0.28s var(--ease-pop); } .gold-cta:hover .gold-cta__go { transform: translateX(8px); } .gold-cta__claw { position: absolute; right: 16px; bottom: 10px; width: clamp(80px, 8vw, 110px); height: auto; color: var(--green-900); opacity: 0.12; pointer-events: none; } @media (max-width: 640px) { .gold-cta { flex-direction: column; align-items: flex-start; gap: 14px; } } /* ---------- Build-your-own plate configurator ---------- */ .plate { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(26px, 3.5vw, 52px); align-items: start; } .plate__head { margin-bottom: 24px; } .plate__price-tag { font-family: var(--font-display); font-size: clamp(2.2rem, 4.4vw, 3.2rem); color: var(--gold); line-height: 1; } .plate__price-tag small { font-family: var(--font-ui); font-weight: 700; font-size: 0.3em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-2); margin-left: 8px; } .plate__note { font-family: var(--font-ui); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-2); margin: 10px 0 0; } .plate__group { border: 0; padding: 0; margin: 0 0 26px; } .plate__legend { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 0 0 12px; margin-bottom: 12px; border-bottom: 2px solid rgba(242, 234, 215, 0.16); font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.2rem, 2vw, 1.6rem); } .plate__legend span { font-family: var(--font-ui); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.18em; color: var(--gold); } .plate__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; } @media (max-width: 560px) { .plate__opts { grid-template-columns: 1fr; } } .opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 4px 10px 8px; cursor: pointer; border-bottom: 1px solid rgba(242, 234, 215, 0.07); transition: transform 0.3s var(--ease-pop), color 0.2s ease; } /* gold accent that grows in from the left on hover */ .opt::before { content: ""; position: absolute; left: -2px; top: 50%; width: 3px; height: 0; background: var(--gold); transform: translateY(-50%); transition: height 0.3s var(--ease-pop); } .opt input { accent-color: var(--gold); width: 18px; height: 18px; flex: none; cursor: pointer; transition: transform 0.3s var(--ease-pop); } .opt__name { flex: 1; font-size: 0.97rem; color: var(--cream-2); transition: color 0.2s ease; } .opt__up { font-family: var(--font-ui); font-weight: 700; font-size: 0.8rem; color: var(--gold); transition: transform 0.3s var(--ease-pop); } .opt:not(.opt--soon):not(.is-disabled):hover { transform: translateX(7px); } .opt:not(.opt--soon):not(.is-disabled):hover::before { height: 64%; } .opt:not(.opt--soon):not(.is-disabled):hover .opt__name { color: var(--cream); } .opt:not(.opt--soon):not(.is-disabled):hover input { transform: scale(1.22); } .opt:not(.opt--soon):not(.is-disabled):hover .opt__up { transform: scale(1.12); } .opt--soon { opacity: 0.5; cursor: not-allowed; } .opt--soon .opt__soon { font-family: var(--font-ui); font-weight: 700; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .opt.is-disabled { opacity: 0.38; cursor: not-allowed; } .opt.is-disabled input { cursor: not-allowed; } .opt__ic { font-size: 1.15rem; line-height: 1; flex: none; width: 24px; text-align: center; transition: transform 0.3s var(--ease-pop); filter: grayscale(0.4) opacity(0.85); } .opt:not(.opt--soon):not(.is-disabled):hover .opt__ic { transform: scale(1.25) rotate(-6deg); filter: none; } /* Selected state — light-up the row in gold */ .opt:has(input:checked) { background: linear-gradient(90deg, rgba(199,168,107,0.16), rgba(199,168,107,0)); } .opt:has(input:checked)::before { height: 78%; } .opt:has(input:checked) .opt__name { color: var(--cream); font-weight: 700; } .opt:has(input:checked) .opt__ic { filter: none; transform: scale(1.18); } .plate__aside { position: sticky; top: 90px; } .plate__summary { background: var(--surface); border: 2px solid rgba(242, 234, 215, 0.18); padding: clamp(22px, 2.4vw, 30px); } .plate__summary h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.3rem; margin-bottom: 16px; } .pl-sum { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pl-sum li { display: flex; flex-direction: column; gap: 2px; } .pl-sum__k { font-family: var(--font-ui); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } .pl-sum__v { font-size: 0.95rem; color: var(--cream); } .pl-sum__v em { color: var(--muted); font-style: normal; } .pl-perplate { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; color: var(--cream-2); } .pl-perplate b { font-family: var(--font-display); font-size: 1.4rem; color: var(--cream); } .plate__time { display: block; margin: 4px 0 16px; } .plate__time-lbl { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .plate__time select { width: 100%; padding: 11px 14px; border-radius: 0; background: rgba(242, 234, 215, 0.06); color: var(--cream); border: 1px solid var(--line); font-family: var(--font-ui); font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: border-color 0.2s ease; } .plate__time select:hover { border-color: var(--gold); } .plate__time select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .plate__pickup { font-family: var(--font-ui); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 14px 0 0; text-align: center; } @media (max-width: 880px) { .plate { grid-template-columns: 1fr; } .plate__aside { position: static; } } /* ---------- Cookbook volumes ---------- */ .vol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 44px); align-items: start; } .volbook { display: flex; flex-direction: column; align-items: center; gap: 18px; } .volbook__cover { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(18px, 2vw, 28px); gap: 10px; background: linear-gradient(150deg, var(--green-750), var(--green-900) 75%); border: 1px solid rgba(199, 168, 107, 0.5); box-shadow: var(--shadow-lg); text-decoration: none; color: var(--cream); transition: transform 0.32s var(--ease-pop), border-color 0.3s ease, box-shadow 0.32s var(--ease-pop); } .volbook__cover::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(199, 168, 107, 0.34); pointer-events: none; z-index: 3; } .volbook__cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; z-index: 0; } .volbook__cover::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8, 16, 11, 0.88), rgba(8, 16, 11, 0.35)); } .volbook__face { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 9px; } .volbook__brand { font-family: var(--font-ui); font-weight: 700; font-size: clamp(0.52rem, 0.9vw, 0.68rem); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .volbook__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 0.9; color: var(--cream); } .volbook__vol { font-family: var(--font-ui); font-weight: 600; font-size: clamp(0.5rem, 0.9vw, 0.66rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2); } a.volbook__cover:hover { transform: translateY(-6px) scale(1.02); border-color: var(--gold); } .volbook__buy { display: flex; flex-direction: column; align-items: center; gap: 12px; } .volbook__buy .price { font-size: 1.5rem; } /* Coming-soon volumes */ .volbook--soon .volbook__cover { filter: grayscale(0.45); opacity: 0.78; } .volbook__badge { position: absolute; z-index: 4; top: 16px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--green-900); font-family: var(--font-ui); font-weight: 800; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 14px; } .volbook__soon { font-family: var(--font-ui); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } @media (max-width: 760px) { .vol-grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; gap: 32px; } } /* ---------- Flip-through cookbook (arrow / keyboard driven) ---------- */ .cookbook-show { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .cookbook-show__book { display: flex; flex-direction: column; align-items: center; gap: 22px; min-width: 0; } .flipbook { position: relative; perspective: 2800px; width: 100%; max-width: 600px; aspect-ratio: 3 / 2; filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.5)); } .fb-stage { position: absolute; inset: 0; transform: translateX(-25%); transition: transform 0.6s var(--ease-pop); will-change: transform; } /* Prev / next controls */ .fb-controls { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 380px; } .fb-arrow { flex: none; width: 48px; height: 48px; display: grid; place-items: center; font-family: var(--font-ui); font-size: 1.7rem; line-height: 0; padding-bottom: 4px; background: transparent; color: var(--cream); border: 2px solid rgba(242, 234, 215, 0.3); cursor: pointer; transition: transform 0.28s var(--ease-pop), border-color 0.2s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease; } .fb-arrow:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px) scale(1.06); } .fb-arrow:disabled { opacity: 0.32; cursor: default; transform: none; border-color: rgba(242, 234, 215, 0.16); color: var(--cream); } .fb-base, .fb-leaf { position: absolute; top: 0; height: 100%; width: 50%; } .fb-base { z-index: 0; } .fb-base--left { left: 0; opacity: 0; transition: opacity 0.4s ease; } .fb-base--right { right: 0; } .fb-leaf { left: 50%; transform-origin: left center; transform-style: preserve-3d; transition: transform 0.8s var(--ease-pop); will-change: transform; } .fb-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } .fb-face--back { transform: rotateY(180deg); } /* Recipe page — full-bleed photo with the title + macros below it */ .fb-page { position: relative; height: 100%; width: 100%; overflow: hidden; background: #11221a; } .fb-page__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .fb-page__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(16px, 2.2vw, 30px) clamp(16px, 2.2vw, 30px) clamp(18px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 9px; background: linear-gradient(to top, rgba(8, 16, 11, 0.96) 14%, rgba(8, 16, 11, 0.55) 60%, transparent); } .fb-page__kicker { font-family: var(--font-ui); font-weight: 700; font-size: clamp(0.54rem, 0.95vw, 0.7rem); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .fb-page__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.3rem, 3vw, 2.4rem); line-height: 0.9; color: var(--cream); } .fb-page__macros { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; } .fb-page__macros span { font-family: var(--font-ui); font-weight: 800; font-size: clamp(0.54rem, 0.9vw, 0.66rem); letter-spacing: 0.05em; text-transform: uppercase; background: var(--gold); color: var(--green-900); padding: 5px 10px; } .fb-page__num { position: absolute; top: 12px; right: 16px; font-family: var(--font-ui); font-weight: 700; font-size: 0.62rem; color: rgba(242, 234, 215, 0.7); } /* Inner-spine shading for depth */ .fb-face--front::after, .fb-base--right::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(to left, transparent 86%, rgba(0, 0, 0, 0.28)); } .fb-face--back::after, .fb-base--left::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(to right, transparent 86%, rgba(0, 0, 0, 0.28)); } /* Sleek cover + end pages */ .fb-cover-art { position: relative; height: 100%; overflow: hidden; background: radial-gradient(130% 90% at 50% 0%, var(--green-700), var(--green-900) 70%); color: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: clamp(20px, 3vw, 36px); border: 1px solid rgba(199, 168, 107, 0.55); } .fb-cover-art::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(199, 168, 107, 0.32); pointer-events: none; } .fb-cover-art__claw { width: clamp(44px, 5vw, 64px); height: auto; color: var(--gold); margin-bottom: 6px; } /* Page-edge thickness on the closed cover's right side */ .fb-cover-art--front::after { content: ""; position: absolute; top: 4%; bottom: 4%; right: -7px; width: 7px; background: repeating-linear-gradient(180deg, #e9ddc1 0 2px, #c9bb98 2px 4px); } .fb-cover__brand { font-family: var(--font-ui); font-weight: 700; font-size: clamp(0.56rem, 1vw, 0.74rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .fb-cover__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.5rem, 3.6vw, 2.9rem); line-height: 0.88; } .fb-cover__vol { font-family: var(--font-ui); font-weight: 600; font-size: clamp(0.52rem, 0.92vw, 0.68rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2); } .flipbook-progress { flex: 1; height: 3px; background: rgba(242, 234, 215, 0.14); } .flipbook-progress span { display: block; height: 100%; width: 0; background: var(--gold); transition: width 0.5s var(--ease-pop); } /* Purchase column */ .cookbook-show__info h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom: 6px; } @media (max-width: 880px) { .cookbook-show { grid-template-columns: 1fr; gap: 38px; } } @media (prefers-reduced-motion: reduce) { .fb-leaf, .fb-stage, .fb-base--left, .flipbook-progress span { transition: none; } } /* ---------- Macro tracker (app page) ---------- */ .trk-locked { max-width: 620px; margin: 0 auto; text-align: center; background: var(--surface); border: 2px solid rgba(242,234,215,0.18); padding: clamp(30px,5vw,56px); } .trk-locked__ic { width: 60px; height: 60px; margin: 0 auto 18px; display: grid; place-items: center; color: var(--gold); border: 2px solid rgba(199,168,107,0.4); } .trk-locked__ic svg { width: 28px; height: 28px; } .trk-locked h2 { margin-bottom: 10px; } .trk-locked p { color: var(--muted); max-width: 46ch; margin: 0 auto 24px; } .trk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; } .trk-grid { display: grid; grid-template-columns: 320px 1fr; gap: clamp(24px,3vw,40px); align-items: start; } @media (max-width: 880px) { .trk-grid { grid-template-columns: 1fr; } } .trk-totals { background: var(--surface); border: 2px solid rgba(242,234,215,0.18); padding: clamp(22px,2.4vw,28px); position: sticky; top: 90px; display: flex; flex-direction: column; gap: 14px; } @media (max-width: 880px) { .trk-totals { position: static; } } .trk-cal { text-align: center; padding-bottom: 8px; } .trk-cal strong { font-family: var(--font-display); font-size: clamp(2.6rem,5vw,3.4rem); line-height: 1; color: var(--cream); display: block; } .trk-cal span { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .trk-cal__bar { height: 6px; background: rgba(242,234,215,0.12); margin-top: 12px; } .trk-cal__bar i { display: block; height: 100%; background: var(--gold); transition: width 0.5s var(--ease-pop); } .trk-note { font-size: 0.78rem; color: var(--muted); margin: 4px 0 0; } .trk-note a, .trk-totals a { color: var(--gold); } .trk-subhead { font-family: var(--font-display); text-transform: uppercase; font-size: 1.2rem; margin: 26px 0 14px; } .trk-main .trk-subhead:first-child { margin-top: 0; } /* upload / review card */ .trk-log-card { background: var(--surface); border: 2px solid rgba(242,234,215,0.18); } .trk-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: clamp(30px,4vw,48px); text-align: center; cursor: pointer; color: var(--cream-2); transition: border-color 0.2s ease, background 0.2s ease; } .trk-drop svg { width: 40px; height: 40px; color: var(--gold); margin-bottom: 6px; } .trk-drop strong { font-family: var(--font-ui); font-weight: 700; font-size: 1rem; color: var(--cream); } .trk-drop span { font-size: 0.85rem; color: var(--muted); } .trk-log-card:hover .trk-drop { background: rgba(242,234,215,0.03); } .trk-analyzing { display: flex; gap: 16px; align-items: center; padding: 18px; } .trk-analyzing img { width: 96px; height: 96px; object-fit: cover; flex: none; } .trk-analyzing__txt { font-family: var(--font-ui); font-weight: 600; color: var(--cream-2); display: flex; align-items: center; gap: 12px; } .trk-spin { width: 20px; height: 20px; border: 2px solid rgba(242,234,215,0.25); border-top-color: var(--gold); border-radius: 50%; animation: trk-spin 0.7s linear infinite; } @keyframes trk-spin { to { transform: rotate(360deg); } } .trk-review { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 18px; } @media (max-width: 560px) { .trk-review { grid-template-columns: 1fr; } } .trk-review__img { width: 100%; aspect-ratio: 1; object-fit: cover; } .trk-review__form { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .trk-kicker { font-family: var(--font-ui); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } .trk-in { background: rgba(242,234,215,0.06); border: 1px solid var(--line); color: var(--cream); font-family: var(--font-ui); padding: 9px 12px; border-radius: 0; width: 100%; } .trk-in:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .trk-in--name { font-weight: 700; font-size: 1.05rem; } .trk-macros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .trk-macro { display: flex; flex-direction: column; gap: 4px; } .trk-macro span { font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .trk-aiNote { font-size: 0.78rem; color: var(--muted); margin: 0; } .trk-review__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .trk-err { padding: 12px 16px; color: #e6b8a6; font-size: 0.88rem; border-bottom: 1px solid var(--line); } /* log entries */ .trk-logs { display: flex; flex-direction: column; gap: 10px; } .trk-logcard { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); padding: 10px 12px; transition: border-color 0.2s ease; } .trk-logcard:hover { border-color: rgba(242,234,215,0.3); } .trk-logcard img, .trk-logcard__noimg { width: 52px; height: 52px; object-fit: cover; flex: none; background: rgba(242,234,215,0.06); } .trk-logcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .trk-logcard__body strong { font-family: var(--font-ui); font-weight: 700; font-size: 0.95rem; color: var(--cream); } .trk-logcard__body span { font-size: 0.78rem; color: var(--muted); } .trk-del { flex: none; width: 30px; height: 30px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .trk-del:hover { color: var(--cream); border-color: var(--gold); } .trk-empty { color: var(--muted); font-size: 0.9rem; padding: 8px 0; } .trk-history { margin-top: 36px; } .trk-day { margin-bottom: 22px; } .trk-day__head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px; } .trk-day__head h4 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; } .trk-day__head span { font-family: var(--font-ui); font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } /* =================================================================== ALL-ACCESS BENEFITS MODAL =================================================================== */ .aa-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; } .aa-modal.is-open { display: flex; animation: aaFade 0.18s ease; } @keyframes aaFade { from { opacity: 0; } to { opacity: 1; } } .aa-modal__backdrop { position: absolute; inset: 0; background: rgba(8, 22, 16, 0.78); backdrop-filter: blur(6px); } .aa-modal__box { position: relative; width: min(820px, 100%); max-height: 92vh; overflow-y: auto; background: var(--green-900, #0d2a1c); color: var(--cream, #f2ead7); border: 1px solid rgba(199, 168, 107, 0.4); box-shadow: 0 30px 60px rgba(0,0,0,0.5); padding: 36px 32px 28px; animation: aaPop 0.28s var(--ease-pop, cubic-bezier(0.2,0.85,0.25,1)); } @keyframes aaPop { from { transform: translateY(20px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .aa-modal__close { position: absolute; top: 10px; right: 14px; width: 38px; height: 38px; background: transparent; border: 1px solid rgba(242,234,215,0.2); color: var(--cream); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease; } .aa-modal__close:hover { border-color: var(--gold); color: var(--gold); } .aa-modal__head { text-align: center; margin-bottom: 22px; } .aa-modal__eyebrow { display: inline-block; font-family: var(--font-ui); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-size: 0.78rem; margin-bottom: 8px; } .aa-modal__head h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.05; text-transform: uppercase; margin: 0 0 8px; } .aa-modal__head p { color: rgba(242,234,215,0.78); font-size: 0.98rem; max-width: 52ch; margin: 0 auto; } .aa-modal__grid { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 600px) { .aa-modal__grid { grid-template-columns: 1fr; } .aa-modal__box { padding: 28px 20px; } } .aa-perk { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: rgba(242,234,215,0.04); border: 1px solid rgba(242,234,215,0.08); transition: border-color 0.2s ease, transform 0.25s var(--ease-pop, cubic-bezier(0.2,0.85,0.25,1)); } .aa-perk:hover { border-color: rgba(199,168,107,0.5); transform: translateY(-2px); } .aa-perk__ic { font-size: 1.35rem; line-height: 1; flex: none; } .aa-perk strong { display: block; font-family: var(--font-ui); font-weight: 800; font-size: 0.95rem; color: var(--cream); margin-bottom: 2px; } .aa-perk span { color: rgba(242,234,215,0.7); font-size: 0.85rem; line-height: 1.35; } .aa-modal__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .aa-modal__fine { text-align: center; margin: 14px 0 0; font-size: 0.78rem; color: rgba(242,234,215,0.55); } /* =================================================================== EVENTS CALENDAR + EVENT MODAL =================================================================== */ .cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; } @media (max-width: 900px) { .cal-wrap { grid-template-columns: 1fr; } } .cal { background: var(--surface, #fff); border: 1px solid var(--line, rgba(0,0,0,0.1)); padding: 24px; } .cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; } .cal__title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } .cal__nav { display: flex; gap: 6px; } .cal__btn { width: 38px; height: 38px; background: transparent; border: 1px solid var(--line); font-size: 1.2rem; line-height: 1; cursor: pointer; color: inherit; transition: border-color 0.18s ease, background 0.18s ease; } .cal__btn:hover { border-color: var(--gold, #c7a86b); background: rgba(199,168,107,0.08); } .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: var(--line, rgba(0,0,0,0.08)); border: 1px solid var(--line); } .cal__dow { background: rgba(13,42,28,0.04); padding: 8px 6px; text-align: center; font-family: var(--font-ui); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted, #677); } .cal__day { background: var(--surface, #fff); min-height: 86px; padding: 8px 8px 6px; display: flex; flex-direction: column; gap: 4px; position: relative; transition: background 0.18s ease; } .cal__day--blank { background: rgba(0,0,0,0.02); } .cal__day--today .cal__num { background: var(--green-900, #0d2a1c); color: var(--cream, #f2ead7); } .cal__num { font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; } .cal__day--has-event { cursor: pointer; } .cal__day--has-event:hover { background: rgba(199,168,107,0.08); } .cal__pill { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 0.72rem; padding: 3px 6px; background: var(--green-900, #0d2a1c); color: var(--cream, #f2ead7); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform 0.25s var(--ease-pop, cubic-bezier(0.2,0.85,0.25,1)); } .cal__pill:hover { transform: translateX(2px); } .cal__pill--training { background: #144d33; } .cal__pill--workshop { background: #7a5a1f; } .cal__pill--social { background: #1e4f7a; } .cal__pill--race { background: #7a1f1f; } .cal-side { display: flex; flex-direction: column; gap: 14px; } .cal-side h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.1rem; margin: 0 0 4px; } .cal-up { background: var(--surface, #fff); border: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color 0.18s ease, transform 0.25s var(--ease-pop, cubic-bezier(0.2,0.85,0.25,1)); text-align: left; font-family: inherit; color: inherit; width: 100%; } .cal-up:hover { border-color: var(--gold, #c7a86b); transform: translateX(3px); } .cal-up__date { font-family: var(--font-ui); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold, #c7a86b); } .cal-up__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; line-height: 1.1; margin: 2px 0; } .cal-up__meta { font-size: 0.82rem; color: var(--muted, #677); } .ev-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; } .ev-modal.is-open { display: flex; animation: aaFade 0.18s ease; } .ev-modal__backdrop { position: absolute; inset: 0; background: rgba(8,22,16,0.78); backdrop-filter: blur(6px); } .ev-modal__box { position: relative; width: min(640px, 100%); max-height: 92vh; overflow-y: auto; background: var(--cream, #f2ead7); color: var(--ink, #0d2a1c); border: 1px solid rgba(13,42,28,0.2); box-shadow: 0 30px 60px rgba(0,0,0,0.5); animation: aaPop 0.28s var(--ease-pop, cubic-bezier(0.2,0.85,0.25,1)); } .ev-modal__close { position: absolute; top: 10px; right: 14px; width: 38px; height: 38px; background: rgba(13,42,28,0.06); border: 1px solid rgba(13,42,28,0.15); color: var(--green-900, #0d2a1c); font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 2; } .ev-modal__close:hover { background: var(--gold, #c7a86b); color: #fff; } .ev-modal__poster { width: 100%; aspect-ratio: 4/5; max-height: 60vh; object-fit: cover; display: block; background: #0d2a1c; } .ev-modal__poster--auto { display: flex; flex-direction: column; justify-content: space-between; padding: 32px 26px; background: linear-gradient(155deg, #0d2a1c 0%, #15402a 60%, #c7a86b 200%); color: #f2ead7; text-align: left; aspect-ratio: 4/5; } .ev-poster__kicker { font-family: var(--font-ui); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem; color: #c7a86b; } .ev-poster__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 0.95; text-transform: uppercase; margin: 14px 0; } .ev-poster__date { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1; text-transform: uppercase; } .ev-poster__time { font-family: var(--font-ui); font-weight: 700; font-size: 0.95rem; margin-top: 4px; opacity: 0.9; } .ev-poster__brand { font-family: var(--font-display); letter-spacing: 0.04em; opacity: 0.7; font-size: 0.9rem; text-transform: uppercase; align-self: flex-end; } .ev-modal__body { padding: 22px 24px 26px; } .ev-modal__body h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.6rem; margin: 0 0 6px; line-height: 1.05; } .ev-modal__meta { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem; color: rgba(13,42,28,0.7); margin-bottom: 12px; } .ev-modal__meta span { display: inline-flex; gap: 6px; align-items: center; } .ev-modal__blurb { margin: 0 0 16px; font-size: 0.96rem; line-height: 1.5; } .ev-modal__loc { padding: 12px 14px; background: rgba(13,42,28,0.06); border-left: 3px solid var(--gold, #c7a86b); margin-bottom: 16px; } .ev-modal__loc strong { display: block; font-family: var(--font-ui); font-weight: 800; font-size: 0.92rem; } .ev-modal__loc a { color: var(--green-900, #0d2a1c); text-decoration: underline; font-size: 0.86rem; } .ev-modal__cta { display: flex; gap: 10px; flex-wrap: wrap; } .ev-modal__cta .btn--ghost-light { color: var(--green-900, #0d2a1c); border-color: var(--green-900, #0d2a1c); } .ev-modal__cta .btn--ghost-light:hover { background: var(--green-900, #0d2a1c); color: var(--cream, #f2ead7); } /* ── Fitness page: compact layout ── */ .fitness-allaccess { white-space: nowrap; } .fit-duo { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; align-items: start; } .fit-card { background: var(--surface); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; } .fit-card__media { overflow: hidden; height: 180px; } .fit-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .fit-card__body { padding: 16px 20px 20px; display: flex; flex-direction: column; flex: 1; } .fit-card__flag { display: inline-block; width: fit-content; font-family: var(--font-ui); font-weight: 700; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); padding: 3px 10px; margin-bottom: 8px; } .fit-card h1, .fit-card h2 { font-family: var(--font-display); text-transform: uppercase; margin: 0 0 2px; } .fit-card h1 { font-size: 1.8rem; } .fit-card h2 { font-size: 1.4rem; } .fit-card__price { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); margin-bottom: 6px; } .fit-card__price small { font-family: var(--font-body); font-size: 0.45em; color: var(--sage); } .fit-card p { color: var(--cream-2); font-weight: 300; font-size: 0.88rem; margin: 0 0 10px; line-height: 1.5; } .fit-card--training { border-color: var(--gold); } .fit-plans { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .fit-plan { position: relative; overflow: hidden; aspect-ratio: 3/4; display: block; } .fit-plan img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .fit-plan:hover img { transform: scale(1.06); } .fit-plan__info { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); } .fit-plan__info strong { font-family: var(--font-ui); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cream); } .btn--xs { font-size: 0.65rem; padding: 4px 10px; } /* Consultation required toast */ .consult-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--gold); color: var(--green-900); padding: 12px 24px; font-family: var(--font-ui); font-weight: 600; font-size: 0.85rem; z-index: 9000; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; white-space: nowrap; } .consult-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } @media (max-width: 900px) { .fit-duo { grid-template-columns: 1fr; } .fit-plans { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .fit-plans { grid-template-columns: repeat(2, 1fr); } } /* ── Booking calendar (consult.html) ── */ .bk-hero { text-align: center; margin-bottom: 36px; } .bk-hero__icon { width: 56px; height: 56px; margin: 0 auto 16px; opacity: 0.85; } .bk-hero__icon svg { width: 100%; height: 100%; } .bk-hero h2 { margin-bottom: 10px; } .bk-hero p { color: var(--sage); font-size: 1.05rem; max-width: 520px; margin: 0 auto; line-height: 1.6; } .bk-hero p strong { color: var(--gold); } .bk-week-tabs { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--green-600) transparent; } .bk-week-tab { flex: 0 0 auto; padding: 8px 16px; background: transparent; border: 1px solid var(--line); color: var(--sage); font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; } .bk-week-tab:hover { border-color: var(--gold); color: var(--cream); } .bk-week-tab--sel { border-color: var(--gold); color: var(--gold); background: rgba(199,168,107,0.08); } .bk-dates { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--green-600) transparent; } .bk-date { flex: 0 0 auto; min-width: 80px; padding: 14px 10px 10px; background: var(--surface); border: 1px solid var(--line); color: var(--cream); font-family: var(--font-ui); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: border-color 0.25s, background 0.25s, transform 0.2s var(--ease-pop); } .bk-date:hover { border-color: var(--gold); transform: translateY(-2px); } .bk-date--sel { border-color: var(--gold); background: rgba(199,168,107,0.12); transform: translateY(-2px); } .bk-date--weekend { border-color: rgba(199,168,107,0.25); } .bk-date__day { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); } .bk-date--sel .bk-date__day { color: var(--gold); } .bk-date__num { font-size: 1.5rem; font-weight: 800; line-height: 1.1; } .bk-date--sel .bk-date__num { color: var(--gold); } .bk-date__mon { font-size: 0.65rem; color: var(--sage); text-transform: uppercase; letter-spacing: 0.06em; } .bk-date__open { font-size: 0.6rem; color: var(--sage); margin-top: 4px; opacity: 0.7; } .bk-date--sel .bk-date__open { color: var(--gold); opacity: 1; } .bk-slots { margin-top: 24px; } .bk-slots__title { font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600; color: var(--cream); margin-bottom: 14px; text-transform: none; } .bk-slots__grid { display: flex; flex-wrap: wrap; gap: 8px; } .bk-slot { flex: 0 0 auto; padding: 10px 18px; background: var(--surface); border: 1px solid var(--line); color: var(--cream); font-family: var(--font-ui); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: border-color 0.2s, background 0.2s, transform 0.15s var(--ease-pop); } .bk-slot:hover { border-color: var(--gold); transform: translateY(-1px); } .bk-slot--sel { border-color: var(--gold); background: rgba(199,168,107,0.15); } .bk-slot__time { font-size: 0.9rem; font-weight: 700; } .bk-slot--sel .bk-slot__time { color: var(--gold); } .bk-slot__tag { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage); } .bk-slot--sel .bk-slot__tag { color: var(--gold); } .bk-slot--taken { opacity: 0.3; cursor: not-allowed; } .bk-slot--taken .bk-slot__time { text-decoration: line-through; } .bk-confirm { background: var(--surface); border: 1px solid var(--line); padding: 24px; margin-top: 28px; position: relative; } .bk-confirm__header { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .bk-confirm__summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .bk-confirm__detail { display: flex; flex-direction: column; gap: 2px; } .bk-confirm__detail strong { font-family: var(--font-ui); font-size: 1rem; } .bk-confirm__detail span { color: var(--sage); font-size: 0.88rem; } .bk-confirm__price { font-family: var(--font-ui); font-weight: 800; font-size: 1.3rem; color: var(--gold); } .bk-confirm__who { color: var(--sage); font-size: 0.9rem; margin-bottom: 16px; } .bk-confirm__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; } .bk-confirm__fields .field:last-child { grid-column: span 2; } .bk-confirm__fields label { display: block; font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage); margin-bottom: 5px; } .bk-confirm__fields input { width: 100%; padding: 11px 14px; background: var(--green-750); border: 1px solid var(--line); color: var(--cream); font-family: var(--font-body); font-size: 0.95rem; transition: border-color 0.2s; } .bk-confirm__fields input:focus { border-color: var(--gold); outline: none; } .bk-confirm__fields input::placeholder { color: var(--sage); opacity: 0.5; } .bk-done { text-align: center; padding: 60px 0; } .bk-done__icon { width: 72px; height: 72px; margin: 0 auto 20px; animation: bk-pop 0.5s var(--ease-pop); } @keyframes bk-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .bk-done__icon svg { width: 100%; height: 100%; } .bk-done h2 { margin-bottom: 8px; } .bk-done__detail { color: var(--gold); font-family: var(--font-ui); font-weight: 600; font-size: 1.05rem; margin-bottom: 8px; } .bk-done__actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; } .bk-empty { color: var(--sage); text-align: center; padding: 50px 0; font-size: 1.05rem; } @media (max-width: 600px) { .bk-dates { gap: 6px; } .bk-date { min-width: 68px; padding: 10px 8px 8px; } .bk-slots__grid { gap: 6px; } .bk-slot { padding: 8px 14px; } } /* ── Admin panel (profile.html) ── */ .admin-panel { background: var(--surface); border: 1px solid var(--gold); padding: 20px; margin-top: 20px; } .admin-panel h3 { font-family: var(--font-ui); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-bottom: 12px; } .admin-panel p { color: var(--sage); font-size: 0.85rem; margin: 0 0 12px; } .admin-clients { list-style: none; padding: 0; margin: 0 0 12px; } .admin-clients li { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; } .admin-clients li:last-child { border-bottom: 0; } .admin-clients__info { color: var(--cream); } .admin-clients__date { color: var(--sage); font-size: 0.75rem; } .admin-unlock { padding: 5px 14px; font-size: 0.75rem; } .admin-add { display: flex; gap: 8px; margin-top: 8px; } .admin-add input { flex: 1; padding: 8px 12px; background: var(--green-750); border: 1px solid var(--line); color: var(--cream); font-family: var(--font-body); font-size: 0.85rem; } @media (max-width: 600px) { .bk-confirm__fields { grid-template-columns: 1fr; } .bk-confirm__fields .field:last-child { grid-column: span 1; } .bk-done__actions { flex-direction: column; } } /* ── Intake Breathing affiliate popup ── */ .intake-popup { position: fixed; bottom: 20px; left: 20px; z-index: 8000; background: #111; border: 1px solid rgba(199,168,107,0.35); box-shadow: 0 12px 40px rgba(0,0,0,0.5); max-width: 280px; padding: 14px 16px 14px 14px; opacity: 0; transform: translateY(20px) scale(0.95); transition: opacity 0.35s ease, transform 0.35s var(--ease-pop, cubic-bezier(0.2,0.85,0.25,1)); pointer-events: none; } .intake-popup--visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .intake-popup__close { position: absolute; top: 4px; right: 6px; background: none; border: none; color: #888; font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 4px; } .intake-popup__close:hover { color: #fff; } .intake-popup__link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #f2ead7; } .intake-popup__logo { width: 60px; flex-shrink: 0; filter: brightness(1); } .intake-popup__text { font-family: var(--font-body, 'Barlow', sans-serif); font-size: 0.82rem; line-height: 1.35; } .intake-popup__text strong { color: var(--gold, #c7a86b); } @media (max-width: 600px) { .intake-popup { bottom: 12px; left: 12px; right: 12px; max-width: none; } }