/* ============================================================ shoulder.css — Shoulder Physio Inner West. Loaded AFTER site.css, so it inherits every token and can override them on :root. That is the whole mechanism of this file. 🚨 site.css IS NOT TO BE TOUCHED. site-src/ep/build.mjs pins LITERAL LINE NUMBERS in it (ACCOUNTED, 13 entries, highest 401), so adding or removing a single line there fails the EP build with "literal colour(s) ep.css does not account for". Every visual difference on this site is achieved from here. ── WHY THIS SITE LOOKS DIFFERENT ────────────────────────────── The shared site.css is deep navy + a cyan/blue gradient + Space Grotesk headings + glass cards, and all nine niche sites run it. That is the right default and it is also why they read as one template. This site departs on three axes and no others: 1. PALETTE — surgical petrol green, not navy. A real reference (theatre drapes) rather than a hue picked to be different, and nothing else in the network is green. Ink moves from cold blue-white to warm bone. One signal colour, a precise coral, used only for measurement marks and the primary action. 2. TYPE ROLE — the display face becomes Instrument Serif ITALIC, and Space Grotesk drops to eyebrows, data and buttons. No new font file: the three families are self-hosted and the page loads nothing external on purpose (an external font is render-blocking on a page that has to rank). Swapping which family carries the headings changes the personality more than a fourth family would. 3. SIGNATURE — the goniometer arc. Range of movement is measured in degrees on an arc, which is true of a shoulder in a way it is not of a knee or a back, and measurement is what this clinic sells. Drawn in CSS: no image, no JS, nothing to load. ⚠️ Everything else is left exactly as site.css has it. The boldness is spent in one place on purpose. ============================================================ */ :root { /* ---- surface: theatre petrol, not navy ---- */ --navy: #06201d; --navy-2: #0a2b27; --navy-3: #0f3833; --navy-line: #174942; /* ---- ink: warm bone, so the page reads clinical rather than cold ---- */ --ink: #f1ece1; --ink-muted: rgba(241,236,225,0.62); --ink-faint: rgba(241,236,225,0.38); /* ---- signal: one colour, used sparingly ---- Coral against petrol is a near-complementary pair, so it carries the eye with very little of it on the page. It marks measurement and the primary action and nothing else. --cyan/--blue are overridden rather than left unused because site.css references them in ~20 rules. */ --cyan: #ff7a58; --cyan-soft: #ffa88f; --blue: #e8543a; --accent-grad: linear-gradient(100deg, #ff7a58, #e8543a); /* ---- jade, for the quiet data accents site.css spends --green on ---- */ --green: #5ec9a6; --border: rgba(241,236,225,0.10); --border-strong: rgba(241,236,225,0.20); --glass: rgba(241,236,225,0.035); --glass-2: rgba(241,236,225,0.06); --shadow-card: 0 26px 64px -32px rgba(0,0,0,0.8); --shadow-glow: 0 0 64px -14px rgba(255,122,88,0.38); /* Arc geometry, so the signature is tunable from one place. */ --arc-w: 2px; --arc-tick: rgba(241,236,225,0.22); } /* 🚨 THREE LITERAL NAVIES IN site.css THAT THE :root OVERRIDE CANNOT REACH. site.css's own opening rule is "tokens only, no literal colours", and it breaks that rule in exactly three places — `rgba(10,20,48,…)` hardcoded on the sticky header, the hero stat chip and the video play button. Overriding --navy does nothing to them, so on the first pass this site rendered a petrol page under a navy header: it read as a leftover strip of another site rather than as a design. ⚠️ Fixing it AT SOURCE would mean editing site.css, which shifts the line numbers site-src/ep/build.mjs pins (ACCOUNTED, 13 entries) and fails the EP build. So they are restated here in petrol at the same alphas. If a fourth literal ever appears in site.css it will show up the same way: as a navy element on a green page. */ .site-header { background: rgba(6,32,29,0.72); } .hero-media .float-stat { background: rgba(6,32,29,0.70); } .video-facade .play span { background: rgba(6,32,29,0.60); } /* ── TYPE ────────────────────────────────────────────────────── The role swap. site.css sets h1–h4 to --font-display (Space Grotesk) with tight negative tracking; here the serif carries them and the tracking relaxes, because a tightly-tracked italic serif reads as a mistake rather than a decision. */ h1, h2, h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; line-height: 1.02; } h1 { font-size: clamp(44px, 6.4vw, 82px); } h2 { font-size: clamp(32px, 3.9vw, 50px); } h3 { font-size: clamp(21px, 1.8vw, 26px); } /* h4 stays on the sans — it is used for team names and small card titles, where an italic serif at 18px is harder to scan, not more characteristic. */ h4 { font-family: var(--font-display); font-style: normal; letter-spacing: -0.01em; } /* The gradient word in the hero. site.css paints it with --accent-grad; the serif needs a shade more weight to hold the fill at display size. */ .grad-text { font-weight: 400; } /* Eyebrows keep Space Grotesk and gain a calibration tick, so the utility face now reads as instrument labelling rather than as the headline face shrunk down. */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--cyan); } .eyebrow::before { content: ""; width: 26px; height: var(--arc-w); background: currentColor; opacity: 0.55; flex: 0 0 auto; } /* Lead paragraphs carry the serif's companion italic for one clause only (site.css's .serif), which is already in the markup. Nothing to add. */ /* ── SIGNATURE: the goniometer arc ───────────────────────────── A quarter-arc with calibration ticks, sitting behind the section heading. It is a range-of-movement diagram reduced to its two useful parts: the sweep, and the marks along it. Drawn with a conic-gradient ring and a repeating-conic-gradient for the ticks, both masked to an annulus. Composited, no layout cost, and it animates on transform only. */ .section-head { position: relative; } .section-head > .eyebrow { position: relative; z-index: 1; } .section-head::before { content: ""; position: absolute; left: -18px; top: -74px; width: 190px; height: 190px; pointer-events: none; border-radius: 50%; /* the sweep: 96° of arc, fading out along its length */ background: conic-gradient(from 186deg, var(--cyan) 0deg, rgba(255,122,88,0.30) 62deg, transparent 96deg), repeating-conic-gradient(from 186deg, var(--arc-tick) 0deg 0.5deg, transparent 0.5deg 8deg); -webkit-mask: radial-gradient(circle, transparent 61%, #000 61.6%, #000 68%, transparent 68.6%); mask: radial-gradient(circle, transparent 61%, #000 61.6%, #000 68%, transparent 68.6%); opacity: 0.9; transform: rotate(-4deg); } /* ⚠️ A TEXT-ONLY HERO LEFT THE RIGHT HALF OF THE PAGE EMPTY. The team and contact pages use the hero layout with no media column, so at desktop the h1 ran to about 800px and then nothing sat beside it — roughly a third of the fold was dead space. The home page does not show it because the photograph fills that column. 🔑 Fixed with the device the site already has rather than a new one: the arc moves into that space and does the job it exists for. Scoped to a .hero-copy that is NOT accompanied by media, so the home page is untouched — :only-child would be wrong here (the hero-copy has siblings in the grid on both), so it keys off the section instead. */ .section--tight .hero-copy { position: relative; } .section--tight .hero-copy::after { content: ""; position: absolute; right: -220px; top: 50%; width: 340px; height: 340px; transform: translateY(-50%); pointer-events: none; border-radius: 50%; background: conic-gradient(from 150deg, var(--cyan) 0deg, rgba(255,122,88,0.20) 70deg, transparent 112deg), repeating-conic-gradient(from 150deg, var(--arc-tick) 0deg 0.4deg, transparent 0.4deg 6deg); -webkit-mask: radial-gradient(circle, transparent 68%, #000 68.5%, #000 73%, transparent 73.5%); mask: radial-gradient(circle, transparent 68%, #000 68.5%, #000 73%, transparent 73.5%); opacity: 0.75; } /* 🚨 Only where there is genuinely no photograph. A hero WITH media already carries the arc on .hero-media::after, and two overlapping arcs read as a rendering fault rather than a motif. */ .hero-grid .hero-copy::after { content: none; } @media (max-width: 1100px) { /* Past this width the arc would overlap the copy rather than sit beside it. */ .section--tight .hero-copy::after { display: none; } } /* The hero gets the same arc, larger, anchored to the shoulder in the photograph rather than floating. */ .hero-media { position: relative; } .hero-media::after { content: ""; position: absolute; right: -46px; bottom: -46px; width: 300px; height: 300px; pointer-events: none; border-radius: 50%; background: conic-gradient(from 128deg, var(--cyan) 0deg, rgba(255,122,88,0.22) 74deg, transparent 118deg), repeating-conic-gradient(from 128deg, var(--arc-tick) 0deg 0.4deg, transparent 0.4deg 6deg); -webkit-mask: radial-gradient(circle, transparent 66%, #000 66.5%, #000 71.5%, transparent 72%); mask: radial-gradient(circle, transparent 66%, #000 66.5%, #000 71.5%, transparent 72%); animation: arc-sweep 1.1s var(--ease) both; } /* The arc draws itself once on load. Rotation only — no layout, no paint beyond the composited layer. */ @keyframes arc-sweep { from { transform: rotate(-26deg); opacity: 0; } to { transform: rotate(0deg); opacity: 1; } } /* ⚠️ The hero PHOTOGRAPH is the LCP element and is never faded from opacity 0 — Chrome does not count a fully transparent element, so a hero fade is a straight LCP penalty. Only the arc animates. */ @media (prefers-reduced-motion: reduce) { /* Reduced, not stripped: the arc still draws, it just arrives. */ .hero-media::after { animation: none; } } @media (max-width: 860px) { /* The arcs are decorative at this size and would crowd the copy. */ .section-head::before { display: none; } .hero-media::after { width: 190px; height: 190px; right: -30px; bottom: -30px; } } /* ── COMPONENTS site.css does not carry ────────────────────────── */ /* Skip link. Without a rule a bare