/* ----------------------------
Melanie Figueroa - Site Styles
COLOR PALETTE: Wine & Ink
Production build, no framework
---------------------------- */
/* 1) Reset */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; margin: 0; padding: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: inherit; text-decoration-color: currentColor; text-underline-offset: 2px; }
button { border: 0; background: none; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* 2) Tokens */
:root{
/* Brand */
--mustard-600:#5B2336;
--mustard-500:#7A2944;
--mustard-300:#C97A95;
--mustard-50:#FCE9F0;
/* Complements / accents */
--teal-700:#22334D;
--teal-600:#2F4463;
--teal-50:#E4E9F4;
--indigo-600:#2F315D;
--coral-500:#D4695C;
--coral-100:#F6D9D2;
/* Neutrals */
--char-900:#241922;
--char-700:#3B2A33;
--text-600:#6B5C63;
--cream-50:#FBF6FA;
--sage-100:#F3EBF1;
--border-200:#E7D7DF;
/* Layout */
--container: 1200px;
--header-height: 64px;
--header-gap: 12px;
--safe-top: env(safe-area-inset-top, 0px);
--sticky-nav-offset: calc(var(--header-height) + var(--header-gap));
--radius: 14px;
--radius-sm: 10px;
--shadow-1: 0 10px 30px rgba(0,0,0,.08);
--shadow-2: 0 18px 40px rgba(0,0,0,.10);
/* Breakpoints (for reference - use in @media queries)
xs: <640px (Mobile phones)
sm: 640-767px (Large phones / Small tablets)
md: 768-1023px (Tablets / iPad)
lg: 1024-1439px (Desktop)
xl: ≥1440px (Large desktop) */
--bp-xs: 0;
--bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1440px;
/* Spacing Scale (T-shirt sizing with fluid scaling) */
--space-xs: clamp(0.25rem, 0.5vw, 0.5rem); /* 4px → 8px */
--space-sm: clamp(0.5rem, 1vw, 0.75rem); /* 8px → 12px */
--space-md: clamp(1rem, 2vw, 1.5rem); /* 16px → 24px */
--space-lg: clamp(1.5rem, 3vw, 2.5rem); /* 24px → 40px */
--space-xl: clamp(2rem, 4vw, 3.5rem); /* 32px → 56px */
--space-2xl: clamp(3rem, 5vw, 5rem); /* 48px → 80px */
--space-3xl: clamp(4rem, 6vw, 7rem); /* 64px → 112px */
/* Component Spacing */
--container-padding: clamp(1.5rem, 5vw, 3rem); /* Generous padding for better breathing room */
--section-padding: var(--space-2xl);
--grid-gap: clamp(1rem, 2vw, 2rem); /* Increased max from 1.4rem */
--hero-gap: clamp(1.5rem, 5vw, 3.2rem);
--card-padding: clamp(1rem, 2vw, 1.35rem);
/* Type */
--font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
--font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
/* Focus / selection */
--focus: var(--mustard-500);
--selection-bg: #F7DCE3;
--selection-color: var(--char-900);
}
::selection{ background: var(--selection-bg); color: var(--selection-color); }
/* 3) Base */
body{
font-family: var(--font-body);
color: var(--char-900);
background: var(--cream-50);
line-height: 1.6;
font-size: 1.05rem;
}
.container{
max-width: var(--container);
width: calc(100% - 3rem); /* Ensures minimum 1.5rem (24px) outer margin on each side */
margin-inline: auto;
padding-inline: var(--container-padding);
}
.section{ padding: clamp(3rem, 5vw, 5rem) 0; }
.section--alt{ background: var(--sage-100); }
.section--mustard{ background: var(--mustard-300); color: var(--char-900); }
.section--mustard p:not(.card p),
.section--mustard .lead { color: var(--char-900); }
.section--mustard .grid-2 { align-items: center; }
.section--mustard figure {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
max-height: 450px;
overflow: hidden;
}
.section--mustard lottie-player {
max-height: 450px !important;
height: 450px !important;
width: 100%;
display: block;
transform: scale(1.3);
}
h1,h2,h3,h4{
font-family: var(--font-display);
line-height: 1.2;
text-shadow: 0 1px 2px rgba(15,23,42,.3);
letter-spacing: -0.01em;
}
h1{ font-size: clamp(1.85rem, 4.5vw, 3.2rem); }
h2{ font-size: clamp(1.5rem, 3.5vw, 2.4rem); margin-bottom: .75rem; }
h3{ font-size: clamp(1.15rem, 2.2vw, 1.6rem); margin-bottom: .4rem; }
.lead{ font-size: clamp(0.98rem, 1.4vw, 1.15rem); color: var(--text-600); }
p{ font-size: clamp(0.95rem, 1.1vw, 1rem); }
/* Accent underline (strategic color) */
.u-accent{ position:relative; }
.u-accent::after{
content:""; display:block; width:64px; height:6px; border-radius:999px; margin-top:.5rem;
background: linear-gradient(90deg, var(--mustard-500), var(--coral-500), var(--teal-700));
}
/* 4) Header / Nav */
.skip-link{
position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{ position:fixed; left:1rem; top:1rem; width:auto; height:auto; background:#fff; color:#000; z-index:9999; padding:.5rem .75rem; border-radius:6px; }
.header{
position:sticky; top:0; z-index:1200; background:#fff; border-bottom:1px solid var(--border-200);
backdrop-filter: saturate(180%) blur(10px);
isolation:isolate;
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.3px; text-decoration:none; }
.brand img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.brand__text{ font-family: "Lora", ui-serif, Georgia, serif; font-size:1.65rem; font-weight:700; letter-spacing:.02em; text-transform:lowercase; text-decoration:none; }
.brand__text .first{ color: #9B3A5A; }
.brand__text .last{ color: var(--char-900); }
.nav-links{ display:flex; gap:1.25rem; align-items:center; }
.nav-links > a{ color: var(--char-900); font-weight:600; text-decoration:none; }
.nav-links > a:hover, .nav-links > a[aria-current="page"]{ color: var(--teal-700); }
.nav-cta{ display:flex; gap:.75rem; align-items:center; }
.btn{
display:inline-flex; align-items:center; justify-content:center;
gap:.5rem; padding:.75rem 1.05rem; border-radius: var(--radius-sm);
font-weight:700; text-decoration:none; transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
box-shadow: var(--shadow-1);
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--teal-700); color:#fff; }
.btn-primary:hover{ background: var(--teal-600); }
.btn-accent{ background: var(--mustard-500); color: #fff; }
.btn-accent:hover{ background: var(--mustard-600); color:#fff; }
.btn-ghost{ background: transparent; border:1px solid var(--border-200); color: var(--char-900); }
.btn-ghost:hover{ border-color: var(--char-700); background: var(--teal-50); }
.btn-secondary{ background: transparent; border:1px solid var(--teal-700); color: var(--teal-700); }
.btn-secondary:hover{ background: var(--teal-50); border-color: var(--teal-700); }
.btn-icon-external{
display: inline-block;
margin-left: 0.35rem;
vertical-align: middle;
opacity: 0.85;
transition: transform 0.2s ease;
}
.btn:hover .btn-icon-external{
transform: translate(2px, -2px);
opacity: 1;
}
/* Mobile menu */
.burger{ display:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--border-200); }
@media (max-width: 1023px){
.burger{ display:grid; place-items:center; }
.nav-links{
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
background: #fff;
border-top: 1px solid var(--border-200);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
max-height: 0;
overflow: hidden;
transition: max-height .3s ease, padding .3s ease;
padding: 0 1rem;
flex-direction: column;
align-items: flex-start;
z-index: 100;
}
.nav-links.open{
max-height: 500px;
padding: 1rem;
gap: 0;
}
.nav-links > a{
padding: 0.65rem 0;
border-bottom: 1px solid var(--border-200);
width: 100%;
}
.nav-links > a:last-of-type{
border-bottom: none;
}
.nav-links .nav-cta{
width: 100%;
padding-top: 0.65rem;
}
.nav-links .nav-cta .btn{
width: 100%;
}
}
/* 5) Hero */
.hero{
display:grid;
grid-template-columns: 1.1fr 1.3fr;
/* slightly more breathing room between text and image */
gap: clamp(1.5rem, 5vw, 3.2rem);
/* a touch more vertical padding, subtle at desktop */
padding: clamp(1rem, 3vw, 2.5rem) 0;
align-items:center;
}
.hero > figure {
width: 100%;
height: 100%;
min-height: 550px;
}
.hero > figure lottie-player {
width: 100% !important;
height: 100% !important;
min-height: 550px !important;
}
.hero .kicker{ letter-spacing:.12em; text-transform:uppercase; color: var(--teal-700); font-weight:800; font-size:.85rem; }
/* keep your paragraph padding, add a bit more separation around the hero copy */
.hero h1{ font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: .6rem; }
.hero p{ margin-top:.9rem; padding: 6px; }
.hero-cta{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.5rem; }
.hero-cta .btn{ flex:1 1 12rem; text-align:center; }
.cta-actions{ display:flex; gap:.75rem; flex-wrap:wrap; }
.hero-card{
background: #fff; border-radius: var(--radius); padding: 0.7rem 1rem; box-shadow: var(--shadow-1);
display:flex; align-items:center; gap:.75rem; margin-top:1.75rem;
min-height: 3.5rem;
}
.hero-card svg{
flex-shrink: 0;
align-self: center;
}
.hero-card .meta{
display: flex;
align-items: center;
gap: 0.65rem;
flex-wrap: nowrap;
line-height: 1;
white-space: nowrap;
font-size: 0.9rem;
margin: 0;
padding: 0;
}
.hero-card .separator{
width: 4px;
height: 4px;
border-radius: 50%;
background: #D4A017;
display: inline-block;
flex-shrink: 0;
margin: 0 0.05rem;
}
.about-cta-panel{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:.85rem 1.2rem;
padding: clamp(1.1rem, 2vw, 1.6rem);
background:#fff;
border:1px solid var(--border-200);
border-radius: var(--radius);
box-shadow: var(--shadow-1);
}
.about-cta-panel__body{ flex:1 1 220px; }
.about-cta-panel__body h3{ margin-bottom:.3rem; font-size: clamp(1.3rem, 2.6vw, 1.5rem); }
.about-cta-panel__body p{ margin:0; color: var(--text-600); font-size:.98rem; }
.about-cta-panel__actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.about-cta-panel__actions .btn{ box-shadow:none; }
.about-cta-panel__actions .btn-primary{ box-shadow: var(--shadow-1); }
/* Mobile-first responsive breakpoints */
/* Mobile: hide animation, stack layout */
@media (max-width: 767px){
.section:first-of-type{ padding-top: 1rem; }
.hero{
grid-template-columns: 1fr;
row-gap: 1.6rem;
padding-top: 0;
padding-bottom: 2rem;
}
.hero > figure{ display: none; }
.hero .kicker{ font-size: 0.8rem; margin-bottom: 0.5rem; }
.hero h1{
font-size: clamp(1.75rem, 6vw, 2.2rem);
line-height: 1.2;
margin-bottom: 0.75rem;
}
.hero .lead{
font-size: 1rem;
line-height: 1.6;
margin-top: 0.75rem;
}
.hero p{
padding: 0;
}
.hero-cta{
margin-top: 1.5rem;
flex-direction: column;
gap: 0.75rem;
}
.hero-cta .btn{
width: 100%;
justify-content: center;
padding: 0.75rem 1rem;
flex: 0 0 auto;
}
.cta-actions{
flex-direction: column;
gap: 0.75rem;
}
.cta-actions .btn{
width: 100%;
justify-content: center;
}
.section--mustard figure{ display: none; }
.hero-card{
margin-top: 1.25rem;
padding: 0.9rem 1rem;
flex-direction: column;
align-items: center;
gap: 0;
text-align: center;
}
.hero-card svg{
display: none;
}
.hero-card .meta{
font-size: 0.85rem;
line-height: 1.5;
gap: 0;
flex-direction: column;
white-space: normal;
font-weight: 500;
color: var(--char-900);
width: 100%;
}
.hero-card .separator{
display: none !important;
}
.hero-card .meta span:not(.separator){
display: block;
padding: 0.65rem 0;
border-bottom: 1px solid #e5e7eb;
}
.hero-card .meta span:not(.separator):last-of-type{
border-bottom: none;
}
}
/* Tablet & Desktop: horizontal buttons (shared styles) */
@media (min-width: 768px){
.hero-cta{
flex-direction: row; /* Horizontal buttons on tablet+ */
gap: 0.9rem;
}
.hero-cta .btn{
flex: 1 1 12rem;
width: auto;
}
.cta-actions{
flex-direction: row;
gap: 0.75rem;
}
.cta-actions .btn{
width: auto;
}
}
/* Tablet only: keep animation hidden for clean, focused layout */
@media (min-width: 768px) and (max-width: 1023px){
.container{
padding-inline: 2.5rem;
}
.hero{
grid-template-columns: 1fr; /* Keep stacked on tablet */
padding-inline: 1rem;
}
.hero > figure{
display: none; /* Keep hidden on tablet like mobile */
}
/* Show all 4 books in one row on tablet */
.grid-4{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Hide book badges on tablet */
.book__badges{
display: none !important;
}
/* Smaller book titles on tablet */
.book__title{ font-size: 0.9rem; }
.book__by{ font-size: 0.8rem; }
}
/* Desktop: side-by-side with animation */
@media (min-width: 1024px){
.hero{
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
padding-left: 3rem;
}
.hero > figure{
display: block !important; /* Show animation on desktop */
}
}
@media (min-width: 1024px) and (max-width: 1279px){
.book__title{ font-size: 0.95rem; }
.book__by{ font-size: 0.8rem; }
}
/* Larger desktop: slightly wider animation column */
@media (min-width: 1280px){
.hero{
grid-template-columns: 1fr 1.2fr;
}
}
@media (max-width: 640px){
body, html {
overflow-x: hidden;
max-width: 100vw;
width: 100%;
}
* {
max-width: 100%;
box-sizing: border-box;
}
.container {
width: calc(100vw - 3rem) !important;
max-width: 100vw !important;
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
box-sizing: border-box;
overflow-x: hidden;
}
.section {
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}
.section--alt {
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}
.about-cta-panel{ align-items:flex-start; }
.about-cta-panel__actions{ width:100%; }
.about-cta-panel__actions .btn{ width:100%; justify-content:center; }
.hero h1{
font-size: 1.65rem;
}
/* About page mobile optimizations */
.section--about-hero h1 {
font-size: 1.75rem;
margin-bottom: 1.2rem;
}
.section--about-hero .lead {
font-size: 0.92rem;
line-height: 1.65;
}
.stats {
gap: 0.75rem;
margin: 1.2rem 0 1.4rem;
}
.stat__num {
font-size: 1.8rem;
}
.stat__label {
font-size: 0.85rem;
}
.stat__meta {
font-size: 0.78rem;
}
/* About page stats - compact side-by-side on mobile */
.section--about-hero .stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem;
margin: 0.35rem 0 1rem;
}
.section--about-hero .stat {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0.65rem 0.4rem;
gap: 0.1rem;
}
.section--about-hero .stat__num {
font-size: 1.5rem;
line-height: 1;
margin-bottom: 0;
}
.section--about-hero .stat__label {
font-size: 0.75rem;
line-height: 1.1;
margin-bottom: 0;
}
.section--about-hero .stat__meta {
font-size: 0.7rem;
line-height: 1.2;
}
/* Process steps for "How I work" */
.process-steps {
gap: 1rem;
grid-template-columns: 1fr;
}
.process-step {
padding: 1.1rem;
gap: 0.75rem;
}
.process-step__badge {
width: 38px;
height: 38px;
font-size: 0.85rem;
}
.process-step__body h3 {
font-size: 1.1rem;
}
.process-step__body p {
font-size: 0.88rem;
line-height: 1.5;
}
.how-i-work-note {
padding: 0.8rem 0.95rem;
gap: 0.65rem;
}
.how-i-work-note svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.how-i-work-note .meta {
font-size: 0.86rem;
line-height: 1.55;
}
/* Timeline in Background section */
.tl-year {
font-size: 0.85rem;
}
.tl-item p {
font-size: 0.92rem;
line-height: 1.6;
}
.tl-item strong {
font-size: 0.95rem;
line-height: 1.4;
}
.tl-content {
gap: 0.4rem;
}
.brand-list__label {
font-size: 0.82rem;
}
.brand-list li {
font-size: 0.85rem;
}
/* Book cards - smaller text on mobile */
.book__title {
font-size: 0.85rem;
}
.book__by {
font-size: 0.75rem;
}
/* Client map */
.client-map {
height: 280px;
}
.client-map__summary {
font-size: 0.88rem;
}
/* Agency section */
.stack--agency h2 {
font-size: 1.5rem;
}
.stack--agency .lead {
font-size: 0.92rem;
line-height: 1.65;
}
.stack--agency p {
font-size: 0.9rem;
line-height: 1.6;
}
.checklist li {
font-size: 0.88rem;
gap: 0.65rem;
}
.check-icon {
width: 20px;
height: 20px;
}
/* Root Literary section - prevent overflow */
.book-carousel-card {
max-width: 100%;
}
/* Mobile carousel: completely rebuild layout */
.book-carousel-card {
width: 100%;
max-width: 100%;
}
.book-carousel-card .card__body {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center;
padding: 1rem !important;
width: 100%;
box-sizing: border-box;
}
.book-carousel__title {
order: 1;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
width: 100%;
border-bottom: 2px solid var(--sage-200);
}
/* The carousel container - simple block layout */
.book-carousel {
order: 2;
display: block !important;
width: 100% !important;
max-width: 100% !important;
grid-template-columns: none !important;
grid: none !important;
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
.book-carousel__viewport {
display: block;
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
padding: 1.5rem 0 !important;
margin: 0 !important;
}
/* Nav buttons - inline-block for side-by-side */
.book-carousel__nav--prev,
.book-carousel__nav--next {
display: inline-flex !important;
vertical-align: middle;
}
.book-carousel__track {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
}
.book-carousel__item {
flex: 0 0 100% !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
}
.book-carousel__cover {
max-width: 160px !important;
width: auto !important;
height: auto !important;
margin: 0 auto !important;
display: block !important;
}
/* Nav buttons inside carousel - now part of flex layout */
.book-carousel__nav--prev {
order: 2;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px;
height: 48px;
margin: 1rem 0.75rem 1rem 0;
}
.book-carousel__nav--next {
order: 2;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px;
height: 48px;
margin: 1rem 0 1rem 0.75rem;
}
/* Center SVG icons in nav buttons */
.book-carousel__nav svg {
display: block;
margin: 0 auto;
}
/* Dots below nav buttons */
.book-carousel__dots {
order: 4;
display: flex !important;
gap: 0.5rem;
justify-content: center !important;
width: 100%;
margin: 1rem 0 0 0;
}
/* ========================================
SUBMISSIONS PAGE MOBILE OPTIMIZATION
======================================== */
/* Page-level typography - match global mobile styles */
.page--submissions h1 {
font-size: 1.85rem;
line-height: 1.2;
margin-bottom: 0.75rem;
}
.page--submissions h2 {
font-size: 1.5rem;
line-height: 1.3;
margin-bottom: 0.6rem;
}
.page--submissions h3 {
font-size: 1.15rem;
line-height: 1.35;
margin-bottom: 0.5rem;
}
.page--submissions h4 {
font-size: 1rem;
line-height: 1.4;
margin-bottom: 0.35rem;
}
/* Lead paragraphs */
.page--submissions .lead {
font-size: 0.98rem;
line-height: 1.6;
margin-bottom: 1rem;
}
/* Regular paragraphs */
.page--submissions p {
font-size: 0.95rem;
line-height: 1.6;
}
/* Sales page mobile typography - match global mobile styles */
/* Page title */
section h1 {
font-size: 1.85rem;
line-height: 1.2;
margin-bottom: 1rem;
}
/* Year headings */
.deal-year {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.deal-year h2 {
font-size: 1.5rem;
line-height: 1.3;
margin-bottom: 0.85rem;
margin-top: 0.9rem;
text-align: center;
width: 100%;
align-self: stretch;
}
.deal-year:first-of-type h2 {
margin-top: 0;
}
/* Center deal list */
.deal-list {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 600px;
margin-inline: auto;
padding-left: 0;
padding-right: 0;
list-style: none;
}
/* Featured highlights */
.featured-highlights {
margin-top: 1.5rem;
padding: 0.75rem;
}
.featured-highlights h2 {
font-size: 1.5rem;
line-height: 1.3;
margin-bottom: 0.75rem;
}
.featured-highlights h3,
.highlight-card h3 {
font-size: 1.15rem;
line-height: 1.35;
margin-bottom: 0.5rem;
}
.highlight-card p {
font-size: 0.95rem;
line-height: 1.6;
}
/* Highlight card mobile optimizations */
.highlight-card {
padding: 0.5rem;
}
.highlight-card--media {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.highlight-card--media .highlight-card__media {
max-width: 100%;
}
/* Video/media frame - reduce vertical space */
.highlight-card--media .media-frame {
aspect-ratio: 16 / 9;
max-height: 200px;
}
.highlight-card--media .media-thumb,
.highlight-card--media .media-thumb img {
height: 100%;
object-fit: cover;
}
/* Book cover images - reduce size */
.highlight-card__media img {
max-height: 280px;
width: auto;
margin: 0 auto;
object-fit: contain;
}
.highlight-card__body {
gap: 0.4rem;
}
.highlight-card__body .meta {
margin-bottom: 0.25rem;
}
/* Deal cards */
.deal {
padding: 1rem;
margin-bottom: 0.75rem;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.deal__title {
font-size: 1.1rem;
line-height: 1.35;
margin-bottom: 0.5rem;
font-weight: 700;
}
.deal__meta {
font-size: 0.88rem;
margin-bottom: 0.6rem;
line-height: 1.4;
}
.deal__terms {
font-size: 0.95rem;
line-height: 1.6;
margin-top: 0.6rem;
}
.deal__chips {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
margin-top: 0.5rem;
justify-content: center;
}
/* ========================================
MEDIA & EVENTS PAGE MOBILE OPTIMIZATION
======================================== */
/* Media hero section */
.section--media-hero h1 {
font-size: 1.85rem;
line-height: 1.2;
margin-bottom: 1rem;
}
.media-hero__intro .lead {
font-size: 0.95rem;
line-height: 1.6;
}
.media-hero {
display: flex;
flex-direction: column;
gap: 0;
}
.media-hero__intro {
display: contents; /* Unwrap so children can be reordered */
}
.media-hero h1 {
order: 1; /* Heading first */
margin-bottom: 0;
}
.media-hero__animation {
order: 2; /* Animation second */
margin: 0;
max-height: 300px;
overflow: hidden;
}
.media-hero__animation dotlottie-player {
margin: -1.5rem 0; /* Crop transparent space top/bottom */
}
.media-hero .lead {
order: 3; /* Lead text third */
margin-top: 0.5rem; /* Small spacing after animation */
}
.media-hero__cta {
order: 4; /* CTA button fourth */
}
.media-hero .card {
order: 5; /* Invite card last */
}
.media-hero__highlights {
grid-template-columns: 1fr;
gap: 1rem;
}
.media-highlight {
padding: 1.25rem;
}
.media-highlight__title {
font-size: 1.25rem;
line-height: 1.3;
margin-bottom: 0.5rem;
}
.media-highlight p {
font-size: 0.9rem;
line-height: 1.6;
}
.media-highlight__link {
font-size: 0.88rem;
}
/* Media panels section */
.media-panels__intro h2 {
font-size: 1.5rem;
line-height: 1.3;
margin-bottom: 0.75rem;
}
.media-panels__intro .meta {
font-size: 0.88rem;
}
.media-panels {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.media-panel {
padding: 1.25rem;
}
.media-panel__title {
font-size: 1.25rem;
line-height: 1.3;
margin-bottom: 0.5rem;
}
.media-panel__caption {
font-size: 0.88rem;
}
.podcast-list,
.video-list {
gap: 1rem;
}
.podcast-row,
.video-row {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: 0;
padding: 0.85rem;
}
.podcast-row > div,
.video-row > div {
display: block;
width: 100%;
margin-bottom: 0.5rem;
}
.podcast-row strong,
.video-row strong {
font-size: 1rem;
line-height: 1.3;
font-weight: 700;
display: block;
margin-bottom: 0.25rem;
color: var(--char-900);
}
.podcast-row .meta,
.video-row .meta {
font-size: 0.85rem;
line-height: 1.4;
color: var(--text-600);
display: block;
}
.podcast-row .badge,
.video-row .badge {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1rem;
font-size: 0.88rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.podcast-row .badge::before {
content: '';
display: inline-block;
width: 18px;
height: 18px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
}
.video-row .badge::before {
content: '';
display: inline-block;
width: 18px;
height: 18px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
}
.podcast-row details,
.video-row details {
margin-top: 0;
margin-bottom: 0;
}
.podcast-row summary,
.video-row summary {
font-size: 0.82rem;
text-align: center;
padding: 0.4rem;
font-weight: 600;
}
.podcast-row details[open],
.video-row details[open] {
margin-top: 0.4rem;
}
/* Media articles section */
.media-articles__intro h2 {
font-size: 1.5rem;
line-height: 1.3;
margin-bottom: 0.75rem;
}
.media-articles__intro .meta {
font-size: 0.88rem;
}
.media-articles__grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.media-article {
padding: 1.25rem;
}
.media-article__title {
font-size: 1.15rem;
line-height: 1.35;
margin-bottom: 0.5rem;
}
.media-article__source {
font-size: 0.85rem;
}
.media-article__cta {
font-size: 0.88rem;
}
/* Events section */
.events-layout__intro h2 {
font-size: 1.5rem;
line-height: 1.3;
margin-bottom: 0.75rem;
}
.events-layout__intro .meta {
font-size: 0.88rem;
}
.events-layout__grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.events-card {
padding: 1.25rem;
}
.events-card__title {
font-size: 1.25rem;
line-height: 1.3;
margin-bottom: 0.5rem;
}
.events-card__list li strong {
font-size: 0.95rem;
}
.events-card__list li span {
font-size: 0.88rem;
}
.events-card__cta {
font-size: 0.88rem;
}
.events-timeline__title {
font-size: 1.25rem;
line-height: 1.3;
margin-bottom: 0.75rem;
}
.events-timeline .timeline {
margin-left: 0.75rem;
}
.events-timeline .tl-item {
margin-left: 1.25rem;
margin-bottom: 1rem;
}
.events-timeline .tl-year {
font-size: 0.88rem;
margin-bottom: 0.35rem;
}
.events-timeline .tl-item strong {
font-size: 0.98rem;
display: block;
margin-bottom: 0.25rem;
}
.events-timeline .tl-item span {
font-size: 0.88rem;
line-height: 1.5;
}
/* CTA section */
.section--mustard h2 {
font-size: 1.65rem;
line-height: 1.2;
}
.section--mustard .lead {
font-size: 0.95rem;
line-height: 1.6;
}
/* Glossary */
.glossary {
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--sage-50);
border-radius: 12px;
}
.glossary__title {
font-size: 0.98rem;
margin-bottom: 0.85rem;
}
.glossary__list {
display: grid;
gap: 0.6rem;
}
.glossary__item {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.75rem;
align-items: baseline;
}
.glossary__item dt {
font-size: 0.9rem;
font-weight: 600;
}
.glossary__item dd {
font-size: 0.88rem;
text-align: right;
color: var(--char-700);
}
/* Form elements */
.meta,
label.meta {
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 0.4rem;
display: block;
}
.select,
.input {
font-size: 0.95rem;
padding: 0.75rem;
border-radius: 8px;
width: 100%;
}
/* Chips */
.chip {
font-size: 0.8rem;
padding: 0.3rem 0.65rem;
border-radius: 6px;
}
/* Grid adjustments */
.grid-2 {
grid-template-columns: 1fr;
gap: 1rem;
}
/* Sales layout */
.sales-layout {
margin-top: 1.5rem;
}
.sales-layout__aside {
margin-top: 0;
}
.deal-window {
margin-top: 1.5rem;
margin-left: -1rem;
margin-right: -1rem;
padding-left: 1rem;
padding-right: 1rem;
}
/* Section spacing */
.page--submissions .section {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
/* Stack spacing */
.page--submissions .stack {
gap: 1rem;
}
:root{
--header-gap: var(--safe-top);
}
body{
padding-top: calc(var(--header-height) + var(--safe-top));
}
html{
scroll-padding-top: calc(var(--header-height) + var(--safe-top) + 16px);
}
.header{
position: fixed;
top: var(--safe-top);
left: 0;
right: 0;
width: 100%;
}
/* Section links / chips navigation */
.section-links {
position: sticky;
top: var(--header-height);
z-index: 1100;
margin-bottom: 1rem;
background: #fff;
border-bottom: 1px solid var(--border-100);
}
.section-links__row {
gap: 0.5rem;
padding: 0.75rem 0;
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.section-links__row::-webkit-scrollbar {
display: none;
}
.chip--tab {
font-size: 0.88rem;
padding: 0.6rem 1rem;
white-space: nowrap;
font-weight: 600;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 20px;
}
.chip--cta {
font-size: 0.8rem;
font-weight: 700;
}
/* Submission flow (numbered steps) */
.page--submissions .submission-flow {
margin-top: 1.5rem;
gap: 1.25rem;
}
.page--submissions .submission-flow__item {
padding: 1.5rem 1.25rem;
gap: 1rem;
}
.page--submissions .submission-flow__head {
width: 52px;
aspect-ratio: 1;
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0.85rem;
}
.page--submissions .submission-flow__head::after {
left: 26px;
}
.page--submissions .submission-flow__body h3 {
font-size: 1.15rem;
line-height: 1.3;
margin-bottom: 0.5rem;
font-weight: 700;
}
.page--submissions .submission-flow__body p {
font-size: 0.95rem;
line-height: 1.65;
color: var(--text-600);
}
/* Materials checklist grid */
.materials-grid {
display: grid;
gap: 1.25rem;
}
.material-item {
display: flex;
gap: 0.85rem;
align-items: flex-start;
}
.material-item__icon {
width: 42px;
height: 42px;
flex-shrink: 0;
margin-top: 0.15rem;
}
.material-item h4 {
font-size: 1.05rem;
line-height: 1.3;
margin-bottom: 0.35rem;
font-weight: 700;
}
.material-item p {
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-600);
}
/* Publishers Marketplace figure/callouts */
.pm-figure {
position: relative;
margin-bottom: 0.5rem;
}
.pm-callout {
font-size: 0.75rem;
padding: 0.45rem 0.65rem;
line-height: 1.4;
}
.pm-callout b {
font-size: 0.8rem;
display: block;
margin-bottom: 0.15rem;
}
.pm-callout span {
font-size: 0.72rem;
}
/* Buttons - touch-friendly */
.page--submissions .btn {
min-height: 50px;
padding: 0.85rem 1.5rem;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
}
.page--submissions .btn-primary {
width: 100%;
justify-content: center;
text-align: center;
}
.page--submissions .btn-accent {
width: 100%;
justify-content: center;
}
/* Checklist items */
.page--submissions .checklist {
gap: 0.85rem;
}
.page--submissions .checklist li {
font-size: 0.95rem;
line-height: 1.6;
gap: 0.7rem;
align-items: flex-start;
}
.page--submissions .checklist .check-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
margin-top: 0.1rem;
}
.page--submissions .checklist--cols-2 {
grid-template-columns: 1fr;
}
.page--submissions .checklist strong {
font-weight: 700;
}
/* Card styling */
.page--submissions .card {
border-radius: 16px;
}
.page--submissions .card__body {
padding: 1.5rem;
}
.page--submissions .card__body h3 {
font-size: 1.35rem;
line-height: 1.3;
margin-bottom: 1.25rem;
font-weight: 700;
}
/* Help text */
.page--submissions .help {
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-600);
margin-top: 1rem;
}
/* Meta text */
.page--submissions .meta {
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-600);
}
/* Utility spacing */
.page--submissions .mt-3 {
margin-top: 1.5rem;
}
/* Grid adjustments */
.page--submissions .grid-2 {
gap: 2rem;
}
/* Submission media (screenshots) */
.submission-media__figure img {
border-radius: 8px;
}
.submission-media__caption {
padding: 1.25rem;
}
/* Ready to submit section emphasis */
.page--submissions .section--mustard h2 {
font-size: 1.65rem;
margin-bottom: 0.85rem;
}
.page--submissions .section--mustard .lead {
font-size: 1.1rem;
line-height: 1.65;
}
/* Root Literary section - ensure card content fits */
.section--alt {
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}
.section--alt .container {
width: calc(100% - 2rem) !important;
max-width: 100% !important;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
}
.section--alt .grid,
.section--alt .grid-2 {
width: 100%;
max-width: 100%;
gap: 1rem;
box-sizing: border-box;
}
/* Override align-start to make cards equal height */
.section--alt .grid.align-start {
align-items: stretch;
}
.section--alt .card--accent {
display: flex;
flex-direction: column;
height: 100%;
}
.section--alt .card--accent .card__body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.section--alt .card--accent .checklist {
gap: 1rem;
flex: 1;
}
.section--alt .card--accent h3 {
margin-bottom: 1.25rem;
}
.section--alt .stack,
.section--alt .stack--agency {
width: 100%;
max-width: 100%;
min-width: 0;
}
.section--alt .stack--agency h2 {
width: 100%;
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.section--alt .lead,
.section--alt p {
width: 100%;
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
.section--alt .card {
width: 100%;
max-width: 100%;
overflow: hidden;
box-sizing: border-box;
min-width: 0;
}
.section--alt .card__body {
padding: 0.85rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.checklist {
width: 100%;
max-width: 100%;
}
.checklist li {
width: 100%;
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
box-sizing: border-box;
min-width: 0;
}
.checklist li span {
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;
}
.trust-cta {
width: 100%;
max-width: 100%;
padding: 0.7rem 0.85rem;
box-sizing: border-box;
}
.trust-cta .meta {
width: 100%;
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
.trust-cta .btn {
width: 100%;
max-width: 100%;
justify-content: center;
}
.book-carousel-card {
width: 100%;
max-width: 100%;
box-sizing: border-box;
min-width: 0;
}
/* Logo grid / placements */
.logo-grid {
gap: 1.8rem;
margin-bottom: 2.5rem;
}
.logo img {
max-width: 110px;
max-height: 42px;
}
.placements-cta {
margin-top: 2.5rem;
}
/* Section headings for about page */
.section--alt h2,
.card h2 {
font-size: 1.45rem;
}
.card h3 {
font-size: 1.15rem;
}
/* Card body padding */
.card__body {
padding: 1.3rem;
}
}
/* 6) Remove decorative waves */
.wave-top, .wave-bottom { display:none !important; }
/* 7) Cards, grids, utilities */
.grid{ display:grid; gap:var(--grid-gap); }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.align-start{ align-items: start; } /* for Submissions first row alignment */
.grid-span-2{ grid-column: 1 / -1; }
@media (max-width: 767px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr);} .grid-2{ grid-template-columns:1fr; } }
@media (max-width: 540px){
/* Grid adjustments */
.grid-3{ grid-template-columns:1fr; }
/* Component-specific refinements for small mobile */
.book__title{ font-size: 0.9rem; }
.book__by{ font-size: 0.8rem; }
.book__info{ padding: 0.6rem 0.75rem 0.85rem; }
/* Buttons */
.btn{ font-size: 0.9rem; padding: 0.7rem 1rem; }
/* Meta text */
.meta{ font-size: 0.85rem; }
/* Kicker text */
.kicker{ font-size: 0.75rem; }
}
.card{
background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-1); overflow:hidden;
border:1px solid var(--border-200);
}
.card__body{ padding: clamp(1rem, 2vw, 1.35rem); }
.card--accent{ border-top:4px solid var(--mustard-500); } /* subtle color addition */
.card--accent .card__body{
padding: clamp(.9rem, 2vw, 1.2rem);
display:flex;
flex-direction:column;
gap: clamp(.7rem, 1.6vw, 1.05rem);
}
/* Root Literary section - equal height cards */
.section--alt .grid.align-start {
align-items: stretch;
}
.section--alt .stack--agency,
.section--alt .card--accent {
height: 100%;
display: flex;
flex-direction: column;
}
.section--alt .card--accent .card__body {
flex: 1;
display: flex;
flex-direction: column;
padding-top: 1.5rem;
padding-bottom: 0.75rem;
}
.section--alt .card--accent .checklist {
gap: 1.4rem;
}
.section--alt .card--accent h3 {
margin-bottom: 1.25rem;
}
.section--alt .card--accent .card-cta {
margin-top: 1.5rem;
text-align: center;
}
.section--alt .card--accent .card-cta .btn {
width: 100%;
justify-content: center;
}
.meta{ color: var(--text-600); font-size:.95rem; line-height:1.55; }
/* 8) Book gallery */
.book{ display:flex; flex-direction:column; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--border-200); box-shadow: var(--shadow-1); }
.book__info{ padding:.75rem .9rem 1rem; }
.book__title{ font-weight:800; line-height:1.3; }
.book__by{ font-size:.95rem; color: var(--text-600); }
/* 9) Filters / chips */
.chips{ display:flex; gap:.5rem; flex-wrap:wrap; align-items: center; }
.chip{
padding:.5rem .75rem; border-radius:999px; border:1px solid var(--border-200); background:#fff; font-weight:600; font-size:.95rem;
}
.chip[data-active="true"]{ color:#fff; background: var(--teal-700); border-color: var(--teal-700); }
.chip-divider{
width: 1px;
height: 1.5rem;
background: var(--border-200);
margin: 0 .25rem;
}
/* 10) Testimonials */
.section--testimonials{ position:relative; background: linear-gradient(180deg, rgba(244,217,226,.7) 0%, #fff 46%, var(--cream-50) 100%); }
.testimonials__intro{ max-width:40rem; }
.testimonials__subhead{ color: var(--text-600); font-size:1.05rem; line-height:1.7; }
.testimonials{ position:relative; display:grid; gap:1.5rem; padding:2.6rem 2.7rem 3.6rem; border-radius: calc(var(--radius) * 1.35); background:#fff; border:1px solid rgba(122,41,68,.08); box-shadow: var(--shadow-2); overflow:hidden; isolation:isolate; }
.testimonials::before,
.testimonials::after{
content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:-1;
}
.testimonials::before{
width:360px; height:360px; background: radial-gradient(circle at 30% 30%, rgba(122,41,68,.28), transparent 70%);
inset:-220px auto auto -140px; filter:blur(0.4px);
}
.testimonials::after{
width:320px; height:320px; background: radial-gradient(circle at 70% 70%, rgba(34,51,77,.2), transparent 72%);
inset:auto -160px -220px auto;
}
.t-carousel{ overflow:hidden; position:relative; }
.t-track{ display:flex; transition: transform .4s ease; }
.t-slide{ min-width:100%; padding:.5rem; display:flex; align-items:stretch; }
.quote{
display:grid;
gap:1.6rem;
background: #fff;
border-radius: calc(var(--radius) * 1.1);
padding: 2.5rem 2.5rem 2.5rem 3rem;
border-left: 4px solid var(--mustard-500);
box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
position:relative;
width:100%;
min-height:100%;
}
.quote p{
font-size:1.3rem;
line-height:1.8;
font-weight:400;
color: var(--char-800);
font-style: italic;
}
.quote__footer{ display:flex; flex-direction:column; gap:.3rem; margin-top: .5rem; }
.quote__name{ font-style:normal; font-weight:700; color: var(--teal-700); letter-spacing:.01em; font-size: 1.05rem; }
.quote__meta{ color: var(--text-600); font-size:.95rem; font-style: normal; }
.t-nav{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
.t-nav::before{ content:""; flex:1; height:1px; background: rgba(24,78,87,.12); margin-right:1.5rem; }
.t-nav::after{ content:""; flex:1; height:1px; background: rgba(212,160,23,.2); margin-left:1.5rem; }
.icon-btn{ width:48px; height:48px; display:grid; place-items:center; border-radius:999px; border:0; background: linear-gradient(135deg, var(--teal-700), var(--teal-600)); color:#fff; box-shadow: 0 16px 30px rgba(24,78,87,.18); transition: transform .2s ease, box-shadow .2s ease; font-size:1.65rem; line-height:0.9;
}
.icon-btn:hover{ transform: translateY(-1px); box-shadow: 0 20px 32px rgba(24,78,87,.25); }
.icon-btn:focus-visible{ outline:3px solid rgba(228,108,90,.4); outline-offset:2px; }
@media (max-width: 640px){
/* Testimonials section */
.testimonials{ padding:1.6rem 1.2rem 2.4rem; gap:1.2rem; }
.testimonials__subhead{ font-size: 0.88rem; line-height: 1.6; }
.quote{ padding: 1.5rem 1.5rem 1.5rem 2rem; gap: 1.1rem; }
.quote p{ font-size:1.05rem; line-height: 1.7; }
.quote__name{ font-size: 0.88rem; }
.quote__meta{ font-size: 0.8rem; }
.t-nav{ justify-content:center; gap:1rem; }
.t-nav::before,
.t-nav::after{ display:none; }
/* Section headings */
.section h2{ font-size: 1.6rem; }
/* Cards */
.card__body{ padding: 1rem; }
/* Hero CTA section */
.section--mustard h2{ font-size: 1.65rem; }
.section--mustard .lead{ font-size: 0.95rem; }
/* Sales glossary mobile optimization */
.glossary{
padding: 0.9rem 1rem;
}
.glossary__title{
font-size: 0.75rem;
margin-bottom: 0.65rem;
}
.glossary__list{
gap: 0.4rem;
}
.glossary__item{
padding: 0.35rem 0.65rem;
}
.glossary__item dt{
font-size: 0.75rem;
}
.glossary__item dd{
font-size: 0.75rem;
}
}
/* 11) Timeline (events) */
.timeline{ position:relative; margin-left:1rem; }
.timeline::before{ content:""; position:absolute; left:0; top:.2rem; bottom:.2rem; width:3px; background: var(--border-200); }
.tl-item{ position:relative; margin: 0 0 1.2rem 1.5rem; }
.tl-item::before{
content:""; position:absolute; left:-1.9rem; top:.3rem; width:12px; height:12px; border-radius:50%;
background: var(--mustard-500); border:2px solid #fff; box-shadow: 0 0 0 2px var(--border-200);
}
.tl-year{ font-weight:800; color: var(--teal-700); margin:.2rem 0 .4rem; }
.tl-content{ display:grid; gap:.6rem; }
.brand-list__label{ font-size:.9rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--teal-700); }
.brand-list{
display:flex;
flex-wrap:wrap;
gap:.45rem;
margin:0;
padding:0;
list-style:none;
}
.brand-list li{
background: var(--sage-100);
border:1px solid rgba(24,78,87,.18);
border-radius:999px;
padding:.4rem .8rem;
font-weight:600;
font-size:.9rem;
color: var(--char-700);
line-height:1.2;
}
/* 12) Forms */
.form{ display:grid; gap:1rem; }
.input, .select, .textarea{
width:100%; padding:.75rem .85rem; border-radius:10px; border:1px solid var(--border-200); background:#fff;
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.help{ font-size:.92rem; color: var(--text-600); }
/* Sales page glossary refinement */
.help strong{ color: var(--char-900); font-weight: 700; }
.glossary{
background: #fff;
border: 1px solid var(--border-200);
padding: 1rem 1.25rem;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.glossary__title{
margin: 0 0 0.75rem 0;
font-size: 0.85rem;
color: var(--text-600);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.glossary__list{
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
}
.glossary__item{
display: inline-flex;
align-items: center;
background: var(--cream-50);
border: 1px solid var(--border-200);
border-radius: 6px;
padding: 0.4rem 0.75rem;
gap: 0.4rem;
}
.glossary__item dt{
font-weight: 600;
color: var(--char-900);
font-size: 0.82rem;
}
.glossary__item dt::after{
content: ':';
margin-left: 1px;
}
.glossary__item dd{
margin: 0;
color: var(--teal-700);
font-size: 0.82rem;
font-weight: 600;
}
/* 13) Footer */
.footer{ background: var(--char-900); color:#EDEDED; }
.footer a{ color:#fff; opacity:.9; }
.footer a:hover{ opacity:1; text-decoration: underline; }
.footer .help,
.footer .help strong{
color:#F8EDEF;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transition: all 0.2s ease;
text-decoration: none;
}
.social-links a:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
text-decoration: none;
}
.social-links svg {
opacity: 0.9;
}
/* 14) Prose (unified type rhythm for long text) */
.prose { max-width: 70ch; }
.prose p { font-size: 1.05rem; color: var(--char-900); }
.prose h1 { margin-bottom: .6rem; }
.prose h2 { margin-top: .4rem; }
.prose h3 { margin-top: 1rem; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .45rem; }
/* 15) Quick links (Submissions) - aligned and colorful */
.quick-links {
display: grid;
gap: .8rem;
width: 100%;
}
.qlink {
width:100%;
display: grid; grid-template-columns: 28px 1fr; align-items: center;
padding: .85rem 1rem; background: #fff; border: 1px solid var(--border-200);
border-radius: 12px; box-shadow: var(--shadow-1); font-weight: 700;
transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.qlink svg { color: var(--teal-700); }
.qlink:hover { border-color: var(--mustard-300); background: linear-gradient(0deg, rgba(232,196,94,.10), rgba(232,196,94,.10)), #fff; }
/* 16) Checklist - modern "pill" rows with color */
.checklist { display: grid; gap: .65rem; }
.checklist li {
display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: .7rem;
padding: .75rem .85rem; border: 1px solid var(--border-200); border-radius: 12px; background:#fff;
}
.checklist__content {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.checklist__title {
margin: 0;
font-size: 0.98rem;
font-weight: 700;
line-height: 1.3;
color: var(--teal-700);
}
.checklist__desc {
margin: 0;
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-600);
}
.check-icon{
width:22px; height:22px; border-radius:50%; background: var(--teal-700); color:#fff;
display:grid; place-items:center; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--teal-50);
margin-top: 0.15rem;
}
.check-icon svg{ width:14px; height:14px; }
.checklist__headline{
background: linear-gradient(135deg, rgba(24,78,87,.08), rgba(60,79,118,.08));
border: 1px solid rgba(24,78,87,.18);
}
.checklist__headline strong{ color: var(--teal-700); }
.trust-cta{
margin-top: clamp(.8rem, 1.6vw, 1.2rem);
padding: clamp(.7rem, 1.5vw, 1rem) clamp(1rem, 2vw, 1.5rem);
border-radius: var(--radius);
border: 1px solid rgba(28, 74, 87, 0.18);
background: rgba(28, 74, 87, 0.08);
box-shadow: 0 12px 24px rgba(28, 74, 87, 0.12);
text-align:center;
}
.trust-cta .meta{
margin:0;
font-size: clamp(1rem, 1.7vw, 1.18rem);
font-weight:700;
color:#1f4a55;
letter-spacing:.015em;
}
.trust-cta .btn{
margin-top:.8rem;
background: var(--teal-700);
color:#fff;
border:none;
box-shadow: 0 12px 24px rgba(32, 84, 96, 0.14);
padding-inline: clamp(1.1rem, 2.4vw, 1.6rem);
}
.trust-cta .btn:hover{
background: var(--teal-600);
}
.trust-cta .btn:focus-visible{
outline:3px solid rgba(28,113,128,.6);
outline-offset:3px;
}
/* 16a) How I work - numbered journey cards */
.process-steps{
display:grid;
gap: clamp(1rem, 3vw, 1.6rem);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
list-style:none;
margin:0;
padding:0;
}
.process-step{
display:grid;
gap:.9rem;
justify-items:start;
text-align:left;
background:#fff;
border:1px solid var(--border-200);
border-radius: var(--radius);
box-shadow: var(--shadow-1);
padding: clamp(1.2rem, 1.4vw + .4rem, 1.6rem);
position:relative;
isolation:isolate;
overflow:hidden;
}
.process-step::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:4px;
border-radius: 0;
pointer-events:none;
background: linear-gradient(90deg, var(--mustard-500), var(--teal-700));
z-index:0;
}
.process-step__badge{
display:grid;
place-items:center;
width:44px;
height:44px;
border-radius:50%;
background: linear-gradient(135deg, var(--coral-500), var(--indigo-600));
color:#fff;
font-weight:700;
font-size:.95rem;
letter-spacing:.08em;
position:relative;
z-index:1;
box-shadow: 0 12px 24px rgba(60, 79, 118, .18);
}
.process-step__body h3{
margin-bottom:.35rem;
font-size: clamp(1.15rem, 2vw, 1.35rem);
}
.process-step__body{
position:relative;
z-index:1;
display:grid;
gap:.5rem;
}
.process-step__body p{
color: var(--text-600);
font-size:.98rem;
line-height:1.55;
max-width:34ch;
}
.how-i-work-card{ margin-top: clamp(1.5rem, 4vw, 3rem); }
.how-i-work-card .card__body{ display:grid; gap: clamp(1rem, 2vw, 1.6rem); }
.how-i-work-note{
display:flex;
align-items:flex-start;
gap:.75rem;
padding: .9rem 1.1rem;
background: var(--teal-50);
border-radius: var(--radius);
border:1px solid rgba(24,78,87,.18);
}
.how-i-work-note svg{ color: var(--teal-700); }
.how-i-work-note .meta{ margin:0; }
.stack--agency .book-carousel-card{ flex:1; display:flex; }
.book-carousel-card{ box-shadow:none; }
.book-carousel-card .card__body{
flex:1;
padding: clamp(.85rem, 1.8vw, 1.15rem);
display:grid;
gap:.85rem;
}
.client-map-card .card__body{
display:flex;
flex-direction:column;
gap: clamp(.6rem, 1.6vw, 1rem);
}
.client-map{
position:relative;
flex:1;
border-radius: var(--radius);
overflow:hidden;
box-shadow: 0 20px 45px rgba(122,41,68,.16);
border:1px solid rgba(122,41,68,.22);
width:100%;
aspect-ratio: 2 / 1;
min-height: clamp(220px, 28vw, 360px);
background: #F8EFF3;
}
.client-map.leaflet-container{
width:100%;
height:100%;
font-family: var(--font-body);
}
.client-map__summary{
text-align:center;
font-size: clamp(.85rem, 1.7vw, 1rem);
font-weight: 600;
color: var(--char-900);
background: rgba(247, 220, 227, 0.85);
border-radius: var(--radius);
padding: .65rem .9rem;
box-shadow: 0 10px 20px rgba(122,41,68,.15);
}
.client-map:focus-visible{
outline: 3px solid rgba(122, 41, 68, 0.8);
outline-offset: 3px;
}
.client-map .leaflet-control-attribution{
background: rgba(255,255,255,0.85);
backdrop-filter: blur(4px);
padding: .25rem .8rem;
margin: .4rem;
border-radius: 999px;
font-size: .72rem;
color: #2a3b46;
box-shadow: 0 12px 25px rgba(32,48,58,.18);
}
.client-map .leaflet-control-attribution a{
color: inherit;
text-decoration: none;
font-weight: 500;
}
.client-map .leaflet-control-attribution a:hover{
text-decoration: underline;
}
.client-map .leaflet-pane.leaflet-tooltip-pane .leaflet-tooltip{
background: rgba(22, 39, 49, .92);
color:#fff;
border:none;
border-radius: 999px;
padding: .35rem .65rem;
font-size: .72rem;
box-shadow: 0 10px 20px rgba(12,24,32,.35);
}
.client-map .leaflet-pane.leaflet-tooltip-pane .leaflet-tooltip::before{
display:none;
}
.client-map .leaflet-pane.leaflet-tile-pane img{
filter: saturate(0.65) brightness(1.04) contrast(1.08) hue-rotate(-6deg);
transition: filter .35s ease;
}
.client-map[data-map-ready="true"] .leaflet-pane.leaflet-tile-pane img{
filter: saturate(0.78) brightness(1.02) contrast(1.05) hue-rotate(-6deg);
}
.client-map .client-map__arc{
mix-blend-mode: normal;
}
/* Map legend */
.map-legend {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(4px);
padding: 8px 10px;
border-radius: 6px;
font-size: 0.75rem;
line-height: 1.4;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
display: flex;
flex-direction: column;
gap: 4px;
}
.map-legend__item {
display: flex;
align-items: center;
gap: 6px;
}
.map-legend__marker {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.map-legend__marker--home {
background: #7A2944;
border: 2px solid #5B1E32;
}
.map-legend__marker--intl {
background: #D97F4A;
border: 2px solid #8C3B2F;
}
.map-legend__marker--us {
background: #F7DCE3;
border: 2px solid #7A2944;
}
.map-legend__label {
color: var(--char-900);
font-weight: 500;
}
/* Portal Preview Section */
.portal-preview {
margin-top: 3rem;
padding: 2.5rem;
background: linear-gradient(135deg, rgba(219, 239, 244, 0.3) 0%, rgba(243, 246, 243, 0.3) 100%);
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 2rem;
}
.portal-preview__header {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.portal-preview__badge {
display: inline-block;
padding: 0.4rem 1rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--teal-700);
background: rgba(47, 116, 138, 0.12);
border-radius: 999px;
}
.portal-preview__title {
margin: 0;
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 700;
color: var(--teal-800);
}
.portal-preview__subtitle {
margin: 0;
max-width: 520px;
font-size: 0.98rem;
color: var(--text-600);
}
.portal-preview__grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.portal-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(43, 47, 48, 0.08);
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.portal-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(47, 116, 138, 0.08), transparent 40%);
opacity: 0;
transition: opacity 0.2s ease;
}
.portal-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(43, 47, 48, 0.12);
}
.portal-card:hover::after {
opacity: 1;
}
.portal-card h4 {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
line-height: 1.4;
color: var(--teal-800);
}
.portal-card__answer {
margin: 0;
line-height: 1.6;
color: var(--text-600);
font-size: 0.92rem;
}
.portal-card__intro {
color: var(--text-700);
}
.portal-card__blur {
display: inline;
filter: blur(5px);
opacity: 0.5;
user-select: none;
pointer-events: none;
transition: filter 0.2s ease, opacity 0.2s ease;
}
.portal-card:hover .portal-card__blur {
filter: blur(3.5px);
opacity: 0.4;
}
.portal-card__author {
margin: 0;
font-size: 0.82rem;
color: var(--teal-600);
}
.portal-card__author strong {
color: var(--text-700);
font-weight: 600;
}
.portal-preview__footer {
text-align: center;
padding-top: 1rem;
border-top: 1px solid var(--sage-200);
}
.portal-preview__footer p {
margin: 0;
color: var(--text-600);
font-size: 0.95rem;
}
/* Mobile adjustments */
@media (max-width: 767px) {
.portal-preview {
padding: 1.75rem;
margin-top: 2rem;
}
.portal-preview__grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.portal-card {
padding: 1.25rem;
}
}
@media (max-width: 640px) {
.portal-preview {
padding: 1.5rem;
}
.portal-preview__title {
font-size: 1.4rem;
}
.portal-card h4 {
font-size: 0.98rem;
}
}
.book-carousel__title{
margin:0 0 1rem 0;
padding-bottom: 0.75rem;
text-align:center;
font-size: clamp(1.1rem, 2.1vw, 1.3rem);
font-weight: 700;
color: var(--teal-700);
border-bottom: 2px solid var(--sage-200);
letter-spacing: -0.01em;
}
.book-carousel{
display:grid;
grid-template-columns: auto 1fr auto;
gap:.75rem;
align-items:center;
}
.book-carousel__nav{
width:42px;
height:42px;
border-radius:50%;
border:1px solid var(--border-200);
background:#fff;
color: var(--teal-700);
display:grid;
place-items:center;
box-shadow: var(--shadow-1);
transition: transform .25s ease, box-shadow .25s ease;
z-index:3;
}
.book-carousel__nav:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2); }
.book-carousel__nav:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.book-carousel__viewport{
position:relative;
width:100%;
overflow:hidden;
border-radius: var(--radius);
padding: clamp(.6rem, 1.5vw, 1rem) 0;
}
.book-carousel__track{
display:flex;
align-items:flex-end;
}
.book-carousel__track.is-animating{
transition: transform .6s cubic-bezier(.55,.08,.26,.99);
}
.book-carousel__item{
flex:0 0 calc(100% / 3);
display:grid;
justify-items:center;
padding: 0 clamp(.4rem, 1.4vw, .8rem);
transform-origin:center bottom;
transform: scale(.82);
opacity:.65;
filter: saturate(.85);
transition: transform .45s ease, opacity .45s ease, filter .45s ease;
}
.book-carousel__item.is-center{
transform: scale(1.06);
opacity:1;
filter:none;
}
.book-carousel__cover{
width:100%;
border-radius: calc(var(--radius-sm) * .9);
box-shadow: 0 20px 38px rgba(28,44,52,.24);
object-fit:contain;
background:#f2f4f5;
}
.book-carousel__dots{
display:flex;
justify-content:center;
gap:.4rem;
}
.book-carousel__dot{
width:30px;
height:6px;
border-radius:999px;
background: rgba(24,78,87,.25);
border:0;
cursor:pointer;
transition: background .2s ease;
}
.book-carousel__dot[aria-current="true"]{ background: var(--teal-700); }
.book-carousel__dot:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
/* 17) Media hero overview */
.section--media-hero{
padding: clamp(3.2rem, 6vw, 5rem) 0 clamp(2.6rem, 5vw, 4.2rem);
}
.media-hero{
display:grid;
gap: clamp(1.8rem, 4vw, 3rem);
}
@media (min-width: 1024px){
.media-hero{ grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items:start; }
}
.media-hero__intro{
display:grid;
gap: clamp(.9rem, 2.4vw, 1.4rem);
max-width: 62ch;
}
.media-hero__cta{
display:flex;
flex-wrap:wrap;
gap:.75rem;
}
.media-hero__highlights{
display:grid;
gap: clamp(1rem, 2.4vw, 1.6rem);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.media-hero__animation{
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.media-hero__animation dotlottie-player{
clip-path: inset(15% 0 15% 0);
transform: scale(1.4);
}
/* Reorder media hero on mobile/tablet: Animation between heading and lead text */
@media (max-width: 1023px) {
.media-hero {
display: flex !important;
flex-direction: column;
gap: 0;
}
.media-hero__intro {
display: contents;
}
.media-hero h1 {
order: 1;
margin-bottom: 0;
}
.media-hero__animation {
order: 2;
margin: 0;
max-height: 300px;
overflow: hidden;
}
.media-hero__animation dotlottie-player {
margin: -1.5rem 0;
clip-path: none;
transform: none;
}
.media-hero .lead {
order: 3;
margin-top: 0.5rem;
margin-bottom: 0;
}
.media-hero__cta {
order: 4;
margin-top: 1.5rem;
display: flex;
gap: 0.75rem;
width: 100%;
}
.media-hero .card {
order: 5;
margin-top: 1.5rem;
width: 100%;
}
}
.media-highlight{
position:relative;
z-index:0;
display:grid;
gap:.6rem;
padding: clamp(1.1rem, 3vw, 1.6rem);
border-radius:18px;
border:1px solid rgba(24,78,87,.14);
background: linear-gradient(135deg, rgba(234,243,244,.7), #fff);
box-shadow: var(--shadow-1);
overflow:hidden;
}
.media-highlight::before{
content:"";
position:absolute;
inset-inline: clamp(1.2rem, 2.4vw, 1.6rem);
top: clamp(1.05rem, 2.4vw, 1.4rem);
height:3px;
border-radius:999px;
background: linear-gradient(90deg, var(--mustard-500), var(--coral-500), var(--teal-700));
opacity:.45;
z-index:0;
}
.media-highlight > *{ position:relative; z-index:1; }
.media-highlight__title{
margin:0;
font-size: clamp(1.2rem, 2vw, 1.45rem);
}
.media-highlight p{
margin:0;
color: var(--text-600);
font-size:.95rem;
line-height:1.5;
}
.media-highlight__link{
position:relative;
z-index:1;
display:inline-flex;
gap:.35rem;
align-items:center;
width:fit-content;
font-weight:700;
color: var(--teal-700);
text-decoration:none;
border-bottom:2px solid rgba(24,78,87,.25);
transition: gap .2s ease, color .2s ease, border-color .2s ease;
}
.media-highlight__link::after{
content:"›";
font-size:1rem;
}
.media-highlight__link:hover{
gap:.5rem;
color: var(--teal-600);
border-color: rgba(24,78,87,.45);
}
/* 17a) Media panels (podcasts & videos) */
.media-panels__intro{
display:flex;
flex-direction:column;
gap:.4rem;
margin-bottom: clamp(1.2rem, 2.8vw, 2.2rem);
max-width:48ch;
}
.media-panels__intro .meta{ color: var(--text-600); font-size:.95rem; }
.media-panels{
display:grid;
gap: clamp(1rem, 3vw, 2.2rem);
}
@media (min-width:768px){
.media-panels{ grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
.media-panel{
position:relative;
display:flex;
flex-direction:column;
gap:1.1rem;
padding: clamp(1.2rem, 2.6vw, 1.8rem);
background:#fff;
border:1px solid var(--border-200);
border-radius:20px;
box-shadow: var(--shadow-1);
overflow:hidden;
}
.media-panel::before{
content:"";
position:absolute;
inset-inline: clamp(1.2rem, 2.6vw, 1.8rem);
top: clamp(1rem, 2.4vw, 1.4rem);
height:4px;
border-radius:999px;
background: linear-gradient(90deg, var(--mustard-500), var(--coral-500), var(--teal-700));
opacity:.55;
}
.media-panel__header{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
gap:.35rem;
}
.media-panel__title{
margin:0;
font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}
.media-panel__caption{ color: var(--text-600); font-size:.95rem; }
.media-panel__scroll{
position:relative;
z-index:1;
display:grid;
gap:.9rem;
overflow-y:auto;
max-height: clamp(320px, 50vh, 520px);
padding-right:.35rem;
margin-right:-.35rem;
overscroll-behavior:contain;
scrollbar-color: var(--border-200) transparent;
}
.media-panel__scroll:focus-visible{ outline:3px solid var(--focus); outline-offset:4px; }
.media-panel__scroll::-webkit-scrollbar{ width:10px; }
.media-panel__scroll::-webkit-scrollbar-thumb{ background: var(--border-200); border-radius:999px; }
.podcast-list, .video-list{
display:grid;
gap:.95rem;
list-style:none;
margin:0;
padding:0;
}
.podcast-row, .video-row{
display:grid;
grid-template-columns:1fr auto;
align-items:flex-start;
gap:.85rem;
padding:1rem 1.1rem;
background: linear-gradient(140deg, rgba(234,243,244,.65), #fff);
border:1px solid rgba(226,230,232,.7);
border-radius:16px;
box-shadow: var(--shadow-1);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.podcast-row:hover, .video-row:hover{
transform: translateY(-2px);
box-shadow: var(--shadow-2);
border-color: var(--teal-50);
}
.podcast-row strong, .video-row strong{ font-size:1.05rem; }
.podcast-row details, .video-row details{
grid-column:1 / -1;
margin-top:.25rem;
border-top:1px solid transparent;
padding-top:0;
}
.podcast-row details[open], .video-row details[open]{
border-top:1px solid var(--border-200);
padding-top:.65rem;
margin-top:.35rem;
}
.podcast-row summary, .video-row summary{ cursor:pointer; font-weight:600; }
.podcast-row summary::marker, .video-row summary::marker{ color: var(--teal-700); }
.badge{
display:inline-flex;
align-items:center;
gap:.4rem;
padding:.35rem .7rem;
border-radius:999px;
background: rgba(24,78,87,.12);
border:1px solid rgba(24,78,87,.18);
font-size:.9rem;
font-weight:600;
color: var(--teal-700);
transition: background .2s ease, border-color .2s ease;
}
.badge:hover{
background: rgba(24,78,87,.2);
border-color: rgba(24,78,87,.35);
}
/* 17b) Blogs & articles spotlight */
.media-articles{
display:grid;
gap: clamp(1.2rem, 3vw, 2.4rem);
}
.media-articles__intro{
max-width:58ch;
display:grid;
gap:.5rem;
}
.media-articles__grid{
display:grid;
gap: clamp(1rem, 2.4vw, 1.8rem);
}
@media (min-width:768px){
.media-articles__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.media-article{
position:relative;
display:grid;
gap:.65rem;
padding: clamp(1.1rem, 3vw, 1.6rem);
border-radius:20px;
border:1px solid rgba(60,79,118,.18);
background: radial-gradient(circle at top right, rgba(228,108,90,.16), transparent 55%),
radial-gradient(circle at bottom left, rgba(24,78,87,.16), transparent 60%),
#fff;
box-shadow: var(--shadow-1);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.media-article:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-2);
border-color: rgba(60,79,118,.3);
}
.media-article__tag{
display:inline-flex;
align-items:center;
justify-content:center;
padding:.2rem .7rem;
border-radius:999px;
background: rgba(24,78,87,.12);
border:1px solid rgba(24,78,87,.18);
font-weight:700;
font-size:.85rem;
text-transform:uppercase;
letter-spacing:.08em;
color: var(--teal-700);
}
.media-article__title{
margin:0;
font-size: clamp(1.25rem, 2.1vw, 1.55rem);
}
.media-article__source{ color: var(--text-600); }
.media-article__cta{
display:inline-flex;
align-items:center;
gap:.35rem;
font-weight:700;
color: var(--teal-700);
text-decoration:none;
border-bottom:2px solid rgba(24,78,87,.2);
width:fit-content;
transition: gap .18s ease, border-color .2s ease, color .2s ease;
}
.media-article__cta::after{
content:"›";
font-size:1rem;
}
.media-article__cta:hover{
gap:.5rem;
border-color: rgba(24,78,87,.45);
color: var(--teal-600);
}
/* 17c) Events layout tweaks */
.events-layout{
display:grid;
gap: clamp(1.4rem, 3vw, 2.4rem);
padding: clamp(1.4rem, 3vw, 2rem);
border-radius:20px;
border:1px solid var(--border-200);
background:#fff;
box-shadow: var(--shadow-1);
}
.events-layout__intro{
display:grid;
gap:.45rem;
max-width:60ch;
}
.events-layout__grid{
display:grid;
gap: clamp(1.2rem, 3vw, 2rem);
}
@media (min-width: 1024px){
.events-layout__grid{
grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr);
align-items:start;
gap: clamp(1.4rem, 3vw, 2.4rem);
}
.events-layout__left {
display: flex;
flex-direction: column;
gap: clamp(1.2rem, 3vw, 2rem);
}
}
/* Conference Gallery */
.conference-gallery {
display: none;
}
@media (min-width: 1024px) {
.conference-gallery {
display: block;
}
.conference-gallery__title {
font-size: 1.1rem;
font-weight: 700;
color: var(--char-900);
margin: 0 0 1rem;
letter-spacing: -0.01em;
}
.conference-gallery__grid {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.conference-photo {
margin: 0;
position: relative;
overflow: hidden;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid var(--border-200);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.conference-photo::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(24, 78, 87, 0.03), transparent 50%);
pointer-events: none;
z-index: 1;
}
.conference-photo:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
border-color: var(--teal-100);
}
.conference-photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 0.3s ease;
}
.conference-photo:hover img {
transform: scale(1.05);
}
/* Hide gallery if no images exist (using :empty pseudo-class won't work with img tags, so we use CSS to handle it via parent) */
.conference-gallery__grid:empty {
display: none;
}
.conference-gallery__grid:empty + * {
margin-top: 0;
}
/* If gallery has no valid images, hide the whole section */
.conference-gallery:has(.conference-gallery__grid:empty) {
display: none;
}
}
/* Mobile: ensure gallery is hidden */
@media (max-width: 959px) {
.conference-gallery {
display: none !important;
}
}
.events-card{
position:relative;
display:grid;
gap: clamp(.75rem, 2vw, 1.1rem);
padding: clamp(1.2rem, 3vw, 1.65rem);
border-radius:18px;
border:1px solid rgba(24,78,87,.18);
background: linear-gradient(140deg, rgba(234,243,244,.8), #fff);
box-shadow: var(--shadow-1);
overflow:hidden;
}
.events-card::after{
content:"";
position:absolute;
inset-inline: clamp(1.2rem, 2.5vw, 1.6rem);
bottom: clamp(1rem, 2.3vw, 1.4rem);
height:4px;
border-radius:999px;
background: linear-gradient(90deg, var(--mustard-500), var(--coral-500), var(--teal-700));
opacity:.35;
}
.events-card--upcoming{
background: radial-gradient(circle at top right, rgba(228,108,90,.16), transparent 55%),
radial-gradient(circle at bottom left, rgba(24,78,87,.18), transparent 60%),
#fff;
}
.events-card__header{
position:relative;
z-index:1;
display:grid;
gap:.35rem;
}
.events-card__title{
margin:0;
font-size: clamp(1.3rem, 2vw, 1.6rem);
}
.events-card__list{
position:relative;
z-index:1;
display:grid;
gap:.8rem;
margin:0;
padding:0;
list-style:none;
}
.events-card__list li{
display:grid;
gap:.35rem;
padding:.85rem .95rem;
border-radius:14px;
border:1px solid rgba(24,78,87,.12);
background: rgba(255,255,255,.9);
backdrop-filter: blur(6px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.events-card__list time{
font-weight:700;
letter-spacing:.02em;
color: var(--teal-700);
font-size:.95rem;
}
.events-card__list strong{
font-size:1.05rem;
}
.events-card__list span{
color: var(--text-600);
font-size:.9rem;
}
.events-card__list li.events-card__placeholder{
border-style:dashed;
border-color: rgba(24,78,87,.25);
background: rgba(234,243,244,.4);
}
.events-card__cta{
position:relative;
z-index:1;
display:inline-flex;
align-items:center;
gap:.35rem;
width:fit-content;
font-weight:700;
color: var(--teal-700);
text-decoration:none;
border-bottom:2px solid rgba(24,78,87,.25);
transition: gap .2s ease, border-color .2s ease, color .2s ease;
}
.events-card__cta::after{
content:"›";
font-size:1rem;
}
.events-card__cta:hover{
gap:.5rem;
color: var(--teal-600);
border-color: rgba(24,78,87,.45);
}
.events-timeline{
position:relative;
z-index:1;
display:grid;
gap:.75rem;
}
.events-timeline__title{
margin:0;
font-size: clamp(1.3rem, 2vw, 1.6rem);
}
/* 18) Sales: modern cards grouped by year */
.deal-list {
display: grid;
gap: .9rem;
}
.deal {
background: #fff; border: 1px solid var(--border-200); border-radius: 14px;
padding: 1rem 1.1rem; box-shadow: var(--shadow-1); display: grid; gap: .35rem;
}
.deal__year {
font-size: 0.85rem;
font-weight: 700;
color: var(--mustard-600);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
.deal__title { font-weight: 800; }
.deal__meta { color: var(--text-600); }
.deal__chips { display: flex; gap: .45rem; flex-wrap: wrap; }
.deal__terms { margin-top: .35rem; font-size: .95rem; line-height: 1.45; color: var(--char-700); font-weight: 600; }
.deal-window {
margin-top: 2.5rem;
margin-bottom: clamp(2rem, 4vw, 3rem);
padding: 1.5rem;
height: clamp(420px, 60vh, 620px);
overflow-y: auto;
border-radius: var(--radius);
border: 1px solid var(--border-200);
background: #fff;
box-shadow: var(--shadow-1);
display: grid;
gap: 2rem;
overscroll-behavior: contain;
scrollbar-color: var(--border-200) transparent;
}
.deal-window:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.deal-window::-webkit-scrollbar { width: 10px; }
.deal-window::-webkit-scrollbar-thumb { background: var(--border-200); border-radius: 999px; }
.deal-window::-webkit-scrollbar-thumb:hover { background: var(--char-700); }
.deal-year:first-of-type { margin-top: 0; }
@media (max-width: 720px){
.deal-window {
height: auto;
padding: 0;
border: 0;
box-shadow: none;
background: transparent;
width: min(100%, 600px);
margin-inline: auto;
}
}
.chip { padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--border-200); background: #fff; font-weight: 600; font-size: .9rem; }
.chip--cat { background: var(--mustard-300); border-color: var(--mustard-300); }
.chip--pub { background: var(--sage-100); }
.sales-layout{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, clamp(320px, 30vw, 520px));
gap: clamp(1.5rem, 5vw, 3.2rem);
align-items: stretch;
}
.sales-layout__aside{
align-self: stretch;
display: flex;
}
.sales-layout__aside .featured-highlights{
height: clamp(420px, 60vh, 620px);
}
@media (max-width: 1023px){
.sales-layout{
grid-template-columns: minmax(0, 1fr);
}
.sales-layout__aside{
order: -1;
}
.sales-layout__aside .featured-highlights{
margin-top: clamp(1.5rem, 4vw, 2.5rem);
height: auto;
}
}
.featured-highlights{
margin-top: 2.5rem;
padding: clamp(.5rem, 2vw, .9rem);
width: min(100%, 600px);
margin-inline: auto;
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow-1);
border: 1px solid var(--border-200);
display: flex;
flex-direction: column;
height: 100%;
}
.featured-highlights__top{
display: flex;
justify-content: space-between;
align-items: center;
gap: .5rem;
margin-bottom: clamp(.75rem, 2vw, 1.1rem);
}
.featured-highlights__controls{
display: flex;
gap: .5rem;
}
.featured-highlights__control{
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 999px;
border: 1px solid rgba(24,78,87,.22);
background: #fff;
color: var(--teal-700);
box-shadow: 0 12px 24px rgba(24,78,87,.15);
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.featured-highlights__control svg{
width: 18px;
height: 18px;
}
.featured-highlights__control:disabled{
opacity: .55;
box-shadow: none;
cursor: default;
pointer-events: none;
}
.featured-highlights__control:hover,
.featured-highlights__control:focus-visible{
transform: translateY(-1px);
box-shadow: 0 18px 32px rgba(24,78,87,.2);
}
.featured-highlights__control:focus-visible{
outline: 3px solid var(--focus);
outline-offset: 3px;
}
.featured-highlights__viewport{
position: relative;
flex: 1 1 auto;
overflow-x: hidden;
overflow-y: auto;
}
.featured-highlights__track{
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
transition: transform .45s ease;
will-change: transform;
}
.highlight-card{
display: grid;
gap: .45rem;
align-content: center;
padding: clamp(.15rem, .8vw, .35rem) clamp(.25rem, 1.2vw, .55rem) clamp(.35rem, 1.4vw, .6rem);
width: min(100%, 520px);
margin-inline: auto;
}
.highlight-card--media{
grid-template-columns: minmax(140px, clamp(190px, 32vw, 240px)) minmax(0, 1fr);
gap: clamp(.75rem, 1.6vw, 1.1rem);
align-items: center;
}
.highlight-card--media .highlight-card__media{
align-self: stretch;
max-width: clamp(190px, 32vw, 240px);
}
.highlight-card--media .media-frame{
padding-top: 0;
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
.highlight-card--media .media-thumb,
.highlight-card--media .media-thumb img{
height: 100%;
}
@media (max-width: 680px){
.highlight-card--media{
grid-template-columns: 1fr;
}
.highlight-card--media .highlight-card__media{
max-width: none;
}
.highlight-card--media .media-frame{
aspect-ratio: 16 / 9;
}
}
/* Stack highlight card vertically at 1024px-1279px when in narrow aside */
@media (min-width: 1024px) and (max-width: 1279px){
/* Stack all cards vertically */
.sales-layout__aside .highlight-card--media{
grid-template-columns: 1fr;
}
.sales-layout__aside .highlight-card--media .highlight-card__media{
max-width: 100%;
}
/* Video cards - maintain 16:9 aspect */
.sales-layout__aside .highlight-card--media .media-frame{
aspect-ratio: 16 / 9;
}
/* Book/image cards (no .media-frame) - constrain height */
.sales-layout__aside .highlight-card--media .highlight-card__media > img{
max-height: 160px;
width: auto;
margin: 0 auto;
display: block;
}
/* Smaller text for Client Successes */
.sales-layout__aside .featured-highlights h2{
font-size: 1.25rem;
}
.sales-layout__aside .highlight-card__body h3{
font-size: 0.95rem;
}
.sales-layout__aside .highlight-card__body .meta{
font-size: 0.75rem;
}
.sales-layout__aside .highlight-card__body p:not(.meta){
font-size: 0.8rem;
}
}
/* 1280px+: Adjustments for Client Successes */
@media (min-width: 1280px){
/* Stack cards vertically */
.sales-layout__aside .highlight-card--media{
grid-template-columns: 1fr;
}
.sales-layout__aside .highlight-card--media .highlight-card__media{
max-width: 100%;
}
/* Video cards - maintain 16:9 aspect */
.sales-layout__aside .highlight-card--media .media-frame{
aspect-ratio: 16 / 9;
}
/* Book/image cards - constrain height */
.sales-layout__aside .highlight-card--media .highlight-card__media > img{
max-height: 180px;
width: auto;
margin: 0 auto;
display: block;
}
/* Smaller text for Client Successes */
.sales-layout__aside .featured-highlights h2{
font-size: 1.35rem;
}
.sales-layout__aside .highlight-card__body h3{
font-size: 1rem;
}
.sales-layout__aside .highlight-card__body .meta{
font-size: 0.8rem;
}
.sales-layout__aside .highlight-card__body p:not(.meta){
font-size: 0.85rem;
}
}
.highlight-card[data-featured-slide]{
opacity: 0;
pointer-events: none;
transition: opacity .35s ease;
}
.highlight-card[data-featured-slide].is-active{
opacity: 1;
pointer-events: auto;
}
.featured-highlights__dots{
display: flex;
justify-content: center;
gap: .5rem;
margin-top: clamp(.55rem, 2vw, .85rem);
}
.featured-highlights__dot{
width: 10px;
height: 10px;
border-radius: 999px;
border: 0;
background: var(--border-200);
padding: 0;
cursor: pointer;
transition: background-color .2s ease, width .2s ease;
}
.featured-highlights__dot[aria-pressed="true"]{
width: 22px;
background: var(--teal-600);
}
.featured-highlights__dot:focus-visible{
outline: 3px solid var(--focus);
outline-offset: 3px;
}
@media (max-width: 720px){
.featured-highlights__top{
flex-direction: column;
align-items: flex-start;
}
.featured-highlights__controls{
align-self: stretch;
justify-content: flex-end;
}
}
.highlight-card__media{
position: relative;
}
.highlight-card__media img{
width: 100%;
border-radius: var(--radius-sm);
display: block;
box-shadow: var(--shadow-1);
}
.media-frame{
position: relative;
padding-top: 56.25%;
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: var(--shadow-1);
}
.media-frame iframe{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.media-thumb{
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--radius-sm);
overflow: hidden;
background: transparent;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.media-thumb img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.media-thumb__icon{
position: absolute;
inset: 0;
display: grid;
place-items: center;
pointer-events: none;
}
.media-thumb__icon::before{
content: "";
width: clamp(3rem, 6vw, 3.5rem);
height: clamp(3rem, 6vw, 3.5rem);
border-radius: 999px;
background: rgba(24,78,87,0.82);
box-shadow: 0 12px 24px rgba(0,0,0,0.2);
display: block;
position: relative;
transition: background-color .2s ease, transform .2s ease;
}
.media-thumb__icon::after{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: clamp(1.05rem, 2.5vw, 1.35rem);
height: clamp(1.05rem, 2.5vw, 1.35rem);
background: #fff;
clip-path: polygon(30% 18%, 30% 82%, 78% 50%);
transform: translate(-50%, -50%);
transition: transform .2s ease;
}
.media-thumb:hover .media-thumb__icon::before,
.media-thumb:focus-visible .media-thumb__icon::before{
background: rgba(24,78,87,0.92);
transform: scale(1.04);
}
.media-thumb:hover .media-thumb__icon::after,
.media-thumb:focus-visible .media-thumb__icon::after{
transform: translate(-50%, -50%) scale(1.04);
}
.media-thumb:focus-visible{
outline: 3px solid var(--focus);
outline-offset: 4px;
}
.highlight-card__body{
display: grid;
gap: .5rem;
align-self: center;
}
.highlight-card__body h3{
font-family: var(--font-display);
font-size: clamp(1.05rem, 2vw, 1.3rem);
line-height: 1.3;
}
.highlight-card blockquote{
margin: 0;
font-style: italic;
line-height: 1.5;
}
/* Utility */
.stack-sm > * + *{ margin-top:.35rem; }
.stack > * + *{ margin-top:.7rem; }
.stack-lg > * + *{ margin-top:1rem; }
.stack--agency{
display:flex;
flex-direction:column;
height:100%;
gap: clamp(.85rem, 2vw, 1.2rem);
}
.stack--agency > * + *{ margin-top:0; }
.mt-2{ margin-top: .5rem;}
.mt-3{ margin-top: .75rem;}
.mt-4{ margin-top: 1rem;}
.mt-6{ margin-top: 1.5rem;}
.center{ text-align:center; }
.hidden{ display:none !important; }
/* ...everything above stays exactly as your current file... */
/* Utility */
.stack-sm > * + *{ margin-top:.35rem; }
.stack > * + *{ margin-top:.7rem; }
.stack-lg > * + *{ margin-top:1rem; }
.mt-2{ margin-top: .5rem;}
.mt-3{ margin-top: .75rem;}
.mt-4{ margin-top: 1rem;}
.mt-6{ margin-top: 1.5rem;}
.center{ text-align:center; }
.hidden{ display:none !important; }
/* About portrait - fill the card, but make the card itself ~10% smaller */
.about-portrait{
/* keep the natural height (no stretch) and prevent right-edge clipping */
align-self: start; /* in case a different page overrides align-items */
justify-self: end; /* hug the right edge of the grid column */
width: 100%; /* allow the card to fill the column if needed */
max-width: clamp(360px, 90%, 560px);
/* ^ roughly 90% of the available column on large screens,
with sensible min/max so it doesn't get too small or too big */
scale: 0.95; /* make the card itself a bit smaller */
}
.about-portrait > picture,
.about-portrait > img{
width: 100%; /* image/picture fills the card */
height: auto; /* maintain natural aspect ratio */
display: block; /* remove inline-image gaps */
}
.about-portrait img{
width: 100%;
height: auto;
display: block;
}
/* Desktop layout: portrait on the right, text on the left */
@media (min-width: 1024px) {
.section--about-hero .grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: var(--space-lg);
}
.about-hero-title {
grid-column: 1 / -1;
grid-row: 1;
}
.section--about-hero .stack {
grid-column: 1;
grid-row: 2;
align-self: start;
}
.about-portrait {
grid-column: 2;
grid-row: 2;
align-self: start;
scale: 1; /* Override the 0.95 scale for desktop alignment */
}
/* Remove top border/padding from portrait image to align with text */
.about-portrait > picture,
.about-portrait > img {
margin-top: 0;
vertical-align: top;
display: block;
}
.about-portrait img {
margin-top: 0;
vertical-align: top;
display: block;
}
.how-i-work-card {
grid-column: 1 / -1;
grid-row: 3;
}
/* Make stats and CTA panel span full width at all desktop sizes */
.section--about-hero .stats,
.section--about-hero .about-cta-panel {
width: calc(200% + var(--space-lg));
}
}
/* 1280px+: Clean 2-column layout */
@media (min-width: 1280px) {
.section--about-hero .stats {
width: 100%;
}
/* CTA panel spans full width */
.section--about-hero .about-cta-panel {
width: calc(200% + var(--space-lg));
}
.about-portrait {
align-self: start;
}
.about-portrait img {
width: 100%;
height: auto;
}
}
/* 1024px-1279px: Tighter sizing for small laptops */
@media (min-width: 1024px) and (max-width: 1279px) {
/* Stats stays in left column to maintain spacing from portrait */
.section--about-hero .stats {
width: 100%;
}
/* Smaller button text in CTA panel */
.about-cta-panel__actions .btn {
font-size: 0.875rem;
padding: 0.65rem 1rem;
}
/* Fit all 4 process steps in one row */
.process-steps {
grid-template-columns: repeat(4, 1fr);
gap: 0.85rem;
}
.process-step {
padding: 0.9rem;
gap: 0.65rem;
}
.process-step__badge {
width: 36px;
height: 36px;
font-size: 0.8rem;
}
.process-step__body h3 {
font-size: 1rem;
margin-bottom: 0.25rem;
}
.process-step__body p {
font-size: 0.85rem;
line-height: 1.45;
}
.how-i-work-note {
padding: 0.75rem 1rem;
gap: 0.6rem;
}
.how-i-work-note .meta {
font-size: 0.9rem;
}
/* Working with Root Literary section - adjust grid ratio */
.section:has(.stack--agency) > .container.grid-2 {
grid-template-columns: 1.15fr 0.85fr;
gap: 1.5rem;
}
/* Book carousel adjustments */
.book-carousel-card .card__body {
padding: 0.75rem;
gap: 0.65rem;
}
.book-carousel__title {
font-size: 1.05rem;
margin-bottom: 0.65rem;
padding-bottom: 0.5rem;
}
.book-carousel__nav {
width: 34px;
height: 34px;
}
.book-carousel__nav svg {
width: 14px;
height: 14px;
}
.book-carousel__viewport {
padding: 0.5rem 0;
}
.book-carousel__item {
padding: 0 0.35rem;
}
.book-carousel__dots {
gap: 0.3rem;
}
.book-carousel__dot {
width: 22px;
height: 5px;
}
/* Trust cards - tighter spacing */
.card--accent .card__body {
padding: 0.85rem;
}
.checklist {
gap: 0.85rem;
}
.checklist li {
gap: 0.5rem;
font-size: 0.82rem;
}
.checklist h4 {
font-size: 0.95rem;
}
.checklist p {
font-size: 0.8rem;
line-height: 1.45;
}
.check-icon {
width: 20px;
height: 20px;
}
}
/* Tablet: stacked layout with centered portrait */
@media (min-width: 768px) and (max-width: 1023px) {
.section--about-hero .grid {
display: flex;
flex-direction: column;
}
.about-hero-title {
order: 1;
}
.about-portrait {
order: 2;
max-width: 100%;
width: 100%;
height: 520px;
margin: 0 0 1.5rem;
}
.about-portrait > picture {
display: block;
width: 100%;
height: 100%;
}
.about-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 10%;
}
.section--about-hero .grid > article.stack {
order: 3;
}
.section--about-hero .how-i-work-card {
order: 4;
}
/* Stack Background & Map cards */
.section:has(.client-map-card) > .container.grid-2 {
grid-template-columns: 1fr;
}
/* Stack Working with Root Literary section */
.section:has(.stack--agency) > .container.grid-2 {
grid-template-columns: 1fr;
}
.book-carousel-card {
width: 100%;
}
}
/* On small screens let the portrait use the full column width */
@media (max-width: 767px){
.section--about-hero .grid {
display: flex;
flex-direction: column;
}
.about-hero-title {
order: -3;
margin-bottom: 0.75rem;
}
.about-portrait{
max-width: 100%;
width: 100%;
align-self: stretch;
margin: 0 0 0.35rem;
scale: 1;
order: -2; /* Portrait after title */
}
.section--about-hero .stack {
order: 0;
display: flex;
flex-direction: column;
}
.section--about-hero .stack > * {
margin-top: 0;
margin-bottom: 0;
}
.section--about-hero .stack .lead {
margin-bottom: 1rem;
}
.section--about-hero .stack .lead:nth-of-type(1) {
order: 1;
}
.section--about-hero .stack .lead:nth-of-type(2) {
order: 2;
}
.section--about-hero .stack .lead:nth-of-type(3) {
order: 3;
}
.section--about-hero .stats {
order: -1; /* Stats before intro text */
margin-bottom: 1.25rem;
}
.section--about-hero .about-cta-panel {
order: 4;
margin-top: 1.25rem;
}
.how-i-work-card {
order: 1;
}
}
@media (min-width: 501px) and (max-width: 767px){
.about-portrait{
max-width: 100%;
height: 495px;
}
.about-portrait img{
object-fit: cover;
object-position: center top;
height: 100%;
width: 100%;
}
}
@media (max-width: 500px){
.about-portrait{
max-width: 100%;
margin: 0 0 0.35rem;
height: 380px;
}
.about-portrait > picture,
.about-portrait > img {
height: 100%;
}
.about-portrait img {
object-fit: cover;
object-position: center top;
height: 100%;
width: 100%;
}
}
/* =========================
BOOK COVER OVERLAY BADGES
========================= */
.book__media {
position: relative;
aspect-ratio: 2/3;
overflow: hidden;
}
.book__media > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.book__badges {
position: absolute;
top: clamp(8px, 1.8vw, 14px);
left: clamp(8px, 1.8vw, 14px);
display: flex;
flex-direction: column;
gap: clamp(6px, 1.2vw, 10px);
z-index: 2;
}
.book__badge {
--badge-accent: var(--teal-600);
--badge-ink: #ffffff;
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .32rem .6rem;
font-weight: 700;
font-size: .7rem;
line-height: 1.2;
text-shadow: 0 1px 2px rgba(15,23,42,.3);
letter-spacing: .2px;
border-radius: 999px;
color: var(--char-900);
background: rgba(255,255,255,.92);
border: 1px solid rgba(15,23,42,.08);
box-shadow: 0 6px 18px rgba(15,23,42,.12);
backdrop-filter: blur(6px);
max-width: min(78%, 210px);
text-align: left;
transition: transform .18s ease, box-shadow .18s ease;
}
.book__badge > span {
display: inline;
text-wrap: balance;
}
.book__badge svg {
width: .9rem;
height: .9rem;
padding: .2rem;
border-radius: 999px;
flex-shrink: 0;
background: var(--badge-accent);
color: var(--badge-ink);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.book__badge svg * {
stroke: currentColor;
}
.book:hover .book__badge,
.book:focus-within .book__badge {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(15,23,42,.16);
}
/* Variants */
.badge--award {
--badge-accent: #d4a017;
--badge-ink: #3d2c00;
color: #3d2c00;
}
.badge--reese {
--badge-accent: #f7a65b;
--badge-ink: #4a2500;
color: #4a2500;
}
.badge--bestseller {
--badge-accent: var(--indigo-600);
--badge-ink: #ffffff;
color: var(--indigo-900);
}
.badge--more {
--badge-accent: var(--char-500);
--badge-ink: #ffffff;
}
@media (max-width: 640px) {
.book__badge {
font-size: .58rem;
padding: .24rem .48rem;
gap: .35rem;
max-width: min(75%, 170px);
}
.book__badge svg {
width: .72rem;
height: .72rem;
padding: .16rem;
}
}
/* =============== NEW BADGE SHAPES =============== */
/* Corner banner (top-right) - Diagonal wraparound effect */
.book__ribbon{
position: absolute;
z-index: 3;
top: -6px;
right: -6px;
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .55rem 1rem .55rem .9rem;
max-width: min(75%, 200px);
font-size: .62rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: .16px;
text-transform: uppercase;
text-align: left;
text-wrap: balance;
color: rgba(23,35,48,.92);
background: linear-gradient(135deg, #fff4c4, #e8c164);
box-shadow:
0 3px 10px rgba(15,23,42,.25),
inset 0 1px 0 rgba(255,255,255,.4);
transform: rotate(-1deg);
transform-style: preserve-3d;
transform-origin: top right;
clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%);
}
/* Shine effect */
.book__ribbon::before{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
mix-blend-mode: screen;
pointer-events: none;
}
/* Folded-under edge (left side) */
.book__ribbon::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 8px;
height: 100%;
background: linear-gradient(to right, rgba(180,110,35,.95), rgba(209,142,49,.7));
transform-origin: left;
transform: rotateY(90deg) translateZ(-1px);
box-shadow: inset -1px 0 2px rgba(0,0,0,.3);
}
.book__ribbon svg{
position: relative;
width: .88rem;
height: .88rem;
flex-shrink: 0;
padding: .16rem;
border-radius: 999px;
background: rgba(255,255,255,.65);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
color: rgba(23,35,48,.85);
}
.book__media:has(.book__ribbon) .book__badges{ top: clamp(34px, 4vw, 58px); left: clamp(10px, 2vw, 16px); }
/* Ribbon color variants */
.book__ribbon.badge--bestseller{
background: linear-gradient(135deg, #dceeff, #b7d8ff);
color: #0f2538;
}
.book__ribbon.badge--award{
color: #3a2600;
background: linear-gradient(135deg, #fff4c4, #e0b548);
}
.book__ribbon.badge--award{
color: #3a2600;
background: linear-gradient(135deg, #fff3c1, #e0b548);
}
/* Circular seal (medallion), bottom-right */
.book__seal{
position: absolute; z-index: 3;
right: 12px; bottom: 12px;
width: 125px; height: 125px; border-radius: 50%;
box-sizing: border-box;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
transition: padding 0.3s ease, gap 0.3s ease;
text-align: center;
font-weight: 800; font-size: .72rem; line-height: 1.3;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.45);
background: url('../img/badges/seal.png') center/cover no-repeat;
box-shadow:
0 0 0 3px #fff,
0 10px 24px rgba(0,0,0,.18);
border: 1px solid rgba(0,0,0,.08);
}
.book__seal.badge--bestseller{
/* cooler, bestseller vibe */
color: rgba(11,20,33,.88);
}
.book__seal svg{
width: 0;
height: 0;
flex-shrink: 0;
color: inherit;
opacity: 0;
transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}
.book:hover .book__seal,
.book:focus-within .book__seal{
padding: 20px 18px;
gap: 6px;
}
.book:hover .book__seal svg,
.book:focus-within .book__seal svg{
width: 1.35rem;
height: 1.35rem;
opacity: 1;
}
.book__seal > span{
display: block;
width: 100%;
text-wrap: balance;
word-break: break-word;
opacity: 0;
transform: scale(0.9);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.book:hover .book__seal > span,
.book:focus-within .book__seal > span{
opacity: 1;
transform: scale(1);
}
/* If you have an image (e.g., NYT rosette), use it as the seal face */
.book__seal--img{
background-size: cover; background-position: center;
color: transparent; text-indent: -9999px; /* hide text when using an image */
}
/* Hover lift (match your existing cover hover motion) */
.book:hover .book__ribbon,
.book:focus-within .book__ribbon,
.book:hover .book__seal,
.book:focus-within .book__seal{
filter: brightness(1.02);
}
/* Mobile tuning */
@media (max-width: 540px){
.book__ribbon{
.book__media:has(.book__ribbon) .book__badges{ top: clamp(38px, 11vw, 52px); left: 12px; }
top: 0;
right: 12px;
padding: .34rem .7rem .3rem .8rem;
max-width: min(78%, 170px);
font-size: .54rem;
}
font-size: .56rem;
}
.book__seal{
width: 85px; height: 85px;
padding: 0;
gap: 0;
font-size: .58rem;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
}
/* Lock header height sitewide */
.header .nav{
min-height: 64px; /* guarantees the same vertical size on all pages */
padding-block: .9rem; /* keep your existing comfy padding */
}
/* Give non-hero pages (e.g., About) the same top offset as Home's hero */
.section--match-home{
/* Home stacks .section padding with extra .hero padding.
.section: clamp(3rem, 5vw, 5rem)
.hero: clamp(2.6rem, 6vw, 4.8rem)
Sum ≈ clamp(5.6rem, 11vw, 9.8rem)
*/
padding-top: clamp(5.6rem, 11vw, 9.8rem);
}
/* === About: KPI row + two-column checklist === */
.kpis{
display:grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap:.75rem;
margin:.9rem 0 1.1rem;
}
.kpi{
background:#fff;
border:1px solid var(--border-200);
border-radius:12px;
box-shadow: var(--shadow-1);
padding:.75rem .9rem;
}
.kpi b{ display:block; font-weight:800; }
.kpi span{ color: var(--text-600); font-size:.92rem; }
@media (max-width: 1023px){ .kpis{ grid-template-columns: repeat(2,1fr); } }
/* Let long checklists tile into two columns on wide screens */
.checklist--cols-2{
display:grid;
grid-template-columns: 1fr 1fr;
gap:.75rem 1rem; /* row/column gap */
}
@media (max-width: 1023px){ .checklist--cols-2{ grid-template-columns: 1fr; } }
/* About hero: slightly tighter than the home hero spacing */
.section--about-hero{
padding-top: clamp(3.2rem, 7vw, 6rem);
}
/* Title spans full width on desktop */
.about-hero-title {
grid-column: 1 / -1;
margin-bottom: clamp(1.1rem, 2.8vw, 1.8rem);
}
/* Give the hero heading extra breathing room from the copy that follows */
.section--about-hero .stack > :first-child{
margin-bottom: clamp(1.1rem, 2.8vw, 1.8rem);
}
/* === About: compact stat tiles (deals, books, territories, etc.) === */
.stats{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: .5rem;
margin: clamp(1.3rem, 4vw, 2rem) 0 clamp(1.4rem, 4vw, 2.2rem);
}
.stat{
background:#fff; border:1px solid var(--border-200);
border-radius: var(--radius); box-shadow: var(--shadow-1);
padding: .85rem 1rem;
display:grid; gap:.25rem;
}
.stat__num{
font-weight: 900; font-size: clamp(1.5rem, 2.8vw, 1.9rem); line-height: 1.1;
/* gradient text with readable fallback */
color: var(--teal-700);
background: linear-gradient(140deg, var(--teal-700), var(--indigo-500));
-webkit-background-clip: text; background-clip: text;
}
.stat__label{ font-weight: 700; }
.stat__meta{ color: var(--text-600); font-size: .92rem; }
/* === Publisher logo grid (full-width section) === */
.logo-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap: clamp(1rem, 2.8vw, 2.5rem);
margin-top: 0;
margin-bottom: clamp(3.5rem, 6vw, 5rem);
}
@media (min-width: 1024px){
.logo-grid{ flex-wrap: nowrap; }
}
.placements-cta{ margin-top: clamp(3.5rem, 6vw, 5rem); }
/* No card background/border/shadow - logos float on the section bg */
.logo{
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
height: auto;
display: grid;
place-items: center;
flex: 0 1 160px;
}
/* Bigger logos + "erase" white boxes from non-transparent PNGs */
.logo img{
max-height: clamp(82px, 8vw, 110px); /* larger default size across breakpoints */
width: auto;
object-fit: contain;
mix-blend-mode: normal; /* white areas blend into the background */
filter: grayscale(100%) contrast(1.1) opacity(.9);
transition: filter .2s ease, opacity .2s ease, transform .12s ease;
}
.logo:hover img{
filter: none;
opacity: 1;
transform: translateY(-2px);
}
/* Ensure blending works cleanly on this section */
section[aria-labelledby="placements-heading"] .container { isolation: isolate; }
/* Optional: scale up on very large screens */
@media (min-width: 1440px){
.logo img{ max-height: 120px; }
}
#placements-heading{
margin-bottom: clamp(2.4rem, 5vw, 3.8rem);
display: inline-block;
}
#placements-heading.u-accent::after{
margin-top: .3rem;
}
/* Submissions enhancements */
.submission-aux{
display:grid;
gap: clamp(1.2rem, 3vw, 1.8rem);
align-content:start;
}
.submission-media{
overflow:hidden;
}
.submission-media__video-wrapper{
position:relative;
overflow:hidden;
border-radius: var(--radius) var(--radius) 0 0;
}
.submission-media__video{
width:100%;
display:block;
aspect-ratio: 16 / 10;
object-fit:cover;
}
.submission-media__caption{
padding: clamp(1rem, 2vw, 1.35rem);
display:grid;
gap:.4rem;
}
.materials-card .card__body{
display:grid;
gap: clamp(1.1rem, 2.2vw, 1.6rem);
}
.materials-grid{
display:grid;
gap: clamp(1rem, 2.4vw, 1.4rem);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.material-item{
display:grid;
grid-template-columns: 48px 1fr;
gap:.85rem;
align-items:start;
padding: clamp(.85rem, 2vw, 1.15rem);
border-radius: var(--radius-sm);
border:1px solid rgba(24,78,87,.18);
background: rgba(24,78,87,.06);
}
.material-item__icon{
width:48px;
height:48px;
display:grid;
place-items:center;
border-radius:12px;
background: linear-gradient(135deg, rgba(24,78,87,.12), rgba(60,79,118,.18));
color: var(--teal-700);
}
.material-item__icon svg{
width:22px;
height:22px;
}
.material-item h4{
margin:0 0 .2rem;
font-size:1.02rem;
}
.material-item p{
margin:0;
font-size:.94rem;
color: var(--text-600);
}
@media (max-width: 1023px){
.submission-aux{
order:-1;
}
.submission-media__video{
aspect-ratio: 16 / 9;
}
}
@media (max-width: 640px){
.material-item{
grid-template-columns: 40px 1fr;
}
.material-item__icon{
width:40px;
height:40px;
border-radius:10px;
}
.material-item__icon svg{
width:18px;
height:18px;
}
}
/* === Submissions: sticky page overview (tabs) === */
.section-links {
position: sticky;
top: var(--sticky-nav-offset);
z-index: 1000;
background: #fff;
border-bottom: 1px solid var(--border-200);
}
.section-links__row {
padding: .6rem 0;
display: flex;
gap: .5rem;
overflow-x: auto;
scrollbar-width: thin;
}
.chip--tab { text-decoration: none; }
.chip--tab[aria-current="true"] {
color: rgba(255, 255, 255, 0.952);
background: var(--teal-700);
border-color: var(--teal-700);
}
.chip--cta { font-weight: 800; }
/* === Submissions: reduce exits from the funnel === */
.page--submissions .brand[aria-disabled="true"] {
pointer-events: none; cursor: default;\n pointer-events: none; opacity: 1;
}
/* === PM screenshot callouts === */
.pm-figure { position: relative; display: block; overflow: hidden; border-bottom: 1px solid var(--border-200); }
.pm-figure img { display: block; width: 100%; height: auto; }
.pm-callout {
position: absolute;
display: grid; gap: .2rem;
padding: .45rem .6rem;
background: #fff;
border: 1px solid var(--border-200);
border-radius: 10px;
box-shadow: var(--shadow-1);
font-weight: 700;
}
.pm-callout span { font-weight: 600; color: var(--text-600); font-size: .9rem; }
/* Adjust the positions as needed to match your screenshot composition */
.pm-callout--site { top: 12%; left: 6%; }
.pm-callout--qm { top: 12%; right: 6%; }
/* === Minor hero tuning === */
.submissions-hero .lead { max-width: 60ch; }
.submissions-hero .card .lead { max-width: none; }
/* === Submissions page refinements === */
.page--submissions .submission-media {
display:flex;
flex-direction:column;
overflow:hidden;
background: linear-gradient(180deg, rgba(234,243,244,0.45) 0%, #fff 60%);
height:100%;
}
.page--submissions .submission-media__figure {
position:relative;
flex:1 1 auto;
display:flex;
overflow:hidden;
border-radius: var(--radius) var(--radius) 0 0;
background:#e0eaec;
min-height: clamp(320px, 48vw, 520px);
}
.page--submissions .submission-media__figure img {
width:100%;
height:100%;
object-fit:cover;
transition: transform .45s ease;
}
.page--submissions .submission-media__figure:hover img,
.page--submissions .submission-media__figure:focus-within img {
transform: scale(1.05);
}
.page--submissions .submission-media__caption {
margin-top:auto;
padding: clamp(1rem, 2vw, 1.35rem);
display:grid;
gap: clamp(.6rem, 1.2vw, .85rem);
background: rgba(255,255,255,0.98);
}
.page--submissions .submission-aux {
gap: clamp(1.2rem, 3vw, 1.9rem);
}
.page--submissions .submissions-hero .grid {
align-items:stretch;
}
.page--submissions .submissions-hero .stack {
display:flex;
flex-direction:column;
gap: clamp(1rem, 2.6vw, 1.5rem);
height:100%;
}
.page--submissions .submissions-hero .stack > * + * {
margin-top:0;
}
.page--submissions .submission-flow {
list-style:none;
margin: clamp(1.4rem, 2vw, 1.7rem) 0 0;
padding:0;
display:flex;
flex-direction:column;
gap: clamp(1rem, 2.4vw, 1.5rem);
flex-grow:1;
}
.page--submissions .submission-flow__item {
display:grid;
grid-template-columns: auto 1fr;
gap: clamp(1rem, 2vw, 1.25rem);
align-items:flex-start;
padding: clamp(1.1rem, 2.1vw, 1.45rem);
background: linear-gradient(150deg, rgba(255,255,255,0.92) 0%, rgba(234,243,244,0.9) 65%, rgba(250,247,239,0.97) 100%);
border-radius: 20px;
border:1px solid rgba(24,78,87,0.12);
box-shadow: 0 22px 48px rgba(24,78,87,0.12);
position:relative;
isolation:isolate;
}
.page--submissions .submission-flow__item::before {
content:"";
position:absolute;
inset:0;
border-radius:20px;
background: linear-gradient(135deg, rgba(228,108,90,0.14), rgba(31,94,105,0.12));
opacity:0;
transition: opacity .25s ease, transform .25s ease;
z-index:-1;
}
.page--submissions .submission-flow__item:hover::before,
.page--submissions .submission-flow__item:focus-within::before {
opacity:1;
transform: translateY(-2px);
}
.page--submissions .submission-flow__head {
position:relative;
display:grid;
place-items:center;
width:54px;
aspect-ratio:1;
border-radius:50%;
background: linear-gradient(145deg, var(--coral-500), var(--mustard-500));
color:#fff;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
box-shadow: 0 16px 30px rgba(228,108,90,0.32);
}
.page--submissions .submission-flow__head::after {
content:"";
position:absolute;
left:50%;
top:100%;
width:2px;
height: clamp(1.2rem, 4vw, 1.8rem);
background: linear-gradient(to bottom, rgba(228,108,90,0.35), rgba(31,94,105,0.2));
transform: translateX(-50%);
}
.page--submissions .submission-flow__item:last-child .submission-flow__head::after {
display:none;
}
.page--submissions .submission-flow__body h3 {
margin:0 0 .35rem;
font-size: clamp(1.18rem, 2vw, 1.34rem);
}
.page--submissions .submission-flow__body p {
margin:0;
color: var(--text-600);
font-size:.98rem;
line-height:1.65;
max-width:50ch;
}
.page--submissions .submissions-hero .stack .mt-3 {
margin-top:auto;
padding-top: clamp(1.2rem, 2.8vw, 1.8rem);
}
.page--submissions #checklist .stack > * + *,
.page--submissions #why-pm .stack > * + * {
margin-top: clamp(.9rem, 2.4vw, 1.35rem);
}
.page--submissions .section-links {
top: var(--header-height);
}
@media (max-width: 1023px) {
.page--submissions .section-links {
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
z-index: 1100;
}
/* Add spacing so first section isn't hidden behind fixed nav */
.page--submissions .submissions-hero {
padding-top: calc(2.5rem + 90px) !important;
}
}
@media (max-width: 1023px) {
.page--submissions .submission-aux {
order:-1;
}
.page--submissions .submission-media__figure {
min-height: clamp(260px, 62vw, 420px);
}
}
/* Mobile: Reorder submissions hero so animation appears between heading and steps */
@media (max-width: 767px) {
.page--submissions .submissions-hero .grid {
display: flex;
flex-direction: column;
}
.page--submissions .submissions-hero .stack {
display: contents; /* Unwrap so children become direct flex children */
}
.page--submissions .submissions-hero h1 {
order: 1; /* Heading first */
margin-bottom: 0; /* No extra margin - animation has built-in spacing */
}
.page--submissions .submissions-hero figure {
order: 2; /* Animation second (between heading and steps) */
margin: 0; /* No margin - animation file has built-in transparent space */
max-height: 300px; /* Limit size on mobile */
overflow: hidden; /* Clip the cropped areas */
}
.page--submissions .submissions-hero figure img {
max-height: 300px;
width: auto !important;
max-width: 100% !important;
object-fit: contain;
margin: -1.5rem 0; /* Negative margins to crop transparent space top/bottom */
}
.page--submissions .submissions-hero .submission-flow {
order: 3; /* Steps third */
}
}
/* Tablet: Keep submissions hero stacked with animation above steps */
@media (min-width: 768px) and (max-width: 1023px) {
.page--submissions .submissions-hero .grid {
display: flex;
flex-direction: column;
}
.page--submissions .submissions-hero .stack {
display: contents;
}
.page--submissions .submissions-hero h1 {
order: 1;
}
.page--submissions .submissions-hero figure {
order: 2;
max-width: 400px;
max-height: 340px;
overflow: hidden;
margin: 0 auto 1rem;
}
.page--submissions .submissions-hero figure img {
margin: -0.5rem 0;
}
.page--submissions .submissions-hero .submission-flow {
order: 3;
}
/* Stack Ready to Submit section */
.page--submissions #ready .grid-2 {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.page--submissions .submission-flow__item {
grid-template-columns: 1fr;
padding: clamp(1rem, 5vw, 1.25rem);
}
.page--submissions .submission-flow__head {
width:48px;
margin-bottom:.4rem;
}
.page--submissions .submission-flow__head::after {
left:24px;
}
}
.page--submissions section[id] {
scroll-margin-top: calc(64px + 3rem);
}
.page--media-events section[id],
.page--media-events [id*="-heading"] {
scroll-margin-top: calc(64px + 3rem);
}
/* refine No Way, Wash Day frame */
.book__media:has(> img[src*="no-way-wash-day"]){
/* slimmer mat so it doesn't feel boxed-in */
padding: clamp(8px, 2.2%, 12px);
border-radius: 14px;
/* warmer paper tone + subtle hairline */
background: #faf6ef; /* adjust if your token exists e.g., var(--paper) */
border: 1px solid rgba(24,78,87,.12);
box-shadow: 0 8px 20px rgba(0,0,0,.08); /* lighter than neighbors */
}
.book__media:has(> img[src*="no-way-wash-day"]) > img{
object-fit: contain;
border-radius: 10px; /* inner rounding to match card */
box-shadow: 0 0 0 1px rgba(0,0,0,.05);/* tiny inner line for definition */
background: transparent;
}
/* ========================================
LARGE DESKTOP OPTIMIZATION (1440px+)
======================================== */
@media (min-width: 1440px){
/* Increased section padding for better breathing room on large monitors */
.section {
padding: clamp(5rem, 6vw, 7rem) 0;
}
/* Grid gap reaches maximum */
.grid {
gap: 2rem;
}
}