/* Funda Run studio tweaks, layered last over the Glacier export. Hand edits live here so the vendored design files stay pristine. */ /* Eyebrow dash — ~40% longer (16px → 22px) and a touch thicker for presence. */ .eyebrow .tick { width: 22px; height: 2px; } /* "Why Red Feather" card icons (Brandon invests too / Happiness Guarantee). The tiles are borderless, so only the icon reads — size it up. */ .why-card .why-ic { width: 52px; height: 52px; justify-items: start; } .why-card .why-ic svg, .why-card .why-ic .lucide { width: 34px; height: 34px; } /* "Why local" list icons (snowflake / droplets / bird / map-pin) — +40%. Base sizing is font-relative (svg.lucide { width: 1em }), so set explicit px. */ .why-local-item .lucide { width: 22px; height: 22px; } /* Worry → solution comparison table — the ? (problem) and ✓ (solution) icons +50%. */ .ps-problem .lucide, .ps-solution .lucide { width: 24px; height: 24px; } /* Question-mark icons: 15% smaller than the green checks, with a light-red tonal fill inside the ring (disc sized to the smaller circle; strokes paint on top). */ .ps-problem .lucide { width: 20px; height: 20px; background: radial-gradient(circle 8.5px at 50% 50%, oklch(94% 0.045 27) 0 8.5px, transparent 8.5px); } /* Footer column links — subtle slide-right on hover so they feel interactive. */ .footer-col a { transition: color 0.15s ease, transform 0.18s ease; } .footer-col a:hover { transform: translateX(6px); } /* Thin 1px ring around the cursor dot (positioned + faded by glacier-cursor.js). */ #glacier-cursor-ring { position: fixed; top: 0; left: 0; z-index: 2147483646; width: 20px; height: 20px; border-radius: 50%; border: 1px solid oklch(57% 0.236 27); /* brand red */ pointer-events: none; visibility: hidden; will-change: transform, opacity; } /* Over clickable elements: hide the custom cursor (dot + ring) and let the native hand pointer show through (text cursor for fields). The `cursor-over-link` class is toggled on by the Layout init script; the per-element cursor overrides beat the global `cursor: none`. */ html.cursor-over-link #glacier-cursor, html.cursor-over-link #glacier-cursor-ring { opacity: 0 !important; } html.glacier-cursor-on :is(a, button, [role="button"], .btn, label, summary, select) { cursor: pointer !important; } /* Children of clickables (e.g. the FAQ "+" svg) also get the hand, so the global `* { cursor: none }` doesn't leave the icon with no visible cursor. */ html.glacier-cursor-on :is(a, button, [role="button"], .btn, summary) * { cursor: pointer !important; } html.glacier-cursor-on :is(input, textarea) { cursor: text !important; } /* Eyebrow label text — bumped up from 0.75rem; it read too small. */ .eyebrow { font-size: 0.9375rem; } /* "The problem" card icons (phone / clock / trending-down). The SVGs carry an inline 24px size, so !important is needed to enlarge them. */ .problem-ic .lucide { width: 32px !important; height: 32px !important; } /* Flush the icon to the card's left edge. The .problem-ic grid box is wider than the glyph and defaults to justify-items:center, which drifted the icon ~14px right of the heading/body text below it. start aligns it like .why-ic. */ .problem-ic { justify-items: start; } /* "Book a discovery call" connect-step icons (calendar / chat / file) — larger. */ .cp-item .lucide { width: 22px; height: 22px; } /* Hero trust-row icons (map-pin / clock / shield-check) — sized up from ~16px. */ .hero-trust-item .lucide { width: 22px; height: 22px; } /* Service-card list checks — larger and green (matches the comparison-table ✓). */ .svc-list .lucide { width: 22px; height: 22px; color: oklch(60% 0.17 148); } /* Center the check vertically with its row now that it's larger. */ .svc-list li { align-items: center; } /* "What's included" pill-chip icons (badge-check / monitor / message / file) — a touch bigger. */ .included-chip .lucide { width: 20px; height: 20px; } /* ─── Mobile h1 sizing — h1 tags only ─────────────────────────────────────── Client feedback: page h1s are too large on phones (the hero "Property management by an investor, for investors." overflows / clips). Desktop sizing is unchanged — these only shrink the h1s at narrow widths. Scope is deliberately h1-only: .display and .h2 are also used on non-h1 elements, so we qualify with the tag to leave those untouched. Hero (.hero-title) desktop size lives here now too — it was previously an inline `font-size: 79px` on the element, which no media query could override. ───────────────────────────────────────────────────────────────────────── */ h1.hero-title { font-size: 79px; } /* Tablet portrait and below: ~32% smaller hero, ~25% smaller page titles. */ @media (max-width: 768px) { h1.hero-title { font-size: 54px; } h1.h2 { font-size: 1.875rem; } /* 40px → 30px */ } /* Phones: hero down ~42% from desktop so the four-word headline never clips. */ @media (max-width: 430px) { h1.hero-title { font-size: 46px; } h1.h2 { font-size: 1.75rem; } /* → 28px */ } /* ─── Mobile hero — stop horizontal overflow / clipping ───────────────────── On phones the hero collapses to one column, but the media's image-slot has an intrinsic ~460px width and the grid items keep min-width:auto, so the column can't shrink below 460px. That pushes content past a ~375px screen, and .hero { overflow:hidden } clips the right edge (image + badge cut off). Fix: let the grid items shrink (min-width:0) and the media go fluid so the image scales down to the viewport. Then center the "owner-operated" badge — it was anchored right:18px to the 460px media and fell off-screen — so it sits fully within the now-fluid image. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .hero-grid > * { min-width: 0; } .hero-media { max-width: 100%; } .hero-media image-slot { width: 100%; } .hero-badge { left: 50%; right: auto; transform: translateX(-50%); /* Explicit width because the card is absolutely positioned and would otherwise shrink to its content. max-width override lifts the base .hero-badge 270px cap; min() keeps the card inside the viewport so it can't re-introduce clipping. 292px ≈ 15% narrower than the earlier 343px (which read too wide on phones). */ width: min(292px, calc(100vw - 32px)); max-width: min(292px, calc(100vw - 32px)); } } /* ─── Mobile nav — logo mark only ─────────────────────────────────────────── In the burger/mobile nav state the "Red Feather / Property Management" wordmark crowds the Get-started button and burger. Hide just the wordmark text and keep the monogram. Scoped to .brand > span so the mobile sheet's own .brand-name (a different element) is unaffected. Matches the 880px breakpoint where the burger nav takes over. */ @media (max-width: 880px) { .brand > span { display: none; } } /* ─── Mobile eyebrows & list icons ────────────────────────────────────────── List icons sit in flex rows with the default flex-shrink:1, so when a row's text wraps the icon gets compressed: the why-local icons render ~14px wide (not their set 22px), and one green service check squished to 18px while its siblings stayed 22px. flex-shrink:0 locks each icon to its set size so the set is uniform; sizes are bumped for legibility on phones. Row alignment is unchanged (why-local stays top-aligned, checks stay vertically centered). */ @media (max-width: 600px) { /* Eyebrow labels — a touch larger on phones. */ .eyebrow { font-size: 1.0625rem; } /* 15px → 17px */ /* Red why-local icons (snowflake / droplets / bird / map-pin) — +25%. */ .why-local-item .lucide { width: 28px; height: 28px; flex-shrink: 0; } /* Green service checks — uniform size & weight, a little larger (22 → 24). */ .svc-list .lucide { width: 24px; height: 24px; flex-shrink: 0; } /* FAQ toggle "+" — matches the 44px desktop size (base rule in redfeather-sections.css) so the tap affordance is equally prominent on phones. !important to beat the icon's inline size (same reason as .problem-ic above); flex-shrink:0 keeps it square. */ .faq-q svg { width: 44px !important; height: 44px !important; flex-shrink: 0; } } /* "Now booking" status pill — it's a flex item in .fc-head and was getting squished, wrapping "Now booking" onto two lines (and looking condensed). Keep it on one line and let it hold its intrinsic width; the heading beside it absorbs the difference. */ .fc-head .tag-signal { flex-shrink: 0; white-space: nowrap; } /* Mobile menu close "✕" — big, strong, sharp-cornered. 27px (another +30% over 21). stroke-width drops 3.5 → 2.7 to hold the same visual line thickness at the larger size (thickness scales with the icon, so a bigger icon needs a smaller stroke number to look identical). square caps + miter joins give the hard, non-rounded corners. #sheet only renders in the mobile sheet, so no breakpoint is needed. */ #sheet-close svg { width: 27px; height: 27px; stroke-width: 2.7; stroke-linecap: square; stroke-linejoin: miter; } /* Mobile sheet header — R monogram (white) in place of the "Red Feather" wordmark. The project has no white/SVG R (the .svg logos are the wordmark), so the red PNG monogram is recolored to white with a filter; it's a solid silhouette, so this renders clean. */ .nav-sheet-top .sheet-brand-mark { /* Match the header monogram exactly (56×35.4 @ 20,17.3) so the R doesn't jump when the menu opens — it superimposes over the closed-state red R. width matches the header; translate cancels the sheet's extra container padding (x: 40→20) and the flex-centering offset (y: 23→17). */ width: 56px; height: auto; filter: brightness(0) invert(1); transform: translate(-20px, -6px); } /* ─── Form field focus & error states (mobile + desktop) ──────────────────── Was blue (--signal) for both focus and error. Now brand red, as a crisp 2px line — 1px border + a 1px box-shadow ring (no layout shift) — with identical geometry for both states so only the colour changes: • Focus → --brand-red-bright (the luminous "you're typing here" red) • Error → a faded red tint (set on submit via .field-error) A focused errored field shows the bright focus red (it's where the cursor is) thanks to the higher-specificity :focus rule below. */ .field-error .input { border-color: color-mix(in oklch, var(--brand-red) 60%, white); box-shadow: 0 0 0 1px color-mix(in oklch, var(--brand-red) 60%, white); } .input:focus, .field-error .input:focus { border-color: var(--brand-red-bright); box-shadow: 0 0 0 1px var(--brand-red-bright); } /* Error message text — red instead of the old blue, for consistency. */ .err-msg { color: var(--brand-red); } /* ─── Anchor-link scroll offset (mobile) ──────────────────────────────────── The nav is position:sticky (71px). Jumping to a section from the menu (#services, #process, …) landed the section at y=0, so the sticky header covered its red eyebrow — worst on #services/#faq, which have no top padding and were fully clipped. scroll-padding-top stops anchor jumps ~25px below the header, so each section reads as: whitespace, eyebrow, then headline. */ @media (max-width: 880px) { html { scroll-padding-top: 6rem; } } /* ─── Wired-in generated photos ───────────────────────────────────────────── Replace the old placeholders. Shapes match the originals: Brandon a 4:5 rounded card with hairline + shadow; testimonial avatars are 60px circles. object-fit: cover crops cleanly to the target aspect. */ .about-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow-md); } .quote-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* Hero portrait (replaces the hero image-slot). Matches the slot: 556px tall, rounded, hairline + shadow. Image is already B&W, so no grayscale filter. */ .hero-media .hero-photo { display: block; width: 100%; height: 556px; object-fit: cover; border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow-md); }