/* * Refine layer — premium wellness polish. * - Spacing rhythm, multi-layer shadows, refined transitions * - Trust badges, drop cap, premium table design * - Scroll-reveal animations, organic textures, tropical SVG accents * * Loaded last so it wins specificity ties cleanly. */ /* ---------- Tokens ---------- */ :root { --cor-ease: cubic-bezier(.2, .8, .2, 1); --cor-ease-soft: cubic-bezier(.4, 0, .2, 1); /* Multi-layer shadow system — depth without grey */ --cor-elev-1: 0 1px 2px rgba(63, 53, 32, 0.04), 0 4px 10px rgba(63, 53, 32, 0.04); --cor-elev-2: 0 1px 2px rgba(63, 53, 32, 0.05), 0 8px 22px rgba(63, 53, 32, 0.06), 0 24px 48px rgba(63, 53, 32, 0.05); --cor-elev-3: 0 1px 2px rgba(63, 53, 32, 0.06), 0 12px 28px rgba(63, 53, 32, 0.08), 0 36px 80px rgba(63, 53, 32, 0.10); --cor-elev-glow: 0 0 0 1px rgba(201, 168, 124, 0.4), 0 12px 36px rgba(201, 168, 124, 0.18); /* Section vertical rhythm — deliberate scale */ --cor-step-1: clamp(60px, 8vw, 112px); --cor-step-2: clamp(48px, 6vw, 88px); --cor-step-3: clamp(36px, 4.5vw, 64px); } /* ---------- Section rhythm + layered backgrounds ---------- */ .cor-section { padding: var(--cor-step-1) 0; } .cor-section + .cor-section { padding-top: var(--cor-step-2); } /* Alternate sections get a subtle wash to layer depth */ .cor-fp, .cor-recipe-spotlight, .cor-faq, .cor-recent { position: relative; } .cor-fp::before, .cor-recent::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(900px 500px at 80% 0%, rgba(201,168,124,0.08), transparent 60%); z-index: -1; } /* Tropical leaf accent — pure SVG, no external request */ .cor-hero, .cor-quiz-cta, .cor-newsletter-section { position: relative; overflow: hidden; } .cor-hero::after, .cor-newsletter-section::after { content: ''; position: absolute; right: -60px; bottom: -80px; width: 280px; height: 280px; background-image: url("data:image/svg+xml;utf8,"); background-size: contain; background-repeat: no-repeat; pointer-events: none; opacity: .9; } .cor-newsletter-section::after { left: -60px; right: auto; transform: scaleX(-1); } /* Subtle organic dot texture on warm sections */ .cor-trust-bar, .cor-editorial-trust, .cor-related { background-image: radial-gradient(circle at 1px 1px, rgba(63,93,61,0.06) 1px, transparent 1px); background-size: 24px 24px; } /* ---------- Transitions ---------- */ .cor-card, .cor-tool-card, .cor-cat-card, .cor-product-box, .cor-pb-cta, .cor-btn, .cor-uc-tile, .cor-et-step, .cor-feature-card, .cor-rs-card, .cor-ing-card, .cor-quiz-opt, .cor-recipe-radio { transition: transform .35s var(--cor-ease), box-shadow .35s var(--cor-ease), border-color .25s var(--cor-ease-soft), background-color .25s var(--cor-ease-soft), color .2s var(--cor-ease-soft); } /* ---------- Card depth ---------- */ .cor-card, .cor-tool-card, .cor-product-box, .cor-uc-tile, .cor-et-step, .cor-feature-card, .cor-rs-card, .cor-ing-card { box-shadow: var(--cor-elev-1); } .cor-card:hover, .cor-tool-card:hover, .cor-uc-tile:hover, .cor-et-step:hover, .cor-feature-card:hover, .cor-ing-card:hover { box-shadow: var(--cor-elev-2); transform: translateY(-4px); } .cor-pb-featured { box-shadow: var(--cor-elev-2); } .cor-pb-featured:hover { box-shadow: var(--cor-elev-3); transform: translateY(-3px); } /* Buttons — softer, more elevated */ .cor-btn-cta { box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 14px rgba(232,81,28,0.22), 0 2px 4px rgba(232,81,28,0.18); } .cor-btn-cta:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 10px 22px rgba(232,81,28,0.30), 0 4px 8px rgba(232,81,28,0.20); transform: translateY(-2px); } .cor-btn-cta:active { transform: translateY(0); } /* ---------- Typography refinement ---------- */ body { font-size: 17px; line-height: 1.7; } h1, h2, h3 { font-feature-settings: 'opsz' 24, 'ss01' on; } .cor-hero-title { line-height: 1.05; letter-spacing: -.025em; } .cor-section-title { line-height: 1.15; letter-spacing: -.018em; margin-bottom: .35em; } .cor-section-sub { line-height: 1.65; } .cor-section-head { margin-bottom: var(--cor-step-3); } /* Drop cap on the first paragraph of single articles */ .cor-single .entry-content > p:first-of-type::first-letter { font-family: var(--cor-serif); font-size: 4.4em; font-weight: 500; float: left; line-height: .85; margin: .12em .12em -.05em 0; color: var(--cor-sage-d); font-style: italic; } .cor-single .entry-content { font-size: 1.1rem; line-height: 1.8; } .cor-single .entry-content p { margin-bottom: 1.4em; } .cor-single .entry-content > p:first-of-type { font-size: 1.18em; color: var(--cor-ink-2); } /* Eyebrows — slightly more breathing room */ .cor-eyebrow { letter-spacing: .16em; margin-bottom: .9rem; } /* ---------- Trust badges ---------- */ .cor-trust-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; align-items: center; } .cor-trust-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; letter-spacing: .03em; padding: 5px 11px 5px 9px; border-radius: 999px; background: var(--cor-paper); border: 1px solid var(--cor-line); color: var(--cor-ink-2); line-height: 1; } .cor-trust-badge svg { flex: 0 0 auto; } .cor-trust-badge--editor { background: linear-gradient(135deg, #FBE9DD, #FFD9C7); color: #8C3812; border-color: transparent; } .cor-trust-badge--lab { background: linear-gradient(135deg, #ECF1F4, #DAE3EA); color: #2A4659; border-color: transparent; } .cor-trust-badge--organic { background: linear-gradient(135deg, var(--cor-sage-l), #C8D8C2); color: var(--cor-sage-d); border-color: transparent; } .cor-trust-badge--fair { background: linear-gradient(135deg, var(--cor-cream-l), #E8D4AE); color: var(--cor-cream-d); border-color: transparent; } .cor-trust-badge--cold { background: linear-gradient(135deg, #E2EEF6, #C9DEEC); color: #1F4259; border-color: transparent; } .cor-trust-badge--fact { background: linear-gradient(135deg, #DCE5D8, #C0D2BB); color: var(--cor-sage-d); border-color: transparent; } .cor-trust-badge--updated { background: var(--cor-bg-warm); } .cor-trust-badge--source { background: #F2EFE8; } /* ---------- Comparison table polish ---------- */ .cor-compare-tablewrap, .cor-compare-wrap { box-shadow: var(--cor-elev-1); background: var(--cor-paper); } .cor-compare-table thead th { position: sticky; top: 0; z-index: 2; background: linear-gradient(180deg, rgba(255,253,249,0.95), rgba(244,239,229,0.92)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--cor-line-2); font-family: var(--cor-sans); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-muted); } .cor-compare-table tbody th { background: rgba(244,239,229,0.5); font-weight: 600; color: var(--cor-ink-2); white-space: nowrap; font-size: .85rem; } .cor-compare-table tbody tr { transition: background-color .2s var(--cor-ease-soft); } .cor-compare-table tbody tr:hover { background: rgba(201,168,124,0.06); } .cor-compare-table td { color: var(--cor-ink-2); } .cor-compare-table .cor-compare-cta-row td { padding-top: 18px; padding-bottom: 18px; background: var(--cor-cream-l); } /* Highlighted column (winner) — applied via .is-pick on header + body cells */ .cor-compare-table thead th.is-pick, .cor-compare-table td.is-pick { background: linear-gradient(180deg, rgba(220,229,216,0.55), rgba(220,229,216,0.18)); } .cor-compare-table thead th.is-pick { position: relative; box-shadow: inset 0 -3px 0 var(--cor-sage-d); } .cor-compare-table thead th.is-pick::before { content: '★ Editor pick'; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); background: var(--cor-sage-d); color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 10px rgba(63,93,61,0.25); } .cor-compare-table thead th.is-pick { padding-top: 32px !important; } /* Mobile horizontal swipe with subtle gradient fade hint */ @media (max-width: 760px) { .cor-compare-tablewrap, .cor-compare-wrap { position: relative; } .cor-compare-tablewrap::after, .cor-compare-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 32px; background: linear-gradient(90deg, transparent, var(--cor-paper)); pointer-events: none; } .cor-compare-table thead th:first-child, .cor-compare-table tbody th { position: sticky; left: 0; z-index: 3; box-shadow: 1px 0 0 var(--cor-line); } } /* ---------- Tool result polish (CSS-only animations) ---------- */ @keyframes cor-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes cor-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes cor-pop { 0% { opacity: 0; transform: scale(.94); } 60% { opacity: 1; transform: scale(1.02); } 100% { transform: scale(1); } } @keyframes cor-progress-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Tool shells fade in on open */ .cor-quiz-app, .cor-calc-app, .cor-vis-app, .cor-ing-app, .cor-recipe-app, .cor-storage-app, .cor-compare-app, .cor-uc-app { animation: cor-fade-in .5s var(--cor-ease) both; } /* Calculator big number — animated emphasis on render */ .cor-calc-num { animation: cor-pop .45s var(--cor-ease) both; display: inline-block; } .cor-calc-result { animation: cor-fade-up .45s var(--cor-ease) both; } /* Quiz result */ .cor-quiz-result { animation: cor-fade-up .5s var(--cor-ease) both; } .cor-quiz-result h2 em { background: linear-gradient(120deg, transparent 0%, var(--cor-cream-l) 0%); background-size: 100% 38%; background-repeat: no-repeat; background-position: 0 80%; padding: 0 .15em; } /* Quiz progress: shimmer while moving */ .cor-quiz-progress > div { background-image: linear-gradient(90deg, var(--cor-sage), var(--cor-cream), var(--cor-sage)); background-size: 200% 100%; animation: cor-progress-shimmer 2.4s linear infinite; } /* Use Case detail panel pops when active */ .cor-uc-detail { animation: cor-fade-up .35s var(--cor-ease) both; } /* Storage tracker: jar pulse on warning */ @keyframes cor-pulse-warning { 0%,100% { box-shadow: 0 0 0 0 rgba(232,81,28,0); } 50% { box-shadow: 0 0 0 6px rgba(232,81,28,0.08); } } .cor-jar.is-warning, .cor-jar.is-expired { animation: cor-pulse-warning 2.6s var(--cor-ease) infinite; } /* ---------- Scroll-reveal hooks (anim.js sets .is-in) ---------- */ .cor-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--cor-ease), transform .7s var(--cor-ease); will-change: opacity, transform; } .cor-reveal.is-in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .cor-reveal { opacity: 1; transform: none; transition: none; } .cor-quiz-progress > div { animation: none; } .cor-jar.is-warning, .cor-jar.is-expired { animation: none; } } /* ---------- Hover refinements ---------- */ .cor-card-thumb img, .cor-feature-card-thumb img, .cor-rs-media img { transition: transform .9s var(--cor-ease); } .cor-card:hover .cor-card-thumb img { transform: scale(1.06); } .cor-feature-card:hover .cor-feature-card-thumb img { transform: scale(1.04); } .cor-rs-card:hover .cor-rs-media img { transform: scale(1.04); } .cor-tool-card { background-image: linear-gradient(180deg, var(--cor-paper) 0%, var(--cor-paper) 100%); } .cor-tool-card:hover { background-image: linear-gradient(180deg, var(--cor-paper) 0%, var(--cor-cream-l) 130%); } .cor-cat-card { background-image: linear-gradient(180deg, var(--cor-paper) 0%, var(--cor-paper) 100%); } .cor-cat-card:hover { background-image: linear-gradient(180deg, var(--cor-paper) 0%, var(--cor-sage-l) 140%); border-color: var(--cor-sage); } /* Subtle underline grow on link-style buttons */ .cor-btn-link { position: relative; } .cor-btn-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(.4); transform-origin: left; transition: transform .35s var(--cor-ease); } .cor-btn-link:hover::after { transform: scaleX(1); } /* ---------- Header refinement ---------- */ .cor-header { background: rgba(250, 247, 242, 0.85); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } /* ---------- Sticky CTA refinement ---------- */ .cor-sticky-cta { background: rgba(26, 26, 26, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ---------- Footer refinement ---------- */ .cor-footer-newsletter input[type="email"] { transition: background-color .2s var(--cor-ease-soft), border-color .2s var(--cor-ease-soft); } .cor-footer-newsletter input[type="email"]:focus { outline: none; background: rgba(255,255,255,0.08); border-color: var(--cor-cream); } /* ---------- Image rendering tip — softer, never crunchy ---------- */ img { image-rendering: -webkit-optimize-contrast; }