/* ============================================================
home-pink.css - pink / white / grey theme for index.html
------------------------------------------------------------
A theme LAYER. Load it immediately after home.css:
home.css is not modified. To go back to the current red-pink
look, delete that one line - nothing else to undo.
Direction:
white - the page ground, cards, and panels
grey - charcoal for type and the dark feature bands,
warm-neutral greys for secondary text and hairlines
pink - the single accent: CTAs, eyebrows, italic emphasis,
swatches, and the glow on dark sections
============================================================ */
:root{
/* type + dark bands: charcoal grey, no purple cast */
--ink: #2A2A30;
--ink-2: #56565F;
--ink-3: #8B8B95;
/* grounds: white, with a light grey for alternating bands */
--paper: #FFFFFF;
--paper-2: #F5F2F3;
--white: #FFFFFF;
/* the accent */
--blush: #E84A8A; /* pink - buttons, dots, active states */
--blush-deep:#C21E68; /* deep pink - link text, italic emphasis, hover */
--blush-soft:#FDE7F0; /* pale pink - tint chips and icon tiles */
/* structure */
--line: #EDE8EA;
--line-2: #DAD3D6;
/* aliases the page uses for accents */
--green: #E84A8A;
--coral: #F2739B;
--amber: #C9973F;
}
/* ---- nav: white glass instead of warm cream ---- */
nav{background:rgba(255,255,255,.86)}
/* ---- neutral grey shadows (were aubergine-tinted) ---- */
.analyzer{box-shadow:0 20px 50px -30px rgba(35,35,42,.30)}
.tcard:hover{box-shadow:0 20px 40px -26px rgba(35,35,42,.32)}
.cat:hover{box-shadow:0 18px 34px -22px rgba(35,35,42,.55)}
.calc-shell{box-shadow:0 30px 60px -40px rgba(35,35,42,.28)}
.wiz{box-shadow:0 40px 90px -30px rgba(35,35,42,.45)}
/* ---- hero: pink pulse on the analyzer ---- */
.analyzer .a-label .pulse{box-shadow:0 0 0 0 rgba(232,74,138,.5)}
@keyframes pulse{
0% {box-shadow:0 0 0 0 rgba(232,74,138,.5)}
70% {box-shadow:0 0 0 8px rgba(232,74,138,0)}
100%{box-shadow:0 0 0 0 rgba(232,74,138,0)}
}
/* ---- hero visual: white badges, pink lipstick swatches ---- */
.hv-badge{background:rgba(255,255,255,.95);box-shadow:0 10px 30px -12px rgba(35,35,42,.38)}
.hv-swatches i:nth-child(1){background:#B01655!important}
.hv-swatches i:nth-child(2){background:#E84A8A!important}
.hv-swatches i:nth-child(3){background:#F58BB0!important}
.hv-swatches i:nth-child(4){background:#D63A76!important}
/* ---- dark bands: charcoal grey with a pink glow ---- */
.blend p,
.why p,
.privacy p,
.proof p.note,
.final-card p,
.res-vto p,
.foot-col a{color:#C6C4CE}
.foot-grid p{color:#B4B2BC}
.foot-bottom{color:#8E8C96}
.blend-visual{background:linear-gradient(140deg,#33333B,#212127);border-color:rgba(232,74,138,.22)}
.privacy .lock{background:rgba(232,74,138,.18)}
.proof-demo{border-color:rgba(232,74,138,.22)}
.res-vto{background:linear-gradient(150deg,#33333B,#26262C)}
.res-vto .vto-thumb{background:#212127;border-color:rgba(232,74,138,.32)}
/* ---- category tiles + overlays: neutral scrim ---- */
.cat figcaption{background:linear-gradient(to top,rgba(30,30,36,.88),rgba(30,30,36,0))}
.overlay{background:rgba(30,30,36,.6)}
.wiz-x{background:rgba(35,35,42,.06)}
.wiz-x:hover{background:rgba(35,35,42,.12)}
/* ---- final CTA card: pink bloom, white hairlines ---- */
.final-card::before{background:radial-gradient(circle,rgba(232,74,138,.38),transparent 70%)}
.final-card .btn-o{border-color:rgba(255,255,255,.4)}
.foot-grid{border-bottom-color:rgba(255,255,255,.14)}
/* ---- hero: visual fills the row, so the taller text column
no longer leaves a gap above/below the image ---- */
.hero-grid{align-items:stretch}
.hero-grid > div:first-child{display:flex;flex-direction:column;justify-content:center}
.hero-visual{height:100%}
@media(max-width:840px){
.hero-grid > div:first-child{display:block}
}
/* ---- hero: secondary CTA below the analyser card ---- */
.hero-secondary{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px}
.hero-secondary .hero-secondary-note{font-size:13.5px;color:var(--ink-3);line-height:1.45}
.btn-try{
position:relative;
display:inline-flex;align-items:center;gap:11px;
font-family:'Manrope',sans-serif;font-weight:600;font-size:15px;letter-spacing:.005em;
color:var(--blush-deep);
padding:13px 24px 13px 13px;
border-radius:100px;
border:1.5px solid rgba(232,74,138,.28);
background:linear-gradient(135deg,#fff 0%,var(--blush-soft) 100%);
box-shadow:0 10px 26px -18px rgba(232,74,138,.65);
cursor:pointer;
overflow:hidden;
transition:color .25s,border-color .25s,box-shadow .3s,transform .25s;
}
/* pink wash that sweeps in on hover */
.btn-try::before{
content:'';position:absolute;inset:0;border-radius:inherit;
background:linear-gradient(135deg,var(--blush) 0%,var(--blush-deep) 100%);
opacity:0;transition:opacity .28s;z-index:0;
}
.btn-try > *{position:relative;z-index:1}
.btn-try-ic{
display:grid;place-items:center;width:30px;height:30px;flex:none;
border-radius:50%;
background:var(--blush);color:var(--white);
box-shadow:0 0 0 4px rgba(232,74,138,.12);
transition:background .25s,color .25s,box-shadow .25s;
}
.btn-try-ic svg{width:17px;height:17px}
.btn-try-arrow{font-size:16px;line-height:1;transition:transform .25s}
.btn-try:hover{
color:var(--white);
border-color:var(--blush-deep);
box-shadow:0 16px 32px -18px rgba(232,74,138,.75);
transform:translateY(-2px);
}
.btn-try:hover::before{opacity:1}
.btn-try:hover .btn-try-ic{background:var(--white);color:var(--blush-deep);box-shadow:0 0 0 4px rgba(255,255,255,.22)}
.btn-try:hover .btn-try-arrow{transform:translateX(4px)}
.btn-try:active{transform:translateY(0)}
.btn-try:focus-visible{outline:2px solid var(--blush-deep);outline-offset:3px}
@media(max-width:640px){
.hero-secondary{gap:12px}
.btn-try{width:100%;justify-content:center}
.hero-secondary .hero-secondary-note{max-width:none;width:100%}
}
@media(prefers-reduced-motion:reduce){
.btn-try,.btn-try::before,.btn-try-ic,.btn-try-arrow{transition:none}
.btn-try:hover{transform:none}
}