/* Crystal Cleanse — landing design system
* =========================================================================
* Scoped to .cc so nothing leaks into Blocksy's header, footer or wp-admin.
* Custom properties namespaced --cc-* so they cannot collide with Blocksy's.
* border-left / padding-left converted to logical properties (RTL-ready).
*
* READ THIS BEFORE ADDING A RULE
* -------------------------------------------------------------------------
* 1. CLASS NAMES ARE PREFIXED, AND THE PROTOTYPE'S ARE NOT.
* The patterns emit cc-hero, cc-section, cc-center-head, cc-blog-foot,
* cc-news-small. The prototype (crystal-cleanse-landing-mineral-v4.html)
* calls the same things hero, section-pad, center-head, blog-foot and
* "news small". If you copy a rule across from the prototype you MUST
* translate the selector, or it will match nothing and fail silently.
* This exact mismatch shipped once and killed 18 rules — see README.
*
* Not everything is prefixed: hero-grid, hero-cta, hero-photo,
* ritual, dark, saluxe, steps, crystal-grid, post, feat and the token
* names are identical in both. Check the live DOM, do not assume.
*
* 2. THERE ARE TWO STYLESHEETS AND THEY HAVE DIFFERENT JOBS.
* This file = the design system. Anything that describes how the brand
* looks: color, type, spacing, layout of the sections.
* style.css = WordPress glue. Rules that exist only because of how
* Gutenberg emits markup — Query Loop wrappers, button
* resets, the content-size override. Put Gutenberg
* workarounds there, not here.
*
* 3. THIS FILE'S ENQUEUE IS GUARDED ON PURPOSE.
* See the comment in functions.php. A hard-coded dependency on an
* unregistered handle makes WordPress drop the whole stylesheet without
* an error.
*
* Dead rules for the phone mockups, the header and the footer were removed —
* the mockups ship as WebP images and Blocksy's builders own header/footer.
* All of it is still in the prototype if you ever need it back.
*/
.cc{--cc-surface:#F4F2F7;
--cc-sage:#E9E4F0;
--cc-sage-soft:#E9E4F0;
--cc-card:#FFFFFF;
/* Palette 2, issue #20. On sage, calculated contrast is 8.50:1 for gray
and 5.20:1 for muted. Newsletter micro-copy keeps gray by decision 7. */
--cc-ink:#1F1A27;
--cc-session:#1C1426;
--cc-on-dark-text:#F6F2FB;
--cc-on-dark-muted:#DCD3E8;
--cc-on-dark-subtle:#A89DB8;
--cc-gray:#423C4B;
--cc-muted:#625B6D;
--cc-line:#E1DBE9;
--cc-line-soft:#E1DBE9;
/* Lines are decoration. An unfilled field or button uses controlBorder:
calculated 3.96:1 on card, 3.56:1 on surface and 3.17:1 on sage.
Line cannot outline a control (issue #20; brand/tokens.json). */
--cc-control-border:#877A9E;
/* A failed form send (6 October 2026; brand/tokens.json). A muted rose, not a
signal red, so it sits beside the plum. The icon and border measure 6.08:1
on error-soft and 6.67:1 on surface; ink text on error-soft is 13.94:1. */
--cc-error:#9B2C42;
--cc-error-soft:#F7E4E8;
/* One plum accent from palette 2. Legacy custom-property names remain because
the website CSS reads them; accent-soft is a decorative line only. */
--cc-accent:#4B3A73;
--cc-accent-soft:#E1DBE9;
--cc-accent-on-dark:#CBB8EF;
--cc-amethyst:#4B3A73;
--cc-amethyst-soft:#CBB8EF;
/* The retained band names now alias the two-stop palette-2 ramp, accent to
session at 165deg. The middle stop is retired (decision 4, issue #20). */
--cc-amethyst-deep:#1C1426;
--cc-amethyst-mid:#4B3A73;
--cc-amethyst-low:#1C1426;
--cc-serif:'Newsreader', Georgia, 'Times New Roman', serif;
--cc-sans:'Rethink Sans', system-ui, -apple-system, sans-serif;
--cc-maxw:1180px;
--cc-radius:18px;
--cc-radius-lg:20px;
--cc-ease:cubic-bezier(.22,.61,.36,1);}
/* ── Base / reset ── */
.cc *{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.cc{font-family:var(--cc-sans);
background:var(--cc-surface);
color:var(--cc-ink);
line-height:1.6;
font-size:17px;
overflow-x:hidden;}
.cc a{color:inherit;text-decoration:none}
.cc img,
.cc svg{display:block;max-width:100%}
.cc section{position:relative}
/* ── Typography ── */
.cc h1,
.cc h2,
.cc h3,
.cc h4{font-family:var(--cc-serif);font-weight:400;line-height:1.06;letter-spacing:-.01em;color:var(--cc-ink);text-wrap:balance}
/* All three limits are load-bearing and were measured — see CLAUDE.md decision
8. Newsreader runs wider than v3's Fraunces, so the accent phrase "Clear your
energy." splits in two the moment h1 outgrows its column, which kills the
payoff of the hero.
max 4.5rem governs above ~1180px, where the container stops growing
slope 6.2vw governs 980–1180px, where it does not. Do NOT raise this to
6.4vw: the fixed 28px gutter tightens the column faster than
the type, and at 1088px the column takes <=68px while 6.4vw
renders 69.6px. (The port shipped 6.4vw for a while; restored.)
the 760px override below handles phones, where the 2.9rem floor is itself
wider than the column. */
.cc h1{font-size:clamp(2.9rem,6.2vw,4.5rem);font-optical-sizing:auto}
.cc h2{font-size:clamp(35px,4.2vw,52px)}
.cc h3{font-size:24px}
.cc em{font-style:italic;color:var(--cc-amethyst)}
.cc .eyebrow{font-family:var(--cc-sans);font-weight:600;font-size:14px;
letter-spacing:.22em;text-transform:uppercase;color:var(--cc-accent);}
.cc .lead{color:var(--cc-gray);font-size:clamp(21px,1.4vw,24px);line-height:1.65;max-width:46ch}
.cc .muted{color:var(--cc-muted)}
/* ── Section rhythm ── */
.cc .cc-section{padding:clamp(72px,11vw,144px) 0}
/* ── Buttons ── */
.cc .btn{display:inline-flex;align-items:center;gap:8px;
font-family:var(--cc-sans);font-weight:600;font-size:17px;
padding:16px 28px;border-radius:14px;cursor:pointer;border:1.5px solid transparent;
transition:transform .35s var(--cc-ease), background .3s var(--cc-ease), color .3s var(--cc-ease), box-shadow .35s var(--cc-ease);}
.cc .btn-primary{background:var(--cc-accent);color:var(--cc-card);box-shadow:0 14px 30px -16px rgba(31,26,39,.6)}
.cc .btn-primary:hover{background:var(--cc-ink);transform:translateY(-2px);box-shadow:0 20px 38px -16px rgba(31,26,39,.7)}
.cc .btn-ghost{background:transparent;color:var(--cc-ink);border-color:var(--cc-control-border)}
.cc .btn-ghost:hover{border-color:var(--cc-ink);transform:translateY(-2px)}
.cc .btn-light{background:var(--cc-on-dark-text);color:var(--cc-ink)}
/* .btn-ghost's border, --cc-control-border, is meant for light grounds.
This is its counterpart for the amethyst band.
The .45 alpha of onDarkText calculates to 3.15:1 against the plum stop,
the weakest specified point. Rendered pixels behind the button still need
checking because the glow can alter that contrast (issue #20). */
.cc .btn-ghost-on-dark{background:transparent;color:var(--cc-on-dark-text);border-color:rgba(246,242,251,.45)}
.cc .btn-ghost-on-dark:hover{background:rgba(246,242,251,.08);border-color:rgba(246,242,251,.6);transform:translateY(-2px)}
.cc .btn-light:hover{transform:translateY(-2px);box-shadow:0 16px 34px -18px rgba(31,26,39,.5)}
/* Arrow affordance ------------------------------------------------------------
In the prototype this was a literal → inside the
button. It cannot be markup here:
- wp:read-more's "content" attribute is a plain string and cannot hold a
span at all;
- a custom span inside core/button's rich text risks tripping Gutenberg's
block validation ("this block contains unexpected or invalid content").
Both .btn and .post .read are inline-flex with a gap, so a ::after becomes a
flex item and inherits that gap exactly as the span did — same spacing, same
hover slide, no markup.
These four are the only places the prototype puts an arrow. It CANNOT key off
.btn-primary alone: the newsletter's "Join the List" is also .btn-primary and
deliberately has none. .btn-ghost never carries one either. */
.cc .hero-cta .btn-primary::after,
.cc .saluxe-cta .btn-light::after,
.cc .contact-form .btn-primary::after,
.cc .cc-about-cta-buttons .btn-light::after,
.cc .post .read::after{content:"→";transition:transform .35s var(--cc-ease)}
.cc .hero-cta .btn-primary:hover::after,
.cc .saluxe-cta .btn-light:hover::after,
.cc .contact-form .btn-primary:hover::after,
.cc .cc-about-cta-buttons .btn-light:hover::after,
.cc .post:hover .read::after{transform:translateX(4px)}
/* The dark band's centered head is the one that must not reserve space beneath
it — the band ends there. The prototype carried style="margin-bottom:0"
inline; the port dropped it, leaving the default clamp(32px,6vw,72px). */
.cc .dark .cc-center-head{margin-bottom:0}
/* ── Hero ── */
/* The section is the photo's positioning context; its full-width box lets the
photo reach the window edge while the text stays on the plain page ground. */
.cc .cc-hero{position:relative;padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(56px,9vw,120px);overflow:hidden}
/* The grid's min-height gives the absolute photo its height: the prototype's
1440×900 viewport calculated an 842px hero on 29 September 2026. */
.cc .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;min-height:clamp(520px,44vw,720px)}
.cc .cc-hero h1{margin:16px 0 12px}
.cc .cc-hero h1 .ln{display:block}
/* The eyebrow is quiet body text here so the headline carries the accent. */
.cc .cc-hero .eyebrow{font-size:17px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--cc-muted)}
.cc .hero-cta{display:flex;gap:12px 24px;flex-wrap:wrap;align-items:center;margin:32px 0 0}
/* The published button markup lives in the WordPress database, so its ghost
classes stay while this hero-specific rule draws it as a text link. */
.cc .hero-cta .btn-ghost{padding:0;border:0;background:none;box-shadow:none}
.cc .hero-cta .btn-ghost:hover{transform:none}
/* The link selector has specificity (0,5,0), and its :hover variant (0,6,0);
both beat style.css's later (0,4,0) all: unset regardless of load order.
The approved inline-block and 11px block padding were calculated for a
44px target from a 22px line.
Local Chromium instead measures a 27.2px inherited line and a 49.2px
wrapper: the flex item blockifies. Its full-wrapper link ::after covers it. */
.cc .hero-cta .wp-block-button.btn-ghost .wp-block-button__link{display:inline-block;padding:11px 0;color:var(--cc-accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cc .hero-cta .wp-block-button.btn-ghost .wp-block-button__link:hover{color:var(--cc-ink)}
/* ── Hero lifestyle photo ── */
/* Half the grid gap beyond its middle starts the photo exactly where the
second column would; the section's right edge is the window edge. */
.cc .hero-photo{position:absolute;top:0;bottom:0;right:0;left:calc(50% + clamp(16px,2.5vw,36px))}
.cc .hero-photo .frame{margin:0;width:100%;height:100%;background:var(--cc-sage)}
/* The photo is a 4:5 master (2048×2560, live 29 September 2026) composed with
the crystal and phone clear of the top and bottom 10%, so a centred crop
serves every box: about 4:5 on laptops, near square at 1920px and on
tablets. Replace it with another 4:5 image framed the same way. */
.cc .hero-photo .frame img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 50%}
/* ── Centered section heads ── */
.cc .cc-center-head{text-align:center;max-width:680px;margin:0 auto clamp(32px,6vw,72px)}
.cc .cc-center-head .eyebrow{display:block;margin-bottom:1rem}
.cc .cc-center-head .lead{margin:12px auto 0;text-align:center}
/* ── How it works ── */
.cc .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cc .step{background:var(--cc-card);border:1px solid var(--cc-line-soft);border-radius:var(--cc-radius);padding:32px 32px;transition:transform .4s var(--cc-ease),box-shadow .4s var(--cc-ease)}
.cc .step:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(31,26,39,.26)}
.cc .step .num{font-family:var(--cc-serif);font-size:21px;color:var(--cc-accent);width:46px;height:46px;border:1px solid var(--cc-control-border);
border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.cc .step h3{margin-bottom:4px}
.cc .step p{font-size:17px;color:var(--cc-gray)}
/* ── Ritual (app) section ── */
/* Two sections share the sage ground: the app/ritual band and the blog band.
In the prototype both literally carry class="ritual" — the blog section is
. The port renamed the blog
one to cc-blog, and nothing styled it, so that band lost its background
entirely and read as page-surface white.
(The prototype's .ritual also sets overflow:hidden, per CLAUDE.md decision 9.
Not carried over, and not needed: it existed to clip .phone-wrap::after, the
glow behind the CSS phone mockups, which are flat WebP images in this port.) */
.cc .ritual,
.cc .cc-blog{background:var(--cc-sage)}
.cc .ritual-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
.cc .feat{list-style:none;margin-top:32px;display:grid;gap:16px}
/* NOTE: this flex row assumes [icon, text]. patterns/app-mockup.php emits no
icon element, so style.css overrides li back to display:block. The .fi icon
box that used to sit here was removed with the rest of the dead rules. */
/* Feature-list icons ----------------------------------------------------------
The prototype puts a Lucide icon in a 34px tinted box before each item:
Term
desc
.
That structure does not survive the port — core/list-item is plain rich text
and cannot hold a wrapping an inline