/* ========================================================================= Gøtuútirøkt — custom styles Handles what the Tailwind Play CDN can't cleanly do inline: smooth scrolling, scroll-reveal animation classes, keyframes, fluid type helpers, and a few visual fine-tunings. Design tokens (colors / fonts) live in the inline tailwind.config inside each HTML ; the raw hex values are mirrored here as CSS custom properties so non-Tailwind rules below stay in sync. ========================================================================= */ :root { --moss: #2f5d3a; /* primary deep forest green */ --pine: #234a2d; /* darker green (headers/footers) */ --fern: #3f7029; /* CTA accent — white text = 5.90:1 (WCAG AA) */ --fern-deep: #33571f; /* CTA hover — darker than --fern; white = 8.32:1 */ --bark: #6b4f3a; /* warm earth brown */ --clay: #b07a4b; /* secondary warm accent */ --cream: #f7f4ec; /* soft off-white background */ --stone: #efe9dc; /* slightly deeper stone background */ --sand: #e6dcc6; /* warm sand for cards/borders */ --charcoal: #26231d; /* warm near-black text */ --charcoal-soft: #4a463d; } /* --- Base / typography niceties --------------------------------------- */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Contain the brief horizontal overflow from translateX scroll-reveal animations (e.g. the service cards) so no horizontal scrollbar appears at narrow widths. `clip` does NOT create a scroll container, so the sticky header keeps working; `hidden` is the fallback for older engines. */ overflow-x: hidden; overflow-x: clip; } /* Optical sizing + subtle softening for the Fraunces display serif */ .font-serif { font-optical-sizing: auto; } /* Fluid display sizes used on hero / big headings. Tailwind classes handle most sizing; these give smoother scaling. */ .fluid-display { font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem); line-height: 1.04; letter-spacing: -0.015em; } .fluid-h2 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.9rem); line-height: 1.1; letter-spacing: -0.01em; } /* Comfortable reading measure for long-form prose blocks */ .measure { max-width: 65ch; } /* --- Decorative bits -------------------------------------------------- */ /* Small leaf-stroke accent rule under section eyebrows */ .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; font-size: 0.78rem; } .eyebrow::before { content: ""; width: 1.75rem; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.65; } /* Soft natural shadow used on lifted cards/images */ .shadow-natural { box-shadow: 0 1px 2px rgba(38, 35, 29, 0.04), 0 12px 30px -12px rgba(35, 74, 45, 0.28); } .shadow-natural-lg { box-shadow: 0 2px 4px rgba(38, 35, 29, 0.05), 0 28px 60px -20px rgba(35, 74, 45, 0.34); } /* Subtle grain/paper feel on cream sections without an image asset */ .bg-paper { background-color: var(--cream); background-image: radial-gradient(circle at 1px 1px, rgba(107, 79, 58, 0.05) 1px, transparent 0); background-size: 22px 22px; } /* Gentle hover lift for interactive cards (GPU friendly) */ .lift { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .lift:hover { transform: translateY(-6px); } /* Image zoom-on-hover wrapper (clip the overflow) */ .media-zoom { overflow: hidden; } .media-zoom img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .media-zoom:hover img { transform: scale(1.06); } /* --- Hero overlay gradient (legible white text over photo) ------------ */ .hero-scrim { background: linear-gradient( 180deg, rgba(20, 38, 24, 0.55) 0%, rgba(20, 38, 24, 0.30) 40%, rgba(20, 38, 24, 0.62) 100% ); } /* --- Scroll-reveal (driven by IntersectionObserver in main.js) -------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } /* Directional variants */ .reveal-left { transform: translateX(-30px); } .reveal-right { transform: translateX(30px); } .reveal-left.is-visible, .reveal-right.is-visible { transform: none; } /* On narrow phones, the horizontal slide-in (translateX) of the directional reveals briefly pushes content past the right edge — at 375px (the most common phone width) this flashes a ~10px horizontal scrollbar mid-animation that `overflow-x: clip` on can't fully contain. Below 480px we drop the X-axis translate entirely and reveal vertically instead (matching the base `.reveal` feel), so nothing is ever pushed past the horizontal edge. `.is-visible` still resets to `transform: none` via the rule above, and the reduced-motion block below still wins (it uses `!important`). */ @media (max-width: 480px) { .reveal-left, .reveal-right { transform: translateY(26px); } } /* If JS is disabled or motion reduced, never hide content */ .no-js .reveal, .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; } .lift, .media-zoom img { transition: none !important; } .lift:hover { transform: none; } .media-zoom:hover img { transform: none; } } /* --- Subtle ambient keyframe used on a hero accent leaf --------------- */ @keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } .animate-sway { transform-origin: bottom center; animation: sway 6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .animate-sway { animation: none; } } /* --- Focus visibility (consistent, accessible) ------------------------ */ :focus-visible { outline: 3px solid var(--fern); outline-offset: 2px; border-radius: 4px; } /* Dark sections: lighten the focus ring for contrast */ .on-dark :focus-visible { outline-color: #cfe3c2; } /* Skip link */ .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--pine); color: #fff; padding: 0.75rem 1.1rem; border-radius: 0.6rem; font-weight: 600; transition: top 0.2s ease; } .skip-link:focus { top: 1rem; } /* --- Mobile menu animation ------------------------------------------- */ .mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .mobile-menu.open { max-height: 30rem; } @media (prefers-reduced-motion: reduce) { .mobile-menu { transition: none; } } /* Hamburger -> X morph */ .hamburger span { display: block; height: 2px; width: 24px; background: currentColor; border-radius: 2px; transition: transform 0.3s ease, opacity 0.2s ease; } .hamburger span + span { margin-top: 6px; } [aria-expanded="true"] .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } [aria-expanded="true"] .hamburger span:nth-child(2) { opacity: 0; } [aria-expanded="true"] .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* --- Language toggle active state ------------------------------------ */ .lang-btn[aria-pressed="true"] { background: var(--cream); color: var(--pine); } .on-dark .lang-btn[aria-pressed="true"] { background: #cfe3c2; color: var(--pine); } /* --- Gallery masonry (CSS columns; graceful, no JS needed) ----------- */ .masonry { column-gap: 1.25rem; } .masonry > * { break-inside: avoid; margin-bottom: 1.25rem; } @media (min-width: 640px) { .masonry { column-count: 2; } } @media (min-width: 1024px) { .masonry { column-count: 3; } } /* --- Lightbox -------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(20, 28, 20, 0.88); opacity: 0; transition: opacity 0.3s ease; } .lightbox.open { display: flex; opacity: 1; } .lightbox img { max-width: min(92vw, 1100px); max-height: 86vh; border-radius: 0.9rem; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); } @media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } } /* --- Form niceties --------------------------------------------------- */ .field-input { transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .field-input:focus { border-color: var(--moss); box-shadow: 0 0 0 3px rgba(63, 112, 41, 0.20); outline: none; } /* Invalid field state (set by js/main.js on a failed submit). */ .field-input.is-invalid { border-color: #b3261e; background-color: #fdf3f2; } .field-input.is-invalid:focus { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18); } /* A shown inline error message. */ .field-error.is-shown { display: block; } /* Form-level status banner variants (shown by js/main.js). */ [data-form-status].is-shown { display: block; } [data-form-status].is-error { border-color: #f1c4c0; background-color: #fdf3f2; color: #8a1d17; } [data-form-status].is-info { border-color: var(--sand); background-color: var(--stone); color: var(--charcoal); } /* Success after a sent enquiry — mossy/positive, on-brand. The deep pine text on the pale green tint stays well above WCAG AA for body text. */ [data-form-status].is-success { border-color: #bcd4ad; background-color: #eef4e6; color: #234a2d; } /* Honeypot anti-spam field — visually hidden, off-screen, not display:none so bots that skip hidden fields still fill it. */ .hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Print: hide chrome */ @media print { header, footer, .no-print { display: none !important; } body { background: #fff; color: #000; } }