/* ------------------------------------------------------------------ * * roniafraser.training — v2 "The Pathway Band" * * Sister site to roniafraser.com/v3a. Same tokens, same faces, same * scroll hinge — deliberately, because a companion site should be * recognisable as family at a glance. * * What makes it the other sibling: * .com is dark-dominant. .training is bone-dominant. Both open dark * and both flip on the same hinge; this one then stays lit all the * way down, because training happens in a room with the lights on. * The module cards are bone editorial columns, not dark photo tiles. * A third face — DM Mono — carries the data this site has and the * .com does not: format, accreditation, entry, module codes. * The signature is the horizontal pathway band, not the hinge. * ------------------------------------------------------------------ */ :root{ --ink:#0A0A0B; /* dominant black */ --ink-2:#131316; /* lifted black, for panels */ --ox:#3D0C0D; /* oxblood, the bridge to red */ --red:#AD1917; /* her signature red — accent only */ /* Both lifts are the SAME hue as --red (0.8°), only lighter. The previous values drifted to 4-6° and read orange-pink against bone; keeping the hue pinned is what makes every red on the site look like one red. */ --red-lift:#CF1E1C; /* hover state — #AD1917 at 46% L */ --red-on-dark:#E54543; /* --red is too dark on ink; this is 58% L, same hue */ /* the banner is the one deliberately loud thing on the page */ --gold:#F0B323; --gold-lift:#FFC63D; --bone:#F2EFE9; /* the light state, and most of the page*/ --bone-2:#E7E2D9; --bone-3:#DCD6C9; /* one step darker than --bone-2, for adjacent tint sections */ --bone-ink:#16161A; --muted:#5E5A55; /* body copy on bone */ --muted-d:rgba(255,255,255,.62); --ghost:#CBC5BA; /* unfilled words on bone */ --rule:rgba(22,22,26,.16); --rule-d:rgba(255,255,255,.16); --edge:clamp(22px, 4.4vw, 64px); --nav-h:118px; --banner-h:44px; } *,*::before,*::after{box-sizing:border-box} /* scroll-behavior stays auto on purpose. ScrollTrigger.refresh() measures by parking the scroll at 0 and restoring it; with CSS smooth scrolling those jumps are animated instead of instant, so every trigger is measured at the wrong offset. Refresh runs on resize. Smooth scrolling for anchors and the switch is done in JS — see scrollToY(). */ html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:auto} body{ margin:0; padding-top:var(--banner-h); /* clears the fixed applications banner */ background:var(--bone); color:var(--bone-ink); font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.6; overflow-x:clip; /* clip, not hidden: hidden would break position:sticky */ } body.drawer-open{overflow:hidden} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3,p,figure,blockquote,dl,dd,dt{margin:0} ul{margin:0;padding:0;list-style:none} .serif{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-weight:400} .mono{font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace} /* grain ------------------------------------------------------------ */ .grain::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:3; opacity:.34;mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* black satin, per the brand banner — very low contrast, never a pattern */ .satin::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background: linear-gradient(104deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 26%), linear-gradient(258deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 30%), radial-gradient(60% 50% at 84% 8%, rgba(173,25,23,.16) 0%, rgba(173,25,23,0) 72%), radial-gradient(50% 44% at 4% 96%, rgba(173,25,23,.10) 0%, rgba(173,25,23,0) 74%); } /* shared section furniture ----------------------------------------- */ .eyebrow{ display:flex;align-items:center;gap:14px; font-family:"DM Mono",ui-monospace,monospace;font-weight:500; font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--red); } .eyebrow::before{content:"";width:34px;height:1px;background:var(--red);flex:none} .sec-h{ font-family:"Playfair Display",Georgia,serif;font-weight:400; font-size:clamp(30px,4.1vw,58px);line-height:1.08;letter-spacing:-.018em; } .sec-h em{font-style:italic;color:var(--red)} /* three separate quoted phrases stacked as one heading: the 1.08 leading above is set for a sentence that wraps, and runs the three together. */ .sec-h--stack{line-height:1.22} .lede{color:var(--muted);font-size:clamp(16px,1.3vw,19px);line-height:1.8;max-width:60ch} /* ------------------------------------------------------------------ * * applications banner (echoes the "Applications Now Open" key art) * ------------------------------------------------------------------ */ .banner{ position:fixed;top:0;left:0;right:0;z-index:120; height:var(--banner-h); display:flex;align-items:center;justify-content:center;gap:14px; padding:0 var(--edge); /* gold, not red: the banner has to out-shout a page whose accent is already red, and ink-on-gold clears 10:1 where white-on-gold would fail outright */ background:var(--gold);color:var(--ink); font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; transition:background .3s ease; overflow:hidden;white-space:nowrap; } .banner:hover{background:var(--gold-lift)} .banner .b-long{font-weight:500;opacity:.82;letter-spacing:.05em;text-transform:none;font-size:15px} .banner .b-go{font-weight:800;border-bottom:1.5px solid rgba(10,10,11,.5);padding-bottom:1px} /* ------------------------------------------------------------------ * * nav * ------------------------------------------------------------------ */ .nav-scrim{ position:fixed;top:var(--banner-h);left:0;right:0;height:130px;z-index:90;pointer-events:none; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); -webkit-mask-image:linear-gradient(to bottom,#000 34%,transparent 100%); mask-image:linear-gradient(to bottom,#000 34%,transparent 100%); opacity:0;transition:opacity .4s ease; } .nav-scrim.on{opacity:1} /* past the flip the whole page is bone, so the scrim becomes a bone bar and the nav type goes to ink */ body.lit .nav-scrim{ opacity:1; background:linear-gradient(to bottom, rgba(242,239,233,1) 0%, rgba(242,239,233,1) 62%, rgba(242,239,233,.72) 80%, rgba(242,239,233,0) 100%); -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%); mask-image:linear-gradient(to bottom,#000 72%,transparent 100%); } .nav{ position:fixed;top:var(--banner-h);left:0;right:0;z-index:100; height:var(--nav-h); display:flex;align-items:center;justify-content:space-between; padding:0 var(--edge); color:#fff; transition:color .45s ease; } .nav.light{color:var(--bone-ink)} body.drawer-open .nav{color:#fff} .logo{display:flex;align-items:center;gap:14px} .logo img{width:38px;height:38px;border-radius:50%;flex:none} .logo .wm{display:flex;flex-direction:column;line-height:1} .logo .wm b{font-family:"Playfair Display",serif;font-weight:400;font-size:21px;letter-spacing:.11em;text-transform:uppercase} .logo .wm i{ font-family:"DM Mono",ui-monospace,monospace;font-style:normal;font-weight:400; font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.66;margin-top:6px; } .nav-right{display:flex;align-items:center;gap:clamp(20px,4vw,52px)} .nav-links{display:flex;align-items:center;gap:clamp(20px,3.2vw,44px)} .nav-links a{ font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; opacity:.9;transition:opacity .25s ease; white-space:nowrap; } .nav-links a:hover{opacity:.55} .nav-links a .ext{font-size:9px;vertical-align:super;opacity:.6;margin-left:3px} /* Modules dropdown — a hover/focus reveal, not a second navigation system. Padding-bottom + negative margin on the wrapper bridges the gap to the menu so the pointer never leaves a hoverable area between trigger and panel. Panel is always dark/opaque regardless of .nav.light, since it floats over whatever section is behind it. */ .nav-drop{position:relative;display:flex;align-items:center;padding-bottom:20px;margin-bottom:-20px} .nav-drop .care{font-size:8px;vertical-align:middle;opacity:.6;margin-left:5px;display:inline-block;transition:transform .25s ease} .nav-drop:hover .care,.nav-drop:focus-within .care{transform:rotate(180deg)} .nav-drop-menu{ position:absolute;top:100%;left:50%;min-width:300px; transform:translateX(-50%) translateY(-6px); background:var(--ink);border-radius:14px;padding:8px; box-shadow:0 24px 60px rgba(0,0,0,.4); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s; z-index:130; } .nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0); transition:opacity .25s ease,transform .25s ease,visibility 0s; } .nav-drop-menu a{ display:block;padding:13px 16px;border-radius:8px; font-family:"Archivo",sans-serif;font-size:13px;font-weight:600; letter-spacing:.01em;text-transform:none;line-height:1.4; color:#fff;opacity:.86;white-space:normal; } .nav-drop-menu a:hover{background:rgba(255,255,255,.08);opacity:1} .pill{ display:inline-flex;align-items:center;gap:22px; height:52px;padding:0 26px 0 30px;border-radius:999px; font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; background:#fff;color:var(--ink); border:0;cursor:pointer;font-family:inherit; transition:background .45s ease,color .45s ease,transform .3s ease,box-shadow .3s ease; white-space:nowrap; } .pill .bull{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;flex:none} .pill:hover{transform:translateY(-2px)} .nav.light .pill{background:var(--red);color:#fff} .pill--red{background:var(--red);color:#fff} .pill--red:hover{background:var(--red-lift)} .pill--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)} .pill--ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)} .pill--ink{background:transparent;color:var(--bone-ink);box-shadow:inset 0 0 0 1px var(--rule)} .pill--ink:hover{box-shadow:inset 0 0 0 1px rgba(22,22,26,.4)} .burger{display:none;width:32px;height:15px;position:relative;background:none;border:0;cursor:pointer;color:inherit;z-index:110} .burger span{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .35s ease,opacity .25s ease} .burger span:first-child{top:0} .burger span:last-child{bottom:0} body.drawer-open .burger span:first-child{transform:translateY(6.75px) rotate(45deg)} body.drawer-open .burger span:last-child{transform:translateY(-6.75px) rotate(-45deg)} /* mobile drawer ---------------------------------------------------- */ .drawer{ position:fixed;top:var(--banner-h);left:0;right:0;bottom:0;z-index:95; background:var(--ink);color:#fff; display:flex;flex-direction:column;justify-content:center; padding:0 var(--edge); transform:translateY(-101%);visibility:hidden; transition:transform .6s cubic-bezier(.16,1,.3,1),visibility 0s linear .6s; } .drawer.open{transform:none;visibility:visible;transition:transform .6s cubic-bezier(.16,1,.3,1),visibility 0s} /* :not(.pill) — the Apply now CTA is an in here too, and a bare `.drawer a` (0,1,1) outspecifies `.pill` (0,1,0), which would render the button in 40px Playfair. */ .drawer a:not(.pill){ font-family:"Playfair Display",serif;font-size:clamp(26px,7.4vw,40px); padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12); } .drawer>a:not(.pill):first-child{border-top:1px solid rgba(255,255,255,.12)} .drawer .d-cta{margin-top:34px;align-self:flex-start} /* Modules sub-links in the mobile drawer — always visible (no accordion JS), de-emphasised against the Playfair top-level items so they read as children of "Modules" rather than peers of it. */ .drawer .d-sub{display:flex;flex-direction:column;padding:2px 0 10px 20px;border-bottom:1px solid rgba(255,255,255,.12)} .drawer .d-sub a{ font-family:"DM Mono",ui-monospace,monospace;font-size:13px;font-weight:500; letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.68); padding:10px 0;border-bottom:0; } /* ------------------------------------------------------------------ * * hero — the room, not the portrait * * The .com's hero subject is her. This one's subject is the room she * is standing at the front of: same construction, same focus patch, * different thesis. The heavy defocus also handles the fact that the * audience is made of recognisable faces. * ------------------------------------------------------------------ */ /* min-height, not height. The copy is bottom-anchored inside a box that also has to keep clear of the fixed nav, and on a short screen (a laptop at 1440x800, or any window with devtools open) a hard 100vh box is not tall enough to hold the nav reservation, the headline and the bottom padding at once — the kicker rides up under the nav. With min-height the hero grows past the viewport instead, which is the honest failure mode: you scroll a little. .hero-media is inset by percentages and .hero-track is bottom-anchored, so both follow the growth. */ .hero{ position:relative;min-height:calc(100vh - var(--banner-h));overflow:hidden; isolation:isolate;background:#080506; } .hero-media{ position:absolute;top:-8%;bottom:-8%;right:-4%;left:34%;z-index:0; will-change:transform,filter; -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 20%, #000 44%); mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 20%, #000 44%); } .hero-media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:72% 40%; /* she is at the far right of the room, 40% down */ filter:blur(3.4px) grayscale(.22) saturate(.82) contrast(1.04) brightness(.94); transform:scale(1.06); } /* Focus patch. The base copy above is soft everywhere, which softened her along with the chairs. This is the same crop unblurred, masked to a lens-shaped patch over the front of the room, so the defocus falls off *around* her. The mask is an SVG carrying the photograph's own 1200x1469 intrinsic ratio, and mask-size:cover + mask-position:72% 40% restate object-fit:cover + object-position:72% 40%. So the patch is pinned in *source* pixels and holds at every viewport aspect — which a percentage-positioned CSS gradient cannot do, because the box is width-driven above ~0.82 aspect and height-driven below it, and the patch would slide off her. Keep mask-position and object-position identical if either moves. */ .hero-media img.focus{ filter:grayscale(.22) saturate(.82) contrast(1.04) brightness(.96); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1469' viewBox='0 0 1200 1469'%3E%3Cdefs%3E%3CradialGradient id='f' gradientUnits='userSpaceOnUse' cx='868' cy='585' r='355'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='.34' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='.56' stop-color='%23fff' stop-opacity='.82'/%3E%3Cstop offset='.76' stop-color='%23fff' stop-opacity='.44'/%3E%3Cstop offset='.9' stop-color='%23fff' stop-opacity='.14'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1200' height='1469' fill='url(%23f)'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1469' viewBox='0 0 1200 1469'%3E%3Cdefs%3E%3CradialGradient id='f' gradientUnits='userSpaceOnUse' cx='868' cy='585' r='355'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='.34' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='.56' stop-color='%23fff' stop-opacity='.82'/%3E%3Cstop offset='.76' stop-color='%23fff' stop-opacity='.44'/%3E%3Cstop offset='.9' stop-color='%23fff' stop-opacity='.14'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1200' height='1469' fill='url(%23f)'/%3E%3C/svg%3E"); -webkit-mask-size:cover; mask-size:cover; -webkit-mask-position:72% 40%; mask-position:72% 40%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } /* The wash is not a flat scrim. Its mask keeps it near-full over the left third, where the headline sits and contrast has to hold, and opens a hole over the right, where the room and Ronia are. So lightening the photo is done by widening that hole and lifting the image's own brightness — NOT by dropping .opacity, which would take the headline's backing down with it. */ .hero-wash{ position:absolute;inset:0;z-index:1;opacity:.50; -webkit-mask-image:radial-gradient(48% 56% at 76% 38%, rgba(0,0,0,.04) 0%, rgba(0,0,0,.40) 50%, #000 86%); mask-image:radial-gradient(48% 56% at 76% 38%, rgba(0,0,0,.04) 0%, rgba(0,0,0,.40) 50%, #000 86%); background: radial-gradient(34% 30% at 12% 84%, rgba(173,25,23,.64) 0%, rgba(173,25,23,0) 72%), radial-gradient(24% 21% at 34% 62%, rgba(173,25,23,.24) 0%, rgba(173,25,23,0) 74%), radial-gradient(46% 50% at 0% 4%, rgba(12,6,7,.94) 0%, rgba(12,6,7,0) 74%), radial-gradient(34% 34% at 26% 0%, rgba(58,11,13,.78) 0%, rgba(58,11,13,0) 74%), radial-gradient(44% 42% at 84% 0%, rgba(10,8,9,.78) 0%, rgba(10,8,9,0) 74%), radial-gradient(52% 52% at 100% 96%, rgba(4,3,4,.84) 0%, rgba(4,3,4,0) 70%), radial-gradient(40% 40% at 4% 104%, rgba(8,6,7,.88) 0%, rgba(8,6,7,0) 72%), linear-gradient(148deg,#100708 0%,#360B0D 38%,#190809 64%,#050304 100%); } .hero-glow{ position:absolute;inset:0;z-index:2;mix-blend-mode:soft-light; background: radial-gradient(28% 34% at 74% 38%, rgba(255,246,236,.9) 0%, rgba(255,246,236,0) 70%), /* was a salmon (255,138,110) — under soft-light it turned the whole lower left pink. Brand red at the same job stays red. */ radial-gradient(38% 32% at 20% 82%, rgba(173,25,23,.58) 0%, rgba(173,25,23,0) 70%); } .hero-vignette{ position:absolute;inset:0;z-index:2; background:linear-gradient(to bottom, rgba(6,4,5,.30) 0%, rgba(6,4,5,0) 26%, rgba(6,4,5,0) 46%, rgba(6,4,5,.50) 100%); } /* The hero's own geometry is a preview of the pathway band: one red hairline with four nodes on it, drawn left to right on load. Built in CSS rather than SVG on purpose — a stretched line needs preserveAspectRatio:none and round nodes need it left alone, so in one SVG the nodes slide off the line at every aspect but one. */ .hero-track{ position:absolute;left:var(--edge);right:var(--edge);bottom:clamp(46px,7vh,86px); height:9px;z-index:3;pointer-events:none; } .ht-line{ position:absolute;left:0;right:0;top:4px;height:1px;background:rgba(173,25,23,.85); transform:scaleX(0);transform-origin:left center;will-change:transform; } .hero-track i{ position:absolute;top:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%; background:#0A0A0B;box-shadow:inset 0 0 0 1.4px rgba(173,25,23,.95); } .hero-track i:first-of-type{background:var(--red);box-shadow:inset 0 0 0 1.4px var(--red)} /* min-height:inherit rather than height:100%, so the two stay in step: the padding-top is the nav's own height plus a little air, which is what keeps the kicker clear. */ .hero-inner{ position:relative;z-index:4;min-height:inherit; padding:calc(var(--nav-h) + clamp(16px,2.4vh,36px)) var(--edge) clamp(72px,12vh,140px); display:flex;align-items:flex-end; } /* 760/60% rather than 700/58%: the headline's longest line went from 13 characters to 15 when it started naming narcissistic abuse recovery outright. The clamp max below drops to match, so the line still sets on one row at every width. */ .hero-copy{width:min(760px,60%)} .hero-kicker{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; font-family:"DM Mono",ui-monospace,monospace;font-weight:500; font-size:16px;letter-spacing:.18em;text-transform:uppercase; color:rgba(255,255,255,.84);margin-bottom:clamp(20px,3vh,30px); } .hero-kicker .rule{width:38px;height:1px;background:var(--red);flex:none} .hero-title{ font-family:"Playfair Display",Georgia,serif;font-weight:400; font-size:clamp(42px,6.9vw,100px); line-height:.96;letter-spacing:-.016em;color:#fff; } /* .ln is the mask the intro's line reveal slides out of, so its overflow has to stay hidden — but line-height:.96 makes the line box shorter than Playfair's content area (ascent+descent = 1.338em), leaving .19em of every descender below the box and clipped. Pad the mask down past the deepest descender and pull the same amount back off the margin, so the reveal still works and the line spacing is unchanged. Both em, so they hold at every clamp step. */ .hero-title .ln{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em} .hero-title .ln > span{display:block;will-change:transform} .hero-title em{font-style:italic;color:#fff} .hero-sub{ margin-top:clamp(24px,3.4vh,36px); color:rgba(255,255,255,.88);font-size:clamp(15px,1.3vw,18px);line-height:1.85; max-width:52ch; } .hero-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,3.6vh,40px)} /* The new marks are a white SVG silhouette and a transparent-bg PNG, both readable straight on the hero photo, so they sit inline with the CTAs instead of needing a light backing card. */ .hero-creds{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .hero-creds li{display:flex;align-items:center} .hero-creds li img{height:52px;width:auto;display:block} /* ------------------------------------------------------------------ * * switch section — the hinge, inherited from the .com * ------------------------------------------------------------------ */ .switch{position:relative;background:var(--bone);z-index:2} .switch-head{ position:sticky;top:var(--banner-h);height:calc(100vh - var(--banner-h));min-height:420px;overflow:hidden; display:flex;flex-direction:column;align-items:center; padding-top:clamp(150px,20vh,224px); text-align:center; } /* state A lives entirely in this layer, so fading it out *is* the flip */ .switch-grad{ position:absolute;inset:0;z-index:0; background: radial-gradient(58% 42% at 58% -10%, rgba(140,20,19,.9) 0%, rgba(140,20,19,0) 78%), radial-gradient(26% 26% at 78% 0%, rgba(173,25,23,.5) 0%, rgba(173,25,23,0) 74%), radial-gradient(30% 30% at 102% 2%, rgba(28,10,11,.9) 0%, rgba(28,10,11,0) 74%), radial-gradient(48% 46% at 97% 102%, rgba(94,14,15,.9) 0%, rgba(94,14,15,0) 72%), radial-gradient(52% 44% at 24% 100%, rgba(18,6,7,.96) 0%, rgba(18,6,7,0) 72%), radial-gradient(66% 112% at -18% 60%, rgba(46,9,11,1) 0%, rgba(46,9,11,0) 74%), linear-gradient(150deg,#0E0607 0%,#310A0C 36%,#180708 64%,#050304 100%); will-change:opacity; } /* the .com's hinge draws concentric rings. This one draws the register that does not exist: a ruled grid with nothing written in it. */ .switch-grid{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none} .switch-grid line{stroke:rgba(255,255,255,.13);stroke-width:1;vector-effect:non-scaling-stroke} .switch-body{position:relative;z-index:4;width:100%;padding:0 var(--edge)} .toggle-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:clamp(26px,3.7vh,38px)} .toggle-label{ font-family:"DM Mono",ui-monospace,monospace;font-weight:500; font-size:15px;letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.78);transition:color .5s ease; } .toggle{ width:58px;height:32px;border-radius:999px;position:relative;flex:none; background:rgba(255,255,255,.16); box-shadow:inset 0 1px 3px rgba(0,0,0,.34); border:0;padding:0;cursor:pointer; } /* it is a real control — it takes a click and scrolls the page — so it needs a focus ring. No transition on background or on .knob's transform: the flip scrubs both, and a transition fighting a scrub is the trap that bit the .com three times. */ .toggle:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:4px} .switch.on .toggle:focus-visible{outline-color:var(--red)} .toggle .knob{ position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%; background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.34);will-change:transform; } .switch.on .toggle-label{color:var(--red)} .switch-stack{position:relative} .switch-state{transition:none} .switch-state.b{position:absolute;inset:0;opacity:0} .switch-h{ font-family:"Playfair Display",Georgia,serif; font-size:clamp(28px,3.4vw,50px); line-height:1.14;letter-spacing:-.018em;font-weight:400; max-width:17ch;margin:0 auto; } .switch-state.a .switch-h{color:#fff} .switch-state.b .switch-h{color:var(--bone-ink)} .switch-state.b .switch-h em{font-style:italic;color:var(--red)} .switch-sub{ margin-top:clamp(22px,3vh,32px); font-size:clamp(15px,1.25vw,17.5px);line-height:1.75;max-width:56ch;margin-left:auto;margin-right:auto; } .switch-state.a .switch-sub{color:rgba(255,255,255,.8)} .switch-state.b .switch-sub{color:var(--muted)} /* ------------------------------------------------------------------ * * modules — bone editorial columns, not dark photo tiles * * This is where the two siblings visibly part. The .com's cards are * near-black slabs with the photograph bled behind the type. Here the * lights are on: photograph on top, hairline, then the syllabus in * mono. Module 04 has no photograph at all, because it has no page. * ------------------------------------------------------------------ */ /* The four cards share one row grid, not four independent columns. Every card spans the whole set of rows as a subgrid, so the photograph, the 01–04 rule, the heading block, the three spec hairlines and the call to action each sit on one shared baseline across all four columns. No stagger: the client reads the row as a row. */ .cards{ position:relative;z-index:5;background:var(--bone); padding:0 var(--edge) clamp(80px,11vh,120px); /* tied to the flip's own scroll-trigger range (min(1100, innerHeight*1.1), set in index.html's inline script) plus a fixed breathing gap — not a flat vh percentage. A flat percentage falls out of sync with that range on a short viewport (its floor undercuts the flip's distance), so the card photos ride up into view before the switch-head crossfade has actually finished, crowding the still-transitioning text. */ margin-top:calc(min(1100px,110vh) + clamp(60px,8vh,120px)); display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(16px,2vw,34px);row-gap:0; grid-template-rows: [badge] auto [art] auto [code] auto [title] auto [hook] auto [blurb] auto [audience] auto [learn] auto [f-format] auto [f-length] auto [f-dates] auto [f-capacity] auto [f-accreditation] auto [f-entry] auto [cta] auto; align-items:stretch; } .cpd-badge{ grid-column:1 / -1;grid-row:badge; display:flex;align-items:center;justify-content:center;gap:10px; margin:50px 0 clamp(30px,4.4vh,50px);padding:9px 20px; background:#fff;border:1px solid var(--rule);border-radius:999px;width:fit-content; } .cpd-badge img{height:26px;width:auto;display:block} /* the note under the spec strip. No box: it is the page's own voice, so it sits on the same grid as every .sec below it — var(--edge) gutters, a 1240px wrap — and takes its top space from the strip instead of touching it. The measure is capped well inside the wrap so a 14.5px line does not run 1240px wide. */ .note-box{padding:clamp(30px,5vh,54px) var(--edge) 0} .note-wrap{max-width:1240px;margin:0 auto} .note-box p{ max-width:900px;font-size:15px;line-height:1.75;color:var(--muted); } .note-box b{color:var(--bone-ink)} .cpd-badge span{ font-family:"DM Mono",ui-monospace,monospace;font-weight:500; font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red); } .card{ position:relative;will-change:transform; display:grid;grid-row:art / -1;grid-template-rows:subgrid;row-gap:0; } .card-art{ position:relative;overflow:hidden;aspect-ratio:320/400;background:var(--bone-2); margin-bottom:22px; } .card-art a{position:absolute;inset:0;display:block} .card-art img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(.42) saturate(.78) contrast(1.05) brightness(.94); transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s ease; } .card:hover .card-art img{transform:scale(1.045);filter:grayscale(.16) saturate(.94) contrast(1.05) brightness(1)} /* per-image exposure: the four sources sit about two stops apart */ .card:nth-child(1) .card-art img{filter:grayscale(.5) saturate(.6) contrast(1.06) brightness(.92)} .card:nth-child(2) .card-art img{filter:grayscale(.3) saturate(.8) contrast(1.1) brightness(1.16)} .card:nth-child(3) .card-art img{filter:grayscale(.34) saturate(.8) contrast(1.04) brightness(1.1)} .card:hover:nth-child(1) .card-art img, .card:hover:nth-child(2) .card-art img, .card:hover:nth-child(3) .card-art img{filter:grayscale(.12) saturate(1) contrast(1.06) brightness(1.04)} /* module 04: locked treatment — real photograph, dark scrim, quiet brand mark */ .card-art.locked{ background:var(--ink); isolation:isolate; } .card-art.locked .locked-photo{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(.2) contrast(1.18) brightness(.6); transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s ease; } .card:hover .card-art.locked .locked-photo{ transform:scale(1.045);filter:grayscale(.05) contrast(1.14) brightness(.68); } .locked-scrim{ position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,9,8,.05) 0%,rgba(10,9,8,.3) 42%,rgba(10,9,8,.92) 100%); } .locked-text{ position:absolute;z-index:2;left:0;right:0;bottom:26px; display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 22px; } .locked-chip{ font-family:"DM Mono",ui-monospace,monospace;font-weight:500; font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red-on-dark); padding:9px 16px;border:1px solid rgba(229,69,67,.7);border-radius:999px; background:rgba(10,9,8,.78);backdrop-filter:blur(2px); } .locked-note{ color:rgba(255,255,255,.72); font-size:12.5px;line-height:1.6;text-align:center;max-width:26ch; } .card-code{ font-family:"DM Mono",ui-monospace,monospace;font-weight:500; font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red); display:flex;align-items:baseline;gap:10px; padding-bottom:12px;border-bottom:1px solid var(--rule); } .card-code .role{color:var(--muted);letter-spacing:.14em} .card-h{ font-family:"Playfair Display",Georgia,serif;font-weight:400; font-size:clamp(20px,1.65vw,25px);line-height:1.16;letter-spacing:-.01em; margin:18px 0 12px; } .card-h a{color:inherit;text-decoration:none;transition:color .3s ease} .card-h a:hover{color:var(--red)} .card-hook{color:var(--red);font-weight:600;font-size:15.5px;line-height:1.4;margin:0 0 10px} .card-p{color:var(--muted);font-size:15.5px;line-height:1.72} .card-audience{color:var(--bone-ink);font-weight:600;font-size:14px;line-height:1.5;margin-top:12px} .card-learn{ margin-top:14px;justify-self:start;align-self:start; font-family:"DM Mono",ui-monospace,monospace;font-weight:500; font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); display:inline-flex;align-items:center;gap:8px; transition:gap .3s ease,color .3s ease; } .card-learn:hover{gap:12px;color:var(--red)} .card-audience .card-learn{margin-top:0;margin-left:4px} .spec{ margin-top:20px;display:grid;grid-template-columns:auto 1fr;gap:0 16px; grid-row:f-format / span 6;grid-template-rows:subgrid; font-family:"DM Mono",ui-monospace,monospace;font-size:11px;line-height:1.5; } .spec dt{ color:rgba(22,22,26,.4);letter-spacing:.14em;text-transform:uppercase; padding:9px 0;border-top:1px solid var(--rule);white-space:nowrap; } .spec dd{ color:var(--bone-ink);letter-spacing:.03em;text-transform:uppercase; padding:9px 0;border-top:1px solid var(--rule);text-align:right; } /* named per-field placement (rather than relying on DOM-order auto-fill) so a card that skips a field — e.g. no stated Capacity on 02/04 — doesn't shift every row below it out of alignment with its siblings */ .spec .r-format{grid-row:f-format} .spec .r-length{grid-row:f-length} .spec .r-dates{grid-row:f-dates} .spec .r-capacity{grid-row:f-capacity} .spec .r-accreditation{grid-row:f-accreditation} .spec .r-entry{grid-row:f-entry} /* Pin the CTA to the shared [cta] row. Without this it auto-places into whatever row comes next in its own card, so cards with fewer spec rows float their CTA up above the others. */ .card-go{ grid-row:cta; margin-top:22px;justify-self:start;align-self:start; font-family:"DM Mono",ui-monospace,monospace;font-weight:500; font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red); display:inline-flex;align-items:center;gap:10px; padding-bottom:4px;border-bottom:1px solid rgba(173,25,23,.36); transition:gap .3s ease,border-color .3s ease; } .card-go:hover{gap:16px;border-color:var(--red)} /* ------------------------------------------------------------------ * * THE PATHWAY BAND — the signature * * The client's own pathway graphic does not exist yet, and her brief * says two things at once: this is one pathway, and every module can * be taken on its own. So the band draws both. One track, four * stations, an onward arrow between each — and above every station an * arrow pointing *down into* it, because each station is also a front * door. Module 04's door is drawn shut. * * Horizontal on purpose. A vertical rail is the .training v1 concept * and the two must not converge. * ------------------------------------------------------------------ */ .path{ position:relative;background:var(--ink);color:#fff;isolation:isolate; padding:clamp(74px,10vh,116px) 0 clamp(66px,9vh,100px); overflow:hidden; } .path-bg{ position:absolute;inset:0;z-index:0; background:url("images/path-band.jpg") center/cover no-repeat; filter:grayscale(.9) contrast(1.1) brightness(.2); opacity:.5; } .path-veil{ position:absolute;inset:0;z-index:1; background: radial-gradient(60% 90% at 8% 50%, rgba(173,25,23,.24) 0%, rgba(173,25,23,0) 72%), linear-gradient(to bottom, rgba(10,10,11,.94) 0%, rgba(10,10,11,.7) 40%, rgba(10,10,11,.96) 100%); } /* Wider than the sitewide 1240 (see .sec-wrap/.seen-inner) on purpose: this section's job is to host a large landscape photo next to the copy, so it gets more room than the text-only sections. */ .path-inner{position:relative;z-index:3;max-width:1400px;margin:0 auto;padding:0 var(--edge)} .path .eyebrow{color:var(--red-on-dark)} .path .eyebrow::before{background:var(--red-on-dark)} /* align-items:flex-start (not stretch) — the photo keeps its own 16/9 shape instead of being stretched to match the copy column's height. The copy column takes a fixed share (flex:0 1 ..., no grow); the photo takes whatever's left of the row, up to its own max-width. */ .path-head{display:flex;align-items:flex-start;justify-content:flex-start;gap:clamp(40px,5vw,80px);flex-wrap:wrap;margin-bottom:clamp(46px,6vh,72px)} .path-head-copy{max-width:46ch;flex:0 1 420px} .path-head-copy .sec-h{color:#fff;max-width:16ch} .path-head-copy .sec-h em{color:var(--red-on-dark)} .path-head-copy p:not(.eyebrow){color:#fff;font-size:15.5px;line-height:1.78;margin-top:14px} /* Sharp, full-colour landscape photo (unlike .hero-media's overall blur). The vignette is a radial-gradient painted on a pseudo-element above the image — not a mask or a box-shadow on the itself — because both of those depend on browser-specific compositing of replaced-element content and rendered inconsistently. A plain overlay div always paints on top, fading the photo's edges toward --ink so the hard rectangle cut dissolves into the section's near-black background. */ .path-head-photo{ position:relative;flex:1 1 0%;max-width:960px; aspect-ratio:16/9; } .path-head-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center} .path-head-photo::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 105% at 50% 50%, transparent 56%, rgba(10,10,11,.5) 80%, rgba(10,10,11,.94) 100%); } /* the track. .path-scroll is the horizontal viewport it lives in. .path-track-wrap is the positioning context for the prev/next buttons and the edge fades — both sit outside the scrolling element itself so they never move with it and never add to its scrollable width. */ .path-track-wrap{position:relative} .path-track-wrap::before,.path-track-wrap::after{ content:"";position:absolute;top:0;bottom:6px;width:56px;z-index:3;pointer-events:none; opacity:0;transition:opacity .3s ease; } .path-track-wrap::before{left:0;background:linear-gradient(to right, var(--ink) 0%, transparent 100%)} .path-track-wrap::after{right:0;background:linear-gradient(to left, var(--ink) 0%, transparent 100%)} .path-track-wrap.has-overflow:not(.at-start)::before{opacity:1} .path-track-wrap.has-overflow:not(.at-end)::after{opacity:1} /* prev/next: hidden entirely until JS confirms the track actually overflows, so pointer/touch/wheel scrolling isn't the only way in on any device. */ .path-nav{ position:absolute;top:calc(94px + 60px);transform:translateY(-50%); z-index:5;width:38px;height:38px;border-radius:50%;padding:0; display:flex;align-items:center;justify-content:center; background:rgba(10,10,11,.78);border:1px solid rgba(255,255,255,.28); color:#fff;font-size:19px;line-height:1;font-family:inherit;cursor:pointer; opacity:0;pointer-events:none; transition:opacity .25s ease,background .25s ease,border-color .25s ease; } .path-track-wrap.has-overflow .path-nav{opacity:1;pointer-events:auto} .path-track-wrap.has-overflow.at-start .path-nav--prev, .path-track-wrap.has-overflow.at-end .path-nav--next{opacity:.25;pointer-events:none} .path-nav:hover{background:var(--red);border-color:var(--red)} .path-nav:focus-visible{outline:2px solid var(--red-on-dark);outline-offset:2px} .path-nav--prev{left:2px} .path-nav--next{right:2px} .path-scroll{ position:relative; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x proximity; scrollbar-width:none;-ms-overflow-style:none; padding-bottom:6px; cursor:grab; } .path-scroll::-webkit-scrollbar{display:none} .path-scroll.dragging{cursor:grabbing;scroll-snap-type:none} .track{ position:relative; min-width:940px; display:grid;grid-template-columns:repeat(4,1fr); padding-top:94px; /* room for the entry arrows above the line */ } /* the line itself, drawn through the middle of the station row */ .track-line{ position:absolute;left:0;right:0;top:calc(94px + 60px); height:1px;background:var(--rule-d); } .track-fill{ position:absolute;left:0;top:calc(94px + 60px);height:1px;width:100%; background:var(--red);transform:scaleX(0);transform-origin:left center; will-change:transform; } .stn{position:relative;scroll-snap-align:center;padding:0 clamp(10px,1.6vw,22px)} /* entry arrow: sits above the node and points down into it */ .stn-entry{ position:absolute;top:-86px;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:9px; opacity:.3;transition:opacity .5s ease; } /* -86px puts the block's foot 10px clear of the node's box, so the arrowhead reads as pointing down into the station rather than floating loose above the track. */ .stn.on .stn-entry{opacity:1} .stn-entry b{ font-family:"DM Mono",ui-monospace,monospace;font-weight:500; font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red-on-dark);white-space:nowrap; } .stn-entry .arr{width:2px;height:58px;background:var(--red-on-dark);position:relative} .stn-entry .arr::after{ content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%); border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--red-on-dark); } /* module 04's door is shut: a bar across the arrow, and no red */ .stn.shut .stn-entry{opacity:.42} .stn.shut .stn-entry b{color:var(--muted-d)} .stn.shut .stn-entry .arr{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.5) 0 3px,transparent 3px 7px)} .stn.shut .stn-entry .arr::after{border-top-color:transparent;border-bottom:0; content:"";width:22px;height:2px;background:rgba(255,255,255,.5);border-left:0;border-right:0;bottom:-1px} .stn-node{ position:relative;height:120px;display:flex;align-items:center;justify-content:center; } .stn-node i{ width:15px;height:15px;border-radius:50%;background:var(--ink); box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.34); transition:box-shadow .5s ease,background .5s ease; display:block; } .stn.on .stn-node i{background:var(--red);box-shadow:inset 0 0 0 1.4px var(--red),0 0 0 6px rgba(173,25,23,.18)} .stn.shut.on .stn-node i{background:var(--ink);box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.5)} /* onward arrow, sitting on the line between this station and the next */ .stn-onward{ position:absolute;top:60px;right:-6px;transform:translateY(-50%); border-top:6px solid transparent;border-bottom:6px solid transparent; border-left:9px solid var(--rule-d); transition:border-left-color .5s ease; } .stn.on .stn-onward{border-left-color:var(--red)} .stn:last-child .stn-onward{display:none} .stn-body{text-align:center;padding-top:6px} .stn-code{ font-family:"DM Mono",ui-monospace,monospace;font-weight:500; font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.44); } .stn-name{ font-family:"Playfair Display",Georgia,serif;font-weight:400; font-size:clamp(16px,1.35vw,20px);line-height:1.24;margin:10px 0 8px;color:#fff; } .stn-role{ font-family:"DM Mono",ui-monospace,monospace; font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-d); } .path-foot{ display:flex;align-items:flex-start;justify-content:space-between;gap:30px;flex-wrap:wrap; margin-top:clamp(38px,5vh,58px);padding-top:24px;border-top:1px solid rgba(255,255,255,.1); } .path-note{color:rgba(255,255,255,.44);font-size:12.5px;line-height:1.7;max-width:62ch} .path-hint{ display:none;font-family:"DM Mono",ui-monospace,monospace; font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4); margin-top:14px; } /* shown by JS (index.html) exactly when the track overflows .path-scroll — real overflow, not a guessed breakpoint, so it's correct at any viewport width/zoom/font-size combination instead of only below a fixed px value. */ .path-hint.show{display:block} /* ------------------------------------------------------------------ * * philosophy — the word-fill line * ------------------------------------------------------------------ */ .philosophy{ background:var(--bone);padding:clamp(96px,14vh,168px) var(--edge); text-align:center; } .phi-inner{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:clamp(30px,4vh,46px)} .phi-mark{ width:44px;height:44px;border-radius:50%;flex:none; box-shadow:inset 0 0 0 1px var(--rule); display:flex;align-items:center;justify-content:center; font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;color:var(--red); } /* Ronia's note: bold serif heading, then the rest as plain body text — same shape as the "Good intentions matter." switch block above, so these mirror .switch-h / .switch-sub deliberately. */ .phi-block{max-width:900px;margin:0 auto} .phi-h{ font-family:"Playfair Display",Georgia,serif;font-weight:700; font-size:clamp(28px,3.4vw,50px);line-height:1.14;letter-spacing:-.018em; max-width:22ch;margin:0 auto;color:var(--bone-ink); } .phi-sub{ margin:clamp(22px,3vh,32px) auto 0; font-size:clamp(15px,1.25vw,17.5px);line-height:1.75;max-width:56ch; color:var(--muted); } .phi-sub .w{color:var(--muted)} /* ------------------------------------------------------------------ * * your trainer — two overlapping figures, as on the .com * ------------------------------------------------------------------ */ .trainer{ background:var(--bone);padding:0 var(--edge) clamp(96px,13vh,150px); display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr); gap:clamp(40px,6vw,96px);align-items:center; } .trainer-media{position:relative;min-height:clamp(460px,58vw,700px)} .trainer-media figure{position:absolute;overflow:hidden;will-change:transform} .trainer-media .big{left:0;top:6%;width:70%;aspect-ratio:1000/1428;z-index:1} .trainer-media .small{right:0;bottom:2%;width:46%;aspect-ratio:860/1500;z-index:2;box-shadow:-18px -18px 0 0 var(--bone)} .trainer-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.24) saturate(.86) contrast(1.04)} /* Ronia: "Only headshot, not speaker image." With the second plate gone the two-plate offset has nothing to offset against, so the remaining figure takes the full column and sits square rather than inset at 70%. */ .trainer-media--solo{min-height:0} .trainer-media--solo .big{position:relative;left:auto;top:auto;width:100%;max-width:520px} .trainer-copy{display:flex;flex-direction:column;gap:26px;padding:clamp(40px,6vh,80px) 0} .trainer-copy .sec-h{max-width:15ch} .cpd-tag{ display:inline-block; font-family:"DM Mono",ui-monospace,monospace;font-weight:500; font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red); padding:9px 16px;border:1px solid rgba(173,25,23,.35);border-radius:999px; } .trainer-copy .cpd-tag{align-self:flex-start} .award{ display:flex;gap:20px;align-items:flex-start; font-size:clamp(16px,1.3vw,19px);max-width:60ch; padding:24px 26px;background:var(--ink);color:#fff;position:relative;isolation:isolate; } .award .yr{ font-family:"DM Mono",ui-monospace,monospace;font-weight:500; font-size:11px;letter-spacing:.16em;color:var(--red-on-dark);padding-top:3px;flex:none; } .award b{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:19px;line-height:1.3;display:block} .award span{display:block;margin-top:8px;color:rgba(255,255,255,.6);font-size:12.5px;line-height:1.6} .creds{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center;font-size:clamp(16px,1.3vw,19px);max-width:60ch} .creds li{ display:flex;align-items:center;justify-content:center;height:46px; padding:6px 12px;background:#fff;box-shadow:inset 0 0 0 1px var(--rule);border-radius:8px; } .creds li img{height:100%;width:auto;max-width:96px;object-fit:contain;display:block} .trainer-links{display:flex;gap:14px;flex-wrap:wrap;align-items:center} /* ------------------------------------------------------------------ * * as seen in — the press strip * * Set as words rather than logo images, deliberately. The seven files on * the live site are Wix-hosted PNGs at seven different weights, heights * and levels of transparency, and a row of mismatched press logos is the * single most template-looking element a page can carry. Set in Playfair * they read as one line of the same voice. If Ronia supplies clean * transparent SVGs, drop into the same
  • — .seen-list img is * already sized and knocked to white, no other change needed. * ------------------------------------------------------------------ */ .seen{ background:var(--ink);color:#fff;position:relative;isolation:isolate; padding:clamp(38px,6vh,66px) var(--edge); } .seen-inner{ max-width:1240px;margin:0 auto; display:flex;align-items:center;gap:clamp(22px,5vw,70px);flex-wrap:wrap; } .seen-label{ font-family:"DM Mono",ui-monospace,monospace;font-weight:500; font-size:15px;letter-spacing:.2em;text-transform:uppercase; color:var(--red-on-dark);flex:none; display:flex;align-items:center;gap:14px; } .seen-label::before{content:"";width:30px;height:1px;background:var(--red-on-dark);flex:none} .seen-list--full{flex:1 1 380px} .seen-lists{ display:none;flex-direction:column;gap:clamp(14px,2.6vh,26px);flex:1 1 380px; } .seen-list{ display:flex;flex-wrap:nowrap;align-items:center;justify-content:center; gap:clamp(16px,3.4vw,48px); } .seen-list li{ font-family:"Playfair Display",Georgia,serif;font-weight:400; font-size:clamp(16px,1.9vw,26px);line-height:1;letter-spacing:.015em; color:rgba(255,255,255,.74);white-space:nowrap;flex:none; } .seen-list img{height:clamp(19px,2.3vw,29px);width:auto;max-width:none;opacity:.8;filter:brightness(0) invert(1)} /* ------------------------------------------------------------------ * * voices * ------------------------------------------------------------------ */ .voices{background:var(--bone-2);padding:clamp(80px,11vh,130px) var(--edge)} .voices-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:clamp(40px,5vh,62px)} .voices-head .sec-h{max-width:16ch} .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,52px)} .quote{display:flex;flex-direction:column;gap:20px;padding-top:24px;border-top:2px solid var(--red)} .quote p{font-family:"Playfair Display",Georgia,serif;font-size:19px;line-height:1.5;color:var(--bone-ink)} .quote footer{ font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);margin-top:auto; } .quote footer span{display:block;color:rgba(22,22,26,.36);margin-top:6px;letter-spacing:.1em} /* Ronia asked for Dr Ruden's testimonial to read as the first and most important one. It is also five times longer than the other two, so a three-up grid of equal columns would either tower over them or force them into whitespace. It gets its own full-width lead row at display size, and Ulf + Kasia sit two-up underneath. */ .quotes--lead{grid-template-columns:1fr;margin-bottom:clamp(34px,4.4vh,62px)} .quote--lead{max-width:76ch} .quote--lead p{font-size:clamp(20px,2vw,27px);line-height:1.45} .quotes--two{grid-template-columns:repeat(2,1fr)} /* the same quote on an ink band. Same shape, inverted ink. /toolbox puts its testimonial wall in a dark section rather than on bone, and the default colours here are all near-black, so they have to be restated rather than left to inherit. */ .sec--ink .quote p{color:var(--bone)} .sec--ink .quote footer{color:rgba(255,255,255,.72)} .sec--ink .quote footer span{color:var(--muted-d)} /* ------------------------------------------------------------------ * * contact * ------------------------------------------------------------------ */ .contact{ background:var(--bone);padding:clamp(90px,13vh,150px) var(--edge); display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr); gap:clamp(40px,6vw,90px);align-items:center; } .contact-media{position:relative;overflow:hidden;aspect-ratio:1200/1000} .contact-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) saturate(.8) contrast(1.04)} .contact-media figcaption{ position:absolute;left:0;bottom:0;right:0;padding:22px 24px; background:linear-gradient(to top, rgba(10,10,11,.82) 0%, rgba(10,10,11,0) 100%); color:rgba(255,255,255,.86); font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase; } .contact-copy{display:flex;flex-direction:column;gap:26px} .contact-copy .sec-h{max-width:14ch} .form{display:grid;grid-template-columns:1fr 1fr;gap:18px} /* the application form and the waiting-list fallback share one grid cell of .sec-split, so they stack instead of the second form dropping under the sticky heading column */ .apply-stack{display:flex;flex-direction:column} .waitlist{ margin-top:clamp(30px,4vh,46px);padding-top:clamp(26px,3.4vh,38px); border-top:1px solid var(--rule); display:grid;grid-template-columns:1fr;gap:16px;justify-items:start; } .waitlist .field{width:min(100%,340px)} .waitlist-h{ font-family:"DM Mono",ui-monospace,monospace;font-size:11.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--muted); } .waitlist-h span{color:var(--bone-ink)} .field{display:flex;flex-direction:column;gap:9px} .field.wide{grid-column:1/-1} .field label{ font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--muted); } .field input,.field select,.field textarea{ font-family:inherit;font-size:15px;color:var(--bone-ink); background:transparent;border:0;border-bottom:1px solid var(--rule); padding:10px 0;transition:border-color .3s ease; } .field textarea{resize:vertical;min-height:88px} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--red)} /* consent rows. Sentence case and sentence size, not the mono uppercase the other labels use: these are terms the visitor has to actually read, so they are set to be read rather than to look like a field name. */ .field.check label{ display:flex;gap:12px;align-items:flex-start;cursor:pointer; font-family:inherit;font-size:13.5px;line-height:1.65;letter-spacing:0; text-transform:none;color:var(--muted); } .field.check input{flex:none;width:16px;height:16px;margin-top:2px;accent-color:var(--red);border-bottom:0} .form .submit{grid-column:1/-1;margin-top:8px;justify-self:start} .form-note{ font-family:"DM Mono",ui-monospace,monospace;font-size:11px;line-height:1.7; letter-spacing:.06em;color:rgba(22,22,26,.4); } /* ------------------------------------------------------------------ * * footer * ------------------------------------------------------------------ */ .foot{ position:relative;background:var(--ink);color:#fff;isolation:isolate; padding:clamp(70px,9vh,104px) var(--edge) 40px; } .foot-inner{position:relative;z-index:3} .foot-top{ display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,4vw,60px); padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.1); } .foot-brand .logo{margin-bottom:20px} .foot-brand p{color:var(--muted-d);font-size:13.5px;line-height:1.8;max-width:34ch} .foot-col h4{ font-family:"DM Mono",ui-monospace,monospace;font-weight:500; font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42); margin-bottom:18px; } .foot-col a,.foot-col span{display:block;padding:7px 0;color:rgba(255,255,255,.82);font-size:13.5px;transition:color .25s ease} .foot-col a:hover{color:var(--red-on-dark)} .foot-col span{color:rgba(255,255,255,.36)} .foot-legal{ margin-top:34px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap; color:rgba(255,255,255,.34);font-size:11.5px;line-height:1.75; } .foot-legal p{max-width:78ch} .foot-links{display:flex;gap:18px;flex-wrap:wrap} .foot-links a{color:rgba(255,255,255,.5);transition:color .25s ease} .foot-links a:hover{color:var(--red-on-dark)} /* ------------------------------------------------------------------ * * module pages — /hypno, /na-expert, /toolbox * * Shared, not per-page. All three are the same document: a dark hero, a * spec strip, then bone sections down to the same footer. Only the copy * and one or two accent decisions differ, so writing this once is the * difference between three pages and three variants of one page. * Anything genuinely unique to a single page stays in that page's own *