/* =========================================================================== Saul O'Grady — clean, light, minimalist portfolio. Build: v15 main-level-route-transition Original identity preserved: white background, black text, Outfit type, spinning logo, red accent (#e7131a). Polish, not gimmicks. =========================================================================== */ :root { --bg: #ffffff; --bg-soft: #fafafa; --ink: #111111; --ink-soft: #555555; --ink-dim: #888888; --line: #e6e6e6; --accent: #e7131a; --accent-ink:#c10f15; --radius: 6px; --maxw: 820px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } /* ---------- Root overflow lock (v15) ---------- Lock the horizontal axis on BOTH html and body. On mobile the scroll container is , so locking only let the page drift. */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { position: relative; font-family: 'Outfit', sans-serif; margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-size: 18px; font-weight: 300; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; } /* Belt-and-braces: no primary structural element may exceed the viewport. */ .content-wrapper, header, .header-inner, main, section, .container, .contact-form, .contact-form form, .iframe-container, .track-list, .social-links, nav, nav ul { max-width: 100%; min-width: 0; } img { display: block; max-width: 100%; } a { color: var(--accent-ink); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--accent); } h2 { font-size: 2rem; font-size: clamp(1.7rem, 4.5vw, 2.4rem); font-weight: 600; margin: 0 0 .5rem; letter-spacing: -0.01em; } h3 { font-weight: 500; margin: 0 0 .75rem; } p { margin: 0 0 1rem; color: var(--ink-soft); } h2:focus, section:focus { outline: none; } /* ---------- Skip link: hidden until focused ---------- */ .skip-link { position: absolute; left: 0; top: 0; transform: translateY(-120%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 1000; font-weight: 500; transition: transform .2s var(--ease); } .skip-link:focus { transform: translateY(0); color: #fff; } /* ---------- Visually-hidden honeypot ---------- */ .hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Focus states ---------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* ---------- Layout ---------- */ .content-wrapper { width: 100%; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 32px 22px; text-align: center; } /* ---------- Header / nav ---------- v15: pure block + inline-block. NO flexbox, NO gap, NO sticky, NO backdrop-filter, NO @supports anywhere in the header/nav. Old iOS Safari can falsely pass @supports(display:flex) yet render flex centering/wrap badly, which clipped the nav to fragments ("ne", "Mus"). Block layout is bulletproof. */ header { position: relative; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); } .header-inner { display: block; width: 100%; max-width: 100%; padding: 18px 10px 16px; text-align: center; } .logo-container { display: block; width: 118px; height: 118px; margin: 0 auto 14px; text-align: center; } .logo { display: block; width: 126px; /* plain fallback for old iOS Safari */ height: 126px; object-fit: contain; /* v15: CSS-ONLY vertical-axis (rotateY) spin — the original working model. No JavaScript involvement, so it cannot be left static by a JS spinner that fails to paint. Prefixed declarations for mobile WebKit / iOS Safari. */ transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; backface-visibility: visible; -webkit-backface-visibility: visible; animation: sog-logo-original-axis-spin-v15 5s linear infinite; -webkit-animation: sog-logo-original-axis-spin-v15 5s linear infinite; } .logo-container:hover .logo { animation-duration: 2.5s; -webkit-animation-duration: 2.5s; } /* v15: slightly larger, fluid logo where clamp() is supported (modern browsers). Old iOS Safari keeps the 118px plain fallback above. */ @supports (width: clamp(1px, 2vw, 3px)) { .logo { width: clamp(126px, 17vw, 140px); height: clamp(126px, 17vw, 140px); } } @keyframes sog-logo-original-axis-spin-v15 { from { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); } to { transform: rotateY(360deg); -webkit-transform: rotateY(360deg); } } @-webkit-keyframes sog-logo-original-axis-spin-v15 { from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } to { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } /* v15: nav is pure block / inline-block. No flex anywhere — guaranteed correct on old iOS Safari. Spacing comes from li margins only. */ nav { display: block; width: 100%; text-align: center; } nav ul { display: block; list-style: none; margin: 0; padding: 0; text-align: center; } nav li { display: inline-block; margin: 0 7px 8px; vertical-align: top; } .nav-link { display: inline-block; white-space: nowrap; padding: 6px 4px; color: var(--ink-soft); font-weight: 500; letter-spacing: .02em; position: relative; transition: color .2s var(--ease); } .nav-link::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); } .nav-link:hover { color: var(--ink); } .nav-link.active-link { color: var(--ink); } .nav-link.active-link::after { transform: scaleX(1); } /* ---------- Sections / routing ---------- v15: sections are visible by DEFAULT (fail-open). The router adds `.routing-ready` to ONLY after it has successfully activated a valid section. Inactive sections are hidden only under .routing-ready, so if JS fails or never runs, every section stays visible and the body is never blank. */ .content { display: block; } /* v15: route transition is animated on #main (which NEVER changes display), not on the section itself. Animating an element while its `display` toggles is unreliable on mobile Safari (the transition gets skipped). #main fades/moves out, the active section is swapped via display while #main is hidden, then #main fades back in. Vertical-only, no native smooth-scroll dependency. */ .routing-ready .content { display: none; } .routing-ready .content.active { display: block; } .routing-ready #main { opacity: 1; transform: translateY(0); transition: opacity 220ms ease, transform 220ms ease; will-change: opacity, transform; } .routing-ready #main.route-leaving, .routing-ready #main.route-entering { opacity: 0; transform: translateY(8px); pointer-events: none; } /* ---------- Home ---------- */ #home .container { max-width: 680px; padding-top: 48px; padding-bottom: 56px; } .lede { text-transform: uppercase; letter-spacing: .14em; font-weight: 500; color: var(--ink); font-size: .9rem; font-size: clamp(.85rem, 2.4vw, 1rem); margin-bottom: 1.25rem; } .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; } /* ---------- Buttons ---------- */ .btn { /* v15: compact, proportionate to type — no oversized pill buttons. */ display: inline-block; padding: 0.55rem 1.05rem; border-radius: var(--radius); font-weight: 600; font-size: 0.92rem; line-height: 1.2; letter-spacing: .02em; cursor: pointer; border: 1px solid transparent; transition: transform .18s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-ink); color: #fff; transform: translateY(-2px); } .btn-ghost { background: #fff; color: var(--ink); border-color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: #fff; transform: translateY(-2px); } /* ---------- Compact track list / custom player (v15) ---------- A slim track list, not big cards. Native