/*
Theme Name: MindOFF
Theme URI: https://example.com/
Author: MindOFF
Author URI: https://example.com/
Description: Custom WordPress theme for MindOFF, a premium mental wellness device for binaural frequencies and daily relaxation. Converted directly from the approved static site implementation — no visual, content, or interaction changes were made during conversion.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mindoff
*/
/* ==========================================================================
Everything below this line is the UNCHANGED approved site stylesheet,
carried over verbatim from the reviewed mindoff-website.zip source.
========================================================================== */
/* ==========================================================================
MindOFF™ — Homepage Stylesheet
Mobile-first. Design tokens derived from measured brand asset values
(see build notes). Organized by: Tokens → Base → Layout → Components →
Sections → Responsive breakpoints.
========================================================================== */
/* ---------------------------------------------------------------------
1. DESIGN TOKENS
Colors below are taken directly from the official logo asset
(measured), with tints/shades derived from the same hues for
hover/border states — no unrelated colors introduced.
--------------------------------------------------------------------- */
:root {
/* Brand colors — measured from official logo asset */
--color-ink: #0B0906; /* near-black, matches logo wordmark */
--color-cream: #FFFADD; /* logo background cream */
--color-cream-soft: #FFFDF5; /* lighter tint, alternating sections */
--color-orange: #E94E0C; /* logo accent — power icon / tagline */
--color-orange-dark: #C43F09; /* darker shade, hover state */
--color-forest: #1A3227; /* NEW (disclosed): sampled from the "Curious about your mind?" Mind Check CTA reference screenshot — used only by .mind-check-entry */
--color-blush: #F8E9E1; /* NEW (disclosed): exact hex supplied for the About page "What We're Giving You" cards — used only by .about-giving-cards */
/* Neutral scale (derived, same undertone as ink/cream) */
--color-white: #FFFFFF;
--color-gray-50: #F7F6F1;
--color-gray-200: #E4E1D8;
--color-gray-400: #B8B3A6;
--color-gray-600: #726C5F;
--color-gray-800: #3A362E;
/* Typography — primary: Outfit (headlines/labels/buttons), secondary: Source Sans 3 (body) */
--font-display: 'Outfit', system-ui, sans-serif;
--font-body: 'Source Sans 3', system-ui, sans-serif;
/* Type scale (mobile-first base; scaled up at breakpoints) */
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.25rem;
--text-4xl: 2.75rem;
/* Spacing scale */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--space-9: 6rem;
/* Radius — soft/restrained, open decision flagged for client sign-off */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px; /* NEW (disclosed): added for the About page "What We're Giving You" cards' larger corner radius — not referenced anywhere else, so no existing rounded corner changes size */
--radius-pill: 999px;
/* Shadow — minimal, used sparingly */
--shadow-soft: 0 8px 30px rgba(11, 9, 6, 0.06);
/* Motion */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--duration: 200ms;
--container-max: 1200px;
}
/* ---------------------------------------------------------------------
2. RESET & BASE
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-ink);
background: var(--color-white);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.15;
margin: 0 0 var(--space-4);
letter-spacing: -0.01em;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); font-weight: 500; }
p { margin: 0 0 var(--space-4); color: var(--color-gray-800); }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
svg { display: block; }
/* Accessible focus states — visible everywhere, not just :hover */
a:focus-visible,
button:focus-visible,
.accordion-trigger:focus-visible {
outline: 2px solid var(--color-orange);
outline-offset: 3px;
border-radius: 4px;
}
.skip-link {
position: absolute;
left: -999px;
top: auto;
background: var(--color-ink);
color: var(--color-white);
padding: var(--space-3) var(--space-5);
z-index: 1000;
border-radius: var(--radius-sm);
}
.skip-link:focus {
left: var(--space-4);
top: var(--space-4);
}
/* ---------------------------------------------------------------------
3. LAYOUT PRIMITIVES
--------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-5);
}
.section { padding-block: var(--space-8); }
.section-alt { background: var(--color-cream-soft); }
.section-narrow { max-width: 720px; }
.section-heading-block { margin-bottom: var(--space-6); max-width: 640px; }
.eyebrow {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
/* orange-dark (not the base brand orange) used here for AA text contrast
at this small size — base orange is reserved for large text/icons/fills */
color: var(--color-orange-dark);
margin: 0 0 var(--space-2);
}
.eyebrow-invert { color: var(--color-cream); }
.section-lede {
font-size: var(--text-lg);
color: var(--color-gray-800);
}
/* ---------------------------------------------------------------------
4. BUTTONS
--------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
/* All buttons sitewide are Inter (final typography rule: headline =
Outfit, navigation + buttons = Inter, supporting/body/proof text =
Source Sans 3) — not the --font-display token. */
font-family: 'Inter', system-ui, sans-serif;
font-weight: 500;
font-size: var(--text-base);
padding: 0.9rem 1.75rem;
border-radius: var(--radius-pill);
border: 2px solid transparent;
transition: transform var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease);
white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--color-ink); color: var(--color-white); }
.btn-primary:hover { background: #000; }
.btn-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn-secondary:hover { background: var(--color-ink); color: var(--color-white); }
/* Accent buttons use BLACK text on orange — measured contrast (5.5:1)
performs meaningfully better than white text on orange (3.8:1) */
.btn-accent { background: var(--color-orange); color: var(--color-ink); }
.btn-accent:hover { background: var(--color-orange-dark); color: var(--color-white); }
/* NEW (disclosed, added for the Homepage "MindOFF™ Wearable Device"
purchase section's Buy Now button, per direct instruction that its
color be white): a white-filled button with an orange border/text so
it still reads clearly against this theme's white/cream section
backgrounds, rather than disappearing into them. */
.btn-white { background: var(--color-white); color: var(--color-orange-dark); border-color: var(--color-orange-dark); }
.btn-white:hover { background: var(--color-orange-dark); color: var(--color-white); }
.btn-sm { padding: 0.6rem 1.25rem; font-size: var(--text-sm); }
.btn-lg { padding: 1.1rem 2.25rem; font-size: var(--text-lg); }
.text-link {
display: inline-block;
margin-top: var(--space-5);
font-family: var(--font-display);
font-weight: 500;
color: var(--color-ink);
border-bottom: 2px solid var(--color-orange);
padding-bottom: 2px;
transition: color var(--duration) var(--ease);
}
.text-link:hover { color: var(--color-orange); }
/* ---------------------------------------------------------------------
5. HEADER / NAV
--------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--color-white);
border-bottom: 1px solid var(--color-gray-200);
/* Note: intentionally no backdrop-filter/transform here — either would
make this element the containing block for the fixed mobile nav
panel below, breaking its full-viewport coverage. */
transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
/* Transparent-over-hero header (homepage only — see is_front_page()
conditional class in header.php). Plain position:fixed does not
create a containing block for descendant fixed elements (only
transform/filter/etc. do), so the mobile nav panel's full-viewport
fixed positioning is unaffected by this. */
.site-header--transparent {
position: fixed;
left: 0;
right: 0;
background: transparent;
border-bottom-color: transparent;
}
.site-header--transparent.is-scrolled {
background: var(--color-white);
border-bottom-color: var(--color-gray-200);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--space-3);
}
.header-logo img { width: 140px; height: auto; }
/* HOME PAGE FIX #2 (disclosed): no ".elementor-kit-5" selector, or any
Elementor code at all, exists anywhere in this theme's own files
(verified) — this is a hand-coded theme with no Elementor plugin
present in this codebase. So the rounded corners reported on these
two elements must come from an external stylesheet outside this
theme (most likely a live-site Elementor global "Kit" stylesheet
this codebase can't reach). This is a defensive, narrowly-scoped
override that guarantees square corners on exactly the MindOFF logo
and the Home Page hero image, wherever the rounding is coming from —
it does not touch border-radius anywhere else in the theme. */
.header-logo img,
.hero-bg-photo {
border-radius: 0 !important;
}
.primary-nav {
position: fixed;
inset: 0 0 0 30%;
z-index: 200;
background: var(--color-white);
padding: var(--space-9) var(--space-6) var(--space-6);
transform: translateX(100%);
transition: transform var(--duration) var(--ease);
overflow-y: auto;
}
.primary-nav.is-open { transform: translateX(0); }
.primary-nav ul {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.primary-nav a {
display: block;
/* Nav typography is Inter specifically (not the sitewide --font-display
token) — direct instruction, scoped to the header/nav only. */
font-family: 'Inter', system-ui, sans-serif;
font-weight: 500;
font-size: var(--text-xl);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-gray-200);
}
/* HOME PAGE FIX #3 (disclosed): a clean, subtle active-page underline
that works at every viewport width, not only the ≥1024px desktop
rule further down (which already existed but was previously unused,
since the fallback menu never output these classes). At mobile
widths every nav item already has the 1px gray separator above, so
here only its color is switched to the MindOFF orange accent for the
active item — no pill, box, or background is introduced. */
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a {
border-bottom-color: var(--color-orange);
}
.header-actions { display: flex; align-items: center; gap: var(--space-3); position: relative; z-index: 250; }
/* Buy Now already inherits Inter from the base .btn rule (all buttons
sitewide are Inter now) — no header-specific override needed. */
.nav-toggle {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
background: transparent;
border: none;
padding: 0;
}
.nav-toggle-bar {
display: block;
width: 22px;
height: 2px;
background: var(--color-ink);
transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------------------------------------------------------------------
6. HERO
--------------------------------------------------------------------- */
.hero { padding-block: var(--space-9); overflow: hidden; }
.hero-inner {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.hero h1 { font-size: var(--text-3xl); }
.hero-lede {
font-size: var(--text-lg);
color: var(--color-gray-800);
max-width: 46ch;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-6);
}
/* Full-bleed photo hero (this task) — overrides/extends the base
.hero rule above only where this specific modifier class is used. */
.hero--photo {
position: relative;
overflow: hidden;
padding: 0;
min-height: 560px;
}
.hero-bg-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% center; /* keeps the person/device in frame on narrow viewports */
}
.hero-photo-inner {
position: relative;
z-index: 1;
min-height: 560px;
display: flex;
align-items: center;
}
.hero-photo-content {
width: 100%;
max-width: 420px;
padding-block: var(--space-8);
}
.hero-accent-word { color: var(--color-orange); }
/* Locked Design System §02 — Inter throughout, headline Light (~300),
body Regular (~400), labels/buttons Medium (~500). Scoped strictly
to this hero (via .hero--photo ancestor / hero-only classes) so the
sitewide --font-display (now Inter site-wide too, per the locked
design system) and the
Product page's own .hero-lede usage are completely unaffected. */
.hero--photo h1 {
font-weight: 300; /* Only the weight needs overriding — font-family already inherits the global --font-display token (Outfit). */
letter-spacing: -0.01em;
margin-bottom: var(--space-5); /* 24px — locked "heading→subheading" spacing */
/* Very subtle soft white glow behind the dark headline for gentle
readability against the bright/variable photo background — not a
hard drop shadow, and not applied anywhere else. */
text-shadow: 0 2px 18px rgba(255, 255, 255, 0.55);
}
/* Forces the exact two-line split shown in the approved reference —
"The mind" / "finally gets a pause." — as a single unconditional
break at every viewport, with the second line kept on one line
(see .hero-line-2 below) rather than reflowing further. */
.hero-break { display: block; }
.hero-line-2 {
display: inline-block;
white-space: nowrap;
}
@media (max-width: 480px) {
/* Only shrink the headline where needed so "finally gets a pause."
still fits on its single line at very narrow widths — no extra
line break introduced. */
.hero--photo h1 { font-size: 1.7rem; }
}
.hero--photo .hero-lede {
margin-bottom: var(--space-5); /* tightened to match the reference's compact rhythm; font-family/weight already match the global body defaults. */
text-shadow: 0 2px 14px rgba(255, 255, 255, 0.5);
}
/* .hero-cta: no rule needed — base .btn is already Inter Medium (500)
site-wide, so this hero button already matches without an override. */
/* Scoped to this hero only — global .btn-accent (used on other pages/
sections) keeps its existing style; this matches the locked design
system's button spec (§04: filled orange resting state, white text;
hover = inverted light surface, orange text/icon, restrained border). */
.hero-actions .btn-accent {
color: var(--color-white);
}
.hero-actions .btn-accent:hover {
background: var(--color-white);
color: var(--color-orange);
border-color: var(--color-orange);
}
/* Mobile-only protective backdrop: at narrow viewports the object-fit
cover crop can place text over highly variable image content
(verified — the darkest sampled pixel behind the text was near-
black hair), unlike the wide desktop crop which stays over plain
light wall. rgba value is the exact existing --color-cream
(#FFFADD) with opacity added — not a new color. */
/* Locked Design System §13 — mobile: stack content and image
vertically, message understood first, device still clearly
visible. DOM order is picture→content, so column-reverse puts the
text first visually without changing the markup. The image reverts
from an absolute full-bleed overlay to a normal, non-distorted
block image (object-fit:cover within a fixed aspect-ratio only,
never stretched). The mobile-only cream backdrop card is no longer
needed once text isn't sitting on top of the photo. */
@media (max-width: 767px) {
.hero--photo {
display: flex;
flex-direction: column-reverse;
min-height: auto;
}
.hero-bg-photo {
position: static;
width: 100%;
height: auto;
aspect-ratio: 8 / 5;
object-position: 65% 22%;
}
.hero-photo-inner {
position: static;
min-height: auto;
padding-block: var(--space-7) var(--space-6);
}
.hero-photo-content {
max-width: none;
}
/* This specific long CTA label doesn't fit the narrow mobile column
at the sitewide button padding — scoped reduction here only,
global .btn padding used everywhere else is untouched. */
.hero-actions .btn {
padding-inline: 1.25rem;
}
/* At mobile's ~110px-per-item column width, "Built around the science
of breath, attention and awareness" under the new "Breathing
Science" label has no room to stay within the required 3-line cap
as a third-width column. Stacking the three proof items into full-
width rows (still the same icon/label/text component, spacing and
colors — only the row direction changes) gives each item the width
it needs. The vertical divider becomes a top border between rows. */
.hero-signals {
flex-direction: column;
gap: var(--space-3);
}
.hero-signal + .hero-signal {
border-left: none;
padding-left: 0;
border-top: 1px solid rgba(11, 9, 6, 0.14);
padding-top: var(--space-3);
}
.hero-signal-label {
white-space: normal;
}
}
.hero-visual { display: flex; align-items: center; justify-content: center; }
.hero-photo {
width: 100%;
height: auto;
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
animation: hero-photo-in 700ms var(--ease) both, hero-photo-breathe 7s ease-in-out 700ms infinite;
}
@keyframes hero-photo-in {
from { opacity: 0; transform: translateY(10px) scale(0.99); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hero-photo-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.012); }
}
@media (prefers-reduced-motion: reduce) {
.hero-photo { animation: none; }
}
.breathing-rings {
position: relative;
width: 260px;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
}
.ring {
position: absolute;
border-radius: 50%;
border: 2px solid var(--color-orange);
opacity: 0;
animation: breathe 4.5s var(--ease) infinite;
}
.ring-1 { width: 100%; height: 100%; animation-delay: 0s; }
.ring-2 { width: 100%; height: 100%; animation-delay: 1.5s; }
.ring-3 { width: 100%; height: 100%; animation-delay: 3s; }
@keyframes breathe {
0% { transform: scale(0.55); opacity: 0; }
15% { opacity: 0.55; }
60% { opacity: 0.15; }
100% { transform: scale(1); opacity: 0; }
}
.breathing-core {
position: relative;
width: 108px;
height: 108px;
border-radius: 50%;
background: var(--color-cream);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-soft);
}
@media (prefers-reduced-motion: reduce) {
.ring { animation: none; opacity: 0.25; transform: scale(0.85); }
}
/* ---------------------------------------------------------------------
6b. PRODUCT FLOAT (prepared utility — not yet applied anywhere)
For the real product photo once supplied: wrap the ![]()
in
.product-float-wrap to get a calm, controlled float + a hint of
rotation, with its shadow moving in counterpoint. Deliberately
small values — this is meant to feel "alive," not animated.
Usage: ![]()
![]()
behind the text, plus a dark scrim so
the existing white/orange/gray-200 text keeps the same contrast it
had against the previous solid --color-ink background. Scoped to
the --photo modifier only, so no other page's hero is affected. */
.mindcheck-page-hero--photo {
position: relative;
overflow: hidden;
min-height: 480px; /* gives the photo enough room that the hero copy doesn't have to sit directly across the face */
}
@media (max-width: 767px) {
.mindcheck-page-hero--photo { min-height: 420px; }
}
@media (min-width: 1024px) {
/* Wider viewports crop the image's height more aggressively at a
fixed min-height (cover-fit on a wide/short box), so this section
gets a little more room at desktop widths to keep the same
face+shoulders composition visible instead of cropping in tight
on just the face. */
.mindcheck-page-hero--photo { min-height: 560px; }
}
.mindcheck-page-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 28%; /* keeps the face/shoulders centered in frame at every crop */
}
/* Scrim — existing --color-ink token at partial opacity, not a new
color, tuned only so contrast matches this section's previous solid
background. */
.mindcheck-page-hero--photo::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(11, 9, 6, 0.78) 0%, rgba(11, 9, 6, 0.6) 45%, rgba(11, 9, 6, 0.8) 100%);
}
.mindcheck-page-hero-inner {
position: relative;
z-index: 1;
}
.mindcheck-app-wrap {
max-width: 640px;
margin-inline: auto;
padding: var(--space-8) var(--space-5);
min-height: 60vh;
}
.mindcheck-screen { animation: mc-screen-in 300ms var(--ease); }
@keyframes mc-screen-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.mindcheck-screen { animation: none; }
}
.mindcheck-intro { text-align: center; }
.mindcheck-intro .btn { margin-top: var(--space-6); }
/* Primary hero button + questionnaire Next button: reuse the existing
.btn-accent component (already the homepage's orange primary-CTA
color/typography/radius/hover-motion) rather than introducing a new
button style. The homepage hero itself scopes .btn-accent to white
text with an inverted hover (see .hero-actions .btn-accent above) —
duplicating that same scoped treatment here, to the same class, so
these two buttons match the homepage primary CTA exactly. */
.mindcheck-intro .btn-accent,
.mc-nav .btn-accent {
color: var(--color-white);
}
.mindcheck-intro .btn-accent:hover,
.mc-nav .btn-accent:hover {
background: var(--color-white);
color: var(--color-orange);
border-color: var(--color-orange);
}
.mindcheck-calculating { text-align: center; padding-block: var(--space-9); }
.mc-progress {
height: 6px;
border-radius: var(--radius-pill);
background: var(--color-gray-200);
overflow: hidden;
margin-bottom: var(--space-2);
}
.mc-progress-bar {
height: 100%;
background: var(--color-orange);
border-radius: var(--radius-pill);
transition: width 250ms var(--ease);
}
.mc-progress-label {
font-size: var(--text-sm);
color: var(--color-gray-600);
margin-bottom: var(--space-5);
}
.mc-question-text { margin-bottom: var(--space-5); }
.mc-options { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.mc-option {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border: 1.5px solid var(--color-gray-200);
border-radius: var(--radius-md);
cursor: pointer;
font-family: var(--font-display);
font-weight: 500;
transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.mc-option:hover { border-color: var(--color-orange); }
.mc-option input { width: 20px; height: 20px; accent-color: var(--color-orange); flex-shrink: 0; }
.mc-option:has(input:checked) { border-color: var(--color-orange); background: var(--color-cream-soft); }
.mc-text-input {
width: 100%;
padding: var(--space-4);
border: 1.5px solid var(--color-gray-200);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--text-base);
margin-bottom: var(--space-6);
}
.mc-text-input:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 2px; }
.mc-nav { display: flex; justify-content: space-between; gap: var(--space-3); }
.mc-nav .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.mindcheck-result { text-align: center; }
/* Wellness-language result screen — deliberately no score/percentage
classes here. mc-result-title is the personalized headline (e.g.
"Your mind looks relatively calm right now."), mc-result-message the
supporting explanation. */
.mc-result-title {
font-size: var(--text-2xl);
margin-bottom: var(--space-3);
}
.mc-result-message {
font-size: var(--text-lg);
color: var(--color-gray-800);
max-width: 56ch;
margin-inline: auto;
}
.mc-meaning-block,
.mc-recommendation-block {
text-align: left;
background: var(--color-cream-soft);
border-radius: var(--radius-md);
padding: var(--space-5);
margin: var(--space-6) 0;
}
.mc-meaning-heading,
.mc-recommendation-heading {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-orange-dark);
margin-bottom: var(--space-2);
}
.mc-meaning-text,
.mc-recommendation-text {
font-size: var(--text-base);
color: var(--color-gray-800);
margin: 0;
}
.mindcheck-result .science-disclaimer { text-align: left; margin-bottom: var(--space-6); }
.mc-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-5); }
/* These are programmatic-only focus targets (question/result headings
get .focus() called on them in app.js after every Next/Back/Start
click purely so keyboard/screen-reader users land here instead of
focus silently resetting to — none of them are in the normal
Tab order, since they're all tabindex="-1"). A visible focus ring
was previously drawn here to signal that programmatic move, but per
direct instruction this must not show any visible outline/ring/
border/box-shadow. Removing it only affects this specific
programmatic-focus case — real interactive controls (buttons,
links, inputs) keep their own :focus-visible rules elsewhere in
this file untouched, so keyboard accessibility elsewhere is
unaffected; the .focus() calls themselves are also untouched, so
screen readers still get moved/announced here exactly as before. */
.mindcheck-app-wrap [tabindex="-1"]:focus {
outline: none;
box-shadow: none;
border: none;
}
/* ---------------------------------------------------------------------
18. HOMEPAGE UX RESTRUCTURE — NEW COMPONENTS
Every rule below reuses existing design tokens only (--color-*,
--font-*, --space-*, --radius-*, --duration/--ease). No new colors,
fonts, or spacing values were introduced for this task.
--------------------------------------------------------------------- */
/* Top availability bar */
.announcement-bar {
background: var(--color-orange);
color: var(--color-ink);
}
.announcement-bar-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding-block: var(--space-2);
text-align: center;
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 500;
}
/* FOLLOW-UP FIX (disclosed): announcement text set to white for
contrast against the orange bar — scoped to the plain text only,
so the WhatsApp link beside it keeps its exact current color/
underline/behavior, untouched. */
.announcement-bar-inner p { margin: 0; color: var(--color-white); }
.announcement-bar-inner a {
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
/* Hero: product tag line + credibility signals */
.hero-product-tag {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-lg);
color: var(--color-gray-800);
margin-top: calc(-1 * var(--space-2));
margin-bottom: var(--space-4);
}
.hero-signals {
display: flex;
flex-wrap: nowrap;
gap: var(--space-4);
margin: var(--space-4) 0 var(--space-5);
}
.hero-signal {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: var(--space-2);
flex: 1;
min-width: 0;
}
/* Not equal-width columns — Breathing Science carries the longest
supporting copy, so it gets a larger share of the row's width instead
of being squeezed into an equal third. */
.hero-signal--wide { flex: 1.6; }
/* Locked Design System §08 — "subtle vertical separators matching the
approved reference" between proof-row items. */
.hero-signal + .hero-signal {
border-left: 1px solid rgba(11, 9, 6, 0.14);
padding-left: var(--space-4);
}
.hero-signal-icon { flex-shrink: 0; color: var(--color-ink); margin-top: 1px; }
/* Breathing Science icon — approved exception: the supplied PNG used
exactly as provided (unmodified file, not cropped/redrawn), sized up
via width/height only so its visible glyph sits at roughly the same
optical size as the two Lucide outline icons either side. */
.hero-signal-icon--img { width: 43px; height: 43px; }
/* HOME PAGE FIX #5 (disclosed): a very subtle, restrained frame around
the Breathing Science PNG icon only — gives this raster image a
defined container so its visual weight reads consistently alongside
the two Lucide outline SVG icons either side, without touching the
icon file itself. Border opacity matches the existing subtle
vertical-divider treatment already used between proof-row items
(rgba(11, 9, 6, 0.14)) rather than introducing a new value. */
.hero-signal-icon-frame {
/* BORDER REMOVED (disclosed): per direct instruction, the bordered
frame around the "Breathing Science" nose icon is gone. Padding/
alignment/sizing are kept exactly as before so the icon still
lines up with the other two hero-signal icons beside it — only
the visible border/box background is removed. */
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 3px;
margin-top: 1px;
}
.hero-signal-icon-frame .hero-signal-icon--img { margin-top: 0; }
.hero-signal-text {
display: block;
font-family: var(--font-body);
font-weight: 400;
font-size: var(--text-sm);
color: var(--color-gray-600);
line-height: 1.25;
}
.hero-signal-label {
display: block;
/* Proof row labels are "supporting/proof text" per the current
typography rule — Source Sans 3, not the Outfit display token. */
font-family: var(--font-body);
font-weight: 500;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
white-space: nowrap; /* keeps "Breathing Science" on one line, matching the other two labels */
color: var(--color-ink);
}
/* Mind Recognition */
.recognition-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
margin: var(--space-6) 0;
}
.recognition-list li {
padding: var(--space-3) var(--space-4);
border-left: 3px solid var(--color-orange);
background: var(--color-white);
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-base);
}
.recognition-transition {
font-size: var(--text-lg);
color: var(--color-ink);
}
/* Meet MindOFF: differentiator + simple flow */
.meet-mindoff-differentiator {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-xl);
margin-top: var(--space-6);
}
.simple-flow {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
list-style: none;
margin: var(--space-4) 0 0;
padding: 0;
counter-reset: flow;
}
.simple-flow li {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-sm);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-pill);
background: var(--color-cream);
}
/* How It Works: mechanism flow */
.mechanism-flow {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
list-style: none;
margin: var(--space-5) 0;
padding: 0;
}
.mechanism-flow li {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-sm);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-sm);
}
/* The MindOFF Experience: numbered sequence */
.experience-sequence {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
list-style: none;
margin: 0;
padding: 0;
}
.experience-sequence li {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4);
background: var(--color-white);
border-radius: var(--radius-md);
border: 1px solid var(--color-gray-200);
}
.experience-step-num {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-xl);
color: var(--color-orange);
flex-shrink: 0;
}
.experience-step-text {
font-family: var(--font-display);
font-weight: 500;
}
/* Use cases grid */
.use-case-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
.use-case-card {
padding: var(--space-5);
border-radius: var(--radius-md);
background: var(--color-cream-soft);
}
.use-case-card h3 { margin-bottom: var(--space-2); }
.use-case-card p { margin: 0; color: var(--color-gray-600); }
/* Use-case interactive selector (tabs + swapping panel) */
.use-case-tabs {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-5);
}
.use-case-tab {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-sm);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-pill);
border: 1.5px solid var(--color-gray-200);
background: var(--color-white);
color: var(--color-gray-800);
transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.use-case-tab:hover { border-color: var(--color-orange); }
.use-case-tab.is-active {
background: var(--color-orange);
border-color: var(--color-orange);
color: var(--color-ink);
}
.use-case-panels { position: relative; }
.use-case-panel {
padding: var(--space-6);
border-radius: var(--radius-md);
background: var(--color-cream-soft);
animation: use-case-panel-in 250ms var(--ease);
}
.use-case-panel h3 { margin-bottom: var(--space-2); }
.use-case-panel p { margin: 0; color: var(--color-gray-600); font-size: var(--text-lg); }
@keyframes use-case-panel-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.use-case-panel { animation: none; }
}
/* When JS builds the interactive selector, the plain ![]()
![]()
![]()
![]()
![]()