/* Cameron Psychic Medium — edit colours in :root */ /* Default typography: Cormorant Garamond (headings) + Source Sans 3 (body) Alternates for comparison — add class on : font-pairing-1 | font-pairing-2 | font-pairing-sans | font-pairing-mid */ :root { /* Links — muted blue-slate */ --sky: #5c7282; --sky-light: #7d919f; /* Borders — soft neutral grey */ --line: rgba(100, 100, 98, 0.2); --line-faint: rgba(100, 100, 98, 0.1); --warm: #9a9590; /* Soft greys — one neutral family (same hue as --paper, no warm/cool split) */ --paper: #eeedec; --paper-deep: #e6e6e4; --paper-muted: #e8e7e6; --paper-elevated: #f1f0ef; --grey: var(--paper-muted); --grey-soft: var(--paper-muted); --card: var(--paper-elevated); --card-light: #f3f2f1; --surface: var(--grey); --surface-soft: var(--card); --panel: var(--card-light); --white: #fafaf8; --ink: #2a3134; --ink-soft: #5a656b; --serif: "Cormorant Garamond", Georgia, serif; --sans: "Source Sans 3", system-ui, sans-serif; /* Spacing: tighter on phones, roomier from tablet up */ --pad: 1.25rem; --space: 1.25rem; --space-lg: 2rem; --space-xl: 3rem; --width: 40rem; --width-wide: 56rem; --header: 3.5rem; --touch: 3rem; /* 48px minimum tap target */ --text: 1.0625rem; --lead: 1.125rem; } @media (min-width: 768px) { :root { --pad: 1.5rem; --space: 1.5rem; --space-lg: 3rem; --space-xl: 5rem; --header: 4rem; --lead: 1.2rem; } } /* Option 1 — warm contemporary serif + calm humanist sans */ html.font-pairing-1 { --serif: "Fraunces", Georgia, serif; --sans: "DM Sans", system-ui, sans-serif; } html.font-pairing-1 h1, html.font-pairing-1 h2, html.font-pairing-1 h3 { font-weight: 500; letter-spacing: -0.015em; } html.font-pairing-1 .hero h1 { letter-spacing: -0.02em; } html.font-pairing-1 .pullquote, html.font-pairing-1 blockquote { font-variation-settings: "SOFT" 50; } /* Option 2 — editorial serif + airy geometric sans */ html.font-pairing-2 { --serif: "Newsreader", Georgia, serif; --sans: "Work Sans", system-ui, sans-serif; } html.font-pairing-2 h1, html.font-pairing-2 h2, html.font-pairing-2 h3 { font-weight: 500; letter-spacing: -0.01em; } html.font-pairing-2 .hero h1 { letter-spacing: -0.015em; } /* Sans — calm modern sans throughout (grounded, not feminine or literary) */ html.font-pairing-sans { --serif: "Figtree", system-ui, sans-serif; --sans: "Figtree", system-ui, sans-serif; } html.font-pairing-sans h1, html.font-pairing-sans h2, html.font-pairing-sans h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.025em; } html.font-pairing-sans .hero h1 { font-weight: 600; letter-spacing: -0.03em; } html.font-pairing-sans .logo, html.font-pairing-sans .footer__brand { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; } html.font-pairing-sans .pullquote, html.font-pairing-sans blockquote { font-family: var(--sans); font-style: normal; font-weight: 500; letter-spacing: -0.01em; } html.font-pairing-sans .hero__label { font-weight: 600; letter-spacing: 0.12em; } /* Mid — contemporary serif headings + Figtree body (between Cormorant and all-sans) */ html.font-pairing-mid { --serif: "Source Serif 4", Georgia, serif; --sans: "Figtree", system-ui, sans-serif; } html.font-pairing-mid h1, html.font-pairing-mid h2, html.font-pairing-mid h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; } html.font-pairing-mid .hero h1 { letter-spacing: -0.02em; } html.font-pairing-mid .logo, html.font-pairing-mid .footer__brand { font-family: var(--serif); font-weight: 500; } html.font-pairing-mid .pullquote, html.font-pairing-mid blockquote { font-family: var(--serif); font-style: italic; font-weight: 400; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font: var(--text)/1.75 var(--sans); color: var(--ink-soft); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; } main { background: transparent; } img { max-width: 100%; height: auto; display: block; } a { color: var(--sky); text-underline-offset: 3px; } a:hover { color: var(--ink); } :focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; } h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); line-height: 1.15; margin: 0 0 1rem; } h1 { font-size: clamp(2rem, 7vw, 3.75rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.5rem, 4.5vw, 2.25rem); } h3 { font-size: clamp(1.2rem, 3vw, 1.35rem); } .prose h2:not(:first-child) { margin-top: 2rem; } .prose h3:not(:first-child) { margin-top: 1.5rem; } p { margin: 0 0 1rem; } ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; } /* Layout */ .wrap { width: 100%; max-width: var(--width-wide); margin: 0 auto; padding: 0 var(--pad); } .wrap--narrow { max-width: var(--width); } /* Legal pages — readable policy text in content panel */ .section--legal .content-panel { max-width: none; } .prose--policy { max-width: none; line-height: 1.8; } .prose--policy h2 { margin-top: 4rem; margin-bottom: 1rem; font-size: clamp(1.25rem, 3vw, 1.5rem); } .prose--policy h2:first-child { margin-top: 0; } .prose--policy p { text-wrap: pretty; } .prose--policy ul { margin-bottom: 1.25rem; } .prose--policy li { margin-bottom: 0.4rem; } .prose--policy > *:last-child { margin-bottom: 0; } .wrap--expect { max-width: 54rem; } .wrap--testimonials { max-width: 44rem; } .section { padding-block: clamp(2.25rem, 6vw, var(--space-xl)); } .section--tight { padding-top: clamp(1.5rem, 4vw, 2.5rem); } .section--soft { background: var(--surface); } /* Gentle surface — solid warm card */ .panel { background: var(--card-light); border: 1px solid var(--line-faint); border-radius: 6px; padding: clamp(1.5rem, 4vw, 2rem) var(--space); } @media (min-width: 768px) { .panel { padding: clamp(1.75rem, 3vw, 2.25rem); } } .section--intro { padding-top: clamp(1.75rem, 5vw, 3rem); } .section--intro .prose { margin-bottom: 0; } .section--intro .prose h2 { margin-bottom: 1.125rem; } .flow-spaced { margin-top: clamp(2rem, 5vw, 3rem); } .mt-lg { margin-top: var(--space-xl); } .mt-md { margin-top: 1.5rem; } .page-error { min-height: 70vh; display: flex; align-items: center; } .page-error__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } .footer__brand { color: var(--ink); font-weight: 500; } .prose { max-width: var(--width); } .prose--wide { max-width: 48rem; } .lead { font-size: var(--lead); line-height: 1.7; color: var(--ink-soft); } .muted { color: var(--ink-soft); } .divider { border: none; border-top: 1px solid var(--line); margin: var(--space-lg) 0; } /* Skip link */ .skip { position: absolute; left: -999px; top: 0; padding: 0.5rem 1rem; background: var(--ink); color: var(--white); z-index: 999; } .skip:focus { left: 1rem; top: 1rem; } /* Header */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header); padding-top: env(safe-area-inset-top, 0); background: rgba(238, 237, 235, 0.94); border-bottom: 1px solid var(--line-faint); } .header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--header); max-width: var(--width-wide); margin: 0 auto; padding: 0 var(--pad); } .header__end { display: flex; align-items: center; gap: 0.125rem; margin-left: auto; } .logo { font: 500 1.15rem/1 var(--serif); color: var(--ink); text-decoration: none; letter-spacing: 0.01em; } .logo:hover { color: var(--sky); text-decoration: none; } /* Mobile nav (no JS) */ .menu-check { position: absolute; opacity: 0; pointer-events: none; } .menu-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: var(--touch); height: var(--touch); margin: 0 calc(var(--pad) * -0.35) 0 0; cursor: pointer; -webkit-tap-highlight-color: transparent; z-index: 2; } .menu-btn span { display: block; width: 1.35rem; height: 2px; background: var(--ink); border-radius: 1px; } .menu-check:checked ~ .menu-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-check:checked ~ .menu-btn span:nth-child(2) { opacity: 0; } .menu-check:checked ~ .menu-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .nav { display: none; } .menu-check:checked ~ .nav { display: block; position: fixed; top: calc(var(--header) + env(safe-area-inset-top, 0)); left: 0; right: 0; bottom: 0; background: var(--paper); padding: 0.5rem var(--pad) calc(1.5rem + env(safe-area-inset-bottom, 0)); overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav ul { list-style: none; margin: 0; padding: 0; } .nav li:last-child { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line-faint); } .nav a { display: flex; align-items: center; min-height: var(--touch); padding: 0.65rem 0; font-size: 1.125rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-faint); } .nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: var(--sky); } /* Mobile: Book as full-width CTA in menu */ .nav .nav-book { justify-content: center; min-height: var(--touch); padding: 0.85rem 1.25rem; background: var(--ink); color: var(--white); border: none; border-radius: 3px; font-weight: 500; font-size: 1rem; } .nav .nav-book:hover, .nav .nav-book:focus-visible { background: var(--sky); color: var(--white); } @media (min-width: 992px) { .menu-check, .menu-btn { display: none; } .header__end { gap: 1.5rem; } .nav { display: block; position: static; padding: 0; background: none; } .nav ul { display: flex; align-items: center; gap: 1.75rem; } .nav a { padding: 0; font-size: 0.9rem; border: none; } .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } .nav li:last-child { margin-top: 0; padding-top: 0; border-top: none; } .nav .nav-book { justify-content: flex-start; min-height: auto; padding: 0.5rem 1.1rem; font-size: 0.9rem; } } /* Buttons — 48px min height for touch */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); padding: 0.85rem 1.5rem; font: 500 1rem/1.2 var(--sans); letter-spacing: 0.02em; text-decoration: none; border-radius: 3px; border: none; cursor: pointer; background: var(--ink); color: var(--white); -webkit-tap-highlight-color: transparent; } .btn:hover { background: var(--sky); color: var(--white); text-decoration: none; } .btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--white); box-shadow: none; } /* Homepage hero — landscape photo with readable text overlay */ .hero { position: relative; padding: calc(var(--header) + env(safe-area-inset-top, 0) + var(--space-lg)) 0 var(--space-lg); min-height: 75vh; min-height: 75dvh; display: flex; align-items: flex-end; overflow: hidden; background: var(--paper); } @media (min-width: 768px) { .hero { padding-bottom: var(--space-xl); min-height: 85vh; min-height: 85dvh; } } .hero__bg { position: absolute; inset: 0; z-index: 0; background-color: var(--paper-deep); background-image: url("../assets/images/hero-landscape.jpg"); background-size: cover; background-position: 50% 30%; background-repeat: no-repeat; } /* Mobile: crop for portrait — horizon low, sky above, text at bottom */ @media (max-width: 767px) { .hero__bg { background-position: 55% 42%; } } @media (min-width: 768px) { .hero__bg { background-position: 50% 30%; } } /* Warm sunset wash — light, luminous */ .hero__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to top, rgba(120, 100, 82, 0.2) 0%, rgba(150, 130, 110, 0.08) 30%, transparent 62% ); } /* Lower half — full-bleed depth (part of the image, not a text box) */ .hero__bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 2; background: radial-gradient( ellipse 150% 100% at 50% 100%, rgba(28, 32, 36, 0.3) 0%, rgba(32, 36, 40, 0.14) 40%, transparent 68% ), linear-gradient( to top, rgba(32, 36, 40, 0.42) 0%, rgba(38, 42, 46, 0.18) 48%, transparent 100% ); } /* Fade hero into page — narrow bottom blend only (image stays clear above) */ .hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 1; pointer-events: none; background: linear-gradient( to bottom, transparent 0%, transparent 42%, rgba(238, 237, 236, 0.22) 58%, rgba(238, 237, 236, 0.55) 74%, rgba(238, 237, 236, 0.88) 88%, var(--paper) 100% ); } .hero > .wrap { position: relative; z-index: 2; width: 100%; } .hero__content { position: relative; width: 100%; max-width: none; padding: clamp(1.15rem, 3vw, 1.65rem) clamp(1.25rem, 3vw, 2rem) clamp(0.35rem, 1.5vw, 0.5rem); } /* Hero type — legibility without a background box */ .hero h1 { max-width: none; margin-bottom: 1rem; color: #fffdf8; font-weight: 500; letter-spacing: -0.02em; text-shadow: 0 0 1px rgba(16, 22, 26, 0.65), 0 1px 2px rgba(16, 22, 26, 0.85), 0 2px 6px rgba(16, 22, 26, 0.55), 0 3px 16px rgba(16, 22, 26, 0.48), 0 8px 28px rgba(16, 22, 26, 0.36); overflow-wrap: break-word; } .hero .lead { max-width: none; color: #f8f6f2; font-weight: 400; text-shadow: 0 0 1px rgba(16, 22, 26, 0.5), 0 1px 2px rgba(16, 22, 26, 0.7), 0 2px 10px rgba(16, 22, 26, 0.44); } .hero__label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #f0ebe3; margin-bottom: 1rem; text-shadow: 0 0 1px rgba(16, 22, 26, 0.48), 0 1px 2px rgba(16, 22, 26, 0.65), 0 2px 8px rgba(16, 22, 26, 0.4); } /* —— Hero: mobile & tablet —— */ @media (max-width: 767px) { .hero { padding-bottom: var(--space); align-items: flex-end; } .hero > .wrap > .hero__content { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 1.1rem clamp(1.25rem, 3vw, 2rem) 0.55rem; margin: 0; } .hero h1 { max-width: 100%; font-size: clamp(1.75rem, 8.2vw, 2.35rem); line-height: 1.12; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } .hero .lead { max-width: 100%; font-size: 1.05rem; line-height: 1.65; } .hero__label { font-size: 0.7rem; letter-spacing: 0.11em; line-height: 1.45; max-width: 100%; } .hero__actions { flex-direction: column; align-items: stretch; gap: 0.65rem; width: 100%; margin-top: 1.15rem; } .hero__actions .btn { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } } /* Narrow phones (e.g. 320px) */ @media (max-width: 374px) { .hero > .wrap > .hero__content { padding: 1rem 0.7rem 0.5rem; } .hero h1 { font-size: 1.65rem; } } @media (min-width: 768px) { .hero__content { padding: clamp(1.65rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem) 0.65rem; } .hero h1 { margin-bottom: 1.25rem; font-size: clamp(2rem, 7vw, 3.75rem); } } /* Homepage: hero block matches content-panel width (wrap padding only) */ .page-home .hero__content, .page-home .hero > .wrap > .hero__content { padding-left: 0; padding-right: 0; } .page-home .hero__actions { width: 100%; } @media (min-width: 768px) { .page-home .hero__actions { flex-direction: row; gap: 0.75rem; } .page-home .hero__actions .btn { flex: 1 1 0; width: auto; min-width: 0; } } @media (max-width: 374px) { .page-home .hero > .wrap > .hero__content { padding-right: 0; } } .hero .btn--ghost { color: #fffdf8; background: rgba(22, 28, 32, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 253, 248, 0.85), 0 2px 12px rgba(22, 28, 32, 0.25); text-shadow: 0 1px 2px rgba(22, 28, 32, 0.4); } .hero .btn--ghost:hover, .hero .btn--ghost:focus-visible { background: rgba(22, 28, 32, 0.38); color: #fffdf8; box-shadow: inset 0 0 0 1px #fffdf8, 0 2px 14px rgba(22, 28, 32, 0.3); } .hero .btn--primary, .hero .btn:not(.btn--ghost) { box-shadow: 0 2px 14px rgba(22, 28, 32, 0.28); } .hero__actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.35rem; padding-bottom: 0.15rem; } .hero__actions .btn { width: 100%; } /* Buttons side-by-side from tablet up only */ @media (min-width: 768px) { .hero__actions { flex-direction: row; flex-wrap: wrap; } .hero__actions .btn { width: auto; flex: 0 1 auto; min-width: 10rem; } } /* Inner page titles */ .page-title { padding: calc(var(--header) + env(safe-area-inset-top, 0) + var(--space-lg)) 0 var(--space); border-bottom: 1px solid var(--line-faint); background: var(--paper); } @media (min-width: 768px) { .page-title { padding-bottom: var(--space-lg); } } .page-title h1 { margin-bottom: 0.5rem; } .page-title .lead { margin: 0; } /* Inner pages — content band matches homepage tone */ main:not(.page-home) > .section { background: var(--paper-muted); border-top: 1px solid var(--line-faint); } /* —— Homepage content below hero —— */ .page-home .home-body { background: var(--paper); } .page-home .section--intro { position: relative; z-index: 2; margin-top: clamp(-1.75rem, -3.5vw, -1rem); padding-top: clamp(2rem, 4.5vw, 2.75rem); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); background: var(--paper); } .page-home .section--offerings { padding-block: clamp(2.5rem, 6vw, 4rem); background: var(--grey); border-block: 1px solid var(--line-faint); } .page-home .section--reflect { padding-block: clamp(2rem, 5vw, 3.25rem); background: linear-gradient( 180deg, var(--paper) 0%, var(--paper-muted) 40%, var(--paper-muted) 60%, var(--paper) 100% ); border-top: 1px solid var(--line-faint); } .content-panel { background: var(--card-light); border: 1px solid var(--line-faint); border-radius: 8px; padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem); } @media (min-width: 768px) { .content-panel { padding: clamp(2rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 2.5rem); } } .content-panel--intro .prose h2 { margin-bottom: 1.25rem; } .content-panel--intro .prose p:last-child { margin-bottom: 0; } /* Reading types — subtle cards, 2-col desktop */ .service-cards { display: grid; gap: 0.875rem; margin: 0; padding: 0; list-style: none; } .service-cards > li { list-style: none; } .service-cards--grid { gap: clamp(0.875rem, 2vw, 1.25rem); } @media (min-width: 768px) { .service-cards--grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } /* Third card centred on its own row */ .service-cards--grid .service-item:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 0.625rem); margin-inline: auto; width: 100%; } } .service-item { display: flex; flex-direction: column; margin: 0; height: 100%; min-width: 0; padding: clamp(1.5rem, 3.5vw, 1.85rem) clamp(1.25rem, 3vw, 1.5rem); background: var(--card); border: 1px solid var(--line-faint); border-radius: 8px; box-shadow: 0 2px 8px rgba(80, 80, 78, 0.04); } .service-item h3 { margin-bottom: 0.5rem; font-size: clamp(1.2rem, 2.8vw, 1.35rem); } .service-item p { flex: 1; margin-bottom: 1rem; max-width: none; line-height: 1.7; overflow-wrap: break-word; } .service-item a { display: inline-flex; align-items: center; min-height: 2.5rem; margin-top: auto; font-weight: 500; font-size: 0.9375rem; text-decoration: none; letter-spacing: 0.01em; } .service-item a:hover { text-decoration: underline; } /* Legacy list class — keep for simple edits */ .service-list { list-style: none; padding: 0; margin: 0; } .service-list li { padding: var(--space) 0; border-bottom: 1px solid var(--line); } .service-list li:last-child { border-bottom: none; } .service-list h3 { margin-bottom: 0.35rem; } .service-list p { margin-bottom: 0.75rem; max-width: 36rem; } .service-list a { display: inline-flex; align-items: center; min-height: var(--touch); font-weight: 500; font-size: 1rem; text-decoration: none; } .service-list a:hover { text-decoration: underline; } /* Pullquote */ .pullquote { margin: 0; padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem); background: var(--card); border: 1px solid var(--line-faint); border-radius: 8px; } .page-home .pullquote { max-width: 36rem; margin-inline: auto; } /* Homepage closing pause — between hero solid + ghost button weight */ .page-home .pullquote--closing { container-type: inline-size; max-width: none; margin-inline: auto; padding: clamp(1.25rem, 3.2vw, 1.65rem) clamp(1rem, 2.5vw, 1.35rem); text-align: center; background: rgba(32, 38, 42, 0.84); color: #fffdf8; border: 1px solid rgba(255, 253, 248, 0.3); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 253, 248, 0.06), 0 2px 12px rgba(22, 28, 32, 0.16); } .page-home .pullquote--closing::before, .page-home .pullquote--closing::after { content: ""; display: block; width: 100%; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 253, 248, 0.1) 8%, rgba(255, 253, 248, 0.28) 50%, rgba(255, 253, 248, 0.1) 92%, transparent 100% ); } .page-home .pullquote--closing::before { margin-bottom: clamp(0.8rem, 2.4vw, 1.05rem); } .page-home .pullquote--closing::after { margin-top: clamp(0.8rem, 2.4vw, 1.05rem); } .pullquote p { font: 500 clamp(1.25rem, 4vw, 1.5rem)/1.45 var(--serif); color: var(--ink); margin: 0; max-width: 28em; } .pullquote p + p { margin-top: 0.6rem; } .page-home .pullquote--closing p { font-size: clamp(0.8125rem, 3.85cqi, 1.35rem); line-height: 1.45; letter-spacing: 0.015em; color: #fffdf8; max-width: 100%; margin-inline: auto; text-shadow: 0 1px 2px rgba(16, 22, 26, 0.35); } .page-home .pullquote--closing .pullquote__lead { margin-bottom: clamp(0.55rem, 1.8vw, 0.75rem); } @media (max-width: 767px) { .page-home .pullquote--closing .pullquote__lead { white-space: normal; } } @media (min-width: 768px) { .page-home .pullquote--closing .pullquote__lead { white-space: nowrap; } } @media (min-width: 768px) { .page-home .pullquote--closing { padding: clamp(1.35rem, 2.8vw, 1.75rem) clamp(1.5rem, 3vw, 2rem); } .page-home .pullquote--closing p { font-size: clamp(1.05rem, 1.2vw + 0.65rem, 1.35rem); } } /* What to Expect — single-column numbered timeline */ .expect-timeline { list-style: none; margin: 0; padding: 0; } .expect-step { display: flex; align-items: center; gap: clamp(1.15rem, 2.5vw, 1.5rem); position: relative; padding-bottom: clamp(1.5rem, 3.5vw, 2.125rem); } .expect-step:last-child { padding-bottom: 0; } .expect-step::before { content: ""; position: absolute; left: 1.125rem; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--line-faint) 0%, rgba(200, 198, 196, 0.35) 100%); } .expect-step:first-child::before { top: 50%; } .expect-step:last-child::before { bottom: 50%; } .expect-step__marker { flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--paper); border: 1px solid rgba(92, 114, 130, 0.3); font: 500 0.875rem/1 var(--serif); color: var(--sky); position: relative; z-index: 1; } .expect-card { flex: 1; min-width: 0; margin: 0; padding: clamp(1.75rem, 4vw, 2.35rem) clamp(1.5rem, 4vw, 2.25rem); background: var(--card-light); border: 1px solid var(--line-faint); border-radius: 8px; box-shadow: 0 2px 8px rgba(80, 80, 78, 0.04); } .expect-step--note .expect-card { background: var(--paper-elevated); border-color: rgba(92, 114, 130, 0.22); } .expect-card__title { margin: 0 0 1.125rem; padding-bottom: 1rem; font: 500 clamp(1.25rem, 2.5vw, 1.45rem)/1.25 var(--serif); color: var(--ink); border-bottom: 1px solid var(--line-faint); } .expect-step--note .expect-card__title { border-bottom-color: rgba(92, 114, 130, 0.18); } .expect-card__body { font-size: 1.0625rem; line-height: 1.8; color: var(--ink-soft); overflow-wrap: break-word; } .expect-card__body p { margin: 0 0 1.25rem; text-wrap: pretty; } .expect-card__body p:last-child { margin-bottom: 0; } .expect-cta { margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line-faint); text-align: center; } /* Prices — shared width for booking panel and cards */ .prices-layout { width: 100%; } .prices-layout .content-panel, .prices-layout .price-item { padding: clamp(1.5rem, 3.5vw, 1.85rem) clamp(1.5rem, 3vw, 1.75rem); } @media (min-width: 768px) { .prices-layout .content-panel, .prices-layout .price-item { padding: clamp(1.75rem, 3vw, 2rem) clamp(1.75rem, 3vw, 2rem); } } .prices-booking { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); } .prices-booking .prose, .prices-public .prose { max-width: none; } .prices-booking .prose p:last-child, .prices-public .prose p:last-child { margin-bottom: 0; } .prices-public { margin-top: clamp(0.875rem, 2vw, 1.25rem); } /* Prices — cards sit on muted band (see main > .section) */ .price-list { display: grid; gap: clamp(0.875rem, 2vw, 1.25rem); } @media (min-width: 768px) { .price-list { grid-template-columns: repeat(2, 1fr); } } .price-item { display: flex; flex-direction: column; height: 100%; min-width: 0; background: var(--card-light); border: 1px solid var(--line-faint); border-radius: 8px; box-shadow: 0 2px 8px rgba(80, 80, 78, 0.04); } .price-item .btn { width: 100%; margin-top: auto; } .price-item h3 { margin-bottom: 0.25rem; overflow-wrap: break-word; } .price-item > p { overflow-wrap: break-word; } .price-item__price { margin: 0.5rem 0 1rem; } .price-item__fee { font: 500 2rem/1 var(--serif); color: var(--ink); margin: 0; } /* EDIT: USD / EUR / AUD guide amounts below GBP price */ .price-item__fee-guide { margin: 0.4rem 0 0; font-size: 0.8125rem; font-style: italic; color: var(--ink-soft); overflow-wrap: break-word; } .price-item__meta { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 1rem; } /* Testimonials — three voices, same palette (not eight fonts) */ .section--testimonials { background: linear-gradient( 180deg, var(--paper) 0%, var(--paper-muted) 30%, var(--paper-muted) 70%, var(--paper) 100% ); } .testimonial-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .testimonial-list > li::after { content: ""; display: block; width: 0.3rem; height: 0.3rem; margin: clamp(1.1rem, 2.8vw, 1.5rem) auto; border-radius: 50%; background: var(--sky); opacity: 0.2; } .testimonial-list > li:last-child::after { display: none; } .testimonial-card { margin: 0; padding: clamp(1.35rem, 3.5vw, 1.75rem) clamp(1.35rem, 3.5vw, 1.75rem) clamp(1.35rem, 3.5vw, 1.75rem) clamp(1.5rem, 3.5vw, 1.85rem); background: var(--card-light); border: 1px solid var(--line-faint); border-left: 2px solid rgba(92, 114, 130, 0.38); border-radius: 8px; box-shadow: 0 2px 8px rgba(80, 80, 78, 0.04); } /* Voice 1 — italic serif, conversational */ .testimonial-card--voice-1 { background: var(--card-light); border-left-color: rgba(92, 114, 130, 0.4); } .testimonial-card--voice-1 .testimonial-card__quote::before, .testimonial-card--voice-1 .testimonial-card__quote::after { color: var(--sky); opacity: 0.34; } .testimonial-card--voice-1 .testimonial-card__quote p { font: italic clamp(1.125rem, 2.6vw, 1.3rem)/1.65 var(--serif); color: var(--ink); } /* Voice 2 — upright serif, reflective */ .testimonial-card--voice-2 { background: var(--paper-elevated); border-left-color: rgba(154, 149, 144, 0.52); } .testimonial-card--voice-2 .testimonial-card__quote::before, .testimonial-card--voice-2 .testimonial-card__quote::after { color: var(--warm); opacity: 0.4; } .testimonial-card--voice-2 .testimonial-card__quote p { font: normal clamp(1.14rem, 2.5vw, 1.32rem)/1.72 var(--serif); color: var(--ink); letter-spacing: 0.008em; } /* Voice 3 — sans, plain and direct */ .testimonial-card--voice-3 { background: var(--card-light); border-left-color: rgba(125, 145, 159, 0.48); box-shadow: 0 2px 8px rgba(80, 80, 78, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.45); } .testimonial-card--voice-3 .testimonial-card__quote::before, .testimonial-card--voice-3 .testimonial-card__quote::after { color: var(--sky-light); opacity: 0.45; font-family: var(--sans); font-weight: 400; } .testimonial-card--voice-3 .testimonial-card__quote p { font: normal 1.0625rem/1.78 var(--sans); color: var(--ink-soft); } .testimonial-card--voice-3 .testimonial-card__author { font-family: var(--serif); font-style: italic; } .testimonial-divider { display: flex; align-items: center; justify-content: center; gap: 0.875rem; } .testimonial-divider--edge { margin-bottom: clamp(1.5rem, 3.5vw, 2rem); } .testimonial-divider--bottom { margin-top: clamp(2.25rem, 5vw, 3rem); margin-bottom: 0; } .testimonials-social { margin-top: clamp(1.75rem, 4vw, 2.5rem); padding: clamp(1.5rem, 3.5vw, 2rem) clamp(1.35rem, 3vw, 1.75rem); text-align: center; background: var(--card-light); border: 1px solid var(--line-faint); border-radius: 8px; box-shadow: 0 2px 8px rgba(80, 80, 78, 0.04); } .testimonials-social__text { margin: 0 0 1.125rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); text-wrap: pretty; } .testimonials-social + .testimonials-cta { margin-top: clamp(1.75rem, 4vw, 2.5rem); } .testimonial-divider__line { flex: 1; max-width: 5.5rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(92, 114, 130, 0.28), transparent); } .testimonial-divider__dot { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--sky); opacity: 0.3; } .testimonial-card__quote { position: relative; margin: 0; padding: 0; } .testimonial-card__quote::before, .testimonial-card__quote::after { display: block; font: 500 2.25rem/1 var(--serif); } .testimonial-card__quote::before { content: "\201C"; margin-bottom: 0.35rem; } .testimonial-card__quote::after { content: "\201D"; margin-top: 0.2rem; text-align: right; font-size: 2rem; } .testimonial-card__quote p { margin: 0; text-wrap: pretty; } .testimonial-card__author { margin: 0.875rem 0 0; padding: 0; border: none; font: 400 0.9375rem/1.5 var(--sans); color: var(--ink-soft); } .testimonial-card__author::before { content: "— "; } .testimonials-cta { margin: 0; text-align: center; } /* Media page */ .section--media { padding-block: clamp(2.5rem, 6vw, 3.75rem); background: linear-gradient( 180deg, var(--paper) 0%, var(--paper-muted) 22%, var(--paper-muted) 78%, var(--paper) 100% ); } .media-divider { display: flex; align-items: center; justify-content: center; gap: 0.875rem; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); } .media-divider__line { flex: 1; max-width: 8rem; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } .media-divider__dot { flex: 0 0 0.35rem; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--sky); opacity: 0.28; } .media-list { display: flex; flex-direction: column; gap: clamp(1.5rem, 3.5vw, 2.125rem); } .media-entry { display: grid; grid-template-columns: minmax(8.5rem, 12.5rem) minmax(0, 1fr); gap: clamp(1.15rem, 3vw, 1.65rem); align-items: center; padding: clamp(1.35rem, 3.5vw, 1.75rem); background: var(--card-light); border: 1px solid var(--line-faint); border-left: 2px solid rgba(92, 114, 130, 0.38); border-radius: 8px; box-shadow: 0 2px 10px rgba(80, 80, 78, 0.045); } .media-entry__visual { position: relative; display: block; overflow: hidden; border-radius: 6px; border: 1px solid var(--line-faint); box-shadow: 0 4px 14px rgba(42, 49, 52, 0.1); text-decoration: none; } .media-entry__visual--video, .media-entry__visual--audio { aspect-ratio: 1; align-self: center; } .media-entry__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .media-entry__visual:hover .media-entry__img, .media-entry__visual:focus-visible .media-entry__img { transform: scale(1.04); } .media-entry__badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(42, 49, 52, 0.08); transition: background 0.25s ease; pointer-events: none; } .media-entry__badge-circle { position: absolute; } .media-entry__badge-icon { position: relative; z-index: 1; } .media-entry__visual:hover .media-entry__badge, .media-entry__visual:focus-visible .media-entry__badge { background: rgba(42, 49, 52, 0.2); } .media-entry__content { min-width: 0; } @media (max-width: 599px) { .media-entry { grid-template-columns: 1fr; align-items: start; } .media-entry__visual--video, .media-entry__visual--audio { width: min(100%, 11rem); margin-inline: auto; } .media-entry__btn { min-height: var(--touch); } } .media-entry:nth-child(even) { background: var(--paper-elevated); border-left-color: rgba(154, 149, 144, 0.48); box-shadow: 0 2px 10px rgba(80, 80, 78, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .media-entry__meta { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-faint); } .media-entry time { font-size: clamp(0.875rem, 2vw, 0.9375rem); font-weight: 500; letter-spacing: 0.02em; color: var(--sky); } .media-entry__show { font-size: clamp(0.9375rem, 2.1vw, 1.0625rem); font-weight: 500; line-height: 1.4; color: var(--ink-soft); } .media-entry__title { margin: 0 0 1rem; font: 500 clamp(1.28rem, 2.8vw, 1.5rem)/1.3 var(--serif); } .media-entry__title a { color: var(--ink); text-decoration: none; } .media-entry__title a:hover { color: var(--sky); } .media-entry__summary { margin: 0 0 1.35rem; max-width: 42em; font-size: 0.9875rem; line-height: 1.72; color: var(--ink-soft); text-wrap: pretty; } .media-entry__foot { margin: 0; padding-top: 0.15rem; } .media-entry__btn { min-height: 2.5rem; padding: 0.5rem 1.15rem; font-size: 0.9375rem; } /* Form */ label { display: block; font-weight: 500; color: var(--ink); margin-bottom: 0.35rem; } .field { margin-bottom: 1.25rem; } input, textarea, select { width: 100%; max-width: 100%; padding: 0.85rem 1rem; font: 1rem var(--sans); /* 16px+ avoids iOS zoom on focus */ border: 1px solid var(--mist); border-radius: 3px; background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(42, 49, 52, 0.04); } @media (min-width: 768px) { input, textarea, select { max-width: 28rem; } } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--sky); } textarea { min-height: 7rem; resize: vertical; } .form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status { margin: 0 0 1.25rem; padding: 1rem 1.15rem; border-radius: 6px; color: var(--ink); } .form-status--success { background: var(--card-light); border: 1px solid rgba(92, 114, 130, 0.28); } .form-status--error { background: var(--card-light); border: 1px solid rgba(154, 149, 144, 0.45); } .small { font-size: 0.875rem; color: var(--ink-soft); } /* Contact — shared panel style */ .contact-panel { padding: clamp(1.5rem, 3.5vw, 2rem) clamp(1.35rem, 3vw, 1.75rem); background: var(--card-light); border: 1px solid var(--line-faint); border-radius: 8px; box-shadow: 0 2px 8px rgba(80, 80, 78, 0.04); min-width: 0; } @media (min-width: 768px) { .contact-panel { padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2rem); } } .section--contact input, .section--contact textarea, .section--contact select { background: var(--paper-elevated); border: 1px solid var(--line-faint); border-radius: 6px; box-shadow: none; max-width: none; } .section--contact input:focus, .section--contact textarea:focus, .section--contact select:focus { border-color: rgba(92, 114, 130, 0.45); } @media (min-width: 768px) { .section--contact .split--2 { align-items: stretch; } } @media (min-width: 900px) { .section--contact .split--2 { grid-template-columns: 1.2fr 0.8fr; } } @media (min-width: 768px) and (max-width: 899px) { .section--contact .split--2 { grid-template-columns: 1fr; } } .contact-aside { display: flex; flex-direction: column; justify-content: flex-start; } .contact-aside__options { display: flex; flex-direction: column; gap: 2.25rem; } .contact-aside__option { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; margin: 0; } .contact-aside__lead { margin: 0; font: 1.0625rem/1.4 var(--sans); color: var(--ink); } .contact-aside__action { display: inline-flex; align-items: center; justify-content: center; min-height: 2.65rem; margin: 0; } .contact-aside__email-link { justify-content: flex-start; white-space: nowrap; max-width: 100%; font: 500 clamp(0.8125rem, 2.2vw, 0.9375rem)/1.2 var(--sans); } @media (max-width: 899px) { .contact-aside__email-link { white-space: normal; overflow-wrap: anywhere; } } .contact-aside__social { gap: 0.5rem; width: auto; padding: 0 1.1rem; border-radius: 6px; border: 1px solid transparent; font: 500 0.9375rem/1.2 var(--sans); text-decoration: none; } .contact-aside__social-icon { flex: 0 0 auto; width: 1rem; height: 1rem; } .contact-aside__social--facebook { background: #1877f2; border-color: #1877f2; color: #fff; } .contact-aside__social--facebook:hover, .contact-aside__social--facebook:focus-visible { background: #166fe5; border-color: #166fe5; color: #fff; } .contact-aside__social--instagram { background: linear-gradient(135deg, #c13584 0%, #e1306c 48%, #f77737 100%); color: #fff; } .contact-aside__social--instagram:hover, .contact-aside__social--instagram:focus-visible { background: linear-gradient(135deg, #ad2f77 0%, #d02a63 48%, #e56f32 100%); color: #fff; } @media (max-width: 479px) { .contact-aside__email-link { display: inline-block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Aside box (legacy — other pages) */ .aside-box { padding: clamp(1.5rem, 3.5vw, 1.85rem) clamp(1.25rem, 3vw, 1.5rem); background: var(--card-light); border: 1px solid var(--line-faint); border-radius: 8px; box-shadow: 0 2px 8px rgba(80, 80, 78, 0.04); } @media (min-width: 768px) { .aside-box { padding: var(--space-lg); } } .aside-box h3 { margin-bottom: 1rem; } /* About — photo left; short intro beside; main text full width below */ .about-photo { margin: 0 auto clamp(1.25rem, 3vw, 1.5rem); width: min(100%, 18rem); } .about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-faint); box-shadow: 0 2px 8px rgba(80, 80, 78, 0.04); } .about-panel__title { margin-bottom: 1rem; } .about-panel__beside { margin: 0 0 1rem; text-wrap: pretty; } .about-panel__beside:last-of-type { margin-bottom: 0; } .about-panel__body p { margin: 0 0 1rem; text-wrap: pretty; } .about-panel__body p:last-child { margin-bottom: 0; } .about-panel__details { margin-top: clamp(1.75rem, 4vw, 2.5rem); padding-top: clamp(1.5rem, 3.5vw, 2rem); border-top: 1px solid var(--line-faint); } .about-panel__details h3 { margin: 0 0 1rem; font: 500 clamp(1.2rem, 2.8vw, 1.35rem)/1.2 var(--serif); color: var(--ink); } .about-panel__details ul { margin: 0 0 1.25rem; padding-left: 1.25rem; } .about-panel__details li { margin-bottom: 0.35rem; text-wrap: pretty; } .about-panel__details p { margin: 0; } @media (min-width: 768px) { .about-panel__intro { display: grid; grid-template-columns: clamp(14rem, 30%, 20rem) 1fr; column-gap: clamp(1.5rem, 3vw, 2.25rem); row-gap: 0.875rem; align-items: start; } .about-photo { grid-column: 1; grid-row: 1 / 4; margin: 0; width: 100%; } .about-panel__title { grid-column: 2; grid-row: 1; margin-bottom: 0; } .about-panel__beside:first-of-type { grid-column: 2; grid-row: 2; margin-bottom: 0; } .about-panel__beside:last-of-type { grid-column: 2; grid-row: 3; margin-bottom: 0; } .about-panel__body { grid-column: 1 / -1; grid-row: 4; margin-top: clamp(0.5rem, 1.5vw, 1rem); padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--line-faint); } } @media (min-width: 900px) { .about-panel__intro { grid-template-columns: clamp(16rem, 32%, 22rem) 1fr; } } /* Two column */ .split { display: grid; gap: var(--space-lg); } @media (min-width: 768px) { .split--2 { grid-template-columns: 1.2fr 0.8fr; align-items: start; } } /* Footer */ .footer { margin-top: clamp(2rem, 5vw, var(--space-lg)); padding: 1.15rem 0 calc(0.9rem + env(safe-area-inset-bottom, 0)); border-top: 1px solid var(--line-faint); background: var(--paper); font-size: 0.9375rem; } .footer__main { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand socials" "nav nav"; align-items: center; gap: 0.65rem 1rem; margin-bottom: 0.65rem; } .footer__brand { grid-area: brand; margin: 0; font: 500 1rem/1.35 var(--serif); color: var(--ink); } .footer__nav { grid-area: nav; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.85rem; } .footer__nav a { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.1rem 0; color: var(--ink-soft); text-decoration: none; } @media (max-width: 639px) { .footer__nav a { min-height: var(--touch); padding: 0.35rem 0; } .footer__nav { gap: 0.5rem 1rem; } } .footer__nav a:hover, .footer__nav a:focus-visible { color: var(--ink); text-decoration: underline; } .footer .socials--footer { grid-area: socials; justify-self: end; align-self: center; } @media (min-width: 640px) { .footer__main { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav socials"; gap: 1rem 1.5rem; margin-bottom: 0.75rem; } .footer__nav { justify-content: center; } } .footer__legal { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft); word-break: break-word; } /* Legacy — other pages may still use .footer__copy / .footer__row */ .footer__row { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.65rem; } @media (min-width: 640px) { .footer__row { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; } } .footer nav { display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; } .footer nav a { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.1rem 0; color: var(--ink-soft); text-decoration: none; } .footer nav a:hover, .footer nav a:focus-visible { color: var(--ink); text-decoration: underline; } /* Social icons — shared header & footer */ .socials { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .social { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); background: var(--card-light); color: var(--ink-soft); text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .social:hover, .social:focus-visible { color: var(--sky); border-color: rgba(92, 114, 130, 0.35); background: var(--white); } .socials--testimonials .social--labeled { width: auto; min-width: auto; height: auto; min-height: 2.65rem; padding: 0 1.1rem; gap: 0.5rem; border-radius: 6px; border: 1px solid transparent; font-size: 0.9375rem; font-weight: 500; box-shadow: 0 2px 10px rgba(42, 49, 52, 0.08); } .socials--testimonials .social--facebook { background: #1877f2; border-color: #1877f2; color: #fff; } .socials--testimonials .social--facebook:hover, .socials--testimonials .social--facebook:focus-visible { background: #166fe5; border-color: #166fe5; color: #fff; box-shadow: 0 3px 14px rgba(24, 119, 242, 0.32); } .socials--testimonials .social--instagram { background: linear-gradient(135deg, #c13584 0%, #e1306c 48%, #f77737 100%); border-color: transparent; color: #fff; } .socials--testimonials .social--instagram:hover, .socials--testimonials .social--instagram:focus-visible { background: linear-gradient(135deg, #ad2f77 0%, #d02a63 48%, #e56f32 100%); color: #fff; box-shadow: 0 3px 14px rgba(225, 48, 108, 0.28); } .socials--testimonials .social--labeled .social__icon { width: 1rem; height: 1rem; opacity: 1; } .social__icon { display: block; width: 1.05rem; height: 1.05rem; flex-shrink: 0; } /* Header — smaller, blends with bar */ .socials--header { gap: 0.375rem; } .socials--header .social { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; border-color: var(--line-faint); background: transparent; color: var(--ink-soft); } .socials--header .social:hover, .socials--header .social:focus-visible { color: var(--sky); border-color: rgba(92, 114, 130, 0.3); background: rgba(248, 247, 245, 0.85); } .socials--header .social__icon { width: 0.9rem; height: 0.9rem; opacity: 0.88; } @media (min-width: 768px) { .socials--header { margin-right: 0.15rem; } } .footer__copy { color: var(--ink-soft); margin: 0; line-height: 1.5; word-break: break-word; } /* Footer socials — compact, trailing edge */ .socials--footer { gap: 0.375rem; } .socials--footer .social { width: var(--touch); height: var(--touch); min-width: var(--touch); min-height: var(--touch); border-color: var(--line-faint); background: transparent; } .socials--footer .social:hover, .socials--footer .social:focus-visible { background: var(--card-light); } .socials--footer .social__icon { width: 0.9rem; height: 0.9rem; } /* Testimonials — gap ~25% of natural button width (overrides .socials gap) */ .socials.socials--testimonials { justify-content: center; gap: 2.25rem; } @media (max-width: 480px) { .socials.socials--testimonials { flex-direction: column; gap: 0.875rem; } } /* Full-width CTAs on narrow screens */ @media (max-width: 479px) { .prose .btn, .aside-box .btn, .mt-lg .btn, .contact-panel .btn, .expect-cta .btn, .testimonials-cta .btn, .about-panel__details .btn, .page-error .btn { width: 100%; } .page-error__actions { flex-direction: column; } }