/* ===================================================================== TERRALUME SURFACES — enhance.css Additive premium refinement layer. Loads IMMEDIATELY AFTER style.css and BEFORE any page-scoped css, so it refines existing classes by load order without renaming or removing anything. Rules of engagement: - Brand palette + existing tokens only (--charcoal/--accent/--muted/ --cream(--light) + --s-*, --r-*, --sh-*). No new colours invented. - Refines existing components by their existing class names. - Adds a small set of clearly-named NEW premium components for authors. - Responsive, AA-contrast, focus-safe, prefers-reduced-motion safe. ===================================================================== */ /* --------------------------------------------------------------------- 0 · REFINED TOKENS (extend the system — names are additive, never overwrite the brand palette; we add elevated shadows + motion easing) --------------------------------------------------------------------- */ :root{ /* Layered, agency-grade elevation built on the warm brand shadow hue. Used by the refined components below; existing --sh-* untouched. */ --sh-soft: 0 1px 1px rgba(20,24,26,.04), 0 4px 12px rgba(20,24,26,.05); --sh-card: 0 2px 4px rgba(20,24,26,.05), 0 10px 28px rgba(20,24,26,.08); --sh-lift: 0 6px 14px rgba(20,24,26,.07), 0 24px 56px rgba(20,24,26,.14); --sh-float: 0 10px 24px rgba(20,24,26,.10), 0 36px 80px rgba(20,24,26,.20); /* Hairline tints for crisp, premium separations */ --hair: rgba(20,24,26,.08); --hair-soft: rgba(20,24,26,.05); --hair-dark: rgba(244,241,234,.14); --ease-out: cubic-bezier(.22,.61,.36,1); --ease-soft: cubic-bezier(.33,.86,.42,1); } /* --------------------------------------------------------------------- 1 · TYPE SYSTEM — a more confident hierarchy & rhythm --------------------------------------------------------------------- */ /* Headings: optical balance + slightly tighter, more deliberate tracking. text-wrap:balance keeps multi-line heads from leaving orphans. */ h1,h2,h3{ text-wrap:balance; } h1{ letter-spacing:-.022em; line-height:1.05; } h2{ letter-spacing:-.016em; line-height:1.1; } h3{ letter-spacing:-.01em; } /* Body copy: refine the reading measure and rag for long-form prose. */ p{ text-wrap:pretty; } .lead{ letter-spacing:-.004em; line-height:1.58; text-wrap:pretty; } .measure{ max-width:64ch; } .measure-tight{ max-width:54ch; } /* NEW utility: a tighter, punchier measure */ /* Eyebrow: crisper, slightly more presence; the accent rule reads as a deliberate index mark rather than a stray dash. */ .eyebrow{ letter-spacing:.16em; font-weight:700; } .eyebrow::before{ width:26px; height:2px; border-radius:2px; opacity:.95; } /* Section heads: more generous breathing room beneath the rule, and a confident max-measure so display heads don't run edge-to-edge. */ .section-head{ max-width:760px; } .section-head h2{ margin-bottom:var(--s-5); } .section-head .lead{ max-width:62ch; } .section-head.center .lead{ margin-inline:auto; } /* --------------------------------------------------------------------- 2 · SPACING RHYTHM — more generous, premium vertical cadence --------------------------------------------------------------------- */ .section{ padding-block:clamp(72px, 7.5vw, 124px); } .section--tight{ padding-block:clamp(52px, 5.5vw, 92px); } /* A touch more air between a section head and the content that follows. */ .section-head{ margin-bottom:clamp(40px, 4.5vw, 72px); } /* Slightly wider, calmer grid gutters for a high-end feel. */ .grid{ gap:clamp(20px, 2.2vw, 32px); } .quotes{ gap:clamp(20px, 2.2vw, 32px); } /* --------------------------------------------------------------------- 3 · DIVIDERS — crisp, refined section separations --------------------------------------------------------------------- */ /* A whisper-fine top hairline gives paper/light sections a precise edge when they sit against each other (only between same-tone neighbours). */ .section--paper + .section--paper, .section--light + .section--light{ position:relative; } .section--paper + .section--paper::before, .section--light + .section--light::before{ content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:min(100% - var(--margin)*2, var(--container)); height:1px; background:var(--hair-soft); } /* --------------------------------------------------------------------- 4 · BUTTONS — refined weight, motion & primary spark --------------------------------------------------------------------- */ .btn{ letter-spacing:.012em; transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out); } .btn:hover{ box-shadow:var(--sh-lift); } .btn--primary{ box-shadow:0 6px 18px rgba(216,88,0,.22); } .btn--primary:hover{ box-shadow:0 12px 30px rgba(216,88,0,.34); transform:translateY(-2px); } .btn--charcoal:hover{ box-shadow:0 12px 30px rgba(20,24,26,.28); } /* Ghost buttons firm up into a confident outline on hover. */ .btn--ghost:hover{ --bd:var(--charcoal); box-shadow:var(--sh-soft); } /* --------------------------------------------------------------------- 5 · CARDS / SERVICES — layered elevation & calmer hover --------------------------------------------------------------------- */ .card{ border-color:var(--hair); box-shadow:var(--sh-card); transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out); } .card:hover{ transform:translateY(-6px); box-shadow:var(--sh-float); border-color:rgba(20,24,26,.12); } /* Service image: a hairline scrim seam at the foot of the photo grounds the card and lets the tag read on busy stone imagery. */ .svc__img::after{ content:""; position:absolute; inset:auto 0 0 0; height:38%; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(20,24,26,.12)); } .svc__tag{ box-shadow:0 2px 10px rgba(20,24,26,.18); } .svc__body h3{ letter-spacing:-.012em; } /* Icon cards: the icon chip warms toward the accent on hover for a tasteful, restrained moment of life. */ .card--icon .card__icon{ transition:background .4s var(--ease-out), color .4s var(--ease-out); } .card:hover .card__icon{ background:rgba(255,106,0,.12); color:var(--accent-600); } /* --------------------------------------------------------------------- 6 · STAT BAND — deeper, framed, with a hairline accent top edge --------------------------------------------------------------------- */ .stat-band{ box-shadow:var(--sh-lift); position:relative; isolation:isolate; background:linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal-700) 100%); } /* a fine orange seam across the very top — a signature spark, <8% area */ .stat-band::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:1; background:linear-gradient(90deg, transparent, rgba(255,106,0,.85) 50%, transparent); } .stat{ border-left-color:var(--hair-dark); transition:background .35s var(--ease-out); } .stat:hover{ background:rgba(255,255,255,.03); } .stat__num{ letter-spacing:-.025em; } .stat__label{ letter-spacing:.005em; } /* --------------------------------------------------------------------- 7 · SPLIT — refined media framing --------------------------------------------------------------------- */ .split__media img{ box-shadow:var(--sh-lift); border:1px solid var(--hair); } .split__body h2{ letter-spacing:-.016em; } /* --------------------------------------------------------------------- 8 · GALLERY — crisper frames, smoother reveal --------------------------------------------------------------------- */ .gallery__item{ box-shadow:var(--sh-card); } .gallery__item:hover{ box-shadow:var(--sh-float); } .gallery__cap small{ color:#FFB985; } /* --------------------------------------------------------------------- 9 · QUOTES / REVIEWS — editorial quote mark + lift --------------------------------------------------------------------- */ .quote{ box-shadow:var(--sh-card); border-color:var(--hair); position:relative; } .quote:hover{ box-shadow:var(--sh-lift); transform:translateY(-4px); } .quote blockquote{ letter-spacing:-.005em; } .reviews-soon{ box-shadow:var(--sh-card); border-color:var(--hair); } /* --------------------------------------------------------------------- 10 · FAQ — precise hairlines, refined hover affordance --------------------------------------------------------------------- */ .faq__item{ border-bottom-color:var(--hair); } .faq__item summary{ transition:color .25s var(--ease-out); letter-spacing:-.01em; } .faq__item summary:hover{ color:var(--accent-600); } .faq__item summary:hover .faq__icon{ border-color:var(--accent); } .section--dark .faq__item summary:hover, .section--charcoal .faq__item summary:hover{ color:#fff; } /* --------------------------------------------------------------------- 11 · CTA BAND — richer depth & framed glow --------------------------------------------------------------------- */ .cta-band{ box-shadow:var(--sh-float); } .cta-band::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(900px 320px at 12% 120%, rgba(255,106,0,.10), transparent 60%); } .cta-band h2{ letter-spacing:-.018em; } /* --------------------------------------------------------------------- 12 · PAGE HERO (interior) — deeper field, refined head --------------------------------------------------------------------- */ .page-hero h1{ letter-spacing:-.022em; line-height:1.04; } .page-hero .lead{ line-height:1.58; } /* A soft vignette deepens the corners so the dot-grid reads as texture, not noise, and the headline gains contrast (AA-safe). */ .page-hero::after{ opacity:.9; } /* --------------------------------------------------------------------- 13 · HERO (home) — marginally calmer, more cinematic motion --------------------------------------------------------------------- */ .hero h1{ letter-spacing:-.03em; } .hero__chip{ box-shadow:var(--sh-float); border:1px solid rgba(255,255,255,.5); } /* --------------------------------------------------------------------- 14 · DIAGRAM / VIDEO FIGURES — premium framed surfaces --------------------------------------------------------------------- */ .diagram-figure{ box-shadow:var(--sh-lift); border-color:var(--hair); } .video-frame{ box-shadow:var(--sh-float); } .video-cap{ letter-spacing:.005em; } /* --------------------------------------------------------------------- 15 · BLEND CARDS — consistent elevation language --------------------------------------------------------------------- */ .blend-card{ border-color:var(--hair); box-shadow:var(--sh-card); transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out); } .blend-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-float); } .blend-card figcaption strong{ letter-spacing:-.005em; } /* --------------------------------------------------------------------- 16 · FOOTER — crisper hairlines --------------------------------------------------------------------- */ .footer-grid{ border-bottom-color:var(--hair-dark); } .footer-social a{ transition:transform .35s var(--ease-out), background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out); } /* --------------------------------------------------------------------- 17 · TRUST STRIP — refine the existing strip (sits in style.css) --------------------------------------------------------------------- */ .trust-strip .tbadge{ letter-spacing:.005em; } .trust-strip .tbadge svg{ color:var(--accent-600); } /* ===================================================================== 18 · NEW PREMIUM COMPONENTS (for page authors) All built only from existing tokens. Documented in the report. ===================================================================== */ /* --- 18.1 · .figure-stat — a refined standalone metric block ---------
15mm min pedestrian depth
*/ .figure-stat{ display:flex; flex-direction:column; gap:6px; padding:var(--s-6) var(--s-6); background:var(--white); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--sh-card); transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out); } .figure-stat:hover{ transform:translateY(-4px); box-shadow:var(--sh-lift); } .figure-stat__num{ font-family:var(--font-display); font-weight:900; font-size:clamp(2rem, 1.4rem + 1.6vw, 2.75rem); line-height:1; letter-spacing:-.025em; color:var(--charcoal); } .figure-stat__num .u{ color:var(--accent-600); font-size:.5em; vertical-align:.18em; margin-left:2px; font-weight:900; } .figure-stat__label{ font-size:var(--fs-body-s); color:var(--muted); line-height:1.45; } .section--dark .figure-stat,.section--charcoal .figure-stat{ background:var(--charcoal-700); border-color:var(--hair-dark); } .section--dark .figure-stat__num,.section--charcoal .figure-stat__num{ color:#fff; } .section--dark .figure-stat__label,.section--charcoal .figure-stat__label{ color:var(--muted-on-dark); } /* --- 18.2 · .callout — an editorial pull/note block with accent rule - Variants: .callout--accent (warm tint), .callout--quote (large pull) */ .callout{ position:relative; padding:var(--s-6) var(--s-6) var(--s-6) var(--s-7); background:var(--white); border:1px solid var(--hair); border-radius:var(--r-md); box-shadow:var(--sh-soft); color:var(--ink); line-height:1.6; } .callout::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--charcoal); } .callout--accent{ background:rgba(255,106,0,.055); border-color:rgba(255,106,0,.22); } .callout--accent::before{ background:var(--accent); } .callout p{ color:var(--muted); } .callout p + p{ margin-top:var(--s-3); } .callout strong{ color:var(--ink); font-weight:600; } .section--dark .callout,.section--charcoal .callout{ background:rgba(244,241,234,.05); border-color:var(--hair-dark); color:#E7E8EA; } .section--dark .callout p,.section--charcoal .callout p{ color:var(--muted-on-dark); } .section--dark .callout strong,.section--charcoal .callout strong{ color:#fff; } /* --- 18.3 · .quote-block — a large editorial pull quote (NOT a review)
“…”
— attribution
*/ .quote-block{ margin:0; max-width:30ch; } .quote-block blockquote{ margin:0; font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); line-height:1.22; letter-spacing:-.018em; color:var(--ink); position:relative; } .quote-block blockquote::before{ content:"\201C"; color:var(--accent); font-family:var(--font-display); font-weight:900; font-size:1.1em; line-height:0; margin-right:.04em; vertical-align:-.1em; } .quote-block figcaption{ margin-top:var(--s-4); font-family:var(--font-body); font-size:var(--fs-body-s); font-weight:600; letter-spacing:.04em; color:var(--sage); text-transform:uppercase; } .section--dark .quote-block blockquote,.section--charcoal .quote-block blockquote{ color:#fff; } .section--dark .quote-block figcaption,.section--charcoal .quote-block figcaption{ color:var(--sage-soft); } /* --- 18.4 · .feature-row — a clean horizontal feature with index/icon -
01

…

…

Stack several inside a .feature-list for a tidy ledger of points. */ .feature-list{ display:grid; gap:var(--s-2); } .feature-row{ display:flex; gap:var(--s-5); align-items:flex-start; padding:var(--s-5) var(--s-5); border-radius:var(--r-md); transition:background .3s var(--ease-out); } .feature-row + .feature-row{ border-top:1px solid var(--hair); } .feature-row:hover{ background:rgba(20,24,26,.025); } .feature-row__mark{ flex:0 0 auto; min-width:42px; height:42px; padding:0 10px; display:grid; place-items:center; border-radius:var(--r-md); font-family:var(--font-display); font-weight:900; font-size:1.05rem; line-height:1; letter-spacing:-.02em; color:var(--charcoal); background:rgba(20,24,26,.06); border:1px solid var(--hair); } .feature-row__body{ flex:1; } .feature-row__body h3{ font-size:var(--fs-h4); font-weight:700; margin-bottom:5px; letter-spacing:-.01em; } .feature-row__body p{ color:var(--muted); font-size:var(--fs-body-s); line-height:1.55; } .section--dark .feature-row + .feature-row,.section--charcoal .feature-row + .feature-row{ border-top-color:var(--hair-dark); } .section--dark .feature-row:hover,.section--charcoal .feature-row:hover{ background:rgba(255,255,255,.04); } .section--dark .feature-row__mark,.section--charcoal .feature-row__mark{ background:rgba(255,255,255,.08); color:#fff; border-color:var(--hair-dark); } .section--dark .feature-row__body p,.section--charcoal .feature-row__body p{ color:var(--muted-on-dark); } /* --- 18.5 · .spec-list — a tidy two-column key/value spec table -------
Aggregate
Rounded ~2–5 mm
…
*/ .spec-list{ margin:0; display:grid; gap:0; border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--white); box-shadow:var(--sh-soft); overflow:hidden; } .spec-list > div{ display:grid; grid-template-columns:minmax(120px,38%) 1fr; gap:var(--s-5); padding:var(--s-4) var(--s-6); align-items:baseline; } .spec-list > div + div{ border-top:1px solid var(--hair-soft); } .spec-list dt{ font-size:var(--fs-caption); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sage); margin:0; } .spec-list dd{ margin:0; font-weight:600; color:var(--ink); font-size:var(--fs-body-s); line-height:1.5; } .spec-list dd .u{ color:var(--accent-600); font-weight:700; } .section--dark .spec-list,.section--charcoal .spec-list{ background:var(--charcoal-700); border-color:var(--hair-dark); } .section--dark .spec-list > div + div,.section--charcoal .spec-list > div + div{ border-top-color:var(--hair-dark); } .section--dark .spec-list dt,.section--charcoal .spec-list dt{ color:var(--sage-soft); } .section--dark .spec-list dd,.section--charcoal .spec-list dd{ color:#fff; } /* --- 18.6 · .badge — a small standalone label/chip -------------------- Permeable over WSUD base Variants: .badge--accent, .badge--solid, .badge--ghost */ .badge{ display:inline-flex; align-items:center; gap:.5em; padding:5px 12px; border-radius:var(--r-pill); font-family:var(--font-body); font-size:var(--fs-caption); font-weight:600; letter-spacing:.02em; line-height:1.2; background:rgba(20,24,26,.06); color:var(--charcoal); border:1px solid var(--hair); } .badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--sage); } .badge--accent{ background:rgba(255,106,0,.10); color:var(--accent-600); border-color:rgba(255,106,0,.26); } .badge--accent::before{ background:var(--accent); box-shadow:0 0 0 3px rgba(255,106,0,.18); } .badge--solid{ background:var(--charcoal); color:#fff; border-color:transparent; } .badge--solid::before{ background:var(--accent); } .badge--ghost{ background:transparent; } .section--dark .badge,.section--charcoal .badge{ background:rgba(255,255,255,.08); color:#fff; border-color:var(--hair-dark); } /* --- 18.7 · .divider — a refined labelled or plain section rule -------
or
or
*/ .divider{ display:flex; align-items:center; gap:var(--s-4); color:var(--sage); font-size:var(--fs-caption); letter-spacing:.12em; text-transform:uppercase; font-weight:600; margin-block:var(--s-6); } .divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--hair); } .divider:empty::after{ display:none; } /* plain rule when no label */ .divider--accent::before,.divider--accent::after{ background:linear-gradient(90deg, transparent, var(--hair) 18%, var(--hair) 82%, transparent); } .section--dark .divider,.section--charcoal .divider{ color:var(--sage-soft); } .section--dark .divider::before,.section--dark .divider::after, .section--charcoal .divider::before,.section--charcoal .divider::after{ background:var(--hair-dark); } /* --- 18.8 · .panel — a soft framed content surface (lighter than card)
…
.panel--inset for a recessed paper tone */ .panel{ background:var(--white); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--sh-soft); padding:clamp(20px,3vw,36px); } .panel--inset{ background:var(--light); box-shadow:none; } .section--dark .panel,.section--charcoal .panel{ background:var(--charcoal-700); border-color:var(--hair-dark); color:#E7E8EA; } .section--dark .panel--inset,.section--charcoal .panel--inset{ background:var(--charcoal-900); } /* ===================================================================== 19 · TASTEFUL ENTRANCE MICRO-MOTION (CSS only, reduced-motion safe) Opt-in via .reveal on any element. A single, restrained first-paint rise; never blocks content (animation-fill 'both' + safe fallback). ===================================================================== */ @keyframes tlRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } } @keyframes tlFade{ from{ opacity:0; } to{ opacity:1; } } .reveal{ animation:tlRise .7s var(--ease-out) both; } .reveal--fade{ animation:tlFade .8s var(--ease-out) both; } /* small, deliberate stagger helpers */ .reveal.d1{ animation-delay:.08s; } .reveal.d2{ animation-delay:.16s; } .reveal.d3{ animation-delay:.24s; } .reveal.d4{ animation-delay:.32s; } .reveal.d5{ animation-delay:.40s; } /* ===================================================================== 20 · ACCESSIBILITY & MOTION SAFETY ===================================================================== */ @media (prefers-reduced-motion:reduce){ .reveal,.reveal--fade{ animation:none !important; opacity:1 !important; transform:none !important; } .figure-stat:hover,.blend-card:hover,.quote:hover,.card:hover{ transform:none !important; } .btn:hover,.btn--primary:hover{ transform:none !important; } } /* Keep the keyboard focus ring crisp on the new interactive-ish surfaces. */ .feature-row:focus-visible,.figure-stat:focus-visible,.panel:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:var(--r-md); } /* ===================================================================== 21 · RESPONSIVE refinements for the new components ===================================================================== */ @media (max-width:720px){ .spec-list > div{ grid-template-columns:1fr; gap:4px; padding:var(--s-4) var(--s-5); } .quote-block{ max-width:none; } .feature-row{ gap:var(--s-4); padding:var(--s-4); } }