/* ============================================================ PURR & ERNIE — Media Kit 2-accent system. Palette + fonts are token-driven so they can be swapped from the Tweaks panel (or by editing the tokens below). HOW TO EDIT BY HAND: • Colors → change the values under :root (default palette), or set . • Fonts → set / data-font-body="...">, or change --font-display / --font-body in :root. Everything else inherits from these tokens. ============================================================ */ :root { /* ---- fonts (match page 1: Noto Sans headings + Quicksand accents) ---- */ --font-display: "Noto Sans"; --font-body: "Hanken Grotesk"; --font-script: "Quicksand"; /* ---- DEFAULT PALETTE · "Emerald & Gold" (deep emerald bg, gold accent words) ---- */ --bg: #0E4334; --surface: #134F3C; --surface-2: #0B3A2D; --ink: #F3EBD4; --ink-soft: #B9CBBB; --ink-faint: #7E9A86; --line: #245C49; --fill: #0A3225; /* strong fill (buttons, CTA band, filled tiles) */ --on-fill: #F3EBD4; /* text on the strong fill */ --c1: #EAC56A; /* gold */ --c1-deep: #F4D789; /* bright gold — accent words */ --c1-tint: #1C5240; --c2: #D6A645; /* amber gold */ --c2-deep: #EFCB76; /* light amber — accent words */ --c2-tint: #123F30; /* type scale */ --t-mega: clamp(56px, 8.5vw, 104px); --t-h1: clamp(34px, 4.6vw, 56px); --t-h2: clamp(26px, 3vw, 38px); --t-h3: 22px; --t-body: 17px; --t-small: 14px; --t-eyebrow: 13px; --radius: 22px; --radius-sm: 14px; --pad: clamp(28px, 5vw, 72px); } /* ---- ALTERNATE PALETTES (full themes) ---- */ html[data-palette="white"] { --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5F7FA; --ink:#262A2E; --ink-soft:#5C636B; --ink-faint:#98A0A8; --line:#E6E9EE; --fill:#262A2E; --on-fill:#FFFFFF; --c1:#9CC7E4; --c1-deep:#3E7CA0; --c1-tint:#EAF3FB; --c2:#F4DC8A; --c2-deep:#B08C1E; --c2-tint:#FBF4D8; } html[data-palette="cream"] { --bg:#F3ECDD; --surface:#FFFDF8; --surface-2:#FBF4E6; --ink:#2C2620; --ink-soft:#6E6457; --ink-faint:#9B9082; --line:#EADCC6; --fill:#2C2620; --on-fill:#FFF8EC; --c1:#CDA85F; --c1-deep:#9A7522; --c1-tint:#F6ECD2; --c2:#9DB48C; --c2-deep:#5E7A4E; --c2-tint:#EBF0E2; } /* ---- ALTERNATE FONTS ---- */ html[data-font-display="bricolage"] { --font-display: "Bricolage Grotesque"; } html[data-font-display="dm"] { --font-display: "DM Serif Display"; } html[data-font-display="quicksand"] { --font-display: "Quicksand"; } html[data-font-display="space"] { --font-display: "Space Grotesk"; } html[data-font-body="nunito"] { --font-body: "Nunito Sans"; } html[data-font-body="work"] { --font-body: "Work Sans"; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body), system-ui, sans-serif; font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; letter-spacing: .002em; } body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(900px 600px at 12% -5%, var(--c2-tint), transparent 60%), radial-gradient(900px 700px at 100% 8%, var(--c1-tint), transparent 55%); opacity: .8; z-index: 0; pointer-events: none; } .sheet { position: relative; z-index: 1; width: min(1060px, 94vw); margin: 40px auto 64px; background: var(--surface); border-radius: 30px; box-shadow: 0 30px 70px -42px rgba(40,50,60,.28), 0 2px 0 rgba(255,255,255,.6) inset; overflow: hidden; border: 1px solid var(--line); } /* ---------- shared type ---------- */ .script { font-family: var(--font-script), cursive; color: var(--c2-deep); font-weight: 600; } h1, h2, h3 { font-family: var(--font-display), sans-serif; margin: 0; line-height: 1.04; letter-spacing: -.018em; } p { margin: 0; } .eyebrow { font-size: var(--t-eyebrow); letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); } .section { padding: clamp(40px, 6vw, 76px) var(--pad); position: relative; } .section + .section { border-top: 1px solid var(--line); } .sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; } .sec-head .script { font-size: 34px; line-height: 1; } .sec-head h2 { font-size: var(--t-h2); } .sec-kicker { font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--c1-deep); } /* ---------- HERO ---------- */ .hero { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 56px); padding: clamp(34px, 4.5vw, 60px) var(--pad); align-items: center; background: linear-gradient(180deg, var(--c1-tint), transparent 70%), var(--surface); } .hero-photo { width: 100%; aspect-ratio: 3 / 4.05; border-radius: 230px 230px 26px 26px; object-fit: cover; object-position: 50% 18%; box-shadow: 0 30px 60px -28px rgba(60,44,20,.5); border: 6px solid #fff; } .hero-right { display: flex; flex-direction: column; gap: 20px; } .hero-handle { display: inline-flex; align-items: center; gap: 9px; background: var(--fill); color: var(--on-fill); padding: 8px 16px; border-radius: 100px; font-weight: 700; font-size: var(--t-small); letter-spacing: .04em; width: fit-content; } .hero-handle .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c2); } .hero-name { font-family: var(--font-display), sans-serif; font-size: var(--t-mega); font-weight: 800; letter-spacing: -.03em; } .hero-role { font-size: var(--t-h3); font-weight: 700; color: var(--c1-deep); font-family: var(--font-display), sans-serif; letter-spacing: -.01em; } .hero-tag { font-size: 18px; color: var(--ink-soft); max-width: 46ch; } .hero-cats { font-family: var(--font-script), cursive; color: var(--c2-deep); font-size: 27px; font-weight: 600; } .platforms { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .platform { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); padding: 9px 14px; border-radius: 100px; font-weight: 600; font-size: var(--t-small); text-decoration: none; color: var(--ink); transition: border-color .15s ease, color .15s ease, transform .15s ease; white-space: nowrap; } .platform:hover { border-color: var(--c1-deep); color: var(--c1-deep); transform: translateY(-1px); } .hero-web { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-top: 2px; color: var(--c1-deep); font-weight: 700; font-size: var(--t-small); text-decoration: none; border-bottom: 1.5px solid transparent; transition: border-color .15s ease; } .hero-web .arr { font-size: 15px; } .hero-web:hover { border-bottom-color: var(--c1-deep); } .platform b { font-weight: 700; } .platform .pin { width: 9px; height: 9px; border-radius: 3px; } /* ---------- ABOUT ---------- */ .about { background: var(--surface-2); } .about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; } .about-body p + p { margin-top: 16px; } .about-body .lead { font-size: 21px; color: var(--ink); font-weight: 500; } .pillars { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .pillar { background: var(--surface); border: 1px solid var(--line); border-radius: 100px; padding: 10px 18px; font-weight: 600; font-size: var(--t-small); display: inline-flex; align-items: center; gap: 9px; } .pillar .pin { width: 8px; height: 8px; border-radius: 50%; } .about-photo { width: 100%; height: auto; aspect-ratio: 4/5; border-radius: var(--radius); } /* ---------- STATS SNAPSHOT ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .stat { border-radius: var(--radius-sm); padding: 22px 22px 20px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 4px; min-height: 132px; } .stat.wide { grid-column: span 2; } .stat .num { font-family: var(--font-display), sans-serif; font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1; } .stat .lab { font-size: var(--t-small); color: var(--ink-soft); font-weight: 600; } .stat .sub { font-size: 12.5px; color: var(--ink-faint); margin-top: auto; } .stat.b-c1 { background: var(--c1-tint); border-color: color-mix(in srgb, var(--c1) 35%, var(--line)); } .stat.b-c2 { background: var(--c2-tint); border-color: color-mix(in srgb, var(--c2) 35%, var(--line)); } .stat.b-neutral { background: var(--surface-2); } .stat.b-ink { background: var(--fill); } .stat.b-ink .num { color: var(--on-fill); } .stat.b-ink .lab { color: color-mix(in srgb, var(--on-fill) 72%, transparent); } .stat.b-ink .sub { color: color-mix(in srgb, var(--on-fill) 48%, transparent); } .stat-note { margin-top: 16px; font-size: 13px; color: var(--ink-faint); } /* ---------- AUDIENCE ---------- */ .aud-grid { display: grid; grid-template-columns: 0.85fr 1.15fr 0.95fr; gap: clamp(20px, 3vw, 40px); } .aud-card h3 { font-size: 18px; margin-bottom: 18px; } .donut-wrap { display: flex; align-items: center; gap: 20px; } .donut { width: 130px; height: 130px; border-radius: 50%; background: conic-gradient(var(--c1) 0 68.6%, var(--c2) 68.6% 100%); display: grid; place-items: center; flex: none; } .donut::after { content: ""; width: 76px; height: 76px; border-radius: 50%; background: var(--surface-2); } .legend { display: flex; flex-direction: column; gap: 12px; } .legend .row { display: flex; align-items: center; gap: 10px; font-weight: 600; } .legend .sw { width: 13px; height: 13px; border-radius: 4px; } .legend .pct { font-family: var(--font-display), sans-serif; font-weight: 800; font-size: 19px; } .legend small { color: var(--ink-faint); font-weight: 500; display: block; font-size: 12px; } .bars { display: flex; flex-direction: column; gap: 11px; } .bar-row { display: grid; grid-template-columns: 54px 1fr 50px; align-items: center; gap: 12px; } .bar-row .age { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); } .bar-track { height: 13px; background: var(--surface-2); border-radius: 100px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--c1), var(--c1-deep)); } .bar-row .val { font-family: var(--font-display), sans-serif; font-weight: 700; font-size: 14px; text-align: right; } .bar-row.hi .bar-fill { background: linear-gradient(90deg, var(--c2), var(--c2-deep)); } .bar-row.hi .val { color: var(--c2-deep); } .markets { display: flex; flex-direction: column; gap: 13px; } .market { display: grid; grid-template-columns: 1fr auto; gap: 4px; } .market .mk-top { display: flex; justify-content: space-between; align-items: baseline; } .market .mk-name { font-weight: 600; font-size: 14.5px; } .market .mk-val { font-family: var(--font-display), sans-serif; font-weight: 700; font-size: 14px; } .market .mk-track { grid-column: 1 / -1; height: 9px; background: var(--surface-2); border-radius: 100px; overflow: hidden; } .market .mk-fill { height: 100%; background: linear-gradient(90deg, var(--c2), var(--c2-deep)); border-radius: 100px; } /* ---------- TOP POST ---------- */ .top { background: var(--surface-2); } .top-grid { display: grid; grid-template-columns: 320px 1fr; gap: clamp(26px, 4vw, 48px); align-items: center; } .reel-col { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } .reel-frame { position: relative; display: block; width: 100%; border-radius: 22px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 24px 50px -26px rgba(0,0,0,.55); background: #0b0b0b; } .reel-video, .reel-frame image-slot { display: block; width: 100%; height: auto; aspect-ratio: 9/16; object-fit: cover; background: #0b0b0b; } .reel-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 4; width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--ink); font-size: 22px; padding-left: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .15s ease; text-decoration: none; } .reel-frame:hover .reel-play { transform: translate(-50%,-50%) scale(1.08); } .reel-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 30px 14px 14px; background: linear-gradient(transparent, rgba(8,30,22,.85)); color: #fff; font-weight: 600; font-size: 14px; pointer-events: none; } .reel-badge { position: absolute; top: 12px; left: 12px; z-index: 3; background: var(--fill); color: var(--on-fill); font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 100px; display: flex; align-items: center; gap: 7px; } .reel-badge .live { width: 8px; height: 8px; border-radius: 50%; background: var(--c2); box-shadow: 0 0 0 0 rgba(231,184,92,.6); animation: pulse 2s infinite; } @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(231,184,92,.6)} 70%{box-shadow:0 0 0 9px rgba(231,184,92,0)} 100%{box-shadow:0 0 0 0 rgba(231,184,92,0)} } .reel-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 30px 14px 14px; background: linear-gradient(transparent, rgba(28,22,16,.82)); color: #fff; font-weight: 600; font-size: 14px; } .top-info .caption-line { font-family: var(--font-display), sans-serif; font-size: 25px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; } .top-info .sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 22px; } .metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; } .metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; } .metric .m-num { font-family: var(--font-display), sans-serif; font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.02em; } .metric .m-lab { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; margin-top: 6px; } .metric.feat { background: var(--fill); border-color: var(--fill); } .metric.feat .m-num { color: var(--c1-deep); } .metric.feat .m-lab { color: color-mix(in srgb, var(--on-fill) 70%, transparent); } .btn { display: inline-flex; align-items: center; gap: 9px; background: var(--fill); color: var(--on-fill); text-decoration: none; font-weight: 700; font-size: 14.5px; padding: 13px 22px; border-radius: 100px; border: none; cursor: pointer; transition: transform .15s ease, background .15s ease; } .btn:hover { transform: translateY(-2px); } .btn.alt { background: var(--c1); color: var(--fill); } .btn .arr { font-size: 16px; } .recent { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; } .recent .chip { background: var(--surface); border: 1px solid var(--line); border-radius: 100px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--ink-soft); } .recent .chip b { color: var(--ink); font-family: var(--font-display), sans-serif; } /* ---------- BRANDS (faithful wordmark wall) ---------- */ .brand-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .brand { aspect-ratio: 3/2; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; display: grid; place-items: center; text-align: center; padding: 14px; box-shadow: 0 8px 20px -16px rgba(0,0,0,.4); } .wm { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } /* Whisker — clean modern lowercase sans, charcoal */ .wm-whisker { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 26px; color: #20242A; letter-spacing: -.02em; text-transform: lowercase; } .wm-whisker small { font-family: "Hanken Grotesk", sans-serif; font-weight: 600; font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: #8A9099; margin-top: 6px; } /* Nulo — bold rounded lowercase, navy with orange accent dot */ .wm-nulo { font-family: "Nunito Sans", sans-serif; font-weight: 800; font-size: 30px; color: #14365C; letter-spacing: -.01em; text-transform: lowercase; flex-direction: row; } .wm-nulo i { width: 7px; height: 7px; border-radius: 50%; background: #F47B20; align-self: flex-end; margin: 0 0 6px 3px; } /* Optimeal — uppercase spaced, leaf green */ .wm-optimeal { font-family: "Work Sans", sans-serif; font-weight: 800; font-size: 21px; color: #4E8E3F; letter-spacing: .12em; } /* Sustainably Yours — refined serif, earthy green */ .wm-sustainably { font-family: "DM Serif Display", serif; font-weight: 400; font-size: 21px; color: #3F6B43; line-height: 1.04; letter-spacing: .005em; } /* Fresh Step — bold title-case, signature blue */ .wm-freshstep { font-family: "Nunito Sans", sans-serif; font-weight: 800; font-size: 24px; color: #0E62B0; letter-spacing: -.01em; flex-direction: row; align-items: flex-start; } .wm-freshstep sup { font-size: 9px; font-weight: 700; margin-top: 2px; } /* ---------- SERVICES ---------- */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .svc { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px; background: var(--surface); display: flex; flex-direction: column; gap: 7px; } .svc .sn { display: flex; align-items: center; gap: 11px; } .svc .si { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 14px; font-family: var(--font-display), sans-serif; color: var(--ink); } .svc h3 { font-size: 17px; } .svc p { font-size: 13.5px; color: var(--ink-soft); } .svc-note { margin-top: 18px; background: var(--c2-tint); border: 1px solid color-mix(in srgb, var(--c2) 35%, var(--line)); border-radius: var(--radius-sm); padding: 16px 20px; font-size: 14.5px; font-weight: 500; } .svc-note b { font-weight: 700; } /* ---------- WORK WITH ME ---------- */ .cta { background: var(--fill); color: var(--on-fill); } .cta .sec-head .script { color: var(--c1-deep); } .cta-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; } .cta h2 { color: var(--on-fill); font-size: var(--t-h1); } .cta-lead { color: color-mix(in srgb, var(--on-fill) 72%, transparent); font-size: 18px; margin: 16px 0 26px; max-width: 40ch; } .contact-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; } .contact-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); } .contact-row:last-of-type { border-bottom: none; } .contact-row .ci { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; font-weight: 800; font-family: var(--font-display), sans-serif; } .contact-row .cl { font-size: 12px; color: var(--ink-faint); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .contact-row .cv { font-size: 16.5px; font-weight: 600; } .contact-row a { color: inherit; text-decoration: none; } .cta .btn { margin-top: 4px; } .cta-foot { margin-top: 26px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--on-fill) 18%, transparent); color: color-mix(in srgb, var(--on-fill) 55%, transparent); font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } /* ---------- FLOATING TOOLBAR ---------- */ .toolbar { position: fixed; top: 18px; right: 18px; z-index: 50; display: flex; gap: 10px; } .toolbar button { display: inline-flex; align-items: center; gap: 8px; background: var(--fill); color: var(--on-fill); border: none; cursor: pointer; font-family: var(--font-body), sans-serif; font-weight: 700; font-size: 13.5px; padding: 11px 17px; border-radius: 100px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); transition: transform .15s ease; } .toolbar button:hover { transform: translateY(-2px); } .toolbar button.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--fill); color: var(--on-fill); padding: 12px 22px; border-radius: 100px; font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: all .3s ease; z-index: 60; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- RESPONSIVE ---------- */ @media (max-width: 860px) { .hero, .about-grid, .top-grid, .cta-grid, .aud-grid { grid-template-columns: 1fr; } .hero-photo { max-width: 360px; } .stat-grid { grid-template-columns: repeat(2, 1fr); } .stat.wide { grid-column: span 2; } .brand-grid { grid-template-columns: repeat(2, 1fr); } .svc-grid { grid-template-columns: 1fr; } .metric-row { grid-template-columns: repeat(3, 1fr); } .top-grid { justify-items: center; } .reel-col { width: 100%; max-width: 360px; align-items: center; } } /* ---------- PRINT / PDF ---------- */ @page { size: A4; margin: 12mm; } @media print { :root { --pad: 26px; } body { background: #fff; } body::before { display: none; } .toolbar, .toast, #tweaks-root { display: none !important; } .sheet { width: 100%; margin: 0; border-radius: 0; box-shadow: none; } .section, .hero { break-inside: avoid; page-break-inside: avoid; } .stat, .svc, .brand, .metric, .aud-card, .contact-card, .reel-frame { break-inside: avoid; } .hero-photo { box-shadow: none; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } }