/* Veronika - warm editorial static site. Optional palette/density classes on for manual theming. */ *, *::before, *::after { box-sizing: border-box; } :root { --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Inter Tight", system-ui, sans-serif; --font-accent: "Caveat", cursive; --reveal-duration: 1s; --reveal-ease: cubic-bezier(0.45, 0, 0.2, 1); --reveal-shift: 1.35rem; --space-xs: 0.35rem; --space-sm: 0.75rem; --space-md: 1.25rem; --space-lg: 2rem; --space-xl: 3.5rem; --space-2xl: 5.5rem; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --max-content: 38rem; --max-wide: 72rem; --header-h: 5.5rem; --transition: 0.55s cubic-bezier(0.22, 1, 0.36, 1); --shadow-soft: 0 18px 60px rgba(44, 36, 32, 0.08); --shadow-card: 0 10px 34px rgba(44, 36, 32, 0.07); --shadow-lift: 0 18px 46px rgba(44, 36, 32, 0.11); } /* Palette: Clay & terracotta (default) */ body.palette--clay, body:not([class*="palette--"]) { --bg-page: #f6f0e8; --bg-paper: #fdfaf5; --ink: #2c2420; --ink-muted: #5c514a; --accent: #b85c38; --accent-soft: #d4a08f; --blush: #e8cfc4; --border: rgba(44, 36, 32, 0.12); --border-strong: rgba(44, 36, 32, 0.2); } body.palette--rose { --bg-page: #f7ecee; --bg-paper: #fff8f9; --ink: #2a2226; --ink-muted: #5a4a50; --accent: #a8485c; --accent-soft: #d4a0ab; --blush: #edcdd4; --border: rgba(42, 34, 38, 0.1); --border-strong: rgba(42, 34, 38, 0.18); } body.palette--sage { --bg-page: #eef2ea; --bg-paper: #f9fbf6; --ink: #252b24; --ink-muted: #4a5348; --accent: #5a6f4a; --accent-soft: #a8b89a; --blush: #d6e0d0; --border: rgba(37, 43, 36, 0.1); --border-strong: rgba(37, 43, 36, 0.16); } body.palette--blush { --bg-page: #f5ebe4; --bg-paper: #fffaf7; --ink: #2d2420; --ink-muted: #5a4d45; --accent: #9a5b3c; --accent-soft: #c9a090; --blush: #e4cfc2; --border: rgba(45, 36, 32, 0.1); --border-strong: rgba(45, 36, 32, 0.18); } body.palette--plum { --bg-page: #f0eaef; --bg-paper: #faf7fa; --ink: #2a222c; --ink-muted: #534a55; --accent: #6b4a6f; --accent-soft: #b59db8; --blush: #dfd4e3; --border: rgba(42, 34, 44, 0.1); --border-strong: rgba(42, 34, 44, 0.16); } html { scroll-behavior: smooth; } @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; min-height: 100vh; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.65; color: var(--ink); background: radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--blush) 42%, transparent) 0 13rem, transparent 26rem), radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent-soft) 18%, transparent) 0 12rem, transparent 28rem), linear-gradient(180deg, color-mix(in srgb, var(--bg-page) 94%, #fff), var(--bg-page)); position: relative; } body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.2)), repeating-linear-gradient(90deg, rgba(44, 36, 32, 0.026) 0 1px, transparent 1px 7.5rem); opacity: 0.68; } body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(45, 36, 32, 0.055) 0 0.45px, transparent 0.55px); background-size: 4px 4px; opacity: 0.16; mix-blend-mode: multiply; } main, .site-footer { position: relative; z-index: 1; } /* How (approach): same content band as pillars; intro copy capped for line length */ body.page-approach { display: flex; flex-direction: column; min-height: 100vh; } body.page-approach #main { flex: 1 0 auto; } .page-approach .page-content > .section:first-of-type { width: min(100%, var(--max-wide)); } .page-approach .page-content > .section:first-of-type .display-heading, .page-approach .page-content > .section:first-of-type .lede { max-width: min(40rem, 100%); margin-inline: auto; } .page-approach .page-content > .section:first-of-type .display-heading { text-wrap: balance; } body.density--airy { --space-lg: 2.75rem; --space-xl: 4.5rem; --space-2xl: 7rem; --max-content: 34rem; } body.density--editorial { --space-lg: 1.75rem; --space-xl: 3rem; --space-2xl: 4.25rem; --max-content: 42rem; } img { max-width: 100%; height: auto; } a { color: var(--accent); text-underline-offset: 0.18em; } a:hover { color: var(--ink); } .skip-link { position: absolute; left: var(--space-md); top: -100%; z-index: 200; padding: var(--space-sm) var(--space-md); background: var(--bg-paper); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-weight: 500; } .skip-link:focus { top: var(--space-sm); } .site-header { position: sticky; top: 0; z-index: 100; display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(0, 1.45fr) minmax(8.75rem, 1fr); align-items: center; column-gap: var(--space-md); background: color-mix(in srgb, var(--bg-page) 98%, #fff); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: var(--space-sm) var(--space-md); } .site-header__top { display: contents; } .brand { grid-column: 1; grid-row: 1; justify-self: start; display: inline-grid; gap: 0.12rem; font-family: var(--font-display); color: var(--ink); text-decoration: none; text-align: start; text-wrap: balance; max-width: 100%; line-height: 1; } .brand__name { font-size: clamp(1.35rem, 3.4vw, 1.95rem); font-weight: 500; letter-spacing: 0.015em; } .brand__tagline { color: var(--ink-muted); font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.1; text-transform: uppercase; } .brand:hover { color: var(--accent); } .language-switcher { grid-column: 3; grid-row: 1; justify-self: end; position: relative; display: block; } .language-switcher__current { display: inline-flex; align-items: center; justify-content: center; min-width: 2.45rem; min-height: 1.55rem; padding: 0.24rem 0.58rem; border: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent); border-radius: 999px; color: var(--bg-paper); background: var(--accent); box-shadow: 0 8px 24px rgba(154, 91, 60, 0.16); font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1; list-style: none; cursor: pointer; } .language-switcher__current::-webkit-details-marker { display: none; } .language-switcher__current::after { content: ""; width: 0.36rem; height: 0.36rem; margin-left: 0.3rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-0.08rem) rotate(45deg); } .language-switcher[open] .language-switcher__current::after { transform: translateY(0.08rem) rotate(225deg); } .language-switcher__menu { position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 20; display: grid; gap: 0.1rem; padding: 0.18rem; border: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent); border-radius: 0.75rem; background: color-mix(in srgb, var(--bg-paper) 94%, transparent); box-shadow: 0 12px 30px rgba(44, 36, 32, 0.12); } .language-switcher:not([open]) .language-switcher__menu { display: none; } .language-switcher__button { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-width: 2.05rem; padding: 0.24rem 0.48rem; border: 0; border-radius: 999px; color: var(--ink-muted); background: transparent; font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1; cursor: pointer; text-decoration: none; transition: background var(--transition), color var(--transition), box-shadow var(--transition); } .language-switcher__button:hover, .language-switcher__button:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--blush) 44%, transparent); outline: none; } .language-switcher__button.is-active { color: var(--bg-paper); background: var(--accent); box-shadow: 0 4px 12px rgba(184, 92, 56, 0.22); } .site-nav { grid-column: 2; grid-row: 1; justify-self: end; max-width: 100%; margin: 0; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--accent-soft) transparent; } .site-nav::-webkit-scrollbar { height: 4px; } .site-nav::-webkit-scrollbar-thumb { background: var(--accent-soft); border-radius: 99px; } .site-nav__list { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: clamp(0.65rem, 2.5vw, 1.15rem); width: 100%; list-style: none; margin: 0; padding: 0; } .site-nav__list li { flex: 0 0 auto; text-align: center; } .site-nav__list a { display: inline-block; padding-bottom: 0.18rem; font-size: 0.92rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--ink-muted); white-space: nowrap; transition: color var(--transition); } .site-nav__list a:hover { color: var(--ink); } .site-nav__list a[aria-current="page"] { color: var(--ink); font-weight: 700; background-image: linear-gradient(currentColor, currentColor); background-position: 50% 100%; background-repeat: no-repeat; background-size: 1.45rem 1px; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1.25rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn--primary { background: var(--accent); color: var(--bg-paper); border-color: color-mix(in srgb, var(--accent) 70%, #000); } .btn--primary:hover { background: var(--ink); color: var(--bg-paper); border-color: var(--ink); } .btn--secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); } .btn--secondary:hover { border-color: var(--accent); color: var(--accent); } main { padding-top: var(--space-md); padding-bottom: var(--space-2xl); } .page-content { max-width: var(--max-wide); margin: 0 auto; padding: 0 var(--space-md); } /* Center each section’s layout box; body copy stays left-aligned (see prose rules below). */ .section { padding: var(--space-xl) 0; width: min(100%, var(--max-content)); margin-inline: auto; } .section.section--welcome, .section.offerings-grid, .section.pillars { width: min(100%, var(--max-wide)); } .page-content p, .page-content .lede, .page-content .credentials li, .pillar-card p, .offering-card p, .offering-card__bullets li, .contact-form, .contact-thanks p { text-align: start; } .section + .section { border-top: 1px solid var(--border); } /* Home: title + lede, then flower GIF (natural ratio, not full-bleed) */ .hero--cinematic { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: start; padding: var(--space-xl) 0 var(--space-2xl); min-height: min(88dvh, 52rem); } .hero__inner { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 48rem; margin-inline: auto; padding: 0 var(--space-md); } .hero__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.8rem, 8vw, 4.75rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 var(--space-lg); color: var(--ink); text-align: start; } .hero__line { display: block; } .hero__line--accent { font-style: normal; } .hero__lede { font-size: 1.1rem; margin: 0; color: var(--ink-muted); text-align: start; } .hero__flower-link { display: block; color: inherit; text-decoration: none; } .hero__flower-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 0.45rem; border-radius: var(--radius-md); } .hero__flower { margin: var(--space-xl) auto 0; padding: 0; width: 100%; max-width: min(22rem, 78vw); } .hero__flower-slot { display: block; line-height: 0; overflow: hidden; } .hero__flower-media, canvas.hero__flower-canvas { display: block; width: 100%; margin-top: -10%; height: auto; max-height: min(52vh, 28rem); object-fit: contain; opacity: 0; transform: translateX(-0.5rem); transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease); } .hero__flower--loaded .hero__flower-media { opacity: 1; transform: translateX(0); } .hero__flower-media--static, .hero__flower-media--still, .hero__flower--frozen .hero__flower-media { opacity: 1; transform: none; transition: none; } .hero__flower--missing .hero__flower-slot:empty::after { content: ""; display: block; min-height: 12rem; background: color-mix(in srgb, var(--blush) 35%, var(--bg-paper)); } .eyebrow { font-family: var(--font-accent); font-size: 1.35rem; color: var(--accent); margin: 0 0 var(--space-sm); } .eyebrow--vol { letter-spacing: 0.2em; text-transform: uppercase; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; } .display-heading { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.12; margin: 0 0 var(--space-md); text-align: start; } .lede { font-size: 1.12rem; color: var(--ink-muted); margin: 0 0 var(--space-md); } .page-content p { margin: 0 0 var(--space-md); } .credentials { list-style: none; padding: 0; margin: var(--space-lg) 0 0; border-top: 1px solid var(--border); padding-top: var(--space-md); } .credentials li { position: relative; padding-left: 1.25rem; margin-bottom: var(--space-sm); color: var(--ink-muted); } .credentials li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-soft); } .welcome-grid { display: grid; gap: var(--space-xl); align-items: start; width: 100%; margin-inline: auto; } @media (min-width: 768px) { .welcome-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } } @media (max-width: 767px) { .welcome-grid .portrait { justify-self: center; } } /* Me: one column - portrait and copy stack, each centered (copy text stays left-aligned) */ .page-about .welcome-grid { grid-template-columns: 1fr; justify-items: center; gap: var(--space-lg); } .page-about .welcome-grid .portrait { justify-self: center; max-width: min(19rem, 88vw); } .page-about .welcome-copy { width: 100%; max-width: var(--max-content); margin-inline: auto; } @media (min-width: 768px) { .page-about .welcome-grid { grid-template-columns: 1fr; } } .page-about .section.section--welcome { padding-block: var(--space-lg); } figure { margin: 0; } .portrait { width: 100%; max-width: min(22rem, 100%); } .portrait__frame { position: relative; aspect-ratio: 4 / 5; width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); overflow: hidden; background: var(--bg-paper); } .portrait__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; } /* Philosophy (You): float-right image so copy runs down its left, then full width underneath */ .page-philosophy { --philosophy-hero-img-opacity: 1; } .section.philosophy-hero { width: min(100%, var(--max-wide)); margin-inline: auto; } .philosophy-hero__figure { position: relative; float: right; width: min(38%, 24rem); max-width: 100%; margin: 0.2em 0 var(--space-md) var(--space-lg); background: none; } .philosophy-hero__figure::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("../assets/you-prob4.gif") center / contain no-repeat; opacity: 0.28; filter: contrast(1.18) saturate(0.85); transform: translate(2px, 2px); } .philosophy-hero__img { position: relative; z-index: 1; display: block; width: 100%; height: auto; opacity: var(--philosophy-hero-img-opacity, 1); filter: contrast(1.22) saturate(0.9) drop-shadow(1px 1px 0 rgba(44, 36, 32, 0.22)); } .philosophy-hero__copy { display: flow-root; text-align: left; min-width: 12rem; } .philosophy-hero__copy > :last-child { margin-bottom: 0; } @media (min-width: 900px) { .page-philosophy .section.philosophy-hero { width: min(100%, 66rem); } .page-philosophy .philosophy-hero__copy { min-width: 0; } .page-philosophy .philosophy-hero__figure { width: min(42%, 28rem); margin-left: var(--space-md); margin-bottom: var(--space-sm); margin-top: calc(-1 * var(--space-md)); } } @media (max-width: 767px) { .philosophy-hero__figure { float: none; width: min(18rem, 60%); margin: 0 auto var(--space-lg); } .philosophy-hero__copy { min-width: 0; } } .eco-words { margin-inline: auto; max-width: min(40rem, 100%); padding: var(--space-lg) var(--space-md); text-align: start; border: none; border-top: 3px solid var(--accent-soft); background: color-mix(in srgb, var(--bg-paper) 92%, var(--blush)); border-radius: var(--radius-md); font-family: var(--font-display); font-size: 1.35rem; line-height: 1.45; } .eco-words__sub { font-family: var(--font-accent); font-size: 1.5rem; margin: var(--space-md) 0 0; color: var(--accent); text-align: start; } .pillar-list { list-style: none; padding: 0; margin: 0 auto; width: 100%; max-width: 58rem; display: grid; gap: var(--space-md); } @media (min-width: 768px) { .pillar-list { grid-template-columns: repeat(3, 1fr); } } .pillar-card { background: var(--bg-paper); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-lg); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; } .pillar-card__icon { display: block; width: 2.35rem; height: 2.35rem; margin: 0 0 var(--space-sm); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--accent); opacity: 0.78; } .pillar-card__title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; margin: 0 0 var(--space-sm); text-align: start; } .pillar-card p:last-child { margin-bottom: 0; color: var(--ink-muted); font-size: 0.98rem; } /* Offerings */ .offerings-grid { display: flex; flex-direction: column; align-items: center; max-width: 100%; } .offering-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-md); } /* Stacked: single column (default when not ledger/framed) */ body.offerings--stacked .offering-cards, body:not(.offerings--ledger):not(.offerings--framed) .offering-cards { grid-template-columns: 1fr; max-width: var(--max-content); margin-inline: auto; width: 100%; } @media (min-width: 900px) { body.offerings--framed .offering-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 48rem; margin-inline: auto; } body.offerings--framed .offering-card--featured { grid-column: 1 / -1; max-width: 32rem; width: 100%; justify-self: center; } } body.offerings--framed .offering-cards { max-width: 48rem; margin-inline: auto; } body.offerings--ledger .offering-cards { grid-template-columns: 1fr; max-width: 48rem; margin-inline: auto; width: 100%; } body.offerings--ledger .offering-card { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; column-gap: var(--space-lg); align-items: baseline; } body.offerings--ledger .offering-card__kicker { grid-column: 1 / -1; } body.offerings--ledger .offering-card__name, body.offerings--ledger .offering-card__duration { grid-column: 1; } body.offerings--ledger .offering-card__price { grid-row: 2 / span 2; grid-column: 2; justify-self: end; font-size: 1.5rem; } body.offerings--ledger .offering-card__bullets { grid-column: 1 / -1; } body.offerings--ledger .offering-card__link { grid-column: 1 / -1; } body.offerings--framed .offering-card { border-width: 2px; border-color: var(--border-strong); box-shadow: 0 12px 40px rgba(44, 36, 32, 0.06); } .offering-card { position: relative; background: var(--bg-paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); } .offering-card--featured { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: linear-gradient(160deg, var(--bg-paper), color-mix(in srgb, var(--blush) 40%, var(--bg-paper))); } .offering-card__badge { position: absolute; top: var(--space-sm); right: var(--space-sm); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.55rem; border-radius: 999px; background: var(--accent); color: var(--bg-paper); } .offering-card__kicker { font-family: var(--font-body); font-size: 0.95rem; font-weight: 400; letter-spacing: 0.01em; color: var(--ink-muted); margin: 0 0 0.05rem; text-align: start; } .offering-card__name { font-family: var(--font-display); font-size: 1.65rem; font-weight: 500; margin: 0 0 0.15rem; text-align: start; } .offering-card__duration { font-size: 0.9rem; color: var(--ink-muted); margin: 0 0 var(--space-sm); text-align: start; } .offering-card__price { font-family: var(--font-display); font-size: 2rem; margin: 0 0 var(--space-sm); text-align: start; } .offering-card__bullets { margin: 0 0 var(--space-md); padding-left: 1.1rem; color: var(--ink-muted); font-size: 0.95rem; } .offering-card__link { font-weight: 600; letter-spacing: 0.04em; text-decoration: none; text-align: start; } .offering-card__link:hover { text-decoration: underline; } /* Offerings page: less vertical padding, denser cards */ .page-offerings .page-content > .section { padding-block: var(--space-lg); } .page-offerings .page-content > .section:first-of-type .display-heading { margin-bottom: var(--space-sm); font-size: clamp(1.75rem, 3.6vw, 2.45rem); } .page-offerings .page-content > .section:first-of-type .lede { margin-bottom: 0; } .page-offerings .offering-access-note { width: min(100%, 34rem); margin-top: var(--space-md); margin-inline: auto; text-align: center; } .page-offerings .offering-cards { gap: var(--space-sm); } .page-offerings .offering-card { padding: var(--space-md); border-radius: var(--radius-md); } .page-offerings .offering-card__kicker { font-size: 0.95rem; margin: 0 0 0.05rem; } .page-offerings .offering-card__name { font-size: 1.48rem; } .page-offerings .offering-card__duration { font-size: 0.82rem; margin: 0 0 0.35rem; } .page-offerings .offering-card__price { font-size: 1.45rem; margin: 0 0 0.4rem; } .page-offerings .offering-card__bullets { font-size: 0.88rem; line-height: 1.45; margin: 0 0 var(--space-sm); padding-left: 1rem; } .page-offerings .offering-card__bullets li + li { margin-top: 0.2em; } .page-offerings body.offerings--framed .offering-card { box-shadow: 0 6px 20px rgba(44, 36, 32, 0.05); } .page-offerings body.offerings--ledger .offering-card__price { font-size: 1.35rem; } /* Contact */ .field { margin-bottom: var(--space-md); } .field--hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .field label { display: block; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-xs); color: var(--ink-muted); } .field input, .field textarea { width: 100%; padding: 0.75rem 1rem; font-family: var(--font-body); font-size: 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-paper); color: var(--ink); } .field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--ink-muted) 65%, transparent); } .field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .field input:disabled, .field textarea:disabled { cursor: not-allowed; color: color-mix(in srgb, var(--ink-muted) 78%, transparent); background: color-mix(in srgb, var(--bg-paper) 72%, var(--border)); } .contact-form { width: min(100%, var(--max-content)); margin-inline: auto; } .contact-form .btn--submit { display: block; margin-inline: auto; } .contact-thanks { padding: var(--space-lg); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-paper); max-width: var(--max-content); margin-inline: auto; text-align: start; } .contact-error { width: min(100%, var(--max-content)); margin: var(--space-md) auto 0; padding: var(--space-sm) var(--space-md); border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: var(--radius-md); color: var(--ink); background: color-mix(in srgb, var(--blush) 28%, var(--bg-paper)); text-align: start; } .contact-thanks__title { font-family: var(--font-display); font-size: 2rem; margin: 0 0 var(--space-sm); text-align: start; } .page-content--portal { max-width: min(100%, 72rem); } .portal-hero { max-width: min(46rem, 100%); } .portal-eyebrow, .portal-card__kicker { margin: 0 0 var(--space-xs); color: var(--accent); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; } .portal-login-shell { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr); gap: var(--space-md); align-items: start; } .portal-login-card, .portal-note, .portal-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--bg-paper) 92%, transparent); box-shadow: var(--shadow-card); } .portal-login-card { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(16rem, 1fr); gap: var(--space-md); padding: var(--space-lg); } .portal-login-card h2, .portal-note h2, .portal-card h2 { margin: 0 0 var(--space-sm); font-family: var(--font-display); font-size: clamp(1.55rem, 3vw, 2.1rem); font-weight: 500; line-height: 1.1; } .portal-login-card p, .portal-note p, .portal-card p { margin-bottom: 0; } .portal-login-form, .portal-mini-form { display: grid; gap: var(--space-sm); } .portal-login-form .btn, .portal-mini-form .btn { justify-self: start; } .portal-reset-link { width: fit-content; color: var(--accent); font-size: 0.94rem; font-weight: 600; text-decoration: none; } .portal-reset-link:hover { text-decoration: underline; } .portal-template-link { display: inline-flex; width: fit-content; margin-top: var(--space-sm); color: var(--accent); font-weight: 600; text-decoration: none; } .portal-template-link:hover { text-decoration: underline; } .portal-note { padding: var(--space-md); color: var(--ink-muted); } .portal-status { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: var(--radius-md); color: var(--ink-muted); background: color-mix(in srgb, var(--blush) 22%, transparent); font-size: 0.94rem; } .portal-dashboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); width: min(100%, 68rem); margin: 0 auto var(--space-xl); } .portal-card { padding: var(--space-lg); } .portal-card--wide { grid-column: 1 / -1; } .portal-list { display: grid; gap: 0.55rem; margin: var(--space-sm) 0 0; padding-left: 1.1rem; } .portal-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); } .btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.58; transform: none; } .btn:disabled:hover, .btn[aria-disabled="true"]:hover { background: var(--accent); color: var(--bg-paper); } .site-footer { max-width: var(--max-wide); margin: 0 auto; padding: var(--space-xl) var(--space-md); border-top: 1px solid var(--border); text-align: center; font-size: 0.9rem; color: var(--ink-muted); } body.page-home .site-footer--home { border-top: 1px solid var(--border); background: var(--bg-page); } .site-footer p { margin: 0.25rem 0; } .site-footer a { color: inherit; text-decoration: underline; } /* Premium pass: visible journey cues and quieter, more intentional surfaces */ .hero__entry, .section-next, .journey-next, .section-note, .form-note { color: var(--ink-muted); font-size: 0.94rem; letter-spacing: 0.01em; } .hero__entry { margin: var(--space-md) 0 0; text-align: center; } .hero__client-login { margin: 0.65rem 0 0; text-align: center; } .hero__client-login a { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 999px; color: color-mix(in srgb, var(--ink-muted) 78%, transparent); text-decoration: none; transition: color var(--transition), background var(--transition), transform var(--transition); } .hero__client-login a:hover, .hero__client-login a:focus-visible { color: var(--accent); background: color-mix(in srgb, var(--blush) 36%, transparent); outline: none; transform: translateY(-1px); } .hero__door-icon { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; } .hero__entry a, .section-next a, .journey-next a { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; color: var(--accent); font-weight: 600; text-decoration: none; } .hero__entry a::after, .section-next a::after, .journey-next a::after { content: "→"; transform: translateX(0); transition: transform var(--transition); } .hero__entry a:hover::after, .section-next a:hover::after, .journey-next a:hover::after { transform: translateX(0.22rem); } .section-next { margin: var(--space-lg) 0 0; } .section-next--center, .section-note { text-align: center; } .section-note { max-width: min(34rem, 100%); margin: var(--space-sm) auto 0; font-style: italic; } .journey-next { width: min(100%, var(--max-content)); margin: calc(-1 * var(--space-md)) auto var(--space-xl); padding-top: var(--space-md); border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent); text-align: center; } .form-note { margin: calc(-1 * var(--space-xs)) 0 var(--space-md); } .page-philosophy .philosophy-hero__copy { max-width: 66rem; margin-inline: auto; } .page-philosophy .section.philosophy-hero { padding-bottom: clamp(3rem, 8vw, 5rem); } .page-philosophy .philosophy-hero__copy p, .page-about .welcome-copy p { color: var(--ink-muted); } .page-about .portrait__frame::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.46); border-radius: inherit; pointer-events: none; } .page-about .credentials { display: grid; gap: 0.55rem; } .page-about .credentials li { margin-bottom: 0; } .page-approach .pillar-card { position: relative; overflow: hidden; } .page-offerings .offering-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.52), transparent 42%), color-mix(in srgb, var(--bg-paper) 92%, var(--bg-page)); } .page-offerings .offering-card__price { color: var(--ink); } .page-offerings .offering-card__link { width: fit-content; padding-top: var(--space-xs); border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .page-contact .section--form { padding-top: var(--space-lg); } .contact-form { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .site-footer { width: min(100% - 2rem, var(--max-wide)); } /* Design pass: stronger editorial rhythm, balanced cards, and calmer responsive pages */ .site-header { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset; } .site-nav__list a { position: relative; display: inline-flex; padding: 0.28rem 0; transition: color var(--transition); } .site-nav__list a::after { content: none; } .site-nav__list a:hover::after, .site-nav__list a[aria-current="page"]::after { transform: none; } .site-nav__list a[aria-current="page"]::after { opacity: 0; } main { padding-top: clamp(1rem, 3vw, var(--space-lg)); } .page-content { width: 100%; padding-inline: clamp(1rem, 4vw, var(--space-lg)); } .section { padding-block: clamp(2.5rem, 7vw, var(--space-xl)); } .section + .section { border-top-color: color-mix(in srgb, var(--border) 72%, transparent); } .display-heading { font-size: clamp(2.15rem, 5vw, 3.35rem); letter-spacing: -0.018em; text-wrap: balance; } .lede { line-height: 1.58; text-wrap: pretty; } .page-content p { text-wrap: pretty; } .page-home .hero--cinematic { min-height: min(82svh, 52rem); padding-block: clamp(2rem, 7vw, var(--space-2xl)); } .page-home .hero__inner { align-items: center; max-width: 60rem; } .page-home .hero__title { font-size: clamp(3.25rem, 11vw, 7.4rem); line-height: 0.92; margin-bottom: clamp(1rem, 3vw, var(--space-lg)); text-align: center; } .page-home .hero__lede { max-width: 26rem; text-align: center; } .page-home .hero__flower { max-width: clamp(13.6rem, 28.9vw, 22.95rem); margin-top: clamp(1.75rem, 5vw, var(--space-xl)); } .portrait__frame, .pillar-card, .offering-card, .contact-form, .contact-thanks, .eco-words { box-shadow: var(--shadow-card); } .pillar-card, .offering-card, .contact-form, .contact-thanks, .eco-words { background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 45%), var(--bg-paper); } .pillar-card, .offering-card { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } @media (hover: hover) { .pillar-card:hover, .offering-card:hover { transform: translateY(-0.22rem); border-color: var(--border-strong); box-shadow: var(--shadow-lift); } } .pillar-list { align-items: stretch; } .pillar-card { display: flex; min-height: 100%; flex-direction: column; } .pillar-card__title { line-height: 1.18; } @media (min-width: 860px) { .page-about .welcome-grid { grid-template-columns: minmax(16rem, 0.78fr) minmax(0, 1.22fr); align-items: center; gap: clamp(2.5rem, 6vw, 5rem); } .page-about .welcome-grid .portrait { max-width: min(24rem, 100%); } .page-about .welcome-copy { max-width: 36rem; } } @media (min-width: 820px) { .page-philosophy .section.philosophy-hero { width: min(100%, 66rem); } .philosophy-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr); gap: var(--space-md) clamp(1.5rem, 4vw, 3rem); align-items: center; } .philosophy-hero__copy > :not(.philosophy-hero__figure) { grid-column: 1; } .page-philosophy .philosophy-hero__figure { float: none; grid-column: 2; grid-row: 1 / span 4; width: 100%; margin: 0; align-self: center; } } .page-approach .page-content > .section:first-of-type .display-heading, .page-offerings .page-content > .section:first-of-type .display-heading, .page-contact .page-content > .section:first-of-type .display-heading { max-width: min(44rem, 100%); margin-inline: auto; } .page-approach .page-content > .section:first-of-type .lede, .page-offerings .page-content > .section:first-of-type .lede, .page-contact .page-content > .section:first-of-type .lede { max-width: min(40rem, 100%); margin-inline: auto; } @media (min-width: 760px) { body.page-offerings.page-offerings .offering-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; gap: var(--space-md); margin-inline: auto; } } .page-offerings .offering-card { display: flex; flex-direction: column; min-height: 100%; } .page-offerings .offering-card__link { margin-top: auto; align-self: flex-start; } .page-offerings .offering-card--featured { border-color: color-mix(in srgb, var(--accent) 46%, var(--border)); } .section--form { width: min(100%, 42rem); } .contact-form { padding: clamp(1.25rem, 4vw, var(--space-lg)); border: 1px solid var(--border); border-radius: var(--radius-lg); } .field input, .field textarea { transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } .field input:focus-visible, .field textarea:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 28%, transparent); } .btn { box-shadow: 0 6px 18px rgba(44, 36, 32, 0.08); } @media (max-width: 767px) { body { font-size: 1rem; } body::before { background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.3), transparent 18rem), repeating-linear-gradient(90deg, rgba(44, 36, 32, 0.02) 0 1px, transparent 1px 5rem); opacity: 0.55; } body::after { background-size: 5px 5px; opacity: 0.11; } .site-header { display: block; position: sticky; padding: 0; } .site-header__top { display: grid; grid-template-columns: 1fr; position: relative; gap: 0.2rem; justify-items: center; padding: 0.85rem 3.6rem 0.35rem; } .language-switcher { position: absolute; top: 0.78rem; right: var(--space-md); display: block; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; margin-inline: 0; transform: none; } .language-switcher__current { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 1.35rem; padding: 0.18rem 0.42rem; border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent); border-radius: 999px; color: var(--bg-paper); background: var(--accent); box-shadow: 0 5px 14px rgba(154, 91, 60, 0.18); font-family: var(--font-body); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1; list-style: none; cursor: pointer; } .language-switcher__current::-webkit-details-marker { display: none; } .language-switcher__current::after { content: ""; width: 0.32rem; height: 0.32rem; margin-left: 0.22rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-0.08rem) rotate(45deg); } .language-switcher[open] .language-switcher__current::after { transform: translateY(0.08rem) rotate(225deg); } .language-switcher__menu { position: absolute; top: calc(100% + 0.32rem); right: 0; display: grid; gap: 0.12rem; padding: 0.18rem; border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent); border-radius: 0.55rem; background: color-mix(in srgb, var(--bg-paper) 94%, transparent); box-shadow: 0 10px 24px rgba(44, 36, 32, 0.12); } .language-switcher:not([open]) .language-switcher__menu { display: none; } .language-switcher__button { min-width: 2rem; min-height: 1.35rem; padding: 0.18rem 0.42rem; border-radius: 999px; font-size: 0.58rem; letter-spacing: 0.06em; } .language-switcher__button.is-active { color: var(--bg-paper); background: var(--accent); } .brand { grid-row: 1; justify-self: center; text-align: center; max-width: 100%; } .brand__name { font-size: clamp(1.28rem, 6vw, 1.6rem); } .brand__tagline { font-size: 0.58rem; letter-spacing: 0.12em; } .site-nav { display: block; width: 100%; max-width: none; margin: 0; padding: 0.45rem var(--space-sm) 0.7rem; overflow-x: visible; text-align: center; scrollbar-width: none; } .site-nav::-webkit-scrollbar { display: none; } .site-nav__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-content: center; gap: clamp(0.55rem, 4vw, 0.95rem); width: min(100%, 28rem); max-width: 100%; margin-inline: auto; padding-inline: 0; padding-bottom: 0; } .site-nav__list a { font-size: 0.76rem; letter-spacing: 0.045em; } main { padding-top: 0.75rem; padding-bottom: var(--space-xl); } .page-content { padding-inline: clamp(1rem, 5vw, 1.35rem); } .section { padding-block: clamp(1.85rem, 8vw, 2.35rem); width: 100%; } .display-heading { font-size: clamp(2.05rem, 9.5vw, 2.65rem); line-height: 1.06; margin-bottom: 1rem; } .lede { font-size: 1.04rem; line-height: 1.5; } .page-content p { margin-bottom: 1rem; } .portal-login-shell, .portal-login-card, .portal-dashboard, .portal-list--two { grid-template-columns: 1fr; } .portal-login-card, .portal-card { padding: var(--space-md); } .portal-login-form .btn, .portal-mini-form .btn { justify-self: stretch; } .page-home .hero--cinematic { min-height: auto; padding-block: 1.8rem 2.4rem; } .page-home .hero__inner { padding-inline: 1rem; } .page-home .hero__title { font-size: clamp(3.15rem, 17vw, 4.45rem); line-height: 0.94; margin-bottom: 1rem; } .page-home .hero__lede { font-size: 1rem; line-height: 1.55; } .page-home .hero__flower { max-width: min(15.3rem, 66.3vw); margin-top: 0.2rem; transform: translateY(-1rem); } .page-about .section.section--welcome { padding-top: 1.6rem; } .page-about .welcome-grid { gap: 1.5rem; } .page-about .welcome-grid .portrait { max-width: min(17rem, 76vw); } .philosophy-hero__figure { width: min(18rem, 60%); margin-bottom: 1.35rem; } .eco-words, .pillar-card, .offering-card, .contact-form, .contact-thanks { border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(44, 36, 32, 0.055); } .pillar-list, .offering-cards { width: min(100%, 21.5rem); gap: 0.85rem; margin-inline: auto; } .page-approach .section.pillars, .page-offerings .section.offerings-grid { display: flex; justify-content: center; } .pillar-card, .offering-card { width: 100%; padding: 1rem; } .pillar-card__title, .offering-card__name { font-size: 1.32rem; } .page-offerings .page-content > .section { padding-block: 1.8rem; } .page-offerings .offering-card__badge { position: static; align-self: flex-start; order: -1; margin-bottom: 0.45rem; } .section--form { width: 100%; } .contact-form { padding: 1.15rem; } .site-footer { padding-block: 2rem; padding-inline: 1rem; } [data-reveal], article.page-content > section[data-reveal]:nth-of-type(even), .page-content > section[data-reveal]:nth-of-type(even) { transform: translateY(0.65rem); } [data-reveal].is-visible { transform: translateY(0); } } /* Scroll reveal: soft lateral drift + fade, ~1s, in and out of view */ [data-reveal] { opacity: 0; transform: translateX(calc(-1 * var(--reveal-shift))); transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease); } article.page-content > section[data-reveal]:nth-of-type(even), .page-content > section[data-reveal]:nth-of-type(even) { transform: translateX(var(--reveal-shift)); } [data-reveal].is-visible { opacity: 1; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } body.reveal-ready [data-reveal].is-visible { will-change: auto; } @media (max-width: 767px) { [data-reveal], article.page-content > section[data-reveal]:nth-of-type(even), .page-content > section[data-reveal]:nth-of-type(even) { transform: translateY(0.5rem); } [data-reveal].is-visible { transform: translateY(0); } .page-approach .section.pillars, .page-offerings .section.offerings-grid { justify-content: center; margin-inline: auto; padding-inline: 0; } .page-approach .pillar-list, .page-offerings .offering-cards { width: min(100%, 20rem); max-width: 20rem; } } /* Final normalization layer: keep the premium pass predictable across breakpoints. */ @media (min-width: 768px) { .page-approach .section.pillars { padding-bottom: var(--space-xl); } .page-approach .pillar-card { border-top: 3px solid color-mix(in srgb, var(--accent-soft) 70%, transparent); } } @media (max-width: 767px) { .hero__entry { margin-top: 0.75rem; } .section-next { margin-top: 1.25rem; } .journey-next { margin-block: 0 var(--space-lg); padding-top: var(--space-sm); } .page-approach .section.pillars, .page-offerings .section.offerings-grid { width: 100%; } .page-approach .pillar-list, .page-offerings .offering-cards { width: min(100%, 20.5rem); max-width: 20.5rem; } .page-offerings .offering-card__link { padding-top: 0.5rem; } .form-note { font-size: 0.9rem; } }