/* Theme Name: Martini Fisher Child Theme URI: https://martinifisher.com Description: Child theme for Astra — custom styles + landing layout Author: Martini Fisher Template: astra Version: 1.1 */ /* ============================================================ Base / Layout ============================================================ */ html, body { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } .site-main, .page-wrap, main { flex: 1 0 auto; } .site-footer { margin-top: auto; } a { text-decoration: none !important; } /* ============================================================ Header (from your header.php classes) ============================================================ */ .mf-header{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:30px 35px 5px; border-bottom: 1px solid #4a1516; position: relative; z-index: 1000; background: #fff; } .mf-header__brand { display:flex; align-items:center; gap:14px; } .mf-header__logo img { height:100px; width:auto; display:block; } .mf-header__titlewrap { line-height:1.1; } .mf-header__title { font-size:2.5rem;font-family: "Cinzel", serif; margin:0; } .mf-header__tagline { margin:2px 0 0; opacity:.8;font-family: "Cinzel", serif; font-size:1.4rem; } .mf-nav{ display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center; } .mf-nav a{ display:inline-block; padding:.45rem .75rem; border:1px solid #ddd; border-radius:8px; font-size:.92rem; color:#222; } .mf-nav a:hover{ background:#f6f6f6; } /* menu CTA class */ .mf-nav .btn-gold, .mf-header a.btn-gold{ border:none; background: linear-gradient(180deg,#d9c16a 0%,#b89d45 100%); color:#111 !important; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:.6rem 1rem; border-radius:999px; } /* Dropdown safety */ .mf-nav li { position: relative; } .mf-nav li ul { position:absolute; z-index:2000; background:#fff; border:1px solid #e6e6e6; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.08); padding:8px; margin-top:8px; list-style:none; } .mf-nav li > ul li a{ display:block; padding:8px 12px; border-radius:10px; border:none; } .mf-nav li > ul li a:hover { background: rgba(16,61,110,.08); } /* ============================================================ Top ribbon ============================================================ */ .top-ribbon { background:#d0a13b; padding:.4rem 0; text-align:center; font-weight:600; font-size:.9rem; } .top-ribbon a { color:#fff; } /* ============================================================ Split Hero (Mockup Match) ============================================================ */ .dt-hero{ display:grid; grid-template-columns: 1.05fr 1fr; background:#0b0b0c; color:#eee; } .dt-hero__media{ position:relative; overflow:hidden; } .dt-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; } .dt-hero__copy{ padding: clamp(22px, 4vw, 64px); display:flex; flex-direction:column; justify-content:center; gap: 14px; } .dt-hero__kicker{ margin:0; opacity:.92; font-size: 1.05rem; letter-spacing:.02em; } .dt-hero__emphasis{ margin:0; font-style: italic; opacity:.95; } .dt-hero__callout{ margin:0; opacity:.98; } .dt-hero__cta{ align-self:flex-start; margin-top: 10px; padding: 14px 22px; border-radius: 999px; background: linear-gradient(180deg,#d9c16a 0%,#b89d45 100%); color:#111 !important; font-weight:800; text-transform:uppercase; letter-spacing:.06em; box-shadow: inset 0 2px 4px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.18); } .dt-hero__cta:hover{ filter: brightness(1.05); transform: translateY(-1px); } @media (max-width: 900px){ .dt-hero{ grid-template-columns:1fr; } .dt-hero__media{ min-height: 360px; } .dt-hero__cta{ align-self: center; } .dt-hero__copy{ text-align:center; } }


/* ============================================================ Marquee ============================================================ */ .marquee{ --speed: 20s; overflow: hidden; white-space: nowrap; background: #ffde83; font: 1rem/1.5 "Montserrat", sans-serif; display: flex; } .marquee__text{ flex: 0 0 auto; animation: scroll var(--speed) linear infinite; } @keyframes scroll{ 0% { transform: translateX(100%); } 100% { transform: translateX(-200%); } } 

/* ============================================================ Udemy Banner ============================================================ */ .udemy-banner { background: linear-gradient(135deg, #1b1b1b, #222c32); color: #f2d28b; text-align: center; padding: 3rem 1rem; border-top: 4px solid #a67c00; } .udemy-banner-inner { max-width:900px; margin:0 auto; } .udemy-headline { color:#cbb15a; font-size:1.8rem; margin-bottom:.5rem; } .udemy-tagline { font-size:1.05rem; color:#eee; margin-bottom:1.2rem; } .udemy-btn { display:inline-block; background:#d0a13b; color:#fff; padding:.7rem 1.4rem; border-radius:10px; font-weight:700; transition:.25s; } .udemy-btn:hover { background:#f2d28b; color:#111; transform:translateY(-2px); } @media(max-width:700px){ .udemy-headline{ font-size:1.4rem; } } 

/* ============================================================ Bio Split ============================================================ */ .bio-split{ display:flex; flex-wrap:wrap; width:100%; padding:0; background:#fff; } .bio__text{ flex:1 1 50%; background:#fff; padding:2rem 2rem; display:flex; align-items:flex-start; flex-direction:column; justify-content:center; } .bio__photo{ flex:1 1 50%; overflow:hidden; } .bio__photo img{ display:block; width:100%; height:100%; object-fit:cover; } @media (max-width: 768px){ .bio__text, .bio__photo{ flex:1 1 100%; min-height:40vh; } .bio__text{ padding:2rem; text-align:center; align-items:center; } } 

/* ============================================================ Quoted-in strip (infinite) ============================================================ */ .quoted{ background:white; text-align:center; border-top:1px solid #be0202; border-bottom:1px solid #be0202; padding-bottom:45px; } .quoted__title{ font:600 1.3rem/1 "Playfair Display",serif; letter-spacing:.25em; margin:0; color: #421416; padding:35px 5px 5px 10px; } .quoted__marquee{ overflow:hidden; position:relative; } .quoted__track{ --speed: 28s; --h: 42px; display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 0; padding: 0; margin: 0; list-style: none; width: max-content; white-space: nowrap; animation: quoted-scroll var(--speed) linear infinite; } .quoted__track li{ flex: 0 0 auto; } .quoted__track img{ display:block; height: var(--h); width:auto; object-fit:contain; } @keyframes quoted-scroll{ from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .quoted__track{ animation:none; } } 

/* ============================================================ Latest Teasers (From Private Collection) ============================================================ */ .home-teasers{ background:#fff; padding: 3rem 1rem 2.5rem; } .home-teasers__inner{ max-width:1150px; margin:0 auto; } .home-teasers__title{ font: 700 2.1rem/1.1 "Playfair Display", serif; margin: 0 0 .35rem; text-align:center; } .home-teasers__subtitle{ text-align:center; margin: 0 0 1.5rem; color:#b61c1c; font-weight:700; } .home-teasers__grid{ display:grid; gap:1.5rem; margin: 50px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .teaser-card{ background:#fff; border:1px solid #e9e9ee; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 6px 14px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease; } .teaser-card:hover{ transform: translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,.10); } .teaser-thumb img{ display:block; width:100%; height:auto; aspect-ratio: 16/9; object-fit: cover; } .teaser-thumb--placeholder{ width:100%; aspect-ratio: 16/9; background:#eee; } .teaser-body{ padding: 1rem 1.1rem 1.2rem; } .teaser-title{ margin:0 0 .35rem; font-size:1.05rem; line-height:1.25; } .teaser-title a:hover{ text-decoration: underline !important; } .teaser-excerpt{ margin:0 0 .85rem; color:#374151; line-height:1.6; } .teaser-cta{ align-self:flex-start; display:inline-block; padding:.5rem .95rem; border-radius: 999px; background:#111827; color:#fff !important; font-weight:700; } .teaser-cta:hover{ filter: brightness(1.08); } 

/* ============================================================ Offers Section (curtain) ============================================================ */ .offers{ background-color:#3f1d28; padding:4rem 1rem 5rem; text-align:center; color:#fff; position:relative; } .offers::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:0; } .offers__title{ font:700 2.4rem/1 "Playfair Display",serif; letter-spacing:.06em; margin:0 0 .5rem; position:relative; z-index:1; color:#fff; } .offers__subtitle{ font:300 1rem/1.4 "Montserrat",sans-serif; margin:0 0 2.5rem; position:relative; z-index:1; color:#e6e6e6; } .offers__grid{ display:flex; flex-wrap:wrap; margin: 50px; gap:2rem; justify-content:center; position:relative; z-index:1; } .offer-card{ background:#fafafa; max-width:340px; flex:1 1 280px; display:flex; flex-direction:column; align-items:center; box-shadow:0 6px 12px rgba(0,0,0,.25); border-radius: 25px; overflow:hidden; } .offer-card img{ width:100%; height:180px; object-fit:cover; } .offer-card h3{ font:700 1.45rem/1.2 "Playfair Display",serif; text-transform:uppercase; margin:1.25rem 0 .5rem; color:#000; } .offer-card p {
    font: 400 1.3rem / 1.45 "calibri", sans-serif;
    padding: 1.5rem 1.2rem 1.6rem;
    color: #000; } 

.oc-left{transition:transform 0.3s ease; background-color:#b09c8b;}
.oc-left:hover{transform: scale(1.1);}

.oc-mid{transition:transform 0.3s ease;}
.oc-mid:hover{transform: scale(1.2);}

.oc-right{transition:transform 0.3s ease;background-color:#b09c8b;}
.oc-right:hover{transform: scale(1.1);}

/* global gold pill (used across site) */ .btn-gold{ display:inline-block; margin-bottom:2rem; padding:.75rem 2.2rem; border-radius:50px; background: linear-gradient(180deg,#d9c16a 0%,#b89d45 100%); color:#111 !important; font-weight:800; max-width:250px; text-transform:uppercase; letter-spacing:.05em; box-shadow: inset 0 2px 4px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.18); transition: transform .2s ease, box-shadow .2s ease; } .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.35); } .btn-lg{ padding:.9rem 3.2rem; font-size:1.05rem; } @media (max-width:600px){ .offers__title{ font-size:1.9rem; } .offer-card img{ height:150px; } }

/* ============================================================ Footer (from your footer.php) ============================================================ */ .site-footer{ background-color:#3f1d28; padding:4rem 1rem 3rem; color:#fff; text-align:center; } .footer__inner{ max-width:960px; margin:0 auto; } .footer__title{ font:700 2.1rem/1 "Playfair Display",serif; color:#fff; letter-spacing:.05em; margin:0 0 2rem; } .footer__social{ display:flex; justify-content:center; gap:1.2rem; margin-bottom:2.25rem; } .footer__social a{ width:80px; height:80px; background:#111; border:1px solid #d9c16a; border-radius:10px; display:flex; align-items:center; justify-content:center; transition:background .25s ease, transform .25s ease; } .footer__social a img{ width:64px; height:64px; filter:invert(1); } .footer__social a:hover{ background:#d9c16a; transform:translateY(-2px); } .footer__social a:hover img{ filter:none; } .footer__copyright{ font:400 .9rem/1.4 "Montserrat",sans-serif; color:#ddd; }


/* ============================================================
   LANDING PAGE (page-landing.php)
   Single source of truth for the above-the-fold layout
============================================================ */

.page-template-page-landing{
  --mf-header-h: 82.5px;                 /* confirmed */
  --mf-quoted-h: clamp(96px, 10vh, 120px);
  --mf-marquee-h: 0px;                   /* set to 44px if enabled */
  --mf-hero-focus-y: 35%;                /* dead-space killer knob */
}

/* Remove Astra container constraints on landing */
.page-template-page-landing #primary,
.page-template-page-landing #content,
.page-template-page-landing .site-content,
.page-template-page-landing .ast-container,
.page-template-page-landing .site-main{
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.page-template-page-landing #mf-landing{
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* ---------- FOLD (Hero + Quoted, fits 1 screen) ---------- */
/* Use svh to avoid mobile browser UI causing jumps */
.page-template-page-landing #mf-landing .dt-fold{
  min-height: calc(100svh - var(--mf-header-h));
  display: flex;
  flex-direction: column;
	background: #0b0b0c;
	
}

/* Optional marquee fixed height */
.page-template-page-landing #mf-landing .marquee{
  flex: 0 0 var(--mf-marquee-h);
  height: var(--mf-marquee-h);
  margin: 0 !important;
}

/* Quoted strip fixed height */
.page-template-page-landing #mf-landing .quoted{
  flex: 0 0 var(--mf-quoted-h);
  height: var(--mf-quoted-h);
  display: grid;
  place-content: center;
  gap: 8px;

  background: #fff;
  margin: 0 !important;
  padding: 0 10px;

  /* keep borders if you want them, but they steal visual calm */
  border-top: 1px solid rgba(66,20,22,.25);
  border-bottom: 1px solid rgba(66,20,22,.25);
}

.page-template-page-landing #mf-landing .quoted__title{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1;
  letter-spacing: .28em;
  color: #421416;
  font: 700 1.05rem/1 "Playfair Display", serif;
}

.page-template-page-landing #mf-landing .quoted__marquee{
  overflow: hidden;
}

.page-template-page-landing #mf-landing .quoted__track{
  --speed: 26s;
  --h: 42px;

  display: inline-flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  width: max-content;
  animation: quoted-scroll var(--speed) linear infinite;
}

.page-template-page-landing #mf-landing .quoted__track li{ flex: 0 0 auto; }
.page-template-page-landing #mf-landing .quoted__track img{
  height: var(--h);
  width: auto;
  display: block;
  object-fit: contain;
}

/* Hero takes the remaining fold height */
.page-template-page-landing #mf-landing .dt-hero{
  flex: 1 1 auto;
  min-height: 0;               /* IMPORTANT: prevents forced extra space */
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: #0b0b0c;
  color: #eee;
}

/* Media panel: kill dead space by letting image crop */
.page-template-page-landing #mf-landing .dt-hero__media{
  min-height: 0;
  overflow: hidden;
}

.page-template-page-landing #mf-landing .dt-hero__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% var(--mf-hero-focus-y);
}

/* Copy panel */
.page-template-page-landing #mf-landing .dt-hero__copy{
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 3.2vw, 64px);
  gap: 14px;
  max-width: 720px;
}

.page-template-page-landing #mf-landing .dt-hero__kicker{
  margin: 0;
  opacity: .92;
  font-size: 1.05rem;
  letter-spacing: .02em;
}

.page-template-page-landing #mf-landing .dt-hero__copy p{
  margin: 0;
  line-height: 1.65;
  color: rgba(255,255,255,.92);
}

