/* ============================================================
HER FRONTIER — DESIGN SYSTEM
Extracted from bureau-v2 (softened editorial + ethereal pause)
------------------------------------------------------------
Required :
============================================================ */
/* ——— DESIGN TOKENS ——— */
:root {
/* canvas */
--paper: #FBFAF6; /* warm off-white, primary bg */
--paper-warm: #F5F0E6; /* slightly warmer, secondary panels */
/* ink */
--ink: #1A1620; /* warm plum-black, primary text */
--ink-soft: #3A3340; /* secondary text */
--ink-faint: rgba(26, 22, 32, 0.55); /* meta / captions */
/* strokes */
--stroke: rgba(26, 22, 32, 0.12); /* default dividers */
--stroke-soft: rgba(26, 22, 32, 0.08); /* subtle dividers */
/* accents — lavender system */
--lavender: #BB9EFF; /* primary brand accent */
--lavender-deep: #8B6ED1; /* hover / emphasis */
--lavender-soft: #D8C7FF; /* washes */
--lavender-wash: #F0E8FF; /* pale bg tint */
--plum-dark: #3E2F5A; /* featured/inverted surfaces */
/* pearl accents — iridescent ref palette, for atmospheric gradients */
--pearl-lavender: #B090F5; /* vibrant lavender */
--pearl-blue: #B8D3F5; /* periwinkle */
--pearl-mint: #D4F0EC; /* pale aqua mint */
--pearl-pink: #EDAEE9; /* soft bubblegum */
--pearl-silver: #E4DCEB; /* silver wash */
/* type */
--f-display: "General Sans", -apple-system, sans-serif; /* Whyte-analog */
--f-wide: "Supreme", -apple-system, sans-serif; /* sub-display / body-bold */
--f-text: "Satoshi", -apple-system, sans-serif; /* body */
--f-italic: "Gambarino", Georgia, serif; /* italic accents */
--f-mono: "JetBrains Mono", ui-monospace, monospace; /* meta / numbers */
/* layout — fluid side gutters
24px floor (mobile) · 6vw fluid (viewport-linked) · 120px ceiling (ultra-wide)
At 1440px → 86px; at 1920px → 115px. Keeps content visually contained
and never regresses below the old 95px on standard desktops. */
--page-pad: clamp(24px, 6vw, 120px);
--max: 1440px;
}
/* ——— RESET + BASE ——— */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--paper);
color: var(--ink);
font-family: var(--f-text);
font-weight: 400;
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
position: relative;
}
/* paper grain — warm, subtle, fixed overlay */
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none; z-index: 100;
opacity: 0.22; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
::selection { background: var(--lavender); color: var(--ink); }
a { color: inherit; text-decoration: none; }
/* ——— LAYOUT CONTAINERS ——— */
.page { max-width: var(--max); margin: 0 auto; padding: 0 var(--page-pad); }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; }
/* ——— TYPE UTILITIES ——— */
.mono {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 500;
color: var(--ink-soft);
}
.display {
font-family: var(--f-display);
font-weight: 700;
letter-spacing: -0.028em;
line-height: 0.92;
}
.italic-serif {
font-family: var(--f-italic);
font-style: italic;
font-weight: 400;
color: var(--lavender-deep);
}
.hairline { height: 1px; background: var(--stroke); }
/* ============================================================
COMPONENTS
============================================================ */
/* ——— NAV (sticky, translucent) ——— */
.nav {
position: sticky;
top: 0;
background: rgba(251, 250, 246, 0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 50;
padding: 18px var(--page-pad);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
border-bottom: 1px solid var(--stroke);
}
.nav-brand {
font-family: var(--f-display);
font-weight: 700;
font-size: 15px;
letter-spacing: -0.015em;
display: inline-flex;
align-items: baseline;
gap: 6px;
line-height: 1;
}
.nav-brand .italic {
font-family: var(--f-italic);
font-style: italic;
font-weight: 400;
color: var(--lavender-deep);
font-size: 15px;
line-height: 1;
}
.nav-brand .word { letter-spacing: -0.015em; }
.nav-brand .dot {
width: 7px; height: 7px; border-radius: 50%;
background: linear-gradient(135deg, var(--pearl-lavender), var(--pearl-pink));
align-self: center;
margin-left: 2px;
box-shadow: 0 0 8px 1px rgba(176,144,245,0.4);
}
.nav-meta { text-align: center; color: var(--ink-faint); }
.nav-cta { text-align: right; }
.nav-cta a {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
border-bottom: 2px solid var(--lavender);
padding-bottom: 3px;
transition: color 200ms ease, border-color 200ms ease;
}
.nav-cta a:hover { color: var(--lavender-deep); border-color: var(--lavender-deep); }
/* ——— BUTTONS ——— */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 24px;
background: var(--ink);
color: var(--paper);
font-family: var(--f-mono);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 2px;
transition: background 180ms ease, transform 220ms cubic-bezier(.2,.7,.2,1);
}
.btn-primary:hover { background: var(--plum-dark); transform: translateY(-1px); }
.btn-primary .arrow { display: inline-block; transition: transform 220ms ease; }
.btn-primary:hover .arrow { transform: translateX(3px); }
/* ——— HERO (headline + meta row) ——— */
.hero {
padding: 96px 0 72px;
position: relative;
}
.hero::before {
content: "";
position: absolute;
left: -12%; right: -12%;
top: 5%; height: 85%;
background:
radial-gradient(ellipse 42% 52% at 20% 38%, rgba(176,144,245,0.34) 0%, transparent 62%),
radial-gradient(ellipse 38% 48% at 68% 26%, rgba(184,211,245,0.30) 0%, transparent 60%),
radial-gradient(ellipse 36% 46% at 82% 70%, rgba(212,240,236,0.28) 0%, transparent 62%),
radial-gradient(ellipse 40% 50% at 38% 78%, rgba(237,174,233,0.24) 0%, transparent 60%),
radial-gradient(ellipse 55% 55% at 50% 50%, rgba(228,220,235,0.18) 0%, transparent 68%);
filter: blur(44px);
pointer-events: none;
z-index: 0;
animation: hero-haze 32s ease-in-out infinite alternate;
}
@keyframes hero-haze {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(2%, -1%) scale(1.04); }
100% { transform: translate(-1%, 1%) scale(1.02); }
}
.hero > * { position: relative; z-index: 1; }
.hero-tag {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 56px;
}
.hero-headline {
font-family: var(--f-display);
font-weight: 700;
font-size: clamp(64px, 15vw, 240px);
line-height: 0.88;
letter-spacing: -0.045em;
margin-bottom: 48px;
}
.hero-headline .italic {
font-family: var(--f-italic);
font-style: italic;
font-weight: 400;
color: var(--lavender-deep);
letter-spacing: -0.035em;
}
/* mid-dot between FRONT and IER — centered at cap-height/2, pearl glow */
.hero-headline .dot-accent {
display: inline-block;
width: 0.11em;
height: 0.11em;
border-radius: 50%;
background: linear-gradient(135deg, var(--pearl-lavender), var(--pearl-pink));
vertical-align: 0.45em;
margin: 0 0.05em;
box-shadow:
0 0 0.18em 0.04em rgba(176,144,245,0.35),
inset 0 0 0.04em rgba(255,255,255,0.5);
}
.hero-meta-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 28px;
align-items: end;
padding-top: 28px;
border-top: 1px solid var(--stroke);
}
.hero-meta .label {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 8px;
}
.hero-meta .value {
font-family: var(--f-wide);
font-weight: 500;
font-size: 20px;
letter-spacing: -0.012em;
}
/* ——— SECTION HEADS (reusable) ——— */
.section-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
margin-bottom: 64px;
}
.section-head h2 {
font-family: var(--f-display);
font-weight: 700;
font-size: clamp(40px, 5vw, 80px);
letter-spacing: -0.035em;
line-height: 0.95;
}
.section-head h2 .k { color: var(--lavender-deep); }
.section-head h2 .italic {
font-family: var(--f-italic);
font-style: italic;
font-weight: 400;
color: var(--lavender-deep);
}
/* ——— INDEX ROWS (hover-reveal list) ——— */
.index-rows { display: flex; flex-direction: column; }
.index-row {
display: grid;
grid-template-columns: 80px 1fr auto auto;
align-items: baseline;
gap: 32px;
padding: 28px 0;
border-top: 1px solid var(--stroke);
cursor: pointer;
transition: padding-left 240ms ease, color 200ms ease, background 200ms ease;
}
.index-row:last-child { border-bottom: 1px solid var(--stroke); }
.index-row:hover {
padding-left: 12px;
color: var(--lavender-deep);
background: var(--lavender-wash);
}
.index-row .n {
font-family: var(--f-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--ink-faint);
}
.index-row .name {
font-family: var(--f-display);
font-weight: 700;
font-size: clamp(26px, 3vw, 42px);
letter-spacing: -0.028em;
}
.index-row .dots {
flex: 1;
border-bottom: 2px dotted var(--stroke);
height: 14px;
min-width: 60px;
}
.index-row .meta {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* ——— PAUSE (ethereal breathing section, insert between hard sections) ——— */
.pause {
position: relative;
padding: 140px 0 160px;
margin: 0 calc(var(--page-pad) * -1);
overflow: hidden;
border-top: 1px solid var(--stroke);
border-bottom: 1px solid var(--stroke);
}
.pause::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse 60% 70% at 28% 50%, rgba(187,158,255,0.42) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 72% 45%, rgba(216,199,255,0.36) 0%, transparent 58%),
radial-gradient(ellipse 45% 55% at 50% 72%, rgba(245,221,234,0.32) 0%, transparent 62%),
linear-gradient(180deg, var(--paper) 0%, #F1E9FF 35%, #F6EEFF 65%, var(--paper) 100%);
pointer-events: none;
z-index: 0;
}
.pause::after {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 360px 360px;
opacity: 0.55;
mix-blend-mode: screen;
animation: pause-sparkle 18s ease-in-out infinite alternate;
pointer-events: none;
z-index: 1;
}
@keyframes pause-sparkle {
0% { background-position: 0 0; opacity: 0.4; }
50% { background-position: 40px -25px; opacity: 0.65; }
100% { background-position: -25px 18px; opacity: 0.45; }
}
.pause-inner {
position: relative; z-index: 2;
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--page-pad);
text-align: center;
}
.pause .kicker {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--lavender-deep);
margin-bottom: 44px;
display: inline-flex;
align-items: center;
gap: 14px;
font-weight: 600;
}
.pause .kicker::before,
.pause .kicker::after {
content: "";
width: 38px; height: 1px;
background: var(--lavender-deep);
}
.pause .breath {
font-family: var(--f-italic);
font-style: italic;
font-weight: 400;
font-size: clamp(32px, 4.8vw, 78px);
line-height: 1.18;
letter-spacing: -0.012em;
color: var(--ink);
max-width: 22ch;
margin: 0 auto;
}
.pause .breath .em { color: var(--lavender-deep); }
.pause .sig {
margin-top: 56px;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-faint);
display: inline-flex;
align-items: center;
gap: 16px;
}
.pause .sig .glyph {
width: 10px; height: 10px;
border-radius: 50%;
background: linear-gradient(135deg, var(--lavender), var(--lavender-soft));
box-shadow: 0 0 14px 2px rgba(187,158,255,0.45);
}
/* ——— PLANS (pricing cards with featured lavender variant) ——— */
.plans {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--stroke);
border-bottom: 1px solid var(--stroke);
}
.plan {
padding: 40px 32px 36px;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
border-right: 1px solid var(--stroke);
transition: background 240ms ease;
}
.plan:last-child { border-right: none; }
.plan:hover { background: var(--lavender-wash); }
.plan.featured {
background: var(--plum-dark);
color: var(--paper);
}
.plan.featured:hover { background: #4A3870; }
.plan.featured .plan-role { color: var(--lavender); }
.plan.featured .plan-body,
.plan.featured .plan-list li { color: rgba(251,250,246,0.75); }
.plan.featured .plan-list { border-top-color: rgba(251,250,246,0.2); }
.plan.featured .plan-list li::before { color: var(--lavender-soft); }
.plan.featured .plan-cta { color: var(--paper); border-top-color: var(--lavender); }
.plan.featured .plan-price { border-top-color: rgba(251,250,246,0.25); }
.plan.featured .plan-badge {
position: absolute;
top: 16px; right: 16px;
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
background: var(--lavender);
color: var(--plum-dark);
padding: 5px 10px;
border-radius: 2px;
font-weight: 700;
}
.plan-role {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--lavender-deep);
font-weight: 600;
}
.plan-name {
font-family: var(--f-display);
font-weight: 700;
font-size: 36px;
letter-spacing: -0.032em;
line-height: 0.98;
}
.plan-price {
display: flex;
align-items: baseline;
gap: 10px;
padding: 18px 0 4px;
border-top: 1px solid var(--stroke);
}
.plan-price .amount {
font-family: var(--f-display);
font-weight: 700;
font-size: 58px;
letter-spacing: -0.035em;
line-height: 1;
}
.plan-price small {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.75;
}
.plan-body {
font-family: var(--f-wide);
font-weight: 400;
font-size: 15px;
line-height: 1.5;
color: var(--ink-soft);
}
.plan-list {
list-style: none;
padding-top: 18px;
border-top: 1px solid var(--stroke);
display: flex;
flex-direction: column;
gap: 10px;
}
.plan-list li {
font-size: 13px;
line-height: 1.5;
color: var(--ink-soft);
display: grid;
grid-template-columns: 22px 1fr;
gap: 10px;
}
.plan-list li::before {
content: "→";
font-family: var(--f-mono);
font-size: 11px;
color: var(--lavender-deep);
}
.plan-cta {
margin-top: auto;
padding: 14px 0 4px;
border-top: 2px solid var(--ink);
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
transition: color 200ms ease, border-color 200ms ease;
}
.plan-cta:hover {
color: var(--lavender-deep);
border-top-color: var(--lavender-deep);
}
/* ——— FAQ (accordion) ——— */
.faq-list { display: flex; flex-direction: column; }
.faq-item {
padding: 26px 0;
border-top: 1px solid var(--stroke);
cursor: pointer;
display: grid;
grid-template-columns: 48px 1fr 24px;
gap: 24px;
align-items: baseline;
transition: padding-left 220ms ease;
}
.faq-item:last-child { border-bottom: 1px solid var(--stroke); }
.faq-item:hover { padding-left: 8px; }
.faq-item .n {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--lavender-deep);
font-weight: 600;
}
.faq-item .q {
font-family: var(--f-wide);
font-weight: 500;
font-size: 20px;
letter-spacing: -0.01em;
line-height: 1.3;
}
.faq-item .a {
grid-column: 2 / 3;
max-height: 0;
overflow: hidden;
font-size: 14px;
line-height: 1.6;
color: var(--ink-soft);
transition: max-height 340ms ease, padding 260ms ease;
max-width: 60ch;
}
.faq-item.open .a { max-height: 400px; padding-top: 16px; }
.faq-item .plus {
font-family: var(--f-mono);
font-size: 16px;
color: var(--ink);
transition: transform 280ms ease, color 200ms ease;
font-weight: 500;
}
.faq-item.open .plus { transform: rotate(45deg); color: var(--lavender-deep); }
/* ——— REVEAL ON SCROLL (JS-activated) ——— */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
/* ——— RESPONSIVE ——— */
@media (max-width: 980px) {
.plans { grid-template-columns: 1fr; }
.plan { border-right: none; border-bottom: 1px solid var(--stroke); }
.section-head { grid-template-columns: 1fr; gap: 18px; }
.hero-meta-row { grid-template-columns: 1fr 1fr; gap: 18px; }
}