/* ALMAVIVA — shared layer on top of the design's own inline styles. Kept deliberately small: the visual design lives in Ana's Claude Design exports, this file only adds what a real website needs and the canvas cannot express. */ @import url('/assets/css/fonts.css'); :root { color-scheme: light; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Anchored sections must clear the sticky header. */ :target { scroll-margin-top: 110px; } [id] { scroll-margin-top: 110px; } img, svg, video { max-width: 100%; } img { height: auto; } /* Keyboard focus — the design defines none. */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #A8501F; outline-offset: 3px; border-radius: 3px; } /* Skip link, injected by the build. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: #3A4429; color: #F4EFE6; padding: 12px 20px; font: 600 14px/1 'Mulish', sans-serif; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* Current page in the navigation. */ nav a[aria-current="page"] { color: #A8501F; } /* --- Phone layout ------------------------------------------------------- The design is laid out for a 1440px canvas and uses two-column grids in several places. Below 760px those become single column so nothing is squeezed or clipped. */ @media (max-width: 760px) { header nav { gap: 14px !important; row-gap: 8px !important; font-size: 14px; } header nav a { font-size: 13.5px !important; } /* Content columns, tagged at build time from computed styles. */ .dc-cols { grid-template-columns: 1fr !important; } /* Headlines sized for the 1440px canvas must be allowed to wrap. */ .dc-nowrap { white-space: normal !important; } h1, h2, h3, h4, p, li, blockquote { white-space: normal !important; } /* The design already sets overflow-x: clip on html/body. Do not add overflow-x: hidden here — on it creates a scroll container and breaks window scrolling and the sticky header. */ /* Decorative absolutely-positioned blobs can overflow on narrow screens. */ section { overflow-x: clip; } } @media (max-width: 900px) { .dc-cols[data-cols="3"], .dc-cols[data-cols="4"] { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { h1 { font-size: clamp(26px, 8vw, 34px) !important; } h2 { font-size: clamp(22px, 6.5vw, 30px) !important; } } /* --- Print --------------------------------------------------------------- */ @media print { header, footer, .skip-link { display: none !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; } body { background: #fff !important; } }