/* ========================================================================= Linden Aesthetic Studio — minimalist medspa template Sage / clinical green-grey · Swiss editorial discipline ========================================================================= */ /* ---------- Tokens ---------- */ :root { /* Palette — Sage (default) */ --c-bg: #f5f6f2; --c-paper: #fbfbf8; --c-ink: #1c201c; --c-ink-soft: #3a3f3a; --c-muted: #7d847c; --c-line: #d9ddd5; --c-line-soft: #e8ebe4; --c-sage: #5a6b5d; --c-sage-deep: #2f3a31; --c-sage-mist: #c9d2c5; --c-sage-wash: #e6eae0; --c-accent: var(--c-sage-deep); /* Type */ --f-display: "Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, serif; --f-body: "Geist", "Söhne", "Manrope", -apple-system, sans-serif; --f-mono: "Geist Mono", "IBM Plex Mono", ui-monospace, monospace; /* Scale */ --fs-eyebrow: 11px; --fs-body: 15px; --fs-body-l: 17px; --fs-lead: 21px; --fs-h6: 14px; --fs-h5: 18px; --fs-h4: 24px; --fs-h3: 34px; --fs-h2: 52px; --fs-h1: 88px; --fs-hero: clamp(56px, 9vw, 148px); /* Spacing */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 144px; /* Layout */ --container: 1360px; --gutter: clamp(24px, 4vw, 64px); --nav-h: 76px; /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --t-fast: 180ms; --t-med: 360ms; --t-slow: 720ms; } /* ---------- Palette variants (toggled via .palette-* on ) ---------- */ html.palette-stone { --c-bg: #f4f3ef; --c-paper: #fbfaf6; --c-ink: #1d1b17; --c-ink-soft: #3a382f; --c-muted: #807c70; --c-line: #ddd9cd; --c-line-soft: #ebe8df; --c-sage: #7a7466; --c-sage-deep: #2c2920; --c-sage-mist: #d3ccba; --c-sage-wash: #e9e4d4; --c-accent: var(--c-sage-deep); } html.palette-clinical { --c-bg: #ffffff; --c-paper: #f7f8f8; --c-ink: #0c0f10; --c-ink-soft: #2a2e2f; --c-muted: #6a7072; --c-line: #dfe2e3; --c-line-soft: #ecedee; --c-sage: #3f4e4b; --c-sage-deep: #14201d; --c-sage-mist: #cfd7d4; --c-sage-wash: #e6ebe8; --c-accent: var(--c-sage-deep); } html.palette-noir { --c-bg: #16181a; --c-paper: #1f2224; --c-ink: #f3f3ee; --c-ink-soft: #cdd0c8; --c-muted: #898f88; --c-line: #2f3336; --c-line-soft: #262a2c; --c-sage: #9aa996; --c-sage-deep: #c4cfbf; --c-sage-mist: #3a4239; --c-sage-wash: #232826; --c-accent: #d6ddcd; } /* ---------- Type pairings (toggled via .type-* on ) ---------- */ html.type-editorial { --f-display: "Cormorant Garamond", Georgia, serif; --f-body: "Geist", sans-serif; } html.type-swiss { --f-display: "Geist", sans-serif; --f-body: "Geist", sans-serif; } html.type-display { --f-display: "DM Serif Display", Georgia, serif; --f-body: "Geist", sans-serif; } html.type-mono { --f-display: "Cormorant Garamond", Georgia, serif; --f-body: "Geist Mono", ui-monospace, monospace; } html.type-swiss h1, html.type-swiss h2, html.type-swiss h3, html.type-swiss .display { font-weight: 300; letter-spacing: -0.02em; } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--c-bg); color: var(--c-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.55; background: var(--c-bg); color: var(--c-ink); font-feature-settings: "ss01", "cv11"; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } hr { border: 0; border-top: 1px solid var(--c-line); margin: 0; } /* ---------- Type styles ---------- */ h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 400; letter-spacing: -0.012em; line-height: 1.02; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); line-height: 1.1; } h4 { font-size: var(--fs-h4); line-height: 1.18; } h5 { margin: 0; font-family: var(--f-body); font-size: var(--fs-h5); font-weight: 500; letter-spacing: -0.005em; line-height: 1.3; } h6 { margin: 0; font-family: var(--f-body); font-size: var(--fs-h6); font-weight: 500; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } .display { font-family: var(--f-display); font-weight: 300; letter-spacing: -0.018em; line-height: 0.98; } .lead { font-family: var(--f-body); font-size: var(--fs-lead); line-height: 1.45; color: var(--c-ink-soft); font-weight: 400; max-width: 56ch; } .eyebrow { font-family: var(--f-body); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; display: inline-block; width: 24px; height: 1px; background: currentColor; } .eyebrow.no-rule::before { display: none; } .muted { color: var(--c-muted); } .serif { font-family: var(--f-display); } .italic { font-style: italic; } /* ---------- Layout primitives ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .container-wide { width: 100%; max-width: 1640px; margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--sp-10) 0; } .section-sm { padding: var(--sp-9) 0; } .section-xs { padding: var(--sp-8) 0; } .row { display: flex; gap: var(--sp-5); } .grid { display: grid; gap: var(--sp-5); } .divide-top { border-top: 1px solid var(--c-line); } .divide-bottom { border-bottom: 1px solid var(--c-line); } .center { text-align: center; } /* ---------- Buttons & Links ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-family: var(--f-body); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--c-ink); background: var(--c-ink); color: var(--c-bg); border-radius: 0; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); cursor: pointer; } .btn:hover { background: transparent; color: var(--c-ink); } .btn-ghost { background: transparent; color: var(--c-ink); } .btn-ghost:hover { background: var(--c-ink); color: var(--c-bg); } .btn-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 12px 0; border-bottom: 1px solid var(--c-ink); position: relative; } .btn-link .arr { transition: transform var(--t-fast) var(--ease); } .btn-link:hover .arr { transform: translateX(6px); } .link-underline { position: relative; } .link-underline::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform-origin: right; transform: scaleX(0); transition: transform var(--t-med) var(--ease); } .link-underline:hover::after { transform-origin: left; transform: scaleX(1); } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--c-bg) 88%, transparent); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--c-line); } .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--nav-h); width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); gap: var(--sp-5); } .nav-logo { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--f-display); font-size: 22px; letter-spacing: 0.005em; } .nav-logo .mark { display: inline-block; width: 22px; height: 22px; border: 1px solid var(--c-ink); border-radius: 50%; position: relative; align-self: center; } .nav-logo .mark::after { content: ""; position: absolute; inset: 6px; background: var(--c-ink); border-radius: 50%; } .nav-links { display: flex; align-items: center; gap: 36px; justify-content: center; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; } .nav-links a { padding: 8px 2px; position: relative; } .nav-links a[aria-current="page"]::after, .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--c-ink); } .nav-cta { justify-self: end; display: flex; align-items: center; gap: var(--sp-4); } .nav-cta .phone { font-family: var(--f-body); font-size: 13px; letter-spacing: 0.02em; color: var(--c-ink-soft); } .nav-cta .btn { padding: 11px 18px; font-size: 12px; } .nav-toggle { display: none; } @media (max-width: 960px) { .nav-inner { grid-template-columns: 1fr auto; } .nav-links { display: none; } .nav-cta .phone { display: none; } } /* ---------- Hero variants ---------- */ .hero { padding-top: var(--sp-9); padding-bottom: var(--sp-9); position: relative; } /* Hero A — Centered editorial */ .hero-a .hero-title { font-size: var(--fs-hero); text-align: center; max-width: 18ch; margin: 0 auto; font-weight: 300; } .hero-a .hero-meta { display: flex; justify-content: space-between; align-items: end; border-top: 1px solid var(--c-line); padding-top: var(--sp-5); margin-top: var(--sp-7); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); } .hero-a .hero-image { margin-top: var(--sp-7); aspect-ratio: 16 / 7; background: var(--c-sage-wash); position: relative; overflow: hidden; } /* Hero B — Asymmetric split */ .hero-b .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-7); align-items: end; } .hero-b .hero-title { font-size: clamp(48px, 7.4vw, 124px); font-weight: 300; line-height: 0.96; } .hero-b .hero-title em { font-style: italic; } .hero-b .hero-aside { padding-bottom: var(--sp-4); } .hero-b .hero-aside .lead { margin-bottom: var(--sp-6); } .hero-b .hero-image { margin-top: var(--sp-7); height: 56vh; min-height: 480px; background: var(--c-sage-wash); display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 1px; background: var(--c-line); } .hero-b .hero-image .pane { background: var(--c-sage-wash); position: relative; overflow: hidden; } /* Hero C — Full-bleed image with overlaid type */ .hero-c { padding: 0; } .hero-c .stage { position: relative; height: calc(100vh - var(--nav-h)); min-height: 640px; background: var(--c-sage-deep); color: var(--c-paper); overflow: hidden; } .hero-c .stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 60%, rgba(255,255,255,0.08), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.35)); } .hero-c .stage-inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: var(--sp-7) var(--gutter); } .hero-c .hero-title { font-size: clamp(48px, 7vw, 120px); font-weight: 300; line-height: 0.98; max-width: 14ch; } .hero-c .hero-foot { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-5); } .hero-c .hero-foot .lead { color: rgba(255,255,255,0.78); } /* ---------- Image placeholders ---------- */ .img-ph { position: relative; background: var(--c-sage-wash); overflow: hidden; } .img-ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 30% 30%, color-mix(in srgb, var(--c-sage-mist) 70%, transparent), transparent 60%), radial-gradient(ellipse 80% 60% at 70% 70%, color-mix(in srgb, var(--c-paper) 60%, transparent), transparent 70%), linear-gradient(135deg, var(--c-sage-wash), var(--c-sage-mist)); } .img-ph::after { content: attr(data-label); position: absolute; left: 16px; bottom: 14px; font-family: var(--f-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-soft); opacity: 0.55; mix-blend-mode: multiply; } .img-ph.portrait::before { background: radial-gradient(ellipse 50% 30% at 50% 32%, color-mix(in srgb, var(--c-sage-mist) 80%, var(--c-ink) 8%), transparent 70%), radial-gradient(ellipse 80% 50% at 50% 90%, color-mix(in srgb, var(--c-sage-mist) 70%, transparent), transparent 70%), linear-gradient(180deg, var(--c-sage-wash), color-mix(in srgb, var(--c-sage-wash) 70%, var(--c-paper))); } .img-ph.interior::before { background: linear-gradient(180deg, color-mix(in srgb, var(--c-sage-wash) 80%, var(--c-paper)) 0%, var(--c-sage-wash) 55%, color-mix(in srgb, var(--c-sage-mist) 90%, var(--c-ink) 3%) 100%), linear-gradient(90deg, transparent 60%, rgba(0,0,0,0.05)); } .img-ph.botanical::before { background: radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--c-sage-deep) 35%, var(--c-sage-wash)), transparent 40%), radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--c-sage-mist) 90%, var(--c-paper)), transparent 50%), var(--c-sage-wash); } /* Subtle grain on noir */ html.palette-noir .img-ph::before { opacity: 0.85; } /* ---------- Marquee strip ---------- */ .marquee { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); overflow: hidden; background: var(--c-paper); } .marquee-track { display: flex; gap: var(--sp-8); padding: 18px 0; white-space: nowrap; animation: marquee 38s linear infinite; font-family: var(--f-display); font-style: italic; font-size: 22px; color: var(--c-ink-soft); } .marquee-track span { display: inline-flex; align-items: center; gap: var(--sp-8); } .marquee-track .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c-sage); display: inline-block; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Cards & lists ---------- */ .service-list { border-top: 1px solid var(--c-line); } .service-row { display: grid; grid-template-columns: 80px 1.5fr 2fr 1fr 80px; align-items: center; gap: var(--sp-5); padding: var(--sp-6) 0; border-bottom: 1px solid var(--c-line); transition: padding var(--t-med) var(--ease); } .service-row:hover { padding-left: 8px; padding-right: 0; } .service-row .num { font-family: var(--f-body); font-size: 12px; letter-spacing: 0.12em; color: var(--c-muted); } .service-row .name { font-family: var(--f-display); font-size: 32px; font-weight: 400; letter-spacing: -0.01em; } .service-row .name em { font-style: italic; color: var(--c-sage); } .service-row .desc { font-size: 14px; color: var(--c-ink-soft); max-width: 50ch; } .service-row .meta { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); text-align: right; } .service-row .arr { justify-self: end; width: 32px; height: 32px; border: 1px solid var(--c-line); border-radius: 50%; display: grid; place-items: center; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .service-row:hover .arr { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); } @media (max-width: 860px) { .service-row { grid-template-columns: 50px 1fr 40px; } .service-row .desc, .service-row .meta { display: none; } .service-row .name { font-size: 24px; } } /* Filter chips */ .chips { display: flex; flex-wrap: wrap; gap: 8px; padding: var(--sp-5) 0; } .chip { font-family: var(--f-body); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; padding: 9px 16px; border: 1px solid var(--c-line); border-radius: 999px; background: transparent; color: var(--c-ink-soft); cursor: pointer; transition: all var(--t-fast) var(--ease); } .chip:hover { border-color: var(--c-ink); color: var(--c-ink); } .chip.active { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); } /* ---------- Stat / Index columns ---------- */ .cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); } .cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } .cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); } @media (max-width: 860px) { .cols-3, .cols-4, .cols-2 { grid-template-columns: 1fr; gap: var(--sp-6); } } .feature { padding: var(--sp-6) 0; border-top: 1px solid var(--c-line); } .feature .num { font-family: var(--f-display); font-style: italic; font-size: 22px; color: var(--c-sage); } .feature h4 { margin: var(--sp-3) 0 var(--sp-2); font-family: var(--f-display); font-size: 26px; font-weight: 400; } .feature p { font-size: 14px; color: var(--c-ink-soft); max-width: 38ch; } /* ---------- Quote / pull ---------- */ .pull { font-family: var(--f-display); font-size: clamp(28px, 4.2vw, 56px); font-weight: 300; line-height: 1.12; letter-spacing: -0.012em; max-width: 22ch; } .pull em { font-style: italic; color: var(--c-sage); } /* ---------- NAP / trust strip ---------- */ .nap { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); padding: var(--sp-6) 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } .nap .item .label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 8px; } .nap .item .val { font-family: var(--f-display); font-size: 20px; line-height: 1.25; } @media (max-width: 760px) { .nap { grid-template-columns: 1fr 1fr; } } /* ---------- Reviews ---------- */ .stars { display: inline-flex; gap: 2px; color: var(--c-sage-deep); } .review-card { padding: var(--sp-6) 0; border-top: 1px solid var(--c-line); display: grid; grid-template-columns: 160px 1fr; gap: var(--sp-6); } .review-card .who { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); } .review-card .quote { font-family: var(--f-display); font-size: 24px; font-weight: 400; line-height: 1.3; } .review-card .meta { margin-top: var(--sp-4); font-size: 13px; color: var(--c-muted); } @media (max-width: 760px) { .review-card { grid-template-columns: 1fr; } } /* ---------- FAQ ---------- */ .faq-list { border-top: 1px solid var(--c-line); } .faq-item { border-bottom: 1px solid var(--c-line); } .faq-q { width: 100%; display: grid; grid-template-columns: 60px 1fr auto; gap: var(--sp-5); align-items: center; padding: var(--sp-6) 0; text-align: left; cursor: pointer; } .faq-q .num { font-family: var(--f-body); font-size: 12px; letter-spacing: 0.12em; color: var(--c-muted); } .faq-q .q { font-family: var(--f-display); font-size: 26px; font-weight: 400; letter-spacing: -0.005em; line-height: 1.18; } .faq-q .toggle { width: 28px; height: 28px; position: relative; border: 1px solid var(--c-line); border-radius: 50%; } .faq-q .toggle::before, .faq-q .toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: var(--c-ink); transform: translate(-50%, -50%); transition: transform var(--t-fast) var(--ease); } .faq-q .toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-item.open .faq-q .toggle::after { transform: translate(-50%, -50%) rotate(0deg); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med) var(--ease); } .faq-a > .inner { overflow: hidden; } .faq-item.open .faq-a { grid-template-rows: 1fr; } .faq-a .body { padding: 0 0 var(--sp-6) 60px; font-size: 16px; color: var(--c-ink-soft); max-width: 64ch; line-height: 1.6; } @media (max-width: 760px) { .faq-q { grid-template-columns: 1fr auto; } .faq-q .num { display: none; } .faq-a .body { padding-left: 0; } } /* ---------- Breadcrumb ---------- */ .crumb { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); padding: var(--sp-5) 0; } .crumb a { color: var(--c-ink-soft); } .crumb a:hover { color: var(--c-ink); } .crumb .sep { color: var(--c-line); } .crumb .cur { color: var(--c-ink); } /* ---------- Footer ---------- */ .footer { background: var(--c-paper); border-top: 1px solid var(--c-line); padding: var(--sp-9) 0 var(--sp-6); margin-top: var(--sp-9); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-7); } .footer h6 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--sp-4); font-weight: 500; } .footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .footer ul a { font-size: 14px; color: var(--c-ink-soft); } .footer ul a:hover { color: var(--c-ink); } .footer .brand-block { max-width: 36ch; } .footer .brand-block .display { font-size: 28px; margin-bottom: var(--sp-4); } .footer .brand-block p { font-size: 13px; color: var(--c-muted); } .footer-bottom { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--c-muted); letter-spacing: 0.04em; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* ---------- CTA strip ---------- */ .cta-strip { padding: var(--sp-9) 0; border-top: 1px solid var(--c-line); } .cta-strip .row { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-7); } .cta-strip .display { font-size: clamp(40px, 5.5vw, 84px); font-weight: 300; max-width: 18ch; } @media (max-width: 760px) { .cta-strip .row { flex-direction: column; align-items: flex-start; } } /* ---------- Trust badges ---------- */ .badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-5); padding: var(--sp-6) 0; align-items: center; } .badge { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); text-align: center; } .badge .glyph { width: 40px; height: 40px; border: 1px solid var(--c-line); border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-style: italic; font-size: 20px; color: var(--c-sage); } @media (max-width: 860px) { .badges { grid-template-columns: repeat(3, 1fr); } } /* ---------- Areas grid ---------- */ .areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--c-line); } .areas-grid a { padding: var(--sp-6); display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); transition: background var(--t-fast) var(--ease); } .areas-grid a:hover { background: var(--c-sage-wash); } .areas-grid a .city { font-family: var(--f-display); font-size: 28px; font-weight: 400; } .areas-grid a .miles { font-size: 12px; color: var(--c-muted); letter-spacing: 0.1em; text-transform: uppercase; } @media (max-width: 760px) { .areas-grid { grid-template-columns: 1fr 1fr; } } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); overflow-x: auto; } .tab { padding: 18px 24px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); border-right: 1px solid var(--c-line); position: relative; white-space: nowrap; transition: color var(--t-fast) var(--ease); } .tab:hover { color: var(--c-ink); } .tab.active { color: var(--c-ink); } .tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--c-ink); } /* ---------- Forms ---------- */ .field { display: grid; gap: 8px; padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line); } .field label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); } .field input, .field textarea, .field select { background: transparent; border: 0; font-family: var(--f-body); font-size: 17px; color: var(--c-ink); padding: 4px 0 6px; width: 100%; outline: none; } .field textarea { min-height: 100px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--c-muted); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } @media (max-width: 760px) { .field-row { grid-template-columns: 1fr; } } /* ---------- Map placeholder ---------- */ .map-ph { aspect-ratio: 16 / 7; background: repeating-linear-gradient(45deg, var(--c-sage-wash) 0 2px, transparent 2px 14px), repeating-linear-gradient(-45deg, var(--c-sage-mist) 0 1px, transparent 1px 24px), var(--c-paper); position: relative; border: 1px solid var(--c-line); } .map-ph .pin { position: absolute; left: 42%; top: 48%; width: 14px; height: 14px; border-radius: 50%; background: var(--c-sage-deep); border: 2px solid var(--c-paper); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-sage-deep) 18%, transparent); } .map-ph .label { position: absolute; left: 50%; top: 48%; margin-left: 16px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink); background: var(--c-paper); padding: 4px 10px; border: 1px solid var(--c-line); } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal.delay-1 { transition-delay: 90ms; } .reveal.delay-2 { transition-delay: 180ms; } .reveal.delay-3 { transition-delay: 270ms; } .reveal.delay-4 { transition-delay: 360ms; } /* ---------- Tweaks panel ---------- */ .tweaks-toggle { display: none; } .tweaks-panel { position: fixed; right: 20px; bottom: 20px; z-index: 100; width: 280px; background: var(--c-paper); border: 1px solid var(--c-line); box-shadow: 0 18px 40px -20px rgba(0,0,0,0.18); font-family: var(--f-body); display: none; } .tweaks-panel.open { display: block; } .tweaks-panel header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--c-line); } .tweaks-panel header .ttl { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); } .tweaks-panel header .close { font-size: 18px; line-height: 1; color: var(--c-muted); } .tweaks-panel .group { padding: 12px 16px; border-bottom: 1px solid var(--c-line-soft); } .tweaks-panel .group:last-child { border-bottom: 0; } .tweaks-panel .group label.gl { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 8px; } .tweaks-panel .opts { display: flex; flex-wrap: wrap; gap: 6px; } .tweaks-panel .opts button { font-size: 11px; padding: 7px 11px; border: 1px solid var(--c-line); background: transparent; color: var(--c-ink-soft); cursor: pointer; } .tweaks-panel .opts button.active { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); } .tweaks-panel .swatches { display: flex; gap: 6px; } .tweaks-panel .swatch { width: 28px; height: 28px; border: 1px solid var(--c-line); cursor: pointer; position: relative; border-radius: 50%; } .tweaks-panel .swatch.active { box-shadow: 0 0 0 2px var(--c-ink); } /* ---------- Misc ---------- */ .kbd-arr { display: inline-block; transform: translateY(-1px); } .divider-label { display: flex; align-items: center; gap: 18px; margin: var(--sp-7) 0 var(--sp-5); } .divider-label::before, .divider-label::after { content: ""; flex: 1; height: 1px; background: var(--c-line); } .divider-label .eyebrow::before { display: none; }