/* ============================================================ CONFESSIONS-LUX — premium reading-experience layer ---------------------------------------------------------------- ALL rules scoped under .conf-lux (applied to only on pages that opt in). Zero bleed to sitewide chrome or other templates. Design language: warm cream / porcelain ground, deep ink text, coral accent #9A6A4B, Canela serif display + Inter body, generous reading rhythm, elegant pull-quote moments, subtle scroll reveals. ============================================================ */ /* ─── DESIGN TOKENS ───────────────────────────────────────────── All scoped under .conf-lux so they override only on opted-in pages. They intentionally shadow the reviews.css :root tokens to shift the palette toward the cat-lux aesthetic. ─────────────────────────────────────────────────────────────── */ .conf-lux { --cl-canvas: #ffffff; /* warm porcelain — lighter than reviews canvas */ --cl-canvas-2: #f4f4f5; /* parchment panel — pull-quotes, cost blocks */ --cl-ink: #171514; /* deep ink — slightly warmer than pure black */ --cl-ink-body: #3C3730; /* comfortable reading body text */ --cl-ink-muted: #78726B; /* metadata, byline secondary */ --cl-coral: #9A6A4B; /* editorial accent — eyebrow, drop-cap, accents */ --cl-coral-deep: #A03C3C; /* deeper hover state */ --cl-coral-soft: #F5DEDE; /* very soft blush — decorative use only */ --cl-line: rgba(23,21,20,0.10); /* hairline dividers */ --cl-line-2: rgba(23,21,20,0.16); /* slightly stronger rule */ --cl-serif: 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --cl-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --cl-shadow: 0 2px 16px rgba(23,21,20,0.06), 0 8px 40px rgba(23,21,20,0.04); --cl-measure: 64ch; /* comfortable reading column width */ } /* ─── PAGE GROUND ─────────────────────────────────────────────── */ .conf-lux { background: var(--cl-canvas); } /* ─── HERO SECTION ────────────────────────────────────────────── */ .conf-lux .conf-hero { padding-block: clamp(4rem, 8vw, 7rem); border-bottom: 1px solid var(--cl-line-2); background: var(--cl-canvas); } /* The conf-hero uses .wrap with max-width: 56rem inline — we enhance the typography inside it without touching the wrapping layout. */ /* Eyebrow — tight tracked caps in coral */ .conf-lux .conf-hero .eyebrow { font-family: var(--cl-sans) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.38em !important; text-transform: uppercase !important; color: var(--cl-coral) !important; margin-bottom: 1.75rem !important; display: block; } /* H1 — dramatic Canela display title, generous scale */ .conf-lux .conf-hero h1 { font-family: var(--cl-serif) !important; font-weight: 300 !important; font-size: clamp(2.8rem, 7vw, 5.5rem) !important; line-height: 1.01 !important; letter-spacing: -0.025em !important; color: var(--cl-ink) !important; margin: 0 0 2rem !important; max-width: 20ch !important; } /* The italic emphasis in the headline gets the coral */ .conf-lux .conf-hero h1 em { font-style: italic !important; color: var(--cl-coral) !important; } /* Lede — larger, comfortable intro paragraph */ .conf-lux .conf-hero .lede { font-family: var(--cl-sans) !important; font-size: clamp(1.08rem, 1.4vw, 1.22rem) !important; line-height: 1.6 !important; color: var(--cl-ink-body) !important; max-width: 54ch !important; } /* Thin separator rule between hero title block and lede */ .conf-lux .conf-hero h1::after { content: ''; display: block; width: 36px; height: 1px; background: var(--cl-coral); margin: 1.75rem 0 1.75rem; } /* ─── BYLINE ──────────────────────────────────────────────────── */ .conf-lux .conf-byline { display: flex !important; align-items: center !important; gap: 1rem !important; padding-block: 2.25rem !important; border-bottom: 1px solid var(--cl-line-2) !important; margin-bottom: 3.5rem !important; } /* Avatar — warm parchment disc, serif initial */ .conf-lux .conf-byline .avatar { width: 52px !important; height: 52px !important; border-radius: 50% !important; background: var(--cl-canvas-2) !important; border: 1px solid var(--cl-line-2) !important; display: grid !important; place-items: center !important; font-family: var(--cl-serif) !important; font-size: 1.1rem !important; font-weight: 400 !important; color: var(--cl-coral) !important; flex-shrink: 0 !important; letter-spacing: -0.01em !important; } .conf-lux .conf-byline .meta { font-family: var(--cl-sans) !important; font-size: 0.84rem !important; line-height: 1.55 !important; color: var(--cl-ink-muted) !important; } .conf-lux .conf-byline .meta strong { color: var(--cl-ink) !important; font-weight: 500 !important; display: block !important; font-size: 0.9rem !important; margin-bottom: 0.1rem !important; } /* ─── READING COLUMN ──────────────────────────────────────────── */ .conf-lux .conf-body { max-width: var(--cl-measure) !important; margin-inline: auto !important; } /* Body paragraphs — larger type, generous leading, comfortable read */ .conf-lux .conf-body p { font-family: var(--cl-sans) !important; font-size: clamp(1.06rem, 1.2vw, 1.14rem) !important; line-height: 1.72 !important; color: var(--cl-ink-body) !important; margin: 0 0 1.6rem !important; letter-spacing: 0.003em !important; } /* Drop-cap on the first paragraph — Canela, coral */ .conf-lux .conf-body p:first-of-type::first-letter { font-family: var(--cl-serif) !important; font-weight: 300 !important; font-size: 5rem !important; float: left !important; line-height: 0.82 !important; padding-right: 0.55rem !important; padding-top: 0.25rem !important; color: var(--cl-coral) !important; } /* Section H3s — italic Canela, refined spacing */ .conf-lux .conf-body h3 { font-family: var(--cl-serif) !important; font-style: italic !important; font-weight: 300 !important; font-size: clamp(1.45rem, 2vw, 1.85rem) !important; line-height: 1.22 !important; letter-spacing: -0.01em !important; color: var(--cl-ink) !important; margin: 3rem 0 1.25rem !important; padding-top: 0.5rem !important; border-top: 1px solid var(--cl-line) !important; } /* Links in body — subtle bordeaux underline */ .conf-lux .conf-body a { color: var(--cl-ink-body) !important; text-decoration: none !important; border-bottom: 1px solid rgba(200,79,79,0.4) !important; transition: color 180ms ease, border-color 180ms ease !important; } .conf-lux .conf-body a:hover { color: var(--cl-coral) !important; border-bottom-color: var(--cl-coral) !important; } /* ─── PRODUCT IMAGE ───────────────────────────────────────────── */ .conf-lux .conf-product-img { aspect-ratio: 4 / 3 !important; max-width: 480px !important; margin: 0 auto 3rem !important; background-color: var(--cl-canvas-2) !important; box-shadow: var(--cl-shadow) !important; /* background-image + background-size + background-position come from the inline style in the HTML — we don't override those */ } /* ─── PULL-QUOTE / COST BLOCK ─────────────────────────────────── */ .conf-lux .conf-cost { background: var(--cl-canvas-2) !important; border-left: 2px solid var(--cl-coral) !important; padding: 2rem 2.25rem !important; margin: 3rem 0 !important; font-family: var(--cl-serif) !important; font-style: italic !important; font-weight: 300 !important; font-size: clamp(1.2rem, 1.6vw, 1.45rem) !important; line-height: 1.5 !important; color: var(--cl-ink-body) !important; letter-spacing: -0.005em !important; position: relative !important; } /* Decorative opening quote mark */ .conf-lux .conf-cost::before { content: '\201C'; position: absolute; top: -0.45em; left: 2.25rem; font-family: var(--cl-serif); font-size: 4rem; font-style: normal; font-weight: 300; line-height: 1; color: var(--cl-coral); opacity: 0.25; pointer-events: none; user-select: none; } /* The "THE DAMAGE" label inside .conf-cost */ .conf-lux .conf-cost strong { font-family: var(--cl-sans) !important; font-style: normal !important; font-weight: 600 !important; font-size: 9px !important; letter-spacing: 0.38em !important; text-transform: uppercase !important; color: var(--cl-coral) !important; display: block !important; margin-bottom: 0.85rem !important; } /* ─── "INSTEAD" RECOMMENDATION BLOCK ─────────────────────────── */ .conf-lux .conf-instead { border: 1px solid var(--cl-line-2) !important; padding: 2rem 2.25rem !important; margin: 3rem 0 !important; background: var(--cl-canvas) !important; box-shadow: var(--cl-shadow) !important; } .conf-lux .conf-instead-label { font-family: var(--cl-sans) !important; font-size: 9px !important; letter-spacing: 0.38em !important; text-transform: uppercase !important; color: var(--cl-ink-muted) !important; margin-bottom: 0.6rem !important; font-weight: 600 !important; } .conf-lux .conf-instead-product { font-family: var(--cl-serif) !important; font-weight: 400 !important; font-size: clamp(1.3rem, 1.7vw, 1.55rem) !important; letter-spacing: -0.01em !important; color: var(--cl-ink) !important; margin-bottom: 0.5rem !important; } .conf-lux .conf-instead-why { font-family: var(--cl-sans) !important; font-size: 0.95rem !important; line-height: 1.6 !important; color: var(--cl-ink-body) !important; } /* ─── SECTION DIVIDER — decorative rule between article acts ──── */ .conf-lux .conf-body h3 + p::before { /* no pseudo on paragraph — use the h3 border-top instead (above) */ } /* ─── WRAP MAX-WIDTH ENHANCEMENT ─────────────────────────────── */ /* The HTML uses inline style="max-width: 56rem;" on .wrap. We subtly increase the content breathing room and ensure consistent padding on mobile. */ .conf-lux main .wrap { padding-inline: clamp(1.25rem, 4vw, 3rem) !important; } /* ─── SCROLL-REVEAL ───────────────────────────────────────────── */ /* Respects prefers-reduced-motion. Applied via JS below (in the HTML script tag). CSS only defines the initial/final states. */ @media (prefers-reduced-motion: no-preference) { .conf-lux [data-cl-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 680ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 680ms cubic-bezier(0.22, 0.61, 0.36, 1); } .conf-lux [data-cl-reveal].is-visible { opacity: 1; transform: translateY(0); } /* Stagger for siblings — delay steps added by JS nth-child */ .conf-lux [data-cl-reveal][data-cl-delay="1"] { transition-delay: 80ms; } .conf-lux [data-cl-reveal][data-cl-delay="2"] { transition-delay: 160ms; } .conf-lux [data-cl-reveal][data-cl-delay="3"] { transition-delay: 240ms; } } /* ─── MOBILE REFINEMENTS ──────────────────────────────────────── */ @media (max-width: 720px) { .conf-lux .conf-hero { padding-block: clamp(2.5rem, 6vw, 4rem); } .conf-lux .conf-hero h1 { font-size: clamp(2.4rem, 9vw, 3.2rem) !important; max-width: none !important; } .conf-lux .conf-hero h1::after { margin: 1.25rem 0; } .conf-lux .conf-byline { padding-block: 1.75rem !important; margin-bottom: 2.5rem !important; } .conf-lux .conf-body p { font-size: 1.06rem !important; line-height: 1.68 !important; } .conf-lux .conf-body p:first-of-type::first-letter { font-size: 4rem !important; } .conf-lux .conf-cost, .conf-lux .conf-instead { padding: 1.5rem 1.5rem !important; margin: 2.25rem 0 !important; } .conf-lux .conf-product-img { max-width: 100% !important; margin-bottom: 2.25rem !important; } .conf-lux .conf-body h3 { font-size: clamp(1.3rem, 4.5vw, 1.6rem) !important; margin: 2.25rem 0 1rem !important; } } /* ─── PRINT ───────────────────────────────────────────────────── */ @media print { .conf-lux [data-cl-reveal] { opacity: 1 !important; transform: none !important; } }