/* ========================================================= LABAN DITCHBURN — MAIN STYLESHEET Brand: BG-2026.01 Palette: 70% Black · 15% Red · 10% Gold · 5% White Type: Bebas Neue · Inter · Pinyon Script ========================================================= */ /* --------- Fonts --------- */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Pinyon+Script&display=swap'); /* --------- Tokens --------- */ :root { --black: #0D0D0D; --red: #A11824; --red-hover: #B92030; --gold: #C29F53; --gold-hover: #D4B26A; --gold-dim: #7A6435; --white: #FFFFFF; --charcoal: #2B2B2B; --oxblood: #1A1212; --mute: #8A8A8A; /* Accent tokens — the site's primary display + CTA color. Gold is the committed direction; the red tokens above are kept as the brand's secondary accent (small quote marks, waveforms). */ --accent: var(--gold); --accent-hover: var(--gold-hover); --accent-ink: var(--black); /* dark ink on top of the accent fill */ --oxblood: #1F1810; /* warmer band to sit under gold */ --sidebar-w: 18%; --sidebar-min: 220px; --sidebar-max: 260px; --pad-x: clamp(32px, 5vw, 88px); --pad-y: clamp(48px, 6vw, 120px); --track-eyebrow: 0.3em; --track-display: 0.02em; --border-gold: 1px solid var(--gold); --border-gold-dim: 1px solid rgba(194, 159, 83, 0.35); } /* Gold theme — replaces the red display + CTA accent with gold. Applied by adding [data-theme="gold"] to (persisted in localStorage). */ [data-theme="gold"] { --accent: var(--gold); --accent-hover: var(--gold-hover); --accent-ink: var(--black); /* dark ink on gold for contrast */ --oxblood: #1F1810; /* warmer band to sit under gold */ } /* --------- Reset --------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.65; color: var(--white); background: var(--black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* --------- Typography helpers --------- */ .display, h1, h2, h3, .h1, .h2, .h3 { font-family: 'Bebas Neue', 'Anton', Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-display); line-height: 0.9; margin: 0; } h1, .h1 { font-size: clamp(56px, 9vw, 120px); } h2, .h2 { font-size: clamp(40px, 5.5vw, 72px); } h3, .h3 { font-size: clamp(24px, 2.4vw, 32px); } .eyebrow { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--gold); display: inline-block; margin: 0 0 18px; } .lead { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.85); max-width: 60ch; } .body-copy p { max-width: 68ch; color: rgba(255,255,255,0.82); } .body-copy p + p { margin-top: 1.1em; } .text-red { color: var(--accent); } .text-accent { color: var(--accent); } .text-gold { color: var(--gold); } .text-mute { color: rgba(255,255,255,0.6); } /* --------- Layout: sidebar + content --------- */ .layout { display: grid; grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-w)) 1fr; min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; padding: 40px 28px; display: flex; flex-direction: column; justify-content: space-between; background: var(--black); border-right: var(--border-gold); max-width: var(--sidebar-max); z-index: 20; } .sidebar__brand { font-family: 'Pinyon Script', cursive; font-size: 64px; line-height: 1; color: var(--gold); letter-spacing: 0; text-transform: none; font-weight: 400; display: block; } .sidebar__brand:hover { color: var(--gold); } .sidebar__nav { margin-top: auto; margin-bottom: auto; display: flex; flex-direction: column; gap: 14px; } .sidebar__nav a { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white); transition: color .18s ease; padding: 2px 0; position: relative; } .sidebar__nav a:hover, .sidebar__nav a[aria-current="page"] { color: var(--gold); } .sidebar__nav a[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 1px; background: var(--gold); } .sidebar__socials { display: flex; gap: 14px; align-items: center; } .sidebar__socials a { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--white); opacity: 0.85; transition: color .18s ease, opacity .18s ease; } .sidebar__socials a:hover { color: var(--gold); opacity: 1; } .sidebar__socials svg { width: 18px; height: 18px; fill: currentColor; } .content { min-width: 0; min-height: 100vh; } /* --------- Mobile header + drawer (< 900px) --------- */ .mobile-header { display: none; position: sticky; top: 0; z-index: 30; background: var(--black); border-bottom: var(--border-gold); padding: 16px 20px; align-items: center; justify-content: space-between; } .mobile-header__brand { font-family: 'Pinyon Script', cursive; font-size: 40px; color: var(--gold); line-height: 1; } .mobile-header__toggle { width: 40px; height: 40px; display: flex; flex-direction: column; justify-content: center; gap: 5px; align-items: center; } .mobile-header__toggle span { display: block; width: 22px; height: 2px; background: var(--white); transition: transform .2s ease, opacity .2s ease; } body.drawer-open .mobile-header__toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); } body.drawer-open .mobile-header__toggle span:nth-child(2){ opacity: 0; } body.drawer-open .mobile-header__toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .drawer { display: none; position: fixed; inset: 0; z-index: 25; background: var(--black); padding: 88px 32px 32px; flex-direction: column; transform: translateX(-100%); transition: transform .28s ease; } body.drawer-open .drawer { transform: translateX(0); } .drawer nav { display: flex; flex-direction: column; gap: 22px; margin-top: 20px; } .drawer nav a { font-family: 'Bebas Neue', sans-serif; font-size: 36px; letter-spacing: 0.03em; color: var(--white); } .drawer nav a[aria-current="page"] { color: var(--accent); } .drawer .drawer__socials { margin-top: auto; display: flex; gap: 20px; } .drawer .drawer__socials a { color: var(--white); } .drawer .drawer__socials svg { width: 22px; height: 22px; fill: currentColor; } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .sidebar { display: none; } .mobile-header { display: flex; } .drawer { display: flex; } } /* --------- Buttons --------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 0; background: var(--accent); color: var(--accent-ink); transition: background .18s ease, transform .18s ease, color .18s ease; border: 1px solid var(--accent); } .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn--ghost { background: transparent; color: var(--white); border: 1px solid var(--gold); } .btn--ghost:hover { background: var(--gold); color: var(--black); border-color: var(--gold); } .btn--lg { padding: 20px 36px; font-size: 14px; } .btn__arrow { font-size: 16px; line-height: 1; } /* --------- Section container --------- */ .section { padding: var(--pad-y) var(--pad-x); position: relative; } .section--tight { padding-block: clamp(40px, 5vw, 80px); } .section--dark { background: var(--black); } .section--panel { background: var(--charcoal); } .section--oxblood { background: var(--oxblood); } .section + .section { border-top: var(--border-gold-dim); } .section-head { max-width: 900px; margin-bottom: clamp(32px, 4vw, 56px); } .section-head .eyebrow { display: block; } /* --------- Hero (Home) --------- Desktop: full-viewport, content vertically centered, jumpstrip absolutely pinned to the bottom. Mobile: normal document flow — content stacks tight to the top with the jumpstrip immediately below, no absolute positioning, no dead space, everything visible on first paint. */ .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; padding: clamp(48px, 8vw, 120px) var(--pad-x) 0; overflow: hidden; } .hero__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 200px; /* room for the absolute jumpstrip on desktop */ } /* Hero photo — Laban positioned on the right, fully faded into black on all edges so the raw photo's brick + door background disappears into the hero canvas. Absolute so it doesn't affect the body layout. */ .hero__photo { position: absolute; top: 40px; right: 0; bottom: 200px; /* clear the jumpstrip on desktop */ width: 45%; max-width: 560px; z-index: 1; pointer-events: none; overflow: hidden; } .hero__photo img { width: 100%; height: 100%; object-fit: contain; object-position: right center; /* Slight darken + desaturate so the brick/door recede but Laban stays clearly readable — this is a hero photo, not a texture. */ filter: brightness(0.88) contrast(1.05) saturate(0.9); /* Feathered edges — soft radial mask centered on Laban so all four edges fade into the black canvas with no visible rectangle seam. */ -webkit-mask-image: radial-gradient( ellipse 70% 82% at 60% 50%, #000 40%, rgba(0,0,0,0.75) 62%, transparent 100% ); mask-image: radial-gradient( ellipse 70% 82% at 60% 50%, #000 40%, rgba(0,0,0,0.75) 62%, transparent 100% ); } /* Extra hard fade on the LEFT edge so the title stays crisp */ .hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--black) 0%, rgba(13,13,13,0.6) 20%, transparent 45%); pointer-events: none; } /* Sit hero title above the photo on desktop */ .hero--with-photo .hero__body { position: relative; z-index: 2; } @media (max-width: 900px) { .hero__photo { position: relative; width: 100%; max-width: none; height: 320px; bottom: auto; margin: 0 0 24px; } .hero__photo img { object-position: center 20%; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); } .hero__photo::after { display: none; } } .hero__ghost { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 220px; font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px, 9vw, 140px); letter-spacing: 0.02em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.14); text-stroke: 1px rgba(255,255,255,0.14); white-space: nowrap; pointer-events: none; user-select: none; } .hero__title { font-size: clamp(72px, 14vw, 220px); color: var(--accent); line-height: 0.86; position: relative; z-index: 2; } .hero__sub { margin-top: 24px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: clamp(12px, 1.4vw, 14px); letter-spacing: 0.28em; text-transform: uppercase; color: var(--white); position: relative; z-index: 2; } .hero__cta { margin-top: 28px; position: relative; z-index: 2; } .hero__jumpstrip { position: absolute; left: 0; right: 0; bottom: 0; border-top: var(--border-gold-dim); display: grid; grid-template-columns: repeat(4, 1fr); background: var(--black); } .hero__jumpstrip a { padding: 28px clamp(20px, 2.5vw, 40px); border-left: var(--border-gold-dim); display: flex; flex-direction: column; gap: 6px; transition: background .18s ease; } .hero__jumpstrip a:first-child { border-left: none; } .hero__jumpstrip a:hover { background: rgba(194,159,83,0.06); } .hero__jumpstrip .num { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.28em; color: var(--gold); text-transform: uppercase; } .hero__jumpstrip .lbl { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.04em; color: var(--white); } /* Mobile: kill the absolute-positioned jumpstrip. Un-fix the hero body padding, put the strip in normal flow directly under the content, and drop 4-across to 2×2 tiles. */ @media (max-width: 900px) { .hero { min-height: 0; padding: 24px var(--pad-x) 0; } .hero__body { flex: 0 0 auto; justify-content: flex-start; padding-bottom: 32px; } .hero__ghost { display: none; } .hero__jumpstrip { position: static; grid-template-columns: repeat(2, 1fr); } .hero__jumpstrip a { padding: 20px 16px; } .hero__jumpstrip a:nth-child(3) { border-left: none; border-top: var(--border-gold-dim); } .hero__jumpstrip a:nth-child(4) { border-top: var(--border-gold-dim); } .hero__jumpstrip .lbl { font-size: 18px; } .hero__title { font-size: clamp(56px, 16vw, 96px); line-height: 0.9; } .hero__cta { margin-top: 24px; } .hero__cta .btn { padding: 16px 26px; font-size: 12px; } } /* --------- Book + Podcast split --------- */ .split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .split-2 > * { padding: clamp(48px, 6vw, 96px) clamp(32px, 5vw, 72px); } .split-2 > * + * { border-left: var(--border-gold-dim); } @media (max-width: 900px) { .split-2 { grid-template-columns: 1fr; } .split-2 > * + * { border-left: none; border-top: var(--border-gold-dim); } } /* Unified media block — shared by book + podcast columns. Vertical stack (art on top, then text). Both sides use the SAME grid rhythm so the eyebrow, title, meta, copy, and CTA land at matching Y positions across the divider. */ .media-block { display: grid; grid-template-rows: auto 1fr auto; gap: 32px; min-height: 640px; max-width: 460px; margin: 0 auto; } .media-block__art { width: 100%; max-width: 260px; } /* Variant used on the home Podcast column when the "Become Your Own Superhero" cover art is removed — body fills the whole block, vertically centered so its title still aligns with the book column. */ .media-block--no-art { grid-template-rows: 1fr; justify-content: center; } .media-block--no-art .media-block__body { justify-content: center; } /* --------- Media row (full-width horizontal book + podcast) --------- Replaces the old two-column split with two stacked rows, each with art on the left and text content on the right. */ .media-row { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .media-row__art { width: 100%; } .media-row__art .book-block__cover, .media-row__art .pod-art { aspect-ratio: 3 / 4.2; width: 100%; max-width: 300px; } .media-row__body { display: flex; flex-direction: column; max-width: 640px; } .media-row__body .eyebrow { margin-bottom: 14px; } .media-row__title { color: var(--accent); font-size: clamp(48px, 6vw, 88px); line-height: 0.92; margin: 0; } .media-row__meta { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; } .media-row__review { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white); } .media-row__copy { margin: 20px 0 0; color: rgba(255,255,255,0.78); font-size: 16px; line-height: 1.65; max-width: 60ch; } .media-row__cta { margin-top: 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .media-row__platforms { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); } /* Variant: no art column — body takes the full width */ .media-row--no-art { grid-template-columns: 1fr; } .media-row--no-art .media-row__body { max-width: 780px; } /* Tolevita product tile — real product photo */ .tolevita-tile { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 16px; } .tolevita-tile__photo { aspect-ratio: 1; width: 100%; background: var(--white); border: 1px solid var(--gold); padding: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .tolevita-tile__photo img { width: 100%; height: 100%; object-fit: contain; } .tolevita-tile__caption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 4px 0; } .tolevita-tile__caption-name { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--white); } .tolevita-tile__caption-meta { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } /* Variant: reverse — text on the left, art on the right */ .media-row--reverse { grid-template-columns: 1fr minmax(200px, 300px); } .media-row--reverse .media-row__body { margin-left: 0; } @media (max-width: 700px) { .media-row--reverse { grid-template-columns: 1fr; } /* On mobile, keep the visual order: cover first, then text */ .media-row--reverse .media-row__art { order: -1; } } /* Stack on narrow screens */ @media (max-width: 700px) { .media-row { grid-template-columns: 1fr; gap: 32px; } .media-row__art .book-block__cover, .media-row__art .pod-art { max-width: 220px; } } .media-block__body { display: flex; flex-direction: column; } .media-block__body .eyebrow { margin-bottom: 14px; } .media-block__title { color: var(--accent); font-size: clamp(44px, 4.6vw, 68px); line-height: 0.92; margin: 0; } .media-block__meta { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; min-height: 44px; } .media-block__review { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white); } .media-block__copy { margin: 18px 0 0; color: rgba(255,255,255,0.78); font-size: 15px; line-height: 1.6; max-width: 42ch; min-height: 96px; } .media-block__cta { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .media-block__platforms { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); } /* Book cover */ .book-block__cover { aspect-ratio: 3 / 4.2; width: 100%; background: var(--charcoal); border: var(--border-gold-dim); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .book-block__cover img { width: 100%; height: 100%; object-fit: cover; } .book-block__cover .placeholder { font-family: 'JetBrains Mono', 'Menlo', monospace; font-size: 11px; color: var(--gold); text-align: center; padding: 20px; letter-spacing: 0.1em; line-height: 1.6; } .book-block__stars { color: var(--gold); letter-spacing: 4px; font-size: 16px; } /* Podcast art — matches book cover footprint */ .pod-block__stat { font-family: 'Bebas Neue', sans-serif; font-size: 40px; color: var(--white); letter-spacing: 0.03em; line-height: 1; } .pod-art { aspect-ratio: 3 / 4.2; width: 100%; background: var(--oxblood); border: 1px solid var(--gold); padding: 32px 24px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; } .pod-art__title { font-family: 'Bebas Neue', sans-serif; color: var(--white); font-size: clamp(24px, 2.4vw, 32px); line-height: 1; letter-spacing: 0.03em; margin-top: auto; margin-bottom: auto; } .pod-art__bolt { color: var(--gold); font-size: 36px; } .pod-waveform { margin-top: 20px; display: flex; align-items: center; gap: 2px; height: 36px; max-width: 100%; } .pod-waveform span { display: block; width: 2px; background: var(--accent); border-radius: 0; } /* --------- Testimonials --------- */ .testimonials { text-align: center; } .testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } @media (max-width: 900px) { .testimonials__grid { grid-template-columns: 1fr; } } .tcard { background: var(--oxblood); border: 1px solid var(--gold); padding: 36px 32px 32px; text-align: left; position: relative; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; } .tcard__quote-mark { font-family: 'Bebas Neue', sans-serif; color: var(--accent); font-size: 72px; line-height: 0.6; margin-bottom: 20px; display: block; } .tcard__quote { font-family: 'Bebas Neue', sans-serif; font-size: 28px; line-height: 1.02; letter-spacing: 0.02em; color: var(--white); text-transform: uppercase; margin: 0 0 24px; } .tcard__attr { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } /* --------- Manifesto --------- */ .manifesto { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: center; } @media (max-width: 900px) { .manifesto { grid-template-columns: 1fr; gap: 40px; } } .manifesto__title { color: var(--accent); } .manifesto__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .manifesto__list li { display: grid; grid-template-columns: 84px 1px 1fr; gap: 24px; align-items: center; padding: 14px 0; } .manifesto__list li + li { border-top: var(--border-gold-dim); } .manifesto__num { font-family: 'Bebas Neue', sans-serif; font-size: 44px; color: var(--gold); line-height: 1; letter-spacing: 0.04em; } .manifesto__rule { background: var(--gold); height: 32px; width: 1px; } .manifesto__truth { font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: var(--white); letter-spacing: 0.03em; line-height: 1; } /* --------- Coaching / Speaking teaser cards --------- */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } @media (max-width: 900px) { .duo { grid-template-columns: 1fr; } } .duo > * + * { border-left: var(--border-gold-dim); } @media (max-width: 900px) { .duo > * + * { border-left: none; border-top: var(--border-gold-dim); } } .duo-card { padding: clamp(48px, 6vw, 88px) clamp(32px, 5vw, 72px); background: var(--black); display: flex; flex-direction: column; min-height: 420px; transition: background .2s ease; } .duo-card:hover { background: #121212; } .duo-card__title { color: var(--accent); font-size: clamp(48px, 5vw, 72px); } .duo-card__body { color: rgba(255,255,255,0.78); margin: 20px 0 auto; max-width: 42ch; } .duo-card__cta { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-top: 32px; } .duo-card__cta::after { content: " →"; } /* --------- Footer CTA / Newsletter --------- */ .footer-cta { padding: clamp(60px, 8vw, 120px) var(--pad-x); text-align: center; border-top: var(--border-gold-dim); } .footer-cta__title { color: var(--white); font-size: clamp(48px, 7vw, 96px); } .footer-cta__title em { color: var(--accent); font-style: normal; } .footer-cta__sub { max-width: 52ch; margin: 20px auto 36px; color: rgba(255,255,255,0.75); } .newsletter { display: flex; max-width: 520px; margin: 0 auto; border: 1px solid var(--gold); } .newsletter input { flex: 1; padding: 16px 20px; background: transparent; border: none; color: var(--white); font-family: 'Inter', sans-serif; font-size: 14px; letter-spacing: 0.04em; outline: none; } .newsletter input::placeholder { color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; } .newsletter button { padding: 0 24px; background: var(--accent); color: var(--accent-ink); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; transition: background .18s ease, color .18s ease; } .newsletter button:hover { background: var(--accent-hover); } /* --------- Site footer --------- */ .site-footer { padding: 48px var(--pad-x) 32px; border-top: var(--border-gold-dim); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); } .site-footer a { color: rgba(255,255,255,0.75); } .site-footer a:hover { color: var(--gold); } .site-footer__nav { display: flex; gap: 24px; flex-wrap: wrap; } /* --------- Page hero (interior) --------- */ .page-hero { padding: clamp(80px, 10vw, 160px) var(--pad-x) clamp(48px, 6vw, 96px); border-bottom: var(--border-gold-dim); } .page-hero__eyebrow { color: var(--gold); } .page-hero__title { color: var(--accent); font-size: clamp(64px, 10vw, 160px); } .page-hero__sub { color: rgba(255,255,255,0.85); font-size: 18px; margin-top: 24px; max-width: 60ch; } /* --------- Two-column feature --------- */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; } @media (max-width: 900px) { .feature { grid-template-columns: 1fr; } } .feature--reverse > *:first-child { order: 2; } @media (max-width: 900px) { .feature--reverse > *:first-child { order: 0; } } .portrait { aspect-ratio: 4 / 5; background: var(--charcoal); border: var(--border-gold-dim); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', 'Menlo', monospace; font-size: 11px; color: var(--gold); letter-spacing: 0.14em; text-align: center; padding: 24px; position: relative; overflow: hidden; background-image: repeating-linear-gradient( 135deg, transparent 0 8px, rgba(194,159,83,0.05) 8px 9px ); } .portrait img { width: 100%; height: 100%; object-fit: cover; } /* --------- Bullet list (services etc) --------- */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } @media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } } .pillar { border: 1px solid var(--gold); padding: 32px 28px; background: var(--black); min-height: 240px; display: flex; flex-direction: column; transition: background .22s ease, border-color .22s ease; cursor: default; } .pillar__num { font-family: 'Bebas Neue', sans-serif; font-size: 44px; color: var(--gold); line-height: 1; margin-bottom: 20px; transition: color .22s ease; } .pillar__title { font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: var(--white); letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 14px; transition: color .22s ease; } .pillar__body { font-size: 15px; color: rgba(255,255,255,0.75); line-height: 1.6; transition: color .22s ease; } /* Hover — background fills gold, digits invert to white, body flips to ink black */ .pillar:hover { background: var(--gold); border-color: var(--gold); } .pillar:hover .pillar__num { color: var(--white); } .pillar:hover .pillar__title { color: var(--black); } .pillar:hover .pillar__body { color: rgba(13, 13, 13, 0.82); } /* --------- Not-for-you list --------- */ .not-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 40px; margin-top: 32px; list-style: none; padding: 0; } @media (max-width: 700px) { .not-list { grid-template-columns: 1fr; } } .not-list li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: var(--border-gold-dim); font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.82); } .not-list li::before { content: "×"; color: var(--accent); font-family: 'Bebas Neue', sans-serif; font-size: 22px; line-height: 1; flex: 0 0 14px; } .for-list { list-style: none; padding: 0; margin: 32px 0 0; } .for-list li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: var(--border-gold-dim); font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.85); } .for-list li::before { content: ""; width: 8px; height: 8px; background: var(--gold); flex: 0 0 8px; margin-top: 8px; transform: rotate(45deg); } /* --------- Contact form --------- */ .form { display: grid; gap: 20px; max-width: 640px; } .form label { display: block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .form input, .form textarea, .form select { width: 100%; background: transparent; border: 1px solid rgba(194,159,83,0.5); padding: 14px 16px; color: var(--white); font-family: 'Inter', sans-serif; font-size: 15px; border-radius: 0; outline: none; transition: border-color .18s ease; } .form input:focus, .form textarea:focus, .form select:focus { border-color: var(--gold); } .form textarea { min-height: 140px; resize: vertical; } .form-note { font-size: 12px; color: rgba(255,255,255,0.55); letter-spacing: 0.06em; margin-top: 4px; } /* --------- Utility --------- */ .stack-sm > * + * { margin-top: 12px; } .stack-md > * + * { margin-top: 20px; } .stack-lg > * + * { margin-top: 32px; } .center { text-align: center; } .hide-mobile { } @media (max-width: 700px) { .hide-mobile { display: none; } } .hide-desktop { display: none; } @media (max-width: 900px) { .hide-desktop { display: initial; } } .rule-gold { border: 0; border-top: 1px solid var(--gold); opacity: 0.6; margin: 0; } /* --------- Podcast page --------- */ .pod-hero { display: block; margin-top: 24px; } .pod-hero__art { margin-top: 48px; } .pod-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; max-width: 640px; border: 1px solid rgba(194,159,83,0.4); background: var(--black); } .pod-stat { padding: 28px 16px; text-align: center; border-left: 1px solid rgba(194,159,83,0.4); } .pod-stat:first-child { border-left: none; } .pod-stat__num { font-family: 'Bebas Neue', sans-serif; color: var(--accent); font-size: clamp(36px, 3.4vw, 52px); line-height: 1; letter-spacing: 0.03em; } .pod-stat__unit { font-size: 0.5em; color: var(--white); margin-left: 2px; } .pod-stat__lbl { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 8px; } /* Subscribe grid (dedicated section) */ .pod-subs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1040px; margin: 0 auto; } @media (max-width: 900px) { .pod-subs { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .pod-subs { grid-template-columns: 1fr; } } .pod-subs-section .section-head { max-width: none; } /* Standout Substack tile — sits centered below the 4-tile grid */ .pod-subs__standout { margin: 20px auto 0; max-width: 1040px; display: flex; justify-content: center; } .pod-sub--wide { display: grid; grid-template-columns: 32px 1fr auto; gap: 20px; align-items: center; width: 100%; max-width: 520px; padding: 20px 24px; background: var(--oxblood); border: 1px solid var(--gold); } .pod-sub--wide:hover { background: var(--black); border-color: var(--gold); } .pod-sub--wide .pod-sub__icon { color: #FF6719; } /* Substack orange */ .pod-sub__badge { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); padding: 6px 10px; border: 1px solid rgba(194,159,83,0.5); } @media (max-width: 500px) { .pod-sub--wide { grid-template-columns: 32px 1fr; } .pod-sub__badge { grid-column: 1 / -1; justify-self: start; } } .pod-sub { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--charcoal); border: 1px solid rgba(194,159,83,0.4); transition: background .18s ease, border-color .18s ease; } .pod-sub:hover { background: var(--oxblood); border-color: var(--gold); } .pod-sub__icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--sub, var(--gold)); flex-shrink: 0; } .pod-sub__icon svg { width: 28px; height: 28px; } .pod-sub__lbl { display: block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 3px; } .pod-sub__name { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 0.04em; color: var(--white); } /* Episode list */ .episodes { display: flex; flex-direction: column; border-top: var(--border-gold-dim); } .ep { display: grid; grid-template-columns: 120px 1fr auto; gap: 32px; align-items: center; padding: 28px 0; border-bottom: var(--border-gold-dim); transition: background .18s ease; } .ep:hover { background: rgba(194,159,83,0.03); } .ep__num { font-family: 'Bebas Neue', sans-serif; color: var(--gold); font-size: 28px; letter-spacing: 0.06em; line-height: 1; } .ep__body { min-width: 0; } .ep__title { font-family: 'Bebas Neue', sans-serif; color: var(--white); font-size: clamp(22px, 2.2vw, 28px); letter-spacing: 0.03em; line-height: 1.05; margin: 0 0 10px; text-transform: uppercase; } .ep__desc { color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.5; margin: 0 0 12px; max-width: 68ch; } .ep__meta { display: flex; align-items: center; gap: 10px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); } .ep__meta a { color: var(--gold); } .ep__meta a:hover { color: var(--white); } .ep__play { width: 56px; height: 56px; border: 1px solid var(--gold); background: var(--black); color: var(--gold); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; transition: background .18s ease, color .18s ease; flex-shrink: 0; } .ep__play:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } @media (max-width: 700px) { .ep { grid-template-columns: 60px 1fr; gap: 16px; } .ep__num { font-size: 20px; } .ep__play { grid-column: 1 / -1; justify-self: end; } } /* --------- Theme toggle — REMOVED (gold committed as primary). --------- */ .theme-toggle { display: none !important; } ._retired-theme-toggle { position: fixed; right: 20px; bottom: 20px; z-index: 50; opacity: 0.55; transition: opacity .2s ease; display: inline-flex; align-items: center; gap: 0; padding: 4px; background: rgba(13, 13, 13, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--gold); font-family: 'Inter', sans-serif; } .theme-toggle__opt { padding: 8px 14px; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); cursor: pointer; transition: color .18s ease, background .18s ease; display: inline-flex; align-items: center; gap: 8px; border-radius: 0; } .theme-toggle:hover { opacity: 1; } .theme-toggle__opt:hover { color: var(--white); } .theme-toggle__opt[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } .theme-toggle__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .theme-toggle__dot--red { background: #A11824; } .theme-toggle__dot--gold { background: #C29F53; } @media (max-width: 600px) { .theme-toggle { right: 12px; bottom: 12px; } .theme-toggle__opt { padding: 6px 10px; font-size: 9px; letter-spacing: 0.2em; } } /* --------- Hub / bio-link page --------- The linktree-style front door — vertical stack of cards, mobile-first, centered on the black canvas. No sidebar. */ .hub-body { overflow-x: hidden; } .hub { max-width: 560px; margin: 0 auto; padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 40px) 48px; min-height: 100vh; display: flex; flex-direction: column; gap: 28px; } /* Header block */ .hub__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: clamp(20px, 5vw, 40px); } .hub__avatar { width: clamp(96px, 20vw, 128px); height: clamp(96px, 20vw, 128px); border-radius: 50%; border: 2px solid var(--gold); padding: 4px; overflow: hidden; margin-bottom: 12px; } .hub__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .hub__brand { font-family: 'Pinyon Script', cursive; color: var(--gold); font-size: clamp(40px, 6vw, 52px); line-height: 1; margin: 4px 0 2px; } .hub__brand--small { font-size: 32px; opacity: 0.85; } .hub__title { font-family: 'Bebas Neue', sans-serif; color: var(--white); font-size: clamp(28px, 5vw, 36px); letter-spacing: 0.03em; margin: 4px 0 0; text-transform: uppercase; } .hub__eyebrow { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin: 6px 0 0; } .hub__bio { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.78); margin: 12px 0 0; max-width: 40ch; } /* Website hero button — top-of-page primary CTA Bigger, bolder than the other hub cards. Gold fill, dark ink, drops to a subtle hover lift. */ .hub-website { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; grid-template-areas: "eyebrow arrow" "title arrow" "meta arrow"; align-items: center; gap: 2px 20px; padding: 22px 24px; background: var(--gold); color: var(--black); border: 1px solid var(--gold); transition: background .18s ease, transform .18s ease, box-shadow .18s ease; } .hub-website:hover { background: var(--gold-hover); transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(194, 159, 83, 0.4); } .hub-website__eyebrow { grid-area: eyebrow; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(13, 13, 13, 0.7); } .hub-website__title { grid-area: title; font-family: 'Bebas Neue', sans-serif; font-size: clamp(26px, 5vw, 32px); letter-spacing: 0.03em; text-transform: uppercase; color: var(--black); line-height: 1; margin: 2px 0; } .hub-website__meta { grid-area: meta; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.16em; color: rgba(13, 13, 13, 0.65); text-transform: lowercase; } .hub-website__arrow { grid-area: arrow; font-family: 'Bebas Neue', sans-serif; font-size: 36px; color: var(--black); line-height: 1; } /* Section grouping */ .hub__section { display: flex; flex-direction: column; gap: 10px; } .hub__section-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); padding: 8px 4px 4px; } /* Link card */ .hub-card { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center; padding: 12px; background: var(--charcoal); border: 1px solid rgba(194, 159, 83, 0.35); transition: background .18s ease, border-color .18s ease, transform .18s ease; min-height: 84px; } .hub-card:hover { background: var(--oxblood); border-color: var(--gold); transform: translateY(-1px); } .hub-card__thumb { width: 72px; height: 72px; overflow: hidden; background: var(--black); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hub-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .hub-card__thumb--icon { border: 1px solid var(--gold); color: var(--gold); font-family: 'Bebas Neue', sans-serif; font-size: 28px; line-height: 1; letter-spacing: 0.02em; } .hub-card__thumb--generated { background: var(--oxblood); border: 1px solid var(--gold); flex-direction: column; padding: 8px; text-align: center; } .hub-card__thumb-title { font-family: 'Bebas Neue', sans-serif; color: var(--white); font-size: 11px; line-height: 1; letter-spacing: 0.03em; margin-bottom: 4px; } .hub-card__thumb-bolt { color: var(--gold); font-size: 16px; line-height: 1; } .hub-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .hub-card__body--center { align-items: center; text-align: center; padding: 8px 0; } .hub-card__eyebrow { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .hub-card__title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--white); letter-spacing: 0.01em; } .hub-card__meta { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); line-height: 1.4; } .hub-card__arrow { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: var(--gold); padding-right: 8px; line-height: 1; } /* Feature variant — larger, more emphasis */ .hub-card--feature { grid-template-columns: 96px 1fr auto; min-height: 108px; padding: 14px; background: var(--oxblood); border-color: var(--gold); } .hub-card--feature .hub-card__thumb { width: 96px; height: 96px; } .hub-card--feature .hub-card__title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); line-height: 1; margin: 2px 0; } .hub-card--feature .hub-card__eyebrow { color: var(--gold); } /* Ghost variant — for "explore the full site" */ .hub-card--ghost { grid-template-columns: 1fr auto; background: transparent; border-color: var(--gold); padding: 20px 16px; } .hub-card--ghost:hover { background: rgba(194, 159, 83, 0.05); } .hub-card--ghost .hub-card__title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--white); } /* Social icon row */ .hub__socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 12px 0; } .hub__socials a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(194, 159, 83, 0.4); color: var(--white); transition: color .18s ease, background .18s ease, border-color .18s ease; } .hub__socials a:hover { color: var(--black); background: var(--gold); border-color: var(--gold); } .hub__socials svg { width: 18px; height: 18px; fill: currentColor; } /* Hub footer */ .hub__footer { text-align: center; padding: 24px 0 12px; color: rgba(255, 255, 255, 0.4); font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.12em; } .hub__footer p { margin: 8px 0 0; } /* Compact adjustments on very small screens */ @media (max-width: 420px) { .hub-card { grid-template-columns: 60px 1fr auto; gap: 12px; padding: 10px; min-height: 74px; } .hub-card__thumb { width: 60px; height: 60px; } .hub-card--feature { grid-template-columns: 80px 1fr auto; } .hub-card--feature .hub-card__thumb { width: 80px; height: 80px; } .hub-card--feature .hub-card__title { font-size: 20px; } } /* --------- Compliance disclaimer --------- */ .disclaimer { padding: 20px var(--pad-x); background: var(--charcoal); font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); text-align: center; border-top: var(--border-gold-dim); }