accordion rows. Zero JS needed. */
.faq--wordmark .faq__tabs { display: none; }
.faq--wordmark .faq__panel { display: block; }
.faq--wordmark .faq__inner { max-width: 1100px; }
.faq--wordmark .faq__header {
margin: 0 0 var(--sp-7) 0;
}
.faq__wordmark {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(80px, 14vw, 160px);
line-height: 0.9;
letter-spacing: -0.04em;
color: var(--p-aztek);
margin: 0;
text-align: center;
text-transform: uppercase;
}
.faq__wordmark em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.faq__wordmark-arrow {
display: block;
margin: 24px auto 0;
color: var(--p-sage);
}
.faq--wordmark .faq__row {
border-bottom: 1px solid var(--border-hairline);
padding: 0;
}
.faq--wordmark .faq__row[open] .faq__row-icon {
transform: rotate(45deg);
}
.faq--wordmark .faq__row > summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-5) 0;
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(20px, 2vw, 26px);
line-height: 1.25;
letter-spacing: -0.008em;
color: var(--p-aztek);
transition: color 0.2s;
}
.faq--wordmark .faq__row > summary::-webkit-details-marker { display: none; }
.faq--wordmark .faq__row > summary:hover { color: var(--p-sage); }
.faq--wordmark .faq__row-icon {
flex: 0 0 auto;
width: 22px;
height: 22px;
position: relative;
transition: transform 0.3s ease;
}
.faq--wordmark .faq__row-icon::before,
.faq--wordmark .faq__row-icon::after {
content: '';
position: absolute;
background: var(--p-aztek);
top: 50%;
left: 50%;
}
.faq--wordmark .faq__row-icon::before {
width: 14px;
height: 1.5px;
transform: translate(-50%, -50%);
}
.faq--wordmark .faq__row-icon::after {
width: 1.5px;
height: 14px;
transform: translate(-50%, -50%);
}
.faq--wordmark .faq__row-answer {
padding: 0 0 var(--sp-5) 0;
font-family: var(--f-sans);
font-size: 16px;
line-height: 1.65;
color: var(--p-ink);
max-width: 72ch;
margin: 0;
}
```
### faq.showcase
```css
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; }
.brand-label {
position: sticky; top: 0; z-index: 10;
background: var(--p-charcoal); color: var(--p-oatmeal);
font-family: var(--f-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.2em; text-transform: uppercase;
padding: 10px 24px;
display: flex; justify-content: space-between;
}
```
```html
TABBED, categories + accordion class="faq"
General
FFB
FFM
Billing
Who is Tracy Harris Co for?
Women building or growing online businesses, coaches, creatives, course creators, membership owners, and digital service providers. Whether you're just starting or already at six figures, if you want freedom AND revenue, you're in the right place.
What's the difference between FFB and FFM?
Freedom Filled® Business is the 12-month mentorship for women ready to build or grow. Freedom Filled® Mastermind is the premium, application-only container for established business owners ready to scale with more intimacy, retreats, and direct access to Tracy.
I'm not sure which program is right for me. How do I find out?
Take the FRESH Quiz. It takes two minutes and gives you a personalised recommendation based on where you are in your business right now. No email required to see your results.
Do I need to be a mum to join?
Not at all. Tracy built her business as a mum, and many of our members are mums, but the frameworks work for any woman building an online business. What matters is your commitment, not your family structure.
What's included in Freedom Filled® Business?
12 months of mentorship including the full curriculum, group coaching calls, a private community of right-fit women, Tracy's frameworks (Million Dollar Message™, Signature Model™, and more), and ongoing support as you build.
How much time does FFB require each week?
The program is designed for women running businesses alongside life. Most members spend 3-5 hours per week on the curriculum and implementation. The content is available on-demand so you can work at your own pace.
Are there payment plans available?
Yes. You can pay in full, in 6 instalments, or monthly over 12 months. The pay-in-full option saves the most. All details are on the application page.
Why is FFM application-based?
Because the room matters. With a maximum of 20 women per cohort, Tracy personally reviews every application to ensure every member is the right fit. This isn't exclusivity for its own sake. It's how the room stays extraordinary.
What happens on the discovery call?
A genuine conversation about where your business is and where you want it to go. Tracy or a senior team member will walk you through the program, answer your questions, and help you decide if FFM is the right container for your next season. There's a $1,000 discovery call fee, fully refundable if it's not the right fit.
Are retreats included?
Yes. FFM includes in-person retreats (locations like Bali and Australia). Travel and accommodation are additional, but the retreat itself is included in your investment. These retreats are where some of the deepest breakthroughs happen.
What currency are prices in?
All prices are in Australian dollars (AUD).
Is there a refund policy?
Details are in the terms and conditions provided at enrolment. Tracy stands behind the value of every program. If you have questions about the commitment, bring them to your discovery call or reach out before applying.
SIMPLE, single list, no tabs class="faq faq--simple"
What's included in Freedom Filled® Business?
12 months of mentorship including the full curriculum, group coaching calls, a private community of right-fit women, Tracy's frameworks (Million Dollar Message™, Signature Model™, and more), and ongoing support as you build.
How much time does FFB require each week?
The program is designed for women running businesses alongside life. Most members spend 3-5 hours per week on the curriculum and implementation.
Are there payment plans available?
Yes. You can pay in full, in 6 instalments, or monthly over 12 months. The pay-in-full option saves the most.
I'm brand new. Is FFB right for me?
FFB is designed for women at all stages, from just-starting to six-figure business owners. If you're serious about building a coaching, course, membership, creative practice, or digital service business, this is your container.
Do I get direct access to Tracy?
You get Tracy on group coaching calls and inside the community. For direct 1:1 access to Tracy, including hot seats and retreats, Freedom Filled® Mastermind is the right fit.
```
### faq.simple
Wrapper context: ``
```html
What's included in Freedom Filled® Business?
12 months of mentorship including the full curriculum, group coaching calls, a private community of right-fit women, Tracy's frameworks (Million Dollar Message™, Signature Model™, and more), and ongoing support as you build.
How much time does FFB require each week?
The program is designed for women running businesses alongside life. Most members spend 3-5 hours per week on the curriculum and implementation.
Are there payment plans available?
Yes. You can pay in full, in 6 instalments, or monthly over 12 months. The pay-in-full option saves the most.
I'm brand new. Is FFB right for me?
FFB is designed for women at all stages, from just-starting to six-figure business owners. If you're serious about building a coaching, course, membership, creative practice, or digital service business, this is your container.
Do I get direct access to Tracy?
You get Tracy on group coaching calls and inside the community. For direct 1:1 access to Tracy, including hot seats and retreats, Freedom Filled® Mastermind is the right fit.
```
### faq.tabbed
Wrapper context: ``
```html
General
FFB
FFM
Billing
Who is Tracy Harris Co for?
Women building or growing online businesses, coaches, creatives, course creators, membership owners, and digital service providers. Whether you're just starting or already at six figures, if you want freedom AND revenue, you're in the right place.
What's the difference between FFB and FFM?
Freedom Filled® Business is the 12-month mentorship for women ready to build or grow. Freedom Filled® Mastermind is the premium, application-only container for established business owners ready to scale with more intimacy, retreats, and direct access to Tracy.
I'm not sure which program is right for me. How do I find out?
Take the FRESH Quiz. It takes two minutes and gives you a personalised recommendation based on where you are in your business right now. No email required to see your results.
Do I need to be a mum to join?
Not at all. Tracy built her business as a mum, and many of our members are mums, but the frameworks work for any woman building an online business. What matters is your commitment, not your family structure.
What's included in Freedom Filled® Business?
12 months of mentorship including the full curriculum, group coaching calls, a private community of right-fit women, Tracy's frameworks (Million Dollar Message™, Signature Model™, and more), and ongoing support as you build.
How much time does FFB require each week?
The program is designed for women running businesses alongside life. Most members spend 3-5 hours per week on the curriculum and implementation. The content is available on-demand so you can work at your own pace.
Are there payment plans available?
Yes. You can pay in full, in 6 instalments, or monthly over 12 months. The pay-in-full option saves the most. All details are on the application page.
Why is FFM application-based?
Because the room matters. With a maximum of 20 women per cohort, Tracy personally reviews every application to ensure every member is the right fit. This isn't exclusivity for its own sake. It's how the room stays extraordinary.
What happens on the discovery call?
A genuine conversation about where your business is and where you want it to go. Tracy or a senior team member will walk you through the program, answer your questions, and help you decide if FFM is the right container for your next season. There's a $1,000 discovery call fee, fully refundable if it's not the right fit.
Are retreats included?
Yes. FFM includes in-person retreats (locations like Bali and Australia). Travel and accommodation are additional, but the retreat itself is included in your investment. These retreats are where some of the deepest breakthroughs happen.
What currency are prices in?
All prices are in Australian dollars (AUD).
Is there a refund policy?
Details are in the terms and conditions provided at enrolment. Tracy stands behind the value of every program. If you have questions about the commitment, bring them to your discovery call or reach out before applying.
```
### faq.wordmark-editorial
Wrapper context: ``
```html
What if I don't have a program yet?
This workshop is for women who already have a program, course, or group offer. If you are still pre-offer, the work is to clarify what you sell first. We will let you know when the next pre-program clarity round opens.
Can I attend if I cannot be live?
Yes. You get the live replay inside your account for 30 days. Live is sharper because you can ask real questions in the Q&A. Replay still gets you the foundations built.
Is this for service businesses too?
Yes. Coaches, course creators, membership owners, digital service businesses, and creatives. If your offer is sold one to many and you want to stop relying on the algorithm or a sales team, this is for you.
What if I have done a webinar before and it flopped?
Then you are exactly the person this is for. Most flopped webinars miss the same three foundations. We rebuild them in 2 hours.
```
---
## feature-grid · 1 variant
### feature-grid.showcase
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-oatmeal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
.section {
padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 64px);
background: var(--p-oatmeal);
}
.fg__wrap { max-width: 1120px; margin: 0 auto; }
.fg__header {
max-width: 760px;
margin: 0 auto 56px;
text-align: center;
}
.fg__eyebrow {
font-family: var(--f-script);
font-size: clamp(26px, 3vw, 36px);
color: var(--p-sage);
line-height: 1;
margin: 0 0 16px;
}
.fg__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(30px, 3.6vw, 44px);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--p-charcoal);
margin: 0 0 16px;
}
.fg__title em { font-family: var(--f-serif-italic); font-style: italic; }
.fg__sub {
font-size: 16px;
line-height: 1.65;
color: var(--p-ink);
margin: 0 auto;
max-width: 60ch;
}
.fg__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.5vw, 32px);
}
.fg__card {
background: var(--p-white);
border-radius: 14px;
padding: 32px 28px;
border: 1px solid rgba(30,55,53,0.08);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.fg__card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 32px rgba(16,16,16,0.06);
border-color: rgba(30,55,53,0.2);
}
.fg__icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--p-cream);
color: var(--p-sage);
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 0 18px;
}
.fg__icon svg { width: 24px; height: 24px; }
.fg__heading {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: 22px;
line-height: 1.2;
color: var(--p-charcoal);
margin: 0 0 8px;
}
.fg__heading em { font-family: var(--f-serif-italic); font-style: italic; }
.fg__body {
font-family: var(--f-sans);
font-size: 14.5px;
line-height: 1.6;
color: var(--p-ink);
margin: 0;
}
@media (max-width: 820px) {
.fg__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.fg__grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
.section { padding: 48px 18px; }
.fg__card { padding: 26px 22px; }
}
```
```html
Monthly coaching calls .
Two live calls a month, recorded. Hot-seat coaching, teaching, and real-time feedback on your actual offer and messaging.
The full curriculum .
Eight modules of self-paced training covering foundations, offer design, messaging, content, sales, launches, and peaceful scale.
Voxer access .
Ask me your in-between-calls questions via Voxer. Responses within 48 hours, Monday to Thursday. Fridays are Freedom Fridays for both of us.
The community .
A private community of right-fit women, sharing wins, working through objections together, and cheering each other on every week.
Every workbook , every template.
Lifetime access to the Freedom Filled® Resource Vault. Workbooks, SOP templates, email swipes, launch calendars.
Bonus: SMS library .
Your FFB membership includes lifetime access to The Social Method® Society library, for the years of Instagram content strategy we've been building.
```
---
## footer · 6 variants
### Shared CSS · `components/footer/footer.css`
```css
/* Footer component, Tonic-inspired three-column spread */
.footer {
background: var(--surface-elevated);
color: var(--ink-body);
padding: var(--sp-9) var(--sp-7) var(--sp-5);
border-top: 1px solid var(--border-hairline);
}
.footer__inner {
width: 100%;
max-width: none;
}
/* --- Top: brand block (logo stacked above editorial paragraph) --- */
.footer__brand-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-6);
max-width: 600px;
margin-bottom: var(--sp-8);
}
.footer__brand-logo {
height: 44px;
width: auto;
margin: 0;
align-self: flex-start;
display: block;
}
.footer__brand-copy {
font-family: var(--f-sans);
font-size: 14px;
line-height: 1.65;
color: var(--ink-body);
margin: 0;
max-width: 64ch;
}
.footer__brand-copy em {
font-family: var(--f-serif-italic);
font-style: italic;
color: var(--ink-heading);
font-size: 1.05em;
}
/* --- Main row: columns left, social middle, newsletter right --- */
.footer__main {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--sp-7);
align-items: flex-start;
margin-bottom: var(--sp-8);
}
.footer__columns {
display: grid;
grid-template-columns: repeat(3, auto);
gap: var(--sp-7);
}
.footer__columns--two { grid-template-columns: repeat(2, auto); }
.footer__columns--four { grid-template-columns: repeat(4, auto); }
.footer__col-title {
font-family: var(--f-sans);
font-size: 11px;
font-weight: var(--w-medium);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0 0 var(--sp-4) 0;
}
.footer__col-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.footer__col-list a {
font-family: var(--f-sans);
font-size: 14px;
color: var(--ink-heading);
text-decoration: none;
transition: color 0.2s ease;
}
.footer__col-list a:hover {
color: var(--accent);
}
.footer__social {
display: flex;
gap: var(--sp-4);
align-items: center;
justify-self: center;
padding-top: 28px;
}
.footer__social a {
color: var(--ink-mute);
transition: color 0.2s ease;
display: inline-flex;
}
.footer__social a:hover {
color: var(--accent);
}
/* --- Newsletter block, bottom right --- */
.footer__newsletter {
max-width: 340px;
justify-self: end;
text-align: right;
}
.footer__newsletter-heading {
font-family: var(--f-serif-display);
font-weight: var(--w-regular);
font-size: clamp(20px, 1.6vw, 26px);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--ink-heading);
margin: 0 0 var(--sp-5) 0;
max-width: 22ch;
margin-left: auto;
}
.footer__newsletter-heading em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.footer__cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--accent);
color: var(--accent-on);
padding: 14px 24px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 12px;
font-weight: var(--w-medium);
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.2s ease;
margin-bottom: var(--sp-3);
}
.footer__cta:hover {
background: var(--accent-hover);
}
.footer__cta--ghost {
background: transparent;
color: var(--ink-heading);
border: 1px solid var(--border-hairline);
}
.footer__cta--ghost:hover {
background: var(--ink-heading);
color: var(--surface-canvas);
border-color: var(--ink-heading);
}
.footer__cta svg {
width: 14px;
height: 14px;
}
/* --- Bottom bar --- */
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--sp-5);
border-top: 1px solid var(--border-hairline);
flex-wrap: wrap;
gap: var(--sp-4);
}
.footer__copyright {
font-family: var(--f-sans);
font-size: 12px;
color: var(--ink-mute);
}
.footer__legal-links {
display: flex;
gap: var(--sp-5);
list-style: none;
margin: 0;
padding: 0;
}
.footer__legal-links a {
font-family: var(--f-sans);
font-size: 12px;
color: var(--ink-mute);
text-decoration: none;
transition: color 0.2s ease;
}
.footer__legal-links a:hover {
color: var(--ink-heading);
}
/* --- FFM dark variant --- */
[data-brand="ffm"] .footer--dark {
background: var(--p-charcoal);
border-top-color: rgba(255, 255, 255, 0.08);
}
[data-brand="ffm"] .footer--dark .footer__brand-copy,
[data-brand="ffm"] .footer--dark .footer__col-list a,
[data-brand="ffm"] .footer--dark .footer__newsletter-heading {
color: var(--p-oatmeal);
}
[data-brand="ffm"] .footer--dark .footer__brand-copy em {
color: var(--p-gold-mid);
}
[data-brand="ffm"] .footer--dark .footer__col-title,
[data-brand="ffm"] .footer--dark .footer__copyright,
[data-brand="ffm"] .footer--dark .footer__legal-links a,
[data-brand="ffm"] .footer--dark .footer__social a {
color: rgba(246, 244, 241, 0.5);
}
[data-brand="ffm"] .footer--dark .footer__bottom {
border-color: rgba(255, 255, 255, 0.1);
}
[data-brand="ffm"] .footer--dark .footer__brand-logo {
filter: brightness(0) invert(1);
}
[data-brand="ffm"] .footer--dark .footer__cta--ghost {
color: var(--p-oatmeal);
border-color: rgba(255, 255, 255, 0.2);
}
[data-brand="ffm"] .footer--dark .footer__cta--ghost:hover {
background: var(--p-oatmeal);
color: var(--p-charcoal);
}
/* --- Responsive --- */
@media (max-width: 960px) {
.footer {
padding: var(--sp-8) var(--sp-5) var(--sp-5);
}
.footer__brand-row {
grid-template-columns: 1fr;
gap: var(--sp-5);
}
.footer__main {
grid-template-columns: 1fr;
gap: var(--sp-7);
}
.footer__columns {
gap: var(--sp-6);
}
.footer__social {
justify-self: flex-start;
padding-top: 0;
}
.footer__newsletter {
justify-self: flex-start;
text-align: left;
max-width: 100%;
}
.footer__newsletter-heading {
margin-left: 0;
}
.footer__bottom {
justify-content: center;
text-align: center;
}
.footer__legal-links {
flex-basis: 100%;
justify-content: center;
}
}
@media (max-width: 600px) {
.footer__columns {
grid-template-columns: 1fr 1fr;
}
.footer__columns--two,
.footer__columns--four {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 400px) {
.footer__columns,
.footer__columns--two,
.footer__columns--four {
grid-template-columns: 1fr;
}
}
```
### footer.ffb-two-col
Wrapper context: ``
```css
body {
margin: 0;
font-family: var(--f-sans);
-webkit-font-smoothing: antialiased;
}
```
```html
```
### footer.ffm-dark-two-col
Wrapper context: ``
```css
body {
margin: 0;
font-family: var(--f-sans);
-webkit-font-smoothing: antialiased;
}
```
```html
```
### footer.fresh-minimal
Wrapper context: ``
```css
body {
margin: 0;
font-family: var(--f-sans);
-webkit-font-smoothing: antialiased;
}
```
```html
```
### footer.showcase
```css
body {
margin: 0;
font-family: var(--f-sans);
-webkit-font-smoothing: antialiased;
}
.brand-label {
position: sticky;
top: 0;
z-index: 10;
background: var(--p-charcoal);
color: var(--p-oatmeal);
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 10px 24px;
display: flex;
justify-content: space-between;
}
```
```html
TRACY HARRIS CO, three-column spread with right-aligned opt-in data-brand="tracy"
FFB, same layout, FFB brand tokens data-brand="ffb"
FFM, dark charcoal premium variant data-brand="ffm" class="footer--dark"
FRESH, minimal two-column data-brand="fresh"
```
### footer.statement-mark
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-cream);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
.page-pad {
max-width: 1100px;
margin: 0 auto;
padding: 64px 24px;
}
.page-pad h2 {
font-family: var(--f-serif-display);
font-size: clamp(32px, 4vw, 48px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
margin: 0 0 16px 0;
}
.page-pad p {
font-size: 16px;
line-height: 1.65;
max-width: 62ch;
}
/* ---- Official Tracy marks ---- */
.t-mark { width: auto; fill: currentColor; display: block; }
.t-mark path, .t-mark circle { fill: currentColor; }
.t-mark--lockup { height: 40px; }
.t-wordmark { width: auto; fill: currentColor; display: block; }
.t-wordmark path, .t-wordmark polygon, .t-wordmark rect, .t-wordmark circle { fill: currentColor; }
/* -------- FOOTER -------- */
.mfoot {
background: var(--p-charcoal);
color: var(--p-oatmeal);
position: relative;
overflow: hidden;
padding: clamp(48px, 6vw, 80px) clamp(20px, 6vw, 80px) 0;
}
.mfoot__top {
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: start;
padding-bottom: clamp(36px, 5vw, 56px);
}
.mfoot__signature {
font-family: var(--f-serif-display);
font-size: clamp(28px, 3.2vw, 44px);
line-height: 1.18;
letter-spacing: -0.005em;
margin: 0;
max-width: 15ch;
}
.mfoot__signature em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.mfoot__sec-wrap {
display: grid;
gap: 12px;
}
.mfoot__sec-title {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(246,244,241,0.55);
margin: 0 0 4px;
}
.mfoot__sec-grid {
display: grid;
grid-template-columns: repeat(2, minmax(140px, auto));
gap: 12px 48px;
}
.mfoot__sec-grid a {
font-family: var(--f-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--p-oatmeal);
text-decoration: none;
padding: 4px 0;
transition: opacity .2s ease;
}
.mfoot__sec-grid a:hover { opacity: 0.7; }
.mfoot__word {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: clamp(24px, 3vw, 40px) 0;
color: var(--p-oatmeal);
}
.mfoot__word .t-wordmark {
height: clamp(72px, 10vw, 140px);
max-width: 100%;
fill: currentColor;
}
.mfoot__lockup {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 32px;
padding: clamp(24px, 3vw, 36px) 0 clamp(20px, 2vw, 28px);
}
.mfoot__bottom-nav {
display: flex;
gap: clamp(18px, 3.2vw, 44px);
align-items: center;
flex-wrap: wrap;
}
.mfoot__bottom-nav--right { justify-content: flex-end; }
.mfoot__bottom-nav a {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--p-oatmeal);
text-decoration: none;
opacity: 0.85;
transition: opacity .2s ease;
padding: 6px 0;
}
.mfoot__bottom-nav a:hover { opacity: 1; }
.mfoot__mark {
color: var(--p-oatmeal);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mfoot__legal {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0 24px;
border-top: 1px solid rgba(246,244,241,0.12);
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--p-oatmeal);
opacity: 0.55;
}
.mfoot__legal span,
.mfoot__legal a {
color: inherit;
text-decoration: none;
}
.mfoot__legal a:hover { opacity: 0.85; }
/* -------- MOBILE -------- */
@media (max-width: 820px) {
.mfoot { padding: 44px 20px 0; }
.mfoot__top {
grid-template-columns: 1fr;
gap: 28px;
padding-bottom: 28px;
}
.mfoot__signature {
font-size: clamp(24px, 7vw, 32px);
max-width: none;
}
.mfoot__sec-grid {
grid-template-columns: auto auto;
justify-content: flex-start;
gap: 12px 40px;
}
.mfoot__word {
justify-content: flex-start;
padding: 20px 0 28px;
}
.mfoot__word .t-wordmark { height: clamp(56px, 16vw, 84px); }
.mfoot__lockup {
grid-template-columns: 1fr;
gap: 18px;
text-align: left;
padding: 4px 0 8px;
}
/* Nav rows stay left-aligned on mobile, no centering */
.mfoot__bottom-nav {
justify-content: flex-start;
gap: 0;
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
}
.mfoot__bottom-nav a {
font-size: 12px;
padding: 12px 0;
opacity: 0.95;
border-bottom: 1px solid rgba(246,244,241,0.08);
text-align: left;
}
.mfoot__bottom-nav--right { justify-content: flex-start; }
.mfoot__mark {
justify-content: flex-start;
align-items: center;
}
.mfoot__legal {
flex-direction: column;
align-items: flex-start;
gap: 10px;
text-align: left;
font-size: 9px;
padding: 18px 0 22px;
}
}
/* Fine-tune very narrow phones */
@media (max-width: 400px) {
.mfoot__signature { font-size: 22px; }
.mfoot__sec-grid { gap: 10px 16px; }
.mfoot__sec-grid a { font-size: 11px; }
.mfoot__bottom-nav a { font-size: 11px; letter-spacing: 0.18em; }
}
```
```html
```
### footer.tracy-three-col
Wrapper context: ``
```css
body {
margin: 0;
font-family: var(--f-sans);
-webkit-font-smoothing: antialiased;
}
```
```html
```
---
## freebies · 1 variant
### Shared CSS · `components/freebies/freebies.css`
```css
/* Freebies, zigzag resource cards with alternating image/text layout */
.freebies {
background: var(--surface-canvas);
padding: var(--sp-9) var(--sp-7);
}
.freebies--elevated {
background: var(--surface-elevated);
}
.freebies__inner {
max-width: 960px;
margin: 0 auto;
}
.freebies__header {
text-align: center;
margin: 0 0 var(--sp-8) 0;
}
.freebies__eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: var(--w-medium);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0 0 var(--sp-3) 0;
}
.freebies__title {
font-family: var(--f-serif-display);
font-weight: var(--w-regular);
font-size: clamp(48px, 6vw, 80px);
line-height: 1.0;
letter-spacing: -0.02em;
color: var(--ink-heading);
margin: 0;
}
.freebies__title em { font-family: var(--f-serif-italic); font-style: italic; }
/* Grid of resource cards */
.freebies__grid {
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
/* Each resource: image + text side by side, alternating */
.freebies__item {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-5);
align-items: center;
background: var(--p-white);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 2px 12px rgba(16, 16, 16, 0.04);
transition: box-shadow 0.3s ease;
}
.freebies__item:hover {
box-shadow: 0 8px 28px rgba(16, 16, 16, 0.08);
}
.freebies__item:nth-child(even) {
direction: rtl;
}
.freebies__item:nth-child(even) > * {
direction: ltr;
}
.freebies__image {
aspect-ratio: 4/3;
overflow: hidden;
background: var(--surface-elevated);
}
.freebies__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.freebies__item:hover .freebies__image img {
transform: scale(1.03);
}
.freebies__body {
padding: var(--sp-6);
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.freebies__tag {
font-family: var(--f-sans);
font-size: 10px;
font-weight: var(--w-semibold);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-on);
background: var(--accent);
padding: 5px 14px;
border-radius: var(--r-pill);
align-self: flex-start;
}
.freebies__name {
font-family: var(--f-serif-display);
font-weight: var(--w-regular);
font-size: clamp(20px, 2.5vw, 28px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--ink-heading);
margin: 0;
}
.freebies__name em { font-family: var(--f-serif-italic); font-style: italic; }
.freebies__desc {
font-family: var(--f-sans);
font-size: 14px;
line-height: 1.6;
color: var(--ink-body);
margin: 0;
}
.freebies__link {
font-family: var(--f-sans);
font-size: 13px;
font-weight: var(--w-medium);
color: var(--accent);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--sp-2);
transition: gap 0.2s;
}
.freebies__link:hover { gap: 12px; }
.freebies__link svg {
width: 14px;
height: 14px;
}
@media (max-width: 700px) {
.freebies__item,
.freebies__item:nth-child(even) {
grid-template-columns: 1fr;
direction: ltr;
}
.freebies__image { aspect-ratio: 16/9; }
}
```
### freebies.showcase
```css
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; }
.brand-label {
position: sticky; top: 0; z-index: 10;
background: var(--p-charcoal); color: var(--p-oatmeal);
font-family: var(--f-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.2em; text-transform: uppercase;
padding: 10px 24px;
display: flex; justify-content: space-between;
}
```
```html
FREEBIES, zigzag resource cards class="freebies"
Free worksheet
Write Your Own Definition of Success
Stop borrowing someone else's version. This worksheet helps you get clear on what success actually looks like for you, then build a plan to live it out.
Download free
Free download
How to Start a Podcast from Scratch
Tracy started with zero listeners and built a top-ranked show with 500+ episodes. Here are the 3 steps she'd take if starting again today.
Download free
Free mini-course
5-Day Email List Building Mini-Course
Five days, five lessons, one goal: build an email list that actually converts. No complicated funnels required.
Start free
```
---
## guarantee · 3 variants
### guarantee.badge
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--f-sans); background: var(--p-oatmeal); color: var(--p-charcoal); -webkit-font-smoothing: antialiased; }
.page { padding: clamp(14px, 1.6vw, 24px); }
.badge-card { background: var(--p-aztek); color: var(--p-oatmeal); border-radius: 14px; padding: clamp(48px, 6vw, 72px) clamp(24px, 5vw, 56px); max-width: 720px; margin: 0 auto 32px; display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; position: relative; overflow: hidden; }
.badge-card::after { content: ""; position: absolute; inset: -30% auto auto -20%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(110,142,119,0.18) 0%, transparent 70%); pointer-events: none; }
.badge { position: relative; z-index: 1; width: clamp(160px, 16vw, 180px); height: clamp(160px, 16vw, 180px); aspect-ratio: 1 / 1; flex-shrink: 0; border-radius: 50%; background: var(--p-oatmeal); color: var(--p-aztek); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; box-shadow: 0 14px 32px rgba(0,0,0,0.18); border: 2px solid var(--p-oatmeal); outline: 2px dashed rgba(246,244,241,0.35); outline-offset: 8px; }
.badge__num { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(38px, 5vw, 54px); line-height: 1; color: var(--p-aztek); margin: 0; }
.badge__unit { font-family: var(--f-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin: 4px 0 10px; }
.badge__line { width: 30px; height: 1px; background: var(--p-aztek); margin: 0 0 10px; opacity: 0.4; }
.badge__label { font-family: var(--f-sans); font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--p-aztek); line-height: 1.3; opacity: 0.75; }
.badge-card__copy { position: relative; z-index: 1; min-width: 0; }
.badge-card__eyebrow { font-family: var(--f-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--p-sage); margin: 0 0 10px; }
.badge-card__title { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.01em; color: var(--p-oatmeal); margin: 0 0 12px; }
.badge-card__title em { font-family: var(--f-serif-italic); font-style: italic; }
.badge-card__body { font-family: var(--f-sans); font-size: 15px; line-height: 1.6; color: var(--p-oatmeal); opacity: 0.82; margin: 0 0 14px; }
.badge-card__legal { font-family: var(--f-sans); font-size: 11px; line-height: 1.55; color: var(--p-oatmeal); opacity: 0.6; margin: 0; }
@media (max-width: 640px) {
.badge-card { grid-template-columns: 1fr; text-align: center; padding: 40px 24px; }
.badge { margin: 0 auto; }
.badge-card__copy { text-align: center; }
}
```
```html
14
Days
No-questions refund
Risk-reversal
A full 14 days to be sure.
If the intensive isn't what you needed, email me within 14 days of purchase and I'll refund you in full. That's it. No clauses, no interviews, no proof required.
Email hello@tracyharris.co with your order number. Refunds processed within 5 business days.
```
### guarantee.editorial
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--f-sans); background: var(--p-oatmeal); color: var(--p-charcoal); -webkit-font-smoothing: antialiased; }
.page { padding: clamp(14px, 1.6vw, 24px); }
.editorial { background: var(--p-cream); border-radius: 14px; padding: clamp(48px, 6vw, 80px) clamp(24px, 5vw, 64px); max-width: 720px; margin: 0 auto 32px; text-align: center; position: relative; overflow: hidden; }
.editorial::before { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(30,55,53,0.18); border-radius: 8px; pointer-events: none; }
.editorial__eyebrow { font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--p-aztek); margin: 0 0 20px; }
.editorial__eyebrow::before, .editorial__eyebrow::after { content: "·"; margin: 0 10px; opacity: 0.5; }
.editorial__title { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.02em; color: var(--p-charcoal); margin: 0 0 24px; }
.editorial__title em { font-family: var(--f-serif-italic); font-style: italic; }
.editorial__body { font-family: var(--f-sans); font-size: 17px; line-height: 1.7; color: var(--p-ink); margin: 0 auto 28px; max-width: 46ch; }
.editorial__body strong { color: var(--p-charcoal); }
.editorial__sig { font-family: var(--f-script); font-size: 44px; line-height: 1; color: var(--p-sage); margin: 0; }
@media (max-width: 640px) { .editorial__title { font-size: 28px; } }
```
```html
My promise
My promise to you.
Give this your full attention for the first 14 days. Show up, do the work, use the framework. If you don't feel clearer about your message and your next move, tell me and I'll refund you in full . No hoops, no interrogation. I'd rather part as friends than keep money that isn't mine to keep.
Xx Tracy
```
### guarantee.showcase
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-oatmeal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
.page { padding: clamp(14px, 1.6vw, 24px); }
.section-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-mute);
margin: 0 0 8px;
padding: 10px 12px;
}
/* =============================================== */
/* VARIANT A, EDITORIAL GUARANTEE */
/* =============================================== */
.editorial {
background: var(--p-cream);
border-radius: 14px;
padding: clamp(48px, 6vw, 80px) clamp(24px, 5vw, 64px);
max-width: 720px;
margin: 0 auto 32px;
text-align: center;
position: relative;
overflow: hidden;
}
.editorial::before {
content: "";
position: absolute;
inset: 20px;
border: 1px solid rgba(30,55,53,0.18);
border-radius: 8px;
pointer-events: none;
}
.editorial__eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-aztek);
margin: 0 0 20px;
}
.editorial__eyebrow::before,
.editorial__eyebrow::after {
content: "·";
margin: 0 10px;
opacity: 0.5;
}
.editorial__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(34px, 4.4vw, 56px);
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--p-charcoal);
margin: 0 0 24px;
}
.editorial__title em { font-family: var(--f-serif-italic); font-style: italic; }
.editorial__body {
font-family: var(--f-sans);
font-size: 17px;
line-height: 1.7;
color: var(--p-ink);
margin: 0 auto 28px;
max-width: 46ch;
}
.editorial__body strong { color: var(--p-charcoal); }
.editorial__sig {
font-family: var(--f-script);
font-size: 44px;
line-height: 1;
color: var(--p-sage);
margin: 0;
}
/* =============================================== */
/* VARIANT B, BADGE GUARANTEE */
/* =============================================== */
.badge-card {
background: var(--p-aztek);
color: var(--p-oatmeal);
border-radius: 14px;
padding: clamp(48px, 6vw, 72px) clamp(24px, 5vw, 56px);
max-width: 720px;
margin: 0 auto 32px;
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(24px, 4vw, 48px);
align-items: center;
position: relative;
overflow: hidden;
}
.badge-card::after {
content: "";
position: absolute;
inset: -30% auto auto -20%;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(110,142,119,0.18) 0%, transparent 70%);
pointer-events: none;
}
/* the badge / seal */
.badge {
position: relative;
z-index: 1;
width: clamp(140px, 16vw, 180px);
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--p-oatmeal);
color: var(--p-aztek);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 16px;
box-shadow: 0 14px 32px rgba(0,0,0,0.18);
border: 2px solid var(--p-oatmeal);
outline: 2px dashed rgba(246,244,241,0.35);
outline-offset: 8px;
}
.badge__num {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(40px, 5vw, 54px);
line-height: 1;
color: var(--p-aztek);
margin: 0;
}
.badge__unit {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
margin: 4px 0 10px;
}
.badge__line {
width: 30px; height: 1px;
background: var(--p-aztek);
margin: 0 0 10px;
opacity: 0.4;
}
.badge__label {
font-family: var(--f-sans);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--p-aztek);
line-height: 1.3;
opacity: 0.75;
}
/* badge card copy */
.badge-card__copy { position: relative; z-index: 1; min-width: 0; }
.badge-card__eyebrow {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-sage);
margin: 0 0 10px;
}
.badge-card__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(26px, 3vw, 36px);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--p-oatmeal);
margin: 0 0 12px;
}
.badge-card__title em { font-family: var(--f-serif-italic); font-style: italic; }
.badge-card__body {
font-family: var(--f-sans);
font-size: 15px;
line-height: 1.6;
color: var(--p-oatmeal);
opacity: 0.82;
margin: 0 0 14px;
}
.badge-card__legal {
font-family: var(--f-sans);
font-size: 11px;
line-height: 1.55;
color: var(--p-oatmeal);
opacity: 0.6;
margin: 0;
}
@media (max-width: 640px) {
.editorial__title { font-size: 28px; }
.badge-card {
grid-template-columns: 1fr;
text-align: center;
padding: 40px 24px;
}
.badge { margin: 0 auto; }
.badge-card__copy { text-align: center; }
}
```
```html
Variant · Editorial guarantee
My promise
My promise to you.
Give this your full attention for the first 14 days. Show up, do the work, use the framework. If you don't feel clearer about your message and your next move, tell me and I'll refund you in full . No hoops, no interrogation. I'd rather part as friends than keep money that isn't mine to keep.
Xx Tracy
Variant · Badge guarantee
14
Days
No-questions refund
Risk-reversal
A full 14 days to be sure.
If the intensive isn't what you needed, email me within 14 days of purchase and I'll refund you in full. That's it. No clauses, no interviews, no proof required.
Email hello@tracyharris.co with your order number. Refunds processed within 5 business days.
```
---
## hero · 30 variants
### Shared CSS · `components/hero/hero.css`
```css
/* Hero component, pure semantic tokens. Never reference primitives directly. */
.hero {
background: var(--surface-canvas);
color: var(--ink-body);
padding: var(--sp-8) var(--sp-5);
min-height: 80vh;
display: flex;
align-items: center;
}
.hero__inner {
max-width: 1200px;
margin: 0 auto;
width: 100%;
display: grid;
gap: var(--sp-7);
}
.hero--split-right .hero__inner,
.hero--split-left .hero__inner {
grid-template-columns: 1fr 1fr;
align-items: center;
}
.hero--split-left .hero__content {
order: 2;
}
.hero--text-only .hero__inner {
grid-template-columns: 1fr;
max-width: 760px;
text-align: center;
}
.hero--stacked .hero__inner {
grid-template-columns: 1fr;
}
@media (max-width: 820px) {
.hero--split-right .hero__inner,
.hero--split-left .hero__inner {
grid-template-columns: 1fr;
}
.hero--split-left .hero__content {
order: 0;
}
}
.hero__eyebrow {
font-family: var(--f-sans);
font-weight: var(--w-medium);
font-size: var(--s-sm);
letter-spacing: var(--t-widest);
text-transform: uppercase;
color: var(--type-subheading-color);
margin: 0 0 var(--sp-4) 0;
}
.hero__logo {
display: block;
height: 30px;
width: auto;
margin: 0 0 var(--sp-8) 0;
}
.hero--text-only .hero__logo {
margin-left: auto;
margin-right: auto;
}
[data-brand="ffm"].hero--dark .hero__logo {
filter: brightness(0) invert(1);
}
.hero__title {
font-family: var(--type-display-family);
font-weight: var(--w-regular);
font-size: clamp(var(--s-5xl), 7vw, var(--s-7xl));
line-height: var(--l-tight);
letter-spacing: var(--t-tight);
color: var(--type-display-color);
margin: 0 0 var(--sp-5) 0;
}
.hero__title em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.hero__script {
font-family: var(--type-script-family, var(--f-script));
color: var(--type-script-color, var(--accent));
font-size: 1.2em;
font-style: normal;
}
.hero__supporting {
font-family: var(--f-sans);
font-size: var(--s-lg);
line-height: var(--l-relaxed);
color: var(--ink-body);
max-width: 50ch;
margin: 0 0 var(--sp-6) 0;
}
.hero--text-only .hero__supporting {
margin-left: auto;
margin-right: auto;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-5);
align-items: center;
}
.hero--text-only .hero__actions {
justify-content: center;
}
@media (max-width: 820px) {
.hero--text-only .hero__actions {
justify-content: flex-start;
}
}
.hero__cta {
display: inline-block;
background: var(--accent);
color: var(--accent-on);
padding: var(--sp-4) var(--sp-6);
border-radius: var(--r-none);
text-decoration: none;
font-family: var(--f-sans);
font-weight: var(--w-medium);
font-size: var(--s-sm);
letter-spacing: var(--t-wider);
text-transform: uppercase;
transition: background-color 0.2s ease;
}
.hero__cta:hover {
background: var(--accent-hover);
}
[data-brand="ffm"] .hero__cta {
background: var(--accent-gradient);
color: var(--accent-on);
}
/* FFM dark variant, charcoal canvas, white body text, gold as accent */
[data-brand="ffm"].hero--dark {
background: var(--p-charcoal);
}
[data-brand="ffm"].hero--dark .hero__eyebrow {
color: var(--p-gold-mid);
}
[data-brand="ffm"].hero--dark .hero__title {
color: var(--p-white);
}
[data-brand="ffm"].hero--dark .hero__title em {
color: var(--p-gold-mid);
}
[data-brand="ffm"].hero--dark .hero__supporting {
color: var(--p-white);
opacity: 0.92;
}
[data-brand="ffm"].hero--dark .hero__secondary {
color: var(--p-white);
border-bottom-color: var(--p-gold-mid);
}
[data-brand="ffm"].hero--dark .hero__cta {
background: var(--accent-gradient);
color: var(--p-charcoal);
font-weight: var(--w-semibold);
}
.hero__secondary {
font-family: var(--f-sans);
font-size: var(--s-sm);
font-weight: var(--w-medium);
letter-spacing: var(--t-wider);
text-transform: uppercase;
color: var(--ink-heading);
text-decoration: none;
border-bottom: 1px solid var(--border-divider);
padding-bottom: 2px;
}
.hero__media {
width: 100%;
aspect-ratio: 4/5;
background: var(--surface-elevated);
overflow: hidden;
}
.hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Brand signature flourishes */
[data-brand="ffm"] .hero__title {
font-style: normal;
}
[data-brand="fresh"] .hero__pillars {
display: flex;
gap: var(--sp-3);
margin-top: var(--sp-5);
}
[data-brand="fresh"] .hero__pillar {
width: 10px;
height: 10px;
border-radius: var(--r-pill);
}
/* --- Marquee layout: centered copy + auto-scrolling photo strip at bottom --- */
.hero--marquee {
position: relative;
min-height: 100vh;
padding: var(--sp-8) var(--sp-5) 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
overflow: hidden;
}
.hero--marquee .hero__inner {
display: block;
max-width: 820px;
margin: 0 auto;
padding-top: var(--sp-8);
position: relative;
z-index: 2;
}
.hero--marquee .hero__actions {
margin-top: var(--sp-8);
position: relative;
z-index: 3;
}
.hero--marquee .hero__content {
display: flex;
flex-direction: column;
align-items: center;
}
.hero__pill {
display: inline-block;
border: 1px solid var(--border-hairline);
padding: 6px 16px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: var(--s-sm);
font-weight: var(--w-medium);
letter-spacing: var(--t-wider);
text-transform: uppercase;
color: var(--ink-heading);
margin: 0 0 var(--sp-5) 0;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(8px);
}
[data-brand="ffm"].hero--dark .hero__pill {
color: var(--p-white);
border-color: rgba(201, 164, 108, 0.35);
background: rgba(255, 255, 255, 0.03);
}
.hero--marquee .hero__title {
font-size: clamp(48px, 7vw, 84px);
line-height: 1.05;
max-width: 12ch;
margin-left: auto;
margin-right: auto;
}
.hero--marquee .hero__supporting {
margin-left: auto;
margin-right: auto;
max-width: 56ch;
}
.hero--marquee .hero__actions {
justify-content: center;
}
.hero__marquee-strip {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 36%;
overflow: hidden;
pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}
.hero__marquee-track {
display: flex;
gap: var(--sp-4);
width: max-content;
animation: hero-marquee 45s linear infinite;
padding: var(--sp-6) 0;
}
@keyframes hero-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.hero__marquee-item {
flex: 0 0 auto;
width: 180px;
height: 240px;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.25));
}
.hero__marquee-item:nth-child(odd) {
transform: rotate(-2deg);
}
.hero__marquee-item:nth-child(even) {
transform: rotate(5deg);
}
.hero__marquee-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 820px) {
.hero--marquee .hero__title {
font-size: clamp(40px, 10vw, 56px);
}
.hero--marquee .hero__actions {
justify-content: center;
}
.hero__marquee-item {
width: 140px;
height: 190px;
}
}
/* --- Silk layout: full-viewport animated silk canvas + editorial type --- */
.hero--silk {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
overflow: hidden;
background: #0a0a0a;
box-sizing: border-box;
}
.hero__silk-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
display: block;
}
.hero__silk-veil {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 40%, transparent 60%, rgba(0, 0, 0, 0.55));
pointer-events: none;
}
.hero__silk-content {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 var(--sp-5);
box-sizing: border-box;
}
.hero__silk-title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(56px, 11vw, 168px);
line-height: 0.95;
letter-spacing: -0.04em;
color: #ffffff;
mix-blend-mode: difference;
margin: 0;
max-width: 14ch;
opacity: 0;
animation: silk-fade-in-up 1s ease-out 0.3s forwards;
text-shadow: 0 0 40px rgba(255, 255, 255, 0.08);
}
.hero__silk-title em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.hero__silk-subtitle {
margin: var(--sp-6) 0 0;
font-family: var(--f-sans);
font-size: clamp(13px, 1.4vw, 18px);
font-weight: var(--w-regular);
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
mix-blend-mode: overlay;
opacity: 0;
animation: silk-fade-in-up 1s ease-out 0.6s forwards;
}
.hero__silk-subtitle .dot {
color: rgba(201, 164, 108, 0.6);
margin: 0 var(--sp-4);
}
.hero__silk-actions {
margin-top: var(--sp-7);
opacity: 0;
animation: silk-fade-in-up 1s ease-out 0.8s forwards;
}
.hero__silk-corner {
position: absolute;
top: var(--sp-5);
left: var(--sp-5);
z-index: 3;
font-family: var(--f-sans);
font-size: 10px;
font-weight: var(--w-medium);
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
opacity: 0;
animation: silk-fade-in-corner 1s ease-out 1s forwards;
}
.hero__silk-logo {
position: absolute;
top: clamp(20px, 3vw, 40px);
right: clamp(32px, 4vw, 56px);
z-index: 3;
display: block;
width: clamp(120px, 12vw, 160px);
height: auto;
max-width: calc(100% - 80px);
filter: brightness(0) invert(1);
opacity: 0;
animation: silk-fade-in-corner 1s ease-out 1s forwards;
}
@media (max-width: 820px) {
.hero__silk-title {
font-size: clamp(48px, 12vw, 96px);
max-width: 12ch;
}
}
@media (max-width: 640px) {
.hero__silk-logo {
width: 110px;
right: 20px;
top: 20px;
}
.hero__silk-corner {
left: 20px;
top: 20px;
}
.hero__silk-title {
font-size: clamp(44px, 12vw, 80px);
max-width: 12ch;
}
.hero__silk-subtitle {
letter-spacing: 0.18em;
font-size: 12px;
padding: 0 var(--sp-4);
}
.hero__silk-subtitle .dot {
margin: 0 var(--sp-3);
}
.hero__silk-actions {
width: 100%;
display: flex;
justify-content: center;
padding: 0 var(--sp-5);
box-sizing: border-box;
}
.hero__silk-actions .hero__cta {
width: 100%;
max-width: 320px;
text-align: center;
padding: var(--sp-4) var(--sp-5);
box-sizing: border-box;
}
}
@media (max-width: 480px) {
.hero__silk-title {
font-size: clamp(38px, 11vw, 56px);
max-width: 11ch;
}
.hero__silk-subtitle {
font-size: 11px;
letter-spacing: 0.15em;
}
.hero__silk-actions {
margin-top: var(--sp-6);
}
}
@media (max-width: 380px) {
.hero__silk-logo {
width: 96px;
}
.hero__silk-title {
font-size: 36px;
line-height: 1;
}
}
@keyframes silk-fade-in-up {
from { opacity: 0; transform: translateY(2rem); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes silk-fade-in-corner {
from { opacity: 0; transform: translateY(-0.5rem); }
to { opacity: 0.8; transform: translateY(0); }
}
/* --- Minimalist layout: nav + 3-col grid (text / circle+portrait / big type) + footer --- */
.hero--minimalist {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--sp-6);
background: var(--surface-canvas);
}
.hero__mini-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
z-index: 30;
}
.hero__mini-header .hero__logo {
margin: 0;
height: 26px;
}
.hero__mini-nav {
display: flex;
gap: var(--sp-6);
}
.hero__mini-nav a {
font-family: var(--f-sans);
font-size: 12px;
font-weight: var(--w-medium);
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(16, 16, 16, 0.55);
text-decoration: none;
transition: color 0.2s ease;
}
.hero__mini-nav a:hover {
color: var(--ink-heading);
}
.hero__mini-grid {
display: grid;
grid-template-columns: 1fr 1.1fr 1fr;
align-items: center;
flex: 1;
width: 100%;
max-width: 1280px;
margin: 0 auto;
gap: var(--sp-6);
padding: var(--sp-7) 0;
}
.hero__mini-left {
text-align: left;
max-width: 280px;
}
.hero__mini-left p {
font-family: var(--f-sans);
font-size: 14px;
line-height: 1.65;
color: rgba(16, 16, 16, 0.72);
margin: 0;
}
.hero__mini-readmore {
display: inline-block;
margin-top: var(--sp-4);
font-family: var(--f-sans);
font-size: 13px;
font-weight: var(--w-medium);
color: var(--ink-heading);
text-decoration: underline;
text-underline-offset: 4px;
}
.hero__mini-center {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.hero__mini-circle {
position: absolute;
z-index: 0;
width: min(480px, 38vw);
aspect-ratio: 1 / 1;
border-radius: var(--r-pill);
background: var(--p-sage);
}
.hero__mini-portrait {
position: relative;
z-index: 1;
width: min(440px, 36vw);
height: auto;
display: block;
transform: translateY(8%);
}
.hero__mini-right {
font-family: var(--f-serif-display);
font-weight: var(--w-regular);
font-size: clamp(72px, 11vw, 168px);
line-height: 0.88;
letter-spacing: -0.04em;
color: var(--ink-heading);
text-align: left;
margin: 0;
}
.hero__mini-right em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.hero__mini-footer {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
z-index: 30;
}
.hero__mini-social {
display: flex;
gap: var(--sp-4);
align-items: center;
}
.hero__mini-social a {
color: rgba(16, 16, 16, 0.55);
transition: color 0.2s ease;
display: inline-flex;
}
.hero__mini-social a:hover {
color: var(--ink-heading);
}
.hero__mini-location {
font-family: var(--f-sans);
font-size: 12px;
font-weight: var(--w-medium);
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(16, 16, 16, 0.65);
}
@media (max-width: 820px) {
.hero--minimalist {
padding: var(--sp-5);
}
.hero__mini-nav {
display: none;
}
.hero__mini-grid {
grid-template-columns: 1fr;
gap: var(--sp-5);
padding: var(--sp-5) 0;
text-align: center;
}
.hero__mini-left {
order: 3;
text-align: center;
max-width: none;
margin: 0 auto;
}
.hero__mini-center {
order: 1;
min-height: 60vw;
}
.hero__mini-circle {
width: 75vw;
}
.hero__mini-portrait {
width: 70vw;
}
.hero__mini-right {
order: 2;
text-align: center;
font-size: clamp(64px, 18vw, 96px);
}
}
```
### hero.classic-ffb-split-right-louder
Wrapper context: ``
```css
/* Classic FFB split-right, LOUDER layer.
Adds:
- letter-by-letter staggered reveal on headline (each char blurs in)
- magnetic CTA (cursor follows the button within a radius)
- cursor parallax on the portrait
- scroll-linked letter-spacing tighten on the headline
- soft opacity pulse on the trust badge
- dot-led animated underline on secondary link
All motion gated behind prefers-reduced-motion. */
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
--ease-magnetic: cubic-bezier(0.25, 0.1, 0.3, 1.2);
}
body {
margin: 0;
font-family: var(--f-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: var(--surface-canvas);
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--p-aztek); color: var(--p-oatmeal);
padding: 10px 14px; z-index: 100;
font-family: var(--f-sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }
.hero.hero--split-right {
padding: clamp(72px, 10vh, 112px) clamp(24px, 5vw, 64px);
min-height: min(92dvh, 960px);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Ambient warm wash with a gentle pan so the canvas itself has a pulse */
.hero.hero--split-right::before {
content: "";
position: absolute;
inset: -10% -5% auto auto;
width: 60%;
height: 70%;
background: radial-gradient(ellipse at 70% 30%,
rgba(204, 153, 137, 0.18) 0%,
rgba(204, 153, 137, 0.0) 60%);
pointer-events: none;
z-index: 0;
animation: loudBreathe 9s var(--ease-in-out-craft) infinite;
}
@keyframes loudBreathe {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
50% { transform: translate(-1%, 1%) scale(1.04); opacity: 0.92; }
}
.hero.hero--split-right .hero__inner {
position: relative;
z-index: 1;
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
/* Logo, supporting, actions, same staggered rise as polished, slightly firmer curve */
.hero__logo,
.hero__supporting,
.hero__actions {
opacity: 0;
transform: translateY(14px);
animation: loudRise 900ms var(--ease-out-craft) forwards;
will-change: transform, opacity;
}
.hero__logo { animation-delay: 180ms; }
.hero__supporting { animation-delay: 720ms; }
.hero__actions { animation-delay: 900ms; }
@keyframes loudRise {
from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero__logo {
margin-bottom: clamp(24px, 3.5vh, 44px);
display: block;
}
/* Headline, each character rises with blur and a per-char delay.
JS splits it into spans after load. Scroll tightens letter-spacing. */
.hero__title {
letter-spacing: -0.015em;
text-wrap: balance;
/* letter-spacing is mutated by scroll JS via custom property */
letter-spacing: var(--title-ls, -0.015em);
transition: letter-spacing 400ms var(--ease-out-craft);
}
.hero__title em {
font-family: var(--f-serif-italic);
font-style: italic;
color: var(--p-sage);
}
.hero__title .loud-char {
display: inline-block;
opacity: 0;
transform: translateY(0.35em);
filter: blur(6px);
animation: loudChar 900ms var(--ease-drawer) forwards;
will-change: transform, opacity, filter;
}
.hero__title .loud-char--space { width: 0.25em; }
@keyframes loudChar {
from { opacity: 0; transform: translateY(0.35em); filter: blur(6px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero__supporting {
color: var(--p-ink);
max-width: 52ch;
text-wrap: pretty;
}
/* CTA, magnetic. Wrapper gets the mouse-follow transform via JS;
inner gets the press/hover states. Colored shadow stays. */
.hero__cta {
position: relative;
padding: 16px 28px;
min-height: 48px;
display: inline-flex;
align-items: center;
transition:
background-color 200ms var(--ease-out-craft),
transform 320ms var(--ease-magnetic),
box-shadow 220ms var(--ease-out-craft);
box-shadow: 0 6px 24px -12px rgba(30, 55, 53, 0.45);
will-change: transform;
}
.hero__cta:hover {
background: var(--accent-hover);
box-shadow: 0 14px 36px -10px rgba(30, 55, 53, 0.6);
}
.hero__cta:active {
transform: scale(0.97) !important;
transition: transform 120ms ease-out !important;
box-shadow: 0 4px 16px -10px rgba(30, 55, 53, 0.45);
}
.hero__cta:focus-visible {
outline: 2px solid var(--p-aztek);
outline-offset: 3px;
}
/* Secondary link, dot-led sweep underline on hover */
.hero__secondary {
position: relative;
padding: 10px 22px 10px 2px;
min-height: 44px;
display: inline-flex;
align-items: center;
transition: color 180ms var(--ease-out-craft), letter-spacing 220ms var(--ease-out-craft);
}
.hero__secondary::after {
content: "";
position: absolute;
left: 2px;
right: auto;
bottom: 10px;
width: 0;
height: 1px;
background: currentColor;
transition: width 360ms var(--ease-out-craft);
}
.hero__secondary::before {
content: "";
position: absolute;
left: 0;
bottom: 8px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--p-sage);
opacity: 0;
transform: translateX(0);
transition: opacity 220ms var(--ease-out-craft), transform 360ms var(--ease-out-craft);
}
.hero__secondary:hover::after { width: calc(100% - 14px); }
.hero__secondary:hover::before { opacity: 1; transform: translateX(calc(100% * 20 - 6px)); }
.hero__secondary:hover { letter-spacing: calc(var(--t-wider) + 0.02em); }
.hero__secondary:active { transform: translateY(1px); }
.hero__secondary:focus-visible {
outline: 1px solid var(--p-aztek);
outline-offset: 4px;
border-radius: 2px;
}
/* Media, cursor parallax applied via JS on the inner img.
Base reveal animation kept. */
.hero__media {
position: relative;
border-radius: 2px;
box-shadow:
0 24px 48px -24px rgba(30, 55, 53, 0.35),
0 2px 8px -4px rgba(30, 55, 53, 0.15);
opacity: 0;
transform: translateY(18px) scale(0.98);
animation: loudMediaReveal 1200ms var(--ease-drawer) 260ms forwards;
transition: transform 600ms var(--ease-out-craft), box-shadow 400ms var(--ease-out-craft);
will-change: transform, opacity;
overflow: hidden;
}
@keyframes loudMediaReveal {
from { opacity: 0; transform: translateY(18px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero__media img {
transition: transform 900ms var(--ease-in-out-craft);
will-change: transform;
display: block;
width: 100%;
height: auto;
}
@media (hover: hover) and (pointer: fine) {
.hero__media:hover {
box-shadow:
0 40px 64px -20px rgba(30, 55, 53, 0.5),
0 6px 14px -4px rgba(30, 55, 53, 0.22);
}
}
/* Trust badge, quiet opacity pulse so the page feels alive */
.ffb-meta {
position: absolute;
left: clamp(24px, 5vw, 64px);
bottom: clamp(24px, 4vh, 40px);
font-family: var(--f-sans);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--p-mute);
z-index: 1;
opacity: 0;
animation:
loudRise 900ms var(--ease-out-craft) 1100ms forwards,
loudPulse 4.8s var(--ease-in-out-craft) 2000ms infinite;
display: inline-flex;
align-items: center;
gap: 12px;
}
.ffb-meta::before {
content: "";
width: 28px; height: 1px;
background: currentColor;
opacity: 0.5;
}
@keyframes loudPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.65; }
}
/* MOBILE */
@media (max-width: 820px) {
.hero.hero--split-right { padding: 72px 20px 56px; min-height: auto; }
.hero.hero--split-right .hero__inner { grid-template-columns: 1fr; gap: 32px; }
.hero__title { font-size: clamp(40px, 9vw, 56px); }
.hero__media { order: 2; aspect-ratio: 4/5; max-height: 60vh; }
.hero__content { order: 1; }
.ffb-meta {
position: static; margin-top: 24px; display: flex;
font-size: 9px; letter-spacing: 0.22em; gap: 10px;
}
.ffb-meta::before { width: 20px; }
}
@media (max-width: 480px) { .ffb-meta { display: none; } }
@media (max-width: 380px) {
.hero__title { font-size: 34px; }
.hero__actions { gap: 16px; }
}
/* REDUCED MOTION, collapse everything to steady final state */
@media (prefers-reduced-motion: reduce) {
.hero.hero--split-right::before,
.hero__logo, .hero__title, .hero__supporting, .hero__actions,
.hero__media, .ffb-meta {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.hero__title .loud-char {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.hero__media img, .hero__cta, .hero__secondary {
transition: none !important;
}
}
```
```html
Skip to content
A 12-month mentorship for the woman building something real .
This is not a course you consume. It is a mentorship experience you move through with Tracy's guidance, strategic thinking, and personal investment in your outcome.
Freedom Filled® · Est. 2015
```
### hero.classic-ffb-split-right-polished
Wrapper context: ``
```css
/* Classic FFB split-right, polished layer.
Keep structure from hero.css; add staggered entrance, tactile
CTA states, hover-aware media, focus visibility, reduced motion. */
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
body {
margin: 0;
font-family: var(--f-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: var(--surface-canvas);
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--p-aztek); color: var(--p-oatmeal);
padding: 10px 14px; z-index: 100;
font-family: var(--f-sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }
/* ------ Polish overrides on the shared .hero layer ------ */
.hero.hero--split-right {
padding: clamp(72px, 10vh, 112px) clamp(24px, 5vw, 64px);
min-height: min(92dvh, 960px);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Soft warmth wash behind content, ambient, not decorative */
.hero.hero--split-right::before {
content: "";
position: absolute;
inset: -10% -5% auto auto;
width: 60%;
height: 70%;
background: radial-gradient(ellipse at 70% 30%,
rgba(204, 153, 137, 0.12) 0%,
rgba(204, 153, 137, 0.0) 60%);
pointer-events: none;
z-index: 0;
}
.hero.hero--split-right .hero__inner {
position: relative;
z-index: 1;
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
/* Staggered entrance for content column */
.hero__logo,
.hero__title,
.hero__supporting,
.hero__actions {
opacity: 0;
transform: translateY(14px);
animation: ffbRise 900ms var(--ease-out-craft) forwards;
will-change: transform, opacity;
}
.hero__logo { animation-delay: 180ms; }
.hero__title { animation-delay: 320ms; }
.hero__supporting { animation-delay: 480ms; }
.hero__actions { animation-delay: 640ms; }
@keyframes ffbRise {
from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero__logo {
margin-bottom: clamp(24px, 3.5vh, 44px);
display: block;
}
.hero__title {
letter-spacing: -0.015em;
text-wrap: balance;
/* Bring hero__title em closer to brand sage rather than generic italic */
}
.hero__title em {
font-family: var(--f-serif-italic);
font-style: italic;
color: var(--p-sage);
}
.hero__supporting {
color: var(--p-ink);
max-width: 52ch;
text-wrap: pretty;
}
/* CTA, tactile press feedback, hover lift, colored shadow */
.hero__cta {
position: relative;
padding: 16px 28px;
min-height: 48px;
display: inline-flex;
align-items: center;
transition:
background-color 200ms var(--ease-out-craft),
transform 180ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft);
box-shadow: 0 6px 24px -12px rgba(30, 55, 53, 0.45);
}
.hero__cta:hover {
background: var(--accent-hover);
transform: translateY(-1px);
box-shadow: 0 10px 28px -10px rgba(30, 55, 53, 0.55);
}
.hero__cta:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 4px 16px -10px rgba(30, 55, 53, 0.45);
}
.hero__cta:focus-visible {
outline: 2px solid var(--p-aztek);
outline-offset: 3px;
}
.hero__secondary {
position: relative;
padding: 10px 2px;
min-height: 44px;
display: inline-flex;
align-items: center;
transition: color 180ms var(--ease-out-craft), letter-spacing 220ms var(--ease-out-craft);
}
.hero__secondary:hover { letter-spacing: calc(var(--t-wider) + 0.02em); }
.hero__secondary:active { transform: translateY(1px); }
.hero__secondary:focus-visible {
outline: 1px solid var(--p-aztek);
outline-offset: 4px;
border-radius: 2px;
}
/* Media panel, soft reveal, subtle hover lift */
.hero__media {
position: relative;
border-radius: 2px; /* hairline, not rounded-rectangle AI slop */
box-shadow:
0 24px 48px -24px rgba(30, 55, 53, 0.35),
0 2px 8px -4px rgba(30, 55, 53, 0.15);
opacity: 0;
transform: translateY(18px) scale(0.98);
animation: ffbMediaReveal 1100ms var(--ease-drawer) 260ms forwards;
transition: transform 400ms var(--ease-out-craft), box-shadow 400ms var(--ease-out-craft);
will-change: transform, opacity;
}
@keyframes ffbMediaReveal {
from { opacity: 0; transform: translateY(18px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (hover: hover) and (pointer: fine) {
.hero__media:hover {
transform: translateY(-4px);
box-shadow:
0 32px 56px -20px rgba(30, 55, 53, 0.42),
0 4px 12px -4px rgba(30, 55, 53, 0.2);
}
.hero__media:hover img {
transform: scale(1.025);
}
}
.hero__media img {
transition: transform 900ms var(--ease-in-out-craft);
will-change: transform;
}
/* Tiny decorative mark, script "est. trust" flourish without being cliche */
.ffb-meta {
position: absolute;
left: clamp(24px, 5vw, 64px);
bottom: clamp(24px, 4vh, 40px);
font-family: var(--f-sans);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--p-mute);
z-index: 1;
opacity: 0;
animation: ffbRise 900ms var(--ease-out-craft) 900ms forwards;
display: inline-flex;
align-items: center;
gap: 12px;
}
.ffb-meta::before {
content: "";
width: 28px; height: 1px;
background: currentColor;
opacity: 0.5;
}
/* -------- MOBILE -------- */
@media (max-width: 820px) {
.hero.hero--split-right {
padding: 72px 20px 56px;
min-height: auto;
}
.hero.hero--split-right .hero__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.hero__title {
font-size: clamp(40px, 9vw, 56px);
}
.hero__media {
order: 2;
aspect-ratio: 4/5;
max-height: 60vh;
}
.hero__content { order: 1; }
/* Decorative trust stamp, tighten for mobile so it doesn't
consume viewport width with its letter-spacing + uppercase run. */
.ffb-meta {
position: static;
margin-top: 24px;
display: flex;
font-size: 9px;
letter-spacing: 0.22em;
gap: 10px;
}
.ffb-meta::before { width: 20px; }
}
@media (max-width: 480px) {
/* Not essential at this width, hide. */
.ffb-meta { display: none; }
}
@media (max-width: 380px) {
.hero__title { font-size: 34px; }
.hero__actions { gap: 16px; }
}
/* -------- REDUCED MOTION -------- */
@media (prefers-reduced-motion: reduce) {
.hero__logo,
.hero__title,
.hero__supporting,
.hero__actions,
.hero__media,
.ffb-meta {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.hero__media img {
transition: none !important;
}
}
```
```html
Skip to content
A 12-month mentorship for the woman building something real .
This is not a course you consume. It is a mentorship experience you move through with Tracy's guidance, strategic thinking, and personal investment in your outcome.
Freedom Filled® · Est. 2015
```
### hero.classic-ffb-split-right
Wrapper context: ``
```html
A 12-month mentorship for the woman building something real .
This is not a course you consume. It is a mentorship experience you move through with Tracy's guidance, strategic thinking, and personal investment in your outcome.
```
### hero.classic-ffm-dark-split-right-polished
Wrapper context: ``
```css
/* Classic FFM dark split (photo right), polished.
Dark charcoal surface + gold accents. Staggered entrance, soft
media reveal, tactile gold CTA, focus rings, reduced motion. */
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
body {
margin: 0;
font-family: var(--f-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: var(--p-charcoal);
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--p-gold-dark); color: var(--p-oatmeal);
padding: 10px 14px; z-index: 100;
font-family: var(--f-sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }
.hero.hero--split-right.hero--dark {
position: relative;
overflow: hidden;
isolation: isolate;
padding: clamp(72px, 10vh, 112px) clamp(24px, 5vw, 64px);
}
/* Ambient gold wash from upper-right */
.hero.hero--split-right.hero--dark::before {
content: "";
position: absolute;
inset: -10% auto auto -5%;
width: 55%;
height: 65%;
background: radial-gradient(ellipse at 30% 30%,
rgba(201, 164, 108, 0.16) 0%,
rgba(201, 164, 108, 0.0) 60%);
pointer-events: none;
z-index: 0;
}
.hero.hero--split-right.hero--dark .hero__inner {
position: relative;
z-index: 1;
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
.hero__logo,
.hero__title,
.hero__supporting,
.hero__actions {
opacity: 0;
transform: translateY(14px);
animation: ffmdRise 900ms var(--ease-out-craft) forwards;
will-change: transform, opacity;
}
.hero__logo { animation-delay: 180ms; }
.hero__title { animation-delay: 320ms; }
.hero__supporting { animation-delay: 480ms; }
.hero__actions { animation-delay: 640ms; }
@keyframes ffmdRise {
from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero__title {
letter-spacing: -0.015em;
text-wrap: balance;
color: var(--p-oatmeal);
}
.hero__title em {
font-family: var(--f-serif-italic);
font-style: italic;
color: var(--p-gold-mid);
}
.hero__supporting {
color: var(--p-oatmeal);
opacity: 0.85;
max-width: 52ch;
text-wrap: pretty;
}
.hero__cta {
position: relative;
padding: 16px 28px;
min-height: 48px;
display: inline-flex;
align-items: center;
transition:
background 220ms var(--ease-out-craft),
transform 180ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft);
box-shadow: 0 6px 24px -12px rgba(201, 164, 108, 0.55);
}
.hero__cta:hover {
transform: translateY(-1px);
box-shadow: 0 10px 28px -10px rgba(201, 164, 108, 0.65);
}
.hero__cta:active {
transform: translateY(0) scale(0.98);
}
.hero__cta:focus-visible {
outline: 2px solid var(--p-gold-mid);
outline-offset: 3px;
}
.hero__secondary {
position: relative;
padding: 10px 2px;
min-height: 44px;
display: inline-flex;
align-items: center;
color: var(--p-oatmeal);
transition:
color 180ms var(--ease-out-craft),
letter-spacing 220ms var(--ease-out-craft);
}
.hero__secondary:hover { letter-spacing: calc(var(--t-wider) + 0.02em); color: var(--p-gold-mid); }
.hero__secondary:focus-visible {
outline: 1px solid var(--p-gold-mid);
outline-offset: 4px;
border-radius: 2px;
}
.hero__media {
position: relative;
border-radius: 2px;
box-shadow:
0 24px 48px -24px rgba(0, 0, 0, 0.55),
0 2px 8px -4px rgba(0, 0, 0, 0.3);
opacity: 0;
transform: translateY(18px) scale(0.98);
animation: ffmdMediaReveal 1100ms var(--ease-drawer) 260ms forwards;
transition:
transform 400ms var(--ease-out-craft),
box-shadow 400ms var(--ease-out-craft);
will-change: transform, opacity;
}
@keyframes ffmdMediaReveal {
from { opacity: 0; transform: translateY(18px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (hover: hover) and (pointer: fine) {
.hero__media:hover {
transform: translateY(-4px);
box-shadow:
0 32px 56px -20px rgba(0, 0, 0, 0.6),
0 4px 12px -4px rgba(0, 0, 0, 0.35);
}
.hero__media:hover img { transform: scale(1.025); }
}
.hero__media img {
transition: transform 900ms var(--ease-in-out-craft);
will-change: transform;
}
@media (max-width: 820px) {
.hero.hero--split-right.hero--dark {
padding: 72px 20px 56px;
min-height: auto;
}
.hero.hero--split-right.hero--dark .hero__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.hero__title {
font-size: clamp(38px, 9vw, 52px);
}
.hero__media {
order: 2;
aspect-ratio: 4/5;
max-height: 60vh;
}
.hero__content { order: 1; }
}
@media (max-width: 380px) {
.hero__title { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.hero__logo,
.hero__title,
.hero__supporting,
.hero__actions,
.hero__media {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.hero__media img { transition: none !important; }
}
```
```html
Skip to content
For the woman ready to lead at a higher level .
Live retreats in Bali. A carefully selected group of high-achieving female entrepreneurs. Radical honesty, deep support, ambitious thinking.
```
### hero.classic-ffm-dark-split-right
Wrapper context: ``
```html
For the woman ready to lead at a higher level .
Live retreats in Bali. A carefully selected group of high-achieving female entrepreneurs. Radical honesty, deep support, ambitious thinking.
```
### hero.classic-ffm-marquee-polished
Wrapper context: ``
```css
/* Classic FFM marquee (dark), polished.
Staggered entrance on content, tactile CTA, marquee strip fade-in,
focus rings, reduced motion (stops marquee + strips stagger). */
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
body {
margin: 0;
font-family: var(--f-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: var(--p-charcoal);
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--p-gold-dark); color: var(--p-oatmeal);
padding: 10px 14px; z-index: 100;
font-family: var(--f-sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }
.hero.hero--marquee.hero--dark {
position: relative;
overflow: hidden;
isolation: isolate;
}
.hero.hero--marquee.hero--dark::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 50% at 50% 30%,
rgba(201, 164, 108, 0.14) 0%,
rgba(201, 164, 108, 0.0) 70%);
pointer-events: none;
z-index: 0;
}
.hero.hero--marquee.hero--dark .hero__inner {
position: relative;
z-index: 1;
}
.hero__logo,
.hero__pill,
.hero__title,
.hero__supporting,
.hero__actions {
opacity: 0;
transform: translateY(14px);
animation: fmmRise 900ms var(--ease-out-craft) forwards;
will-change: transform, opacity;
}
.hero__logo { animation-delay: 180ms; }
.hero__pill { animation-delay: 300ms; }
.hero__title { animation-delay: 440ms; }
.hero__supporting { animation-delay: 600ms; }
.hero__actions { animation-delay: 760ms; }
@keyframes fmmRise {
from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero__title em { color: var(--p-gold-mid); }
.hero__cta {
position: relative;
padding: 16px 28px;
min-height: 48px;
display: inline-flex;
align-items: center;
transition:
background 220ms var(--ease-out-craft),
transform 180ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft);
box-shadow: 0 6px 24px -12px rgba(201, 164, 108, 0.55);
}
.hero__cta:hover {
transform: translateY(-1px);
box-shadow: 0 10px 28px -10px rgba(201, 164, 108, 0.65);
}
.hero__cta:active { transform: translateY(0) scale(0.98); }
.hero__cta:focus-visible {
outline: 2px solid var(--p-gold-mid);
outline-offset: 3px;
}
/* Marquee strip reveal (one-time) + ongoing scroll */
.hero__marquee-strip {
opacity: 0;
animation: fmmStripFade 1200ms var(--ease-drawer) 900ms forwards;
}
@keyframes fmmStripFade {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.hero__logo,
.hero__pill,
.hero__title,
.hero__supporting,
.hero__actions,
.hero__marquee-strip {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
/* Pause marquee track */
.hero__marquee-track {
animation: none !important;
}
}
```
```html
Skip to content
Application-based · Intentionally small
For the woman ready to lead at a higher level .
Live retreats in Bali. A carefully selected group of high-achieving female entrepreneurs. Radical honesty. Deep support. Ambitious thinking.
```
### hero.classic-ffm-marquee
Wrapper context: ``
```html
Application-based · Intentionally small
For the woman ready to lead at a higher level .
Live retreats in Bali. A carefully selected group of high-achieving female entrepreneurs. Radical honesty. Deep support. Ambitious thinking.
```
### hero.classic-ffm-oatmeal-split-left-polished
Wrapper context: ``
```css
/* Classic FFM oatmeal split (photo left), polished.
Add staggered entrance on content, soft media reveal, tactile
CTA feedback, gold ambient wash, focus rings, reduced motion. */
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
body {
margin: 0;
font-family: var(--f-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: var(--surface-canvas);
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--p-gold-dark); color: var(--p-oatmeal);
padding: 10px 14px; z-index: 100;
font-family: var(--f-sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }
.hero.hero--split-left {
position: relative;
overflow: hidden;
isolation: isolate;
padding: clamp(72px, 10vh, 112px) clamp(24px, 5vw, 64px);
}
/* Ambient gold wash behind content */
.hero.hero--split-left::before {
content: "";
position: absolute;
inset: auto -5% -10% auto;
width: 55%;
height: 65%;
background: radial-gradient(ellipse at 70% 70%,
rgba(201, 164, 108, 0.12) 0%,
rgba(201, 164, 108, 0.0) 60%);
pointer-events: none;
z-index: 0;
}
.hero.hero--split-left .hero__inner {
position: relative;
z-index: 1;
gap: clamp(32px, 6vw, 80px);
align-items: center;
}
/* Staggered entrance for content column */
.hero__logo,
.hero__title,
.hero__supporting,
.hero__actions {
opacity: 0;
transform: translateY(14px);
animation: ffmRise 900ms var(--ease-out-craft) forwards;
will-change: transform, opacity;
}
.hero__logo { animation-delay: 260ms; }
.hero__title { animation-delay: 400ms; }
.hero__supporting { animation-delay: 560ms; }
.hero__actions { animation-delay: 720ms; }
@keyframes ffmRise {
from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero__title {
letter-spacing: -0.015em;
text-wrap: balance;
}
.hero__title em {
font-family: var(--f-serif-italic);
font-style: italic;
color: var(--p-gold-dark);
}
.hero__supporting {
color: var(--p-ink);
max-width: 52ch;
text-wrap: pretty;
}
/* CTA, tactile with gold shadow */
.hero__cta {
position: relative;
padding: 16px 28px;
min-height: 48px;
display: inline-flex;
align-items: center;
transition:
background-color 200ms var(--ease-out-craft),
transform 180ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft);
box-shadow: 0 6px 24px -12px rgba(123, 98, 60, 0.5);
}
.hero__cta:hover {
background: var(--accent-hover);
color: var(--p-charcoal);
transform: translateY(-1px);
box-shadow: 0 10px 28px -10px rgba(201, 164, 108, 0.55);
}
.hero__cta:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 4px 16px -10px rgba(123, 98, 60, 0.45);
}
.hero__cta:focus-visible {
outline: 2px solid var(--p-gold-dark);
outline-offset: 3px;
}
.hero__secondary {
position: relative;
padding: 10px 2px;
min-height: 44px;
display: inline-flex;
align-items: center;
transition:
color 180ms var(--ease-out-craft),
letter-spacing 220ms var(--ease-out-craft);
}
.hero__secondary:hover { letter-spacing: calc(var(--t-wider) + 0.02em); }
.hero__secondary:active { transform: translateY(1px); }
.hero__secondary:focus-visible {
outline: 1px solid var(--p-gold-dark);
outline-offset: 4px;
border-radius: 2px;
}
/* Media reveal */
.hero__media {
position: relative;
border-radius: 2px;
box-shadow:
0 24px 48px -24px rgba(16, 16, 16, 0.35),
0 2px 8px -4px rgba(16, 16, 16, 0.15);
opacity: 0;
transform: translateY(18px) scale(0.98);
animation: ffmMediaReveal 1100ms var(--ease-drawer) 200ms forwards;
transition:
transform 400ms var(--ease-out-craft),
box-shadow 400ms var(--ease-out-craft);
will-change: transform, opacity;
}
@keyframes ffmMediaReveal {
from { opacity: 0; transform: translateY(18px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (hover: hover) and (pointer: fine) {
.hero__media:hover {
transform: translateY(-4px);
box-shadow:
0 32px 56px -20px rgba(16, 16, 16, 0.42),
0 4px 12px -4px rgba(16, 16, 16, 0.2);
}
.hero__media:hover img { transform: scale(1.025); }
}
.hero__media img {
transition: transform 900ms var(--ease-in-out-craft);
will-change: transform;
}
@media (max-width: 820px) {
.hero.hero--split-left {
padding: 72px 20px 56px;
min-height: auto;
}
.hero.hero--split-left .hero__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.hero__title {
font-size: clamp(38px, 9vw, 52px);
}
.hero__media {
order: 1;
aspect-ratio: 4/5;
max-height: 60vh;
}
.hero__content { order: 2; }
}
@media (max-width: 380px) {
.hero__title { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
.hero__logo,
.hero__title,
.hero__supporting,
.hero__actions,
.hero__media {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.hero__media img { transition: none !important; }
}
```
```html
Skip to content
Intentionally small. Quietly expensive . Application-based.
Tracy's most intimate and premium offering. Application-based and intentionally small, for women already in business and ready to lead at a higher level.
```
### hero.classic-ffm-oatmeal-split-left
Wrapper context: ``
```html
Intentionally small. Quietly expensive . Application-based.
Tracy's most intimate and premium offering. Application-based and intentionally small, for women already in business and ready to lead at a higher level.
```
### hero.classic-ffm-silk
Wrapper context: ``
```html
Bali · 2026
Lead at a higher level
intimate
·
premium
·
by invitation
```
### hero.classic-fresh-split-right
Wrapper context: ``
```html
Most business programs start with strategy. FRESH starts with you .
Tracy's personal operating system, covering Fitness and Nutrition, Relationships, Environment, Self, and Hustle. The foundation that makes sustainable growth possible.
```
### hero.classic-tracy-textonly-polished
Wrapper context: ``
```css
/* Classic Tracy text-only, polished.
Add entrance stagger, tactile CTA, focus rings, ambient wash,
reduced motion. Keep layout untouched. */
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
body {
margin: 0;
font-family: var(--f-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: var(--surface-canvas);
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--p-aztek); color: var(--p-oatmeal);
padding: 10px 14px; z-index: 100;
font-family: var(--f-sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }
.hero.hero--text-only {
position: relative;
overflow: hidden;
isolation: isolate;
padding: clamp(80px, 12vh, 140px) clamp(24px, 5vw, 80px);
}
/* Ambient wash, soft sage-tinted radial behind content */
.hero.hero--text-only::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 48% at 50% 38%,
rgba(110, 142, 119, 0.1) 0%,
rgba(110, 142, 119, 0.0) 70%);
pointer-events: none;
z-index: 0;
}
.hero.hero--text-only .hero__inner {
position: relative;
z-index: 1;
}
/* Staggered entrance */
.hero__logo,
.hero__title,
.hero__supporting,
.hero__actions {
opacity: 0;
transform: translateY(14px);
animation: tzRise 900ms var(--ease-out-craft) forwards;
will-change: transform, opacity;
}
.hero__logo { animation-delay: 180ms; }
.hero__title { animation-delay: 340ms; }
.hero__supporting { animation-delay: 500ms; }
.hero__actions { animation-delay: 660ms; }
@keyframes tzRise {
from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero__title { text-wrap: balance; letter-spacing: -0.015em; }
.hero__supporting { text-wrap: pretty; }
/* CTA, tactile */
.hero__cta {
position: relative;
padding: 16px 28px;
min-height: 48px;
display: inline-flex;
align-items: center;
transition:
background-color 200ms var(--ease-out-craft),
transform 180ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft);
box-shadow: 0 6px 24px -12px rgba(30, 55, 53, 0.45);
}
.hero__cta:hover {
background: var(--accent-hover);
transform: translateY(-1px);
box-shadow: 0 10px 28px -10px rgba(30, 55, 53, 0.55);
}
.hero__cta:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 4px 16px -10px rgba(30, 55, 53, 0.45);
}
.hero__cta:focus-visible {
outline: 2px solid var(--p-aztek);
outline-offset: 3px;
}
.hero__secondary {
position: relative;
padding: 10px 2px;
min-height: 44px;
display: inline-flex;
align-items: center;
transition:
color 180ms var(--ease-out-craft),
letter-spacing 220ms var(--ease-out-craft);
}
.hero__secondary:hover { letter-spacing: calc(var(--t-wider) + 0.02em); }
.hero__secondary:active { transform: translateY(1px); }
.hero__secondary:focus-visible {
outline: 1px solid var(--p-aztek);
outline-offset: 4px;
border-radius: 2px;
}
@media (max-width: 820px) {
.hero.hero--text-only { padding: 72px 20px; }
/* Karl: buttons centered to screen on mobile. Override base .hero--text-only
rule that flips to flex-start at this breakpoint. */
.hero.hero--text-only .hero__actions {
justify-content: center;
width: 100%;
}
}
@media (max-width: 520px) {
/* Stack the primary CTA + secondary link, both centered, with the
primary going full width up to a readable cap. */
.hero.hero--text-only .hero__actions {
flex-direction: column;
align-items: center;
gap: var(--sp-4);
}
.hero.hero--text-only .hero__cta {
width: 100%;
max-width: 320px;
justify-content: center;
text-align: center;
box-sizing: border-box;
}
}
@media (prefers-reduced-motion: reduce) {
.hero__logo,
.hero__title,
.hero__supporting,
.hero__actions {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
```
```html
Skip to content
Peace, Profit and Presence .
A suite of programs for women building freedom-filled businesses. Start where you are, choose the path that fits, and build something that lets you live.
```
### hero.classic-tracy-textonly
Wrapper context: ``
```html
Peace, Profit and Presence .
A suite of programs for women building freedom-filled businesses. Start where you are, choose the path that fits, and build something that lets you live.
```
### hero.editorial-wordmark-polished
Wrapper context: ``
```css
/* ----------------------------------------------------------------
Editorial wordmark, wordmark-over-portrait hero.
Polished: custom easing curves, staggered entrance, tactile
micro-interactions, grain overlay, tinted shadows, reduced
motion honoured. Brand-true: Editors Note + Jhon Halend + Poppins,
aztek/oatmeal/charcoal palette.
---------------------------------------------------------------- */
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-charcoal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Skip link for keyboard users */
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--p-oatmeal); color: var(--p-charcoal);
padding: 10px 14px; z-index: 100;
font-family: var(--f-sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }
/* T brandmark */
.t-mark { width: auto; fill: currentColor; display: block; }
.t-mark--bar { height: 28px; }
/* -------- TOP NAV -------- */
.ahero__nav {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 4;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 22px 40px;
color: var(--p-oatmeal);
gap: 20px;
opacity: 0;
transform: translateY(-8px);
animation: aheroFadeDown 900ms var(--ease-out-craft) 200ms forwards;
}
.ahero__nav-group { display: flex; gap: 36px; align-items: center; }
.ahero__nav-group--right { justify-content: flex-end; }
.ahero__nav-link {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
position: relative;
padding: 10px 2px; /* bigger touch target, optical centering */
transition: color 180ms var(--ease-out-craft);
}
.ahero__nav-link::after {
content: "";
position: absolute;
left: 2px; right: 2px; bottom: 6px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 320ms var(--ease-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.ahero__nav-link:hover::after { transform: scaleX(1); }
}
.ahero__nav-link:focus-visible {
outline: 1px solid var(--p-oatmeal);
outline-offset: 4px;
border-radius: 2px;
}
.ahero__nav-link:active { transform: translateY(1px); }
.ahero__nav-wordmark {
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
text-decoration: none;
padding: 8px;
transition: transform 240ms var(--ease-out-craft), opacity 240ms var(--ease-out-craft);
}
.ahero__nav-wordmark:hover { transform: scale(1.04); }
.ahero__nav-wordmark:active { transform: scale(0.97); }
.ahero__nav-wordmark:focus-visible {
outline: 1px solid var(--p-oatmeal);
outline-offset: 6px;
border-radius: 2px;
}
.ahero__menu {
background: none; border: 0; cursor: pointer;
padding: 10px; color: inherit;
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--f-sans);
font-size: 11px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
-webkit-tap-highlight-color: transparent;
margin-left: 8px;
transition: transform 160ms var(--ease-out-craft), opacity 160ms var(--ease-out-craft);
min-height: 44px; min-width: 44px;
}
.ahero__menu:active { transform: scale(0.97); }
.ahero__menu:focus-visible {
outline: 1px solid var(--p-oatmeal);
outline-offset: 4px;
border-radius: 2px;
}
.ahero__menu-icon { display: inline-block; width: 24px; height: 10px; position: relative; }
.ahero__menu-icon::before,
.ahero__menu-icon::after {
content: ""; position: absolute; left: 0; right: 0;
height: 1.5px; background: currentColor;
transition: transform 280ms var(--ease-out-craft);
}
.ahero__menu-icon::before { top: 0; }
.ahero__menu-icon::after { bottom: 0; }
.ahero__menu:hover .ahero__menu-icon::before { transform: translateX(-2px); }
.ahero__menu:hover .ahero__menu-icon::after { transform: translateX(2px); }
/* -------- THE HERO -------- */
.ahero {
position: relative;
min-height: 100dvh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 80px clamp(16px, 4vw, 48px);
background: var(--p-charcoal);
isolation: isolate;
}
/* Background photo with slow Ken Burns */
.ahero__image {
position: absolute;
inset: 0;
background-image: url("https://cdn.jsdelivr.net/gh/purepurposekh/tracy-harris-brand-kit@main/assets/photos/tracy-outfit8-39.jpg");
background-size: cover;
background-position: center 30%;
filter: saturate(0.95) contrast(1.02);
z-index: 1;
transform: scale(1.06);
/* Reveal only. Continuous Ken Burns drift was visually distracting
when scrolling; the subtle scroll-zoom on iOS made it look
broken. Photo settles at its reveal-end state and stays put. */
animation: aheroReveal 1400ms var(--ease-drawer) 100ms both;
will-change: transform, opacity;
}
@keyframes aheroReveal {
from { opacity: 0; transform: scale(1.12); }
to { opacity: 1; transform: scale(1.06); }
}
@keyframes aheroKenBurns {
from { transform: scale(1.06) translate3d(0, 0, 0); }
to { transform: scale(1.11) translate3d(-1.2%, -0.8%, 0); }
}
/* Edge vignette */
.ahero__image::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg,
rgba(16,16,16,0.48) 0%,
rgba(16,16,16,0.06) 14%,
rgba(16,16,16,0.0) 40%,
rgba(16,16,16,0.0) 70%,
rgba(16,16,16,0.44) 100%);
}
/* Central scrim behind type */
.ahero__scrim {
position: absolute;
inset: 0; z-index: 1;
pointer-events: none;
background: radial-gradient(ellipse 62% 48% at 50% 52%,
rgba(16,16,16,0.58) 0%,
rgba(16,16,16,0.36) 38%,
rgba(16,16,16,0.12) 62%,
rgba(16,16,16,0.0) 82%);
}
/* Subtle grain, fixed overlay, pointer-events:none */
.ahero__grain {
position: absolute;
inset: 0; z-index: 2;
pointer-events: none;
opacity: 0.35;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,Skip to content
Peace, Profit, Presence.
Tracy Harris
Mentorship, mastermind and community for women building Freedom Filled® businesses. Grounded in story, strategy and spaciousness.
Navigate
Build a beautiful business that lets you live.
Peaceful. Profitable. Present.
```
### hero.editorial-wordmark
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-cream);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
/* Official T brandmark */
.t-mark { width: auto; fill: currentColor; display: block; }
.t-mark--bar { height: 28px; }
/* -------- TOP NAV (inside hero, white over photo) -------- */
.ahero__nav {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 3;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 22px 40px;
color: var(--p-oatmeal);
gap: 20px;
}
.ahero__nav-group {
display: flex;
gap: 36px;
align-items: center;
}
.ahero__nav-group--right { justify-content: flex-end; }
.ahero__nav-link {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
position: relative;
padding: 6px 0;
}
.ahero__nav-link::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 2px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform .3s ease;
}
.ahero__nav-link:hover::after { transform: scaleX(1); }
/* Center brandmark in the bar */
.ahero__nav-wordmark {
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
text-decoration: none;
}
.ahero__menu {
background: none;
border: 0;
cursor: pointer;
padding: 10px;
color: inherit;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
-webkit-tap-highlight-color: transparent;
margin-left: 8px;
}
.ahero__menu-icon { display: inline-block; width: 24px; height: 10px; position: relative; }
.ahero__menu-icon::before,
.ahero__menu-icon::after {
content: ""; position: absolute; left: 0; right: 0;
height: 1.5px; background: currentColor;
}
.ahero__menu-icon::before { top: 0; }
.ahero__menu-icon::after { bottom: 0; }
/* -------- THE HERO -------- */
.ahero {
position: relative;
min-height: 100vh;
min-height: 100svh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 80px clamp(16px, 4vw, 48px) 80px;
background: var(--p-charcoal);
}
.ahero__image {
position: absolute;
inset: 0;
background-image: url("../../../assets/photos/tracy-outfit8-39.jpg");
background-size: cover;
background-position: center 30%;
filter: saturate(0.95) contrast(1.02);
z-index: 1;
transform: scale(1.04);
animation: aheroKenBurns 22s ease-in-out infinite alternate;
}
@keyframes aheroKenBurns {
from { transform: scale(1.04) translate(0, 0); }
to { transform: scale(1.09) translate(-1.2%, -0.8%); }
}
/* Edge vignette so top-nav + bottom-cue stay legible on bright photo */
.ahero__image::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg,
rgba(16,16,16,0.45) 0%,
rgba(16,16,16,0.05) 14%,
rgba(16,16,16,0.0) 40%,
rgba(16,16,16,0.0) 70%,
rgba(16,16,16,0.40) 100%);
}
/* Soft center scrim directly behind the text block, large radial wash */
.ahero__scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(ellipse 62% 48% at 50% 52%,
rgba(16,16,16,0.55) 0%,
rgba(16,16,16,0.35) 38%,
rgba(16,16,16,0.12) 62%,
rgba(16,16,16,0.0) 82%);
}
/* Content block (centered in hero) */
.ahero__content {
position: relative;
z-index: 2;
text-align: center;
max-width: 1100px;
width: 100%;
color: var(--p-oatmeal);
}
.ahero__eyebrow {
font-family: 'Jhon Halend', 'Caveat', cursive;
font-weight: 400;
font-size: clamp(26px, 3vw, 40px);
line-height: 1;
margin: 0 0 10px;
color: var(--p-oatmeal);
letter-spacing: 0.01em;
}
.ahero__wordmark {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(44px, 7.2vw, 108px);
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--p-oatmeal);
margin: 0;
}
.ahero__sub {
font-family: var(--f-sans);
font-size: clamp(13px, 1.05vw, 15px);
line-height: 1.6;
font-weight: 400;
color: var(--p-oatmeal);
margin: 18px auto 0;
max-width: 44ch;
opacity: 0.92;
}
.ahero__sub em {
font-family: var(--f-serif-italic);
font-style: italic;
font-weight: 400;
}
/* Bottom "NAVIGATE" cue */
.ahero__navigate {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
color: var(--p-oatmeal);
font-family: var(--f-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
background: none;
border: 0;
cursor: pointer;
padding: 8px 10px;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 10px;
opacity: 0.92;
}
.ahero__navigate::after {
content: "";
display: block;
width: 1px;
height: 26px;
background: currentColor;
opacity: 0.6;
}
.ahero__navigate:hover { opacity: 1; }
/* -------- EXHALE BELOW -------- */
.aexhale {
padding: clamp(80px, 12vh, 140px) clamp(20px, 6vw, 80px);
background: var(--p-cream);
color: var(--p-charcoal);
text-align: center;
}
.aexhale p {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.45;
max-width: 720px;
margin: 0 auto;
}
.aexhale em { font-family: var(--f-serif-italic); font-style: italic; }
/* -------- MOBILE -------- */
@media (max-width: 820px) {
.ahero__nav {
padding: 14px 18px;
grid-template-columns: auto 1fr auto;
gap: 12px;
}
.ahero__nav-group:not(.ahero__nav-group--right) { display: none; }
.ahero__nav-group--right .ahero__nav-link { display: none; }
.ahero__nav-wordmark .t-mark--bar { height: 22px; }
.ahero__menu { margin-left: 0; padding: 8px; }
.ahero__menu span:first-child { display: none; }
.ahero__menu-icon { width: 26px; height: 12px; }
.ahero {
padding: 90px 20px 90px;
}
.ahero__eyebrow {
font-size: 26px;
}
.ahero__wordmark {
font-size: clamp(34px, 10vw, 64px);
letter-spacing: 0.04em;
}
.ahero__sub {
font-size: 13px;
max-width: 34ch;
}
.ahero__navigate { bottom: 18px; font-size: 9px; }
.ahero__navigate::after { height: 20px; }
}
@media (max-width: 380px) {
.ahero__wordmark { font-size: 32px; }
}
```
```html
Peace, Profit, Presence.
Tracy Harris
Mentorship, mastermind and community for women building Freedom Filled® businesses, grounded in story, strategy and spaciousness.
Navigate
Build a beautiful business that lets you live.
Peaceful. Profitable. Present.
```
### hero.optin-confirmation
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-oatmeal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
.page {
background: var(--p-oatmeal);
padding: clamp(14px, 1.6vw, 24px);
min-height: 100vh;
}
/* -------- HERO SHELL (single-column, centered) -------- */
.hero {
position: relative;
background: var(--p-oatmeal);
border: 1px solid var(--border-hairline);
border-radius: 12px;
overflow: hidden;
padding-block: clamp(72px, 9vw, 120px);
padding-inline: clamp(24px, 5vw, 64px);
max-width: 920px;
margin: 0 auto;
text-align: center;
min-height: 620px;
display: flex;
align-items: center;
justify-content: center;
}
.hero__content { max-width: 720px; margin: 0 auto; }
.hero__eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-sage);
margin: 0 0 18px;
}
.hero__eyebrow::before {
content: "";
display: inline-block;
width: 24px; height: 1px;
background: var(--p-sage);
vertical-align: middle;
margin-right: 12px;
}
.hero__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(44px, 6vw, 84px);
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--p-charcoal);
margin: 0 0 20px;
}
.hero__title em { font-family: var(--f-serif-italic); font-style: italic; }
.hero__script {
font-family: var(--f-script);
font-weight: 400;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1;
color: var(--p-sage);
margin: 0 0 28px;
}
.hero__body {
font-family: var(--f-sans);
font-size: 16px;
line-height: 1.65;
color: var(--p-ink);
margin: 0 auto 32px;
max-width: 48ch;
}
.hero__body strong { font-weight: 600; color: var(--p-charcoal); }
.hero__ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: center;
}
.hero__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
border: 1px solid transparent;
}
.hero__cta--primary {
background: var(--p-cream);
color: var(--p-charcoal);
border-color: var(--p-charcoal);
}
.hero__cta--primary:hover {
background: var(--p-aztek);
color: var(--p-oatmeal);
border-color: var(--p-aztek);
transform: translateY(-1px);
}
.hero__cta--ghost {
background: transparent;
color: var(--p-ink);
border-color: transparent;
padding: 14px 16px;
letter-spacing: 0.12em;
border-bottom: 1px solid var(--p-ink);
border-radius: 0;
}
.hero__cta--ghost:hover { color: var(--p-aztek); border-bottom-color: var(--p-aztek); }
/* -------- CONFIRMATION CHECKLIST (inbox box) -------- */
.inbox {
margin: 32px auto 0;
background: var(--p-cream);
border-radius: 10px;
padding: 20px 22px;
font-size: 14px;
line-height: 1.6;
color: var(--p-ink);
max-width: 48ch;
text-align: left;
}
.inbox__label {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-aztek);
margin: 0 0 10px;
}
.inbox__rows { display: grid; gap: 8px; }
.inbox__row {
display: grid;
grid-template-columns: 20px 1fr;
gap: 10px;
align-items: start;
}
.inbox__tick {
width: 16px; height: 16px;
border-radius: 50%;
background: var(--p-sage);
color: var(--p-oatmeal);
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 3px;
flex-shrink: 0;
}
.inbox__tick svg { width: 9px; height: 9px; }
.inbox__row strong { color: var(--p-charcoal); font-weight: 600; }
.inbox__row code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
padding: 1px 6px;
background: var(--p-oatmeal);
border-radius: 3px;
}
/* -------- MOBILE -------- */
@media (max-width: 820px) {
.hero {
padding-block: clamp(48px, 8vw, 72px);
padding-inline: clamp(20px, 5vw, 28px);
min-height: 0;
}
.hero__title { font-size: clamp(34px, 10vw, 54px); }
.hero__script { font-size: 28px; }
}
@media (max-width: 430px) {
.page { padding: 10px; }
.hero { padding: 32px 20px; }
.hero__title { font-size: 34px; }
.hero__ctas { flex-direction: column; align-items: stretch; }
.hero__cta { justify-content: center; }
.hero__cta--ghost { border-bottom: 0; padding: 12px; }
}
```
```html
You're on the list
You're in .
Check your inbox, lovely.
Your free guide is on its way right now. If it's not there in the next few minutes, have a quick peek in Promotions or Spam. Nothing is broken, Gmail is just being Gmail.
While the email lands
Add hello@tracyharris.co to your contacts so every future email lands in the main inbox.
Look for the subject line "Your guide is here, lovely" .
Save this page. The link inside takes you back if you need it.
```
### hero.oto-polished
Wrapper context: ``
```css
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-cream);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--p-aztek); color: var(--p-oatmeal);
padding: 10px 14px; z-index: 100;
font-family: var(--f-sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }
.oto {
min-height: 100vh;
min-height: 100svh;
background: var(--p-cream);
position: relative;
display: grid;
place-items: center;
padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 48px);
overflow: hidden;
isolation: isolate;
}
.oto::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 30% 20%, rgba(110,142,119,0.12) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 75% 85%, rgba(201,164,108,0.1) 0%, transparent 60%);
pointer-events: none;
}
.oto__inner {
position: relative;
z-index: 1;
max-width: 740px;
width: 100%;
text-align: center;
}
.oto__eyebrow,
.oto__offer,
.oto__title,
.oto__script,
.oto__body,
.deadline,
.oto__ctawrap,
.oto__legal {
opacity: 0;
transform: translateY(12px);
animation: otoRise 900ms var(--ease-out-craft) forwards;
will-change: transform, opacity;
}
.oto__eyebrow { animation-delay: 160ms; }
.oto__offer { animation-delay: 280ms; }
.oto__title { animation-delay: 420ms; }
.oto__script { animation-delay: 560ms; }
.oto__body { animation-delay: 680ms; }
.deadline { animation-delay: 820ms; }
.oto__ctawrap { animation-delay: 940ms; }
.oto__legal { animation-delay: 1080ms; }
@keyframes otoRise {
from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.oto__eyebrow {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--p-aztek);
margin: 0 0 20px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.oto__eyebrow::before,
.oto__eyebrow::after {
content: "";
width: 28px; height: 1px;
background: var(--p-aztek);
opacity: 0.4;
}
.oto__offer {
font-family: var(--f-serif-display);
font-size: clamp(22px, 2.6vw, 32px);
font-weight: 400;
letter-spacing: 0.02em;
color: var(--p-aztek);
margin: 0 0 12px;
}
.oto__offer em { font-family: var(--f-serif-italic); font-style: italic; }
.oto__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(44px, 6.5vw, 88px);
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--p-charcoal);
margin: 0 0 24px;
max-width: 16ch;
margin-inline: auto;
text-wrap: balance;
}
.oto__title em { font-family: var(--f-serif-italic); font-style: italic; }
.oto__script {
font-family: var(--f-script);
font-weight: 400;
font-size: clamp(28px, 3vw, 38px);
line-height: 1;
color: var(--p-sage);
margin: 0 0 28px;
}
.oto__body {
font-family: var(--f-sans);
font-size: 17px;
line-height: 1.65;
color: var(--p-ink);
margin: 0 auto 40px;
max-width: 54ch;
text-wrap: pretty;
}
.oto__body strong { color: var(--p-charcoal); font-weight: 600; }
.deadline {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 22px;
margin: 0 0 32px;
background: var(--p-oatmeal);
border: 1px solid rgba(30,55,53,0.18);
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--p-charcoal);
}
.deadline__icon {
width: 16px; height: 16px;
color: var(--p-aztek);
flex-shrink: 0;
}
.deadline strong { font-weight: 700; color: var(--p-aztek); }
.oto__cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 20px 44px;
min-height: 48px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
background: var(--p-oatmeal);
color: var(--p-charcoal);
border: 1.5px solid var(--p-charcoal);
transition:
background 220ms var(--ease-out-craft),
color 200ms var(--ease-out-craft),
border-color 220ms var(--ease-out-craft),
transform 180ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft);
box-shadow: 0 12px 28px -14px rgba(16,16,16,0.2);
}
.oto__cta:hover {
background: var(--p-aztek);
color: var(--p-oatmeal);
border-color: var(--p-aztek);
transform: translateY(-2px);
box-shadow: 0 18px 40px -14px rgba(30,55,53,0.35);
}
.oto__cta:active {
transform: translateY(0) scale(0.98);
}
.oto__cta:focus-visible {
outline: 2px solid var(--p-aztek);
outline-offset: 4px;
}
.oto__cta svg {
width: 14px; height: 14px;
transition: transform 280ms var(--ease-out-craft);
}
.oto__cta:hover svg { transform: translateX(4px); }
.oto__legal {
margin: 28px auto 0;
font-family: var(--f-sans);
font-size: 12px;
line-height: 1.55;
color: var(--p-mute);
max-width: 44ch;
}
.oto__legal em { font-style: italic; color: var(--p-ink); }
@media (max-width: 820px) {
.oto__title { font-size: clamp(36px, 10vw, 56px); }
.oto__body { font-size: 16px; }
}
@media (max-width: 430px) {
.oto { padding: 40px 20px; }
.oto__cta { padding: 16px 28px; width: 100%; justify-content: center; }
.deadline { font-size: 12px; padding: 10px 16px; gap: 8px; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 380px) {
.oto__title { font-size: 32px; }
.oto__script { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.oto__eyebrow,
.oto__offer,
.oto__title,
.oto__script,
.oto__body,
.deadline,
.oto__ctawrap,
.oto__legal {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.oto__cta:hover svg { transform: none; }
}
```
```html
Skip to offer
One-time offer
The Million Dollar Message™ Intensive
Write the message your whole business hangs on.
One afternoon. Clean and clear.
You've got the guide. Now let's go deeper. A 90-minute recorded intensive where I walk you through the exact messaging framework I use with my FFB mentees, so you can write the one sentence that turns scrollers into buyers. This is the only place this is offered.
Available until Friday 11:59pm AEST then this page comes down.
You'll only see this page once. If you close it without claiming, this offer won't appear again. Single payment. Instant access. No subscription.
```
### hero.oto
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-cream);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
/* NO nav, this is a decision moment */
.oto {
min-height: 100vh;
background: var(--p-cream);
position: relative;
display: grid;
place-items: center;
padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 48px);
overflow: hidden;
}
/* soft editorial vignette */
.oto::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 30% 20%, rgba(110,142,119,0.12) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 75% 85%, rgba(201,164,108,0.1) 0%, transparent 60%);
pointer-events: none;
}
.oto__inner {
position: relative;
z-index: 1;
max-width: 740px;
width: 100%;
text-align: center;
}
.oto__eyebrow {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--p-aztek);
margin: 0 0 20px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.oto__eyebrow::before,
.oto__eyebrow::after {
content: "";
width: 28px; height: 1px;
background: var(--p-aztek);
opacity: 0.4;
}
.oto__offer {
font-family: var(--f-serif-display);
font-size: clamp(22px, 2.6vw, 32px);
font-weight: 400;
letter-spacing: 0.02em;
color: var(--p-aztek);
margin: 0 0 12px;
}
.oto__offer em { font-family: var(--f-serif-italic); font-style: italic; }
.oto__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(44px, 6.5vw, 88px);
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--p-charcoal);
margin: 0 0 24px;
max-width: 16ch;
margin-inline: auto;
}
.oto__title em { font-family: var(--f-serif-italic); font-style: italic; }
.oto__script {
font-family: var(--f-script);
font-weight: 400;
font-size: clamp(28px, 3vw, 38px);
line-height: 1;
color: var(--p-sage);
margin: 0 0 28px;
}
.oto__body {
font-family: var(--f-sans);
font-size: 17px;
line-height: 1.65;
color: var(--p-ink);
margin: 0 auto 40px;
max-width: 54ch;
}
.oto__body strong { color: var(--p-charcoal); font-weight: 600; }
/* -------- REAL DEADLINE INDICATOR (no fake scarcity) -------- */
.deadline {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 22px;
margin: 0 0 32px;
background: var(--p-oatmeal);
border: 1px solid rgba(30,55,53,0.18);
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--p-charcoal);
}
.deadline__icon {
width: 16px; height: 16px;
color: var(--p-aztek);
flex-shrink: 0;
}
.deadline strong { font-weight: 700; color: var(--p-aztek); }
/* -------- PRIMARY CTA -------- */
.oto__cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 20px 44px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
background: var(--p-oatmeal);
color: var(--p-charcoal);
border: 1.5px solid var(--p-charcoal);
transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
box-shadow: 0 12px 28px rgba(16,16,16,0.12);
}
.oto__cta:hover {
background: var(--p-aztek);
color: var(--p-oatmeal);
border-color: var(--p-aztek);
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(30,55,53,0.2);
}
.oto__cta svg { width: 14px; height: 14px; }
/* -------- LEGAL / ONE-TIME NOTE -------- */
.oto__legal {
margin: 28px auto 0;
font-family: var(--f-sans);
font-size: 12px;
line-height: 1.55;
color: var(--p-mute);
max-width: 44ch;
}
.oto__legal em { font-style: italic; color: var(--p-ink); }
/* -------- MOBILE -------- */
@media (max-width: 820px) {
.oto__title { font-size: clamp(36px, 10vw, 56px); }
.oto__body { font-size: 16px; }
}
@media (max-width: 430px) {
.oto { padding: 40px 20px; }
.oto__cta { padding: 16px 28px; width: 100%; justify-content: center; }
.deadline { font-size: 12px; padding: 10px 16px; gap: 8px; flex-wrap: wrap; justify-content: center; }
}
```
```html
One-time offer
The Million Dollar Message™ Intensive
Write the message your whole business hangs on.
One afternoon. Clean and clear.
You've got the guide. Now let's go deeper. A 90-minute recorded intensive where I walk you through the exact messaging framework I use with my FFB mentees, so you can write the one sentence that turns scrollers into buyers. This is the only place this is offered.
Available until Friday 11:59pm AEST then this page comes down.
You'll only see this page once. If you close it without claiming, this offer won't appear again. Single payment. Instant access. No subscription.
```
### hero.overlay-portrait-polished
Wrapper context: ``
```css
/* Overlay portrait, full-bleed portrait, single giant wordmark.
Polished: slow parallax drift on photo, split-letter stagger on
wordmark, tagline reveal, tactile nav interactions, grain,
reduced-motion honoured. Brand-true tokens + fonts. */
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-charcoal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--p-oatmeal); color: var(--p-charcoal);
padding: 10px 14px; z-index: 100;
font-family: var(--f-sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }
.t-mark { width: auto; fill: currentColor; display: block; }
.t-mark--bar { height: 28px; }
/* -------- NAV -------- */
.mhero__nav {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 4;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 22px 40px;
color: var(--p-oatmeal);
opacity: 0;
transform: translateY(-8px);
animation: mheroFadeDown 900ms var(--ease-out-craft) 200ms forwards;
}
@keyframes mheroFadeDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.mhero__nav-group { display: flex; gap: 34px; align-items: center; }
.mhero__nav-group--right { justify-content: flex-end; }
.mhero__nav-link {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
position: relative;
padding: 10px 2px;
min-height: 44px;
display: inline-flex;
align-items: center;
transition: color 180ms var(--ease-out-craft);
}
.mhero__nav-link::after {
content: "";
position: absolute;
left: 2px; right: 2px; bottom: 8px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 320ms var(--ease-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.mhero__nav-link:hover::after { transform: scaleX(1); }
}
.mhero__nav-link:focus-visible {
outline: 1px solid var(--p-oatmeal);
outline-offset: 4px;
border-radius: 2px;
}
.mhero__nav-link:active { transform: translateY(1px); }
.mhero__nav-mark {
color: inherit; text-decoration: none; display: inline-flex;
padding: 8px;
transition: transform 240ms var(--ease-out-craft);
}
.mhero__nav-mark:hover { transform: scale(1.04); }
.mhero__nav-mark:active { transform: scale(0.97); }
.mhero__nav-mark:focus-visible {
outline: 1px solid var(--p-oatmeal);
outline-offset: 6px;
border-radius: 2px;
}
.mhero__menu {
background: none; border: 0; cursor: pointer;
padding: 10px; color: inherit;
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--f-sans);
font-size: 11px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
-webkit-tap-highlight-color: transparent;
min-height: 44px; min-width: 44px;
transition: transform 160ms var(--ease-out-craft);
}
.mhero__menu:active { transform: scale(0.97); }
.mhero__menu:focus-visible {
outline: 1px solid var(--p-oatmeal);
outline-offset: 4px;
border-radius: 2px;
}
.mhero__menu-icon {
display: inline-block;
width: 24px; height: 10px;
position: relative;
}
.mhero__menu-icon::before,
.mhero__menu-icon::after {
content: "";
position: absolute; left: 0; right: 0;
height: 1.5px; background: currentColor;
transition: transform 280ms var(--ease-out-craft);
}
.mhero__menu-icon::before { top: 0; }
.mhero__menu-icon::after { bottom: 0; }
.mhero__menu:hover .mhero__menu-icon::before { transform: translateX(-2px); }
.mhero__menu:hover .mhero__menu-icon::after { transform: translateX(2px); }
/* -------- HERO -------- */
.mhero {
position: relative;
min-height: 100dvh;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0 clamp(16px, 3vw, 48px);
background: var(--p-charcoal);
isolation: isolate;
}
.mhero__image {
position: absolute;
inset: 0;
background-image: url("https://static.showit.co/1200/C8lYkDDfclRnqya_MiRFow/173187/062a3960.jpg");
background-size: cover;
background-position: center 22%;
filter: saturate(0.92) contrast(1.02);
z-index: 1;
transform: scale(1.06);
/* Reveal only. Continuous drift was visually distracting on scroll. */
animation: mheroReveal 1500ms var(--ease-drawer) 100ms both;
will-change: transform, opacity;
}
@keyframes mheroReveal {
from { opacity: 0; transform: scale(1.14); }
to { opacity: 1; transform: scale(1.06); }
}
@keyframes mheroDrift {
from { transform: scale(1.06) translate3d(0, 0, 0); }
to { transform: scale(1.10) translate3d(0.6%, -1%, 0); }
}
.mhero__image::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg,
rgba(16,16,16,0.38) 0%,
rgba(16,16,16,0.0) 28%,
rgba(16,16,16,0.0) 55%,
rgba(16,16,16,0.62) 100%);
}
/* Grain overlay */
.mhero__grain {
position: absolute;
inset: 0; z-index: 2;
pointer-events: none;
opacity: 0.32;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,Skip to content
T r a c y
Freedom Filled® Business
for Women Building by Design
Scroll
Build a beautiful business that lets you live.
Peaceful. Profitable. Present.
```
### hero.overlay-portrait
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-cream);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
/* ---- Official T brandmark ---- */
.t-mark { width: auto; fill: currentColor; display: block; }
.t-mark--bar { height: 28px; }
/* -------- THIN TOP BAR (sits inside the hero) -------- */
.mhero__nav {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 3;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 22px 40px;
color: var(--p-oatmeal);
}
.mhero__nav-group {
display: flex;
gap: 34px;
align-items: center;
}
.mhero__nav-group--right { justify-content: flex-end; }
.mhero__nav-link {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
position: relative;
padding: 6px 0;
}
.mhero__nav-link::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 2px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform .3s ease;
}
.mhero__nav-link:hover::after { transform: scaleX(1); }
.mhero__nav-mark {
color: inherit;
text-decoration: none;
display: inline-flex;
}
.mhero__menu {
background: none;
border: 0;
cursor: pointer;
padding: 10px;
color: inherit;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
-webkit-tap-highlight-color: transparent;
}
.mhero__menu-icon {
display: inline-block;
width: 24px; height: 10px;
position: relative;
}
.mhero__menu-icon::before,
.mhero__menu-icon::after {
content: "";
position: absolute; left: 0; right: 0;
height: 1.5px; background: currentColor;
}
.mhero__menu-icon::before { top: 0; }
.mhero__menu-icon::after { bottom: 0; }
/* -------- THE HERO -------- */
.mhero {
position: relative;
min-height: 100vh;
min-height: 100svh; /* mobile-safe viewport */
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0 clamp(16px, 3vw, 48px) 0;
background: var(--p-charcoal);
}
.mhero__image {
position: absolute;
inset: 0;
background-image: url("https://static.showit.co/1200/C8lYkDDfclRnqya_MiRFow/173187/062a3960.jpg");
background-size: cover;
background-position: center 22%;
filter: saturate(0.92) contrast(1.02);
z-index: 1;
}
.mhero__image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(16,16,16,0.35) 0%,
rgba(16,16,16,0.0) 28%,
rgba(16,16,16,0.0) 55%,
rgba(16,16,16,0.55) 100%);
}
.mhero__content {
position: relative;
z-index: 2;
text-align: center;
padding-bottom: clamp(12vh, 16vh, 20vh);
width: 100%;
max-width: 1600px;
}
.mhero__word {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(96px, 22vw, 340px);
line-height: 0.88;
color: var(--p-oatmeal);
margin: 0;
letter-spacing: -0.02em;
transform: translateY(4%);
}
.mhero__tagline {
font-family: var(--f-sans);
font-size: clamp(11px, 0.95vw, 13px);
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--p-oatmeal);
margin: 20px 0 0;
opacity: 0.92;
}
.mhero__tagline span { display: inline-block; }
.mhero__tagline span + span::before {
content: "·";
margin: 0 12px;
opacity: 0.6;
}
.mhero__scroll {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
z-index: 3;
color: var(--p-oatmeal);
font-family: var(--f-sans);
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
opacity: 0.8;
}
/* -------- EXHALE SECTION BELOW -------- */
.mexhale {
padding: clamp(80px, 12vh, 140px) clamp(20px, 6vw, 80px);
background: var(--p-cream);
color: var(--p-charcoal);
text-align: center;
}
.mexhale p {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.45;
letter-spacing: -0.005em;
max-width: 720px;
margin: 0 auto;
}
.mexhale em {
font-family: var(--f-serif-italic);
font-style: italic;
}
/* -------- MOBILE -------- */
@media (max-width: 820px) {
.mhero__nav {
padding: 14px 18px;
grid-template-columns: auto 1fr auto;
}
.mhero__nav-group:not(.mhero__nav-group--right) { display: none; }
.mhero__nav-group--right .mhero__nav-link { display: none; }
.mhero__menu { padding: 8px; }
.mhero__menu span:first-child { display: none; }
.mhero__menu-icon { width: 26px; height: 12px; }
/* Move "Tracy" up, between bottom and center on mobile too */
.mhero {
align-items: flex-end;
}
.mhero__content {
padding-bottom: 22vh;
padding-top: 0;
}
.mhero__word {
transform: translateY(0);
font-size: clamp(76px, 26vw, 170px);
}
.mhero__tagline {
font-size: 10px;
letter-spacing: 0.28em;
padding: 0 8px;
margin-top: 16px;
}
.mhero__tagline span + span::before { margin: 0 8px; }
.mhero__scroll { bottom: 14px; font-size: 9px; }
}
@media (max-width: 380px) {
.mhero__word { font-size: clamp(64px, 24vw, 130px); }
}
```
```html
Tracy
Freedom Filled® Business
for Women Building by Design
Scroll
Build a beautiful business that lets you live.
Peaceful. Profitable. Present.
```
### hero.quiz-result
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-oatmeal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
.page {
background: var(--p-oatmeal);
padding: clamp(14px, 1.6vw, 24px);
min-height: 100vh;
}
/* -------- HERO SHELL (editorial, framed, cream canvas) -------- */
.hero {
position: relative;
background: var(--p-oatmeal);
border: 1px solid var(--border-hairline);
border-radius: 12px;
overflow: hidden;
padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px);
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(32px, 5vw, 64px);
align-items: center;
min-height: 620px;
}
.hero__content { max-width: 560px; }
.hero__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(44px, 6vw, 84px);
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--p-charcoal);
margin: 0 0 20px;
}
.hero__title em { font-family: var(--f-serif-italic); font-style: italic; }
.hero__script {
font-family: var(--f-script);
font-weight: 400;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1;
color: var(--p-sage);
margin: 0 0 28px;
}
.hero__body {
font-family: var(--f-sans);
font-size: 16px;
line-height: 1.65;
color: var(--p-ink);
margin: 0 0 32px;
max-width: 48ch;
}
.hero__body em { font-family: var(--f-serif-italic); font-style: italic; }
.hero__body strong { font-weight: 600; color: var(--p-charcoal); }
.hero__ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.hero__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
border: 1px solid transparent;
}
.hero__cta--primary {
background: var(--p-cream);
color: var(--p-charcoal);
border-color: var(--p-charcoal);
}
.hero__cta--primary:hover {
background: var(--p-aztek);
color: var(--p-oatmeal);
border-color: var(--p-aztek);
transform: translateY(-1px);
}
.hero__cta--ghost {
background: transparent;
color: var(--p-ink);
border-color: transparent;
padding: 14px 16px;
letter-spacing: 0.12em;
border-bottom: 1px solid var(--p-ink);
border-radius: 0;
}
.hero__cta--ghost:hover { color: var(--p-aztek); border-bottom-color: var(--p-aztek); }
/* -------- PORTRAIT FRAME -------- */
.hero__portrait {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 8px;
overflow: hidden;
background: var(--p-cream);
box-shadow: 0 24px 48px rgba(16,16,16,0.08);
}
.hero__portrait-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 25%;
background-image: url("../../../assets/photos/tracy-outfit8-39.jpg");
filter: contrast(1.02) saturate(1.02);
}
/* soft vignette */
.hero__portrait::after {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.18) 100%);
pointer-events: none;
}
.hero__portrait-tag {
position: absolute;
left: 16px; bottom: 16px;
z-index: 2;
font-family: var(--f-script);
font-size: 22px;
color: var(--p-oatmeal);
text-shadow: 0 2px 12px rgba(0,0,0,0.35);
line-height: 1;
}
/* -------- ARCHETYPE STAMP -------- */
.stamp {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-radius: var(--r-pill);
background: rgba(110,142,119,0.12);
border: 1px solid rgba(110,142,119,0.35);
font-family: var(--f-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--p-aztek);
margin: 0 0 20px;
}
.stamp::before {
content: "";
width: 6px; height: 6px; border-radius: 50%;
background: var(--p-sage);
}
/* -------- MOBILE -------- */
@media (max-width: 820px) {
.hero {
grid-template-columns: 1fr;
padding: clamp(32px, 6vw, 48px) clamp(20px, 5vw, 28px);
min-height: 0;
gap: 32px;
}
.hero__portrait { max-width: 360px; margin: 0 auto; order: -1; }
.hero__title { font-size: clamp(34px, 10vw, 54px); }
.hero__script { font-size: 28px; }
}
@media (max-width: 430px) {
.page { padding: 10px; }
.hero { padding: 32px 20px; }
.hero__title { font-size: 34px; }
.hero__ctas { flex-direction: column; align-items: stretch; }
.hero__cta { justify-content: center; }
.hero__cta--ghost { border-bottom: 0; padding: 12px; }
}
```
```html
Your FRESH archetype
You're a Strategy archetype.
Vision-led. Plan-wanting.
You see the whole picture before anyone else does. You've got the heart, the vision, the people who love what you do. What's missing is the plan that turns all of that into a beautiful business with real revenue.
I've pulled together a full profile for you, lovely. Your strengths, your next three moves, and the Freedom Filled® pathway that matches you.
```
### hero.showcase
```css
body {
margin: 0;
font-family: var(--f-sans);
-webkit-font-smoothing: antialiased;
}
.brand-label {
position: sticky;
top: 0;
z-index: 10;
background: var(--p-charcoal);
color: var(--p-oatmeal);
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 10px 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.brand-label b {
font-weight: 600;
}
```
```html
TRACY HARRIS CO, parent brand , editorial, quiet, dark green on white
data-brand="tracy"
Peace, Profit and Presence .
A suite of programs for women building freedom-filled businesses. Start where you are, choose the path that fits, and build something that lets you live.
FFB, Freedom Filled® Business , mentorship, cream canvas, dark teal + sage
data-brand="ffb"
A 12-month mentorship for the woman building something real .
This is not a course you consume. It is a mentorship experience you move through with Tracy's guidance, strategic thinking, and personal investment in your outcome.
FFM, Freedom Filled® Mastermind (oatmeal canvas), premium, gold gradient, application-based
data-brand="ffm"
Intentionally small. Quietly expensive . Application-based.
Tracy's most intimate and premium offering. Application-based and intentionally small, for women already in business and ready to lead at a higher level.
FFM, Freedom Filled® Mastermind (dark charcoal), white title + gold accent + gold CTA
data-brand="ffm" class="hero--dark"
For the woman ready to lead at a higher level .
Live retreats in Bali. A carefully selected group of high-achieving female entrepreneurs. Radical honesty, deep support, ambitious thinking.
FFM, Freedom Filled® Mastermind (marquee variant, dark), animated photo strip
data-brand="ffm" class="hero--marquee hero--dark"
Application-based · Intentionally small
For the woman ready to lead at a higher level .
Live retreats in Bali. A carefully selected group of high-achieving female entrepreneurs. Radical honesty. Deep support. Ambitious thinking.
FFM, Freedom Filled® Mastermind (silk variant), animated canvas, full-viewport editorial type
data-brand="ffm" class="hero--silk"
Bali · 2026
Lead at a higher level
intimate
·
premium
·
by invitation
FRESH, F.R.E.S.H FRAMEWORK® , personal operating system, oatmeal + navy, five pillar colours
data-brand="fresh"
Most business programs start with strategy. FRESH starts with you .
Tracy's personal operating system, covering Fitness and Nutrition, Relationships, Environment, Self, and Hustle. The foundation that makes sustainable growth possible.
```
### hero.split-dark-polished
Wrapper context: ``
```css
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-charcoal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--p-oatmeal); color: var(--p-charcoal);
padding: 10px 14px; z-index: 100;
font-family: var(--f-sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }
.t-mark { width: auto; fill: currentColor; display: block; }
.t-mark--bar { height: 28px; }
.shero__nav {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 4;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 22px 40px;
color: var(--p-oatmeal);
gap: 20px;
opacity: 0;
transform: translateY(-8px);
animation: shFadeDown 900ms var(--ease-out-craft) 200ms forwards;
}
@keyframes shFadeDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.shero__nav-group { display: flex; gap: 34px; align-items: center; }
.shero__nav-group--right { justify-content: flex-end; }
.shero__nav-link {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
position: relative;
padding: 10px 2px;
min-height: 44px;
display: inline-flex;
align-items: center;
transition: color 180ms var(--ease-out-craft);
}
.shero__nav-link::after {
content: ""; position: absolute; left: 2px; right: 2px; bottom: 8px;
height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: left;
transition: transform 320ms var(--ease-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.shero__nav-link:hover::after { transform: scaleX(1); }
}
.shero__nav-link:focus-visible {
outline: 1px solid var(--p-oatmeal);
outline-offset: 4px;
border-radius: 2px;
}
.shero__nav-mark {
color: inherit; text-decoration: none;
display: inline-flex; align-items: center; justify-content: center;
padding: 8px;
transition: transform 240ms var(--ease-out-craft);
}
.shero__nav-mark:hover { transform: scale(1.04); }
.shero__nav-mark:active { transform: scale(0.97); }
.shero__nav-mark:focus-visible {
outline: 1px solid var(--p-oatmeal);
outline-offset: 6px;
border-radius: 2px;
}
.shero__menu {
background: none; border: 0; cursor: pointer;
padding: 10px; color: inherit;
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--f-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
margin-left: 8px;
min-height: 44px; min-width: 44px;
-webkit-tap-highlight-color: transparent;
transition: transform 160ms var(--ease-out-craft);
}
.shero__menu:active { transform: scale(0.97); }
.shero__menu:focus-visible {
outline: 1px solid var(--p-oatmeal);
outline-offset: 4px;
border-radius: 2px;
}
.shero__menu-icon { display: inline-block; width: 24px; height: 10px; position: relative; }
.shero__menu-icon::before,
.shero__menu-icon::after {
content: ""; position: absolute; left: 0; right: 0;
height: 1.5px; background: currentColor;
transition: transform 280ms var(--ease-out-craft);
}
.shero__menu-icon::before { top: 0; }
.shero__menu-icon::after { bottom: 0; }
.shero__menu:hover .shero__menu-icon::before { transform: translateX(-2px); }
.shero__menu:hover .shero__menu-icon::after { transform: translateX(2px); }
.shero {
position: relative;
min-height: 100vh;
min-height: 100svh;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--p-charcoal);
isolation: isolate;
}
.shero__image {
position: absolute;
inset: 0;
background-image: url("https://cdn.jsdelivr.net/gh/purepurposekh/tracy-harris-brand-kit@main/assets/photos/tracy-outfit8-39.jpg");
background-size: 180% auto;
background-position: 19% 28%;
background-repeat: no-repeat;
filter: saturate(0.95) contrast(1.02);
z-index: 1;
transform: scale(1.06);
opacity: 0;
animation: shReveal 1400ms var(--ease-drawer) 100ms forwards;
will-change: transform, opacity;
}
@keyframes shReveal {
from { opacity: 0; transform: scale(1.12); }
to { opacity: 1; transform: scale(1.06); }
}
.shero__scrim {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(90deg,
rgba(16,16,16,0.97) 0%,
rgba(16,16,16,0.94) 28%,
rgba(16,16,16,0.65) 42%,
rgba(16,16,16,0.20) 54%,
rgba(16,16,16,0.0) 64%);
}
.shero__vignette {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(180deg,
rgba(16,16,16,0.35) 0%,
rgba(16,16,16,0.0) 18%,
rgba(16,16,16,0.0) 82%,
rgba(16,16,16,0.30) 100%);
}
.shero__content {
position: relative;
z-index: 3;
grid-column: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px clamp(40px, 6vw, 96px) 80px clamp(36px, 6vw, 96px);
max-width: 720px;
color: var(--p-oatmeal);
}
.shero__eyebrow,
.shero__title,
.shero__sub,
.shero__ctas {
opacity: 0;
transform: translateY(14px);
animation: shRise 900ms var(--ease-out-craft) forwards;
will-change: transform, opacity;
}
.shero__eyebrow { animation-delay: 360ms; }
.shero__title { animation-delay: 500ms; }
.shero__sub { animation-delay: 660ms; }
.shero__ctas { animation-delay: 820ms; }
@keyframes shRise {
from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.shero__eyebrow {
font-family: var(--f-script);
font-weight: 400;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1;
margin: 0 0 18px;
color: var(--p-oatmeal);
opacity: 0.95;
}
.shero__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(44px, 5.4vw, 82px);
line-height: 1.02;
letter-spacing: -0.01em;
color: var(--p-oatmeal);
margin: 0;
text-wrap: balance;
}
.shero__title em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.shero__sub {
font-family: var(--f-sans);
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.6;
color: var(--p-oatmeal);
margin: 22px 0 0;
max-width: 44ch;
opacity: 0.9;
text-wrap: pretty;
}
.shero__sub em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.shero__ctas {
display: flex;
gap: 14px;
margin-top: 32px;
flex-wrap: wrap;
}
.shero__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
min-height: 48px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
transition:
background 200ms var(--ease-out-craft),
color 200ms var(--ease-out-craft),
transform 180ms var(--ease-out-craft),
border-color 200ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft);
}
.shero__cta--primary {
background: var(--p-oatmeal);
color: var(--p-charcoal);
border: 1px solid var(--p-oatmeal);
box-shadow: 0 10px 28px -14px rgba(246,244,241,0.35);
}
.shero__cta--primary:hover {
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border-color: var(--p-ffb-dark);
transform: translateY(-2px);
box-shadow: 0 14px 32px -14px rgba(30,55,53,0.55);
}
.shero__cta--primary:active { transform: translateY(0) scale(0.98); }
.shero__cta--primary:focus-visible {
outline: 2px solid var(--p-oatmeal);
outline-offset: 3px;
}
.shero__cta--ghost {
background: transparent;
color: var(--p-oatmeal);
border: 1px solid rgba(246,244,241,0.45);
}
.shero__cta--ghost:hover { border-color: var(--p-oatmeal); transform: translateY(-2px); }
.shero__cta--ghost:active { transform: translateY(0) scale(0.98); }
.shero__cta--ghost:focus-visible {
outline: 1px solid var(--p-oatmeal);
outline-offset: 4px;
}
.shero__meta {
position: absolute;
left: clamp(36px, 6vw, 96px);
bottom: 28px;
z-index: 3;
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--p-oatmeal);
opacity: 0;
animation: shRise 900ms var(--ease-out-craft) 1000ms forwards;
}
.shero__meta span + span::before {
content: "·"; margin: 0 12px; opacity: 0.6;
}
@media (max-width: 820px) {
.shero__nav {
padding: 14px 18px;
grid-template-columns: auto 1fr auto;
gap: 12px;
}
.shero__nav-group:not(.shero__nav-group--right) { display: none; }
.shero__nav-group--right .shero__nav-link { display: none; }
.shero__menu { margin-left: 0; padding: 10px; }
.shero__menu span:first-child { display: none; }
.shero__menu-icon { width: 26px; height: 12px; }
.shero { display: block; }
.shero__image {
background-size: cover;
background-position: 52% 22%;
}
.shero__scrim {
background:
linear-gradient(180deg,
rgba(16,16,16,0.20) 0%,
rgba(16,16,16,0.0) 25%,
rgba(16,16,16,0.15) 45%,
rgba(16,16,16,0.78) 70%,
rgba(16,16,16,0.92) 100%);
}
.shero__content {
max-width: none;
padding: 0 24px 100px;
position: absolute;
bottom: 0; left: 0; right: 0;
justify-content: flex-end;
}
.shero__eyebrow { font-size: 20px; margin-bottom: 10px; }
.shero__title { font-size: clamp(38px, 10vw, 60px); line-height: 1.02; }
.shero__sub { font-size: 14px; max-width: none; margin-top: 14px; }
.shero__ctas { margin-top: 22px; }
.shero__cta { padding: 12px 22px; font-size: 11px; }
.shero__meta { left: 24px; bottom: 16px; font-size: 9px; }
}
@media (max-width: 380px) {
.shero__title { font-size: 32px; }
.shero__ctas { flex-direction: column; align-items: stretch; }
.shero__cta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.shero__image,
.shero__nav,
.shero__eyebrow,
.shero__title,
.shero__sub,
.shero__ctas,
.shero__meta {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.shero__image { transform: scale(1.02); }
}
```
```html
Skip to content
Peace, Profit, Presence.
Build a beautiful business that lets you live.
Mentorship, mastermind and community for women building Freedom Filled® businesses, grounded in story, strategy and spaciousness.
Est. 2016
Coaching · Mastermind · Community
```
### hero.split-dark
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-cream);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
/* ---- Official T brandmark ---- */
.t-mark { width: auto; fill: currentColor; display: block; }
.t-mark--bar { height: 28px; }
/* -------- TOP BAR -------- */
.shero__nav {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 3;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 22px 40px;
color: var(--p-oatmeal);
gap: 20px;
}
.shero__nav-group { display: flex; gap: 34px; align-items: center; }
.shero__nav-group--right { justify-content: flex-end; }
.shero__nav-link {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
position: relative;
padding: 6px 0;
}
.shero__nav-link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: left;
transition: transform .3s ease;
}
.shero__nav-link:hover::after { transform: scaleX(1); }
.shero__nav-mark {
color: inherit; text-decoration: none;
display: inline-flex; align-items: center; justify-content: center;
}
.shero__menu {
background: none; border: 0; cursor: pointer;
padding: 10px; color: inherit;
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--f-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
margin-left: 8px;
-webkit-tap-highlight-color: transparent;
}
.shero__menu-icon { display: inline-block; width: 24px; height: 10px; position: relative; }
.shero__menu-icon::before,
.shero__menu-icon::after {
content: ""; position: absolute; left: 0; right: 0;
height: 1.5px; background: currentColor;
}
.shero__menu-icon::before { top: 0; }
.shero__menu-icon::after { bottom: 0; }
/* -------- THE HERO -------- */
.shero {
position: relative;
min-height: 100vh;
min-height: 100svh;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--p-charcoal);
}
.shero__image {
position: absolute;
inset: 0;
background-image: url("../../../assets/photos/tracy-outfit8-39.jpg");
background-size: 180% auto;
background-position: 19% 28%;
background-repeat: no-repeat;
filter: saturate(0.95) contrast(1.02);
z-index: 1;
}
.shero__scrim {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(90deg,
rgba(16,16,16,0.97) 0%,
rgba(16,16,16,0.94) 28%,
rgba(16,16,16,0.65) 42%,
rgba(16,16,16,0.20) 54%,
rgba(16,16,16,0.0) 64%);
}
.shero__vignette {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(180deg,
rgba(16,16,16,0.35) 0%,
rgba(16,16,16,0.0) 18%,
rgba(16,16,16,0.0) 82%,
rgba(16,16,16,0.30) 100%);
}
.shero__content {
position: relative;
z-index: 3;
grid-column: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px clamp(40px, 6vw, 96px) 80px clamp(36px, 6vw, 96px);
max-width: 720px;
color: var(--p-oatmeal);
}
.shero__eyebrow {
font-family: 'Jhon Halend', 'Caveat', cursive;
font-weight: 400;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1;
margin: 0 0 18px;
color: var(--p-oatmeal);
opacity: 0.95;
}
.shero__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(44px, 5.4vw, 82px);
line-height: 1.02;
letter-spacing: -0.01em;
color: var(--p-oatmeal);
margin: 0;
}
.shero__title em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.shero__sub {
font-family: var(--f-sans);
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.6;
color: var(--p-oatmeal);
margin: 22px 0 0;
max-width: 44ch;
opacity: 0.9;
}
.shero__sub em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.shero__ctas {
display: flex;
gap: 14px;
margin-top: 32px;
flex-wrap: wrap;
}
.shero__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
transition: background .2s ease, color .2s ease, transform .25s ease, border-color .2s ease;
}
.shero__cta--primary {
background: var(--p-oatmeal);
color: var(--p-charcoal);
border: 1px solid var(--p-oatmeal);
}
.shero__cta--primary:hover {
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border-color: var(--p-ffb-dark);
transform: translateY(-1px);
}
.shero__cta--ghost {
background: transparent;
color: var(--p-oatmeal);
border: 1px solid rgba(246,244,241,0.45);
}
.shero__cta--ghost:hover { border-color: var(--p-oatmeal); transform: translateY(-1px); }
.shero__meta {
position: absolute;
left: clamp(36px, 6vw, 96px);
bottom: 28px;
z-index: 3;
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--p-oatmeal);
opacity: 0.72;
}
.shero__meta span + span::before {
content: "·"; margin: 0 12px; opacity: 0.6;
}
/* -------- MOBILE -------- */
@media (max-width: 820px) {
.shero__nav {
padding: 14px 18px;
grid-template-columns: auto 1fr auto;
gap: 12px;
}
.shero__nav-group:not(.shero__nav-group--right) { display: none; }
.shero__nav-group--right .shero__nav-link { display: none; }
.shero__menu { margin-left: 0; padding: 8px; }
.shero__menu span:first-child { display: none; }
.shero__menu-icon { width: 26px; height: 12px; }
.shero { display: block; }
.shero__image {
background-size: cover;
background-position: 52% 22%;
}
.shero__scrim {
background:
linear-gradient(180deg,
rgba(16,16,16,0.20) 0%,
rgba(16,16,16,0.0) 25%,
rgba(16,16,16,0.15) 45%,
rgba(16,16,16,0.78) 70%,
rgba(16,16,16,0.92) 100%);
}
.shero__content {
max-width: none;
padding: 0 24px 100px;
position: absolute;
bottom: 0; left: 0; right: 0;
justify-content: flex-end;
}
.shero__eyebrow { font-size: 20px; margin-bottom: 10px; }
.shero__title { font-size: clamp(38px, 10vw, 60px); line-height: 1.02; }
.shero__sub { font-size: 14px; max-width: none; margin-top: 14px; }
.shero__ctas { margin-top: 22px; }
.shero__cta { padding: 12px 22px; font-size: 11px; }
.shero__meta { left: 24px; bottom: 16px; font-size: 9px; }
}
@media (max-width: 380px) {
.shero__title { font-size: 36px; }
.shero__ctas { flex-direction: column; align-items: stretch; }
.shero__cta { justify-content: center; }
}
```
```html
Peace, Profit, Presence.
Build a beautiful business that lets you live.
Mentorship, mastermind and community for women building Freedom Filled® businesses, grounded in story, strategy and spaciousness.
Est. 2016
Coaching · Mastermind · Community
```
### hero.split-light-polished
Wrapper context: ``
```css
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-cream);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--p-aztek); color: var(--p-oatmeal);
padding: 10px 14px; z-index: 100;
font-family: var(--f-sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }
.t-mark { width: auto; fill: currentColor; display: block; }
.t-mark--bar { height: 28px; }
.shero__nav {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 4;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 22px 40px;
gap: 20px;
color: var(--p-charcoal);
opacity: 0;
transform: translateY(-8px);
animation: shlFadeDown 900ms var(--ease-out-craft) 200ms forwards;
}
@keyframes shlFadeDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.shero__nav-group { display: flex; gap: 34px; align-items: center; }
.shero__nav-group--right { justify-content: flex-end; }
.shero__nav-link {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
position: relative;
padding: 10px 2px;
min-height: 44px;
display: inline-flex;
align-items: center;
transition: color 180ms var(--ease-out-craft);
}
.shero__nav-link::after {
content: ""; position: absolute; left: 2px; right: 2px; bottom: 8px;
height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: left;
transition: transform 320ms var(--ease-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.shero__nav-link:hover::after { transform: scaleX(1); }
}
.shero__nav-link:focus-visible {
outline: 1px solid var(--p-charcoal);
outline-offset: 4px;
border-radius: 2px;
}
.shero__nav-mark {
color: inherit; text-decoration: none;
display: inline-flex; align-items: center; justify-content: center;
padding: 8px;
transition: transform 240ms var(--ease-out-craft);
}
.shero__nav-mark:hover { transform: scale(1.04); }
.shero__nav-mark:active { transform: scale(0.97); }
.shero__nav-mark:focus-visible {
outline: 1px solid var(--p-charcoal);
outline-offset: 6px;
border-radius: 2px;
}
.shero__menu {
background: none; border: 0; cursor: pointer;
padding: 10px; color: inherit;
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--f-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
margin-left: 8px;
min-height: 44px; min-width: 44px;
-webkit-tap-highlight-color: transparent;
transition: transform 160ms var(--ease-out-craft);
}
.shero__menu:active { transform: scale(0.97); }
.shero__menu:focus-visible {
outline: 1px solid var(--p-charcoal);
outline-offset: 4px;
border-radius: 2px;
}
.shero__menu-icon { display: inline-block; width: 24px; height: 10px; position: relative; }
.shero__menu-icon::before,
.shero__menu-icon::after {
content: ""; position: absolute; left: 0; right: 0;
height: 1.5px; background: currentColor;
transition: transform 280ms var(--ease-out-craft);
}
.shero__menu-icon::before { top: 0; }
.shero__menu-icon::after { bottom: 0; }
.shero {
position: relative;
min-height: 100vh;
min-height: 100svh;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--p-oatmeal);
isolation: isolate;
}
.shero__image {
position: absolute;
inset: 0;
background-image: url("https://cdn.jsdelivr.net/gh/purepurposekh/tracy-harris-brand-kit@main/assets/photos/tracy-outfit8-39.jpg");
background-size: 180% auto;
background-position: 19% 28%;
background-repeat: no-repeat;
filter: saturate(0.95) contrast(1.02);
z-index: 1;
transform: scale(1.06);
opacity: 0;
animation: shlReveal 1400ms var(--ease-drawer) 100ms forwards;
will-change: transform, opacity;
}
@keyframes shlReveal {
from { opacity: 0; transform: scale(1.12); }
to { opacity: 1; transform: scale(1.06); }
}
.shero__scrim {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(90deg,
rgba(246,244,241,0.98) 0%,
rgba(246,244,241,0.95) 28%,
rgba(246,244,241,0.7) 42%,
rgba(246,244,241,0.25) 54%,
rgba(246,244,241,0.0) 64%);
}
.shero__vignette {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(180deg,
rgba(246,244,241,0.5) 0%,
rgba(246,244,241,0.0) 18%,
rgba(246,244,241,0.0) 82%,
rgba(246,244,241,0.35) 100%);
}
.shero__content {
position: relative;
z-index: 3;
grid-column: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px clamp(40px, 6vw, 96px) 80px clamp(36px, 6vw, 96px);
max-width: 720px;
color: var(--p-charcoal);
}
.shero__eyebrow,
.shero__title,
.shero__sub,
.shero__ctas {
opacity: 0;
transform: translateY(14px);
animation: shlRise 900ms var(--ease-out-craft) forwards;
will-change: transform, opacity;
}
.shero__eyebrow { animation-delay: 360ms; }
.shero__title { animation-delay: 500ms; }
.shero__sub { animation-delay: 660ms; }
.shero__ctas { animation-delay: 820ms; }
@keyframes shlRise {
from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.shero__eyebrow {
font-family: var(--f-script);
font-weight: 400;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1;
margin: 0 0 18px;
color: var(--p-sage);
opacity: 0.95;
}
.shero__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(44px, 5.4vw, 82px);
line-height: 1.02;
letter-spacing: -0.01em;
color: var(--p-charcoal);
margin: 0;
text-wrap: balance;
}
.shero__title em { font-family: var(--f-serif-italic); font-style: italic; }
.shero__sub {
font-family: var(--f-sans);
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.6;
color: var(--p-ink);
margin: 22px 0 0;
max-width: 44ch;
text-wrap: pretty;
}
.shero__sub em { font-family: var(--f-serif-italic); font-style: italic; }
.shero__ctas {
display: flex;
gap: 14px;
margin-top: 32px;
flex-wrap: wrap;
}
.shero__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
min-height: 48px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
transition:
background 200ms var(--ease-out-craft),
color 200ms var(--ease-out-craft),
transform 180ms var(--ease-out-craft),
border-color 200ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft);
}
.shero__cta--primary {
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border: 1px solid var(--p-ffb-dark);
box-shadow: 0 10px 28px -14px rgba(30,55,53,0.45);
}
.shero__cta--primary:hover {
background: #122624;
border-color: #122624;
transform: translateY(-2px);
box-shadow: 0 14px 32px -14px rgba(30,55,53,0.55);
}
.shero__cta--primary:active { transform: translateY(0) scale(0.98); }
.shero__cta--primary:focus-visible {
outline: 2px solid var(--p-aztek);
outline-offset: 3px;
}
.shero__cta--ghost {
background: transparent;
color: var(--p-charcoal);
border: 1px solid rgba(16,16,16,0.3);
}
.shero__cta--ghost:hover { border-color: var(--p-charcoal); transform: translateY(-2px); }
.shero__cta--ghost:active { transform: translateY(0) scale(0.98); }
.shero__cta--ghost:focus-visible {
outline: 1px solid var(--p-charcoal);
outline-offset: 4px;
}
.shero__meta {
position: absolute;
left: clamp(36px, 6vw, 96px);
bottom: 28px;
z-index: 3;
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--p-charcoal);
opacity: 0;
animation: shlRise 900ms var(--ease-out-craft) 1000ms forwards;
}
.shero__meta span + span::before {
content: "·"; margin: 0 12px; opacity: 0.6;
}
@media (max-width: 820px) {
.shero__nav {
padding: 14px 18px;
grid-template-columns: auto 1fr auto;
gap: 12px;
}
.shero__nav-group:not(.shero__nav-group--right) { display: none; }
.shero__nav-group--right .shero__nav-link { display: none; }
.shero__menu { margin-left: 0; padding: 10px; }
.shero__menu span:first-child { display: none; }
.shero__menu-icon { width: 26px; height: 12px; }
.shero { display: block; }
.shero__image {
background-size: cover;
background-position: 52% 22%;
}
.shero__scrim {
background:
linear-gradient(180deg,
rgba(246,244,241,0.35) 0%,
rgba(246,244,241,0.0) 25%,
rgba(246,244,241,0.25) 45%,
rgba(246,244,241,0.8) 70%,
rgba(246,244,241,0.95) 100%);
}
.shero__content {
max-width: none;
padding: 0 24px 100px;
position: absolute;
bottom: 0; left: 0; right: 0;
justify-content: flex-end;
}
.shero__eyebrow { font-size: 20px; margin-bottom: 10px; }
.shero__title { font-size: clamp(38px, 10vw, 60px); line-height: 1.02; }
.shero__sub { font-size: 14px; max-width: none; margin-top: 14px; }
.shero__ctas { margin-top: 22px; }
.shero__cta { padding: 12px 22px; font-size: 11px; }
.shero__meta { left: 24px; bottom: 16px; font-size: 9px; }
}
@media (max-width: 380px) {
.shero__title { font-size: 32px; }
.shero__ctas { flex-direction: column; align-items: stretch; }
.shero__cta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.shero__image,
.shero__nav,
.shero__eyebrow,
.shero__title,
.shero__sub,
.shero__ctas,
.shero__meta {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.shero__image { transform: scale(1.02); }
}
```
```html
Skip to content
Peace, Profit, Presence.
Build a beautiful business that lets you live.
Mentorship, mastermind and community for women building Freedom Filled® businesses, grounded in story, strategy and spaciousness.
Est. 2016
Coaching · Mastermind · Community
```
### hero.split-light
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-cream);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
/* ---- Official T brandmark ---- */
.t-mark { width: auto; fill: currentColor; display: block; }
.t-mark--bar { height: 28px; }
/* -------- TOP BAR -------- */
.shero__nav {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 3;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 22px 40px;
color: var(--p-oatmeal);
gap: 20px;
}
.shero__nav-group { display: flex; gap: 34px; align-items: center; }
.shero__nav-group--right { justify-content: flex-end; }
.shero__nav-link {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
position: relative;
padding: 6px 0;
}
.shero__nav-link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: left;
transition: transform .3s ease;
}
.shero__nav-link:hover::after { transform: scaleX(1); }
.shero__nav-mark {
color: inherit; text-decoration: none;
display: inline-flex; align-items: center; justify-content: center;
}
.shero__menu {
background: none; border: 0; cursor: pointer;
padding: 10px; color: inherit;
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--f-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
margin-left: 8px;
-webkit-tap-highlight-color: transparent;
}
.shero__menu-icon { display: inline-block; width: 24px; height: 10px; position: relative; }
.shero__menu-icon::before,
.shero__menu-icon::after {
content: ""; position: absolute; left: 0; right: 0;
height: 1.5px; background: currentColor;
}
.shero__menu-icon::before { top: 0; }
.shero__menu-icon::after { bottom: 0; }
/* -------- THE HERO -------- */
.shero {
position: relative;
min-height: 100vh;
min-height: 100svh;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--p-charcoal);
}
.shero__image {
position: absolute;
inset: 0;
background-image: url("../../../assets/photos/tracy-outfit8-39.jpg");
background-size: 180% auto;
background-position: 19% 28%;
background-repeat: no-repeat;
filter: saturate(0.95) contrast(1.02);
z-index: 1;
}
/* LIGHT variant styling */
.shero.shero--light { background: var(--p-oatmeal); }
.shero.shero--light .shero__scrim {
background:
linear-gradient(90deg,
rgba(246,244,241,0.98) 0%,
rgba(246,244,241,0.95) 28%,
rgba(246,244,241,0.7) 42%,
rgba(246,244,241,0.25) 54%,
rgba(246,244,241,0.0) 64%);
}
.shero.shero--light .shero__vignette {
background: linear-gradient(180deg,
rgba(246,244,241,0.5) 0%,
rgba(246,244,241,0.0) 18%,
rgba(246,244,241,0.0) 82%,
rgba(246,244,241,0.35) 100%);
}
.shero.shero--light .shero__content,
.shero.shero--light .shero__eyebrow,
.shero.shero--light .shero__title,
.shero.shero--light .shero__sub,
.shero.shero--light .shero__meta,
.shero.shero--light .shero__nav {
color: var(--p-charcoal);
}
.shero.shero--light .shero__cta--primary {
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border-color: var(--p-ffb-dark);
}
.shero.shero--light .shero__cta--primary:hover {
background: #122624;
border-color: #122624;
}
.shero.shero--light .shero__cta--ghost {
color: var(--p-charcoal);
border-color: rgba(16,16,16,0.3);
}
.shero.shero--light .shero__cta--ghost:hover {
border-color: var(--p-charcoal);
}
.shero__scrim {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.shero__vignette {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.shero__content {
position: relative;
z-index: 3;
grid-column: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px clamp(40px, 6vw, 96px) 80px clamp(36px, 6vw, 96px);
max-width: 720px;
color: var(--p-oatmeal);
}
.shero__eyebrow {
font-family: 'Jhon Halend', 'Caveat', cursive;
font-weight: 400;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1;
margin: 0 0 18px;
opacity: 0.95;
}
.shero__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(44px, 5.4vw, 82px);
line-height: 1.02;
letter-spacing: -0.01em;
margin: 0;
}
.shero__title em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.shero__sub {
font-family: var(--f-sans);
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.6;
margin: 22px 0 0;
max-width: 44ch;
opacity: 0.9;
}
.shero__sub em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.shero__ctas {
display: flex;
gap: 14px;
margin-top: 32px;
flex-wrap: wrap;
}
.shero__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
transition: background .2s ease, color .2s ease, transform .25s ease, border-color .2s ease;
}
.shero__cta--primary { border-style: solid; border-width: 1px; }
.shero__cta--primary:hover { transform: translateY(-1px); }
.shero__cta--ghost { background: transparent; border-style: solid; border-width: 1px; }
.shero__cta--ghost:hover { transform: translateY(-1px); }
.shero__meta {
position: absolute;
left: clamp(36px, 6vw, 96px);
bottom: 28px;
z-index: 3;
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
opacity: 0.72;
}
.shero__meta span + span::before {
content: "·"; margin: 0 12px; opacity: 0.6;
}
/* -------- MOBILE -------- */
@media (max-width: 820px) {
.shero__nav {
padding: 14px 18px;
grid-template-columns: auto 1fr auto;
gap: 12px;
}
.shero__nav-group:not(.shero__nav-group--right) { display: none; }
.shero__nav-group--right .shero__nav-link { display: none; }
.shero__menu { margin-left: 0; padding: 8px; }
.shero__menu span:first-child { display: none; }
.shero__menu-icon { width: 26px; height: 12px; }
.shero { display: block; }
.shero__image {
background-size: cover;
background-position: 52% 22%;
}
.shero.shero--light .shero__scrim {
background:
linear-gradient(180deg,
rgba(246,244,241,0.35) 0%,
rgba(246,244,241,0.0) 25%,
rgba(246,244,241,0.25) 45%,
rgba(246,244,241,0.8) 70%,
rgba(246,244,241,0.95) 100%);
}
.shero__content {
max-width: none;
padding: 0 24px 100px;
position: absolute;
bottom: 0; left: 0; right: 0;
justify-content: flex-end;
}
.shero__eyebrow { font-size: 20px; margin-bottom: 10px; }
.shero__title { font-size: clamp(38px, 10vw, 60px); line-height: 1.02; }
.shero__sub { font-size: 14px; max-width: none; margin-top: 14px; }
.shero__ctas { margin-top: 22px; }
.shero__cta { padding: 12px 22px; font-size: 11px; }
.shero__meta { left: 24px; bottom: 16px; font-size: 9px; }
}
@media (max-width: 380px) {
.shero__title { font-size: 36px; }
.shero__ctas { flex-direction: column; align-items: stretch; }
.shero__cta { justify-content: center; }
}
```
```html
Peace, Profit, Presence.
Build a beautiful business that lets you live.
Mentorship, mastermind and community for women building Freedom Filled® businesses, grounded in story, strategy and spaciousness.
Est. 2016
Coaching · Mastermind · Community
```
### hero.split
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-cream);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
/* ---- Official T brandmark ---- */
.t-mark { width: auto; fill: currentColor; display: block; }
.t-mark--bar { height: 28px; }
/* -------- TOP BAR (inside hero, light text on dark side) -------- */
.shero__nav {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 3;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 22px 40px;
color: var(--p-oatmeal);
gap: 20px;
}
.shero__nav-group { display: flex; gap: 34px; align-items: center; }
.shero__nav-group--right { justify-content: flex-end; }
.shero__nav-link {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
position: relative;
padding: 6px 0;
}
.shero__nav-link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: left;
transition: transform .3s ease;
}
.shero__nav-link:hover::after { transform: scaleX(1); }
.shero__nav-mark {
color: inherit; text-decoration: none;
display: inline-flex; align-items: center; justify-content: center;
}
.shero__menu {
background: none; border: 0; cursor: pointer;
padding: 10px; color: inherit;
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--f-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
margin-left: 8px;
-webkit-tap-highlight-color: transparent;
}
.shero__menu-icon { display: inline-block; width: 24px; height: 10px; position: relative; }
.shero__menu-icon::before,
.shero__menu-icon::after {
content: ""; position: absolute; left: 0; right: 0;
height: 1.5px; background: currentColor;
}
.shero__menu-icon::before { top: 0; }
.shero__menu-icon::after { bottom: 0; }
/* -------- THE HERO -------- */
.shero {
position: relative;
min-height: 100vh;
min-height: 100svh;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--p-charcoal);
}
/* Photo layer: full-bleed, zoomed wider than viewport so Tracy's center
lands at ~75% of viewport width (centre of the right quadrant).
Math: with background-size: 180% auto, position 19% places a subject
that's at 50% of the image at 75% of the container, at any viewport width. */
.shero__image {
position: absolute;
inset: 0;
background-image: url("../../../assets/photos/tracy-outfit8-39.jpg");
background-size: 180% auto;
background-position: 19% 28%;
background-repeat: no-repeat;
filter: saturate(0.95) contrast(1.02);
z-index: 1;
}
/* Horizontal gradient: dark on the LEFT, clears well BEFORE Tracy so her face is fully visible */
.shero__scrim {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(90deg,
rgba(16,16,16,0.97) 0%,
rgba(16,16,16,0.94) 28%,
rgba(16,16,16,0.65) 42%,
rgba(16,16,16,0.20) 54%,
rgba(16,16,16,0.0) 64%);
}
/* LIGHT variant: cream-to-clear gradient, charcoal text */
.shero.shero--light { background: var(--p-oatmeal); }
.shero.shero--light .shero__scrim {
background:
linear-gradient(90deg,
rgba(246,244,241,0.98) 0%,
rgba(246,244,241,0.95) 28%,
rgba(246,244,241,0.7) 42%,
rgba(246,244,241,0.25) 54%,
rgba(246,244,241,0.0) 64%);
}
.shero.shero--light .shero__vignette {
background: linear-gradient(180deg,
rgba(246,244,241,0.5) 0%,
rgba(246,244,241,0.0) 18%,
rgba(246,244,241,0.0) 82%,
rgba(246,244,241,0.35) 100%);
}
.shero.shero--light .shero__content,
.shero.shero--light .shero__eyebrow,
.shero.shero--light .shero__title,
.shero.shero--light .shero__sub,
.shero.shero--light .shero__meta,
.shero.shero--light .shero__nav {
color: var(--p-charcoal);
}
.shero.shero--light .shero__cta--primary {
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border-color: var(--p-ffb-dark);
}
.shero.shero--light .shero__cta--primary:hover {
background: #122624;
border-color: #122624;
}
.shero.shero--light .shero__cta--ghost {
color: var(--p-charcoal);
border-color: rgba(16,16,16,0.3);
}
.shero.shero--light .shero__cta--ghost:hover {
border-color: var(--p-charcoal);
}
/* Subtle top/bottom vignette to keep nav + legal margins readable */
.shero__vignette {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(180deg,
rgba(16,16,16,0.35) 0%,
rgba(16,16,16,0.0) 18%,
rgba(16,16,16,0.0) 82%,
rgba(16,16,16,0.30) 100%);
}
/* Content: sits on the LEFT half */
.shero__content {
position: relative;
z-index: 3;
grid-column: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px clamp(40px, 6vw, 96px) 80px clamp(36px, 6vw, 96px);
max-width: 720px;
color: var(--p-oatmeal);
}
.shero__eyebrow {
font-family: 'Jhon Halend', 'Caveat', cursive;
font-weight: 400;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1;
margin: 0 0 18px;
color: var(--p-oatmeal);
opacity: 0.95;
}
.shero__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(44px, 5.4vw, 82px);
line-height: 1.02;
letter-spacing: -0.01em;
color: var(--p-oatmeal);
margin: 0;
}
.shero__title em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.shero__sub {
font-family: var(--f-sans);
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.6;
color: var(--p-oatmeal);
margin: 22px 0 0;
max-width: 44ch;
opacity: 0.9;
}
.shero__sub em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.shero__ctas {
display: flex;
gap: 14px;
margin-top: 32px;
flex-wrap: wrap;
}
.shero__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
transition: background .2s ease, color .2s ease, transform .25s ease, border-color .2s ease;
}
.shero__cta--primary {
background: var(--p-oatmeal);
color: var(--p-charcoal);
border: 1px solid var(--p-oatmeal);
}
.shero__cta--primary:hover {
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border-color: var(--p-ffb-dark);
transform: translateY(-1px);
}
.shero__cta--ghost {
background: transparent;
color: var(--p-oatmeal);
border: 1px solid rgba(246,244,241,0.45);
}
.shero__cta--ghost:hover { border-color: var(--p-oatmeal); transform: translateY(-1px); }
/* Small meta row at the bottom-left */
.shero__meta {
position: absolute;
left: clamp(36px, 6vw, 96px);
bottom: 28px;
z-index: 3;
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--p-oatmeal);
opacity: 0.72;
}
.shero__meta span + span::before {
content: "·"; margin: 0 12px; opacity: 0.6;
}
/* -------- EXHALE SECTION BELOW -------- */
.sexhale {
padding: clamp(80px, 12vh, 140px) clamp(20px, 6vw, 80px);
background: var(--p-cream);
color: var(--p-charcoal);
text-align: center;
}
.sexhale p {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.45;
max-width: 720px;
margin: 0 auto;
}
.sexhale em { font-family: var(--f-serif-italic); font-style: italic; }
/* -------- MOBILE, stack, photo on top, text below -------- */
@media (max-width: 820px) {
.shero__nav {
padding: 14px 18px;
grid-template-columns: auto 1fr auto;
gap: 12px;
}
.shero__nav-group:not(.shero__nav-group--right) { display: none; }
.shero__nav-group--right .shero__nav-link { display: none; }
.shero__menu { margin-left: 0; padding: 8px; }
.shero__menu span:first-child { display: none; }
.shero__menu-icon { width: 26px; height: 12px; }
.shero {
display: block;
}
.shero__image {
background-size: cover;
background-position: 52% 22%;
}
/* Flip the gradient: dim the BOTTOM (where text sits) instead of LEFT */
.shero__scrim {
background:
linear-gradient(180deg,
rgba(16,16,16,0.20) 0%,
rgba(16,16,16,0.0) 25%,
rgba(16,16,16,0.15) 45%,
rgba(16,16,16,0.78) 70%,
rgba(16,16,16,0.92) 100%);
}
.shero.shero--light .shero__scrim {
background:
linear-gradient(180deg,
rgba(246,244,241,0.35) 0%,
rgba(246,244,241,0.0) 25%,
rgba(246,244,241,0.25) 45%,
rgba(246,244,241,0.8) 70%,
rgba(246,244,241,0.95) 100%);
}
.shero__content {
max-width: none;
padding: 0 24px 100px;
position: absolute;
bottom: 0; left: 0; right: 0;
justify-content: flex-end;
}
.shero__eyebrow { font-size: 20px; margin-bottom: 10px; }
.shero__title { font-size: clamp(38px, 10vw, 60px); line-height: 1.02; }
.shero__sub { font-size: 14px; max-width: none; margin-top: 14px; }
.shero__ctas { margin-top: 22px; }
.shero__cta { padding: 12px 22px; font-size: 11px; }
.shero__meta { left: 24px; bottom: 16px; font-size: 9px; }
}
@media (max-width: 380px) {
.shero__title { font-size: 36px; }
.shero__ctas { flex-direction: column; align-items: stretch; }
.shero__cta { justify-content: center; }
}
```
```html
Peace, Profit, Presence.
Build a beautiful business that lets you live.
Mentorship, mastermind and community for women building Freedom Filled® businesses, grounded in story, strategy and spaciousness.
Est. 2016
Coaching · Mastermind · Community
Quietly profitable. Intentionally small.
A business by design , not by default.
Peace, Profit, Presence.
Build a beautiful business that lets you live.
Mentorship, mastermind and community for women building Freedom Filled® businesses, grounded in story, strategy and spaciousness.
Est. 2016
Coaching · Mastermind · Community
```
### hero.stage-portrait
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-oatmeal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
/* ---- Tracy marks ---- */
.t-mark { width: auto; fill: currentColor; display: block; }
.t-mark path, .t-mark circle { fill: currentColor; }
.t-wordmark { width: auto; fill: currentColor; display: block; }
.t-wordmark path, .t-wordmark polygon, .t-wordmark rect, .t-wordmark circle { fill: currentColor; }
/* -------- CREAM FRAME (page gets a soft canvas border around the hero) -------- */
.tpage {
background: var(--p-oatmeal);
min-height: 100vh;
min-height: 100svh;
padding: clamp(14px, 1.6vw, 24px);
color: var(--p-charcoal);
overflow-x: hidden;
max-width: 100vw;
}
/* -------- THIN TOP BAR (light, refined, Tracy voice) -------- */
.tnav {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 20px;
padding: 10px 10px 22px;
color: var(--p-charcoal);
}
.tnav__mark {
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.tnav__mark .t-wordmark { height: 20px; opacity: 0.92; }
.tnav__links {
display: flex;
justify-content: center;
gap: 34px;
align-items: center;
}
.tnav__link {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
position: relative;
padding: 6px 0;
opacity: 0.8;
transition: opacity .2s ease;
}
.tnav__link:hover { opacity: 1; }
.tnav__link::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 2px;
height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: left;
transition: transform .3s ease;
}
.tnav__link:hover::after { transform: scaleX(1); }
.tnav__right {
display: flex;
align-items: center;
gap: 20px;
justify-content: flex-end;
}
.tnav__icon {
background: none;
border: 0;
color: inherit;
padding: 6px;
cursor: pointer;
opacity: 0.75;
display: inline-flex;
}
.tnav__icon:hover { opacity: 1; }
.tnav__cta {
padding: 10px 22px;
border-radius: var(--r-pill);
background: var(--p-charcoal);
color: var(--p-oatmeal);
font-family: var(--f-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
transition: background .25s ease, transform .2s ease;
white-space: nowrap;
}
.tnav__cta:hover { background: var(--p-ffb-dark); transform: translateY(-1px); }
/* -------- HERO: editorial portrait in a framed canvas, not a "stage" -------- */
.thero {
position: relative;
border-radius: 8px;
overflow: hidden;
min-height: 80vh;
min-height: 80svh;
isolation: isolate;
display: flex;
flex-direction: column;
background: #d9d3c9; /* fallback warm tone */
}
/* Portrait, Tracy sits in the right column. Source image has her
right-of-center; cover + 95% x-position pushes her into the right
half while keeping the quiet door area on the left for the copy. */
.thero__image {
position: absolute;
inset: 0;
background-image: url("../../../assets/photos/tracy-outfit8-39.jpg");
background-size: cover;
background-position: 95% 28%;
background-repeat: no-repeat;
z-index: 1;
filter: contrast(1.02) saturate(1.02);
}
/* Soft warm vignette, no blend mode, no scan lines. Just depth at edges. */
.thero__wash {
position: absolute; inset: 0; z-index: 2;
background:
radial-gradient(ellipse 100% 90% at 50% 40%,
rgba(16,16,16,0) 35%,
rgba(16,16,16,0.25) 100%);
pointer-events: none;
}
/* Left-anchored readability gradient, darkens the left half so copy
reads over the door/light area while Tracy (right side) stays clear. */
.thero__lift {
position: absolute; inset: 0; z-index: 3;
background:
linear-gradient(100deg,
rgba(16,16,16,0.62) 0%,
rgba(16,16,16,0.40) 20%,
rgba(16,16,16,0.10) 40%,
rgba(16,16,16,0.0) 58%);
pointer-events: none;
}
/* Bottom band for the event widget / meta */
.thero__band {
position: absolute; inset: auto 0 0 0; z-index: 3;
height: 38%;
background: linear-gradient(180deg, rgba(16,16,16,0.0) 0%, rgba(16,16,16,0.55) 100%);
pointer-events: none;
}
/* Content layer, copy anchored far LEFT over the quiet door area so
Tracy (right) stays clear and the headline gets contrast from the
left-anchored scrim. */
.thero__body {
position: relative;
z-index: 5;
flex: 1;
display: grid;
grid-template-rows: 1fr auto;
grid-template-columns: 1fr;
padding: clamp(32px, 4.5vw, 56px);
color: var(--p-oatmeal);
}
.thero__inner {
max-width: 560px;
align-self: center;
justify-self: start;
text-align: left;
}
.thero__eyebrow {
font-family: 'Jhon Halend', 'Caveat', cursive;
font-weight: 400;
font-size: clamp(26px, 2.8vw, 36px);
line-height: 1;
color: var(--p-oatmeal);
margin: 0 0 18px;
opacity: 0.95;
text-shadow: 0 1px 12px rgba(0,0,0,0.2);
}
.thero__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(42px, 5.8vw, 84px);
line-height: 1.03;
letter-spacing: -0.01em;
color: var(--p-oatmeal);
margin: 0 0 14px;
text-shadow: 0 2px 20px rgba(0,0,0,0.25);
max-width: 100%;
overflow-wrap: break-word;
word-break: break-word;
}
.thero__title em { font-family: var(--f-serif-italic); font-style: italic; }
.thero__sub {
font-family: var(--f-sans);
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.65;
color: var(--p-oatmeal);
opacity: 0.92;
max-width: 44ch;
margin: 0 0 28px;
}
.thero__sub em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.thero__ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.thero__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.thero__cta--primary {
background: var(--p-oatmeal);
color: var(--p-charcoal);
border: 1px solid var(--p-oatmeal);
}
.thero__cta--primary:hover {
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border-color: var(--p-ffb-dark);
transform: translateY(-1px);
}
.thero__cta--ghost {
background: transparent;
color: var(--p-oatmeal);
border: 1px solid rgba(246,244,241,0.5);
}
.thero__cta--ghost:hover { border-color: var(--p-oatmeal); transform: translateY(-1px); }
/* Bottom row: signature + event widget */
.thero__bottom {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 24px;
padding-top: 24px;
}
.thero__sig {
font-family: 'Jhon Halend', 'Caveat', cursive;
font-weight: 400;
font-size: clamp(26px, 2.6vw, 34px);
line-height: 1;
color: var(--p-oatmeal);
opacity: 0.92;
margin: 0;
text-shadow: 0 1px 10px rgba(0,0,0,0.25);
}
.thero__meta {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--p-oatmeal);
opacity: 0.7;
margin: 6px 0 0;
}
.thero__meta span + span::before { content: "·"; margin: 0 10px; opacity: 0.6; }
/* -------- INLINE EVENT WIDGET (Tracy-voice, sits on the hero's bottom-right) -------- */
.tew {
width: 310px;
border-radius: 12px;
overflow: hidden;
background: rgba(16,16,16,0.72);
color: var(--p-oatmeal);
box-shadow: 0 12px 28px rgba(0,0,0,0.35);
cursor: pointer;
transition: transform .3s ease, box-shadow .3s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(246,244,241,0.1);
text-decoration: none;
display: block;
}
.tew:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,0.4); }
.tew__label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 14px 6px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-oatmeal);
}
.tew__label::before {
content: "";
width: 6px; height: 6px; border-radius: 50%;
background: var(--p-sage);
box-shadow: 0 0 0 0 rgba(110,142,119,0.6);
animation: tewBlink 1.8s ease-in-out infinite;
}
@keyframes tewBlink {
0%, 100% { box-shadow: 0 0 0 0 rgba(110,142,119,0.6); }
50% { box-shadow: 0 0 0 6px rgba(110,142,119,0); }
}
.tew__thumb {
position: relative;
aspect-ratio: 16 / 9;
background: url("../../../assets/photos/tracy-outfit8-49.jpg") center 25% / cover;
margin: 0 10px 10px;
border-radius: 8px;
overflow: hidden;
}
.tew__thumb::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(16,16,16,0) 40%, rgba(16,16,16,0.7) 100%);
}
.tew__caption {
position: absolute;
left: 10px; bottom: 10px;
z-index: 2;
font-family: var(--f-serif-display);
font-size: 14px;
font-weight: 400;
line-height: 1.1;
color: var(--p-oatmeal);
max-width: 62%;
}
.tew__caption em { font-family: var(--f-serif-italic); font-style: italic; }
.tew__watch {
position: absolute;
right: 10px; bottom: 10px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px 6px 10px;
border-radius: var(--r-pill);
background: rgba(246,244,241,0.94);
color: var(--p-charcoal);
font-family: var(--f-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* -------- MOBILE -------- */
@media (max-width: 900px) {
.tnav__links { display: none; }
.tnav { padding-bottom: 14px; grid-template-columns: auto 1fr auto; min-width: 0; }
.tnav__cta { padding: 9px 16px; letter-spacing: 0.14em; font-size: 10.5px; }
}
@media (max-width: 820px) {
.tpage { padding: 10px; }
.thero {
min-height: 90vh;
border-radius: 6px;
}
/* Mobile: cover + right-pulled position keeps her in frame. */
.thero__image {
background-size: cover;
background-position: 90% 24%;
}
/* Stronger scrim on mobile so the hero type reads clearly over the portrait. */
.thero__lift {
background: linear-gradient(180deg,
rgba(16,16,16,0.45) 0%,
rgba(16,16,16,0.20) 28%,
rgba(16,16,16,0.25) 50%,
rgba(16,16,16,0.70) 78%,
rgba(16,16,16,0.90) 100%);
}
.thero__inner { justify-self: stretch; }
.thero__band { display: none; }
.thero__body {
padding: 22px 18px;
grid-template-rows: 1fr auto;
min-width: 0;
}
.thero__inner {
align-self: end;
justify-self: stretch;
padding-bottom: 8px;
max-width: 100%;
min-width: 0;
width: 100%;
}
.thero__eyebrow { font-size: 24px; margin-bottom: 10px; }
.thero__title {
font-size: clamp(28px, 7vw, 42px);
hyphens: auto;
}
.thero__sub { font-size: 14px; margin-bottom: 22px; }
.thero__cta { padding: 12px 22px; font-size: 11px; }
.thero__bottom {
grid-template-columns: 1fr;
gap: 18px;
align-items: start;
}
.thero__sig { font-size: 24px; }
.tew { width: 100%; max-width: 360px; }
}
@media (max-width: 380px) {
.thero__title { font-size: 34px; }
.thero__ctas { flex-direction: column; align-items: stretch; }
.thero__cta { justify-content: center; }
}
```
```html
Peace, Profit, Presence.
A beautiful business , built by design.
Mentorship, mastermind and community for women building Freedom Filled® businesses, grounded in story, strategy, and spaciousness.
```
### hero.textonly-polished
Wrapper context: ``
```css
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-oatmeal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--p-aztek); color: var(--p-oatmeal);
padding: 10px 14px; z-index: 100;
font-family: var(--f-sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }
.hero {
min-height: 80vh;
min-height: 80svh;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 64px);
background: var(--p-oatmeal);
position: relative;
overflow: hidden;
isolation: isolate;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 10% 10%, rgba(110,142,119,0.06), transparent 40%),
radial-gradient(circle at 90% 90%, rgba(201,164,108,0.05), transparent 45%);
pointer-events: none;
}
.hero__inner {
max-width: 1060px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 1;
}
.hero__eyebrow,
.hero__rule,
.hero__title,
.hero__sub,
.hero__link {
opacity: 0;
transform: translateY(14px);
animation: tblogRise 900ms var(--ease-out-craft) forwards;
will-change: transform, opacity;
}
.hero__eyebrow { animation-delay: 160ms; }
.hero__rule { animation-delay: 280ms; }
.hero__title { animation-delay: 400ms; }
.hero__sub { animation-delay: 560ms; }
.hero__link { animation-delay: 720ms; }
@keyframes tblogRise {
from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero__eyebrow {
font-family: var(--f-script);
font-size: clamp(30px, 3.6vw, 44px);
color: var(--p-sage);
line-height: 1;
margin: 0 0 clamp(18px, 2.2vw, 28px);
}
.hero__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(52px, 8vw, 110px);
line-height: 0.98;
letter-spacing: -0.025em;
color: var(--p-charcoal);
margin: 0 0 clamp(18px, 2vw, 28px);
text-wrap: balance;
}
.hero__title em { font-family: var(--f-serif-italic); font-style: italic; }
.hero__sub {
font-family: var(--f-sans);
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.55;
color: var(--p-ink);
margin: 0 auto clamp(28px, 3vw, 40px);
max-width: 54ch;
text-wrap: pretty;
}
.hero__sub em { font-family: var(--f-serif-italic); font-style: italic; }
.hero__link {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 4px 2px;
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--p-aztek);
text-decoration: none;
border-bottom: 1px solid var(--p-aztek);
transition:
gap 260ms var(--ease-out-craft),
color 200ms var(--ease-out-craft),
border-color 200ms var(--ease-out-craft),
transform 180ms var(--ease-out-craft);
}
.hero__link:hover {
gap: 18px;
color: var(--p-sage);
border-bottom-color: var(--p-sage);
}
.hero__link:active { transform: translateY(1px); }
.hero__link:focus-visible {
outline: 2px solid var(--p-aztek);
outline-offset: 6px;
border-radius: 2px;
}
.hero__link svg {
width: 14px; height: 14px;
transition: transform 260ms var(--ease-out-craft);
}
.hero__link:hover svg { transform: translateX(3px); }
.hero__rule {
width: 44px;
height: 1px;
background: var(--p-aztek);
opacity: 0.4;
margin: 0 auto clamp(24px, 3vw, 36px);
transform-origin: center;
}
@media (max-width: 820px) {
.hero { min-height: 70vh; }
}
@media (max-width: 430px) {
.hero { padding: 72px 20px; }
.hero__title { font-size: clamp(44px, 12vw, 64px); line-height: 1; }
}
@media (max-width: 380px) {
.hero__title { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.hero__eyebrow,
.hero__rule,
.hero__title,
.hero__sub,
.hero__link {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.hero__link:hover svg { transform: none; }
}
```
```html
Skip to posts
The blog.
Stories, strategy, and the work of building a business you love .
Twelve years of building, teaching, and learning, shared one essay at a time. Written by me , for the women doing it their own way.
Read the latest
```
### hero.textonly
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-oatmeal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
.hero {
min-height: 80vh;
min-height: 80svh;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 64px);
background: var(--p-oatmeal);
position: relative;
overflow: hidden;
}
/* Subtle texture at the edges, editorial feel without noise */
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 10% 10%, rgba(110,142,119,0.05), transparent 40%),
radial-gradient(circle at 90% 90%, rgba(201,164,108,0.04), transparent 45%);
pointer-events: none;
}
.hero__inner {
max-width: 1060px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 1;
}
.hero__eyebrow {
font-family: var(--f-script);
font-size: clamp(30px, 3.6vw, 44px);
color: var(--p-sage);
line-height: 1;
margin: 0 0 clamp(18px, 2.2vw, 28px);
}
.hero__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(52px, 8vw, 110px);
line-height: 0.98;
letter-spacing: -0.025em;
color: var(--p-charcoal);
margin: 0 0 clamp(18px, 2vw, 28px);
}
.hero__title em { font-family: var(--f-serif-italic); font-style: italic; }
.hero__sub {
font-family: var(--f-sans);
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.55;
color: var(--p-ink);
margin: 0 auto clamp(28px, 3vw, 40px);
max-width: 54ch;
}
.hero__sub em { font-family: var(--f-serif-italic); font-style: italic; }
.hero__link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--p-aztek);
text-decoration: none;
border-bottom: 1px solid var(--p-aztek);
padding-bottom: 4px;
transition: gap .25s ease, color .2s ease, border-color .2s ease;
}
.hero__link:hover {
gap: 16px;
color: var(--p-sage);
border-bottom-color: var(--p-sage);
}
.hero__link svg { width: 14px; height: 14px; }
.hero__rule {
width: 44px;
height: 1px;
background: var(--p-aztek);
opacity: 0.4;
margin: 0 auto clamp(24px, 3vw, 36px);
}
@media (max-width: 820px) {
.hero { min-height: 70vh; }
}
@media (max-width: 430px) {
.hero { padding: 72px 20px; }
.hero__title { font-size: clamp(44px, 12vw, 64px); line-height: 1; }
}
```
```html
The blog.
Stories, strategy, and the work of building a business you love .
Twelve years of building, teaching, and learning, shared one essay at a time. Written by me , for the women doing it their own way.
Read the latest
```
---
## image-grid · 3 variants
### Shared CSS · `components/image-grid/image-grid.css`
```css
/* Image Grid, bento-style layout for galleries and about pages */
.image-grid {
background: var(--surface-canvas);
padding: var(--sp-9) var(--sp-7);
}
.image-grid--elevated {
background: var(--surface-elevated);
}
.image-grid__inner {
max-width: 1100px;
margin: 0 auto;
}
.image-grid__header {
margin: 0 0 var(--sp-7) 0;
}
.image-grid__header--center {
text-align: center;
}
.image-grid__eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: var(--w-medium);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0 0 var(--sp-3) 0;
}
.image-grid__title {
font-family: var(--f-serif-display);
font-weight: var(--w-regular);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--ink-heading);
margin: 0;
}
.image-grid__title em { font-family: var(--f-serif-italic); font-style: italic; }
/* ============================================================ */
/* VARIANT: BENTO, asymmetric grid, mixed sizes */
/* ============================================================ */
.image-grid__bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: var(--sp-4);
}
.image-grid__cell {
border-radius: var(--r-lg);
overflow: hidden;
position: relative;
background: var(--surface-elevated);
}
.image-grid__cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.image-grid__cell:hover img {
transform: scale(1.04);
}
.image-grid__cell--wide { grid-column: span 2; }
.image-grid__cell--tall { grid-row: span 2; }
.image-grid__cell--large { grid-column: span 2; grid-row: span 2; }
.image-grid__cell-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--sp-4) var(--sp-5);
background: linear-gradient(transparent, rgba(16,16,16,0.6));
color: var(--p-white);
opacity: 0;
transition: opacity 0.3s ease;
}
.image-grid__cell:hover .image-grid__cell-overlay {
opacity: 1;
}
.image-grid__cell-label {
font-family: var(--f-sans);
font-size: 13px;
font-weight: var(--w-medium);
margin: 0;
}
.image-grid__cell-sub {
font-family: var(--f-sans);
font-size: 11px;
color: rgba(255,255,255,0.7);
margin: 4px 0 0 0;
}
@media (max-width: 820px) {
.image-grid__bento {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 180px;
}
}
@media (max-width: 500px) {
.image-grid__bento {
grid-template-columns: 1fr;
grid-auto-rows: 220px;
}
.image-grid__cell--wide,
.image-grid__cell--tall,
.image-grid__cell--large {
grid-column: span 1;
grid-row: span 1;
}
}
/* ============================================================ */
/* VARIANT: MASONRY, equal columns, natural height */
/* ============================================================ */
.image-grid__masonry {
columns: 3;
column-gap: var(--sp-4);
}
.image-grid__masonry .image-grid__cell {
break-inside: avoid;
margin-bottom: var(--sp-4);
border-radius: var(--r-lg);
}
.image-grid__masonry .image-grid__cell img {
height: auto;
}
@media (max-width: 820px) { .image-grid__masonry { columns: 2; } }
@media (max-width: 500px) { .image-grid__masonry { columns: 1; } }
```
### image-grid.bento
Wrapper context: ``
```html
Bali Retreat
Freedom Filled® Mastermind
Coral Sea Retreat
October 2022
```
### image-grid.masonry
Wrapper context: ``
```html
```
### image-grid.showcase
```css
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; }
.brand-label {
position: sticky; top: 0; z-index: 10;
background: var(--p-charcoal); color: var(--p-oatmeal);
font-family: var(--f-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.2em; text-transform: uppercase;
padding: 10px 24px;
display: flex; justify-content: space-between;
}
```
```html
BENTO, asymmetric gallery grid class="image-grid__bento"
Bali Retreat 2025
Freedom Filled® Mastermind
Coral Sea Retreat
October 2022
MASONRY, natural height columns class="image-grid__masonry"
```
---
## navigation · 2 variants
### Shared CSS · `components/navigation/navigation.css`
```css
/* Navigation component, pure semantic tokens */
.nav {
position: sticky;
top: 0;
z-index: 50;
width: 100%;
background: var(--surface-canvas);
border-bottom: 1px solid var(--border-hairline);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
}
.nav__inner {
max-width: 1280px;
margin: 0 auto;
padding: var(--sp-4) var(--sp-5);
display: flex;
align-items: center;
gap: var(--sp-6);
}
.nav__logo {
display: block;
height: 30px;
width: auto;
flex: 0 0 auto;
}
.nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: var(--sp-1);
flex: 1;
justify-content: center;
}
.nav__item {
position: relative;
}
.nav__trigger {
font-family: var(--f-sans);
font-size: var(--s-sm);
font-weight: var(--w-medium);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-mute);
background: transparent;
border: 0;
padding: 10px 16px;
border-radius: var(--r-pill);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color 0.2s ease, background 0.2s ease;
text-decoration: none;
}
.nav__trigger:hover,
.nav__trigger:focus-visible,
.nav__item[data-open="true"] .nav__trigger {
color: var(--ink-heading);
background: rgba(16, 16, 16, 0.05);
}
.nav__chevron {
width: 14px;
height: 14px;
transition: transform 0.25s ease;
}
.nav__item[data-open="true"] .nav__chevron {
transform: rotate(180deg);
}
.nav__panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
background: var(--surface-canvas);
border: 1px solid var(--border-hairline);
border-radius: var(--r-lg);
padding: var(--sp-5);
box-shadow: 0 20px 48px rgba(16, 16, 16, 0.08);
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity 0.22s ease, transform 0.22s ease;
display: flex;
gap: var(--sp-7);
min-width: 480px;
}
.nav__item[data-align="right"] .nav__panel {
left: auto;
right: 0;
}
.nav__item[data-align="center"] .nav__panel {
left: 50%;
transform: translateX(-50%) translateY(-6px);
}
.nav__item[data-align="center"][data-open="true"] .nav__panel {
transform: translateX(-50%) translateY(0);
}
.nav__item[data-open="true"] .nav__panel {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.nav__group-title {
font-family: var(--f-sans);
font-size: 11px;
font-weight: var(--w-medium);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0 0 var(--sp-4) 0;
}
.nav__sub-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sp-4);
min-width: 260px;
}
.nav__sub-link {
display: block;
text-decoration: none;
color: var(--ink-heading);
border-left: 1px solid transparent;
padding: 2px 0 2px var(--sp-4);
margin-left: calc(var(--sp-4) * -1);
transition: border-color 0.2s ease, padding-left 0.2s ease;
}
.nav__sub-link:hover {
border-left-color: var(--accent);
}
.nav__sub-label {
display: block;
font-family: var(--f-serif-display);
font-size: 18px;
font-weight: var(--w-regular);
color: var(--ink-heading);
margin: 0;
line-height: 1.25;
letter-spacing: -0.01em;
}
.nav__sub-label em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.nav__sub-desc {
display: block;
font-family: var(--f-sans);
font-size: 12px;
color: var(--ink-mute);
margin: 3px 0 0 0;
line-height: 1.4;
letter-spacing: 0.02em;
}
.nav__cta {
flex: 0 0 auto;
display: inline-block;
background: var(--accent);
color: var(--accent-on);
padding: 10px 20px;
font-family: var(--f-sans);
font-size: 12px;
font-weight: var(--w-medium);
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
border-radius: var(--r-pill);
transition: background 0.2s ease;
}
.nav__cta:hover {
background: var(--accent-hover);
}
.nav__burger {
display: none;
flex: 0 0 auto;
margin-left: auto;
background: transparent;
border: 0;
padding: 8px;
cursor: pointer;
color: var(--ink-heading);
}
.nav__burger svg {
width: 24px;
height: 24px;
}
@media (max-width: 900px) {
.nav__list { display: none; }
.nav__cta { display: none; }
.nav__burger { display: flex; align-items: center; }
}
/* --- Mobile drawer --- */
.nav__drawer {
position: fixed;
inset: 0;
z-index: 100;
background: var(--surface-canvas);
display: flex;
flex-direction: column;
padding: var(--sp-5);
transform: translateY(-100%);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav__drawer[data-open="true"] {
transform: translateY(0);
}
.nav__drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--sp-7);
}
.nav__drawer-close {
background: transparent;
border: 0;
padding: 8px;
cursor: pointer;
color: var(--ink-heading);
}
.nav__drawer-close svg {
width: 24px;
height: 24px;
}
.nav__drawer-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sp-5);
flex: 1;
}
.nav__drawer-item {
border-bottom: 1px solid var(--border-hairline);
padding-bottom: var(--sp-4);
}
.nav__drawer-link {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--f-serif-display);
font-size: 28px;
font-weight: var(--w-regular);
color: var(--ink-heading);
text-decoration: none;
letter-spacing: -0.01em;
cursor: pointer;
padding: 0;
background: transparent;
border: 0;
width: 100%;
text-align: left;
}
.nav__drawer-link em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.nav__drawer-item[data-open="true"] .nav__drawer-link svg {
transform: rotate(180deg);
}
.nav__drawer-link svg {
width: 16px;
height: 16px;
transition: transform 0.25s ease;
}
.nav__drawer-sub {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding-left: var(--sp-4);
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.nav__drawer-item[data-open="true"] .nav__drawer-sub {
max-height: 1000px;
margin-top: var(--sp-4);
}
.nav__drawer-sub a {
display: block;
font-family: var(--f-serif-display);
font-size: 18px;
color: var(--ink-heading);
text-decoration: none;
}
.nav__drawer-sub a em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.nav__drawer-sub-desc {
display: block;
font-family: var(--f-sans);
font-size: 12px;
color: var(--ink-mute);
margin-top: 2px;
}
.nav__drawer-cta {
margin-top: var(--sp-5);
background: var(--accent);
color: var(--accent-on);
padding: 18px var(--sp-5);
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 13px;
font-weight: var(--w-medium);
letter-spacing: 0.15em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
}
@media (min-width: 901px) {
.nav__drawer { display: none; }
}
```
### navigation.overlay-menu
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-cream);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
/* ---- Official T brandmark, inline so it inherits color ---- */
.t-mark {
width: auto;
fill: currentColor;
display: block;
}
.t-mark--bar { height: 28px; }
.t-mark--lg { height: 40px; }
/* -------- TOP BAR -------- */
.mnav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 40;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 22px 36px;
gap: 24px;
color: var(--p-charcoal);
transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.mnav--dark { color: var(--p-oatmeal); }
.mnav--scrolled {
background: var(--p-oatmeal);
color: var(--p-charcoal);
box-shadow: 0 1px 0 rgba(16,16,16,0.06);
}
.mnav__group {
display: flex;
gap: 32px;
align-items: center;
}
.mnav__group--right { justify-content: flex-end; }
.mnav__link {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
padding: 6px 2px;
position: relative;
}
.mnav__link::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 2px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform .3s ease;
}
.mnav__link:hover::after { transform: scaleX(1); }
.mnav__mark {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: inherit;
}
.mnav__toggle {
background: none;
border: 0;
cursor: pointer;
padding: 10px;
margin-left: 8px;
color: inherit;
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
-webkit-tap-highlight-color: transparent;
}
.mnav__toggle-icon {
display: inline-block;
width: 24px;
height: 10px;
position: relative;
}
.mnav__toggle-icon::before,
.mnav__toggle-icon::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 1.5px;
background: currentColor;
}
.mnav__toggle-icon::before { top: 0; }
.mnav__toggle-icon::after { bottom: 0; }
/* -------- FULL-SCREEN OVERLAY -------- */
.mnav__overlay {
position: fixed;
inset: 0;
background: var(--p-oatmeal);
color: var(--p-charcoal);
z-index: 60;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .35s ease, transform .35s ease, visibility .35s;
display: grid;
grid-template-rows: auto 1fr auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body.mnav-open .mnav__overlay {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
body.mnav-open { overflow: hidden; }
.mnav__overlay-top {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 22px 36px;
}
.mnav__close {
background: none;
border: 0;
cursor: pointer;
padding: 10px;
color: var(--p-ffb-dark);
justify-self: end;
width: 44px; height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
-webkit-tap-highlight-color: transparent;
}
.mnav__close::before,
.mnav__close::after {
content: "";
position: absolute;
width: 22px; height: 1.5px;
background: currentColor;
}
.mnav__close::before { transform: rotate(45deg); }
.mnav__close::after { transform: rotate(-45deg); }
.mnav__overlay-body {
display: grid;
grid-template-columns: 1.1fr 1.1fr 0.9fr;
gap: 64px;
padding: 48px 80px 48px;
align-self: center;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
.mnav__primary {
display: flex;
flex-direction: column;
}
.mnav__primary a {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(36px, 4.8vw, 60px);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--p-charcoal);
text-decoration: none;
padding: 18px 0;
border-bottom: 1px solid rgba(16,16,16,0.12);
transition: color .2s ease, transform .25s ease;
display: inline-block;
transform-origin: left;
}
.mnav__primary a em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.mnav__primary a:hover {
color: var(--p-ffb-dark);
transform: translateX(6px);
}
/* ---- Program hover colors (brand-specific) ---- */
.mnav__primary a.prog {
background-image: linear-gradient(90deg, currentColor, currentColor);
background-size: 200% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: currentColor;
transition: background-position .9s cubic-bezier(.4,0,.2,1),
color .25s ease,
-webkit-text-fill-color .25s ease,
transform .25s ease;
}
.mnav__primary a.prog:hover,
.mnav__primary a.prog:focus-visible,
.mnav__primary a.prog:active {
-webkit-text-fill-color: transparent;
color: transparent;
background-position: 0 0;
transform: translateX(6px);
}
/* FRESH → 5-pillar rainbow (Copper Red · Calico · Laurel · Quicksand · Onyx) */
.mnav__primary a.prog-fresh {
background-image: linear-gradient(90deg,
#c07152 0%,
#d7ad82 25%,
#748d78 50%,
#c69b8b 75%,
#101010 100%);
}
/* Workshop → soft green gradient */
.mnav__primary a.prog-workshop {
background-image: linear-gradient(90deg,
#6e8e77 0%,
#1e3735 50%,
#6e8e77 100%);
}
/* FFB → deep aztek green */
.mnav__primary a.prog-ffb {
background-image: linear-gradient(90deg,
#1e3735 0%,
#2c5350 50%,
#1e3735 100%);
}
/* FFM → gold gradient with translucency */
.mnav__primary a.prog-ffm {
background-image: linear-gradient(90deg,
#7b623c 0%,
#c9a46c 50%,
#7b623c 100%);
}
.mnav__primary a.prog-ffm:hover,
.mnav__primary a.prog-ffm:focus-visible {
opacity: 0.94;
}
/* Reduce-motion: no animated sweep */
@media (prefers-reduced-motion: reduce) {
.mnav__primary a.prog { transition: color .2s ease, -webkit-text-fill-color .2s ease, transform .2s ease; background-size: 100% 100%; background-position: 0 0; }
}
/* Touch devices (iOS / Android): no :hover, show the gradient text permanently */
@media (hover: none) {
.mnav__primary a.prog {
-webkit-text-fill-color: transparent;
color: transparent;
background-position: 0 0;
}
}
.mnav__secondary-group-title {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-mute);
margin: 0 0 12px;
}
.mnav__secondary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
align-content: start;
padding-top: 24px;
}
.mnav__secondary a {
font-family: var(--f-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--p-charcoal);
text-decoration: none;
padding: 6px 0;
transition: color .2s ease;
}
.mnav__secondary a:hover { color: var(--p-ffb-dark); }
.mnav__tagline {
font-family: var(--f-serif-display);
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.4;
margin: 0;
padding: 0 80px 48px;
text-align: right;
color: var(--p-charcoal);
}
.mnav__tagline em {
font-style: italic;
font-family: var(--f-serif-italic);
}
/* Empty canvas, only the nav is the component. The body fills
the preview viewport so the nav has somewhere to sit. */
body { background: var(--p-oatmeal); min-height: 100vh; }
/* -------- MOBILE -------- */
@media (max-width: 820px) {
.mnav {
padding: 14px 18px;
grid-template-columns: auto 1fr auto;
}
.mnav__group:not(.mnav__group--right) { display: none; }
.mnav__group--right .mnav__link { display: none; }
.mnav__toggle { margin-left: 0; padding: 8px; }
.mnav__toggle span:first-child { display: none; }
.mnav__toggle-icon { width: 26px; height: 12px; }
.mnav__overlay-top { padding: 14px 18px; }
.mnav__close { width: 44px; height: 44px; }
.mnav__overlay-body {
grid-template-columns: 1fr;
gap: 28px;
padding: 8px 24px 32px;
align-self: start;
}
.mnav__primary a {
font-size: clamp(34px, 10vw, 48px);
padding: 14px 0;
}
.mnav__secondary {
grid-template-columns: 1fr 1fr;
padding-top: 6px;
gap: 10px 16px;
}
.mnav__tagline {
padding: 0 24px 32px;
text-align: left;
font-size: 18px;
}
}
```
```html
Freedom Filled® Business for women building by design.
```
### navigation.sticky-mega-menu
Wrapper context: ``
```css
body {
margin: 0;
min-height: 100vh;
font-family: var(--f-sans);
background: var(--surface-canvas);
color: var(--ink-body);
-webkit-font-smoothing: antialiased;
}
```
```html
```
---
## next-steps · 1 variant
### next-steps.showcase
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-oatmeal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
.page { padding: clamp(24px, 4vw, 64px) clamp(16px, 4vw, 48px); }
.card {
background: var(--p-cream);
border-radius: 14px;
padding: clamp(40px, 5vw, 64px) clamp(24px, 5vw, 56px);
max-width: 820px;
margin: 0 auto;
border: 1px solid rgba(30,55,53,0.08);
}
.card__eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-aztek);
margin: 0 0 14px;
}
.card__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.06;
letter-spacing: -0.015em;
color: var(--p-charcoal);
margin: 0 0 10px;
}
.card__title em { font-family: var(--f-serif-italic); font-style: italic; }
.card__script {
font-family: var(--f-script);
font-size: 28px;
color: var(--p-sage);
margin: 0 0 40px;
line-height: 1;
}
.steps {
display: grid;
gap: 24px;
list-style: none;
padding: 0;
margin: 0;
}
.step {
display: grid;
grid-template-columns: 72px 1fr;
gap: 24px;
align-items: start;
padding: 20px 0;
border-top: 1px solid rgba(16,16,16,0.08);
}
.step:first-child { border-top: 0; padding-top: 0; }
.step__num {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: 56px;
line-height: 1;
color: var(--p-aztek);
letter-spacing: -0.02em;
opacity: 0.85;
}
.step__num em { font-family: var(--f-serif-italic); font-style: italic; }
.step__copy { min-width: 0; }
.step__title {
font-family: var(--f-sans);
font-size: 19px;
font-weight: 600;
line-height: 1.3;
color: var(--p-charcoal);
margin: 0 0 8px;
}
.step__title em { font-family: var(--f-serif-italic); font-style: italic; font-weight: 400; }
.step__desc {
font-family: var(--f-sans);
font-size: 15px;
line-height: 1.65;
color: var(--p-ink);
margin: 0 0 10px;
}
.step__link {
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--p-aztek);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
border-bottom: 1px solid var(--p-aztek);
padding-bottom: 2px;
transition: color .2s, border-color .2s;
}
.step__link:hover { color: var(--p-sage); border-bottom-color: var(--p-sage); }
.step__link svg { width: 12px; height: 12px; }
@media (max-width: 640px) {
.card__title { font-size: 28px; }
.step { grid-template-columns: 48px 1fr; gap: 16px; }
.step__num { font-size: 40px; }
.step__title { font-size: 17px; }
}
@media (max-width: 430px) {
.card { padding: 32px 22px; }
}
```
```html
Here's what to do now
Three simple steps .
Nothing complicated, lovely.
01
Save this page.
Bookmark this URL so you can come back anytime. Your download link lives here too, so you'll never have to hunt for it in your inbox.
02
Open the guide and actually read it.
Block out 20 minutes today, make a cup of tea, and work through it properly. This is not a "save for later" freebie, it's a "do it now" one.
Open the guide
03
Come meet the community.
Join the free Freedom Filled® Circle on Instagram. Say hi, tell me your biggest takeaway from the guide. I read every DM, lovely.
Find me on Instagram
```
---
## offer-stack · 6 variants
### offer-stack.bonus-cards-polished
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--f-sans); background: var(--p-oatmeal); color: var(--p-charcoal); -webkit-font-smoothing: antialiased; }
.page { padding: clamp(40px, 6vw, 96px) clamp(20px, 5vw, 64px); }
.bonus-stack__wrap {
max-width: 1100px;
margin: 0 auto;
}
.bonus-stack__heading {
text-align: center;
margin: 0 0 clamp(32px, 4vw, 56px);
}
.bonus-stack__eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--p-aztek);
margin: 0 0 14px;
}
.bonus-stack__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--p-charcoal);
margin: 0 auto;
max-width: 30ch;
}
.bonus-stack__title em { font-family: var(--f-serif-italic); font-style: italic; }
/* -------- BONUS CARD GRID -------- */
.bonus-stack__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(20px, 2.4vw, 32px);
}
.bonus-card {
position: relative;
background: var(--p-white);
border: 1px solid var(--border-hairline, rgba(16, 16, 16, 0.08));
border-radius: 14px;
padding: clamp(36px, 3.6vw, 52px) clamp(28px, 3vw, 44px);
box-shadow: 0 14px 32px -22px rgba(30, 55, 53, 0.18);
overflow: hidden;
}
/* Gold ribbon/seal, top-right corner. CSS-only, no SVG. */
.bonus-card__seal {
position: absolute;
top: 18px;
right: 18px;
width: 76px;
height: 76px;
border-radius: 50%;
background: linear-gradient(135deg, var(--p-gold-dark) 0%, var(--p-gold-mid) 100%);
color: var(--p-oatmeal);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 6px 16px -8px rgba(123, 98, 60, 0.55);
font-family: var(--f-sans);
line-height: 1.05;
letter-spacing: 0.04em;
}
.bonus-card__seal-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
display: block;
opacity: 0.85;
}
.bonus-card__seal-num {
font-family: var(--f-serif-italic);
font-style: italic;
font-size: 22px;
font-weight: 400;
margin-top: 2px;
display: block;
}
.bonus-card__eyebrow {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--p-mute);
margin: 0 0 14px;
max-width: calc(100% - 90px);
}
.bonus-card__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(26px, 2.6vw, 34px);
line-height: 1.12;
letter-spacing: -0.012em;
color: var(--p-aztek);
margin: 0 0 16px;
max-width: calc(100% - 90px);
}
.bonus-card__title em { font-family: var(--f-serif-italic); font-style: italic; }
.bonus-card__body {
font-family: var(--f-sans);
font-size: 15px;
line-height: 1.6;
color: var(--p-ink);
margin: 0;
}
@media (max-width: 820px) {
.bonus-stack__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.bonus-card__seal { width: 64px; height: 64px; top: 14px; right: 14px; }
.bonus-card__seal-num { font-size: 18px; }
.bonus-card__eyebrow, .bonus-card__title { max-width: calc(100% - 74px); }
}
```
```html
Plus, two bonuses
Two bonuses you get the day you save your seat.
Limited Time Bonus
The Webinar Conversion Calculator
Plug in your registration count, attend rate, and convert rate. See your launch revenue before you build the webinar. If the numbers don't work, change the offer, not the slides.
Limited Time Bonus
The Webinar Slide Map
A Google Slides template structured around the three foundations you build in the workshop. You leave the room with the working session done. You leave the desk with a slide framework already mapped.
```
### offer-stack.detailed-polished
Wrapper context: ``
```css
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--f-sans); background: var(--p-oatmeal); color: var(--p-charcoal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.page { padding: clamp(14px, 1.6vw, 24px); }
.stack {
background: var(--p-oatmeal);
border: 1px solid var(--border-hairline);
border-radius: 14px;
padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 64px);
max-width: 820px;
margin: 0 auto 32px;
position: relative;
overflow: hidden;
isolation: isolate;
transition: transform 300ms var(--ease-out-craft), box-shadow 300ms var(--ease-out-craft);
}
.stack::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 55% 40% at 50% 15%,
rgba(110, 142, 119, 0.08) 0%,
rgba(110, 142, 119, 0.0) 70%);
pointer-events: none;
z-index: 0;
}
.stack > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
.stack:hover {
box-shadow: 0 24px 56px -28px rgba(30, 55, 53, 0.2);
}
}
.stack__eyebrow,
.stack__title,
.stack__script,
.stack__rows,
.total,
.stack__cta-wrap {
opacity: 0;
transform: translateY(12px);
animation: osdRise 900ms var(--ease-out-craft) forwards;
}
.stack__eyebrow { animation-delay: 140ms; }
.stack__title { animation-delay: 280ms; }
.stack__script { animation-delay: 400ms; }
.stack__rows { animation-delay: 540ms; }
.total { animation-delay: 700ms; }
.stack__cta-wrap { animation-delay: 840ms; }
@keyframes osdRise {
from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.stack__eyebrow { font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--p-aztek); text-align: center; margin: 0 0 14px; }
.stack__title { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.015em; color: var(--p-charcoal); text-align: center; margin: 0 0 14px; text-wrap: balance; }
.stack__title em { font-family: var(--f-serif-italic); font-style: italic; }
.stack__script { font-family: var(--f-script); font-size: 28px; color: var(--p-sage); text-align: center; margin: 0 0 36px; line-height: 1; }
.stack__rows { display: grid; gap: 18px; margin-bottom: 32px; }
.row {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 20px;
padding: 18px 0;
border-bottom: 1px solid var(--border-hairline);
align-items: flex-start;
transition: transform 260ms var(--ease-out-craft);
}
.row:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
.row:hover { transform: translateX(4px); }
}
.row__icon {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--p-aztek);
color: var(--p-oatmeal);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 260ms var(--ease-out-craft), box-shadow 260ms var(--ease-out-craft);
box-shadow: 0 6px 16px -8px rgba(30, 55, 53, 0.55);
}
.row:hover .row__icon {
transform: scale(1.06);
box-shadow: 0 10px 22px -8px rgba(30, 55, 53, 0.65);
}
.row__icon svg { width: 18px; height: 18px; }
.row__copy { min-width: 0; }
.row__title { font-family: var(--f-sans); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--p-charcoal); margin: 0 0 4px; }
.row__title em { font-family: var(--f-serif-italic); font-style: italic; font-weight: 400; }
.row__desc { font-family: var(--f-sans); font-size: 14px; line-height: 1.55; color: var(--p-ink); margin: 0; text-wrap: pretty; }
.row__value { font-family: var(--f-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--p-sage); white-space: nowrap; padding-top: 3px; }
.total { text-align: center; padding: 24px 0 4px; border-top: 1px dashed var(--border-hairline); margin-bottom: 32px; }
.total__label { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--p-mute); margin: 0 0 6px; }
.total__value { font-family: var(--f-serif-display); font-size: 44px; font-weight: 400; line-height: 1; color: var(--p-aztek); margin: 0 0 6px; letter-spacing: -0.02em; }
.total__note { font-size: 13px; line-height: 1.5; color: var(--p-ink); margin: 0; }
.total__note strong { color: var(--p-charcoal); }
.stack__cta-wrap { text-align: center; }
.stack__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 36px;
border-radius: var(--r-pill);
background: var(--p-aztek);
color: var(--p-oatmeal);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
transition:
background 220ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft),
transform 120ms var(--ease-out-craft);
border: 1.5px solid var(--p-aztek);
box-shadow: 0 3px 14px -6px rgba(30, 55, 53, 0.4);
}
.stack__cta:hover {
background: var(--p-charcoal);
border-color: var(--p-charcoal);
box-shadow: 0 6px 20px -6px rgba(16,16,16,0.3);
}
.stack__cta:active { transform: scale(0.99); }
.stack__cta:focus-visible { outline: 2px solid var(--p-aztek); outline-offset: 3px; }
@media (max-width: 640px) {
.row { grid-template-columns: 36px 1fr; }
.row__value { grid-column: 1 / -1; padding-left: 56px; padding-top: 2px; letter-spacing: 0.1em; }
.stack__title { font-size: 28px; }
.total__value { font-size: 36px; }
}
@media (max-width: 430px) {
.stack { padding: 32px 20px; }
.stack__cta { width: 100%; justify-content: center; padding: 14px 20px; }
}
@media (prefers-reduced-motion: reduce) {
.stack__eyebrow,
.stack__title,
.stack__script,
.stack__rows,
.total,
.stack__cta-wrap {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.row:hover { transform: none; }
.row:hover .row__icon { transform: none; }
}
```
```html
Here's everything you get
Freedom Filled® Business Mentorship
Twelve months. Full support.
Live mentorship calls, twice a month
Real-time coaching with me and the FFB community. Bring your stuck points, leave with next actions.
$6,000 value
The Freedom Filled® Pathway curriculum
Self-paced video training library, with the exact frameworks I've used to build my business and every FFB member's.
$3,000 value
Private community with the whole cohort
A steady, encouraging group of right-fit women. No cliques, no pile-ons, just women building together.
$1,200 value
Guest expert masterclasses
Four sessions a year with specialists on launches, copywriting, funnels, and visibility.
$2,000 value
Templates, scripts, and swipe files
Every sales page, email sequence, and IG carousel I've used, ready for you to make your own.
$1,500 value
Quarterly strategy sprints
90-day planning cycles so you always know the next right move and the one after that.
$1,800 value
Accountability rhythm that actually works
Weekly check-ins, monthly wins reel, and a calendar built for busy women, not hustlers.
$900 value
Total value
$16,400+
Your investment today: $6,000 AUD or flexible payments from $550/month.
```
### offer-stack.detailed
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--f-sans); background: var(--p-oatmeal); color: var(--p-charcoal); -webkit-font-smoothing: antialiased; }
.page { padding: clamp(14px, 1.6vw, 24px); }
.stack { background: var(--p-oatmeal); border: 1px solid var(--border-hairline); border-radius: 14px; padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 64px); max-width: 820px; margin: 0 auto 32px; }
.stack__eyebrow { font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--p-aztek); text-align: center; margin: 0 0 14px; }
.stack__title { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.015em; color: var(--p-charcoal); text-align: center; margin: 0 0 14px; }
.stack__title em { font-family: var(--f-serif-italic); font-style: italic; }
.stack__script { font-family: var(--f-script); font-size: 28px; color: var(--p-sage); text-align: center; margin: 0 0 36px; line-height: 1; }
.stack__rows { display: grid; gap: 18px; margin-bottom: 32px; }
.row { display: grid; grid-template-columns: 40px 1fr auto; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--border-hairline); align-items: flex-start; }
.row:last-child { border-bottom: 0; }
.row__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--p-aztek); color: var(--p-oatmeal); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.row__icon svg { width: 18px; height: 18px; }
.row__copy { min-width: 0; }
.row__title { font-family: var(--f-sans); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--p-charcoal); margin: 0 0 4px; }
.row__title em { font-family: var(--f-serif-italic); font-style: italic; font-weight: 400; }
.row__desc { font-family: var(--f-sans); font-size: 14px; line-height: 1.55; color: var(--p-ink); margin: 0; }
.row__value { font-family: var(--f-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--p-sage); white-space: nowrap; padding-top: 3px; }
.total { text-align: center; padding: 24px 0 4px; border-top: 1px dashed var(--border-hairline); margin-bottom: 32px; }
.total__label { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--p-mute); margin: 0 0 6px; }
.total__value { font-family: var(--f-serif-display); font-size: 44px; font-weight: 400; line-height: 1; color: var(--p-aztek); margin: 0 0 6px; letter-spacing: -0.02em; }
.total__note { font-size: 13px; line-height: 1.5; color: var(--p-ink); margin: 0; }
.total__note strong { color: var(--p-charcoal); }
.stack__cta-wrap { text-align: center; }
.stack__cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; border-radius: var(--r-pill); background: var(--p-aztek); color: var(--p-oatmeal); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s; border: 1.5px solid var(--p-aztek); }
.stack__cta:hover { background: var(--p-charcoal); border-color: var(--p-charcoal); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(16,16,16,0.2); }
@media (max-width: 640px) {
.row { grid-template-columns: 36px 1fr; }
.row__value { grid-column: 1 / -1; padding-left: 56px; padding-top: 2px; letter-spacing: 0.1em; }
.stack__title { font-size: 28px; }
.total__value { font-size: 36px; }
}
@media (max-width: 430px) {
.stack { padding: 32px 20px; }
.stack__cta { width: 100%; justify-content: center; padding: 14px 20px; }
}
```
```html
Here's everything you get
Freedom Filled® Business Mentorship
Twelve months. Full support.
Live mentorship calls, twice a month
Real-time coaching with me and the FFB community. Bring your stuck points, leave with next actions.
$6,000 value
The Freedom Filled® Pathway curriculum
Self-paced video training library, with the exact frameworks I've used to build my business and every FFB member's.
$3,000 value
Private community with the whole cohort
A steady, encouraging group of right-fit women. No cliques, no pile-ons, just women building together.
$1,200 value
Guest expert masterclasses
Four sessions a year with specialists on launches, copywriting, funnels, and visibility.
$2,000 value
Templates, scripts, and swipe files
Every sales page, email sequence, and IG carousel I've used, ready for you to make your own.
$1,500 value
Quarterly strategy sprints
90-day planning cycles so you always know the next right move and the one after that.
$1,800 value
Accountability rhythm that actually works
Weekly check-ins, monthly wins reel, and a calendar built for busy women, not hustlers.
$900 value
Total value
$16,400+
Your investment today: $6,000 AUD or flexible payments from $550/month.
```
### offer-stack.minimal-polished
Wrapper context: ``
```css
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--f-sans); background: var(--p-oatmeal); color: var(--p-charcoal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.page { padding: clamp(14px, 1.6vw, 24px); }
.stack {
background: var(--p-cream);
border: 0;
border-radius: 14px;
padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 64px);
max-width: 820px;
margin: 0 auto 32px;
position: relative;
overflow: hidden;
isolation: isolate;
transition: transform 300ms var(--ease-out-craft), box-shadow 300ms var(--ease-out-craft);
}
.stack::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 55% 45% at 50% 20%,
rgba(110, 142, 119, 0.08) 0%,
rgba(110, 142, 119, 0.0) 70%);
pointer-events: none;
z-index: 0;
}
.stack > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
.stack:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px -20px rgba(30, 55, 53, 0.2);
}
}
.stack__eyebrow,
.stack__title,
.stack__rows,
.stack__cta-wrap {
opacity: 0;
transform: translateY(12px);
animation: osmRise 900ms var(--ease-out-craft) forwards;
}
.stack__eyebrow { animation-delay: 140ms; }
.stack__title { animation-delay: 280ms; }
.stack__rows { animation-delay: 440ms; }
.stack__cta-wrap { animation-delay: 620ms; }
@keyframes osmRise {
from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.stack__eyebrow { font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--p-aztek); text-align: center; margin: 0 0 14px; }
.stack__title { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.015em; color: var(--p-charcoal); text-align: center; margin: 0 0 14px; text-wrap: balance; }
.stack__title em { font-family: var(--f-serif-italic); font-style: italic; }
.stack__rows { display: grid; gap: 10px; margin-bottom: 32px; }
.row {
display: grid;
grid-template-columns: 32px 1fr;
gap: 20px;
padding: 12px 0;
border-bottom: 1px solid rgba(16,16,16,0.06);
align-items: flex-start;
}
.row:last-child { border-bottom: 0; }
.row__icon {
width: 32px; height: 32px;
border-radius: 50%;
background: transparent;
color: var(--p-aztek);
border: 1.5px solid var(--p-aztek);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 200ms var(--ease-out-craft), color 200ms var(--ease-out-craft);
}
.row:hover .row__icon {
background: var(--p-aztek);
color: var(--p-oatmeal);
}
.row__icon svg { width: 18px; height: 18px; }
.row__copy { min-width: 0; }
.row__title { font-family: var(--f-sans); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--p-charcoal); margin: 0 0 4px; }
.row__title em { font-family: var(--f-serif-italic); font-style: italic; font-weight: 400; }
.stack__cta-wrap { text-align: center; }
.stack__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 36px;
border-radius: var(--r-pill);
background: var(--p-aztek);
color: var(--p-oatmeal);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
transition:
background 220ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft),
transform 120ms var(--ease-out-craft);
border: 1.5px solid var(--p-aztek);
box-shadow: 0 3px 14px -6px rgba(30, 55, 53, 0.4);
}
.stack__cta:hover {
background: var(--p-charcoal);
border-color: var(--p-charcoal);
box-shadow: 0 6px 20px -6px rgba(16,16,16,0.3);
}
.stack__cta:active { transform: scale(0.99); }
.stack__cta:focus-visible { outline: 2px solid var(--p-aztek); outline-offset: 3px; }
@media (max-width: 640px) { .stack__title { font-size: 28px; } }
@media (max-width: 430px) {
.stack { padding: 32px 20px; }
.stack__cta { width: 100%; justify-content: center; padding: 14px 20px; }
}
@media (prefers-reduced-motion: reduce) {
.stack__eyebrow,
.stack__title,
.stack__rows,
.stack__cta-wrap {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
```
```html
Inside the intensive
What you'll walk away with.
Your Million Dollar Message™ in one clear sentence
The messaging framework I use with every FFB mentee
A workbook you'll actually use, not save and forget
Lifetime access to the recording
Clarity you didn't have yesterday
```
### offer-stack.minimal
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--f-sans); background: var(--p-oatmeal); color: var(--p-charcoal); -webkit-font-smoothing: antialiased; }
.page { padding: clamp(14px, 1.6vw, 24px); }
.stack { background: var(--p-cream); border: 0; border-radius: 14px; padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 64px); max-width: 820px; margin: 0 auto 32px; }
.stack__eyebrow { font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--p-aztek); text-align: center; margin: 0 0 14px; }
.stack__title { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.015em; color: var(--p-charcoal); text-align: center; margin: 0 0 14px; }
.stack__title em { font-family: var(--f-serif-italic); font-style: italic; }
.stack__rows { display: grid; gap: 10px; margin-bottom: 32px; }
.row { display: grid; grid-template-columns: 32px 1fr; gap: 20px; padding: 12px 0; border-bottom: 1px solid rgba(16,16,16,0.06); align-items: flex-start; }
.row:last-child { border-bottom: 0; }
.row__icon { width: 32px; height: 32px; border-radius: 50%; background: transparent; color: var(--p-aztek); border: 1.5px solid var(--p-aztek); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.row__icon svg { width: 18px; height: 18px; }
.row__copy { min-width: 0; }
.row__title { font-family: var(--f-sans); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--p-charcoal); margin: 0 0 4px; }
.row__title em { font-family: var(--f-serif-italic); font-style: italic; font-weight: 400; }
.stack__cta-wrap { text-align: center; }
.stack__cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; border-radius: var(--r-pill); background: var(--p-aztek); color: var(--p-oatmeal); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s; border: 1.5px solid var(--p-aztek); }
.stack__cta:hover { background: var(--p-charcoal); border-color: var(--p-charcoal); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(16,16,16,0.2); }
@media (max-width: 640px) { .stack__title { font-size: 28px; } }
@media (max-width: 430px) {
.stack { padding: 32px 20px; }
.stack__cta { width: 100%; justify-content: center; padding: 14px 20px; }
}
```
```html
Inside the intensive
What you'll walk away with.
Your Million Dollar Message™ in one clear sentence
The messaging framework I use with every FFB mentee
A workbook you'll actually use, not save and forget
Lifetime access to the recording
Clarity you didn't have yesterday
```
### offer-stack.showcase
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-oatmeal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
.page { padding: clamp(14px, 1.6vw, 24px); }
.section-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-mute);
margin: 0 0 8px;
padding: 10px 12px;
}
/* -------- STACK SHELL -------- */
.stack {
background: var(--p-oatmeal);
border: 1px solid var(--border-hairline);
border-radius: 14px;
padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 64px);
max-width: 820px;
margin: 0 auto 32px;
}
.stack--minimal { background: var(--p-cream); border: 0; }
.stack__eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-aztek);
text-align: center;
margin: 0 0 14px;
}
.stack__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--p-charcoal);
text-align: center;
margin: 0 0 14px;
}
.stack__title em { font-family: var(--f-serif-italic); font-style: italic; }
.stack__script {
font-family: var(--f-script);
font-size: 28px;
color: var(--p-sage);
text-align: center;
margin: 0 0 36px;
line-height: 1;
}
/* -------- ROWS -------- */
.stack__rows { display: grid; gap: 18px; margin-bottom: 32px; }
.stack--minimal .stack__rows { gap: 10px; }
.row {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 20px;
padding: 18px 0;
border-bottom: 1px solid var(--border-hairline);
align-items: flex-start;
}
.row:last-child { border-bottom: 0; }
.stack--minimal .row {
grid-template-columns: 32px 1fr;
padding: 12px 0;
border-color: rgba(16,16,16,0.06);
}
.row__icon {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--p-aztek);
color: var(--p-oatmeal);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.stack--minimal .row__icon {
width: 32px; height: 32px;
background: transparent;
color: var(--p-aztek);
border: 1.5px solid var(--p-aztek);
}
.row__icon svg { width: 18px; height: 18px; }
.row__copy { min-width: 0; }
.row__title {
font-family: var(--f-sans);
font-size: 17px;
font-weight: 600;
line-height: 1.3;
color: var(--p-charcoal);
margin: 0 0 4px;
}
.row__title em { font-family: var(--f-serif-italic); font-style: italic; font-weight: 400; }
.row__desc {
font-family: var(--f-sans);
font-size: 14px;
line-height: 1.55;
color: var(--p-ink);
margin: 0;
}
.stack--minimal .row__title { font-size: 16px; }
.stack--minimal .row__desc { display: none; }
.row__value {
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--p-sage);
white-space: nowrap;
padding-top: 3px;
}
/* -------- TOTAL -------- */
.total {
text-align: center;
padding: 24px 0 4px;
border-top: 1px dashed var(--border-hairline);
margin-bottom: 32px;
}
.total__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--p-mute);
margin: 0 0 6px;
}
.total__value {
font-family: var(--f-serif-display);
font-size: 44px;
font-weight: 400;
line-height: 1;
color: var(--p-aztek);
margin: 0 0 6px;
letter-spacing: -0.02em;
}
.total__note {
font-size: 13px;
line-height: 1.5;
color: var(--p-ink);
margin: 0;
}
.total__note strong { color: var(--p-charcoal); }
/* -------- CTA -------- */
.stack__cta-wrap { text-align: center; }
.stack__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 36px;
border-radius: var(--r-pill);
background: var(--p-aztek);
color: var(--p-oatmeal);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
transition: background .2s, transform .2s, box-shadow .2s;
border: 1.5px solid var(--p-aztek);
}
.stack__cta:hover {
background: var(--p-charcoal);
border-color: var(--p-charcoal);
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(16,16,16,0.2);
}
@media (max-width: 640px) {
.row { grid-template-columns: 36px 1fr; }
.row__value {
grid-column: 1 / -1;
padding-left: 56px;
padding-top: 2px;
letter-spacing: 0.1em;
}
.stack__title { font-size: 28px; }
.total__value { font-size: 36px; }
}
@media (max-width: 430px) {
.stack { padding: 32px 20px; }
.stack__cta { width: 100%; justify-content: center; padding: 14px 20px; }
}
```
```html
Variant · Detailed offer stack
Here's everything you get
Freedom Filled® Business Mentorship
Twelve months. Full support.
Live mentorship calls, twice a month
Real-time coaching with me and the FFB community. Bring your stuck points, leave with next actions.
$6,000 value
The Freedom Filled® Pathway curriculum
Self-paced video training library, with the exact frameworks I've used to build my business and every FFB member's.
$3,000 value
Private community with the whole cohort
A steady, encouraging group of right-fit women. No cliques, no pile-ons, just women building together.
$1,200 value
Guest expert masterclasses
Four sessions a year with specialists on launches, copywriting, funnels, and visibility.
$2,000 value
Templates, scripts, and swipe files
Every sales page, email sequence, and IG carousel I've used, ready for you to make your own.
$1,500 value
Quarterly strategy sprints
90-day planning cycles so you always know the next right move and the one after that.
$1,800 value
Accountability rhythm that actually works
Weekly check-ins, monthly wins reel, and a calendar built for busy women, not hustlers.
$900 value
Total value
$16,400+
Your investment today: $6,000 AUD or flexible payments from $550/month.
Variant · Minimal offer stack
Inside the intensive
What you'll walk away with.
Your Million Dollar Message™ in one clear sentence
The messaging framework I use with every FFB mentee
A workbook you'll actually use, not save and forget
Lifetime access to the recording
Clarity you didn't have yesterday
```
---
## opt-in · 5 variants
### Shared CSS · `components/opt-in/opt-in.css`
```css
/* Opt-in, email capture blocks */
.opt-in {
padding: var(--sp-9) var(--sp-7);
overflow: hidden;
}
.opt-in--canvas { background: var(--surface-canvas); }
.opt-in--elevated { background: var(--surface-elevated); }
.opt-in--accent { background: var(--accent); color: var(--accent-on); }
/* ============================================================ */
/* VARIANT: SPLIT, big title left, portrait circle right */
/* ============================================================ */
.opt-in__split {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: var(--sp-7);
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 820px) {
.opt-in__split { grid-template-columns: 1fr; gap: var(--sp-6); }
}
.opt-in__content {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.opt-in__title {
font-family: var(--f-serif-display);
font-weight: var(--w-regular);
font-size: clamp(36px, 4.5vw, 60px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink-heading);
margin: 0;
}
.opt-in--accent .opt-in__title { color: var(--accent-on); }
.opt-in__title em { font-family: var(--f-serif-italic); font-style: italic; }
.opt-in__sub {
font-family: var(--f-sans);
font-size: 14px;
font-weight: var(--w-medium);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0;
max-width: 60ch;
}
.opt-in--accent .opt-in__sub { color: rgba(255,255,255,0.7); }
.opt-in__form {
display: flex;
gap: var(--sp-3);
margin-top: var(--sp-3);
flex-wrap: wrap;
}
/* With-name variant: name + email share a row on desktop, button beneath.
On narrow viewports all three stack full-width. */
.opt-in__form--with-name .opt-in__input {
flex: 1 1 180px;
}
.opt-in__form--with-name .opt-in__btn {
flex: 1 1 100%;
}
@media (min-width: 640px) {
.opt-in__form--with-name .opt-in__btn {
flex: 0 0 auto;
}
}
@media (max-width: 520px) {
.opt-in__form--with-name .opt-in__input { flex: 1 1 100%; }
}
.opt-in__input {
font-family: var(--f-sans);
font-size: 14px;
padding: 14px 18px;
border: 1px solid var(--border-hairline);
border-radius: var(--r-md);
background: var(--p-white);
color: var(--ink-body);
flex: 1;
min-width: 160px;
outline: none;
transition: border-color 0.2s;
}
.opt-in__input:focus {
border-color: var(--accent);
}
.opt-in__input::placeholder {
color: var(--ink-mute);
}
.opt-in__btn {
font-family: var(--f-sans);
font-size: 13px;
font-weight: var(--w-semibold);
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 14px 28px;
border: none;
border-radius: var(--r-md);
background: var(--accent);
color: var(--accent-on);
cursor: pointer;
transition: background 0.2s, transform 0.1s;
white-space: nowrap;
}
.opt-in--accent .opt-in__btn {
background: var(--p-white);
color: var(--accent);
}
.opt-in__btn:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.opt-in__fine {
font-family: var(--f-sans);
font-size: 11px;
line-height: 1.5;
color: var(--ink-mute);
margin: var(--sp-2) 0 0 0;
max-width: 56ch;
}
.opt-in--accent .opt-in__fine { color: rgba(255,255,255,0.5); }
/* Portrait circle */
.opt-in__portrait {
width: 100%;
max-width: 380px;
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
background: var(--surface-elevated);
justify-self: center;
}
.opt-in__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ============================================================ */
/* VARIANT: BANNER, centered, full-width, minimal */
/* ============================================================ */
.opt-in__banner {
max-width: 680px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-4);
}
.opt-in__banner .opt-in__title {
font-size: clamp(28px, 3.5vw, 44px);
}
.opt-in__banner .opt-in__form {
justify-content: center;
width: 100%;
max-width: 480px;
}
.opt-in__banner .opt-in__fine {
text-align: center;
}
/* ============================================================ */
/* VARIANT: CARD, compact card with accent bg, for mid-page */
/* ============================================================ */
.opt-in__card {
background: var(--accent);
border-radius: var(--r-lg);
padding: var(--sp-7) var(--sp-6);
max-width: 680px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-4);
}
.opt-in__card .opt-in__title {
color: var(--accent-on);
font-size: clamp(24px, 3vw, 36px);
}
.opt-in__card .opt-in__sub {
color: rgba(255,255,255,0.7);
}
.opt-in__card .opt-in__form {
justify-content: center;
width: 100%;
max-width: 420px;
}
.opt-in__card .opt-in__btn {
background: var(--p-white);
color: var(--accent);
}
.opt-in__card .opt-in__fine {
color: rgba(255,255,255,0.5);
}
```
### opt-in.accent-dark
Wrapper context: ``
```html
Not sure where to start ?
Take the FRESH Quiz. Two minutes. Personalised recommendation. No fluff.
We'll send your results straight to your inbox. Unsubscribe anytime.
```
### opt-in.banner
Wrapper context: ``
```html
Join the community
Letters from Tracy .
Weekly insights on building a Freedom Filled® business. No spam. Unsubscribe anytime.
```
### opt-in.card
Wrapper context: ``
```html
Free resource
Download the FRESH framework .
Instant access. No credit card required.
```
### opt-in.showcase
```css
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; }
.brand-label {
position: sticky; top: 0; z-index: 10;
background: var(--p-charcoal); color: var(--p-oatmeal);
font-family: var(--f-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.2em; text-transform: uppercase;
padding: 10px 24px;
display: flex; justify-content: space-between;
}
```
```html
SPLIT, big title left, portrait right class="opt-in__split"
Unlock weekly business wins .
Smart strategies, honest behind-the-scenes, and resources delivered to your inbox every Tuesday.
Your privacy is sacred. Unsubscribe anytime with one click. No spam, ever.
SPLIT ACCENT, dark background variant class="opt-in opt-in--accent"
Not sure where to start ?
Take the FRESH Quiz. Two minutes. Personalised recommendation. No fluff.
We'll send your results straight to your inbox. Unsubscribe anytime.
BANNER, centered full-width class="opt-in__banner"
Join the community
Letters from Tracy .
Weekly insights on building a Freedom Filled® business. No spam. Unsubscribe anytime.
CARD, compact mid-page interrupt class="opt-in__card"
Free resource
Download the FRESH framework .
Instant access. No credit card required.
```
### opt-in.split
Wrapper context: ``
```html
Unlock weekly business wins .
Smart strategies, honest behind-the-scenes, and resources delivered to your inbox every Tuesday.
Your privacy is sacred. Unsubscribe anytime with one click. No spam, ever.
```
---
## podcast-card · 3 variants
### Shared CSS · `components/podcast-card/podcast-card.css`
```css
/* Podcast Card, latest episode + listen-on links */
.podcast-card {
background: var(--surface-canvas);
padding: var(--sp-9) var(--sp-7);
}
.podcast-card--elevated {
background: var(--surface-elevated);
}
.podcast-card__inner {
max-width: 1100px;
margin: 0 auto;
}
.podcast-card__header {
margin: 0 0 var(--sp-7) 0;
}
.podcast-card__eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: var(--w-medium);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0 0 var(--sp-3) 0;
}
.podcast-card__title {
font-family: var(--f-serif-display);
font-weight: var(--w-regular);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--ink-heading);
margin: 0;
}
.podcast-card__title em { font-family: var(--f-serif-italic); font-style: italic; }
/* ============================================================ */
/* VARIANT: FEATURED, large card, art left, details right */
/* ============================================================ */
.podcast-card__featured {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: var(--sp-6);
background: var(--p-white);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 4px 20px rgba(16,16,16,0.06);
}
@media (max-width: 820px) {
.podcast-card__featured { grid-template-columns: 1fr; }
}
.podcast-card__art {
aspect-ratio: 1;
background: var(--surface-elevated);
overflow: hidden;
}
.podcast-card__art img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.podcast-card__details {
padding: var(--sp-6);
display: flex;
flex-direction: column;
gap: var(--sp-3);
justify-content: center;
}
.podcast-card__episode-label {
font-family: var(--f-sans);
font-size: 11px;
font-weight: var(--w-medium);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0;
}
.podcast-card__episode-title {
font-family: var(--f-serif-display);
font-weight: var(--w-regular);
font-size: clamp(22px, 2.5vw, 30px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--ink-heading);
margin: 0;
}
.podcast-card__episode-title em { font-family: var(--f-serif-italic); font-style: italic; }
.podcast-card__episode-desc {
font-family: var(--f-sans);
font-size: 14px;
line-height: 1.6;
color: var(--ink-body);
margin: 0;
max-width: 48ch;
}
.podcast-card__play-btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--f-sans);
font-size: 13px;
font-weight: var(--w-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
text-decoration: none;
margin-top: var(--sp-2);
transition: gap 0.2s;
}
.podcast-card__play-btn:hover { gap: 14px; }
.podcast-card__play-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.podcast-card__play-icon svg {
width: 14px;
height: 14px;
color: var(--accent-on);
margin-left: 2px;
}
/* Listen-on platforms */
.podcast-card__platforms {
display: flex;
gap: var(--sp-4);
margin-top: var(--sp-4);
padding-top: var(--sp-4);
border-top: 1px solid var(--border-hairline);
flex-wrap: wrap;
}
.podcast-card__platform {
font-family: var(--f-sans);
font-size: 11px;
font-weight: var(--w-medium);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-mute);
text-decoration: none;
padding: 6px 14px;
border: 1px solid var(--border-hairline);
border-radius: var(--r-pill);
transition: all 0.2s;
}
.podcast-card__platform:hover {
border-color: var(--accent);
color: var(--accent);
}
/* ============================================================ */
/* VARIANT: COMPACT, small inline card for homepage */
/* ============================================================ */
.podcast-card__compact {
display: flex;
gap: var(--sp-5);
align-items: center;
background: var(--p-white);
border-radius: var(--r-lg);
padding: var(--sp-5);
box-shadow: 0 2px 12px rgba(16,16,16,0.04);
max-width: 680px;
}
.podcast-card__compact .podcast-card__art {
width: 120px;
height: 120px;
border-radius: var(--r-lg);
flex: 0 0 auto;
aspect-ratio: auto;
}
.podcast-card__compact .podcast-card__details {
padding: 0;
gap: var(--sp-2);
}
.podcast-card__compact .podcast-card__episode-title {
font-size: 18px;
}
@media (max-width: 500px) {
.podcast-card__compact { flex-direction: column; align-items: stretch; }
.podcast-card__compact .podcast-card__art { width: 100%; height: auto; aspect-ratio: 16/9; }
}
```
### podcast-card.compact
Wrapper context: ``
```css
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; }
/* ------- Mini player (Spotify-style) ------- */
.mini-player {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--sp-5);
align-items: center;
background: var(--p-aztek);
color: var(--p-oatmeal);
border-radius: var(--r-lg);
padding: 14px 18px 14px 14px;
max-width: 680px;
box-shadow: 0 6px 24px rgba(16, 16, 16, 0.18);
}
.mini-player__art {
width: 72px;
height: 72px;
border-radius: 8px;
overflow: hidden;
flex: 0 0 auto;
background: rgba(255,255,255,0.05);
}
.mini-player__art img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mini-player__meta {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.mini-player__eyebrow {
font-family: var(--f-sans);
font-size: 10px;
font-weight: var(--w-medium);
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(246, 244, 241, 0.55);
margin: 0;
}
.mini-player__title {
font-family: var(--f-serif-display);
font-weight: var(--w-regular);
font-size: 18px;
line-height: 1.25;
color: var(--p-oatmeal);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mini-player__title em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.mini-player__progress {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
}
.mini-player__time {
font-family: var(--f-sans);
font-size: 10px;
font-weight: var(--w-medium);
letter-spacing: 0.06em;
color: rgba(246, 244, 241, 0.55);
font-variant-numeric: tabular-nums;
min-width: 30px;
}
.mini-player__bar {
flex: 1;
height: 3px;
background: rgba(246, 244, 241, 0.16);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.mini-player__bar-fill {
position: absolute;
top: 0; left: 0; bottom: 0;
width: 0%;
background: var(--p-sage);
border-radius: 2px;
}
.mini-player__controls {
display: flex;
align-items: center;
gap: 6px;
}
.mini-player__ctrl {
width: 32px;
height: 32px;
border: 0;
background: transparent;
color: rgba(246, 244, 241, 0.6);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
border-radius: 50%;
transition: color 0.2s, background 0.2s;
}
.mini-player__ctrl:hover { color: var(--p-oatmeal); background: rgba(246,244,241,0.06); }
.mini-player__ctrl svg { width: 16px; height: 16px; }
.mini-player__play {
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: var(--p-sage);
color: var(--p-aztek);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: transform 0.18s ease, background 0.2s;
}
.mini-player__play:hover { transform: scale(1.06); background: #7ea088; }
.mini-player__play svg { width: 16px; height: 16px; margin-left: 2px; }
/* Mobile stack */
@media (max-width: 480px) {
.mini-player {
grid-template-columns: auto 1fr;
grid-template-areas:
"art meta"
"controls controls";
gap: 12px;
padding: 12px;
}
.mini-player__art { grid-area: art; width: 60px; height: 60px; }
.mini-player__meta { grid-area: meta; }
.mini-player__controls {
grid-area: controls;
justify-content: space-between;
padding-top: 4px;
border-top: 1px solid rgba(246,244,241,0.1);
}
.mini-player__title { font-size: 16px; white-space: normal; }
}
/* Wrapper keeps page padding consistent with component system */
.podcast-card__compact-wrap { padding: var(--sp-7) var(--sp-7); }
```
```html
```
### podcast-card.featured
Wrapper context: ``
```html
Latest episode · Feb 2025
17 Years of Marriage, 24 Years Together, the real talk episode with Karl and Tracy.
The conversation most couples avoid. Marriage, business, raising boys between Australia and Bali, and the honest version of how we keep it all together.
Listen now
```
### podcast-card.showcase
```css
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; }
.brand-label {
position: sticky; top: 0; z-index: 10;
background: var(--p-charcoal); color: var(--p-oatmeal);
font-family: var(--f-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.2em; text-transform: uppercase;
padding: 10px 24px;
display: flex; justify-content: space-between;
}
```
```html
FEATURED, large card, art left, details right class="podcast-card__featured"
Latest episode
[EPISODE TITLE], The one thing that changed everything
[EPISODE DESCRIPTION PLACEHOLDER] Short, honest, actionable. The way Tracy does everything.
Listen now
COMPACT, small inline card for homepage class="podcast-card__compact"
```
---
## post-grid · 3 variants
### post-grid.editorial
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--f-sans); background: var(--p-oatmeal); color: var(--p-charcoal); -webkit-font-smoothing: antialiased; }
.section { padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 64px); background: var(--p-oatmeal); }
.pg__wrap { max-width: 1200px; margin: 0 auto; }
.pg__header { margin: 0 0 56px; display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.pg__header-copy { max-width: 56ch; }
.pg__eyebrow { font-family: var(--f-script); font-size: clamp(26px, 3vw, 36px); color: var(--p-sage); line-height: 1; margin: 0 0 12px; }
.pg__title { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -0.015em; color: var(--p-charcoal); margin: 0; }
.pg__title em { font-family: var(--f-serif-italic); font-style: italic; }
.pg__view-all { font-family: var(--f-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--p-aztek); text-decoration: none; border-bottom: 1px solid var(--p-aztek); padding-bottom: 3px; transition: gap .2s; display: inline-flex; align-items: center; gap: 8px; }
.pg__view-all:hover { gap: 14px; }
.pg__view-all svg { width: 12px; height: 12px; }
.post { display: block; text-decoration: none; color: inherit; transition: transform .25s ease; }
.post:hover { transform: translateY(-3px); }
.post:hover .post__img { transform: scale(1.03); }
.post__thumb { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--p-cream); position: relative; margin-bottom: 18px; }
.post__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .4s ease; }
.post__img--1 { background-image: linear-gradient(135deg, var(--p-sage), var(--p-aztek)); }
.post__img--2 { background-image: linear-gradient(135deg, var(--p-fresh-peach), var(--p-fresh-orange)); }
.post__img--3 { background-image: linear-gradient(135deg, var(--p-gold-mid), var(--p-gold-dark)); }
.post__img--4 { background-image: linear-gradient(135deg, var(--p-cream), var(--p-sage)); }
.post__cat { display: inline-block; font-family: var(--f-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--p-aztek); margin: 0 0 10px; }
.post__h { font-family: var(--f-serif-display); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--p-charcoal); margin: 0 0 12px; }
.post__h em { font-family: var(--f-serif-italic); font-style: italic; }
.post__meta { font-family: var(--f-sans); font-size: 12px; color: var(--p-mute); letter-spacing: 0.05em; margin: 0; }
.post__meta span + span::before { content: "·"; margin: 0 8px; opacity: 0.6; }
.pg-editorial .pg__featured {
margin-bottom: 64px;
display: grid; grid-template-columns: 1.3fr 1fr;
gap: clamp(32px, 5vw, 64px);
align-items: center; padding: 0;
}
.pg-editorial .pg__featured .post__thumb { aspect-ratio: 4 / 3; margin-bottom: 0; }
.pg-editorial .pg__featured .post__h { font-size: clamp(30px, 3.6vw, 44px); }
.pg-editorial .pg__featured .post__excerpt { font-size: 16px; line-height: 1.65; color: var(--p-ink); margin: 0 0 18px; max-width: 48ch; }
.pg-editorial .pg__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.pg-editorial .pg__row .post__h { font-size: clamp(20px, 1.8vw, 24px); }
@media (max-width: 900px) {
.pg-editorial .pg__featured { grid-template-columns: 1fr; gap: 28px; }
.pg-editorial .pg__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .pg-editorial .pg__row { grid-template-columns: 1fr; } }
@media (max-width: 430px) { .section { padding: 48px 18px; } }
```
```html
```
### post-grid.masonry
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--f-sans); background: var(--p-oatmeal); color: var(--p-charcoal); -webkit-font-smoothing: antialiased; }
.section { padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 64px); background: var(--p-oatmeal); }
.pg__wrap { max-width: 1200px; margin: 0 auto; }
.pg__header { margin: 0 0 56px; display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.pg__header-copy { max-width: 56ch; }
.pg__eyebrow { font-family: var(--f-script); font-size: clamp(26px, 3vw, 36px); color: var(--p-sage); line-height: 1; margin: 0 0 12px; }
.pg__title { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -0.015em; color: var(--p-charcoal); margin: 0; }
.pg__title em { font-family: var(--f-serif-italic); font-style: italic; }
.pg__view-all { font-family: var(--f-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--p-aztek); text-decoration: none; border-bottom: 1px solid var(--p-aztek); padding-bottom: 3px; transition: gap .2s; display: inline-flex; align-items: center; gap: 8px; }
.pg__view-all:hover { gap: 14px; }
.pg__view-all svg { width: 12px; height: 12px; }
.post { display: block; text-decoration: none; color: inherit; transition: transform .25s ease; }
.post:hover { transform: translateY(-3px); }
.post:hover .post__img { transform: scale(1.03); }
.post__thumb { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--p-cream); position: relative; margin-bottom: 18px; }
.post__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .4s ease; }
.post__img--1 { background-image: linear-gradient(135deg, var(--p-sage), var(--p-aztek)); }
.post__img--2 { background-image: linear-gradient(135deg, var(--p-fresh-peach), var(--p-fresh-orange)); }
.post__img--3 { background-image: linear-gradient(135deg, var(--p-gold-mid), var(--p-gold-dark)); }
.post__img--4 { background-image: linear-gradient(135deg, var(--p-cream), var(--p-sage)); }
.post__img--5 { background-image: linear-gradient(135deg, var(--p-aztek), var(--p-charcoal)); }
.post__img--6 { background-image: linear-gradient(135deg, var(--p-fresh-yellow), var(--p-fresh-peach)); }
.post__cat { display: inline-block; font-family: var(--f-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--p-aztek); margin: 0 0 10px; }
.post__h { font-family: var(--f-serif-display); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--p-charcoal); margin: 0 0 12px; }
.post__h em { font-family: var(--f-serif-italic); font-style: italic; }
.post__meta { font-family: var(--f-sans); font-size: 12px; color: var(--p-mute); letter-spacing: 0.05em; margin: 0; }
.post__meta span + span::before { content: "·"; margin: 0 8px; opacity: 0.6; }
.pg-masonry .pg__masonry { column-count: 3; column-gap: clamp(20px, 2.5vw, 32px); }
.pg-masonry .post { display: inline-block; width: 100%; margin-bottom: clamp(28px, 3vw, 40px); break-inside: avoid; }
.pg-masonry .post--tall .post__thumb { aspect-ratio: 3 / 4; }
.pg-masonry .post--wide .post__thumb { aspect-ratio: 4 / 3; }
.pg-masonry .post--square .post__thumb { aspect-ratio: 1 / 1; }
.pg-masonry .post__h { font-size: clamp(19px, 1.6vw, 22px); }
@media (max-width: 900px) { .pg-masonry .pg__masonry { column-count: 2; } }
@media (max-width: 560px) { .pg-masonry .pg__masonry { column-count: 1; } }
@media (max-width: 430px) { .section { padding: 48px 18px; } }
```
```html
```
### post-grid.showcase
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-oatmeal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
.section {
padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 64px);
background: var(--p-oatmeal);
}
.pg__wrap { max-width: 1200px; margin: 0 auto; }
.pg__header {
margin: 0 0 56px;
display: flex;
align-items: end;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.pg__header-copy { max-width: 56ch; }
.pg__eyebrow {
font-family: var(--f-script);
font-size: clamp(26px, 3vw, 36px);
color: var(--p-sage);
line-height: 1;
margin: 0 0 12px;
}
.pg__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(34px, 4.4vw, 52px);
line-height: 1.06;
letter-spacing: -0.015em;
color: var(--p-charcoal);
margin: 0;
}
.pg__title em { font-family: var(--f-serif-italic); font-style: italic; }
.pg__view-all {
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--p-aztek);
text-decoration: none;
border-bottom: 1px solid var(--p-aztek);
padding-bottom: 3px;
transition: gap .2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.pg__view-all:hover { gap: 14px; }
.pg__view-all svg { width: 12px; height: 12px; }
/* -------- CARD BASE -------- */
.post {
display: block;
text-decoration: none;
color: inherit;
transition: transform .25s ease;
}
.post:hover { transform: translateY(-3px); }
.post:hover .post__img {
transform: scale(1.03);
}
.post__thumb {
aspect-ratio: 16 / 10;
border-radius: 10px;
overflow: hidden;
background: var(--p-cream);
position: relative;
margin-bottom: 18px;
}
.post__img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform .4s ease;
}
.post__img--1 { background-image: linear-gradient(135deg, var(--p-sage), var(--p-aztek)); }
.post__img--2 { background-image: linear-gradient(135deg, var(--p-fresh-peach), var(--p-fresh-orange)); }
.post__img--3 { background-image: linear-gradient(135deg, var(--p-gold-mid), var(--p-gold-dark)); }
.post__img--4 { background-image: linear-gradient(135deg, var(--p-cream), var(--p-sage)); }
.post__img--5 { background-image: linear-gradient(135deg, var(--p-aztek), var(--p-charcoal)); }
.post__img--6 { background-image: linear-gradient(135deg, var(--p-fresh-yellow), var(--p-fresh-peach)); }
.post__img--7 { background-image: linear-gradient(135deg, var(--p-oatmeal), var(--p-cream)); }
.post__cat {
display: inline-block;
font-family: var(--f-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--p-aztek);
margin: 0 0 10px;
}
.post__h {
font-family: var(--f-serif-display);
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--p-charcoal);
margin: 0 0 12px;
}
.post__h em { font-family: var(--f-serif-italic); font-style: italic; }
.post__meta {
font-family: var(--f-sans);
font-size: 12px;
color: var(--p-mute);
letter-spacing: 0.05em;
margin: 0;
}
.post__meta span + span::before { content: "·"; margin: 0 8px; opacity: 0.6; }
/* -------- EDITORIAL VARIANT: featured hero + 3 below -------- */
.pg-editorial .pg__featured {
margin-bottom: 64px;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: clamp(32px, 5vw, 64px);
align-items: center;
padding: 0;
}
.pg-editorial .pg__featured .post__thumb {
aspect-ratio: 4 / 3;
margin-bottom: 0;
}
.pg-editorial .pg__featured .post__h {
font-size: clamp(30px, 3.6vw, 44px);
}
.pg-editorial .pg__featured .post__excerpt {
font-size: 16px;
line-height: 1.65;
color: var(--p-ink);
margin: 0 0 18px;
max-width: 48ch;
}
.pg-editorial .pg__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 3vw, 40px);
}
.pg-editorial .pg__row .post__h {
font-size: clamp(20px, 1.8vw, 24px);
}
/* -------- MASONRY VARIANT -------- */
.pg-masonry .pg__masonry {
column-count: 3;
column-gap: clamp(20px, 2.5vw, 32px);
}
.pg-masonry .post {
display: inline-block;
width: 100%;
margin-bottom: clamp(28px, 3vw, 40px);
break-inside: avoid;
}
.pg-masonry .post--tall .post__thumb { aspect-ratio: 3 / 4; }
.pg-masonry .post--wide .post__thumb { aspect-ratio: 4 / 3; }
.pg-masonry .post--square .post__thumb { aspect-ratio: 1 / 1; }
.pg-masonry .post__h {
font-size: clamp(19px, 1.6vw, 22px);
}
/* -------- SHOWCASE LABELS -------- */
.showcase-label {
max-width: 1200px;
margin: 0 auto 14px;
padding: 0 clamp(20px, 5vw, 64px);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--p-mute);
}
@media (max-width: 900px) {
.pg-editorial .pg__featured { grid-template-columns: 1fr; gap: 28px; }
.pg-editorial .pg__row { grid-template-columns: repeat(2, 1fr); }
.pg-masonry .pg__masonry { column-count: 2; }
}
@media (max-width: 560px) {
.pg-editorial .pg__row { grid-template-columns: 1fr; }
.pg-masonry .pg__masonry { column-count: 1; }
}
@media (max-width: 430px) {
.section { padding: 48px 18px; }
}
```
```html
Variant · editorial
Variant · masonry
```
---
## pricing · 7 variants
### Shared CSS · `components/pricing/pricing.css`
```css
/* Pricing, offer stack for FFB and FFM product pages */
.pricing {
background: var(--surface-canvas);
padding: var(--sp-9) var(--sp-7);
}
.pricing--elevated {
background: var(--surface-elevated);
}
.pricing__inner {
max-width: 1100px;
margin: 0 auto;
}
.pricing__header {
text-align: center;
margin: 0 0 var(--sp-8) 0;
}
.pricing__eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: var(--w-medium);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0 0 var(--sp-3) 0;
}
.pricing__title {
font-family: var(--f-serif-display);
font-weight: var(--w-regular);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--ink-heading);
margin: 0 0 var(--sp-4) 0;
}
.pricing__title em { font-family: var(--f-serif-italic); font-style: italic; }
.pricing__sub {
font-family: var(--f-sans);
font-size: 16px;
line-height: 1.65;
color: var(--ink-body);
margin: 0 auto;
max-width: 52ch;
}
/* ============================================================ */
/* VARIANT: SIDE-BY-SIDE, two payment options */
/* ============================================================ */
.pricing__options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-5);
max-width: 820px;
margin: 0 auto;
}
@media (max-width: 700px) { .pricing__options { grid-template-columns: 1fr; } }
.pricing__card {
background: var(--p-white);
border: 1px solid rgba(16,16,16,0.06);
border-radius: var(--r-lg);
padding: var(--sp-7) var(--sp-6);
display: flex;
flex-direction: column;
gap: var(--sp-4);
box-shadow: 0 2px 12px rgba(16,16,16,0.04);
position: relative;
}
.pricing__card--featured {
border-color: var(--accent);
box-shadow: 0 8px 32px rgba(16,16,16,0.08);
}
.pricing__badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
font-family: var(--f-sans);
font-size: 10px;
font-weight: var(--w-semibold);
letter-spacing: 0.18em;
text-transform: uppercase;
background: var(--accent);
color: var(--accent-on);
padding: 5px 16px;
border-radius: var(--r-pill);
white-space: nowrap;
}
.pricing__plan-name {
font-family: var(--f-sans);
font-size: 13px;
font-weight: var(--w-medium);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0;
}
.pricing__amount {
font-family: var(--f-serif-display);
font-weight: var(--w-regular);
font-size: clamp(36px, 4vw, 48px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink-heading);
margin: 0;
}
.pricing__amount-detail {
font-family: var(--f-sans);
font-size: 14px;
color: var(--ink-mute);
margin: 0;
}
.pricing__divider {
border: none;
border-top: 1px solid var(--border-hairline);
margin: 0;
}
.pricing__features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sp-3);
flex: 1;
}
.pricing__features li {
font-family: var(--f-sans);
font-size: 14px;
line-height: 1.5;
color: var(--ink-body);
padding-left: 24px;
position: relative;
}
.pricing__features li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 12px;
height: 6px;
border-left: 1.5px solid var(--accent);
border-bottom: 1.5px solid var(--accent);
transform: rotate(-45deg);
}
.pricing__cta {
display: block;
text-align: center;
font-family: var(--f-sans);
font-size: 13px;
font-weight: var(--w-semibold);
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
padding: 16px 24px;
border-radius: var(--r-md);
transition: all 0.2s;
margin-top: auto;
}
.pricing__cta--primary {
background: var(--accent);
color: var(--accent-on);
}
.pricing__cta--primary:hover { opacity: 0.9; transform: translateY(-1px); }
.pricing__cta--secondary {
background: transparent;
color: var(--accent);
border: 1px solid var(--border-hairline);
}
.pricing__cta--secondary:hover { border-color: var(--accent); }
/* ============================================================ */
/* VARIANT: SINGLE, one card with all options listed */
/* ============================================================ */
.pricing__single {
max-width: 580px;
margin: 0 auto;
}
.pricing__single .pricing__card {
text-align: center;
align-items: center;
}
.pricing__single .pricing__features {
text-align: left;
align-self: stretch;
}
.pricing__payment-options {
display: flex;
flex-direction: column;
gap: var(--sp-3);
width: 100%;
}
.pricing__payment-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--border-hairline);
}
.pricing__payment-row:last-child { border-bottom: none; }
.pricing__payment-label {
font-family: var(--f-sans);
font-size: 14px;
color: var(--ink-body);
}
.pricing__payment-value {
font-family: var(--f-sans);
font-size: 14px;
font-weight: var(--w-semibold);
color: var(--ink-heading);
}
.pricing__payment-save {
font-size: 11px;
font-weight: var(--w-medium);
color: var(--accent);
margin-left: 8px;
}
/* ============================================================ */
/* VARIANT: DARK, for FFM premium positioning */
/* ============================================================ */
.pricing--dark {
background: var(--surface-inverse);
}
.pricing--dark .pricing__eyebrow { color: rgba(255,255,255,0.5); }
.pricing--dark .pricing__title { color: var(--p-white); }
.pricing--dark .pricing__sub { color: rgba(255,255,255,0.7); }
.pricing--dark .pricing__card {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.1);
box-shadow: none;
}
.pricing--dark .pricing__plan-name { color: rgba(255,255,255,0.5); }
.pricing--dark .pricing__amount { color: var(--p-white); }
.pricing--dark .pricing__amount-detail { color: rgba(255,255,255,0.5); }
.pricing--dark .pricing__divider { border-color: rgba(255,255,255,0.1); }
.pricing--dark .pricing__features li { color: rgba(255,255,255,0.8); }
.pricing--dark .pricing__features li::before { border-color: var(--p-gold-mid); }
.pricing--dark .pricing__payment-label { color: rgba(255,255,255,0.7); }
.pricing--dark .pricing__payment-value { color: var(--p-white); }
.pricing--dark .pricing__cta--primary {
background: var(--p-gold-mid);
color: var(--p-charcoal);
}
.pricing--dark .pricing__cta--secondary {
color: var(--p-white);
border-color: rgba(255,255,255,0.2);
}
.pricing--dark .pricing__badge {
background: var(--p-gold-mid);
color: var(--p-charcoal);
}
```
### pricing.compact-single-polished
Wrapper context: ``
```css
:root { --ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1); }
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.pricing { position: relative; overflow: hidden; isolation: isolate; }
.pricing::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 55% 45% at 50% 40%,
rgba(110, 142, 119, 0.08) 0%,
rgba(110, 142, 119, 0.0) 70%);
pointer-events: none;
z-index: 0;
}
.pricing__inner { position: relative; z-index: 1; }
.pricing__eyebrow,
.pricing__title {
opacity: 0;
transform: translateY(12px);
animation: prcRise 900ms var(--ease-out-craft) forwards;
}
.pricing__eyebrow { animation-delay: 140ms; }
.pricing__title { animation-delay: 280ms; }
.pricing__card {
opacity: 0;
transform: translateY(18px);
animation: prcCard 1000ms var(--ease-out-craft) 460ms forwards;
transition:
transform 320ms var(--ease-out-craft),
box-shadow 320ms var(--ease-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.pricing__card:hover {
transform: translateY(-3px);
box-shadow: 0 24px 48px -20px rgba(30, 55, 53, 0.25);
}
}
@keyframes prcRise {
from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes prcCard {
from { opacity: 0; transform: translateY(18px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.pricing__title { text-wrap: balance; }
.pricing__cta {
transition:
background-color 200ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft),
transform 120ms var(--ease-out-craft);
}
.pricing__cta--primary {
box-shadow: 0 2px 10px -6px rgba(30, 55, 53, 0.35);
}
.pricing__cta--primary:hover {
box-shadow: 0 4px 14px -6px rgba(30, 55, 53, 0.45);
}
.pricing__cta--primary:active { transform: scale(0.99); }
.pricing__cta--primary:focus-visible {
outline: 2px solid var(--p-aztek);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.pricing__eyebrow,
.pricing__title,
.pricing__card {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
```
```html
Freedom Filled® Business
$6,000
AUD pay in full, or from $550/mo
Full 12-month curriculum
Group coaching calls
Private community
Tracy's proven frameworks
Apply to FFB
```
### pricing.compact-single
Wrapper context: ``
```html
Freedom Filled® Business
$6,000
AUD pay in full, or from $550/mo
Full 12-month curriculum
Group coaching calls
Private community
Tracy's proven frameworks
Apply to FFB
```
### pricing.ffb-side-by-side-polished
Wrapper context: ``
```css
:root { --ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1); }
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.pricing { position: relative; overflow: hidden; isolation: isolate; }
.pricing::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 40% at 50% 30%,
rgba(110, 142, 119, 0.08) 0%,
rgba(110, 142, 119, 0.0) 70%);
pointer-events: none;
z-index: 0;
}
.pricing__inner { position: relative; z-index: 1; }
.pricing__eyebrow,
.pricing__title,
.pricing__sub {
opacity: 0;
transform: translateY(12px);
animation: prRise 900ms var(--ease-out-craft) forwards;
}
.pricing__eyebrow { animation-delay: 140ms; }
.pricing__title { animation-delay: 280ms; }
.pricing__sub { animation-delay: 420ms; }
.pricing__card {
opacity: 0;
transform: translateY(18px);
animation: prCardRise 1000ms var(--ease-out-craft) forwards;
transition:
transform 320ms var(--ease-out-craft),
box-shadow 320ms var(--ease-out-craft),
border-color 320ms var(--ease-out-craft);
}
.pricing__options .pricing__card:nth-child(1) { animation-delay: 560ms; }
.pricing__options .pricing__card:nth-child(2) { animation-delay: 700ms; }
@media (hover: hover) and (pointer: fine) {
.pricing__card:hover {
transform: translateY(-3px);
box-shadow: 0 24px 48px -20px rgba(30, 55, 53, 0.25);
}
.pricing__card--featured:hover {
box-shadow: 0 28px 56px -16px rgba(30, 55, 53, 0.3);
}
}
@keyframes prRise {
from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes prCardRise {
from { opacity: 0; transform: translateY(18px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.pricing__title { text-wrap: balance; }
.pricing__sub { text-wrap: pretty; }
.pricing__cta {
transition:
background-color 200ms var(--ease-out-craft),
color 200ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft),
border-color 200ms var(--ease-out-craft),
transform 120ms var(--ease-out-craft);
}
.pricing__cta--primary {
box-shadow: 0 3px 12px -6px rgba(30, 55, 53, 0.35);
}
.pricing__cta--primary:hover {
box-shadow: 0 5px 16px -6px rgba(30, 55, 53, 0.45);
}
.pricing__cta--primary:active { transform: scale(0.99); }
.pricing__cta--primary:focus-visible {
outline: 2px solid var(--p-aztek);
outline-offset: 3px;
}
.pricing__cta--secondary:active { transform: scale(0.99); }
.pricing__cta--secondary:focus-visible {
outline: 1px solid var(--p-aztek);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.pricing__eyebrow,
.pricing__title,
.pricing__sub,
.pricing__card {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
```
```html
Best value
Pay in full
$6,000
AUD, one payment
Full 12-month curriculum
Group coaching calls with Tracy
Private community access
Million Dollar Message™ framework
Signature Model™ + Freedom Filled® Offers
Ongoing support for 12 months
Apply Now
Monthly
$550
AUD/month for 12 months
Full 12-month curriculum
Group coaching calls with Tracy
Private community access
Million Dollar Message™ framework
Signature Model™ + Freedom Filled® Offers
Ongoing support for 12 months
Apply Now
```
### pricing.ffb-side-by-side
Wrapper context: ``
```html
Best value
Pay in full
$6,000
AUD, one payment
Full 12-month curriculum
Group coaching calls with Tracy
Private community access
Million Dollar Message™ framework
Signature Model™ + Freedom Filled® Offers
Ongoing support for 12 months
Apply Now
Monthly
$550
AUD/month for 12 months
Full 12-month curriculum
Group coaching calls with Tracy
Private community access
Million Dollar Message™ framework
Signature Model™ + Freedom Filled® Offers
Ongoing support for 12 months
Apply Now
```
### pricing.ffm-dark-premium-polished
Wrapper context: ``
```css
:root { --ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1); }
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--p-charcoal); }
.pricing { position: relative; overflow: hidden; isolation: isolate; }
.pricing::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 50% at 50% 30%,
rgba(201, 164, 108, 0.16) 0%,
rgba(201, 164, 108, 0.0) 70%);
pointer-events: none;
z-index: 0;
}
.pricing__inner { position: relative; z-index: 1; }
.pricing__eyebrow,
.pricing__title,
.pricing__sub {
opacity: 0;
transform: translateY(12px);
animation: prmRise 900ms var(--ease-out-craft) forwards;
}
.pricing__eyebrow { animation-delay: 140ms; }
.pricing__title { animation-delay: 280ms; }
.pricing__sub { animation-delay: 420ms; }
.pricing__card {
opacity: 0;
transform: translateY(18px);
animation: prmCardRise 1000ms var(--ease-out-craft) 580ms forwards;
transition:
transform 320ms var(--ease-out-craft),
box-shadow 320ms var(--ease-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.pricing__card--featured:hover {
transform: translateY(-3px);
box-shadow: 0 32px 64px -20px rgba(201, 164, 108, 0.3);
}
}
@keyframes prmRise {
from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes prmCardRise {
from { opacity: 0; transform: translateY(18px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.pricing__title { text-wrap: balance; }
.pricing__sub { text-wrap: pretty; }
.pricing__cta {
transition:
background 220ms var(--ease-out-craft),
box-shadow 240ms var(--ease-out-craft),
transform 120ms var(--ease-out-craft);
}
.pricing__cta--primary {
box-shadow: 0 3px 12px -6px rgba(201, 164, 108, 0.4);
}
.pricing__cta--primary:hover {
box-shadow: 0 6px 20px -6px rgba(201, 164, 108, 0.55);
}
.pricing__cta--primary:active { transform: scale(0.99); }
.pricing__cta--primary:focus-visible {
outline: 2px solid var(--p-gold-mid);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.pricing__eyebrow,
.pricing__title,
.pricing__sub,
.pricing__card {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
```
```html
Application only
Your investment
Pay in full
$31,000 AUD Save $2,000
Monthly
$2,750/mo x 12
Discovery call fee
$1,000 (refundable)
Maximum 20 women per cohort
In-person retreats (Bali, Australia)
1:1 hot seats with Tracy
Direct access to Tracy
12 months of FFB included
The Social Method® Society included
Book a Discovery Call
```
### pricing.ffm-dark-premium
Wrapper context: ``
```html
Application only
Your investment
Pay in full
$31,000 AUD Save $2,000
Monthly
$2,750/mo x 12
Discovery call fee
$1,000 (refundable)
Maximum 20 women per cohort
In-person retreats (Bali, Australia)
1:1 hot seats with Tracy
Direct access to Tracy
12 months of FFB included
The Social Method® Society included
Book a Discovery Call
```
### pricing.showcase
```css
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; }
.brand-label {
position: sticky; top: 0; z-index: 10;
background: var(--p-charcoal); color: var(--p-oatmeal);
font-family: var(--f-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.2em; text-transform: uppercase;
padding: 10px 24px;
display: flex; justify-content: space-between;
}
```
```html
SIDE-BY-SIDE, FFB payment options class="pricing__options"
Best value
Pay in full
$6,000
AUD, one payment
Full 12-month curriculum
Group coaching calls with Tracy
Private community access
Million Dollar Message™ framework
Signature Model™ + Freedom Filled® Offers
Ongoing support for 12 months
Apply Now
Monthly
$550
AUD/month for 12 months
Full 12-month curriculum
Group coaching calls with Tracy
Private community access
Million Dollar Message™ framework
Signature Model™ + Freedom Filled® Offers
Ongoing support for 12 months
Apply Now
SINGLE DARK, FFM premium positioning class="pricing--dark pricing__single"
Application only
Your investment
Pay in full
$31,000 AUD Save $2,000
Monthly
$2,750/mo x 12
Discovery call fee
$1,000 (refundable)
Maximum 20 women per cohort
In-person retreats (Bali, Australia)
1:1 hot seats with Tracy
Direct access to Tracy
12 months of FFB included
The Social Method® Society included
Book a Discovery Call
SINGLE LIGHT, compact pricing card class="pricing__single"
Freedom Filled® Business
$6,000
AUD pay in full, or from $550/mo
Full 12-month curriculum
Group coaching calls
Private community
Tracy's proven frameworks
Apply to FFB
```
---
## product-callout · 9 variants
### product-callout.bento-elite-polished
Wrapper context: ``
```css
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-charcoal);
color: var(--p-oatmeal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.wrap {
max-width: 1280px;
margin: 0 auto;
padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 48px);
}
.pc {
display: grid;
grid-template-columns: 1fr 1.4fr;
grid-template-rows: auto auto;
gap: 20px;
color: var(--p-oatmeal);
}
.pc__brand,
.pc__headline,
.pc__copy,
.pc__video {
opacity: 0;
transform: translateY(16px);
animation: pcRise 1000ms var(--ease-out-craft) forwards;
will-change: transform, opacity;
}
.pc__brand { animation-delay: 180ms; }
.pc__headline { animation-delay: 320ms; }
.pc__copy { animation-delay: 460ms; }
.pc__video { animation-delay: 600ms; }
@keyframes pcRise {
from { opacity: 0; transform: translateY(16px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.pc__brand {
grid-column: 1; grid-row: 1;
background: linear-gradient(135deg, #7b623c 0%, #c9a46c 70%, #ddc18f 100%);
color: #1a1a1a;
border-radius: 28px;
padding: 36px 32px;
display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
gap: 12px; min-height: 200px; position: relative; overflow: hidden;
transition: transform 300ms var(--ease-out-craft), box-shadow 300ms var(--ease-out-craft);
box-shadow: 0 18px 40px -24px rgba(201, 164, 108, 0.5);
}
.pc__brand::after {
content: ""; position: absolute; inset: auto -40% -60% auto;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(16,16,16,0.15) 0%, transparent 70%);
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.pc__brand:hover { transform: translateY(-3px); box-shadow: 0 28px 60px -18px rgba(201, 164, 108, 0.65); }
}
.pc__brand-eyebrow { font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: #1a1a1a; opacity: 0.85; margin: 0; }
.pc__brand-title { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(40px, 4.5vw, 64px); line-height: 0.92; letter-spacing: -0.01em; margin: 0; color: #1a1a1a; text-wrap: balance; }
.pc__brand-title em { font-family: var(--f-serif-italic); font-style: italic; }
.pc__brand-trademark { font-family: var(--f-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; margin: 6px 0 0; opacity: 0.65; color: #1a1a1a; }
.pc__headline { grid-column: 2; grid-row: 1; display: flex; align-items: center; padding: 0 12px; }
.pc__headline h2 { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -0.01em; color: var(--p-oatmeal); margin: 0; text-wrap: balance; }
.pc__headline em { font-family: var(--f-serif-italic); font-style: italic; }
.pc__copy {
grid-column: 1; grid-row: 2;
background: #1a1a1a;
border-radius: 28px;
padding: 36px 32px;
display: flex; flex-direction: column; gap: 20px;
transition: transform 300ms var(--ease-out-craft), box-shadow 300ms var(--ease-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.pc__copy:hover { transform: translateY(-3px); box-shadow: 0 24px 56px -28px rgba(201, 164, 108, 0.22); }
}
.pc__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.pc__stat-value { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(32px, 3.2vw, 44px); line-height: 1; color: var(--p-oatmeal); }
.pc__stat-label { font-family: var(--f-sans); font-size: 12px; line-height: 1.35; color: var(--p-oatmeal); opacity: 0.72; margin-top: 6px; }
.pc__desc { font-family: var(--f-sans); font-size: 14px; line-height: 1.6; color: var(--p-oatmeal); opacity: 0.82; margin: 0; text-wrap: pretty; }
.pc__desc em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.pc__ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pc__cta {
padding: 14px 22px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-pill);
background: #2a2a2a;
color: var(--p-oatmeal);
text-decoration: none;
text-align: center;
font-family: var(--f-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid rgba(246,244,241,0.08);
transition:
background 250ms var(--ease-out-craft),
border-color 250ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft),
transform 120ms var(--ease-out-craft);
}
.pc__cta:hover { background: #353535; border-color: rgba(246,244,241,0.22); }
.pc__cta:active { transform: scale(0.99); }
.pc__cta:focus-visible { outline: 2px solid var(--p-gold-mid); outline-offset: 3px; }
.pc__cta--primary { background: var(--p-oatmeal); color: var(--p-charcoal); border-color: var(--p-oatmeal); box-shadow: 0 3px 12px -6px rgba(201, 164, 108, 0.4); }
.pc__cta--primary:hover { background: #fff; box-shadow: 0 5px 16px -6px rgba(201, 164, 108, 0.55); }
.pc__video {
grid-column: 2; grid-row: 2;
position: relative;
border-radius: 28px;
overflow: hidden;
background: #111;
min-height: 360px;
cursor: pointer;
isolation: isolate;
transition: transform 300ms var(--ease-out-craft), box-shadow 300ms var(--ease-out-craft);
}
.pc__video-img {
position: absolute; inset: 0;
background: url("https://cdn.jsdelivr.net/gh/purepurposekh/tracy-harris-brand-kit@main/assets/photos/tracy-outfit8-49.jpg") center 25% / cover;
filter: saturate(0.95) contrast(1.02);
transform: scale(1.06);
transition: transform 900ms var(--ease-in-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.pc__video:hover { transform: translateY(-3px); box-shadow: 0 28px 56px -20px rgba(0, 0, 0, 0.5); }
.pc__video:hover .pc__video-img { transform: scale(1.02); }
}
.pc__video::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(16,16,16,0.0) 0%, rgba(16,16,16,0.0) 50%, rgba(16,16,16,0.35) 100%);
z-index: 1;
}
.pc__video-play {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 22px 12px 18px;
background: rgba(246,244,241,0.92);
color: var(--p-charcoal);
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 12px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background 200ms var(--ease-out-craft), transform 200ms var(--ease-out-craft);
}
.pc__video:hover .pc__video-play { background: #fff; transform: translate(-50%, -50%) scale(1.05); }
.pc__video:focus-visible { outline: 2px solid var(--p-gold-mid); outline-offset: 3px; }
.pc__video-caption {
position: absolute; left: 24px; bottom: 22px;
z-index: 2;
color: var(--p-oatmeal);
font-family: var(--f-sans);
font-size: 11px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
opacity: 0.85;
}
@media (max-width: 820px) {
.pc { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; gap: 14px; }
.pc__brand { grid-column: 1; grid-row: 1; min-height: 160px; padding: 28px; border-radius: 22px; }
.pc__brand-title { font-size: clamp(36px, 10vw, 56px); }
.pc__headline { grid-column: 1; grid-row: 2; padding: 10px 4px; }
.pc__headline h2 { font-size: clamp(26px, 7.5vw, 38px); }
.pc__copy { grid-column: 1; grid-row: 3; padding: 28px 24px; border-radius: 22px; }
.pc__stats { gap: 16px 20px; }
.pc__stat-value { font-size: 30px; }
.pc__video { grid-column: 1; grid-row: 4; min-height: 240px; border-radius: 22px; }
}
@media (max-width: 480px) { .pc__ctas { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) {
.pc__brand,
.pc__headline,
.pc__copy,
.pc__video,
.pc__video-img {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.pc__video-img { transform: scale(1.02); }
}
```
```html
Tracy Harris · Private
Elite Coaching
One-to-one · by invitation
Private strategy for women ready for quietly extraordinary growth.
1:1
direct access, not a container
Select
a handful of women at any time
For Mastermind alumnae and aligned leaders: a private coaching track with Tracy for the seasons that ask for deep, bespoke thinking : pricing decisions, big launches, brand pivots, succession.
2 minutes · private
```
### product-callout.bento-elite
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-charcoal);
color: var(--p-oatmeal);
-webkit-font-smoothing: antialiased;
}
.wrap {
max-width: 1280px;
margin: 0 auto;
padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 48px);
}
.pc {
display: grid;
grid-template-columns: 1fr 1.4fr;
grid-template-rows: auto auto;
gap: 20px;
color: var(--p-oatmeal);
}
.pc__brand {
grid-column: 1; grid-row: 1;
background: linear-gradient(135deg, #7b623c 0%, #c9a46c 70%, #ddc18f 100%);
color: #1a1a1a;
border-radius: 28px;
padding: 36px 32px;
display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
gap: 12px; min-height: 200px; position: relative; overflow: hidden;
}
.pc__brand::after {
content: ""; position: absolute; inset: auto -40% -60% auto;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(16,16,16,0.15) 0%, transparent 70%);
pointer-events: none;
}
.pc__brand-eyebrow { font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: #1a1a1a; opacity: 0.85; margin: 0; }
.pc__brand-title { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(40px, 4.5vw, 64px); line-height: 0.92; letter-spacing: -0.01em; margin: 0; color: #1a1a1a; }
.pc__brand-title em { font-family: var(--f-serif-italic); font-style: italic; }
.pc__brand-trademark { font-family: var(--f-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; margin: 6px 0 0; opacity: 0.65; color: #1a1a1a; }
.pc__headline { grid-column: 2; grid-row: 1; display: flex; align-items: center; padding: 0 12px; }
.pc__headline h2 { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -0.01em; color: var(--p-oatmeal); margin: 0; }
.pc__headline em { font-family: var(--f-serif-italic); font-style: italic; }
.pc__copy { grid-column: 1; grid-row: 2; background: #1a1a1a; border-radius: 28px; padding: 36px 32px; display: flex; flex-direction: column; gap: 20px; }
.pc__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.pc__stat-value { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(32px, 3.2vw, 44px); line-height: 1; color: var(--p-oatmeal); }
.pc__stat-label { font-family: var(--f-sans); font-size: 12px; line-height: 1.35; color: var(--p-oatmeal); opacity: 0.72; margin-top: 6px; }
.pc__desc { font-family: var(--f-sans); font-size: 14px; line-height: 1.6; color: var(--p-oatmeal); opacity: 0.82; margin: 0; }
.pc__desc em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.pc__ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pc__cta { padding: 14px 22px; border-radius: var(--r-pill); background: #2a2a2a; color: var(--p-oatmeal); text-decoration: none; text-align: center; font-family: var(--f-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid rgba(246,244,241,0.08); transition: background .25s ease, border-color .25s ease, transform .2s ease; }
.pc__cta:hover { background: #353535; border-color: rgba(246,244,241,0.22); transform: translateY(-1px); }
.pc__cta--primary { background: var(--p-oatmeal); color: var(--p-charcoal); border-color: var(--p-oatmeal); }
.pc__cta--primary:hover { background: #fff; }
.pc__video { grid-column: 2; grid-row: 2; position: relative; border-radius: 28px; overflow: hidden; background: #111; min-height: 360px; cursor: pointer; isolation: isolate; }
.pc__video-img { position: absolute; inset: 0; background: url("../../../assets/photos/tracy-outfit8-49.jpg") center 25% / cover; filter: saturate(0.95) contrast(1.02); transition: transform .6s ease; }
.pc__video:hover .pc__video-img { transform: scale(1.03); }
.pc__video::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,16,16,0.0) 0%, rgba(16,16,16,0.0) 50%, rgba(16,16,16,0.35) 100%); z-index: 1; }
.pc__video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 12px 18px; background: rgba(246,244,241,0.92); color: var(--p-charcoal); border-radius: var(--r-pill); font-family: var(--f-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s ease, transform .2s ease; }
.pc__video:hover .pc__video-play { background: #fff; transform: translate(-50%, -50%) scale(1.05); }
.pc__video-caption { position: absolute; left: 24px; bottom: 22px; z-index: 2; color: var(--p-oatmeal); font-family: var(--f-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.85; }
@media (max-width: 820px) {
.pc { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; gap: 14px; }
.pc__brand { grid-column: 1; grid-row: 1; min-height: 160px; padding: 28px; border-radius: 22px; }
.pc__brand-title { font-size: clamp(36px, 10vw, 56px); }
.pc__headline { grid-column: 1; grid-row: 2; padding: 10px 4px; }
.pc__headline h2 { font-size: clamp(26px, 7.5vw, 38px); }
.pc__copy { grid-column: 1; grid-row: 3; padding: 28px 24px; border-radius: 22px; }
.pc__stats { gap: 16px 20px; }
.pc__stat-value { font-size: 30px; }
.pc__video { grid-column: 1; grid-row: 4; min-height: 240px; border-radius: 22px; }
}
@media (max-width: 480px) { .pc__ctas { flex-direction: column; } }
```
```html
Tracy Harris · Private
Elite Coaching
One-to-one · by invitation
Private strategy for women ready for quietly extraordinary growth.
1:1
direct access, not a container
Select
a handful of women at any time
For Mastermind alumnae and aligned leaders: a private coaching track with Tracy for the seasons that ask for deep, bespoke thinking : pricing decisions, big launches, brand pivots, succession.
2 minutes · private
```
### product-callout.bento-ffb-polished
Wrapper context: ``
```css
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-charcoal);
color: var(--p-oatmeal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.wrap {
max-width: 1280px;
margin: 0 auto;
padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 48px);
}
.pc {
display: grid;
grid-template-columns: 1fr 1.4fr;
grid-template-rows: auto auto;
gap: 20px;
color: var(--p-oatmeal);
}
.pc__brand,
.pc__headline,
.pc__copy,
.pc__video {
opacity: 0;
transform: translateY(16px);
animation: pcbRise 1000ms var(--ease-out-craft) forwards;
will-change: transform, opacity;
}
.pc__brand { animation-delay: 180ms; }
.pc__headline { animation-delay: 320ms; }
.pc__copy { animation-delay: 460ms; }
.pc__video { animation-delay: 600ms; }
@keyframes pcbRise {
from { opacity: 0; transform: translateY(16px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.pc__brand {
grid-column: 1; grid-row: 1;
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border-radius: 28px;
padding: 36px 32px;
display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
gap: 12px;
min-height: 200px;
position: relative;
overflow: hidden;
transition: transform 300ms var(--ease-out-craft), box-shadow 300ms var(--ease-out-craft);
box-shadow: 0 18px 40px -24px rgba(30, 55, 53, 0.55);
}
.pc__brand::after {
content: "";
position: absolute;
inset: auto -40% -60% auto;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(201,164,108,0.2) 0%, transparent 70%);
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.pc__brand:hover {
transform: translateY(-3px);
box-shadow: 0 28px 60px -18px rgba(30, 55, 53, 0.7);
}
}
.pc__brand-eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-oatmeal);
opacity: 0.85;
margin: 0;
}
.pc__brand-title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(40px, 4.5vw, 64px);
line-height: 0.92;
letter-spacing: -0.01em;
margin: 0;
color: var(--p-oatmeal);
text-wrap: balance;
}
.pc__brand-title em { font-family: var(--f-serif-italic); font-style: italic; }
.pc__brand-trademark {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
margin: 6px 0 0;
opacity: 0.65;
}
.pc__headline {
grid-column: 2; grid-row: 1;
display: flex;
align-items: center;
padding: 0 12px;
}
.pc__headline h2 {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(30px, 3.6vw, 52px);
line-height: 1.08;
letter-spacing: -0.01em;
color: var(--p-oatmeal);
margin: 0;
text-wrap: balance;
}
.pc__headline em { font-family: var(--f-serif-italic); font-style: italic; }
.pc__copy {
grid-column: 1; grid-row: 2;
background: #1a1a1a;
border-radius: 28px;
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 20px;
transition: transform 300ms var(--ease-out-craft), box-shadow 300ms var(--ease-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.pc__copy:hover {
transform: translateY(-3px);
box-shadow: 0 24px 56px -28px rgba(30, 55, 53, 0.35);
}
}
.pc__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.pc__stat-value {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(32px, 3.2vw, 44px);
line-height: 1;
color: var(--p-oatmeal);
}
.pc__stat-label {
font-family: var(--f-sans);
font-size: 12px;
line-height: 1.35;
color: var(--p-oatmeal);
opacity: 0.72;
margin-top: 6px;
}
.pc__desc {
font-family: var(--f-sans);
font-size: 14px;
line-height: 1.6;
color: var(--p-oatmeal);
opacity: 0.82;
margin: 0;
text-wrap: pretty;
}
.pc__desc em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.pc__ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pc__cta {
padding: 14px 22px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-pill);
background: #2a2a2a;
color: var(--p-oatmeal);
text-decoration: none;
text-align: center;
font-family: var(--f-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid rgba(246,244,241,0.08);
transition:
background 250ms var(--ease-out-craft),
border-color 250ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft),
transform 120ms var(--ease-out-craft);
}
.pc__cta:hover {
background: #353535;
border-color: rgba(246,244,241,0.22);
}
.pc__cta:active { transform: scale(0.99); }
.pc__cta:focus-visible { outline: 2px solid var(--p-sage); outline-offset: 3px; }
.pc__cta--primary {
background: var(--p-oatmeal);
color: var(--p-charcoal);
border-color: var(--p-oatmeal);
box-shadow: 0 3px 12px -6px rgba(30, 55, 53, 0.4);
}
.pc__cta--primary:hover {
background: #fff;
box-shadow: 0 5px 16px -6px rgba(30, 55, 53, 0.5);
}
.pc__video {
grid-column: 2; grid-row: 2;
position: relative;
border-radius: 28px;
overflow: hidden;
background: #111;
min-height: 360px;
cursor: pointer;
isolation: isolate;
transition: transform 300ms var(--ease-out-craft), box-shadow 300ms var(--ease-out-craft);
}
.pc__video-img {
position: absolute; inset: 0;
background: url("https://cdn.jsdelivr.net/gh/purepurposekh/tracy-harris-brand-kit@main/assets/photos/tracy-outfit8-49.jpg") center 25% / cover;
filter: saturate(0.95) contrast(1.02);
transform: scale(1.06);
transition: transform 900ms var(--ease-in-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.pc__video:hover { transform: translateY(-3px); box-shadow: 0 28px 56px -20px rgba(0, 0, 0, 0.5); }
.pc__video:hover .pc__video-img { transform: scale(1.02); }
}
.pc__video::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(16,16,16,0.0) 0%,
rgba(16,16,16,0.0) 50%,
rgba(16,16,16,0.35) 100%);
z-index: 1;
}
.pc__video-play {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px 12px 18px;
background: rgba(246,244,241,0.92);
color: var(--p-charcoal);
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background 200ms var(--ease-out-craft), transform 200ms var(--ease-out-craft);
}
.pc__video:hover .pc__video-play {
background: #fff;
transform: translate(-50%, -50%) scale(1.05);
}
.pc__video:focus-visible { outline: 2px solid var(--p-sage); outline-offset: 3px; }
.pc__video-caption {
position: absolute;
left: 24px; bottom: 22px;
z-index: 2;
color: var(--p-oatmeal);
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.85;
}
@media (max-width: 820px) {
.pc {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
gap: 14px;
}
.pc__brand { grid-column: 1; grid-row: 1; min-height: 160px; padding: 28px; border-radius: 22px; }
.pc__brand-title { font-size: clamp(36px, 10vw, 56px); }
.pc__headline { grid-column: 1; grid-row: 2; padding: 10px 4px; }
.pc__headline h2 { font-size: clamp(26px, 7.5vw, 38px); }
.pc__copy { grid-column: 1; grid-row: 3; padding: 28px 24px; border-radius: 22px; }
.pc__stats { gap: 16px 20px; }
.pc__stat-value { font-size: 30px; }
.pc__video { grid-column: 1; grid-row: 4; min-height: 240px; border-radius: 22px; }
}
@media (max-width: 480px) {
.pc__ctas { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
.pc__brand,
.pc__headline,
.pc__copy,
.pc__video,
.pc__video-img {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.pc__video-img { transform: scale(1.02); }
}
```
```html
Freedom Filled® Business
Mentorship
12-month · application only
Mentorship for women building by design , not by default.
7+ yrs
running, refined with every cohort
~10%
Tracy's free-event to enrol conversion
A twelve-month container to build, price and sell your signature offer, with one-to-one coaching calls, live hot seats, and Tracy in your corner every step. Grounded in story, strategy, and spaciousness.
90 seconds · with Tracy
```
### product-callout.bento-ffb
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-charcoal);
color: var(--p-oatmeal);
-webkit-font-smoothing: antialiased;
}
.wrap {
max-width: 1280px;
margin: 0 auto;
padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 48px);
}
.pc {
display: grid;
grid-template-columns: 1fr 1.4fr;
grid-template-rows: auto auto;
gap: 20px;
color: var(--p-oatmeal);
}
.pc__brand {
grid-column: 1;
grid-row: 1;
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border-radius: 28px;
padding: 36px 32px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
min-height: 200px;
position: relative;
overflow: hidden;
}
.pc__brand::after {
content: "";
position: absolute;
inset: auto -40% -60% auto;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(201,164,108,0.18) 0%, transparent 70%);
pointer-events: none;
}
.pc__brand-eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-oatmeal);
opacity: 0.85;
margin: 0;
}
.pc__brand-title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(40px, 4.5vw, 64px);
line-height: 0.92;
letter-spacing: -0.01em;
margin: 0;
color: var(--p-oatmeal);
}
.pc__brand-title em { font-family: var(--f-serif-italic); font-style: italic; }
.pc__brand-trademark {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
margin: 6px 0 0;
opacity: 0.65;
}
.pc__headline {
grid-column: 2;
grid-row: 1;
display: flex;
align-items: center;
padding: 0 12px;
}
.pc__headline h2 {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(30px, 3.6vw, 52px);
line-height: 1.08;
letter-spacing: -0.01em;
color: var(--p-oatmeal);
margin: 0;
}
.pc__headline em { font-family: var(--f-serif-italic); font-style: italic; }
.pc__copy {
grid-column: 1;
grid-row: 2;
background: #1a1a1a;
border-radius: 28px;
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 20px;
}
.pc__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.pc__stat-value {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(32px, 3.2vw, 44px);
line-height: 1;
color: var(--p-oatmeal);
}
.pc__stat-label {
font-family: var(--f-sans);
font-size: 12px;
line-height: 1.35;
color: var(--p-oatmeal);
opacity: 0.72;
margin-top: 6px;
}
.pc__desc {
font-family: var(--f-sans);
font-size: 14px;
line-height: 1.6;
color: var(--p-oatmeal);
opacity: 0.82;
margin: 0;
}
.pc__desc em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.pc__ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pc__cta {
padding: 14px 22px;
border-radius: var(--r-pill);
background: #2a2a2a;
color: var(--p-oatmeal);
text-decoration: none;
text-align: center;
font-family: var(--f-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid rgba(246,244,241,0.08);
transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.pc__cta:hover {
background: #353535;
border-color: rgba(246,244,241,0.22);
transform: translateY(-1px);
}
.pc__cta--primary {
background: var(--p-oatmeal);
color: var(--p-charcoal);
border-color: var(--p-oatmeal);
}
.pc__cta--primary:hover { background: #fff; }
.pc__video {
grid-column: 2;
grid-row: 2;
position: relative;
border-radius: 28px;
overflow: hidden;
background: #111;
min-height: 360px;
cursor: pointer;
isolation: isolate;
}
.pc__video-img {
position: absolute; inset: 0;
background: url("../../../assets/photos/tracy-outfit8-49.jpg") center 25% / cover;
filter: saturate(0.95) contrast(1.02);
transition: transform .6s ease;
}
.pc__video:hover .pc__video-img { transform: scale(1.03); }
.pc__video::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(16,16,16,0.0) 0%,
rgba(16,16,16,0.0) 50%,
rgba(16,16,16,0.35) 100%);
z-index: 1;
}
.pc__video-play {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px 12px 18px;
background: rgba(246,244,241,0.92);
color: var(--p-charcoal);
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background .2s ease, transform .2s ease;
}
.pc__video:hover .pc__video-play { background: #fff; transform: translate(-50%, -50%) scale(1.05); }
.pc__video-caption {
position: absolute;
left: 24px; bottom: 22px;
z-index: 2;
color: var(--p-oatmeal);
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.85;
}
@media (max-width: 820px) {
.pc {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
gap: 14px;
}
.pc__brand { grid-column: 1; grid-row: 1; min-height: 160px; padding: 28px; border-radius: 22px; }
.pc__brand-title { font-size: clamp(36px, 10vw, 56px); }
.pc__headline { grid-column: 1; grid-row: 2; padding: 10px 4px; }
.pc__headline h2 { font-size: clamp(26px, 7.5vw, 38px); }
.pc__copy { grid-column: 1; grid-row: 3; padding: 28px 24px; border-radius: 22px; }
.pc__stats { gap: 16px 20px; }
.pc__stat-value { font-size: 30px; }
.pc__video { grid-column: 1; grid-row: 4; min-height: 240px; border-radius: 22px; }
}
@media (max-width: 480px) {
.pc__ctas { flex-direction: column; }
}
```
```html
Freedom Filled® Business
Mentorship
12-month · application only
Mentorship for women building by design , not by default.
7+ yrs
running, refined with every cohort
~10%
Tracy's free-event to enrol conversion
A twelve-month container to build, price and sell your signature offer, with one-to-one coaching calls, live hot seats, and Tracy in your corner every step. Grounded in story, strategy, and spaciousness.
90 seconds · with Tracy
```
### product-callout.clearer-polished
Wrapper context: ``
```css
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-cream);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.wrap--clear {
background: var(--p-cream);
color: var(--p-charcoal);
padding: clamp(56px, 8vw, 120px) clamp(20px, 4vw, 48px);
position: relative;
overflow: hidden;
isolation: isolate;
}
.wrap--clear::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 50% 40% at 30% 30%,
rgba(110, 142, 119, 0.08) 0%,
rgba(110, 142, 119, 0.0) 70%);
pointer-events: none;
z-index: 0;
}
.pcc {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.35fr;
grid-template-rows: auto auto;
gap: 24px;
color: var(--p-charcoal);
position: relative;
z-index: 1;
}
.pcc__brand,
.pcc__headline,
.pcc__copy,
.pcc__video {
opacity: 0;
transform: translateY(16px);
animation: pccRise 1000ms var(--ease-out-craft) forwards;
will-change: transform, opacity;
}
.pcc__brand { animation-delay: 180ms; }
.pcc__headline { animation-delay: 320ms; }
.pcc__copy { animation-delay: 460ms; }
.pcc__video { animation-delay: 600ms; }
@keyframes pccRise {
from { opacity: 0; transform: translateY(16px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.pcc__brand {
grid-column: 1; grid-row: 1;
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border-radius: 24px;
padding: 40px 36px;
display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
gap: 12px;
min-height: 220px;
position: relative;
overflow: hidden;
transition: transform 300ms var(--ease-out-craft), box-shadow 300ms var(--ease-out-craft);
box-shadow: 0 20px 40px -20px rgba(30, 55, 53, 0.4);
}
@media (hover: hover) and (pointer: fine) {
.pcc__brand:hover {
transform: translateY(-3px);
box-shadow: 0 28px 56px -18px rgba(30, 55, 53, 0.55);
}
}
.pcc__brand::after {
content: "";
position: absolute;
inset: auto -30% -50% auto;
width: 260px; height: 260px;
background: radial-gradient(circle, rgba(201,164,108,0.22) 0%, transparent 70%);
pointer-events: none;
}
.pcc__brand-eyebrow {
font-family: var(--f-sans);
font-size: 11px; font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-oatmeal);
opacity: 0.85;
margin: 0;
}
.pcc__brand-title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(44px, 5vw, 70px);
line-height: 0.94;
margin: 0;
text-wrap: balance;
}
.pcc__brand-title em { font-family: var(--f-serif-italic); font-style: italic; }
.pcc__brand-qualifier {
font-family: var(--f-sans);
font-size: 10px; font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
margin: 6px 0 0;
opacity: 0.65;
}
.pcc__headline { grid-column: 2; grid-row: 1; display: flex; align-items: center; padding: 0 16px; }
.pcc__headline h2 {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(32px, 3.8vw, 54px);
line-height: 1.06;
letter-spacing: -0.01em;
color: var(--p-charcoal);
margin: 0;
text-wrap: balance;
}
.pcc__headline em { font-family: var(--f-serif-italic); font-style: italic; }
.pcc__copy {
grid-column: 1; grid-row: 2;
background: var(--p-white);
border-radius: 24px;
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 22px;
box-shadow: 0 10px 32px rgba(16,16,16,0.08);
border: 1px solid rgba(16,16,16,0.05);
transition: transform 300ms var(--ease-out-craft), box-shadow 300ms var(--ease-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.pcc__copy:hover {
transform: translateY(-3px);
box-shadow: 0 16px 42px rgba(16,16,16,0.12);
}
}
.pcc__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.pcc__stat-value {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(30px, 3vw, 42px);
line-height: 1;
color: var(--p-ffb-dark);
}
.pcc__stat-value em { font-family: var(--f-serif-italic); font-style: italic; }
.pcc__stat-label {
font-family: var(--f-sans);
font-size: 12px;
line-height: 1.35;
color: var(--p-charcoal);
opacity: 0.7;
margin-top: 6px;
}
.pcc__desc {
font-family: var(--f-sans);
font-size: 14px;
line-height: 1.65;
color: var(--p-charcoal);
opacity: 0.86;
margin: 0;
text-wrap: pretty;
}
.pcc__desc em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.pcc__ctas { display: flex; flex-direction: column; gap: 10px; }
.pcc__cta {
padding: 14px 22px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-pill);
text-decoration: none;
text-align: center;
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid rgba(16,16,16,0.12);
background: var(--p-white);
color: var(--p-charcoal);
transition:
background 250ms var(--ease-out-craft),
color 250ms var(--ease-out-craft),
border-color 250ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft),
transform 120ms var(--ease-out-craft);
}
.pcc__cta:hover {
border-color: var(--p-ffb-dark);
color: var(--p-ffb-dark);
}
.pcc__cta:active { transform: scale(0.99); }
.pcc__cta:focus-visible { outline: 2px solid var(--p-aztek); outline-offset: 3px; }
.pcc__cta--primary {
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border-color: var(--p-ffb-dark);
box-shadow: 0 3px 12px -6px rgba(30, 55, 53, 0.4);
}
.pcc__cta--primary:hover {
background: #122624;
color: var(--p-oatmeal);
border-color: #122624;
box-shadow: 0 5px 16px -6px rgba(30, 55, 53, 0.5);
}
.pcc__video {
grid-column: 2; grid-row: 2;
position: relative;
border-radius: 24px;
overflow: hidden;
background: #111;
min-height: 420px;
cursor: pointer;
isolation: isolate;
box-shadow: 0 20px 48px -20px rgba(16,16,16,0.28);
text-decoration: none;
display: block;
transition: transform 300ms var(--ease-out-craft), box-shadow 300ms var(--ease-out-craft);
}
.pcc__video-img {
position: absolute; inset: 0;
background: url("https://cdn.jsdelivr.net/gh/purepurposekh/tracy-harris-brand-kit@main/assets/photos/tracy-outfit8-49.jpg") center 18% / cover;
filter: saturate(1) contrast(1.04);
transform: scale(1.06);
transition: transform 900ms var(--ease-in-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.pcc__video:hover {
transform: translateY(-4px);
box-shadow: 0 28px 60px -18px rgba(16,16,16,0.4);
}
.pcc__video:hover .pcc__video-img { transform: scale(1.025); }
}
.pcc__video::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse 75% 60% at 50% 55%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 60%),
linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
z-index: 1;
}
.pcc__video-play {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 64px; height: 64px;
border-radius: 50%;
background: rgba(246,244,241,0.96);
color: var(--p-charcoal);
display: inline-flex; align-items: center; justify-content: center;
transition: transform .25s var(--ease-out-craft), background .25s var(--ease-out-craft);
border: 0;
cursor: pointer;
box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
.pcc__video:hover .pcc__video-play {
transform: translate(-50%, -50%) scale(1.04);
background: #fff;
}
.pcc__video:focus-visible { outline: 2px solid var(--p-aztek); outline-offset: 3px; }
.pcc__video-name {
position: absolute; left: 18px; top: 18px; z-index: 2;
padding: 6px 12px; border-radius: var(--r-pill);
background: rgba(16,16,16,0.45);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
font-family: var(--f-sans);
font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase;
color: var(--p-oatmeal);
}
.pcc__video-caption {
position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2;
color: var(--p-oatmeal);
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
}
.pcc__video-caption-title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(16px, 1.6vw, 20px);
line-height: 1.2;
margin: 0;
text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}
.pcc__video-caption-title em { font-family: var(--f-serif-italic); font-style: italic; }
.pcc__video-caption-meta {
font-family: var(--f-sans);
font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase;
opacity: 0.82;
margin: 0;
white-space: nowrap;
flex-shrink: 0;
}
@media (max-width: 820px) {
.pcc { display: flex; flex-direction: column; gap: 14px; }
.pcc__brand { order: 1; min-height: 160px; padding: 28px 26px; border-radius: 20px; }
.pcc__brand-title { font-size: clamp(34px, 9vw, 52px); }
.pcc__headline { order: 2; padding: 4px 2px; }
.pcc__headline h2 { font-size: clamp(26px, 7vw, 36px); }
.pcc__video { order: 3; min-height: 260px; border-radius: 20px; }
.pcc__video-play { width: 58px; height: 58px; }
.pcc__video-name { left: 14px; top: 14px; font-size: 9px; letter-spacing: 0.2em; }
.pcc__video-caption { left: 16px; right: 16px; bottom: 14px; flex-direction: column; align-items: flex-start; gap: 4px; }
.pcc__video-caption-title { font-size: 15px; }
.pcc__copy { order: 4; padding: 26px 22px; border-radius: 20px; }
.pcc__stats { gap: 14px 18px; }
.pcc__stat-value { font-size: 26px; }
.pcc__stat-label { font-size: 11px; }
}
@media (max-width: 400px) {
.pcc__stats { grid-template-columns: 1fr; gap: 12px; }
.pcc__video { min-height: 220px; }
.pcc__video-play { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
.pcc__brand,
.pcc__headline,
.pcc__copy,
.pcc__video,
.pcc__video-img {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.pcc__video-img { transform: scale(1.02); }
}
```
```html
Freedom Filled® Business
Mentorship
12-month · application only
Mentorship for women building by design .
7+ yrs
running, refined with every cohort
~10%
Tracy's free-event to enrol rate
A twelve-month container to build, price and sell your signature offer, with Tracy walking alongside you every season. Grounded in story, strategy, and spaciousness.
With Tracy
A 90-second walkthrough
1:28
```
### product-callout.clearer
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-cream);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
.wrap--clear {
background: var(--p-cream);
color: var(--p-charcoal);
padding: clamp(56px, 8vw, 120px) clamp(20px, 4vw, 48px);
}
.pcc {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.35fr;
grid-template-rows: auto auto;
gap: 24px;
color: var(--p-charcoal);
}
.pcc__brand {
grid-column: 1; grid-row: 1;
background: var(--p-ffb-dark); color: var(--p-oatmeal);
border-radius: 24px; padding: 40px 36px;
display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
gap: 12px; min-height: 220px; position: relative; overflow: hidden;
box-shadow: 0 20px 40px rgba(30,55,53,0.2);
}
.pcc__brand::after {
content: ""; position: absolute; inset: auto -30% -50% auto;
width: 260px; height: 260px;
background: radial-gradient(circle, rgba(201,164,108,0.22) 0%, transparent 70%);
pointer-events: none;
}
.pcc__brand-eyebrow { font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--p-oatmeal); opacity: 0.85; margin: 0; }
.pcc__brand-title { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(44px, 5vw, 70px); line-height: 0.94; margin: 0; }
.pcc__brand-title em { font-family: var(--f-serif-italic); font-style: italic; }
.pcc__brand-qualifier { font-family: var(--f-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; margin: 6px 0 0; opacity: 0.65; }
.pcc__headline { grid-column: 2; grid-row: 1; display: flex; align-items: center; padding: 0 16px; }
.pcc__headline h2 { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(32px, 3.8vw, 54px); line-height: 1.06; letter-spacing: -0.01em; color: var(--p-charcoal); margin: 0; }
.pcc__headline em { font-family: var(--f-serif-italic); font-style: italic; }
.pcc__copy {
grid-column: 1; grid-row: 2;
background: var(--p-white); border-radius: 24px; padding: 36px 32px;
display: flex; flex-direction: column; gap: 22px;
box-shadow: 0 10px 32px rgba(16,16,16,0.08);
border: 1px solid rgba(16,16,16,0.05);
}
.pcc__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.pcc__stat-value { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(30px, 3vw, 42px); line-height: 1; color: var(--p-ffb-dark); }
.pcc__stat-value em { font-family: var(--f-serif-italic); font-style: italic; }
.pcc__stat-label { font-family: var(--f-sans); font-size: 12px; line-height: 1.35; color: var(--p-charcoal); opacity: 0.7; margin-top: 6px; }
.pcc__desc { font-family: var(--f-sans); font-size: 14px; line-height: 1.65; color: var(--p-charcoal); opacity: 0.86; margin: 0; }
.pcc__desc em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.pcc__ctas { display: flex; flex-direction: column; gap: 10px; }
.pcc__cta {
padding: 14px 22px; border-radius: var(--r-pill); text-decoration: none; text-align: center;
font-family: var(--f-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
border: 1px solid rgba(16,16,16,0.12); background: var(--p-white); color: var(--p-charcoal);
transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.pcc__cta:hover { border-color: var(--p-ffb-dark); color: var(--p-ffb-dark); transform: translateY(-1px); }
.pcc__cta--primary { background: var(--p-ffb-dark); color: var(--p-oatmeal); border-color: var(--p-ffb-dark); }
.pcc__cta--primary:hover { background: #122624; color: var(--p-oatmeal); border-color: #122624; }
.pcc__video {
grid-column: 2; grid-row: 2; position: relative;
border-radius: 24px; overflow: hidden; background: #111;
min-height: 420px; cursor: pointer; isolation: isolate;
box-shadow: 0 20px 48px rgba(16,16,16,0.18);
text-decoration: none; display: block;
}
.pcc__video-img { position: absolute; inset: 0; background: url("../../../assets/photos/tracy-outfit8-49.jpg") center 18% / cover; filter: saturate(1) contrast(1.04); transition: transform .7s ease; }
.pcc__video:hover .pcc__video-img { transform: scale(1.04); }
.pcc__video::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse 75% 60% at 50% 55%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
z-index: 1;
}
.pcc__video-play {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
width: 64px; height: 64px; border-radius: 50%;
background: rgba(246,244,241,0.96); color: var(--p-charcoal);
display: inline-flex; align-items: center; justify-content: center;
transition: transform .25s ease, background .25s ease;
border: 0; cursor: pointer;
box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
.pcc__video:hover .pcc__video-play { transform: translate(-50%, -50%) scale(1.04); background: #fff; }
.pcc__video-name {
position: absolute; left: 18px; top: 18px; z-index: 2;
padding: 6px 12px; border-radius: var(--r-pill);
background: rgba(16,16,16,0.45);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
font-family: var(--f-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--p-oatmeal);
}
.pcc__video-caption {
position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2;
color: var(--p-oatmeal);
display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
}
.pcc__video-caption-title {
font-family: var(--f-serif-display); font-weight: 400;
font-size: clamp(16px, 1.6vw, 20px); line-height: 1.2;
margin: 0; text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}
.pcc__video-caption-title em { font-family: var(--f-serif-italic); font-style: italic; }
.pcc__video-caption-meta {
font-family: var(--f-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase;
opacity: 0.82; margin: 0; white-space: nowrap; flex-shrink: 0;
}
@media (max-width: 820px) {
.pcc { display: flex; flex-direction: column; gap: 14px; }
.pcc__brand { order: 1; min-height: 160px; padding: 28px 26px; border-radius: 20px; }
.pcc__brand-title { font-size: clamp(34px, 9vw, 52px); }
.pcc__headline { order: 2; padding: 4px 2px; }
.pcc__headline h2 { font-size: clamp(26px, 7vw, 36px); }
.pcc__video { order: 3; min-height: 260px; border-radius: 20px; }
.pcc__video-play { width: 58px; height: 58px; }
.pcc__video-name { left: 14px; top: 14px; font-size: 9px; letter-spacing: 0.2em; }
.pcc__video-caption { left: 16px; right: 16px; bottom: 14px; flex-direction: column; align-items: flex-start; gap: 4px; }
.pcc__video-caption-title { font-size: 15px; }
.pcc__copy { order: 4; padding: 26px 22px; border-radius: 20px; }
.pcc__stats { gap: 14px 18px; }
.pcc__stat-value { font-size: 26px; }
.pcc__stat-label { font-size: 11px; }
}
@media (max-width: 400px) {
.pcc__stats { grid-template-columns: 1fr; gap: 12px; }
.pcc__video { min-height: 220px; }
.pcc__video-play { width: 52px; height: 52px; }
}
```
```html
Freedom Filled® Business
Mentorship
12-month · application only
Mentorship for women building by design .
7+ yrs
running, refined with every cohort
~10%
Tracy's free-event to enrol rate
A twelve-month container to build, price and sell your signature offer, with Tracy walking alongside you every season. Grounded in story, strategy, and spaciousness.
With Tracy
A 90-second walkthrough
1:28
```
### product-callout.editorial-polished
Wrapper context: ``
```css
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-oatmeal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.wrap--editorial {
background: var(--p-oatmeal);
color: var(--p-charcoal);
padding: clamp(56px, 8vw, 120px) clamp(20px, 4vw, 48px);
position: relative;
overflow: hidden;
isolation: isolate;
}
.wrap--editorial::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 50% at 70% 30%,
rgba(110, 142, 119, 0.08) 0%,
rgba(110, 142, 119, 0.0) 70%);
pointer-events: none;
z-index: 0;
}
.pce {
max-width: 1180px;
margin: 0 auto;
color: var(--p-charcoal);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
position: relative;
z-index: 1;
}
.pce__media {
position: relative;
border-radius: 4px;
overflow: hidden;
aspect-ratio: 4 / 5;
cursor: pointer;
text-decoration: none;
opacity: 0;
transform: translateY(18px) scale(0.98);
animation: pceMediaReveal 1100ms var(--ease-drawer) 200ms forwards;
transition: transform 400ms var(--ease-out-craft), box-shadow 400ms var(--ease-out-craft);
box-shadow: 0 24px 48px -24px rgba(30, 55, 53, 0.35);
}
@keyframes pceMediaReveal {
from { opacity: 0; transform: translateY(18px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.pce__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 25%;
display: block;
filter: saturate(0.95) contrast(1.02);
transition: transform 900ms var(--ease-in-out-craft), filter 300ms var(--ease-out-craft);
transform: scale(1.06);
}
@media (hover: hover) and (pointer: fine) {
.pce:hover .pce__media {
transform: translateY(-4px);
box-shadow: 0 32px 56px -20px rgba(30, 55, 53, 0.42);
}
.pce:hover .pce__media img { transform: scale(1.025); filter: saturate(1) contrast(1.04); }
}
.pce__media::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(ellipse 45% 35% at 50% 50%, rgba(16,16,16,0.28) 0%, rgba(16,16,16,0.08) 60%, rgba(16,16,16,0.0) 85%),
linear-gradient(180deg, rgba(16,16,16,0) 55%, rgba(16,16,16,0.35) 100%);
pointer-events: none;
transition: opacity .3s ease;
opacity: 0.9;
}
.pce__media:hover::after { opacity: 1; }
.pce__media:focus-visible { outline: 2px solid var(--p-aztek); outline-offset: 4px; }
.pce__media-badge {
position: absolute; left: 20px; top: 20px; z-index: 2;
font-family: var(--f-script);
font-weight: 400;
font-size: clamp(28px, 3vw, 40px);
color: var(--p-oatmeal);
line-height: 1;
opacity: 0.95;
text-shadow: 0 2px 12px rgba(16,16,16,0.4);
}
.pce__play {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 72px; height: 72px;
border-radius: 50%;
background: rgba(246,244,241,0.96);
color: var(--p-charcoal);
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
cursor: pointer;
box-shadow: 0 10px 28px rgba(16,16,16,0.28);
transition: transform .25s var(--ease-out-craft), background .25s var(--ease-out-craft);
padding: 0;
}
.pce__play svg { margin-left: 3px; }
.pce:hover .pce__play { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.pce__duration {
position: absolute; right: 14px; top: 14px; z-index: 2;
padding: 5px 10px; border-radius: var(--r-pill);
background: rgba(16,16,16,0.55);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
color: var(--p-oatmeal);
font-family: var(--f-sans);
font-size: 10px; font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.pce__watch {
position: absolute; left: 14px; bottom: 14px; right: 14px; z-index: 2;
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
padding: 12px 16px;
border-radius: var(--r-pill);
background: rgba(246,244,241,0.96);
color: var(--p-charcoal);
font-family: var(--f-sans);
font-size: 11px; font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
transition: background .2s var(--ease-out-craft);
}
.pce__watch:hover { background: #fff; }
.pce__watch-arrow { display: inline-flex; align-items: center; gap: 6px; opacity: 0.7; }
.pce__copy { padding: 8px 0; }
.pce__eyebrow,
.pce__title,
.pce__script,
.pce__desc,
.pce__meta,
.pce__ctas,
.pce__signature {
opacity: 0;
transform: translateY(14px);
animation: pceRise 900ms var(--ease-out-craft) forwards;
will-change: transform, opacity;
}
.pce__eyebrow { animation-delay: 260ms; }
.pce__title { animation-delay: 400ms; }
.pce__script { animation-delay: 520ms; }
.pce__desc { animation-delay: 640ms; }
.pce__meta { animation-delay: 760ms; }
.pce__ctas { animation-delay: 880ms; }
.pce__signature { animation-delay: 1000ms; }
@keyframes pceRise {
from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.pce__eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--p-ffb-dark);
margin: 0 0 16px;
}
.pce__eyebrow::after {
content: "";
display: block;
width: 40px;
height: 1px;
background: var(--p-ffb-dark);
margin-top: 10px;
opacity: 0.35;
}
.pce__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(34px, 4.2vw, 60px);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--p-charcoal);
margin: 0 0 18px;
text-wrap: balance;
}
.pce__title em { font-family: var(--f-serif-italic); font-style: italic; }
.pce__script {
font-family: var(--f-script);
font-weight: 400;
font-size: clamp(22px, 2.4vw, 30px);
color: var(--p-ffb-dark);
margin: -6px 0 18px;
line-height: 1.1;
}
.pce__desc {
font-family: var(--f-sans);
font-size: 15px;
line-height: 1.72;
color: var(--p-charcoal);
opacity: 0.86;
margin: 0 0 24px;
max-width: 48ch;
text-wrap: pretty;
}
.pce__desc em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.pce__meta {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 24px 40px;
margin: 0 0 28px;
padding: 18px 0;
border-top: 1px solid rgba(16,16,16,0.12);
border-bottom: 1px solid rgba(16,16,16,0.12);
}
.pce__meta-value {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1;
color: var(--p-charcoal);
}
.pce__meta-value em { font-family: var(--f-serif-italic); font-style: italic; }
.pce__meta-label {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--p-charcoal);
opacity: 0.65;
margin-top: 6px;
}
.pce__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.pce__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
min-height: 48px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
transition:
background 200ms var(--ease-out-craft),
color 200ms var(--ease-out-craft),
border-color 200ms var(--ease-out-craft),
transform 180ms var(--ease-out-craft),
box-shadow 220ms var(--ease-out-craft);
}
.pce__cta--primary {
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border: 1px solid var(--p-ffb-dark);
box-shadow: 0 8px 24px -12px rgba(30, 55, 53, 0.55);
}
.pce__cta--primary:hover {
background: #122624;
border-color: #122624;
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px rgba(30, 55, 53, 0.65);
}
.pce__cta--primary:active { transform: translateY(0) scale(0.98); }
.pce__cta--primary:focus-visible { outline: 2px solid var(--p-aztek); outline-offset: 3px; }
.pce__cta--ghost {
background: transparent;
color: var(--p-charcoal);
border: 1px solid rgba(16,16,16,0.3);
}
.pce__cta--ghost:hover { border-color: var(--p-charcoal); transform: translateY(-2px); }
.pce__cta--ghost:active { transform: translateY(0) scale(0.98); }
.pce__cta--ghost:focus-visible { outline: 1px solid var(--p-charcoal); outline-offset: 4px; }
.pce__signature {
font-family: var(--f-script);
font-weight: 400;
font-size: 22px;
color: var(--p-ffb-dark);
margin: 20px 0 0;
opacity: 0.8;
}
@media (max-width: 820px) {
.pce { grid-template-columns: 1fr; gap: 28px; }
.pce__media { aspect-ratio: 4 / 4.2; }
.pce__title { font-size: clamp(30px, 9vw, 44px); }
.pce__meta { gap: 16px 24px; }
.pce__meta-value { font-size: 22px; }
}
@media (max-width: 480px) {
.pce__ctas { flex-direction: column; }
.pce__cta { justify-content: center; }
.pce__meta { grid-template-columns: 1fr; gap: 12px 0; padding: 14px 0; }
.pce__meta-value { font-size: 20px; }
.pce__meta-label { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.pce__media,
.pce__media img,
.pce__eyebrow,
.pce__title,
.pce__script,
.pce__desc,
.pce__meta,
.pce__ctas,
.pce__signature {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.pce__media img { transform: scale(1.02); }
}
```
```html
Freedom Filled®
1:28
Watch walkthrough with Tracy
Freedom Filled® Business Mentorship
Mentorship for women building by design , not by default.
Peace, Profit, Presence.
A twelve-month container to build, price and sell your signature offer, with one-to-one coaching calls, live hot seats, and Tracy walking alongside you every season. Grounded in story, strategy, spaciousness .
Xx Tracy
```
### product-callout.editorial
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-oatmeal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
.wrap--editorial {
background: var(--p-oatmeal);
color: var(--p-charcoal);
padding: clamp(56px, 8vw, 120px) clamp(20px, 4vw, 48px);
}
.pce {
max-width: 1180px;
margin: 0 auto;
color: var(--p-charcoal);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.pce__media {
position: relative;
border-radius: 4px;
overflow: hidden;
aspect-ratio: 4 / 5;
cursor: pointer;
text-decoration: none;
}
.pce__media img {
width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
display: block; filter: saturate(0.95) contrast(1.02);
transition: transform .8s ease, filter .3s ease;
}
.pce:hover .pce__media img { transform: scale(1.025); filter: saturate(1) contrast(1.04); }
.pce__media::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(ellipse 45% 35% at 50% 50%, rgba(16,16,16,0.28) 0%, rgba(16,16,16,0.08) 60%, rgba(16,16,16,0.0) 85%),
linear-gradient(180deg, rgba(16,16,16,0) 55%, rgba(16,16,16,0.35) 100%);
pointer-events: none; transition: opacity .3s ease; opacity: 0.9;
}
.pce__media:hover::after { opacity: 1; }
.pce__media-badge {
position: absolute; left: 20px; top: 20px; z-index: 2;
font-family: 'Jhon Halend', cursive; font-weight: 400;
font-size: clamp(28px, 3vw, 40px); color: var(--p-oatmeal);
line-height: 1; opacity: 0.95; text-shadow: 0 2px 12px rgba(16,16,16,0.4);
}
.pce__play {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
width: 72px; height: 72px; border-radius: 50%;
background: rgba(246,244,241,0.96); color: var(--p-charcoal);
display: inline-flex; align-items: center; justify-content: center;
border: 0; cursor: pointer;
box-shadow: 0 10px 28px rgba(16,16,16,0.28);
transition: transform .25s ease, background .25s ease;
padding: 0;
}
.pce__play svg { margin-left: 3px; }
.pce:hover .pce__play { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.pce__duration {
position: absolute; right: 14px; top: 14px; z-index: 2;
padding: 5px 10px; border-radius: var(--r-pill);
background: rgba(16,16,16,0.55);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
color: var(--p-oatmeal); font-family: var(--f-sans);
font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
}
.pce__watch {
position: absolute; left: 14px; bottom: 14px; right: 14px; z-index: 2;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 12px 16px; border-radius: var(--r-pill);
background: rgba(246,244,241,0.96); color: var(--p-charcoal);
font-family: var(--f-sans); font-size: 11px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
transition: background .2s ease;
}
.pce__watch:hover { background: #fff; }
.pce__watch-arrow { display: inline-flex; align-items: center; gap: 6px; opacity: 0.7; }
.pce__copy { padding: 8px 0; }
.pce__eyebrow {
font-family: var(--f-sans); font-size: 11px; font-weight: 600;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--p-ffb-dark); margin: 0 0 16px;
}
.pce__eyebrow::after {
content: ""; display: block; width: 40px; height: 1px;
background: var(--p-ffb-dark); margin-top: 10px; opacity: 0.35;
}
.pce__title {
font-family: var(--f-serif-display); font-weight: 400;
font-size: clamp(34px, 4.2vw, 60px); line-height: 1.05;
letter-spacing: -0.01em; color: var(--p-charcoal); margin: 0 0 18px;
}
.pce__title em { font-family: var(--f-serif-italic); font-style: italic; }
.pce__script {
font-family: 'Jhon Halend', cursive; font-weight: 400;
font-size: clamp(22px, 2.4vw, 30px); color: var(--p-ffb-dark);
margin: -6px 0 18px; line-height: 1.1;
}
.pce__desc {
font-family: var(--f-sans); font-size: 15px; line-height: 1.72;
color: var(--p-charcoal); opacity: 0.86; margin: 0 0 24px; max-width: 48ch;
}
.pce__desc em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.pce__meta {
display: grid; grid-template-columns: repeat(3, auto);
gap: 24px 40px; margin: 0 0 28px; padding: 18px 0;
border-top: 1px solid rgba(16,16,16,0.12);
border-bottom: 1px solid rgba(16,16,16,0.12);
}
.pce__meta-value { font-family: var(--f-serif-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1; color: var(--p-charcoal); }
.pce__meta-value em { font-family: var(--f-serif-italic); font-style: italic; }
.pce__meta-label { font-family: var(--f-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--p-charcoal); opacity: 0.65; margin-top: 6px; }
.pce__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.pce__cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: var(--r-pill); font-family: var(--f-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.pce__cta--primary { background: var(--p-ffb-dark); color: var(--p-oatmeal); border: 1px solid var(--p-ffb-dark); }
.pce__cta--primary:hover { background: #122624; border-color: #122624; transform: translateY(-1px); }
.pce__cta--ghost { background: transparent; color: var(--p-charcoal); border: 1px solid rgba(16,16,16,0.3); }
.pce__cta--ghost:hover { border-color: var(--p-charcoal); }
.pce__signature { font-family: 'Jhon Halend', cursive; font-weight: 400; font-size: 22px; color: var(--p-ffb-dark); margin: 20px 0 0; opacity: 0.8; }
@media (max-width: 820px) {
.pce { grid-template-columns: 1fr; gap: 28px; }
.pce__media { aspect-ratio: 4 / 4.2; }
.pce__title { font-size: clamp(30px, 9vw, 44px); }
.pce__meta { gap: 16px 24px; }
.pce__meta-value { font-size: 22px; }
}
@media (max-width: 480px) {
.pce__ctas { flex-direction: column; }
.pce__cta { justify-content: center; }
.pce__meta { grid-template-columns: 1fr; gap: 12px 0; padding: 14px 0; }
.pce__meta-value { font-size: 20px; }
.pce__meta-label { margin-top: 4px; }
}
```
```html
Freedom Filled®
1:28
Watch walkthrough with Tracy
Freedom Filled® Business Mentorship
Mentorship for women building by design , not by default.
Peace, Profit, Presence.
A twelve-month container to build, price and sell your signature offer, with one-to-one coaching calls, live hot seats, and Tracy walking alongside you every season. Grounded in story, strategy, spaciousness .
Xx Tracy
```
### product-callout.showcase
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-charcoal);
color: var(--p-oatmeal);
-webkit-font-smoothing: antialiased;
}
.wrap {
max-width: 1280px;
margin: 0 auto;
padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 48px);
}
.page-h {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.1;
margin: 0 0 8px;
color: var(--p-oatmeal);
}
.page-h em { font-family: var(--f-serif-italic); font-style: italic; }
.page-p {
font-size: 15px; line-height: 1.65; max-width: 62ch;
margin: 0 0 40px; color: var(--p-oatmeal); opacity: 0.78;
}
/* -------- CALLOUT BENTO -------- */
.pc {
display: grid;
grid-template-columns: 1fr 1.4fr;
grid-template-rows: auto auto;
gap: 20px;
color: var(--p-oatmeal);
}
/* Top-left: brand card (replaces TR orange). */
.pc__brand {
grid-column: 1;
grid-row: 1;
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border-radius: 28px;
padding: 36px 32px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
min-height: 200px;
position: relative;
overflow: hidden;
}
.pc__brand::after {
content: "";
position: absolute;
inset: auto -40% -60% auto;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(201,164,108,0.18) 0%, transparent 70%);
pointer-events: none;
}
.pc__brand-eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-oatmeal);
opacity: 0.85;
margin: 0;
}
.pc__brand-title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(40px, 4.5vw, 64px);
line-height: 0.92;
letter-spacing: -0.01em;
margin: 0;
color: var(--p-oatmeal);
}
.pc__brand-title em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.pc__brand-trademark {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
margin: 6px 0 0;
opacity: 0.65;
}
/* Top-right: headline */
.pc__headline {
grid-column: 2;
grid-row: 1;
display: flex;
align-items: center;
padding: 0 12px;
}
.pc__headline h2 {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(30px, 3.6vw, 52px);
line-height: 1.08;
letter-spacing: -0.01em;
color: var(--p-oatmeal);
margin: 0;
}
.pc__headline em {
font-family: var(--f-serif-italic);
font-style: italic;
}
/* Bottom-left: stats + description + ctas */
.pc__copy {
grid-column: 1;
grid-row: 2;
background: #1a1a1a;
border-radius: 28px;
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 20px;
}
.pc__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 28px;
}
.pc__stat-value {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(32px, 3.2vw, 44px);
line-height: 1;
color: var(--p-oatmeal);
}
.pc__stat-label {
font-family: var(--f-sans);
font-size: 12px;
font-weight: 400;
line-height: 1.35;
color: var(--p-oatmeal);
opacity: 0.72;
margin-top: 6px;
}
.pc__desc {
font-family: var(--f-sans);
font-size: 14px;
line-height: 1.6;
color: var(--p-oatmeal);
opacity: 0.82;
margin: 0;
}
.pc__desc em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.pc__ctas {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
}
.pc__cta {
padding: 14px 22px;
border-radius: var(--r-pill);
background: #2a2a2a;
color: var(--p-oatmeal);
text-decoration: none;
text-align: center;
font-family: var(--f-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid rgba(246,244,241,0.08);
transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.pc__cta:hover {
background: #353535;
border-color: rgba(246,244,241,0.22);
transform: translateY(-1px);
}
.pc__cta--primary {
background: var(--p-oatmeal);
color: var(--p-charcoal);
border-color: var(--p-oatmeal);
}
.pc__cta--primary:hover { background: #fff; }
/* Bottom-right: video thumbnail */
.pc__video {
grid-column: 2;
grid-row: 2;
position: relative;
border-radius: 28px;
overflow: hidden;
background: #111;
min-height: 360px;
cursor: pointer;
isolation: isolate;
}
.pc__video-img {
position: absolute; inset: 0;
background: url("../../../assets/photos/tracy-outfit8-49.jpg") center 25% / cover;
filter: saturate(0.95) contrast(1.02);
transition: transform .6s ease;
}
.pc__video:hover .pc__video-img { transform: scale(1.03); }
.pc__video::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(16,16,16,0.0) 0%,
rgba(16,16,16,0.0) 50%,
rgba(16,16,16,0.35) 100%);
z-index: 1;
}
.pc__video-play {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px 12px 18px;
background: rgba(246,244,241,0.92);
color: var(--p-charcoal);
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background .2s ease, transform .2s ease;
}
.pc__video:hover .pc__video-play { background: #fff; transform: translate(-50%, -50%) scale(1.05); }
.pc__video-caption {
position: absolute;
left: 24px; bottom: 22px;
z-index: 2;
color: var(--p-oatmeal);
font-family: var(--f-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.85;
}
/* -------- VARIANT B (Elite Coaching, gold) -------- */
.pc.pc--elite .pc__brand {
background: linear-gradient(135deg, #7b623c 0%, #c9a46c 70%, #ddc18f 100%);
color: #1a1a1a;
}
.pc.pc--elite .pc__brand-eyebrow,
.pc.pc--elite .pc__brand-title,
.pc.pc--elite .pc__brand-trademark { color: #1a1a1a; }
.pc.pc--elite .pc__brand::after {
background: radial-gradient(circle, rgba(16,16,16,0.15) 0%, transparent 70%);
}
/* -------- SECTION DIVIDER -------- */
.divider {
height: 1px;
background: rgba(246,244,241,0.1);
margin: 80px 0 40px;
}
/* ==================================================================== */
/* VARIANT C, EDITORIAL (on-brand Tracy Harris, cream canvas) */
/* ==================================================================== */
.wrap--editorial {
background: var(--p-oatmeal);
color: var(--p-charcoal);
padding: clamp(56px, 8vw, 120px) clamp(20px, 4vw, 48px);
margin-top: 0;
}
.wrap--editorial .page-h { color: var(--p-charcoal); }
.wrap--editorial .page-p { color: var(--p-charcoal); opacity: 0.72; }
.pce {
max-width: 1180px;
margin: 0 auto;
color: var(--p-charcoal);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.pce__media {
position: relative;
border-radius: 4px;
overflow: hidden;
aspect-ratio: 4 / 5;
cursor: pointer;
}
.pce__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%;
display: block;
filter: saturate(0.95) contrast(1.02);
transition: transform .8s ease, filter .3s ease;
}
.pce:hover .pce__media img { transform: scale(1.025); filter: saturate(1) contrast(1.04); }
/* Subtle radial vignette behind the play button, lifts it without ruining the editorial feel */
.pce__media::after {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse 45% 35% at 50% 50%,
rgba(16,16,16,0.28) 0%,
rgba(16,16,16,0.08) 60%,
rgba(16,16,16,0.0) 85%),
linear-gradient(180deg,
rgba(16,16,16,0) 55%,
rgba(16,16,16,0.35) 100%);
pointer-events: none;
transition: opacity .3s ease;
opacity: 0.9;
}
.pce__media:hover::after { opacity: 1; }
.pce__media-badge {
position: absolute;
left: 20px; top: 20px;
z-index: 2;
font-family: 'Jhon Halend', cursive;
font-weight: 400;
font-size: clamp(28px, 3vw, 40px);
color: var(--p-oatmeal);
line-height: 1;
opacity: 0.95;
text-shadow: 0 2px 12px rgba(16,16,16,0.4);
}
/* Central play button, obvious video signal, still quiet */
.pce__play {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 72px; height: 72px;
border-radius: 50%;
background: rgba(246,244,241,0.96);
color: var(--p-charcoal);
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
cursor: pointer;
box-shadow: 0 10px 28px rgba(16,16,16,0.28);
transition: transform .25s ease, background .25s ease;
padding: 0;
}
.pce__play svg { margin-left: 3px; }
.pce:hover .pce__play { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
/* Duration chip, top-right, small, editorial */
.pce__duration {
position: absolute;
right: 14px; top: 14px;
z-index: 2;
padding: 5px 10px;
border-radius: var(--r-pill);
background: rgba(16,16,16,0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--p-oatmeal);
font-family: var(--f-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.pce__watch {
position: absolute;
left: 14px; bottom: 14px;
right: 14px;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 16px;
border-radius: var(--r-pill);
background: rgba(246,244,241,0.96);
color: var(--p-charcoal);
font-family: var(--f-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
transition: background .2s ease;
}
.pce__watch:hover { background: #fff; }
.pce__watch-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
opacity: 0.7;
}
.pce__copy {
padding: 8px 0;
}
.pce__eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--p-ffb-dark);
margin: 0 0 16px;
}
.pce__eyebrow::after {
content: "";
display: block;
width: 40px;
height: 1px;
background: var(--p-ffb-dark);
margin-top: 10px;
opacity: 0.35;
}
.pce__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(34px, 4.2vw, 60px);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--p-charcoal);
margin: 0 0 18px;
}
.pce__title em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.pce__script {
font-family: 'Jhon Halend', cursive;
font-weight: 400;
font-size: clamp(22px, 2.4vw, 30px);
color: var(--p-ffb-dark);
margin: -6px 0 18px;
line-height: 1.1;
}
.pce__desc {
font-family: var(--f-sans);
font-size: 15px;
line-height: 1.72;
color: var(--p-charcoal);
opacity: 0.86;
margin: 0 0 24px;
max-width: 48ch;
}
.pce__desc em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.pce__meta {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 24px 40px;
margin: 0 0 28px;
padding: 18px 0;
border-top: 1px solid rgba(16,16,16,0.12);
border-bottom: 1px solid rgba(16,16,16,0.12);
}
.pce__meta-value {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1;
color: var(--p-charcoal);
}
.pce__meta-value em { font-family: var(--f-serif-italic); font-style: italic; }
.pce__meta-label {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--p-charcoal);
opacity: 0.65;
margin-top: 6px;
}
.pce__ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.pce__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
border-radius: var(--r-pill);
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.pce__cta--primary {
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border: 1px solid var(--p-ffb-dark);
}
.pce__cta--primary:hover { background: #122624; border-color: #122624; transform: translateY(-1px); }
.pce__cta--ghost {
background: transparent;
color: var(--p-charcoal);
border: 1px solid rgba(16,16,16,0.3);
}
.pce__cta--ghost:hover { border-color: var(--p-charcoal); }
/* Signature mark */
.pce__signature {
font-family: 'Jhon Halend', cursive;
font-weight: 400;
font-size: 22px;
color: var(--p-ffb-dark);
margin: 20px 0 0;
opacity: 0.8;
}
/* ==================================================================== */
/* VARIANT D, BENTO, CLEARER (cream canvas, tactile cards, big video) */
/* ==================================================================== */
.wrap--clear {
background: var(--p-cream);
color: var(--p-charcoal);
padding: clamp(56px, 8vw, 120px) clamp(20px, 4vw, 48px);
}
.wrap--clear .page-h { color: var(--p-charcoal); }
.wrap--clear .page-p { color: var(--p-charcoal); opacity: 0.72; }
.pcc {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.35fr;
grid-template-rows: auto auto;
gap: 24px;
color: var(--p-charcoal);
}
/* Brand card top-left */
.pcc__brand {
grid-column: 1;
grid-row: 1;
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border-radius: 24px;
padding: 40px 36px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
min-height: 220px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 40px rgba(30,55,53,0.2);
}
.pcc__brand::after {
content: "";
position: absolute;
inset: auto -30% -50% auto;
width: 260px; height: 260px;
background: radial-gradient(circle, rgba(201,164,108,0.22) 0%, transparent 70%);
pointer-events: none;
}
.pcc__brand-eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-oatmeal);
opacity: 0.85;
margin: 0;
}
.pcc__brand-title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(44px, 5vw, 70px);
line-height: 0.94;
margin: 0;
}
.pcc__brand-title em { font-family: var(--f-serif-italic); font-style: italic; }
.pcc__brand-qualifier {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
margin: 6px 0 0;
opacity: 0.65;
}
/* Headline top-right */
.pcc__headline {
grid-column: 2;
grid-row: 1;
display: flex;
align-items: center;
padding: 0 16px;
}
.pcc__headline h2 {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(32px, 3.8vw, 54px);
line-height: 1.06;
letter-spacing: -0.01em;
color: var(--p-charcoal);
margin: 0;
}
.pcc__headline em { font-family: var(--f-serif-italic); font-style: italic; }
/* Copy card bottom-left, WHITE on cream for clear contrast */
.pcc__copy {
grid-column: 1;
grid-row: 2;
background: var(--p-white);
border-radius: 24px;
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 22px;
box-shadow: 0 10px 32px rgba(16,16,16,0.08);
border: 1px solid rgba(16,16,16,0.05);
}
.pcc__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 28px;
}
.pcc__stat-value {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(30px, 3vw, 42px);
line-height: 1;
color: var(--p-ffb-dark);
}
.pcc__stat-value em { font-family: var(--f-serif-italic); font-style: italic; }
.pcc__stat-label {
font-family: var(--f-sans);
font-size: 12px;
font-weight: 400;
line-height: 1.35;
color: var(--p-charcoal);
opacity: 0.7;
margin-top: 6px;
}
.pcc__desc {
font-family: var(--f-sans);
font-size: 14px;
line-height: 1.65;
color: var(--p-charcoal);
opacity: 0.86;
margin: 0;
}
.pcc__desc em { font-family: var(--f-serif-italic); font-style: italic; opacity: 1; }
.pcc__ctas {
display: flex;
flex-direction: column;
gap: 10px;
}
.pcc__cta {
padding: 14px 22px;
border-radius: var(--r-pill);
text-decoration: none;
text-align: center;
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid rgba(16,16,16,0.12);
background: var(--p-white);
color: var(--p-charcoal);
transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.pcc__cta:hover {
border-color: var(--p-ffb-dark);
color: var(--p-ffb-dark);
transform: translateY(-1px);
}
.pcc__cta--primary {
background: var(--p-ffb-dark);
color: var(--p-oatmeal);
border-color: var(--p-ffb-dark);
}
.pcc__cta--primary:hover {
background: #122624;
color: var(--p-oatmeal);
border-color: #122624;
}
/* VIDEO, big, unmistakable, face-forward */
.pcc__video {
grid-column: 2;
grid-row: 2;
position: relative;
border-radius: 24px;
overflow: hidden;
background: #111;
min-height: 420px;
cursor: pointer;
isolation: isolate;
box-shadow: 0 20px 48px rgba(16,16,16,0.18);
text-decoration: none;
display: block;
}
.pcc__video-img {
position: absolute; inset: 0;
background: url("../../../assets/photos/tracy-outfit8-49.jpg") center 18% / cover;
filter: saturate(1) contrast(1.04);
transition: transform .7s ease;
}
.pcc__video:hover .pcc__video-img { transform: scale(1.04); }
.pcc__video::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse 75% 60% at 50% 55%,
rgba(0,0,0,0.18) 0%,
rgba(0,0,0,0) 60%),
linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
z-index: 1;
}
/* Restrained central play button, no pulsing halo, just confident */
.pcc__video-play {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 64px; height: 64px;
border-radius: 50%;
background: rgba(246,244,241,0.96);
color: var(--p-charcoal);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform .25s ease, background .25s ease;
border: 0; cursor: pointer;
box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
.pcc__video:hover .pcc__video-play { transform: translate(-50%, -50%) scale(1.04); background: #fff; }
/* Quiet "With Tracy" badge, no pulsing dot, just a small editorial tag */
.pcc__video-name {
position: absolute;
left: 18px; top: 18px;
z-index: 2;
padding: 6px 12px;
border-radius: var(--r-pill);
background: rgba(16,16,16,0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--p-oatmeal);
}
/* Single-line caption: title + duration inline */
.pcc__video-caption {
position: absolute;
left: 20px; right: 20px; bottom: 18px;
z-index: 2;
color: var(--p-oatmeal);
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
}
.pcc__video-caption-title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(16px, 1.6vw, 20px);
line-height: 1.2;
margin: 0;
text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}
.pcc__video-caption-title em { font-family: var(--f-serif-italic); font-style: italic; }
.pcc__video-caption-meta {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
opacity: 0.82;
margin: 0;
white-space: nowrap;
flex-shrink: 0;
}
/* -------- MOBILE, switch to flex column so cards are always full-width -------- */
@media (max-width: 820px) {
.pcc {
display: flex;
flex-direction: column;
gap: 14px;
}
.pcc__brand { order: 1; min-height: 160px; padding: 28px 26px; border-radius: 20px; }
.pcc__brand-title { font-size: clamp(34px, 9vw, 52px); }
.pcc__headline { order: 2; padding: 4px 2px; }
.pcc__headline h2 { font-size: clamp(26px, 7vw, 36px); }
.pcc__video { order: 3; min-height: 260px; border-radius: 20px; }
.pcc__video-play { width: 58px; height: 58px; }
.pcc__video-name { left: 14px; top: 14px; font-size: 9px; letter-spacing: 0.2em; }
.pcc__video-caption { left: 16px; right: 16px; bottom: 14px; flex-direction: column; align-items: flex-start; gap: 4px; }
.pcc__video-caption-title { font-size: 15px; }
.pcc__copy { order: 4; padding: 26px 22px; border-radius: 20px; }
.pcc__stats { gap: 14px 18px; }
.pcc__stat-value { font-size: 26px; }
.pcc__stat-label { font-size: 11px; }
}
@media (max-width: 400px) {
.pcc__stats { grid-template-columns: 1fr; gap: 12px; }
.pcc__video { min-height: 220px; }
.pcc__video-play { width: 52px; height: 52px; }
}
/* -------- MOBILE -------- */
@media (max-width: 820px) {
.pc {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
gap: 14px;
}
.pc__brand { grid-column: 1; grid-row: 1; min-height: 160px; padding: 28px; border-radius: 22px; }
.pc__brand-title { font-size: clamp(36px, 10vw, 56px); }
.pc__headline { grid-column: 1; grid-row: 2; padding: 10px 4px; }
.pc__headline h2 { font-size: clamp(26px, 7.5vw, 38px); }
.pc__copy { grid-column: 1; grid-row: 3; padding: 28px 24px; border-radius: 22px; }
.pc__stats { gap: 16px 20px; }
.pc__stat-value { font-size: 30px; }
.pc__video { grid-column: 1; grid-row: 4; min-height: 240px; border-radius: 22px; }
/* Editorial variant */
.pce {
grid-template-columns: 1fr;
gap: 28px;
}
.pce__media { aspect-ratio: 4 / 4.2; }
.pce__title { font-size: clamp(30px, 9vw, 44px); }
.pce__meta { gap: 16px 24px; }
.pce__meta-value { font-size: 22px; }
}
@media (max-width: 480px) {
.pc__ctas { flex-direction: column; }
.pce__ctas { flex-direction: column; }
.pce__cta { justify-content: center; }
.pce__meta { grid-template-columns: 1fr; gap: 12px 0; padding: 14px 0; }
.pce__meta-value { font-size: 20px; }
.pce__meta-label { margin-top: 4px; }
}
```
```html
Product callout , bento section
Highlights a single featured program (FFB) or Tracy's quieter Elite Coaching track. Four-zone bento: brand card, headline, stats + CTAs, and a video thumbnail that opens a class replay or discovery session.
Freedom Filled® Business
Mentorship
12-month · application only
Mentorship for women building by design , not by default.
7+ yrs
running, refined with every cohort
~10%
Tracy's free-event to enrol conversion
A twelve-month container to build, price and sell your signature offer, with one-to-one coaching calls, live hot seats, and Tracy in your corner every step. Grounded in story, strategy, and spaciousness.
90 seconds · with Tracy
Tracy Harris · Private
Elite Coaching
One-to-one · by invitation
Private strategy for women ready for quietly extraordinary growth.
1:1
direct access, not a container
Select
a handful of women at any time
For Mastermind alumnae and aligned leaders: a private coaching track with Tracy for the seasons that ask for deep, bespoke thinking , pricing decisions, big launches, brand pivots, succession.
2 minutes · private
Editorial variant , on-brand
Same intent, highlight a flagship program, rendered in the Tracy Harris editorial style: cream canvas, aztek-green accents, Jhon Halend script callouts, serif display type, generous air. Two side-by-side halves: portrait + copy.
Freedom Filled®
1:28
Watch walkthrough with Tracy
Freedom Filled® Business Mentorship
Mentorship for women building by design , not by default.
Peace, Profit, Presence.
A twelve-month container to build, price and sell your signature offer, with one-to-one coaching calls, live hot seats, and Tracy walking alongside you every season. Grounded in story, strategy, spaciousness .
Xx Tracy
Bento variant , clearer
Cream canvas + white cards with soft shadow so the boxes actually read as cards. Video takes up most of the right side with a pulsing 82px play button, a "Tracy Harris · Live" pill top-left, and the video title captioned inside the card, so there's no mistaking it's a video of Tracy you can watch.
Freedom Filled® Business
Mentorship
12-month · application only
Mentorship for women building by design .
7+ yrs
running, refined with every cohort
~10%
Tracy's free-event to enrol rate
A twelve-month container to build, price and sell your signature offer, with Tracy walking alongside you every season. Grounded in story, strategy, and spaciousness.
With Tracy
A 90-second walkthrough
1:28
```
---
## programs-grid · 3 variants
### Shared CSS · `components/programs-grid/programs-grid.css`
```css
/* Programs grid component, 3 cards by default, responsive to 1 on mobile */
.programs {
background: var(--surface-canvas);
padding: var(--sp-9) var(--sp-7);
}
.programs__inner {
width: 100%;
}
.programs__header {
max-width: 640px;
margin: 0 0 var(--sp-8) 0;
}
.programs__eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: var(--w-medium);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0 0 var(--sp-3) 0;
}
.programs__title {
font-family: var(--f-serif-display);
font-weight: var(--w-regular);
font-size: clamp(40px, 5vw, 64px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink-heading);
margin: 0 0 var(--sp-5) 0;
}
.programs__title em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.programs__sub {
font-family: var(--f-sans);
font-size: 17px;
line-height: 1.6;
color: var(--ink-body);
margin: 0;
max-width: 56ch;
}
.programs__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
}
.programs__grid--two { grid-template-columns: repeat(2, 1fr); }
.programs__grid--four { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
/* --- Card --- */
.program-card {
display: flex;
flex-direction: column;
background: var(--surface-elevated);
padding: var(--sp-7) var(--sp-6) var(--sp-6);
border: 1px solid var(--border-hairline);
border-top-width: 3px;
border-top-color: var(--accent);
border-radius: 0;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.program-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(16, 16, 16, 0.06);
}
.program-card[data-accent="sage"] { border-top-color: var(--p-sage); }
.program-card[data-accent="gold"] { border-top-color: var(--p-gold-dark); }
.program-card[data-accent="green"] { border-top-color: var(--p-aztek); }
.program-card[data-accent="navy"] { border-top-color: var(--p-fresh-navy); }
.program-card[data-accent="orange"] { border-top-color: var(--p-fresh-orange); }
/* Logo slot, sits above the title, small branded wordmark */
.program-card__logo {
display: flex;
align-items: center;
height: 36px;
margin: 0 0 var(--sp-4) 0;
}
.program-card__logo img,
.program-card__logo svg {
height: 100%;
width: auto;
max-width: 180px;
display: block;
}
/* Small brand badge (dot + short label) used as a secondary distinguisher */
.program-card__badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--f-sans);
font-size: 10px;
font-weight: var(--w-medium);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0 0 var(--sp-3) 0;
}
.program-card__badge::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
}
.program-card[data-accent="sage"] .program-card__badge::before { background: var(--p-sage); }
.program-card[data-accent="gold"] .program-card__badge::before {
background: linear-gradient(135deg, var(--p-gold-dark), var(--p-gold-mid));
}
.program-card[data-accent="green"] .program-card__badge::before { background: var(--p-aztek); }
.program-card[data-accent="orange"] .program-card__badge::before { background: var(--p-fresh-orange); }
/* Gold gradient accent for FFM, subtle top bar replacement for solid border */
.program-card[data-accent="gold"] {
border-top: 3px solid transparent;
border-image: linear-gradient(90deg, var(--p-gold-dark), var(--p-gold-mid)) 1;
border-image-slice: 1;
}
/* Whole-card warm wash per brand, barely-there left edge tint */
.program-card {
position: relative;
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
}
.program-card__title {
font-family: var(--f-serif-display);
font-weight: var(--w-regular);
font-size: 28px;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--ink-heading);
margin: 0 0 var(--sp-2) 0;
}
.program-card__title em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.program-card__tagline {
font-family: var(--f-serif-italic);
font-style: italic;
font-size: 17px;
color: var(--ink-mute);
margin: 0 0 var(--sp-5) 0;
line-height: 1.3;
}
.program-card__desc {
font-family: var(--f-sans);
font-size: 14px;
line-height: 1.65;
color: var(--ink-body);
margin: 0 0 var(--sp-6) 0;
flex: 1;
}
.program-card__facts {
display: flex;
flex-direction: column;
gap: var(--sp-3);
margin: 0 0 var(--sp-6) 0;
padding: var(--sp-5) 0 0;
border-top: 1px solid var(--border-hairline);
}
.program-card__facts > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--sp-4);
}
.program-card__facts dt {
font-family: var(--f-sans);
font-size: 10px;
font-weight: var(--w-medium);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0;
}
.program-card__facts dd {
font-family: var(--f-sans);
font-size: 14px;
font-weight: var(--w-medium);
color: var(--ink-heading);
margin: 0;
text-align: right;
}
.program-card__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--f-sans);
font-size: 12px;
font-weight: var(--w-medium);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-heading);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 1px solid var(--ink-heading);
align-self: flex-start;
transition: gap 0.2s ease;
}
.program-card__cta:hover {
gap: 14px;
}
.program-card__cta svg {
width: 14px;
height: 14px;
transition: transform 0.2s ease;
}
.program-card__cta:hover svg {
transform: translateX(3px);
}
/* CTA row, lets CTA sit beside a tag like "Application-based" */
.program-card__cta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
margin-top: auto;
}
.program-card__tag {
font-family: var(--f-sans);
font-size: 10px;
font-weight: var(--w-medium);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
padding: 5px 10px;
border: 1px solid var(--border-hairline);
border-radius: var(--r-pill);
}
/* --- Responsive --- */
@media (max-width: 960px) {
.programs {
padding: var(--sp-8) var(--sp-5);
}
.programs__grid,
.programs__grid--two,
.programs__grid--four {
grid-template-columns: 1fr;
gap: var(--sp-5);
}
.program-card {
padding: var(--sp-6) var(--sp-5);
}
}
```
### programs-grid.showcase
```css
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; }
.brand-label {
position: sticky; top: 0; z-index: 10;
background: var(--p-charcoal); color: var(--p-oatmeal);
font-family: var(--f-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.2em; text-transform: uppercase;
padding: 10px 24px;
display: flex; justify-content: space-between;
}
/* Arrow icon reusable */
```
```html
TRACY HARRIS CO, homepage programs grid (3-up) data-brand="tracy"
The FRESH Framework™
The foundation.
Tracy's personal operating system. Fitness and Nutrition, Relationships, Environment, Self, Hustle. The foundation beneath every program, and the place many women start.
Format Self-led + quiz
Entry point FRESH Quiz
Investment Free
Take the Quiz
Freedom Filled® Business
The flagship mentorship.
A 12-month mentorship for women ready to move beyond content and into the full architecture of a profitable, scalable online business. Strategy meets identity.
Duration 12 months
Format Mentorship
Investment From $6,000 AUD
Explore FFB
Freedom Filled® Mastermind
The intimate room.
Tracy's most intimate and premium offering. Application-based, intentionally small, for women ready to lead at a higher level. Includes Bali retreats.
Cohort 20 women max
Format Application-based
Investment From $31,000 AUD
Apply for FFM
TWO-UP VARIANT, for product pages showing sister programs class="programs__grid--two"
Freedom Filled® Mastermind
The intimate room.
For women ready to lead at a higher level. Application-based, intentionally small, includes Bali retreats.
Apply for FFM
The FRESH Framework™
The foundation.
The operating system every program is built on. Not sure where you are? Take the quiz.
Take the Quiz
```
### programs-grid.three-card
Wrapper context: ``
```html
Free · Foundation
The FRESH Framework™
The foundation.
Tracy's personal operating system. Fitness and Nutrition, Relationships, Environment, Self, Hustle. The foundation beneath every program, and the place many women start.
Format Self-led + quiz
Entry point FRESH Quiz
Investment Free
Flagship · 12 months
Freedom Filled® Business
The flagship mentorship.
A 12-month mentorship for women ready to move beyond content and into the full architecture of a profitable, scalable online business. Strategy meets identity.
Duration 12 months
Format Mentorship
Investment From $6,000 AUD
Premium · 20 seats
Freedom Filled® Mastermind
The intimate room.
Tracy's most intimate and premium offering. Application-based, intentionally small, for women ready to lead at a higher level. Includes Bali retreats.
Cohort 20 women max
Format Application-based
Investment From $31,000 AUD
```
### programs-grid.two-card
Wrapper context: ``
```html
Premium · 20 seats
Freedom Filled® Mastermind
The intimate room.
For women ready to lead at a higher level. Application-based, intentionally small, includes Bali retreats and hot seats with Tracy.
Cohort 20 women max
Investment From $31,000 AUD
Free · Foundation
The FRESH Framework™
The foundation.
The operating system every program is built on. Not sure where you are? Take the quiz and find out which pillar needs your attention first.
Format Self-led + quiz
Investment Free
```
---
## soft-upsell · 1 variant
### soft-upsell.showcase
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-oatmeal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
.page { padding: clamp(32px, 5vw, 72px) clamp(16px, 4vw, 48px); }
.wrap { max-width: 820px; margin: 0 auto; }
.eyebrow-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.eyebrow-row__text {
font-family: var(--f-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--p-mute);
margin: 0;
}
.eyebrow-row__line {
flex: 1;
height: 1px;
background: var(--border-hairline);
}
/* -------- CARD -------- */
.upsell {
display: grid;
grid-template-columns: 240px 1fr;
gap: clamp(20px, 3vw, 32px);
padding: 24px;
background: var(--p-oatmeal);
border: 1px solid var(--border-hairline);
border-radius: 12px;
align-items: center;
text-decoration: none;
color: inherit;
transition: border-color .2s, box-shadow .2s, transform .2s;
}
.upsell:hover {
border-color: rgba(30,55,53,0.35);
box-shadow: 0 12px 28px rgba(16,16,16,0.06);
transform: translateY(-2px);
}
.upsell__img {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 8px;
overflow: hidden;
background: url("../../../assets/photos/tracy-outfit8-39.jpg") center 22% / cover;
background-color: var(--p-cream);
}
.upsell__img::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
}
.upsell__tag {
position: absolute;
left: 12px; bottom: 10px;
z-index: 2;
font-family: var(--f-script);
font-size: 18px;
color: var(--p-oatmeal);
line-height: 1;
text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.upsell__copy { min-width: 0; }
.upsell__program {
font-family: var(--f-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--p-aztek);
margin: 0 0 8px;
}
.upsell__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(24px, 2.8vw, 34px);
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--p-charcoal);
margin: 0 0 10px;
}
.upsell__title em { font-family: var(--f-serif-italic); font-style: italic; }
.upsell__value {
font-family: var(--f-sans);
font-size: 15px;
line-height: 1.5;
color: var(--p-ink);
margin: 0 0 16px;
max-width: 44ch;
}
.upsell__value em { font-family: var(--f-serif-italic); font-style: italic; }
.upsell__link {
font-family: var(--f-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--p-aztek);
display: inline-flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid var(--p-aztek);
padding-bottom: 3px;
transition: gap .2s ease, color .2s ease;
}
.upsell:hover .upsell__link { gap: 14px; }
.upsell__link svg { width: 12px; height: 12px; }
@media (max-width: 640px) {
.upsell {
grid-template-columns: 1fr;
}
.upsell__img {
aspect-ratio: 16 / 10;
max-height: 200px;
}
}
```
```html
```
---
## testimonials · 11 variants
### Shared CSS · `components/testimonials/testimonials.css`
```css
/* Testimonials, unified editorial family: wall, featured, single, editorial, real-results, columns-marquee */
.testimonials {
background: var(--surface-canvas);
padding: var(--sp-9) var(--sp-7);
}
.testimonials--elevated {
background: var(--surface-elevated);
}
.testimonials__header {
max-width: 680px;
margin: 0 0 var(--sp-8) 0;
}
.testimonials__header--center {
margin: 0 auto var(--sp-8);
text-align: center;
}
.testimonials__eyebrow {
font-family: var(--f-sans);
font-size: 11px;
font-weight: var(--w-medium);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0 0 var(--sp-3) 0;
}
.testimonials__title {
font-family: var(--f-serif-display);
font-weight: var(--w-regular);
font-size: clamp(40px, 5vw, 64px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink-heading);
margin: 0 0 var(--sp-4) 0;
}
.testimonials__title em { font-family: var(--f-serif-italic); font-style: italic; }
.testimonials__sub {
font-family: var(--f-sans);
font-size: 16px;
line-height: 1.65;
color: var(--ink-body);
margin: 0;
max-width: 56ch;
}
/* ============================================================ */
/* SHARED CARD LOOK, used across all variants for consistency */
/* ============================================================ */
.testimonial {
background: var(--p-white);
border: 1px solid rgba(16, 16, 16, 0.04);
border-radius: 6px;
padding: var(--sp-6);
display: flex;
flex-direction: column;
gap: var(--sp-5);
box-shadow: 0 2px 12px rgba(16, 16, 16, 0.04);
box-sizing: border-box;
}
.testimonials--elevated .testimonial {
background: var(--p-white);
}
.testimonial__mark {
font-family: var(--f-serif-italic);
font-style: italic;
font-size: 64px;
line-height: 0.6;
color: var(--accent);
margin: 0;
height: 28px;
opacity: 0.5;
}
.testimonial__quote {
font-family: var(--f-sans);
font-weight: var(--w-regular);
font-size: 17px;
line-height: 1.55;
color: var(--ink-heading);
margin: 0;
flex: 1;
}
.testimonial__quote em { font-style: italic; }
.testimonial__attribution {
display: flex;
align-items: center;
gap: var(--sp-3);
padding-top: var(--sp-4);
border-top: 1px solid var(--border-hairline);
}
.testimonial__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
background: var(--surface-elevated);
flex: 0 0 auto;
}
.testimonial__meta {
flex: 1;
min-width: 0;
}
.testimonial__name {
font-family: var(--f-sans);
font-size: 14px;
font-weight: var(--w-medium);
color: var(--ink-heading);
margin: 0;
line-height: 1.25;
}
.testimonial__role {
font-family: var(--f-sans);
font-size: 12px;
color: var(--ink-mute);
margin: 2px 0 0 0;
line-height: 1.3;
}
.testimonial__tag {
font-family: var(--f-sans);
font-size: 10px;
font-weight: var(--w-medium);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-mute);
padding: 4px 10px;
border: 1px solid var(--border-hairline);
border-radius: var(--r-pill);
white-space: nowrap;
flex: 0 0 auto;
}
/* ============================================================ */
/* VARIANT: WALL (masonry, 3 columns), homepage density */
/* ============================================================ */
.testimonials__wall {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-6);
align-items: start;
}
.testimonials__wall .testimonial {
margin: 0;
width: 100%;
min-width: 0;
overflow: hidden;
}
@media (max-width: 1000px) { .testimonials__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .testimonials__wall { grid-template-columns: minmax(0, 1fr); } }
/* ============================================================ */
/* VARIANT: FEATURED (3 equal columns, grid), product pages */
/* ============================================================ */
.testimonials__featured {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-5);
}
.testimonials__featured .testimonial {
box-shadow: 0 4px 20px rgba(16, 16, 16, 0.07);
border: 1px solid rgba(16, 16, 16, 0.06);
}
@media (max-width: 960px) { .testimonials__featured { grid-template-columns: 1fr; } }
/* ============================================================ */
/* VARIANT: SINGLE HERO, portrait left, big quote right */
/* ============================================================ */
.testimonials__single {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--sp-8);
align-items: center;
max-width: 1100px;
}
@media (max-width: 820px) { .testimonials__single { grid-template-columns: 1fr; gap: var(--sp-5); } }
.testimonials__single-portrait {
aspect-ratio: 3/4;
background: var(--surface-elevated);
overflow: hidden;
}
.testimonials__single-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.testimonials__single-content {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.testimonials__single .testimonial__mark {
font-size: 96px;
height: 40px;
margin-bottom: var(--sp-3);
}
.testimonials__single .testimonial__quote {
font-family: var(--f-sans);
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.4;
margin-bottom: var(--sp-5);
}
/* Attribution for single variant: stacked, name at left edge of quote */
.testimonials__single .testimonial__attribution {
border-top: none;
padding-top: 0;
padding-left: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-2);
}
.testimonials__single .testimonial__name {
font-family: var(--f-sans);
font-size: 13px;
font-weight: var(--w-medium);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.testimonials__single .testimonial__role {
font-size: 12px;
letter-spacing: 0.05em;
margin: 0;
}
.testimonials__single .testimonial__tag {
margin-top: var(--sp-2);
}
/* ============================================================ */
/* VARIANT: EDITORIAL, centered circle portrait + massive quote */
/* ============================================================ */
.testimonials__editorial {
max-width: 900px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-5);
}
.testimonials__editorial-portrait {
width: 140px;
height: 140px;
border-radius: 50%;
overflow: hidden;
background: var(--accent);
flex: 0 0 auto;
}
.testimonials__editorial-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.testimonials__editorial .testimonial__quote {
font-family: var(--f-serif-display);
font-size: clamp(28px, 4vw, 48px);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink-heading);
margin: 0;
max-width: 26ch;
}
.testimonials__editorial-body {
font-family: var(--f-sans);
font-size: 16px;
line-height: 1.65;
color: var(--ink-body);
margin: 0;
max-width: 56ch;
}
.testimonials__editorial-name {
font-family: var(--f-sans);
font-size: 12px;
font-weight: var(--w-medium);
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-mute);
margin-top: var(--sp-4);
}
.testimonials__editorial-name::before { content: ", "; }
/* ============================================================ */
/* VARIANT: REAL-RESULTS, portrait left, floating card right */
/* ============================================================ */
.testimonials__results {
position: relative;
display: grid;
grid-template-columns: 1fr 1.1fr;
align-items: center;
gap: 0;
max-width: 1100px;
}
.testimonials__results-label {
position: absolute;
top: 0;
right: 0;
font-family: var(--f-serif-italic);
font-style: italic;
font-size: 22px;
color: var(--ink-heading);
}
.testimonials__results-portrait {
aspect-ratio: 3/4;
background: var(--surface-elevated);
overflow: hidden;
}
.testimonials__results-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.testimonials__results-card {
background: var(--surface-canvas);
padding: var(--sp-7) var(--sp-6);
margin-left: calc(var(--sp-7) * -1);
box-shadow: 0 12px 32px rgba(16, 16, 16, 0.08);
display: flex;
flex-direction: column;
gap: var(--sp-4);
z-index: 2;
position: relative;
}
.testimonials__results-title {
font-family: var(--f-sans);
font-size: clamp(22px, 2vw, 32px);
font-weight: var(--w-semibold);
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ink-heading);
margin: 0;
line-height: 1.1;
}
.testimonials__results-quote {
font-family: var(--f-sans);
font-size: 14px;
line-height: 1.65;
color: var(--ink-body);
margin: 0;
}
.testimonials__results-next {
font-family: var(--f-sans);
font-size: 11px;
font-weight: var(--w-medium);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
text-decoration: none;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: var(--sp-3);
}
.testimonials__results-next:hover { gap: 14px; }
.testimonials__results-next svg { width: 14px; height: 14px; transition: transform 0.2s; }
@media (max-width: 820px) {
.testimonials__results { grid-template-columns: 1fr; }
.testimonials__results-card { margin-left: 0; margin-top: calc(var(--sp-7) * -1); }
}
/* ============================================================ */
/* VARIANT: COLUMNS MARQUEE, 3 vertically scrolling columns */
/* ============================================================ */
.testimonials__columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
height: 680px;
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}
.testimonials__columns > .testimonials__column {
display: flex;
flex-direction: column;
gap: var(--sp-6);
animation: testimonials-scroll 40s linear infinite;
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.testimonials__columns > .testimonials__column--fast { animation-duration: 32s; }
.testimonials__columns > .testimonials__column--slow { animation-duration: 52s; }
.testimonials__columns > .testimonials__column:hover {
animation-play-state: paused;
}
@keyframes testimonials-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, -50%, 0); }
}
/* Cards inside the marquee: more elevated, whiter, rounder for Showit-style feel */
.testimonials__columns .testimonial {
background: var(--p-white);
border: 0;
border-radius: 10px;
box-shadow: 0 6px 24px rgba(16, 16, 16, 0.06);
padding: var(--sp-6);
}
@media (max-width: 960px) {
.testimonials__columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.testimonials__columns { grid-template-columns: 1fr; }
}
```
### testimonials.columns-marquee
Wrapper context: ``
```html
"
I came in thinking I needed a new funnel. I left with a new identity .
"
The Million Dollar Message™ framework was worth the year on its own. My conversion doubled .
"
I came in thinking I needed a new funnel. I left with a new identity .
"
The Million Dollar Message™ framework was worth the year on its own. My conversion doubled .
"
Year one I tripled revenue. Year two I halved my hours .
"
Application-based isn't a gimmick. It's why the room works .
"
Year one I tripled revenue. Year two I halved my hours .
"
Application-based isn't a gimmick. It's why the room works .
"
I homeschool, I run a six-figure business, I take Fridays off. Tracy showed me the third path .
"
The Bali retreat broke me open. I came home with a plan, a peer group, and permission to want more .
"
I homeschool, I run a six-figure business, I take Fridays off. Tracy showed me the third path .
"
The Bali retreat broke me open. I came home with a plan, a peer group, and permission to want more .
```
### testimonials.editorial-centered-polished
Wrapper context: ``
```css
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.testimonials { position: relative; overflow: hidden; isolation: isolate; }
.testimonials::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 40% at 50% 30%,
rgba(110, 142, 119, 0.08) 0%,
rgba(110, 142, 119, 0.0) 70%);
pointer-events: none;
z-index: 0;
}
.testimonials__editorial { position: relative; z-index: 1; }
.testimonials__editorial-portrait {
opacity: 0;
transform: translateY(18px) scale(0.98);
animation: tseMediaReveal 1100ms var(--ease-drawer) 200ms forwards;
}
.testimonials__editorial-portrait img {
transform: scale(1.06);
transition: transform 900ms var(--ease-in-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.testimonials__editorial-portrait:hover img { transform: scale(1.02); }
}
.testimonials__editorial .testimonial__quote,
.testimonials__editorial-body,
.testimonials__editorial-name {
opacity: 0;
transform: translateY(14px);
animation: tseRise 900ms var(--ease-out-craft) forwards;
}
.testimonials__editorial .testimonial__quote { animation-delay: 380ms; }
.testimonials__editorial-body { animation-delay: 540ms; }
.testimonials__editorial-name { animation-delay: 700ms; }
@keyframes tseMediaReveal {
from { opacity: 0; transform: translateY(18px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tseRise {
from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.testimonials__editorial .testimonial__quote { text-wrap: balance; }
.testimonials__editorial-body { text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) {
.testimonials__editorial-portrait,
.testimonials__editorial-portrait img,
.testimonials__editorial .testimonial__quote,
.testimonials__editorial-body,
.testimonials__editorial-name {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.testimonials__editorial-portrait img { transform: scale(1.02); }
}
```
```html
"This program transformed my business and my life."
Year one I tripled my revenue. Year two I halved my hours. Three years in, I can say with total certainty that FFB didn't just change my business, it changed what I believed was possible. Tracy shows you what a freedom-filled business actually looks like, then hands you the keys.
[MEMBER NAME]
```
### testimonials.editorial-centered
Wrapper context: ``
```html
"This program transformed my business and my life."
Year one I tripled my revenue. Year two I halved my hours. Three years in, I can say with total certainty that FFB didn't just change my business, it changed what I believed was possible. Tracy shows you what a freedom-filled business actually looks like, then hands you the keys.
[MEMBER NAME]
```
### testimonials.featured-trio-polished
Wrapper context: ``
```css
:root { --ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1); }
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.testimonials { position: relative; overflow: hidden; isolation: isolate; }
.testimonials::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 40% at 50% 25%,
rgba(110, 142, 119, 0.08) 0%,
rgba(110, 142, 119, 0.0) 70%);
pointer-events: none;
z-index: 0;
}
.testimonials__header,
.testimonials__featured { position: relative; z-index: 1; }
.testimonials__eyebrow,
.testimonials__title {
opacity: 0;
transform: translateY(12px);
animation: tsRise 900ms var(--ease-out-craft) forwards;
}
.testimonials__eyebrow { animation-delay: 140ms; }
.testimonials__title { animation-delay: 280ms; }
.testimonials__title { text-wrap: balance; }
.testimonials__featured .testimonial {
opacity: 0;
transform: translateY(18px);
animation: tsCardRise 1000ms var(--ease-out-craft) forwards;
transition: transform 320ms var(--ease-out-craft), box-shadow 320ms var(--ease-out-craft);
}
.testimonials__featured .testimonial:nth-child(1) { animation-delay: 460ms; }
.testimonials__featured .testimonial:nth-child(2) { animation-delay: 600ms; }
.testimonials__featured .testimonial:nth-child(3) { animation-delay: 740ms; }
@media (hover: hover) and (pointer: fine) {
.testimonials__featured .testimonial:hover {
transform: translateY(-3px);
box-shadow: 0 24px 48px -20px rgba(30, 55, 53, 0.2);
}
}
@keyframes tsRise {
from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes tsCardRise {
from { opacity: 0; transform: translateY(18px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
.testimonials__eyebrow,
.testimonials__title,
.testimonials__featured .testimonial {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
```
```html
"
I came in thinking I needed a new funnel. I left with a new identity.
"
Year one of FFB I tripled my revenue. Year two I halved my hours .
"
My sales calls feel like conversations now. My conversion doubled.
```
### testimonials.featured-trio
Wrapper context: ``
```html
"
I came in thinking I needed a new funnel. I left with a new identity.
"
Year one of FFB I tripled my revenue. Year two I halved my hours .
"
My sales calls feel like conversations now. My conversion doubled.
```
### testimonials.real-results-polished
Wrapper context: ``
```css
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.testimonials { position: relative; overflow: hidden; isolation: isolate; }
.testimonials::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 55% 45% at 30% 50%,
rgba(110, 142, 119, 0.08) 0%,
rgba(110, 142, 119, 0.0) 70%);
pointer-events: none;
z-index: 0;
}
.testimonials__results { position: relative; z-index: 1; }
.testimonials__results-portrait {
opacity: 0;
transform: translateY(18px) scale(0.98);
animation: tsrMediaReveal 1100ms var(--ease-drawer) 200ms forwards;
}
.testimonials__results-portrait img {
transform: scale(1.06);
transition: transform 900ms var(--ease-in-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.testimonials__results-portrait:hover img { transform: scale(1.02); }
}
.testimonials__results-card {
opacity: 0;
transform: translateY(14px);
animation: tsrRise 900ms var(--ease-out-craft) 380ms forwards;
transition: transform 320ms var(--ease-out-craft), box-shadow 320ms var(--ease-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.testimonials__results-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px -20px rgba(30, 55, 53, 0.22);
}
}
@keyframes tsrMediaReveal {
from { opacity: 0; transform: translateY(18px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tsrRise {
from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.testimonials__results-title { text-wrap: balance; }
.testimonials__results-quote { text-wrap: pretty; }
.testimonials__results-next {
transition:
gap 260ms var(--ease-out-craft),
color 200ms var(--ease-out-craft),
letter-spacing 220ms var(--ease-out-craft);
}
.testimonials__results-next:hover { gap: 14px; letter-spacing: 0.22em; }
.testimonials__results-next:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
border-radius: 2px;
}
.testimonials__results-next svg {
transition: transform 260ms var(--ease-out-craft);
}
.testimonials__results-next:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.testimonials__results-portrait,
.testimonials__results-portrait img,
.testimonials__results-card {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.testimonials__results-portrait img { transform: scale(1.02); }
.testimonials__results-next:hover svg { transform: none; }
}
```
```html
Real results
[MEMBER NAME] tripled her revenue
"I came in thinking I needed a new funnel. I left with a new identity. Tracy doesn't just teach strategy, she shows you who you get to be inside the business."
Next review
```
### testimonials.real-results
Wrapper context: ``
```html
Real results
[MEMBER NAME] tripled her revenue
"I came in thinking I needed a new funnel. I left with a new identity. Tracy doesn't just teach strategy, she shows you who you get to be inside the business."
Next review
```
### testimonials.showcase
```css
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; }
.brand-label {
position: sticky; top: 0; z-index: 10;
background: var(--p-charcoal); color: var(--p-oatmeal);
font-family: var(--f-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.2em; text-transform: uppercase;
padding: 10px 24px;
display: flex; justify-content: space-between;
}
```
```html
WALL, masonry, homepage density class="testimonials__wall"
"
I came in thinking I needed a new funnel. I left with a new identity . Tracy doesn't just teach strategy, she shows you who you get to be inside the business.
FFB
"
Year one of FFB I tripled my revenue. Year two I halved my hours . That's the part I didn't know was possible until I was in the room.
FFB
"
The Bali retreat broke me open in the best way. I came home with a plan, a peer group who keep me honest, and permission to stop apologising for wanting more .
FFM
"
I took the FRESH Quiz expecting a lead magnet. I got a mirror. Haven't looked at my business the same way since.
FRESH
"
Tracy's the first mentor who told me the hard thing without flinching. Loving , but absolutely honest. My business is built on what she said to me in month three.
FFB
"
Application-based is not a gimmick. It's why the room works. Every woman in my cohort is someone I'd want as a client, a partner, or a friend.
FFM
"
The Million Dollar Message™ framework alone was worth the year. My sales calls now feel like conversations. My conversion doubled .
FFB
"
I homeschool, I run a six-figure business, I take Fridays off. Before FFB I thought I had to pick two. Tracy showed me the third path .
FFB
FEATURED TRIO, product pages before pricing class="testimonials__featured"
"
I came in thinking I needed a new funnel. I left with a new identity.
"
Year one of FFB I tripled my revenue. Year two I halved my hours .
"
My sales calls feel like conversations now. My conversion doubled.
SINGLE HERO, portrait + big quote, name left-aligned class="testimonials__single"
"
Application-based is not a gimmick. It's why the room works . Every woman in my cohort is someone I'd want as a client, a partner, or a friend. That doesn't happen in open-enrolment.
[MEMBER NAME]
SaaS founder · 2025 cohort
FFM
EDITORIAL, centered circle portrait + massive quote class="testimonials__editorial"
"This program transformed my business and my life."
Year one I tripled my revenue. Year two I halved my hours. Three years in, I can say with total certainty that FFB didn't just change my business, it changed what I believed was possible. Tracy shows you what a freedom-filled business actually looks like, then hands you the keys.
[MEMBER NAME]
REAL RESULTS, portrait left, floating card right class="testimonials__results"
Real results
[MEMBER NAME] tripled her revenue
"I came in thinking I needed a new funnel. I left with a new identity. Tracy doesn't just teach strategy, she shows you who you get to be inside the business."
Next review
COLUMNS MARQUEE, 3 vertical scrolling columns, auto-loop class="testimonials__columns"
"
I came in thinking I needed a new funnel. I left with a new identity .
"
The Million Dollar Message™ framework was worth the year on its own. My conversion doubled .
"
I came in thinking I needed a new funnel. I left with a new identity .
"
The Million Dollar Message™ framework was worth the year on its own. My conversion doubled .
"
Year one I tripled revenue. Year two I halved my hours .
"
Application-based isn't a gimmick. It's why the room works .
"
Year one I tripled revenue. Year two I halved my hours .
"
Application-based isn't a gimmick. It's why the room works .
"
I homeschool, I run a six-figure business, I take Fridays off. Tracy showed me the third path .
"
The Bali retreat broke me open. I came home with a plan, a peer group, and permission to want more .
"
I homeschool, I run a six-figure business, I take Fridays off. Tracy showed me the third path .
"
The Bali retreat broke me open. I came home with a plan, a peer group, and permission to want more .
```
### testimonials.single-hero-polished
Wrapper context: ``
```css
:root {
--ease-out-craft: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-craft: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
body { margin: 0; font-family: var(--f-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.testimonials { position: relative; overflow: hidden; isolation: isolate; }
.testimonials::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 55% 45% at 50% 35%,
rgba(201, 164, 108, 0.12) 0%,
rgba(201, 164, 108, 0.0) 70%);
pointer-events: none;
z-index: 0;
}
.testimonials__single { position: relative; z-index: 1; }
.testimonials__single-portrait {
opacity: 0;
transform: translateY(18px) scale(0.98);
animation: tshMediaReveal 1100ms var(--ease-drawer) 200ms forwards;
transition: transform 400ms var(--ease-out-craft), box-shadow 400ms var(--ease-out-craft);
}
.testimonials__single-portrait img {
transform: scale(1.06);
transition: transform 900ms var(--ease-in-out-craft);
}
@media (hover: hover) and (pointer: fine) {
.testimonials__single-portrait:hover img { transform: scale(1.02); }
}
.testimonials__single-content .testimonial__mark,
.testimonials__single-content .testimonial__quote,
.testimonials__single-content .testimonial__attribution {
opacity: 0;
transform: translateY(14px);
animation: tshRise 900ms var(--ease-out-craft) forwards;
}
.testimonials__single-content .testimonial__mark { animation-delay: 320ms; }
.testimonials__single-content .testimonial__quote { animation-delay: 460ms; }
.testimonials__single-content .testimonial__attribution { animation-delay: 620ms; }
@keyframes tshMediaReveal {
from { opacity: 0; transform: translateY(18px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tshRise {
from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.testimonial__quote { text-wrap: balance; }
@media (prefers-reduced-motion: reduce) {
.testimonials__single-portrait,
.testimonials__single-portrait img,
.testimonials__single-content .testimonial__mark,
.testimonials__single-content .testimonial__quote,
.testimonials__single-content .testimonial__attribution {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.testimonials__single-portrait img { transform: scale(1.02); }
}
```
```html
"
Application-based is not a gimmick. It's why the room works . Every woman in my cohort is someone I'd want as a client, a partner, or a friend. That doesn't happen in open-enrolment.
[MEMBER NAME]
SaaS founder · 2025 cohort
FFM
```
### testimonials.single-hero
Wrapper context: ``
```html
"
Application-based is not a gimmick. It's why the room works . Every woman in my cohort is someone I'd want as a client, a partner, or a friend. That doesn't happen in open-enrolment.
[MEMBER NAME]
SaaS founder · 2025 cohort
FFM
```
### testimonials.wall
Wrapper context: ``
```html
"
I came in thinking I needed a new funnel. I left with a new identity . Tracy doesn't just teach strategy, she shows you who you get to be inside the business.
FFB
"
Year one of FFB I tripled my revenue. Year two I halved my hours . That's the part I didn't know was possible until I was in the room.
FFB
"
The Bali retreat broke me open in the best way. I came home with a plan, a peer group who keep me honest, and permission to stop apologising for wanting more .
FFM
"
I took the FRESH Quiz expecting a lead magnet. I got a mirror. Haven't looked at my business the same way since.
FRESH
"
Tracy's the first mentor who told me the hard thing without flinching. Loving , but absolutely honest. My business is built on what she said to me in month three.
FFB
"
Application-based is not a gimmick. It's why the room works. Every woman in my cohort is someone I'd want as a client, a partner, or a friend.
FFM
"
The Million Dollar Message™ framework alone was worth the year. My sales calls now feel like conversations. My conversion doubled .
FFB
"
I homeschool, I run a six-figure business, I take Fridays off. Before FFB I thought I had to pick two. Tracy showed me the third path .
FFB
```
---
## why-block · 3 variants
### why-block.dark
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-aztek);
color: var(--p-oatmeal);
-webkit-font-smoothing: antialiased;
}
.section {
padding: clamp(56px, 8vw, 120px) clamp(20px, 5vw, 64px);
}
.wb-dark {
background: var(--p-aztek);
color: var(--p-oatmeal);
}
.wb-dark .wb__wrap {
max-width: 760px;
margin: 0 auto;
}
.wb-dark .wb__eyebrow {
font-family: var(--f-script);
font-size: clamp(36px, 4.4vw, 56px);
color: var(--p-gold-mid);
line-height: 1.05;
margin: 0 0 24px;
}
.wb-dark .wb__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(34px, 4.6vw, 56px);
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--p-oatmeal);
margin: 0 0 28px;
max-width: 20ch;
}
.wb-dark .wb__title em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.wb-dark .wb__body {
font-family: var(--f-sans);
font-size: clamp(16px, 1.2vw, 18px);
line-height: 1.75;
color: var(--p-oatmeal);
opacity: 0.92;
margin: 0 0 18px;
max-width: 58ch;
}
.wb-dark .wb__body strong {
font-weight: 600;
color: var(--p-oatmeal);
opacity: 1;
}
.wb-dark .wb__body em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.wb-dark .wb__sig {
font-family: var(--f-script);
font-size: clamp(34px, 3.6vw, 48px);
color: var(--p-gold-mid);
line-height: 1.05;
margin: 36px 0 0;
}
.wb-dark .wb__rule {
width: 48px;
height: 1px;
background: var(--p-gold-mid);
margin: 0 0 24px;
opacity: 0.6;
}
@media (max-width: 640px) {
.section { padding: 56px 20px; }
}
@media (max-width: 430px) {
.section { padding: 48px 18px; }
}
```
```html
Here's the truth I keep coming back to.
Most women don't need another strategy stack . They need a strategy that fits their life.
You've done the courses. You've bookmarked the posts. You've got enough tabs open to sink a laptop.
The problem was never a lack of information. It was a lack of a container built for how you actually work . Four-day weeks. School holidays. Seasons when life gets loud.
Freedom Filled® is built around the real rhythm of your week, not someone else's hustle calendar. That's why it actually lands.
Xx Tracy
```
### why-block.editorial
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-oatmeal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
.section {
padding: clamp(56px, 8vw, 120px) clamp(20px, 5vw, 64px);
}
.wb-editorial {
background: var(--p-oatmeal);
color: var(--p-charcoal);
}
.wb-editorial .wb__wrap {
max-width: 760px;
margin: 0 auto;
text-align: left;
}
.wb-editorial .wb__eyebrow {
font-family: var(--f-script);
font-size: clamp(36px, 4.4vw, 56px);
color: var(--p-sage);
line-height: 1.05;
margin: 0 0 24px;
}
.wb-editorial .wb__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(34px, 4.6vw, 56px);
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--p-charcoal);
margin: 0 0 28px;
max-width: 20ch;
}
.wb-editorial .wb__title em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.wb-editorial .wb__body {
font-family: var(--f-sans);
font-size: clamp(16px, 1.2vw, 18px);
line-height: 1.75;
color: var(--p-ink);
margin: 0 0 18px;
max-width: 58ch;
}
.wb-editorial .wb__body + .wb__body { margin-top: 0; }
.wb-editorial .wb__body strong {
font-weight: 600;
color: var(--p-charcoal);
}
.wb-editorial .wb__body em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.wb-editorial .wb__sig {
font-family: var(--f-script);
font-size: clamp(34px, 3.6vw, 48px);
color: var(--p-charcoal);
line-height: 1.05;
margin: 36px 0 0;
}
.wb-editorial .wb__rule {
width: 48px;
height: 1px;
background: var(--p-sage);
margin: 0 0 24px;
opacity: 0.7;
}
@media (max-width: 640px) {
.section { padding: 56px 20px; }
}
@media (max-width: 430px) {
.section { padding: 48px 18px; }
}
```
```html
Let me be straight with you.
Because building a business while raising a family isn't the same as building one at 25 .
You don't have 70 hours a week to throw at a funnel.
You have school pickup, dinner on the stove, a nervous system that's been through it , and a gut feeling that the version of success you've been chasing isn't the one you actually want.
I built this for the woman who's done pretending. The one who knows she's meant for more, and refuses to burn down her life to reach it. Freedom Filled® means your business serves your life, not the other way around.
Xx Tracy
```
### why-block.showcase
Wrapper context: ``
```css
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--f-sans);
background: var(--p-oatmeal);
color: var(--p-charcoal);
-webkit-font-smoothing: antialiased;
}
.section {
padding: clamp(56px, 8vw, 120px) clamp(20px, 5vw, 64px);
}
/* Variant anchors, used by /review/ and /compose/ hashes */
.anchor {
position: relative;
scroll-margin-top: 20px;
}
/* -------- EDITORIAL (cream, script eyebrow, Tracy voice) -------- */
.wb-editorial {
background: var(--p-oatmeal);
color: var(--p-charcoal);
}
.wb-editorial .wb__wrap {
max-width: 760px;
margin: 0 auto;
text-align: left;
}
.wb-editorial .wb__eyebrow {
font-family: var(--f-script);
font-size: clamp(28px, 3.2vw, 40px);
color: var(--p-sage);
line-height: 1;
margin: 0 0 22px;
}
.wb-editorial .wb__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(34px, 4.6vw, 56px);
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--p-charcoal);
margin: 0 0 28px;
max-width: 20ch;
}
.wb-editorial .wb__title em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.wb-editorial .wb__body {
font-family: var(--f-sans);
font-size: clamp(16px, 1.2vw, 18px);
line-height: 1.75;
color: var(--p-ink);
margin: 0 0 18px;
max-width: 58ch;
}
.wb-editorial .wb__body + .wb__body { margin-top: 0; }
.wb-editorial .wb__body strong {
font-weight: 600;
color: var(--p-charcoal);
}
.wb-editorial .wb__body em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.wb-editorial .wb__sig {
font-family: var(--f-script);
font-size: clamp(28px, 3vw, 38px);
color: var(--p-charcoal);
line-height: 1;
margin: 36px 0 0;
}
.wb-editorial .wb__rule {
width: 48px;
height: 1px;
background: var(--p-sage);
margin: 0 0 24px;
opacity: 0.7;
}
/* -------- DARK (aztek canvas, oatmeal text, for between bright sections) -------- */
.wb-dark {
background: var(--p-aztek);
color: var(--p-oatmeal);
}
.wb-dark .wb__wrap {
max-width: 760px;
margin: 0 auto;
}
.wb-dark .wb__eyebrow {
font-family: var(--f-script);
font-size: clamp(28px, 3.2vw, 40px);
color: var(--p-gold-mid);
line-height: 1;
margin: 0 0 22px;
}
.wb-dark .wb__title {
font-family: var(--f-serif-display);
font-weight: 400;
font-size: clamp(34px, 4.6vw, 56px);
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--p-oatmeal);
margin: 0 0 28px;
max-width: 20ch;
}
.wb-dark .wb__title em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.wb-dark .wb__body {
font-family: var(--f-sans);
font-size: clamp(16px, 1.2vw, 18px);
line-height: 1.75;
color: var(--p-oatmeal);
opacity: 0.92;
margin: 0 0 18px;
max-width: 58ch;
}
.wb-dark .wb__body strong {
font-weight: 600;
color: var(--p-oatmeal);
opacity: 1;
}
.wb-dark .wb__body em {
font-family: var(--f-serif-italic);
font-style: italic;
}
.wb-dark .wb__sig {
font-family: var(--f-script);
font-size: clamp(28px, 3vw, 38px);
color: var(--p-gold-mid);
line-height: 1;
margin: 36px 0 0;
}
.wb-dark .wb__rule {
width: 48px;
height: 1px;
background: var(--p-gold-mid);
margin: 0 0 24px;
opacity: 0.6;
}
/* -------- SECTION LABELS (for this showcase page) -------- */
.showcase-label {
max-width: 760px;
margin: 0 auto 18px;
padding: 0 clamp(20px, 5vw, 64px);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--p-mute);
}
.wb-dark + .showcase-label,
.wb-editorial + .showcase-label {
margin-top: 48px;
}
@media (max-width: 640px) {
.section { padding: 56px 20px; }
}
@media (max-width: 430px) {
.section { padding: 48px 18px; }
}
```
```html
Variant · editorial
Let me be straight with you.
Because building a business while raising a family isn't the same as building one at 25 .
You don't have 70 hours a week to throw at a funnel.
You have school pickup, dinner on the stove, a nervous system that's been through it , and a gut feeling that the version of success you've been chasing isn't the one you actually want.
I built this for the woman who's done pretending. The one who knows she's meant for more, and refuses to burn down her life to reach it. Freedom Filled® means your business serves your life, not the other way around.
Xx Tracy
Variant · dark
Here's the truth I keep coming back to.
Most women don't need another strategy stack . They need a strategy that fits their life.
You've done the courses. You've bookmarked the posts. You've got enough tabs open to sink a laptop.
The problem was never a lack of information. It was a lack of a container built for how you actually work . Four-day weeks. School holidays. Seasons when life gets loud.
Freedom Filled® is built around the real rhythm of your week, not someone else's hustle calendar. That's why it actually lands.
Xx Tracy
```
---
