/* ========================================================= Elektrotechnik Ranalter OG — Design System Concept: "Alpine circuit" — copper wire warmth against cool granite-grey and graphite-ink, precision engineering meets a family trade business in the Stubai valley. ========================================================= */ /* Font loading moved to a in each page's — a CSS @import here would serialize the font fetch behind this file's own download instead of letting it start in parallel. */ :root{ /* --- color tokens --- */ --ink: #12191F; /* graphite-navy — header, footer, dark sections */ --ink-soft: #1D262E; /* raised panels on ink */ --paper: #EFF1EF; /* cool stone — page background */ --paper-alt: #E4E7E3; /* slightly deeper stone — alternating sections */ --card: #FBFBFA; /* card surface on paper */ --slate: #202729; /* primary body text */ --slate-mute: #5B6560; /* secondary text */ --copper: #BD5A2C; /* primary accent — CTAs, links, highlights */ --copper-dark:#98461F; /* hover / pressed */ --copper-tint:#F3E2D6; /* light copper wash for badges */ --pine: #3F5C46; /* secondary accent — used sparingly */ --line: #D6D9D4; /* borders, dividers on paper */ --line-ink: #2B343B; /* borders on ink */ --white: #FFFFFF; --danger: #B3261E; /* --- type --- */ --font-head: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; --font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; /* --- scale --- */ --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1.25rem; --space-4: 2rem; --space-5: 3.25rem; --space-6: 5.25rem; --radius-s: 3px; --radius-m: 6px; --container: 1180px; --measure: 62ch; --ease: cubic-bezier(.4,0,.2,1); } /* ========================================================= Reset ========================================================= */ *, *::before, *::after{ box-sizing: border-box; } /* Small craft details — quiet on their own, but the kind of thing that reads as "someone made deliberate choices here" rather than a template default. */ ::selection{ background: var(--copper-tint); color: var(--ink); } ::-moz-selection{ background: var(--copper-tint); color: var(--ink); } html{ scrollbar-width: thin; scrollbar-color: var(--line) var(--paper); } ::-webkit-scrollbar{ width: 10px; height: 10px; } ::-webkit-scrollbar-track{ background: var(--paper); } ::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 999px; border: 2px solid var(--paper); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover{ background: var(--copper); } /* Scrolling itself is smoothed by Lenis (js/main.js) — CSS scroll-behavior:smooth would fight it for control of the scroll position, so it's intentionally left off here; Lenis is skipped under reduced motion, leaving plain native scroll. */ html{ overflow-x: hidden; } html.lenis, html.lenis body{ height: auto; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body{ margin: 0; overflow-x: hidden; background: var(--paper); color: var(--slate); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* Long German compound words (e.g. "Gebäudebetreuung") can exceed a phone-width line box; without this they overflow their container instead of wrapping. */ overflow-wrap: break-word; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } ul, ol{ margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p, figure{ margin: 0; } button{ font: inherit; background: none; border: none; cursor: pointer; color: inherit; } input, textarea, select{ font: inherit; color: inherit; } :focus-visible{ outline: 2.5px solid var(--copper); outline-offset: 3px; } [hidden]{ display: none !important; } h1, h2, h3, h4{ font-family: var(--font-head); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.15; /* Long German compound words (e.g. "Gebäudebetreuung") can be wider than a phone-width line. Prefer a real hyphen break; overflow-wrap (set on body) is the fallback for the odd word hyphenation can't split. */ hyphens: auto; } .on-ink h1, .on-ink h2, .on-ink h3, .on-ink p{ color: var(--white); } h1{ font-size: clamp(2.3rem, 1.7rem + 2.6vw, 3.6rem); } h2{ font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.35rem); } h3{ font-size: 1.25rem; } .eyebrow{ display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-head); font-size: 0.95rem; font-weight: 600; /* --copper measures ~4:1 on paper — under the 4.5:1 AA floor for text this size. --copper-dark clears ~5.7:1. */ color: var(--copper-dark); margin-bottom: var(--space-2); } .eyebrow::before{ content: ""; width: 20px; height: 2px; background: var(--copper); display: inline-block; } /* On dark sections, copper-dark would go the wrong way (less contrast against near-black) — use the light copper tint instead, which clears >14:1 on ink. */ .on-ink .eyebrow{ color: var(--copper-tint); } .lede{ font-size: 1.1rem; color: var(--slate-mute); max-width: var(--measure); } /* ========================================================= Layout helpers ========================================================= */ .wrap{ max-width: var(--container); margin-inline: auto; padding-inline: var(--space-3); /* Lets .wrap shrink below its content's intrinsic width when it's a flex item (e.g. inside .hero) — otherwise a flex child defaults to min-width: auto and a long unbreakable word forces the whole box past the viewport. */ min-width: 0; } section{ padding-block: var(--space-6); } @media (max-width: 720px){ section{ padding-block: var(--space-5); } } .section-head{ max-width: 44rem; margin-bottom: var(--space-5); } .on-paper-alt{ background: var(--paper-alt); } .on-ink{ background: var(--ink); } .grid{ display: grid; gap: var(--space-4); } .grid-2{ grid-template-columns: 1fr 1fr; } .grid-3{ grid-template-columns: repeat(3, 1fr); } .grid-4{ grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px){ .grid-3{ grid-template-columns: repeat(2, 1fr); } .grid-4{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } } /* ========================================================= Buttons ========================================================= */ .btn{ display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; padding: 0.85em 1.5em; border-radius: var(--radius-s); border: 1.5px solid transparent; transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), transform 150ms var(--ease); min-height: 44px; cursor: pointer; } /* A small hover grow instead of following the cursor — barely there, no JS. */ .btn-primary:hover, .btn-outline:hover{ transform: scale(1.03); } .btn:active{ transform: scale(1.03) translateY(1px); } .btn-primary{ background: var(--copper); color: var(--white); } .btn-primary:hover{ background: var(--copper-dark); } .btn-outline{ border-color: currentColor; color: var(--ink); } .btn-outline:hover{ background: var(--ink); color: var(--white); } .on-ink .btn-outline, .hero-content .btn-outline{ color: var(--white); } .on-ink .btn-outline:hover, .hero-content .btn-outline:hover{ background: var(--white); color: var(--ink); } .btn-ghost{ /* copper-dark for the same AA-contrast reason as .eyebrow above */ color: var(--copper-dark); padding: 0; border: none; border-bottom: 1.5px solid transparent; border-radius: 0; min-height: unset; /* Inside .service-card's column flex, a child stretches to the full card width by default (align-items isn't set, so it defaults to stretch) — that's what was pulling the underline out past the text. This keeps the link (and its border-bottom) sized to its own content instead. */ align-self: flex-start; } /* border-bottom-color, not border-color — .btn's base rule puts a (transparent) border on all four sides, so setting border-color here would light up a full box instead of the underline this is meant to be. */ .btn-ghost:hover{ border-bottom-color: var(--copper); } /* A boxy focus outline on a small text link like this reads as heavy-handed — reuse the hover underline instead, and let the parent .service-card's :focus-within (below) carry the "you're inside this section" signal. */ .btn-ghost:focus-visible{ outline: none; border-bottom-color: var(--copper); } .btn svg{ width: 18px; height: 18px; flex-shrink: 0; } /* ========================================================= Header ========================================================= */ .site-header{ position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--line); } .site-header .wrap{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: 0.9rem; } .brand{ display: flex; align-items: center; gap: 0.65rem; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); white-space: nowrap; } .brand .mark{ width: 36px; height: 36px; flex-shrink: 0; } .brand .mark path{ fill: var(--copper); } .brand .name-full{ display: block; } .brand .name-line2{ display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.68rem; color: var(--slate-mute); letter-spacing: 0.02em; } .main-nav{ display: flex; align-items: center; gap: var(--space-4); } .main-nav ul{ display: flex; gap: var(--space-3); font-family: var(--font-head); font-weight: 500; font-size: 0.96rem; } .main-nav a{ position: relative; padding: 0.4rem 0.1rem; color: var(--slate); transition: color 180ms var(--ease); } .main-nav a::after{ content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--copper); transition: right 220ms var(--ease); } .main-nav a:hover{ color: var(--ink); } .main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ right: 0; } .main-nav a[aria-current="page"]{ color: var(--ink); } .header-actions{ display: flex; align-items: center; gap: var(--space-2); } .lang-toggle{ display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; } .lang-toggle button{ font-family: var(--font-head); font-size: 0.78rem; font-weight: 700; padding: 0.32rem 0.65rem; border-radius: 999px; color: var(--slate-mute); min-height: unset; } .lang-toggle button[aria-pressed="true"]{ background: var(--ink); color: var(--white); } .call-chip{ display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--ink); border: 1.5px solid var(--line); border-radius: 999px; padding: 0.5rem 0.9rem 0.5rem 0.6rem; transition: border-color 180ms var(--ease), color 180ms var(--ease), transform 150ms var(--ease); } .call-chip svg{ width: 17px; height: 17px; color: var(--copper); } .call-chip:hover{ border-color: var(--copper); transform: scale(1.03); } .nav-toggle{ display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: var(--radius-s); transition: border-color 180ms var(--ease), transform 150ms var(--ease); } .nav-toggle:hover{ transform: scale(1.05); } .nav-toggle svg{ width: 20px; height: 20px; } .call-icon-btn{ display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: var(--radius-s); color: var(--copper); transition: border-color 180ms var(--ease), transform 150ms var(--ease); } .call-icon-btn:hover{ border-color: var(--copper); transform: scale(1.05); } .call-icon-btn svg{ width: 19px; height: 19px; } @media (max-width: 940px){ .main-nav{ position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); height: 100dvh; background: var(--ink); flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 5.5rem var(--space-3) var(--space-3); transform: translateX(100%); transition: transform 280ms var(--ease); overflow-y: auto; } .main-nav.is-open{ transform: translateX(0); } .main-nav ul{ flex-direction: column; gap: 0; font-size: 1.2rem; margin-bottom: var(--space-4); } .main-nav ul a{ display: block; padding: 0.85rem 0.1rem; color: var(--white); border-bottom: 1px solid var(--line-ink); } .main-nav ul a::after{ display: none; } .main-nav ul a[aria-current="page"]{ color: var(--copper-tint); } /* on ink — see .on-ink .eyebrow note */ /* On mobile the header only needs the wordmark, a call icon and the menu button — the language toggle moves into the drawer, and the phone number collapses to an icon, so both are hidden here to keep the bar uncluttered. */ .header-actions .lang-toggle, .header-actions .call-chip{ display: none; } /* Wordmark back at the left (matching desktop) — the base .wrap flex rule with justify-content:space-between already puts it there and the icons at the right, so no grid/centering trick is needed here at all. It still needs to shrink a little: at full desktop size, the wordmark plus the two icon buttons don't both fit at 320px. */ .site-header .wrap{ /* The base 20px gap is a flex minimum, not a cap — space-between will happily overflow the container rather than compress it below that, which clipped the menu button a few pixels off-screen at 320px. */ gap: 0.75rem; } .site-header .wrap > .brand{ font-size: 0.85rem; gap: 0.45rem; } .site-header .wrap > .brand .mark{ width: 30px; height: 30px; } /* Subtitle line stays off on mobile to keep the header a single row — the full company name is the part that matters here. */ .site-header .wrap > .brand .name-line2{ display: none; } .header-actions{ gap: 0.3rem; } .call-icon-btn, .nav-toggle{ width: 34px; height: 34px; } .main-nav .lang-toggle{ align-self: flex-start; border-color: var(--line-ink); margin-top: auto; } .main-nav .lang-toggle button{ color: rgba(255,255,255,0.6); } .main-nav .lang-toggle button[aria-pressed="true"]{ background: var(--copper); color: var(--white); } .call-icon-btn, .nav-toggle{ display: inline-flex; } .nav-scrim{ position: fixed; inset: 0; background: rgba(10,14,17,0.5); opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease); z-index: 55; } .nav-scrim.is-open{ opacity: 1; pointer-events: auto; } } @media (min-width: 941px){ .main-nav .mobile-only{ display: none; } } /* ========================================================= Hero ========================================================= */ .hero{ position: relative; color: var(--white); min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; } .hero-page{ min-height: 46vh; } .hero-media{ position: absolute; inset: 0; z-index: 0; } .hero-media img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1400ms cubic-bezier(.16,.6,.2,1); } .hero-media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,25,31,0.55) 0%, rgba(18,25,31,0.55) 40%, rgba(18,25,31,0.94) 100%); } .hero-content{ position: relative; z-index: 1; padding: var(--space-4); margin-block: var(--space-5) var(--space-4); max-width: 42rem; background: rgba(15, 20, 25, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-m); } .hero-content h1, .hero-content h2, .hero-content h3, .hero-content p{ color: var(--white); } .hero-content p.lede{ color: rgba(255,255,255,0.82); margin-top: var(--space-2); } .hero-actions{ display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); } /* ========================================================= Cards / Services ========================================================= */ .service-card{ position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); } /* Spotlight that tracks the cursor (js/main.js sets --mx/--my) — contained to the card itself, not a page-wide effect, and quiet enough to go unnoticed until someone's pointer is actually resting on the card. */ .service-card::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(189, 90, 44, 0.09), transparent 70%); opacity: 0; transition: opacity 300ms var(--ease); pointer-events: none; } .service-card:hover::before{ opacity: 1; } .service-card:hover, .service-card:focus-within{ border-color: var(--copper); box-shadow: 0 1px 0 var(--copper); } .service-icon{ width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--radius-s); background: var(--copper-tint); color: var(--copper); } .service-icon svg{ width: 24px; height: 24px; } .service-card h3{ font-size: 1.1rem; } .service-card p{ color: var(--slate-mute); font-size: 0.96rem; } .service-card .btn-ghost{ margin-top: auto; font-size: 0.92rem; } .service-detail{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: stretch; padding-block: var(--space-4); border-top: 1px solid var(--line); } .service-detail:last-child{ border-bottom: 1px solid var(--line); } .service-detail:nth-child(even) .service-detail-media{ order: 2; } .service-detail-body{ display: flex; flex-direction: column; justify-content: center; } .service-detail-media img{ border-radius: var(--radius-m); object-fit: cover; width: 100%; height: 100%; min-height: 22rem; max-height: 34rem; } .service-detail-heading{ display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .service-detail-heading .service-icon{ flex-shrink: 0; } .service-detail-body ul{ margin-top: var(--space-2); display: grid; gap: 0.55rem; } .service-detail-body li{ display: flex; gap: 0.6em; color: var(--slate-mute); font-size: 0.97rem; } .service-detail-body li svg{ width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.15em; color: var(--pine); } @media (max-width: 760px){ .service-detail{ grid-template-columns: 1fr; } .service-detail:nth-child(even) .service-detail-media{ order: 0; } .service-detail-media img{ height: auto; aspect-ratio: 4/3; min-height: 0; max-height: none; } } /* ========================================================= Process (genuine sequence — numbering justified here) ========================================================= */ .process-list{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); counter-reset: step; } .process-item{ position: relative; padding-top: var(--space-3); border-top: 2px solid var(--line-ink); } .process-item .num{ font-family: var(--font-head); font-size: 0.95rem; font-weight: 700; color: var(--copper-tint); /* on ink — plain --copper measures ~3.9:1 here, under AA */ display: block; margin-bottom: 0.6rem; } .process-item h3{ margin-bottom: 0.4rem; } .process-item p{ color: rgba(255,255,255,0.68); font-size: 0.95rem; } @media (max-width: 900px){ .process-list{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .process-list{ grid-template-columns: 1fr; } } /* ========================================================= USP list / About ========================================================= */ .usp-list{ display: grid; grid-template-columns: 10.5rem 1fr; column-gap: var(--space-3); row-gap: var(--space-3); margin-top: var(--space-4); } .usp-item{ display: contents; } .usp-item h3, .usp-item p{ padding-top: var(--space-3); border-top: 1px solid var(--line); } .usp-item:first-child h3, .usp-item:first-child p{ padding-top: 0; border-top: none; } @media (max-width: 560px){ .usp-list{ grid-template-columns: 1fr; row-gap: 0; } .usp-item h3{ padding-top: var(--space-3); margin-bottom: 0.3rem; } .usp-item p{ padding-top: 0; border-top: none; } .usp-item:first-child h3{ padding-top: 0; } } .usp-item .n{ font-family: var(--font-head); font-weight: 700; color: var(--copper); font-size: 0.95rem; flex-shrink: 0; width: 2.1rem; } .usp-item h3{ font-size: 1.05rem; margin-bottom: 0.25rem; } .usp-item p{ color: var(--slate-mute); font-size: 0.96rem; } .split{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: stretch; } .split img{ border-radius: var(--radius-m); width: 100%; height: 100%; min-height: 22rem; max-height: 32rem; object-fit: cover; } @media (max-width: 820px){ .split{ grid-template-columns: 1fr; gap: var(--space-4); } .split img{ height: auto; aspect-ratio: 5/4; min-height: 0; max-height: none; } } .quote-block{ border-left: 3px solid var(--copper); padding-left: var(--space-3); max-width: 40rem; } .quote-block p{ font-family: var(--font-head); font-size: 1.3rem; color: var(--ink); font-weight: 500; } .quote-block cite{ display: block; margin-top: var(--space-2); font-style: normal; color: var(--slate-mute); font-size: 0.92rem; } /* ========================================================= Clients / trust logos ========================================================= */ .client-row{ display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; padding-block: var(--space-3); } .client-tile{ font-family: var(--font-head); font-weight: 600; color: var(--slate-mute); font-size: 1.05rem; opacity: 0.75; letter-spacing: 0.01em; } .logo-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .logo-tile{ display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4); min-height: 9rem; transition: border-color 180ms var(--ease), transform 150ms var(--ease); } .logo-tile:hover{ border-color: var(--copper); transform: scale(1.02); } .logo-tile img{ max-width: 100%; max-height: 3.6rem; width: auto; height: auto; filter: grayscale(1); opacity: 0.8; transition: filter 220ms var(--ease), opacity 220ms var(--ease); } .logo-tile:hover img{ filter: grayscale(0); opacity: 1; } @media (max-width: 760px){ .logo-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px){ .logo-grid{ grid-template-columns: 1fr; } } /* ========================================================= CTA band ========================================================= */ .cta-band{ display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; } .cta-band .actions{ display: flex; gap: var(--space-2); flex-wrap: wrap; } /* ========================================================= Footer ========================================================= */ .site-footer{ padding-block: var(--space-5) var(--space-4); } .footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line-ink); } .footer-grid h4{ color: rgba(255,255,255,0.55); font-size: 0.82rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.03em; margin-bottom: var(--space-2); } .footer-grid ul{ display: grid; gap: 0.6rem; } .footer-grid a, .footer-grid p{ color: rgba(255,255,255,0.82); font-size: 0.95rem; } .footer-grid a:hover{ color: var(--copper-tint); } /* on ink */ .footer-brand p{ color: rgba(255,255,255,0.6); font-size: 0.92rem; margin-top: var(--space-2); max-width: 26rem; } .footer-bottom{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-3); color: rgba(255,255,255,0.5); font-size: 0.85rem; } @media (max-width: 820px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 520px){ /* Stacked to one column, the four groups (brand + three link lists) ran straight into each other with only a small heading between them — add a rule and breathing room so each group reads as its own block. */ .footer-grid{ grid-template-columns: 1fr; gap: var(--space-4); } .footer-grid > div:not(.footer-brand){ padding-top: var(--space-4); border-top: 1px solid var(--line-ink); } .footer-grid h4{ margin-bottom: var(--space-3); } } /* ========================================================= Forms (Kontakt) ========================================================= */ .contact-grid{ display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-5); align-items: start; } @media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } } .info-card{ background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4); display: grid; gap: var(--space-3); } .info-row{ display: flex; gap: var(--space-2); align-items: flex-start; } .info-row svg{ width: 22px; height: 22px; color: var(--copper); flex-shrink: 0; margin-top: 0.15em; } .info-row h3{ font-size: 0.98rem; margin-bottom: 0.15rem; } .info-row a, .info-row p{ color: var(--slate-mute); font-size: 0.96rem; } .info-row a:hover{ color: var(--copper-dark); } .field{ display: grid; gap: 0.4rem; margin-bottom: var(--space-3); } .field label{ font-weight: 600; font-size: 0.92rem; color: var(--ink); } .field .hint{ font-size: 0.82rem; color: var(--slate-mute); } .field input, .field textarea, .field select{ border: 1.5px solid var(--line); border-radius: var(--radius-s); padding: 0.75em 0.9em; background: var(--card); min-height: 46px; transition: border-color 180ms var(--ease); } .field textarea{ min-height: 140px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--copper); } .field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } @media (max-width: 560px){ .field-row{ grid-template-columns: 1fr; } } .checkbox-field{ display: flex; gap: 0.6em; align-items: flex-start; } .checkbox-field input{ margin-top: 0.3em; min-height: unset; width: 18px; height: 18px; accent-color: var(--copper); } .checkbox-field label{ font-weight: 400; font-size: 0.9rem; color: var(--slate-mute); } .form-note{ display: none; margin-top: var(--space-2); padding: 0.85em 1em; border-radius: var(--radius-s); background: var(--copper-tint); color: var(--copper-dark); font-size: 0.9rem; } .form-note.is-visible{ display: block; } .map-frame{ border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; height: 340px; } .map-frame iframe{ width: 100%; height: 100%; border: 0; filter: grayscale(0.15) contrast(1.02); } .service-area-list{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-2); } .service-area-list li{ border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.88rem; color: var(--slate-mute); } /* ========================================================= Misc ========================================================= */ .skip-link{ position: absolute; left: -999px; top: 0; background: var(--copper); color: var(--white); padding: 0.8em 1.2em; z-index: 100; border-radius: 0 0 var(--radius-s) 0; } .skip-link:focus{ left: 0; } .badge-row{ display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-3); } .badge{ display: inline-flex; align-items: center; gap: 0.5em; border: 1px solid var(--line-ink); color: rgba(255,255,255,0.85); border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.85rem; } .on-paper .badge{ border-color: var(--line); color: var(--slate-mute); } .badge svg{ width: 16px; height: 16px; color: var(--copper); } /* ========================================================= Scroll reveal — one quiet fade + rise per section as it enters view, paired with the smoothed scroll in js/main.js. Deliberately restrained: a single move per section, not a staggered cascade. ========================================================= */ .reveal{ opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); } .reveal.is-visible{ opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; transition: none; } }