.page-template-page-landing #mf-landing .dt-hero__emphasis{
  font-style: italic;
  opacity: .95;
}

.page-template-page-landing #mf-landing .dt-hero__cta{
  align-self: flex-start;
  margin-top: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg,#d9c16a 0%,#b89d45 100%);
  color: #111 !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.32),
              inset 0 -2px 4px rgba(0,0,0,.22);
  transition: transform .15s ease, filter .15s ease;
}

.page-template-page-landing #mf-landing .dt-hero__cta:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* ---------- MOBILE ---------- */
@media (max-width: 900px){
  .page-template-page-landing{
    --mf-quoted-h: clamp(92px, 12vh, 110px);
    --mf-hero-focus-y: 30%;
  }

  .page-template-page-landing #mf-landing .dt-hero{
    grid-template-columns: 1fr;
  }

  .page-template-page-landing #mf-landing .dt-hero__media{
    height: 42vh;
  }

  .page-template-page-landing #mf-landing .dt-hero__copy{
    text-align: center;
    align-items: center;
    max-width: 100%;
  }

  .page-template-page-landing #mf-landing .dt-hero__cta{
    align-self: center;
  }
}
/* ==================================================== */
/* ABOUT PAGE ==========================================*/
/* ==================================================== */

  :root {
    --dt-bg: #ffffff;
    --dt-text: #111111;
    --dt-muted: #2a2a2a;
    --dt-max: 1100px;

    /* spacing scale */
    --s-1: 8px;
    --s-2: 12px;
    --s-3: 16px;
    --s-4: 24px;
    --s-5: 32px;
    --s-6: 48px;
    --s-7: 72px;

    /* typography */
    --title: clamp(28px, 3vw, 40px);
    --body: 16px;
    --lh: 1.65;
  }

  .dt-about {
    background: var(--dt-bg);
    color: var(--dt-text);
    padding: var(--s-6) var(--s-4) var(--s-7);
    font-size: var(--body);
    line-height: var(--lh);
  }

  /* top section wrapper */
  .dt-hero {
    max-width: var(--dt-max);
    margin: 0 auto;
  }

  .dt-hero__grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
  }

  /* portrait image */
  .dt-portrait {
    margin: 0;
    width: 100%;
  }

  .dt-portrait img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px; /* slight, like print */
    object-fit: cover;
  }

  /* right column */
  .dt-intro {
    padding-top: var(--s-4);
  }

  .dt-title {
    margin: 0 0 var(--s-4);
    font-size: var(--title);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2;
  }

  .dt-title span {
    display: inline-block;
    font-weight: 700;
  }

  .dt-lede p {
    margin: 0 0 var(--s-3);
    color: var(--dt-muted);
    max-width: 56ch;
  }

  /* lower centered block */
  .dt-body {
    max-width: var(--dt-max);
    margin: clamp(56px, 8vw, 120px) auto 0;
  }

  .dt-body__inner {
    max-width: 62ch;
    margin: 0 auto;
    text-align: center;
  }

  .dt-body__inner p {
    margin: 0 0 var(--s-4);
    color: var(--dt-muted);
  }

  .dt-body__inner em {
    font-style: italic;
  }

  /* responsiveness */
  @media (max-width: 900px) {
    .dt-hero__grid {
      grid-template-columns: 1fr;
    }

    .dt-intro {
      padding-top: 0;
    }

    .dt-lede p {
      max-width: none;
    }
  }

  @media (max-width: 520px) {
    .dt-about {
      padding: var(--s-5) var(--s-3) var(--s-6);
    }

    .dt-body__inner {
      text-align: left; /* mobile readability */
    }
  }