/* ========================================================================== timacamara.com · Tima Camara Principle: editorial restraint, on the brand card palette. Warm cream ground, warm near-black type, one strong accent (deep teal #175C5C), a brand rose for small uppercase labels and a coral reserved for rules and borders, never for text. Flat surfaces, square corners, no gradients. Photographs carry the warmth. Libre Baskerville for headlines and DM Sans for everything else keep the family link with womenalignshine.com. Mobile first. ========================================================================== */ /* Fonts are loaded from the HTML head (DM Sans as a single variable file, Libre Baskerville static) so nothing blocks first paint. */ :root { --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232A2520' stroke-width='1.5'/%3E%3C/svg%3E"); --leaf: #175C5C; /* deep teal from the brand card: buttons, links, accents */ --leaf-deep: #0F4747; /* hover */ --leaf-light: #DCEAE3; /* pale mint wash */ --leaf-line: #B9D4CC; /* soft mint rule */ --blossom: #9C4A5A; /* brand-card rose, small uppercase labels only */ --blossom-light: #F3E2E6; --coral: #E08A72; /* brand-card coral, decoration only, never text */ --ink: #2A2520; /* warm near-black: headings, buttons */ --text: #3A3A3A; /* body */ --muted: #6E665A; /* captions, notes */ --line: #DFD3BF; /* warm hairlines */ --paper: #FAF3E7; /* brand-card cream */ --paper-2: #EFE6D6; /* brand-card sand */ --radius: 2px; --sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif; --footer-bg: #0F2E2E; --footer-text: rgba(255, 255, 255, .86); --footer-muted: rgba(255, 255, 255, .78); --card: #FDFAF3; --input-border: #CDBFA6; color-scheme: light; } /* Dark theme. Follows the system setting unless the visitor chooses with the header toggle (stored as data-theme on ). Dark grey surfaces, never pure black; the green and mauve are lifted so text keeps 4.5:1 or better. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --leaf: #8FC9BE; --leaf-deep: #A9D8CE; --leaf-light: #1E2B27; --leaf-line: #35514B; --blossom: #D9A2AC; --blossom-light: #2A2124; --coral: #E8A88F; --ink: #F5F1E8; --text: #E8E3D9; --muted: #A8A197; --line: #302C25; --paper: #191713; --paper-2: #221F19; --footer-bg: #0F2E2E; --card: #1F1C17; --input-border: #4A453C; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F5F1E8' stroke-width='1.5'/%3E%3C/svg%3E"); color-scheme: dark; } } :root[data-theme="dark"] { --leaf: #8FC9BE; --leaf-deep: #A9D8CE; --leaf-light: #1E2B27; --leaf-line: #35514B; --blossom: #D9A2AC; --blossom-light: #2A2124; --coral: #E8A88F; --ink: #F5F1E8; --text: #E8E3D9; --muted: #A8A197; --line: #302C25; --paper: #191713; --paper-2: #221F19; --footer-bg: #0F2E2E; --card: #1F1C17; --input-border: #4A453C; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F5F1E8' stroke-width='1.5'/%3E%3C/svg%3E"); color-scheme: dark; } /* In dark, filled buttons carry dark text on the lifted green. */ .button-primary, .form-submit, .button-rose { color: var(--on-accent) !important; } :root { --on-accent: #FFFFFF; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --on-accent: #161410; } } :root[data-theme="dark"] { --on-accent: #161410; } .proof-thumb, .portfolio-thumb { background: var(--paper-2); } /* Theme toggle in the header: a small circle, half filled. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); margin-left: auto; } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle:hover { color: var(--leaf); } /* ── Base ── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: clip; } body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.8; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } /* height:auto everywhere: an img with width and height attributes keeps the attribute height when max-width shrinks it, and stretches. More specific rules that set a real height, like the image bands, still win. */ a { color: var(--leaf); text-decoration: none; } a:hover { color: var(--ink); } h1, h2, h3 { font-family: var(--serif); color: var(--ink); font-weight: 400; line-height: 1.14; margin: 0 0 18px; } h1 { font-size: clamp(34px, 6.4vw, 64px); letter-spacing: -.015em; } h2 { font-size: clamp(28px, 4.2vw, 46px); letter-spacing: -.01em; } h3 { font-size: clamp(20px, 1.6vw, 25px); } p { margin: 0 0 18px; } p:last-child { margin-bottom: 0; } ul { margin: 0 0 16px; padding-left: 22px; } strong { font-weight: 600; color: var(--ink); } :focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; } .skip-link { position: absolute; left: -999px; top: 8px; background: var(--leaf); color: var(--paper); padding: 10px 16px; z-index: 2000; } .skip-link:focus { left: 14px; } /* No ambient gradient in this direction: flat white ground. */ .ambient-bg, .ambient-veil { display: none; } /* ── Layout ── */ .container { max-width: 1140px; margin: 0 auto; padding: 0 22px; position: relative; } .container.narrow { max-width: 760px; } .center { text-align: center; } .section { padding: 76px 0; position: relative; } .section-soft, .section-stone { background: var(--paper-2); } .section-invite { background: var(--leaf-light); } /* Fluid from tablet up: 84px at 768 rising to 112px on large screens, down from a flat 132px that left too much empty space between sections. */ @media (min-width: 761px) { .section { padding: clamp(84px, 60px + 3vw, 112px) 0; } } .section-header { max-width: 820px; margin: 0 auto 52px; text-align: center; } .section-header h2 { margin: 0 0 14px; } .section-header p { font-size: 18px; line-height: 1.8; color: var(--text); margin: 0 auto; max-width: 700px; } .section-header p + p { margin-top: 18px; } @media (min-width: 761px) { .section-header { margin-bottom: clamp(44px, 30px + 2vw, 60px); } } /* Small uppercase label, the editorial signature */ .section-kicker { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--blossom); margin: 0 0 20px; } .prose p { color: var(--text); font-size: 17.5px; line-height: 1.85; } /* The uppercase kicker is a brand label, not body copy, so it must win against every container paragraph rule: .section-header p and .prose p (0,1,1), .half > p and .about-teaser p (0,1,1), .about-page .prose p (0,2,1). The repeated class is a deliberate specificity bump to 0,3,0. Do not unwrap it. */ .section-kicker.section-kicker.section-kicker, .about-portrait-kicker.about-portrait-kicker.about-portrait-kicker { /* Every section label matches the first one on the coaching page. Without the bump, the paragraph rule of whatever section a label sits in set its size, so labels ranged from 12px to 20px across the site. */ color: var(--blossom); font-family: var(--sans); font-size: var(--fs-label, 12px); font-weight: 500; letter-spacing: .26em; line-height: 1.8; text-transform: uppercase; } .prose p.lead { font-family: var(--serif); font-size: clamp(21px, 2.1vw, 27px); line-height: 1.5; color: var(--ink); } /* ── Header / Nav ── */ .site-header { border-top: 4px solid var(--leaf); position: sticky; top: 0; z-index: 1000; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; max-width: 1140px; margin: 0 auto; padding: 16px 16px; gap: 6px; position: relative; } .nav .nav-links { order: 3; } .nav .theme-toggle { order: 2; } .nav .nav-toggle { order: 4; } .brand-name { font-family: var(--serif); font-weight: 400; color: var(--ink); font-size: 18px; line-height: 1.1; white-space: nowrap; letter-spacing: .01em; display: inline-flex; align-items: center; min-height: 44px; } .brand-name:hover { color: var(--leaf); } .nav-toggle { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 1px solid var(--ink); border-radius: 0; padding: 8px 18px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); cursor: pointer; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); flex-direction: column; align-items: flex-start; padding: 18px 22px 22px; gap: 16px; border-bottom: 1px solid var(--line); } .nav-links.open { display: flex; } /* In the phone dropdown the two groups are simply part of one stacked list. */ .nav-group { display: contents; } .nav-links a { position: relative; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center; transition: color .2s; } .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--leaf); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .nav-links a:hover { color: var(--leaf); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); } .nav-links a[aria-current="page"]::after { background: var(--ink); } .no-scroll { overflow: hidden; } @media (min-width: 901px) { .nav-toggle { display: none; } .nav-links { display: flex; position: static; flex-direction: row; align-items: center; gap: 38px; padding: 0; background: none; border: 0; } /* Nav labels must never break mid-phrase: "Women Align & Shine" wrapped onto two lines around 950px and broke the header. */ .nav-links a { font-size: 11.5px; font-weight: 500; letter-spacing: .22em; padding: 6px 0; min-height: 0; white-space: nowrap; } .nav-links a::after { bottom: 2px; } } /* Wordmark hard left, then the links, then language and theme at the far right, all on one line. The centred masthead was tried and Tima did not like it; the two .nav-group spans in the markup stay, but they collapse to display:contents so the four links read as one list. */ @media (min-width: 901px) { /* The header runs edge to edge rather than sitting in the 1140px content column, so the wordmark is hard against the left of the window and the controls against the right, the way an editorial masthead reads. */ .nav { max-width: none; padding: 20px 24px; gap: 14px; } .nav .nav-links { gap: 26px; } .brand-name { font-size: 21px; letter-spacing: .06em; margin-right: 8px; } .nav .nav-links { order: 2; margin-left: auto; gap: 38px; } .nav .lang-switch { order: 3; margin-left: 6px; } .nav .theme-toggle { order: 4; margin-left: 0; } } @media (min-width: 1180px) { .nav { padding: 20px 38px; } .nav .nav-links { gap: 40px; } } /* ── Buttons: square, quiet, uppercase ── */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding: 18px 42px; min-height: 44px; border-radius: 0; border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s; text-align: center; line-height: 1.2; } .button:active { transform: scale(.985); } .button-primary { background: var(--leaf); border-color: var(--leaf); } .button-primary:hover { background: var(--leaf-deep); border-color: var(--leaf-deep); } .button-outline { background: transparent; color: var(--ink) !important; border-color: var(--ink); } .button-outline:hover { background: var(--ink); color: var(--paper) !important; } /* Second fill, mirroring the reference's two-button-colour system. White on the brand rose is 5.93:1. */ .button-secondary { background: var(--blossom); border-color: var(--blossom); color: #FFFFFF !important; } .button-secondary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper) !important; } .button-rose { background: var(--ink); border-color: var(--ink); } .button-rose:hover { background: var(--leaf); border-color: var(--leaf); } :root:not([data-theme="dark"]) .button-rose { color: var(--paper) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .button-rose { color: var(--on-accent) !important; } } :root[data-theme="dark"] .button-rose { color: var(--on-accent) !important; } .text-link { color: var(--leaf); font-weight: 500; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; display: inline-block; padding: 11px 0; line-height: 1.5; background-image: linear-gradient(var(--leaf-line), var(--leaf-line)); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 calc(100% - 9px); transition: background-image .2s, color .2s; } .text-link:hover { background-image: linear-gradient(var(--ink), var(--ink)); } .text-link:hover { color: var(--ink); } .cta-note { font-size: 14.5px; color: var(--muted); margin: 20px 0 0; } /* ── Hero (home) ── */ .hero { padding: 44px 0 64px; } .hero-inner { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; } .hero-inner > * { min-width: 0; } .hero-content { max-width: 680px; } .hero .section-kicker { margin-bottom: 14px; } .hero h1 { font-size: clamp(34px, 7.2vw, 66px); line-height: 1.1; margin: 0 0 26px; color: var(--ink); letter-spacing: -.015em; } .hero h1 .hero-line-1, .hero h1 .hero-line-2 { display: block; } @media (prefers-reduced-motion: no-preference) { .hero .section-kicker, .hero h1 .hero-line-1, .hero h1 .hero-line-2, .hero-copy, .hero-actions { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; } .hero h1 .hero-line-1 { animation-delay: .08s; } .hero h1 .hero-line-2 { animation-delay: .22s; } .hero-copy { animation-delay: .36s; } .hero-actions { animation-delay: .46s; } } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .hero-copy { font-size: 17.5px; line-height: 1.8; color: var(--text); margin: 0 0 34px; max-width: 52ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; } /* Side by side in the hero: the generous button padding would otherwise push the second one onto its own line inside the narrower hero column. */ @media (min-width: 861px) { .hero-actions .button { padding-left: 30px; padding-right: 30px; } } .hero-actions .button { flex: 1 1 100%; } .hero-portrait { text-align: center; margin: 0; } .hero-portrait img { width: 100%; max-width: 300px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); margin: 0 auto; } .hero-portrait figcaption { margin-top: 12px; font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } @media (min-width: 861px) { .hero { padding: 112px 0 104px; } .hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; } .hero-actions .button { flex: 0 0 auto; } .hero-portrait img { max-width: 460px; } } /* ── Hero (interior pages) ── */ .hero-page { padding: 64px 0 40px; text-align: center; } .hero-page-inner { max-width: 1140px; margin: 0 auto; padding: 0 22px; } .hero-page h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.1; margin: 14px 0 24px; letter-spacing: -.015em; } .hero-page-lead { font-size: 18px; line-height: 1.8; color: var(--text); margin: 0 auto; max-width: 700px; } .hero-page-lead + .hero-page-lead { margin-top: 18px; } .hero-page-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; } @media (min-width: 761px) { .hero-page { padding: clamp(84px, 50px + 3.5vw, 108px) 0 clamp(36px, 20px + 2vw, 52px); } .hero-page-lead { font-size: 19px; } } /* ── Doors (home: two ways in) ── */ .doors { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 960px; margin: 0 auto; border-top: 1px solid var(--line); } .door { padding: 30px 0 32px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; } .door h3 { font-size: 24px; margin: 0 0 10px; } .door p { font-size: 15.5px; line-height: 1.7; color: var(--text); margin: 0 0 20px; flex: 1; } .door .text-link { align-self: flex-start; } @media (min-width: 761px) { .doors { grid-template-columns: 1fr 1fr; } .door { padding: 36px 40px 40px; } .door:first-child { padding-left: 0; border-right: 1px solid var(--line); } .door:last-child { padding-right: 0; } } /* ── About teaser (home) ── */ .about-teaser { max-width: 680px; margin: 0 auto; text-align: center; } .about-teaser p { font-size: 17px; line-height: 1.75; color: var(--text); margin: 0 0 12px; } .about-teaser .text-link { display: inline-block; margin-top: 12px; } /* ── Proof thumbnails (home) and portfolio cards ── */ .proof-grid, .portfolio-grid { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 1080px; margin: 0 auto; } .proof-card, .portfolio-card { background: transparent; border: 0; display: flex; flex-direction: column; color: inherit; } .proof-thumb, .portfolio-thumb { aspect-ratio: 1200 / 630; background: var(--paper-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .proof-thumb img, .portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .proof-card:hover .proof-thumb img, .portfolio-card:hover .portfolio-thumb img { transform: scale(1.02); } .thumb-placeholder { padding: 18px; text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; } .proof-body, .portfolio-body { padding: 18px 0 0; display: flex; flex-direction: column; flex: 1; } .proof-body h3, .portfolio-body h3 { font-size: 21px; margin: 0 0 6px; } .proof-body p, .portfolio-body p { font-size: 15px; line-height: 1.65; color: var(--text); margin: 0 0 12px; } .proof-body .text-link, .portfolio-body .text-link { margin-top: auto; align-self: flex-start; } @media (min-width: 761px) { .proof-grid, .portfolio-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } } .portfolio-grid { grid-template-columns: 1fr; justify-content: center; } @media (min-width: 681px) { .portfolio-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); } } .portfolio-meta { list-style: none; padding: 0; margin: 6px 0 16px; } .portfolio-meta li { font-size: 14.5px; line-height: 1.65; color: var(--text); padding: 12px 0; border-top: 1px solid var(--line); } .portfolio-meta li:last-child { border-bottom: 1px solid var(--line); } .portfolio-meta strong { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blossom); margin-bottom: 4px; } .portfolio-credit { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 16px 0 0; } .portfolio-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; padding-top: 6px; } /* ── Steps (Align / Build / Shine; coaching how it works) ── */ .steps-grid { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 1080px; margin: 0 auto; border-top: 1px solid var(--line); } .step-card { padding: 30px 0 32px; border-bottom: 1px solid var(--line); background: transparent; } .step-num { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--leaf); color: var(--leaf); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 17px; margin: 0 0 18px; } .step-card h3 { font-size: 26px; margin: 0 0 10px; } .step-card .step-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--blossom); margin: 0 0 8px; } .step-card p { font-size: 15.5px; line-height: 1.7; color: var(--text); margin: 0; } @media (min-width: 761px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } .step-card { padding: 36px 36px 40px; border-right: 1px solid var(--line); } .step-card:first-child { padding-left: 0; } .step-card:last-child { padding-right: 0; border-right: 0; } } .steps-list { display: flex; flex-direction: column; gap: 0; max-width: 680px; margin: 0 auto; border-top: 1px solid var(--line); } .steps-list .step { display: flex; gap: 20px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--line); } .steps-list .step-num { flex-shrink: 0; margin: 2px 0 0; width: 36px; height: 36px; font-size: 15px; } .steps-list h3 { font-size: 20px; margin: 4px 0 6px; } .steps-list p { font-size: 15px; line-height: 1.7; color: var(--text); margin: 0; } /* ── What you get (grouped capabilities) ── */ .capability-grid { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 1080px; margin: 0 auto; border-top: 1px solid var(--line); } .capability { padding: 26px 0 28px; border-bottom: 1px solid var(--line); background: transparent; } .capability h3 { font-size: 20px; margin: 0 0 10px; } .capability p { font-size: 15px; line-height: 1.7; color: var(--text); margin: 0; } @media (min-width: 681px) { .capability-grid { grid-template-columns: 1fr 1fr; } .capability { padding: 30px 32px 34px; border-right: 1px solid var(--line); } .capability:nth-child(2n+1) { padding-left: 0; } .capability:nth-child(2n) { padding-right: 0; border-right: 0; } } @media (min-width: 981px) { .capability-grid { grid-template-columns: repeat(3, 1fr); } .capability:nth-child(2n+1), .capability:nth-child(2n) { padding: 30px 32px 34px; border-right: 1px solid var(--line); } .capability:nth-child(3n+1) { padding-left: 0; } .capability:nth-child(3n) { padding-right: 0; border-right: 0; } } /* ── Offers ── */ .offer-grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1080px; margin: 0 auto 30px; } .offer-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px 30px; display: flex; flex-direction: column; } .offer-card.featured { background: var(--leaf-light); border-color: var(--leaf-line); } .offer-card h3 { font-size: 24px; margin: 0 0 8px; line-height: 1.2; } .offer-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--blossom); margin: 0 0 14px; } .offer-card p { font-size: 14.5px; line-height: 1.7; color: var(--text); margin: 0 0 14px; } .offer-card .founding { border-left: 2px solid var(--leaf); padding: 4px 0 4px 14px; font-size: 14px; line-height: 1.6; color: var(--ink); margin: 4px 0 18px; } .offer-card .text-link { margin-top: auto; align-self: flex-start; } .offers-note { text-align: center; max-width: 680px; margin: 0 auto; font-size: 16px; line-height: 1.6; color: var(--text); } .offers-note-after { margin-top: 34px; } .offers-note .capacity { font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 19px; } @media (min-width: 681px) { .offer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 981px) { .offer-grid { grid-template-columns: repeat(3, 1fr); } } /* ── Check lists (who this is for / not for) ── */ .fit-list, .notfit-list { list-style: none; padding: 0; margin: 0 0 20px; } .fit-list li, .notfit-list li { font-size: 15.5px; color: var(--text); padding: 14px 0 14px 28px; position: relative; line-height: 1.65; border-bottom: 1px solid var(--line); } .fit-list li:first-child, .notfit-list li:first-child { border-top: 1px solid var(--line); } .fit-list li::before { content: '\2713'; position: absolute; left: 0; top: 14px; color: var(--leaf); font-weight: 700; } .notfit-list li::before { content: '\2013'; position: absolute; left: 2px; top: 14px; color: var(--blossom); font-weight: 700; } .fit-grid { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 980px; margin: 0 auto; } .fit-grid h3 { font-size: 22px; margin: 0 0 14px; } @media (min-width: 761px) { .fit-grid { grid-template-columns: 1fr 1fr; gap: 48px; } } .care-note { border-left: 2px solid var(--leaf); padding: 6px 0 6px 20px; margin: 28px auto 0; font-size: 15px; line-height: 1.7; color: var(--ink); max-width: 720px; } /* ── Testimonial ── */ .testi-card { background: transparent; border: 0; padding: 0; max-width: 860px; margin: 0 auto; text-align: center; } .testi-card blockquote { font-family: var(--serif); font-size: clamp(21px, 2.5vw, 31px); line-height: 1.5; color: var(--ink); margin: 0 0 30px; font-style: italic; } .testi-card blockquote::before { content: '\201C'; color: var(--leaf); font-size: 40px; line-height: 0; vertical-align: -14px; margin-right: 4px; font-style: normal; } .testi-card figcaption { display: flex; flex-direction: column; gap: 4px; align-items: center; } .testi-name { font-weight: 600; color: var(--ink); font-size: 15px; } .testi-type { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--blossom); font-weight: 600; } @media (min-width: 761px) { .testi-card blockquote { font-size: 22px; } } /* ── Forms (quote form, reading request) ── */ .form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 28px 38px; max-width: 760px; margin: 0 auto; } .form-card h2 { font-size: clamp(24px, 3vw, 30px); margin: 0 0 8px; text-align: left; } .form-intro { font-size: 16.5px; color: var(--text); margin: 0 0 32px; line-height: 1.8; } .form-row { display: grid; grid-template-columns: 1fr; gap: 0 16px; } .form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; min-width: 0; } .form-field label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } .form-field .optional { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 12px; } .form-field input, .form-field textarea, .form-field select { width: 100%; padding: 17px 16px; border-radius: 0; border: 1px solid var(--input-border); font-family: var(--sans); font-size: 16px; background: var(--card); color: var(--ink); transition: border-color .2s, box-shadow .2s; } .form-field select { appearance: none; -webkit-appearance: none; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .form-field textarea { min-height: 140px; resize: vertical; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 1px var(--leaf); } .form-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; padding: 16px 18px; border-radius: 0; border: 1px solid var(--leaf); background: var(--leaf); color: #fff; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s; } .form-submit:hover { background: var(--leaf-deep); border-color: var(--leaf-deep); } .form-submit:active { transform: scale(.99); } .form-submit:disabled { opacity: .65; cursor: not-allowed; } .form-rose .form-submit { background: var(--ink); border-color: var(--ink); color: var(--paper) !important; } .form-rose .form-submit:hover { background: var(--leaf); border-color: var(--leaf); } .form-small { font-size: 13px; color: var(--muted); margin: 14px 0 0; text-align: center; } .form-aside { font-size: 14.5px; color: var(--text); line-height: 1.7; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; } .form-status { margin: 14px 0 0; font-size: 15px; color: var(--blossom); text-align: center; min-height: 1.2em; } .form-success { display: none; text-align: center; padding: 24px 10px; } .form-success .success-icon { color: var(--leaf); font-size: 28px; margin-bottom: 8px; animation: pop .45s cubic-bezier(.2, .8, .3, 1.2) both; } @keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .form-success h3 { font-size: 24px; margin: 0 0 8px; } .form-success p { color: var(--text); margin: 0; } .form-card.sent form { display: none; } /* Contact page: a quiet pointer under the topic, shown for the topics that have their own form. */ .form-topic-hint { font-size: 14.5px; line-height: 1.6; color: var(--text); margin: -4px 0 18px; padding: 12px 14px; border-left: 2px solid var(--leaf); background: var(--leaf-light); } .form-topic-hint a { color: var(--leaf); text-decoration: underline; text-underline-offset: 3px; } /* Enquiry panels (coaching call, Soul Blueprint): the form stays closed behind its button and opens in place. The card follows the Women Align & Shine enquiry form: soft rounded card, questions in sentence case, a quiet hint under each, rounded fields and a pill submit, in this site's colours. */ .enquiry-panel { max-width: 760px; margin: 0 auto; } .enquiry-panel > summary { list-style: none; } .enquiry-panel > summary::-webkit-details-marker { display: none; } .enquiry-panel[open] > summary { background: transparent; border-color: var(--leaf); color: var(--leaf) !important; } .enquiry-panel[open] > summary:hover { background: var(--leaf-light); } .enquiry-card { text-align: left; margin-top: 28px; border-radius: 18px; animation: enquiry-in .35s ease both; } /* Any form card opened from a panel (the Design & Tech enquiry keeps its own square card). */ .enquiry-panel > .form-card { text-align: left; margin-top: 28px; animation: enquiry-in .35s ease both; } @media (prefers-reduced-motion: reduce) { .enquiry-panel > .form-card { animation: none; } } .final-cta > .container > .section-kicker + .enquiry-panel { margin-top: 18px; } @keyframes enquiry-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .enquiry-card { animation: none; } } .enquiry-card h3 { font-size: 24px; margin: 0 0 8px; } .enquiry-card fieldset { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; } .enquiry-card legend { font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--ink); padding: 0; margin: 0 0 8px; } .enquiry-lead { font-size: 15.5px; line-height: 1.7; color: var(--text); margin: 0 0 24px; } .enquiry-card .form-field label { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.5; color: var(--leaf); } .enquiry-card .form-field .optional { font-size: 13px; } .enquiry-card .form-field input, .enquiry-card .form-field textarea { border-radius: 10px; padding: 14px 16px; } .enquiry-card .form-field textarea { min-height: 96px; } .enquiry-hint { font-size: 13.5px; line-height: 1.5; color: var(--muted); } .enquiry-timing { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 6px 0 18px; } .enquiry-card .form-submit { border-radius: 999px; } .enquiry-card .form-success .button { margin-top: 22px; } .form-card.sent .form-success { display: block; } .honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (min-width: 561px) { .form-card { padding: 36px 36px 32px; } .form-row { grid-template-columns: 1fr 1fr; } } /* ── Quiet pointer band (for women → WAS) ── */ .pointer-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; max-width: 720px; margin: 0 auto; text-align: center; } .pointer-band p { color: var(--text); margin: 0 0 14px; } /* The Women Align & Shine mark above the pointer band's label, kept small the way the lotus is. Decorative: the brand is named in the text beside it. */ .pointer-logo { display: block; width: auto; height: 70px; margin: 0 auto 18px; } @media (min-width: 761px) { .pointer-logo { height: 84px; } } @media (min-width: 1200px) { .pointer-logo { height: clamp(84px, 5.5vw, 96px); } } .pointer-band h2 { margin: 0 0 12px; } .pointer-band .button { margin-top: 4px; } /* Secondary call to action inside each problem card, so the page does not hold its only button at the very top. The cards differ in length, so each is a flex column and the button is pushed down to a shared baseline. */ .steps-grid .step-card { display: flex; flex-direction: column; } /* margin-top:auto drops the button to the foot of its column so the three line up. The gap above it comes from .half-list's bottom margin, so the button keeps its own padding and does not stretch. */ .steps-grid .step-card .button { margin-top: auto; align-self: flex-start; } /* ── About page ── */ .about-portrait-section { padding-top: 0; padding-bottom: 12px; text-align: center; } .about-portrait-kicker { margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--blossom); } .about-portrait { width: 100%; max-width: 320px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); margin: 0 auto; } /* height:auto is required: the img carries height="1250" in its markup, and without it that fixed height wins over aspect-ratio and stretches the picture. */ @media (min-width: 641px) { .about-portrait { max-width: 400px; } } .about-page .section { padding: 44px 0; } @media (min-width: 761px) { .about-page .section { padding: 60px 0; } } .about-page .section-header { margin-bottom: 20px; text-align: left; } .about-page .prose p { font-size: 16.5px; line-height: 1.8; color: var(--text); } .signoff { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--ink); margin: 0 0 22px; } /* ── Final CTA ── */ .final-cta { text-align: center; } .final-cta .section-header { margin-bottom: 26px; } /* ── Footer ── */ .site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 28px 0; } .site-footer, .site-footer * { font-family: var(--sans); } /* Kept deliberately simple: three links on the left, the year on the right. */ .footer-inner { max-width: 1140px; margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; } .footer-nav { display: flex; flex-wrap: wrap; gap: 0 26px; } .footer-nav a { color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: opacity .2s; display: inline-flex; align-items: center; min-height: 44px; } .footer-nav a:hover { opacity: .7; color: #fff; } .footer-copy { margin: 0; font-size: 13px; color: var(--footer-muted); } @media (min-width: 761px) { .footer-inner { padding: 0 22px; } } } /* ── Legal pages ── */ .legal-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 20px; margin: 0 0 24px; } .legal-card h2 { font-size: 28px; margin: 0 0 14px; } .legal-card h3 { font-size: 17px; margin: 26px 0 8px; font-family: var(--sans); font-weight: 600; color: var(--ink); } .legal-card p, .legal-card li { color: var(--text); font-size: 15.5px; line-height: 1.75; } .legal-card li { margin: 6px 0; } .legal-note { border-left: 2px solid var(--leaf); padding: 4px 0 4px 18px; margin: 22px 0 0; color: var(--text); font-size: 14.5px; } @media (min-width: 761px) { .legal-card { padding: 40px; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .proof-card:hover .proof-thumb img, .portfolio-card:hover .portfolio-thumb img { transform: none; } .button:active, .form-submit:active { transform: none; } } /* ── Home: two halves of equal weight ── */ .bridge { padding-bottom: 48px; } .bridge .prose p.lead { max-width: 640px; margin: 0 auto; } .halves { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 1080px; margin: 0 auto; } .half { padding: 8px 0 40px; display: flex; flex-direction: column; align-items: flex-start; } .half + .half { border-top: 1px solid var(--line); padding-top: 40px; } .half h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 14px; } .half > p { font-size: 16px; line-height: 1.7; color: var(--text); margin: 0 0 18px; max-width: 46ch; } .half-list { list-style: none; padding: 0; margin: 0 0 20px; width: 100%; } .half-list li { font-size: 15px; line-height: 1.65; color: var(--text); padding: 12px 0; border-top: 1px solid var(--line); } .half-list li:last-child { border-bottom: 1px solid var(--line); } .half-list strong { color: var(--ink); } .half-note { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0 0 22px; } .half .button { margin-top: auto; } @media (min-width: 861px) { .halves { grid-template-columns: 1fr 1fr; } .half { padding: 8px 48px 8px 0; } .half + .half { border-top: 0; border-left: 1px solid var(--line); padding: 8px 0 8px 48px; } } /* Proof pair: coaching training beside homes built */ .pair { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 1080px; margin: 0 auto; } .pair-col h3 { font-size: 22px; margin: 0 0 16px; } .pair-col .fit-list { margin-bottom: 22px; } .pair-col .fit-list li { font-size: 15px; } .homes-list { list-style: none; padding: 0; margin: 0 0 22px; } .homes-list li { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); } .homes-list li:last-child { border-bottom: 1px solid var(--line); } .homes-list a { display: block; aspect-ratio: 1200 / 630; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; } .homes-list img { width: 100%; height: 100%; object-fit: cover; } .homes-list .thumb-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; padding: 6px; font-size: 9px; } .homes-list strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--ink); margin-bottom: 2px; } .homes-list span { font-size: 14px; line-height: 1.55; color: var(--text); } @media (min-width: 861px) { .pair { grid-template-columns: 1fr 1fr; gap: 64px; } } /* ── Credibility strip under the hero ── */ .cred-strip { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 6px 0; } .cred-strip li { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1.5; padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--line); } .cred-strip li:last-child { border-right: 0; margin-right: 0; padding-right: 0; } /* Each credential is now a cluster, not a single fact, so on a phone the uppercase treatment turns five lines into a wall of wrapped micro-type. Below the three-column breakpoint the strip reads as a plain short list: sentence case, a little larger, no letter-spacing, no dividers. */ @media (max-width: 760px) { .cred-strip { display: block; margin-top: 22px; } .cred-strip li { font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.5; padding: 0 0 0 14px; margin: 0 0 7px; border-right: 0; position: relative; } .cred-strip li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; background: var(--leaf); } .cred-strip li:last-child { margin-bottom: 0; padding-left: 14px; } } @media (prefers-reduced-motion: no-preference) { .cred-strip { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .56s; } } /* ── Bridge line under the lead ── */ .bridge-line { font-size: 15.5px; color: var(--muted); margin: 18px auto 0; max-width: 560px; } /* The bridge now sits beside Tima's photograph: text aligns with it on wide screens, and on a phone the picture stays modest so the words follow soon. */ .bridge .pair-text p.lead, .bridge .pair-text .bridge-line { margin-left: auto; margin-right: auto; } .bridge .pair-text p.lead { margin-bottom: 22px; } @media (max-width: 860px) { .bridge .bridge-figure { max-width: 300px; } } @media (min-width: 861px) { /* Text left, photograph right on wide screens; on a phone the photo still leads. */ .bridge .editorial-pair.reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } .bridge .pair-text p.lead, .bridge .pair-text .bridge-line { margin-left: 0; } } /* ── Testimonial, left-aligned variant (in columns) ── */ .testi-card.left { text-align: left; margin: 0 0 20px; } .testi-card.left blockquote { font-size: clamp(19px, 1.9vw, 23px); } .testi-card.left figcaption { align-items: flex-start; } .pair-col > .section-kicker { margin-bottom: 18px; } .journey-quote { margin-top: 40px; } /* ── Journey: from → to ── */ .journey { list-style: none; padding: 0; margin: 0 auto; max-width: 780px; border-top: 1px solid var(--line); } .journey li { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.55; } .journey .from { color: var(--muted); } .journey .to { color: var(--ink); font-weight: 500; } .journey .arrow { display: none; color: var(--leaf); font-family: var(--serif); } .journey .to::before { content: '\2192 '; color: var(--leaf); } @media (min-width: 640px) { .journey li { grid-template-columns: 1fr 32px 1fr; gap: 16px; align-items: center; padding: 18px 0; } .journey .arrow { display: block; text-align: center; } .journey .to::before { content: none; } } /* ── Person band: the human behind a service page ── */ .person-band { display: grid; grid-template-columns: 88px 1fr; gap: 20px; align-items: center; max-width: 760px; margin: 0 auto; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .person-band img { width: 88px; height: 88px; object-fit: cover; object-position: center 24%; border-radius: var(--radius); } /* The headshot is 4:5, so a centred square crop would sit on her shoulders; 24% from the top keeps her face in the middle of the small square. */ .person-band .section-kicker { margin-bottom: 6px; } .person-band strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ink); margin: 0 0 6px; } .person-band p { font-size: 15px; line-height: 1.65; color: var(--text); margin: 0; } .person-band .text-link { padding: 4px 0; } .person-band.compact { margin: 0 0 22px; padding: 20px 0; grid-template-columns: 72px 1fr; gap: 16px; } .person-band.compact img { width: 72px; height: 72px; } .person-band.compact strong { font-size: 18px; margin-bottom: 2px; } @media (min-width: 640px) { .person-band { grid-template-columns: 120px 1fr; gap: 28px; } .person-band img { width: 120px; height: 120px; } } /* ── Testimonial grid (coaching), two to six quotes ── */ .testi-grid { display: grid; grid-template-columns: 1fr; gap: 0 40px; max-width: 1080px; margin: 0 auto; border-top: 1px solid var(--line); } .testi-card.grid-quote { text-align: left; max-width: none; margin: 0; padding: 26px 0 28px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; } .testi-card.grid-quote blockquote { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.6; margin: 0 0 20px; flex: 1; } .testi-card.grid-quote figcaption { align-items: flex-start; } @media (min-width: 761px) { .testi-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } /* With only one testimonial the auto-fit grid leaves it hanging in the left column against a lot of empty space. On its own it centres and reads as a pull quote instead; it goes back to a column the moment a second arrives. */ .testi-grid > .grid-quote:only-child { max-width: 780px; margin-inline: auto; text-align: center; border-bottom: 0; } .testi-grid > .grid-quote:only-child figcaption { align-items: center; } /* Testimonial extras from the admin: an optional round photo, and a quiet line for role, organisation and location. Quotes without them look as before. */ .testi-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin: 0 0 8px; background: var(--paper-2); } .testi-meta { font-size: 13px; line-height: 1.5; color: var(--muted); } /* Content regions can be emptied from the admin. Rather than leave a heading over nothing, the part that would be empty steps out of the page. */ #words:not(:has(.testi-card)), #work:not(:has(.portfolio-card)), .why-quotes:not(:has(.testi-card)), .proof-coaching:not(:has(.testi-card)), .proof-build:not(:has(.homes-list li)) { display: none; } .section:has(.proof-coaching):not(:has(.testi-card, .homes-list li)) { display: none; } /* ── Q&A: native details, styled as hairline rows ── */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; font-family: var(--serif); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.4; color: var(--ink); padding: 24px 44px 24px 0; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; color: var(--leaf); font-family: var(--sans); font-size: 22px; line-height: 1; transition: transform .2s; } .faq details[open] summary::after { transform: rotate(45deg); } .faq summary:hover { color: var(--leaf); } .faq details p { font-size: 15.5px; line-height: 1.7; color: var(--text); margin: 0 0 20px; max-width: 64ch; } .faq summary:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; } /* ── Language switch in the header ── */ .lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line); transition: border-color .2s, color .2s; } .lang-switch:hover { color: var(--leaf); border-color: var(--leaf); } .nav .lang-switch { order: 2; margin-left: auto; } .nav .theme-toggle { margin-left: 4px; } @media (min-width: 901px) { .nav .lang-switch { order: 3; margin-left: 26px; } .nav .theme-toggle { order: 4; margin-left: 8px; } } /* Phones and tablets: the header keeps only the name and Menu. Language and the light or dark switch sit at the foot of the opened menu instead. */ .nav-utilities { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; align-self: stretch; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); } .nav-theme { width: auto; margin: 0; gap: 10px; padding: 12px 0; min-height: 44px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); } .nav-theme svg { width: 16px; height: 16px; } @media (max-width: 900px) { .nav > .lang-switch, .nav > .theme-toggle { display: none; } .nav .nav-toggle { margin-left: auto; } } @media (min-width: 901px) { .nav-utilities { display: none; } } /* ── Back to top ─────────────────────────────────────────────────────────── A small floating pill, bottom right, made by site.js. Its colours are the theme tokens, not literals, so it is cream with ink by day and the raised dark card with light type by night, legible over the page and the footer. */ .back-to-top { position: fixed; right: clamp(14px, 2vw, 28px); bottom: calc(clamp(14px, 2vw, 24px) + env(safe-area-inset-bottom, 0px)); z-index: 900; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--input-border); background: color-mix(in srgb, var(--card) 94%, transparent); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 6px 20px rgba(15, 46, 46, .14); cursor: pointer; animation: back-to-top-in .2s ease both; transition: border-color .2s, color .2s; } .back-to-top span { font-size: 14px; letter-spacing: 0; } .back-to-top:hover { border-color: var(--leaf); color: var(--leaf); } .back-to-top:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; } @keyframes back-to-top-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .back-to-top { animation: none; } } @media print { .back-to-top { display: none !important; } } /* ── Lotus ───────────────────────────────────────────────────────────────── Tima's own mark. Inlined rather than loaded as an image so it inherits currentColor and follows the light and dark themes. Kept to three quiet places: the closing section of each page, the form's thank-you state, and the favicon. Decorative, so it is hidden from screen readers. */ .lotus { display: block; width: 44px; height: auto; margin: 0 auto 28px; color: var(--leaf); } .final-cta .lotus, .section-invite > .container > .lotus { margin-bottom: 30px; } /* Home closing invitation over the lotus valley photograph. Same treatment as the hero: a teal scrim, white type, cream buttons. The scrim is deepest behind the centred words and eases toward the edges so the light and the mountains still show. */ .cta-image { position: relative; overflow: hidden; background: var(--footer-bg); isolation: isolate; } .cta-image > .cta-image-bg, .cta-image > .cta-image-bg img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; } .cta-image > .cta-image-bg img { object-fit: cover; object-position: center 42%; } .cta-image::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 75% at 50% 50%, rgba(12, 26, 26, .7) 0%, rgba(12, 26, 26, .52) 60%, rgba(12, 26, 26, .34) 100%); } .cta-image h2, .cta-image .section-header p { color: #FFFFFF; } .cta-image .section-kicker.section-kicker.section-kicker.section-kicker { color: #FFFFFF; opacity: 1; } .cta-image .lotus { color: #FFFFFF; opacity: .9; } .cta-image .button-primary { background: var(--paper); border-color: var(--paper); color: var(--ink) !important; } .cta-image .button-primary:hover { background: #FFFFFF; border-color: #FFFFFF; } @media (max-width: 760px) { .cta-image::after { background: linear-gradient(to bottom, rgba(12, 26, 26, .78) 0%, rgba(12, 26, 26, .68) 55%, rgba(12, 26, 26, .56) 100%); } } .success-icon .lotus { width: 56px; margin: 0 auto 12px; } .hero-image .lotus { color: var(--leaf-line); } @media (min-width: 761px) { .lotus { width: 50px; } } /* ── Imagery ─────────────────────────────────────────────────────────────── Built ready for the photography Tima is sending. Nothing uses these yet. .image-band drops a full-bleed strip between any two sections. .hero-image sets the headline over a picture; it carries a scrim so white type keeps its contrast over any photograph, light or dark. */ .image-band { position: relative; width: 100%; margin: 0; overflow: hidden; background: var(--paper-2); height: clamp(240px, 40vw, 520px); } .image-band img, .image-band picture { width: 100%; height: 100%; object-fit: cover; display: block; } /* Tima sits in the upper half of the garden photograph, so a centred crop would take the top of her head off on shallower viewports. */ .image-band img { object-position: center 38%; } .image-band figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 22px; font-size: 11.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: #FFFFFF; background: linear-gradient(to top, rgba(12, 26, 26, .72), rgba(12, 26, 26, 0)); } .image-band.tall { height: clamp(320px, 62vw, 720px); } /* Coaching page: mountains, light and the near lotuses in one strip. */ .image-band-valley img { object-position: center 42%; } .hero-image { position: relative; padding: 0; min-height: clamp(460px, 76vh, 760px); display: flex; align-items: flex-end; overflow: hidden; } .hero-image > img, .hero-image > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The hero film fills the band like the photograph did. */ .hero-image > .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; pointer-events: none; } /* Pause and play for the moving background, required for anything that moves for more than five seconds. Quiet, in the corner, above the scrim. */ .hero-video-toggle { position: absolute; right: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 24px); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); background: rgba(12, 26, 26, .35); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, border-color .2s; } .hero-video-toggle:hover { background: rgba(12, 26, 26, .6); border-color: #FFFFFF; } .hero-video-toggle:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; } .hero-video-toggle svg { width: 18px; height: 18px; } .hero-video-toggle .icon-play, .hero-video-toggle[aria-pressed="true"] .icon-pause { display: none; } .hero-video-toggle[aria-pressed="true"] .icon-play { display: block; } .hero-image::after { content: ''; position: absolute; inset: 0; background: /* shade under the text column, fading out before the flowers on the right */ linear-gradient(to right, rgba(12, 26, 26, .62) 0%, rgba(12, 26, 26, .46) 38%, rgba(12, 26, 26, .12) 72%, rgba(12, 26, 26, 0) 100%), linear-gradient(to top, rgba(12, 26, 26, .6) 0%, rgba(12, 26, 26, .22) 50%, rgba(12, 26, 26, .18) 100%); } /* On a phone the text spans the full width, so the shade does too. */ @media (max-width: 760px) { .hero-image::after { background: linear-gradient(to top, rgba(12, 26, 26, .8) 0%, rgba(12, 26, 26, .66) 50%, rgba(12, 26, 26, .6) 100%); } } .hero-image .hero-inner { position: relative; z-index: 2; padding-top: 64px; padding-bottom: 64px; } .hero-image h1, .hero-image .hero-copy, .hero-image .cred-strip li { color: #FFFFFF; } .hero-image .section-kicker { color: #FFFFFF; opacity: .82; } .hero-image .cred-strip li { border-right-color: rgba(255, 255, 255, .34); } .hero-image .button-outline { color: #FFFFFF !important; border-color: rgba(255, 255, 255, .8); } .hero-image .button-outline:hover { background: #FFFFFF; color: var(--ink) !important; } /* Over a photograph the teal fill all but disappears: against the darker parts of an image it measures 1.3:1, so it reads as a rectangle of nothing. Filled buttons invert to cream with ink on them, which holds at 9.3:1 or better. */ .hero-image .button-primary, .hero-image .button-secondary { background: var(--paper); border-color: var(--paper); color: var(--ink) !important; } .hero-image .button-primary:hover, .hero-image .button-secondary:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink) !important; } /* The overlay hero runs as one column: the picture is the right-hand half now. */ .hero-image .hero-inner { grid-template-columns: minmax(0, 1fr); } .hero-image .hero-content { max-width: 820px; } @media (max-width: 760px) { .hero-image .cred-strip li::before { background: rgba(255, 255, 255, .68); } } /* The headline and both doors should sit in the first phone screen. The subhead is four sentences, so on phones it sets a little smaller and tighter, and the space around it closes up; the headline keeps its size. */ @media (max-width: 560px) { .hero-image .hero-inner { padding-top: 36px; padding-bottom: 72px; } /* room for the video pause button */ .hero-image h1 { margin-bottom: 18px; } .hero-image .hero-copy { font-size: 16px; line-height: 1.62; margin-bottom: 24px; } .hero-image .hero-actions { gap: 10px; } .hero-image .hero-actions .button { padding-top: 15px; padding-bottom: 15px; } } /* Short laptop screens: the same idea, lighter. */ @media (min-width: 861px) and (max-height: 760px) { .hero-image .hero-inner { padding-top: 40px; } .hero-image .hero-copy { margin-bottom: 24px; } } /* ── Image beside text ───────────────────────────────────────────────────── The reference's staggered editorial pattern, and a far better home for a portrait-orientation photograph than a full-width band, which crops most of it away. Add .reverse to alternate which side the picture sits on. On a phone the pair stacks and centres, as Tima asked. */ .editorial-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: center; max-width: 1080px; margin: 0 auto; justify-items: center; } .pair-figure { margin: 0; width: 100%; max-width: 420px; } .pair-figure picture { display: block; } .pair-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); } .pair-figure figcaption { margin-top: 14px; font-size: 11.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); text-align: center; } .pair-text { text-align: center; } .pair-text p { font-size: 17px; line-height: 1.8; color: var(--text); margin: 0 0 16px; } .pair-text .text-link { margin-top: 8px; } @media (min-width: 861px) { .editorial-pair { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 76px; justify-items: stretch; } .pair-figure { max-width: none; } .pair-text { text-align: left; } .editorial-pair.reverse .pair-figure { order: 2; } } /* A contained wide photograph with an optional caption. */ .figure-wide { margin: 0 auto; max-width: 1140px; } .figure-wide img { width: 100%; height: auto; display: block; border-radius: var(--radius); } .figure-wide figcaption { margin-top: 14px; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); text-align: center; } /* ── Scroll reveal ───────────────────────────────────────────────────────── The .js-reveal class is added by site.js, so with no JavaScript nothing is ever hidden. Off entirely when the visitor prefers reduced motion. */ @media (prefers-reduced-motion: no-preference) { .js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); } .js-reveal [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); } } /* ══ Large screens ════════════════════════════════════════════════════════════ Above 1200px the layout used to stop growing: a 1140px column, 17px text and fixed card sizes, so a big monitor showed the same page with wider margins. This layer lets body copy, containers, cards, buttons and images scale with the viewport. Headings are deliberately untouched: nothing here sets a font-size on a heading, and every heading size is verified unchanged. Text blocks are sized in ch, so they widen in step with the type and keep the same number of characters per line rather than running long. DM Sans is wide: 1ch is about 0.69em, so these values are lower than they look. Grids simply fill the wider container. */ /* Short single-message sections, a person band, a pointer band or the closing call to action, were nearly half padding once they sat in full section spacing. They get proportionate padding instead. The About page is left out of the closing rule because it already sets its own tighter section spacing, and a browser without :has() simply keeps the normal padding. */ @media (min-width: 761px) { .section:has(> .container > .pointer-band:only-child), .section:has(> .container > .person-band:only-child) { padding: clamp(52px, 36px + 2vw, 72px) 0; } body:not(.about-page) .section.section-invite.final-cta { padding: clamp(72px, 48px + 2.4vw, 96px) 0; } } /* Three short steps stacked down a narrow column made both "How it works" sections the longest part of their pages. From 1100px they sit side by side. */ @media (min-width: 1100px) { .steps-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 clamp(32px, 3vw, 56px); max-width: none; border-top: 0; } .steps-list .step { flex-direction: column; gap: 16px; padding: 30px 0 0; border-bottom: 0; border-top: 1px solid var(--line); } .steps-list .step-num { margin: 0; } } @media (min-width: 1200px) { :root { --container: clamp(1140px, 86vw, 1480px); --gutter: clamp(22px, 1.6vw, 36px); --fs-body: clamp(17.5px, 11px + 0.5vw, 20px); --fs-body-sm: clamp(15.5px, 10px + 0.45vw, 17.5px); --fs-body-lg: clamp(19px, 12.5px + 0.55vw, 21.5px); --fs-label: clamp(12px, 8.5px + 0.26vw, 13.5px); --fs-micro: clamp(11px, 7.5px + 0.26vw, 12.5px); --fs-btn: clamp(13px, 9px + 0.3vw, 15px); } body { font-size: var(--fs-body); } /* Containers use the width that is there */ .container, .hero-inner, .hero-page-inner, .footer-inner { max-width: var(--container); padding-inline: var(--gutter); } .container.narrow { max-width: 63ch; } .halves, .pair, .editorial-pair, .steps-grid, .testi-grid, .fit-grid, .proof-grid, .portfolio-grid, .doors, .capability-grid, .offer-grid { max-width: none; } .portfolio-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 2.6vw, 48px); } .section-header { max-width: 72ch; } .section-header p { max-width: 54ch; font-size: var(--fs-body-lg); } .hero-page-lead { max-width: 54ch; font-size: var(--fs-body-lg); } .hero-image .hero-content { max-width: clamp(820px, 60vw, 980px); } .bridge .prose p.lead { max-width: clamp(640px, 34vw + 200px, 780px); } .half > p { max-width: 62ch; } .pointer-band, .care-note { max-width: 62ch; } .testi-card { max-width: 76ch; } .testi-grid > .grid-quote:only-child { max-width: 68ch; } .journey { max-width: 72ch; } .person-band { max-width: 66ch; grid-template-columns: clamp(120px, 8.4vw, 160px) 1fr; gap: clamp(28px, 2.2vw, 40px); } .person-band img { width: clamp(120px, 8.4vw, 160px); height: clamp(120px, 8.4vw, 160px); } .offers-note { max-width: 58ch; } .bridge-line { max-width: 52ch; } .form-card { max-width: clamp(760px, 58vw, 980px); padding: clamp(36px, 3vw, 56px); } /* Body copy */ .prose p, .pair-text p, .hero-copy, .form-intro, .half > p { font-size: var(--fs-body); } /* About prose was set smaller than elsewhere on purpose; it grows gently. */ .about-page .prose p { font-size: clamp(16.5px, 11px + 0.4vw, 18.5px); } .step-card p, .steps-list p, .half-list li, .fit-list li, .notfit-list li, .pair-col .fit-list li, .journey li, .care-note, .person-band p, .faq details p, .portfolio-meta li, .legal-card p, .legal-card li, .proof-body p, .portfolio-body p, .door p, .capability p, .offer-card p, .homes-list span, .testi-name, .pointer-band p, .form-aside, .cta-note, .bridge-line, .offers-note { font-size: var(--fs-body-sm); } .half-note, .form-small { font-size: clamp(13px, 9.5px + 0.26vw, 14.5px); } /* Labels and small type */ .section-kicker { font-size: var(--fs-label); } .cred-strip li, .testi-type, .portfolio-meta strong, .step-card .step-tag, .form-field label, .about-portrait-kicker, .portfolio-credit { font-size: var(--fs-micro); } .text-link { font-size: clamp(12.5px, 9px + 0.26vw, 14px); } /* Buttons and form controls */ .button { font-size: var(--fs-btn); padding: clamp(18px, 5px + 0.9vw, 22px) clamp(42px, 14px + 2vw, 54px); } .hero-actions .button { padding-left: clamp(30px, 8px + 1.5vw, 42px); padding-right: clamp(30px, 8px + 1.5vw, 42px); } .form-submit { font-size: clamp(12.5px, 8.5px + 0.3vw, 14.5px); padding-block: clamp(16px, 5px + 0.8vw, 20px); } .form-field input, .form-field textarea, .form-field select { font-size: 17px; } /* Cards breathe in proportion */ .step-card { padding: 36px clamp(36px, 2.6vw, 52px) 40px; } .step-card:first-child { padding-left: 0; } .step-card:last-child { padding-right: 0; } .half { padding: 8px clamp(48px, 4vw, 72px) 8px 0; } .half + .half { padding: 8px 0 8px clamp(48px, 4vw, 72px); } .pair { gap: clamp(64px, 5vw, 96px); } .editorial-pair { gap: clamp(64px, 5vw, 96px); } .fit-grid { gap: clamp(48px, 4vw, 72px); } /* Full-width bands were 520px tall on a large screen, which read as empty space between sections. Capped lower; still generous for a photograph. */ .image-band { height: clamp(240px, 26vw, 420px); } /* Images scale with their columns */ .about-portrait { max-width: clamp(400px, 24vw, 460px); } .homes-list li { grid-template-columns: clamp(112px, 8.5vw, 168px) 1fr; gap: clamp(16px, 1.4vw, 24px); } /* About page: each prose section sets its label and heading in a left column beside the text instead of stacked above it, so the page stops growing taller as the type grows. Heading sizes are unchanged. */ .about-page .container.narrow.prose { max-width: min(var(--container), 1320px); display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 56ch); column-gap: clamp(56px, 5vw, 96px); align-items: start; } .about-page .container.narrow.prose > .section-header { grid-column: 1; grid-row: 1 / span 30; margin: 0; position: sticky; top: 120px; } .about-page .container.narrow.prose > :not(.section-header) { grid-column: 2; } /* Footer keeps pace with the wider page */ .footer-copy { font-size: 14px; } .footer-nav a { font-size: 12px; } } /* The photographed invitation gets a little more height than the plain ones, so the valley reads as a place rather than a strip. */ body:not(.about-page) .section.section-invite.final-cta.cta-image { padding: clamp(88px, 40px + 6vw, 150px) 0; }