/* ========================================================================== Arizona Kayak Bass Nation Built to the layout language of floridabnks.com, the club's own reference: · a full-bleed photographic hero with the header sitting ON it · full-width alternating bands - paper, navy, deep navy · huge centred uppercase headlines with a hand-drawn gold underline · serif body copy in a narrow centred column · gold pill buttons · a knockout sponsor grid on navy at the foot MOBILE FIRST. Every rule here is the phone layout; media queries only add. RETUNING: the brand is the :root block below. Change the colours and the two fonts and the whole site follows. ========================================================================== */ /* ---------- fonts, self-hosted, no external request ---------- */ @font-face{font-family:"Montserrat";src:url(fonts/montserrat-var.woff2) format("woff2");font-weight:100 900;font-display:swap} @font-face{font-family:"Inter";src:url(fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"Inter";src:url(fonts/inter-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"Inter";src:url(fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap} @font-face{font-family:"Inter";src:url(fonts/inter-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap} @font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap} /* The poster face, for the club's name over the photograph and nothing else. Archivo at 900 and 75% width - the mock-up's title measures 10.4 cap-heights wide for ARIZONA KAYAK and this is 9.8, against 14.5 for Montserrat Black, which is why the name read as the wrong typeface rather than merely the wrong size. One pinned instance, 14KB. */ @font-face{font-family:"Archivo Condensed";src:url(fonts/archivo-condensed-900.woff2) format("woff2");font-weight:900;font-display:swap} /* And the same family at text weights, for the opening paragraph under the name and the line above it, which the mock-up sets in Archivo too. Variable 400-600 in one file. */ @font-face{font-family:"Archivo";src:url(fonts/archivo-text-var.woff2) format("woff2");font-weight:400 600;font-display:swap} /* ---------- THE BRAND ---------- */ :root{ /* THE TOP BAR. One colour, every page. This is the colour of the LAKE PLEASANT OPEN strip at the foot of the hero, sampled from the rendered page rather than from the stylesheet - that strip is rgba(10,26,38,.55) laid over the photograph, so what you actually see is neither the overlay nor the photo. Measured: #191F22. Contrast 16.7:1 with white, 9.9:1 with gold. Two earlier goes at this, both wrong and both worth remembering: the sky at the top of the photo (#5E4340), on the theory that the bar should vanish against what it touches - it read as a brown panel; then the mountain ridge (#1D1315), which was dark enough but carried the photo's warmth. Arthur picked the banner, and he is right: the bar now matches something already on the page instead of competing with it. TO CHANGE IT, change this one line - nothing else refers to the colour. */ --bar:#191F22; --head-h:84px; /* phone: see the 980px block for the desktop height */ --navy:#2A5578; /* the band blue */ --navy-d:#1C3D57; /* footer / deeper */ --navy-l:#3C6B91; /* There used to be a --water pale blue here, and a .band-water that used it. It dressed the banner at the top of every inner page and two sections besides. Retired 2026-09-29: Arthur named Tournament Central as the page the rest of the site should follow, and that page has no pale blue in it - navy, the deeper navy, gold and the off-white paper. The class is gone as well as the colour, so nothing can reach for it by accident. */ --paper:#EFEEEA; /* off-white band */ --white:#FFFFFF; /* THE GOLD. Sampled from the logo artwork itself - uploads/logo-akbn-white-*.png - not chosen to sit beside it. #F4CA2F is the flat fill of the BASS lettering and the Arizona outline, 31.5% of every gold pixel in the file. Checked for a second, brighter gold before settling on this one: the #FFD42A family is 86% adjacent to that fill and breaks into 346 fragments none bigger than 210px, so it is edge noise along the same shapes, not a colour of its own. There is one gold in the artwork. It was #F0C23C, which was a half-step duller and 2.5 degrees redder, and next to the logo in the header it read as a near miss rather than as a match. Every yellow on the site comes from these two lines - the buttons, the nav pills, the kickers, the links on dark bands, the divider under the header and the header's own gold rule. There is no hard-coded yellow anywhere else in the stylesheet, so this is the only place it is ever set. --gold-d is the pressed/hover tone, derived from the new gold by the same lightness step the old pair used (x0.827), so the two stay related rather than drifting. Contrast, since gold carries text: 10.6:1 against the top bar, 5.0:1 against the navy bands, and ink on gold 11.8:1 - all better than the colour it replaces. NOT the warning amber. .notice-warn and .ph-tag use #FDF3DF / #E3C07A / #7A5210 on purpose: a warning that looks like a button is not a warning. */ --gold:#F4CA2F; --gold-d:#D8AD19; --ink:#111315; --ink-2:#2E3438; --slate:#616B70; --line:#DAD6CC; --line-dark:rgba(255,255,255,.22); --display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif; --poster:"Archivo Condensed","Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif; --poster-body:"Archivo","Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; --r:6px; --wrap:1180px; --pad:20px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden} body{overflow-x:hidden} body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body); font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block;height:auto} a{color:var(--navy);text-decoration:none} a:hover{text-decoration:underline} .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)} .narrow{max-width:660px;margin-inline:auto} .muted{color:var(--slate)} .center{text-align:center} .sr-only,.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;background:#fff; color:var(--ink);padding:10px 16px;border-radius:var(--r);z-index:400} :focus-visible{outline:3px solid var(--gold);outline-offset:2px} /* ---------- type: heavy uppercase display, serif body ---------- */ h1,h2,h3,h4{font-family:var(--display);font-weight:800;text-transform:uppercase; line-height:1.02;letter-spacing:-.01em;margin:0} h1{font-size:clamp(2.2rem,8.5vw,4.6rem)} h2{font-size:clamp(1.9rem,6.6vw,3.3rem)} h3{font-size:clamp(1.1rem,3.4vw,1.4rem);letter-spacing:0} p{margin:0 0 1.1em} .lede{font-size:1.06rem} .kicker{font-family:var(--body);font-weight:600;color:var(--navy); font-size:clamp(1.02rem,3.4vw,1.32rem);line-height:1.4;text-transform:none;letter-spacing:0;margin:0 0 1rem} .on-dark .kicker,.kicker.on-dark{color:var(--gold)} .eyebrow{display:inline-block;font-family:var(--mono);font-weight:700;text-transform:uppercase; letter-spacing:.2em;font-size:.64rem;color:var(--navy);margin:0 0 .8rem} .on-dark .eyebrow{color:var(--gold)} .data{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums} /* A Stripe id is 64 unbroken characters, so it has nowhere to wrap and pushed itself out of the card on the member record (Arthur, 2026-10-16: "this data is out of the column"). Identifier cells may break anywhere; short values in the same class never reach the edge, so nothing else changes. */ table.data-table td.data{overflow-wrap:anywhere;word-break:break-word} /* the hand-drawn gold underline under a headline, as on the reference site */ .swash{display:block;width:min(360px,72%);height:14px;margin:6px auto 0} .swash path{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round} .swash-l{margin-inline:0} .swash-dark path{stroke:var(--ink)} /* ---------- buttons: gold pills ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display); font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:.82rem;line-height:1; padding:1.05em 1.9em;border-radius:999px;border:2px solid transparent;cursor:pointer; transition:background .16s,color .16s,border-color .16s,transform .12s} .btn:hover{text-decoration:none;transform:translateY(-1px)} .btn-primary{background:var(--gold);color:var(--ink);border-color:var(--gold)} .btn-primary:hover{background:var(--gold-d);border-color:var(--gold-d);color:var(--ink)} .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff} .btn-dark{background:var(--navy);color:#fff;border-color:var(--navy)} .btn-dark:hover{background:var(--navy-d);border-color:var(--navy-d);color:#fff} .btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)} .btn-outline:hover{background:var(--navy);color:#fff} /* btn-ghost-dark was used in twenty files - every secondary action on the public site and every Cancel in the admin - and defined in neither stylesheet, so all of them rendered as bare words with a transparent border. Same species as the five admin custom properties that were used and never declared. Defined here, once, where the other variants live. */ .btn-ghost-dark{background:transparent;color:var(--ink-2);border-color:var(--line)} .btn-ghost-dark:hover{background:var(--ink-2);color:#fff;border-color:var(--ink-2)} .band-navy .btn-ghost-dark,.band-bar .btn-ghost-dark,.band-photo .btn-ghost-dark{ color:#fff;border-color:rgba(255,255,255,.45)} .band-navy .btn-ghost-dark:hover,.band-bar .btn-ghost-dark:hover,.band-photo .btn-ghost-dark:hover{ background:#fff;color:var(--ink);border-color:#fff} .btn-lg{font-size:.92rem;padding:1.15em 2.2em} .btn-sm{font-size:.72rem;padding:.85em 1.4em} .btn-block{display:flex;width:100%} /* align-items:center so a button never stretches to the row's height - a lone btn-lg in a centred block was coming out taller than the same button in the hero. */ .btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .btn-row.center{justify-content:center} /* ---------- header: one solid bar, the same on every page ---------- */ /* It used to float transparently over the hero on the home page and turn white on every other page - two headers to keep in step, and the white one shared nothing with the rest of the site. Now there is one: solid --bar, sticky, everywhere. The .solid class is kept because the templates still pass it, but it no longer differs. */ /* STATIC, on purpose. It sat at the top of the SCREEN for several rounds and Arthur kept reporting it as following him down the page - which it was, that being what fixed means. What he wanted was the top of the PAGE: the bar belongs to the top of the document and scrolls out of sight like everything else. No fixed, no sticky, and nothing reserving space for it - it takes its own room in the flow. */ .site-head,.site-head.solid{position:relative;z-index:100; background:var(--bar);overflow:visible} /* The divider is drawn, not a border, so it can sit at a slight angle. It is wider than the header and clipped by nothing, so rotating it cannot open a gap at either corner. */ /* Straight. It was angled for the option-3 mockup, but an angle means the line meets the logo at a different height than it meets the rest of the page, so "through the middle of NATION" and "level" could not both be true. Arthur chose level. */ .site-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--gold);pointer-events:none;z-index:1} /* The bar is full width, not the centred 1180px wrap the rest of the page uses, so the logo can sit hard against the left edge instead of indented with the body text. */ .head-inner{display:flex;align-items:center;justify-content:space-between;gap:14px; max-width:none;padding-inline:14px;padding-block:12px; /* box-sizing is border-box for everything on this site, so min-height is the FULL height including padding. This used to subtract the padding as well, which made the bar 86px while --head-h said 110 - and every measurement taken against --head-h was wrong by that 24px: the hero reserved too much, and the logo sized to put NATION on the divider landed it 24px low. */ min-height:var(--head-h)} .brand{display:flex;align-items:center;gap:11px;min-width:0;color:#fff} .brand:hover{text-decoration:none} /* A square mark. The club's own logo is wide, so it gets its own rule below. */ .brand-mark{width:56px;height:56px;object-fit:contain;flex:0 0 auto} /* The club's logo carries three lines of type inside the artwork, so it needs real height to stay readable - at 52px the KAYAK ANGLERS line stops being legible. The bar is sized around the logo rather than the other way round. */ /* On a phone the logo stays inside the bar - a mark hanging over the hero is fine on a wide screen and just covers things on a narrow one. */ .brand-logo{height:64px;width:auto;max-width:min(66vw,340px);object-fit:contain; display:block;flex:0 0 auto} .brand-mark-ph{display:grid;place-items:center;width:56px;height:56px;background:var(--gold); color:var(--ink);border-radius:8px;font-family:var(--display);font-weight:900;font-size:1.2rem} .brand-text{display:flex;flex-direction:column;min-width:0} .brand-name{font-family:var(--display);font-weight:900;font-size:1.02rem;line-height:1.08; text-transform:uppercase;letter-spacing:.01em} .site-nav{display:none} .nav-toggle{display:grid;place-content:center;gap:5px;width:46px;height:46px;flex:0 0 auto; background:rgba(0,0,0,.35);border:1px solid var(--line-dark);border-radius:8px;cursor:pointer} .nav-toggle span{display:block;width:20px;height:2px;background:#fff;transition:transform .2s,opacity .2s} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* mobile drawer */ .drawer{position:fixed;inset:var(--head-h) 0 0;z-index:59;background:var(--navy-d);color:#fff;overflow-y:auto} .drawer-inner{padding:18px var(--pad) 40px;display:grid;gap:22px;max-width:var(--wrap);margin:0 auto} .drawer-group{display:grid;gap:1px} .drawer-h{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.2em; color:var(--gold);padding-bottom:8px} .drawer-group a{display:block;color:#fff;padding:12px 0;border-bottom:1px solid var(--line-dark); font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:.9rem} .drawer-group a:hover{color:var(--gold);text-decoration:none} /* ---------- hero: full-bleed image, content centred ---------- */ /* Exactly the rest of the screen, so the section below never peeks in on first load. svh, not vh: on a phone vh counts the space behind the browser's own chrome and the hero would be taller than what you can actually see. The fallback line is for anything that does not know svh. */ /* Two rows: the title takes whatever is left and sits centred in it, and the next-event strip is pinned to the bottom edge of the screen. Before the hero had a fixed height the rows could just stack; now that it is exactly one screen, they cannot. */ .hero{position:relative;min-height:calc(100vh - var(--head-h)); min-height:calc(100svh - var(--head-h));display:grid;grid-template-rows:1fr auto;align-items:center; background:var(--navy-d) center/cover no-repeat;color:#fff;text-align:center;overflow:hidden} .hero-art{position:absolute;inset:0;z-index:0} .hero-art svg{width:100%;height:100%;display:block} /* THE HERO VEIL, set from a contrast measurement rather than by eye. The old middle stop was .30, and the middle is exactly where the text sits - over the sun-lit water, which is the brightest part of the photograph. Sampled behind the opening line on the live page, the 95th-percentile background was rgb(186,132,34): 3.28:1 against white, under the 4.5:1 that body text needs. Compositing another .20 of the same colour takes it to 4.56:1, so the middle stop becomes .48 and the ends come up with it. A gradient rather than a flat wash so the photograph still reads as a photograph, and the deepest part stays at the foot where the NEXT EVENT strip sits. */ .hero::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(10,26,38,.78) 0%,rgba(10,26,38,.58) 42%,rgba(10,26,38,.86) 100%)} /* NOTE: the rule above is the drawn-art hero only. With a photograph set - which is every real site - .hero-has-photo::after further down wins. Both are kept in step on purpose. */ .hero-inner{position:relative;z-index:2;padding-block:40px;align-self:center} .hero h1{margin:0 auto;max-width:15ch;text-shadow:0 2px 26px rgba(0,0,0,.45)} /* The 15ch that shapes a short hero title into two lines has to go when the title is sized with the band headings - it would hold this one to two lines at a size chosen for one. */ .hero h1.fit-title{max-width:none} .hero .lede{max-width:58ch} .hero .lede{color:rgba(255,255,255,.92);max-width:46ch;margin:16px auto 0; text-shadow:0 1px 14px rgba(0,0,0,.5)} .hero .btn-row{margin-top:26px} /* The season sponsor slot under the hero buttons. The label is set the same way as the NEXT EVENT strip below it - mono, gold, widely tracked - so the two read as one family rather than as a caption that wandered in. */ .hero-presented{margin-top:30px;display:flex;justify-content:center} /* The plaque, and it earns its place twice over. A shadow alone did not save the gold label over the lit water of the sunset hero, and a sponsor's own logo has the same problem from the other side - we cannot know whether what they send is dark or light. Same treatment as the NEXT EVENT strip below it, rgba(10,26,38,.55) over a 3px blur, so the slot reads as part of the design rather than as a patch, and any logo lands on a known background. It is also the visual cue that this is a paid placement. */ .hero-presented > .plaque{display:inline-flex;flex-direction:column;align-items:center;gap:8px; max-width:100%;padding:14px 30px 16px;border-radius:10px;background:rgba(10,26,38,.5); border:1px solid var(--line-dark);backdrop-filter:blur(3px)} .hero-presented > .plaque > a{max-width:100%} @media (max-width:420px){.hero-presented > .plaque{padding-inline:18px}} /* The shadow is not decoration. Photographed over the sunset hero the gold label sits on bright lit water, and gold on gold is the one pairing this palette cannot carry - it disappeared in the first mock-up. The hero title and lede are shadowed for the same reason; this matches them so the slot survives whatever photograph the club uploads. */ .hero-presented .lbl{font-family:var(--mono);font-size:.64rem;text-transform:uppercase; letter-spacing:.22em;color:var(--gold)} /* Capped on BOTH axes. We do not choose the file the sponsor sends: a long wordmark at 54px tall is several hundred pixels wide and would run off a phone if only the height were bound. max-width keeps it inside the plaque at every width, and object-fit keeps it in proportion when the width is what bites. */ .hero-presented img{max-height:54px;max-width:100%;width:auto;height:auto;object-fit:contain; filter:drop-shadow(0 2px 10px rgba(0,0,0,.4));transition:transform .2s ease} /* line-height:0 so the anchor is exactly the logo and not a band of leading under it */ .hero-presented a{display:inline-block;line-height:0;border-bottom:0} .hero-presented a:hover img,.hero-presented a:focus-visible img{transform:translateY(-3px)} .hero-presented a:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:3px} @media (prefers-reduced-motion:reduce){.hero-presented img{transition:none} .hero-presented a:hover img,.hero-presented a:focus-visible img{transform:none}} .hero-next{position:relative;z-index:2;background:rgba(10,26,38,.55);border-top:1px solid var(--line-dark); backdrop-filter:blur(3px);padding:18px 0} .hero-next .wrap{display:grid;gap:10px;text-align:center} .hero-next .lbl{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.22em;color:var(--gold)} .hero-next .ttl{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.15rem} .hero-next .meta{font-size:.92rem;color:rgba(255,255,255,.85)} /* Register / Live leaderboard sat touching each other in this strip (Arthur, 2026-10-15). Spaced with a margin rather than by making the wrapper a flex row: the wrapper is a flex ITEM of .hero-next .wrap, and turning it into a flex container re-aligned it from the text baseline to its own box centre, which pushed the buttons below the event line. */ .hero-next-btns{display:inline} .hero-next .btn + .btn{margin-left:12px} /* ---------- bands ---------- */ .band{padding-block:56px;position:relative;overflow:hidden} /* The equal-height rule for the content bands lives in the 980px block further down: it only makes sense once the layouts are side by side. On a phone everything stacks and a fixed height would either clip the content or leave a hole under it. */ .band-paper{background:var(--paper)} .band-navy{background:var(--navy);color:#fff} /* ---------- a band with a photograph behind it ---------- Treated exactly like the NEXT EVENT strip over the hero: rgba(10,26,38,.55) with a 3px blur. The blur is why this needs a pseudo-element rather than a gradient - backdrop-filter blurs what is painted BEHIND the element, so a gradient layered onto the same background would have nothing to blur. ::before sits over the band's own photograph and blurs that. .band-photo carries the treatment; a second class carries the picture. That way a new section needs one line and a file, and every photo band stays in step automatically - which was not true of the retired band-water. */ .band-photo{position:relative;color:#fff; background-size:cover;background-position:center;background-repeat:no-repeat; background-color:var(--navy-d)} .band-photo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:rgba(10,26,38,.55); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .band-photo h2{color:rgba(255,255,255,.9)} .band-photo a:not(.btn){color:var(--gold)} .band-photo .kicker{color:var(--gold)} .band-photo .prose{color:rgba(255,255,255,.9)} /* Anything with its own light surface keeps dark type: white cards and the standings table would otherwise inherit the band's light text and lose their contents. */ .band-photo .data-table{color:var(--ink)} .band-photo .data-table a{color:var(--ink)} .band-photo .data-table a:hover{color:var(--navy)} /* A dark button on a dark band is invisible. */ .band-photo .btn-dark{background:var(--gold);color:var(--ink);border-color:var(--gold)} .band-photo .btn-dark:hover{background:var(--gold-d);border-color:var(--gold-d);color:var(--ink)} /* the pictures */ .band-lake{background-image:url(../uploads/schedule-bg.jpg)} .band-aoy{background-image:url(../uploads/aoy-bg.jpg)} /* A deeper tint on the standings band, to sit with the hero (Arthur). It ADDS to the shared .band-photo veil rather than replacing it: only the colour is overridden here, so the 3px backdrop blur above still applies and the picture is still softened, just further down. NOT a contrast fix - measured before changing it, the background beside the panel was already 5.39:1 at the 98th percentile against white, past the 4.5 that text needs. This is how the band should feel next to a hero that is now much deeper, and the comment says so in case someone later reads the number as a requirement. */ .band-aoy::before{background:rgba(10,26,38,.72)} /* The membership band takes the same deeper tint - Arthur, 2026-10-01, after seeing the standings band - and then 20% darker again, solved the same way as the hero: sample the band's background, find the extra overlay that takes its mean luminance to 0.80 of what it was. Both values were found by RENDERING a sweep and measuring, not by predicting: a per-pixel model of the compositing overshot every time at these low luminances, and the two bands needed very different steps to move by the same 20% - the hero an extra .25 on its stops, this one .72 -> .775 - because they start from different pictures behind different amounts of existing veil. One shared number would have moved them unequally. Same mechanism: only the colour, so the shared 3px backdrop blur still applies, and the picture is softened as before and simply taken further down. The sponsor band is the third .band-photo and is deliberately still at .55; he has not asked for that one, and the base rule is left alone so it stays where it was. */ .band-lake::before{background:rgba(10,26,38,.775)} .band-sponsors{background-image:url(../uploads/sponsors-bg.jpg)} /* NOT .band-navy a - a:not(.btn), the same exclusion .band-photo and .band-bar already carry. A plain class like .btn-primary loses to .band-navy a on specificity, so this rule was painting BUTTON labels gold too: gold text on a gold pill, invisible until hover changed it (Andrew at the club, 2026-10-06, on the next-tournament hero). The .ev-maphero block further down fixed one container of this; excluding buttons here fixes every navy band at once. Ghost buttons on this band get their own declared white back, which is what they are drawn for on a dark ground. */ .band-navy a:not(.btn){color:var(--gold)} .band-white{background:var(--white)} /* The same colour as the top bar and the event strip, for a band that should read as part of that furniture rather than as another page section. Everything inside it has to be relit: the heading, the kicker, the body copy and the button were all drawn for an off-white background. */ .band-bar{background:var(--bar);color:#fff} /* The heading takes the same colour as the body copy beneath it, not pure white. */ .band-bar h2{color:rgba(255,255,255,.9)} .band-bar .kicker{color:var(--gold)} .band-bar .prose{color:rgba(255,255,255,.9)} .band-bar a:not(.btn){color:var(--gold)} /* The schedule cards are white and live on this band now. .card-link is color:inherit, so without this they take the band's light text onto a white card and vanish. Same fault as before, on the other band - it follows the CARDS, not the colour. */ /* An outline button drawn in navy is all but invisible on a dark band. Written for both dark treatments so any section using them inherits it. */ .band-bar .btn-outline,.band-photo .btn-outline{color:var(--gold);border-color:var(--gold);background:transparent} .band-bar .btn-outline:hover,.band-photo .btn-outline:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)} /* 2026-10-18, the Live leaderboard link. Arthur: "the text color blends into the background, making it invisible unless you hover over it." tourneyx_buttons() draws Live leaderboard and Results as .btn-outline, which is navy on navy in these two hero strips - legible ONLY on hover, because :hover flips it to white on navy. SCOPED TO THE TWO STRIPS, NOT TO .band-navy, and that is deliberate. A descendant rule on the band would also hit .card, which is WHITE and lives inside band-navy on the championship page (spotlight_card draws a .btn-outline in one) - gold on white is the same bug pointing the other way. This file already carries that lesson about .card-link: the treatment follows the SURFACE the button sits on, not the band it is nested in. .ev-hero and .hero-next hold text and buttons only, so the navy under them is the surface. Gold rather than white: it sits beside the gold Register button in the same row and reads as its secondary, and gold on navy is this site's strongest pair. */ .ev-hero .btn-outline,.hero-next .btn-outline{color:var(--gold);border-color:var(--gold);background:transparent} .ev-hero .btn-outline:hover,.hero-next .btn-outline:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)} .ev-hero .btn-outline:focus-visible,.hero-next .btn-outline:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .band-bar .btn-dark{background:var(--gold);color:var(--ink);border-color:var(--gold)} .band-bar .btn-dark:hover{background:var(--gold-d);border-color:var(--gold-d);color:var(--ink)} /* 34px -> 44px, the 30% Arthur asked for between a band title and what follows it. Same component on every band, so they all breathe the same amount. */ .band-head{text-align:center;margin-bottom:44px} .band-head h2{margin:0} .band-ghost{position:absolute;inset:0;opacity:.06;pointer-events:none;z-index:0} /* Smallmouth scales: two staggered rows of arcs, barely there. Arthur asked for a texture you feel rather than see, so this stays under 5% white. */ .band-scales::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: radial-gradient(circle 26px at 50% 0%,transparent 0 86%, rgba(255,255,255,.05) 86% 93%,transparent 93%), radial-gradient(circle 26px at 50% 0%,transparent 0 86%, rgba(255,255,255,.05) 86% 93%,transparent 93%); background-size:56px 28px; background-position:0 0,28px 14px} .band-scales > .wrap{position:relative;z-index:1} .band-ghost svg{width:100%;height:100%} .band > .wrap{position:relative;z-index:1} /* the split: image on a painted blob, text beside it */ .split{display:grid;gap:30px} /* A photo floated on a painted shape, drawn as an SVG behind it. The MEMBERS photo still uses it. The club photo does not any more - Arthur asked for its shape to go on 2026-09-29 - so that one gets .blob-plain, which is the same frame without the inset the shape needed. */ .blob{position:relative;padding:22px} .blob.blob-plain{padding:0} /* When a band has no photo it is one column, not two with a gap where a picture would have been. */ .solo-text{max-width:58ch;margin-inline:auto;text-align:center} /* Both photos are plain now - Arthur asked for the members shape to go as well. */ .blob svg{position:absolute;inset:0;width:100%;height:100%;z-index:0} .blob img{position:relative;z-index:1;border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.22)} .blob-ph{position:relative;z-index:1;aspect-ratio:4/3;display:grid;place-items:center; background:rgba(255,255,255,.9);border:1px dashed var(--navy);color:var(--navy); font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;text-align:center;padding:20px} /* ---------- cards ---------- */ .grid{display:grid;gap:16px} /* overflow-wrap here, once, rather than on each card that turns out to hold a long word. FOURTH INSTANCE TODAY of the same fault: an email address or a URL is a single unbreakable word, a card in a sidebar is about 300px wide, and by default the word wins and runs out through the side of the box. overflow-wrap is an INHERITED property, so one declaration on .card reaches every paragraph, link and cell inside it. break-word rather than anywhere: it breaks only a word that could not fit on a line of its own, so ordinary text is untouched. */ .card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px; overflow-wrap:break-word;min-width:0} .prose{overflow-wrap:break-word} /* Cards on a dark band are a translucent DARKENING of whatever is behind them, not a panel in a fixed colour: black at .33 sits well below the band on the flat sections and, on the photo bands, lets the picture show through while settling it enough to read against. It started as a white wash that lightened; Arthur wanted the tiles darker and still see-through, which is the same idea with the sign flipped. One rule covers the navy, dark and photo bands. */ /* Every word in a card on a dark band is plain white - title, lake, date, badge and all. The tinted version read as a different typeface to Arthur even though only the colour had changed, so there are no near-whites in here at all. */ .band-navy .card,.band-bar .card,.band-photo .card{background:rgba(0,0,0,.33); border-color:var(--line-dark);color:#fff} .band-navy .card h3,.band-bar .card h3,.band-photo .card h3, .band-navy .card h3 a,.band-bar .card h3 a,.band-photo .card h3 a{color:#fff} .card h3{margin:0 0 8px} .card .meta{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.14em; color:var(--slate);margin-bottom:10px} .band-navy .card .meta,.band-bar .card .meta,.band-photo .card .meta{color:#fff} /* The news excerpt is .muted, which is a mid grey built for a light card. */ .band-navy .card .muted,.band-bar .card .muted,.band-photo .card .muted{color:#fff} .card-link{color:inherit} /* event card */ .ev{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start} .ev-date{background:var(--navy);color:#fff;border-radius:4px;padding:10px 12px;text-align:center;min-width:62px} /* Option 1's date tile is dark with a light outline - a quiet frame beside the title, where the gold block had been shouting over it. */ .band-navy .ev-date,.band-bar .ev-date,.band-photo .ev-date{background:transparent; color:#fff;border:1px solid rgba(255,255,255,.32)} .ev-date .m{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold)} .band-navy .ev-date .m,.band-bar .ev-date .m,.band-photo .ev-date .m{color:#fff} .ev-date .d{font-family:var(--display);font-weight:900;font-size:1.6rem;line-height:1} .ev-body{min-width:0} .ev-lake{color:var(--navy);font-weight:600} .band-navy .ev-lake,.band-bar .ev-lake,.band-photo .ev-lake{color:#fff;font-weight:500} .ev-foot{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px} /* ---------- the Angler of the Year leaderboard ---------- Arthur sent a reference and asked for this layout "but not the cartoonish stuff". So the arrangement is his - one row per angler, columns for rank, name, city and points, the top three marked - and the medals, crowns and metallic gradients are not. What marks the top three here is the site's own gold: a tinted row, a coloured left edge, and the leader's points in gold. Nothing is used that the palette does not already contain. It replaces a three-across grid of tiles. Fifteen anglers in three columns read as a wall of cards to search; in one ranked column the order IS the information, which is what a standings table is for. A SOLID panel, not a translucent one: this band carries a photograph, and a wash lets a bright picture read through every row. Solid --bar stops the picture at the panel edge. */ /* Capped and centred rather than filling the 1180 measure. At full width the name column takes all the slack and the city drifts into the middle of nowhere, half a screen from the angler it belongs to; at 980 the four columns sit close enough to read across a row, which is the whole job of a leaderboard. */ /* The panel carries its own dark ground AND its own text colour. It inherited white from the band on the home page, which is the only place it lived until the standings page used it - there the band is light paper and every name and every points figure came out near-black on near-black. A panel that paints its own background has to paint its own foreground. */ .standings-panel{background:var(--bar);border:1px solid var(--line-dark);color:#fff; border-radius:12px;overflow:hidden;max-width:980px;margin-inline:auto} .aoy-head,.aoy-row{display:grid;grid-template-columns:58px minmax(0,1fr) minmax(0,210px) 118px; align-items:center;gap:14px;padding:12px 18px} .aoy-head{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.18em; color:rgba(255,255,255,.55);border-bottom:1px solid var(--line-dark);padding-block:14px} .aoy-head .p,.aoy-row .p{text-align:right} .aoy-head .r,.aoy-row .r{text-align:center} .aoy-list{list-style:none;margin:0;padding:0} .aoy-row{border-bottom:1px solid rgba(255,255,255,.07);border-left:3px solid transparent} .aoy-row:last-child{border-bottom:0} .aoy-row .r{font-family:var(--mono);font-size:.9rem;color:rgba(255,255,255,.5)} .aoy-row .n{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1rem; line-height:1.15;overflow-wrap:break-word} .aoy-row .c{display:flex;align-items:center;gap:8px;min-width:0;color:rgba(255,255,255,.72)} .aoy-row .p b{font-family:var(--display);font-weight:900;font-size:1.3rem; font-variant-numeric:tabular-nums} .aoy-row .p small{font-family:var(--mono);font-weight:400;font-size:.56rem;letter-spacing:.16em; text-transform:uppercase;margin-left:6px;opacity:.65} /* The top three in gold rather than in medals. First takes the full accent, second a plain light edge, third the pressed gold - a descending order readable at a glance with nothing added to the palette. */ .aoy-1{background:rgba(244,202,47,.10);border-left-color:var(--gold)} .aoy-2{background:rgba(255,255,255,.055);border-left-color:rgba(255,255,255,.55)} .aoy-3{background:rgba(244,202,47,.05);border-left-color:var(--gold-d)} .aoy-1 .r,.aoy-2 .r,.aoy-3 .r{color:#fff;font-weight:700} .aoy-1 .p b{color:var(--gold)} /* The standings page: the same board, the whole season, and the stat columns that do not fit on the home page. Wider, because eight columns need it. */ .aoy-board-full{max-width:1180px} .aoy-board-full .aoy-head,.aoy-board-full .aoy-row{ grid-template-columns:54px minmax(0,1fr) minmax(0,170px) 68px 58px 86px 58px 112px;gap:12px} .aoy-board-full .s{text-align:right;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.78)} .aoy-board-full .aoy-head .s{color:rgba(255,255,255,.55)} /* Taken away worst-first as the screen narrows. The name and the points never go. */ @media (max-width:1100px){ .aoy-board-full .aoy-head,.aoy-board-full .aoy-row{ grid-template-columns:54px minmax(0,1fr) minmax(0,150px) 68px 86px 112px} .aoy-board-full .s-best,.aoy-board-full .s-fish{display:none} } @media (max-width:860px){ .aoy-board-full .aoy-head,.aoy-board-full .aoy-row{ grid-template-columns:48px minmax(0,1fr) 86px 104px;gap:10px} .aoy-board-full .c,.aoy-board-full .s-ev{display:none} } @media (max-width:620px){ .aoy-board-full .aoy-head,.aoy-board-full .aoy-row{grid-template-columns:44px minmax(0,1fr) 92px} .aoy-board-full .s-in{display:none} } /* Under 760px the city column goes rather than being squeezed: the name and the points are what this table is for, and the city is the first thing that can be lost. */ @media (max-width:760px){ .aoy-head,.aoy-row{grid-template-columns:44px minmax(0,1fr) 92px;gap:10px;padding-inline:12px} .aoy-head .c,.aoy-row .c{display:none} .aoy-row .n{font-size:.92rem} .aoy-row .p b{font-size:1.1rem} } /* ---------- become a member ---------- Arthur asked for this whole block much bigger. The heading is sized the same way as the season title: from the measured width of its own words against its own column, so it grows to fill the space it has and shrinks for a longer heading rather than colliding with anything. The paragraph is a real reading size now - it is several sentences of the club explaining itself, and it was set at the same 1.06rem as a one-line lede. */ /* ---------- the two big band headings ---------- They share one size, taken from whichever of them is longer, so they match and neither wraps early. See the note in home.php for why the shorter cannot set the size. AND THEY BREAK OUT OF THE READING MEASURE. The bands are 1180px because that is the right line length for paragraphs; it is far too narrow for a heading of thirty characters at this size, which is what made them wrap after three words. The heading takes the window instead, centred on its parent, while the paragraph under it keeps the measure it needs. No container query - these are shrink-to-fit blocks and containment collapses them. */ /* Arthur asked for the hero bigger. These three are one size by his earlier request, so the SET grows rather than the hero leaving it - otherwise the match he asked for two messages ago quietly breaks. And the size could only grow by widening the breakout: at 4.4rem the longest of the three already filled 1680px, so the cap was not the limit, the width was. 1840px with a 24px gutter each side, and the cap follows at 5.2rem so the width stays the thing in charge. */ .fit-title{max-width:none;width:min(1840px, calc(100vw - 48px)); margin-inline:auto;position:relative;left:50%;transform:translateX(-50%); font-size:clamp(1.9rem, calc(min(1840px, 100vw - 48px) / var(--w,12)), 5.2rem)} .member-block .prose{max-width:58ch;margin-inline:auto} .member-block .prose p{margin-bottom:1em} .member-block .btn{font-size:1rem;padding:1.15em 2.4em} /* ONE SIZE FOR THE PAGE'S REAL PROSE. The hero's opening line, the club paragraph and the membership paragraph are the three blocks on the home page where the club actually writes something, and Arthur has now asked for each of them to match the others in turn. A shared class rather than three rules, so the next one matches by being given the class - and so there is one place to change if the size is ever wrong again. 1.06rem, the site's lede size, is right for a single line under a title and is a caption size next to three sentences. */ .prose-lg{font-size:1.3rem;line-height:1.62} @media (max-width:760px){ .prose-lg{font-size:1.12rem} } /* ---------- the season trail on the home page ---------- Arthur's reference layout, in this site's type and colour: the title and the call to action hold their own column, and the events run down beside them as wide rows with a picture bleeding off the end behind a diagonal. ONE ANCHOR PER ROW, not a card containing links. The whole row is the target, which is the right hit area on a phone and one tab stop rather than three. */ .trail{display:grid;gap:40px} .trail-intro{align-self:center} /* BIGGER, because the section read as mostly empty space (Arthur). The title is the thing with room to grow: three short words on their own lines, so it can take a lot more size before it wraps, and it is what balances the weight of the bars beside it. The eyebrow and its gold dash are gone - he asked, and with a title this size they were noise in front of it. */ /* THE TITLE IS SIZED BY ITS OWN LONGEST LINE AGAINST ITS OWN COLUMN, not by the viewport. Twice now a cap chosen for the word that happened to be there was wrong the moment the club typed a different one: 5.4rem put SCHEDULE across the first bar, and 5.8rem did the same to TOURNAMENTS. A viewport-based clamp cannot know how long the word is, and a fixed cap cannot know how wide the column is - this knows both. --ch is the longest line's character count, set by the template; 100cqi is this column's width; 0.78em per character is a deliberately pessimistic advance, wider than M in this face, so the result errs small and never collides. */ .trail-intro{container-type:inline-size} .trail-title{margin:0;line-height:.88;letter-spacing:-.01em; /* --w is the MEASURED em-width of the longest line (home.php sets it per heading), so 100cqi / --w means "exactly fill this column". I raised it to 118cqi to make the heading bigger and it therefore overflowed by 18% - the S of TOURNAMENTS ran into the cards on Arthur's laptop. The multiplier is the one number in here that must NOT be tuned: at 100 the line touches both edges of its column and can never cross. Size comes from the clamp ends instead, which only bind where the column is wide enough to allow them. */ font-size:clamp(2.4rem, calc(100cqi / var(--w,7)), 9rem);max-width:100%} .trail-title span{display:block} .trail-title .gold{color:var(--gold)} .trail-lede{margin:26px 0 32px;max-width:34ch;font-size:1.35rem;line-height:1.5; color:rgba(255,255,255,.85)} /* The State Championship qualifying rule (Brad and Andrew, 2026-10-19). It sits between the lede and the schedule button, and it has to read as a RULE rather than as more prose - an angler who skims past it can fish the whole season and find out in February that he is not eligible. The gold rule down the left is the only ornament: it borrows the eyebrow's colour so the block belongs to the section rather than interrupting it, and it costs nothing at narrow widths. Type is one step DOWN from the lede on purpose. Making it larger than the lede would have fought the section title; the emphasis here comes from the label and the rule, not from size. */ .trail-qualify{margin:0 0 32px;max-width:40ch;border-left:3px solid var(--gold);padding:2px 0 2px 18px} .trail-qualify .eyebrow{margin:0 0 .45rem} .trail-qualify p:last-child{margin:0;font-size:1.02rem;line-height:1.55;color:rgba(255,255,255,.82)} @media (max-width:640px){ .trail-qualify{max-width:none;padding-left:14px} .trail-qualify p:last-child{font-size:.98rem} } /* No size override here. It carried font-size:1rem and padding:1.2em, which made it 58px tall against the 53px of every other large button on the page - Arthur spotted it. A button that is nearly the same height as its neighbours reads as a mistake, not as emphasis. It is a plain .btn-lg like the rest, and the emphasis in this column comes from the type. */ /* EQUAL CARDS (Arthur, 2026-10-05: "the tournament boxes need to all be the same size. not some bigger than others"). A flex column sized every card to its own content, so a two-line name made a taller box. grid-auto-rows:1fr makes every row the height of the tallest, and the row displays as a grid so the card stretches to fill it rather than sitting at the top of a taller slot. */ /* Half the width they were (Arthur, 2026-10-05). The BAND stays full bleed - he asked for that in the same breath - and the cards take half of their column, which is the literal halving he asked for. */ .trail-list{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:1fr;gap:20px;max-width:100%;margin-inline:0} .trail-row{display:grid} /* White, not gold. On a dark band `.band-bar a:not(.btn)` paints every link gold, which turned every event name and every lake name gold and left the accents nothing to be. That selector scores two classes and an element, so a bare `.trail-link` loses to it - this matches the score and wins on order. The gold in this block is the rule, the pin and the arrow. */ .band-bar a.trail-link,.band-navy a.trail-link,.band-photo a.trail-link, .band-bar a.trail-link:hover,.band-navy a.trail-link:hover{color:#fff} /* padding-right RESERVES the picture panel. box-sizing is border-box site-wide, so the grid columns live inside the content box and the text column now physically ends where the art begins - a percentage cap on the text could only ever approximate that, and approximating it is what put the name over the map twice. */ /* minmax(0,1fr), NOT 1fr - this is the whole bug, and every width I tried before was treating a symptom. A `1fr` track's automatic minimum is MIN-CONTENT, so the title column could never shrink below the width of "MARTINEZ/MITTRY" as one unbroken token: the track grew past the padding I had reserved for the map and the name sat on top of Arizona no matter what I set the reserve to. minmax(0,1fr) lets the track be as narrow as the layout says, and only then does any wrapping rule inside it mean anything. */ /* THREE REAL COLUMNS: date | words | map. The map used to be ABSOLUTELY POSITIONED over the card with the space reserved as padding, so "the title overflows onto Arizona" was always one mis-measured character away - and it bit Arthur four separate times tonight. A real grid column cannot be overlapped by its neighbour at any width, any font size or any zoom level. That is the difference between unlikely and impossible. */ .trail-link{display:grid;grid-template-columns:auto minmax(0,1fr) clamp(130px,28%,300px);align-items:center;gap:20px; position:relative;overflow:hidden;padding:22px;text-decoration:none; /* TOPOGRAPHY BEHIND THE GRADIENT (Arthur, 2026-10-06, with a reference). Two background layers: the card's own wash is written as a flat gradient so it stays the FIRST layer and therefore paints ON TOP, and the contour tile sits behind it - which is what "behind the gradient" asks for and what a single background-color could not express. The map panel is opaque and still covers its own corner, as it should. The tile is a real topographic contour set, not a texture: a periodic 2D Fourier field sampled on a grid and traced with marching squares, so every line is an iso-level of a continuous surface and nests the way contours do. Because the field uses only integer frequencies it repeats exactly over the tile, so the lines meet themselves at the seam and it can tile without a join. Black at 20% and a 1.6 stroke (Arthur, 2026-10-06: "much better but make it darker Almost not notice able"). It was 55% at stroke 2, which stood off the card as grey lines. Lowering the opacity of a BLACK stroke moves it toward the card rather than away from it, so the texture goes darker and quieter at the same time - which is what both halves of that sentence ask for. */ background-image:linear-gradient(rgba(255,255,255,.045),rgba(255,255,255,.045)),url(img/topo-contours-v3.svg); background-size:auto,820px 820px;background-position:0 0,0 0; border:1px solid var(--line-dark);border-radius:12px; transition:border-color .18s,background .18s,transform .18s} /* background-COLOR, not the background shorthand: a background-COLOR would paint BEHIND every background-image, putting the contours in front of the wash - the opposite of what was asked. Both layers are images, and hover restates them so the tile is not dropped. */ .trail-link:hover{background-image:linear-gradient(rgba(255,255,255,.075),rgba(255,255,255,.075)),url(img/topo-contours-v3.svg); border-color:var(--gold);transform:translateY(-2px)} .trail-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* EVERY CARD SHOWS A DIFFERENT PART OF THE MAP (Arthur, 2026-10-06: "it's just repeating. not changing"). Two things made it read as a repeat. The contours were drawn from a field whose frequencies were 1-4, so a single curve was about the width of a card - sweeping bands rather than the nested islands of his reference; the tile is redrawn at 2-9. And every card positioned the tile the same way, so all three were the identical slice. Each row now offsets it, cycling every six, so neighbours never show the same ground. The offsets are not multiples of the tile, so they land on genuinely different terrain rather than on the same shapes shifted. */ .trail-row:nth-child(6n+1) .trail-link{background-position:0 0,0px 0px} .trail-row:nth-child(6n+2) .trail-link{background-position:0 0,-310px -190px} .trail-row:nth-child(6n+3) .trail-link{background-position:0 0,-140px -430px} .trail-row:nth-child(6n+4) .trail-link{background-position:0 0,-520px -70px} .trail-row:nth-child(6n+5) .trail-link{background-position:0 0,-230px -610px} .trail-row:nth-child(6n+6) .trail-link{background-position:0 0,-430px -340px} .trail-date{display:flex;flex-direction:column;align-items:center;justify-content:center; min-width:96px;padding:16px 10px;border:1px solid var(--line-dark);border-radius:9px; background:rgba(0,0,0,.28);text-align:center;line-height:1} .trail-date .mo{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;color:var(--gold)} .trail-date .dy{font-family:var(--display);font-weight:900;font-size:2.7rem;margin:6px 0; font-variant-numeric:tabular-nums} .trail-date .wd{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:rgba(255,255,255,.65)} /* Capped short of the art panel, which is absolutely positioned over the row's right-hand 40%. Without the cap a long event name runs under the diagonal and the last word of it is simply gone - the Roosevelt row lost its placeholder tag that way. */ .trail-body{min-width:0;max-width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:0; position:relative;z-index:2} /* ONE PROPERTY, AND NOTHING ELSE. "Martinez/Mittry" is a single unbreakable token - a slash is not a line-break opportunity - so the max-width above cannot hold it and the name overflows its column and runs out across the state map. break-word breaks a word only when it cannot fit at all, so every name with a space in it wraps exactly where it always did and no box changes size. WHAT IS DELIBERATELY NOT HERE: on 2026-10-05 I also made the row a container and sized this type in cqi, in the same deploy, to fix something Arthur had not asked about. `container-type:inline-size` applies SIZE CONTAINMENT, the row stopped contributing its own width, the whole band collapsed - the lede ran one word per line and the cards became slivers - and he saw it live. Reverted. A layout change cannot be verified by reading CSS, and this one does not need to be. */ /* `anywhere`, NOT `break-word`, and min-width:0 - this is the correction to my own fix of an hour ago. `overflow-wrap:break-word` lets a long word WRAP but does not change the element's MIN-CONTENT size, and .trail-name is a flex item, whose automatic minimum size is its min-content width. So the box kept the full width of "MARTINEZ/MITTRY" and sat over the map exactly as before, which is what Arthur saw and said. `anywhere` is the one that feeds back into intrinsic sizing, and min-width:0 removes the flex floor. */ /* `break-word`, NOT `anywhere` - and the size is the half that makes it work. `anywhere` fits a word to whatever room is left, which with a 24px title in a ~120px column gave Arthur "MARTI / NEZ/M / ITTRY". The honest fix is for the longest name we actually have to FIT on one line: at this size "MARTINEZ/MITTRY" is about 167px in a column of about 178px. break-word is then only a backstop for a name longer than any we have, and min-width:0 keeps the flex floor from re-introducing the overflow. */ .trail-name{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.1;overflow-wrap:break-word;min-width:0} /* THE RULE IS AS WIDE AS THE WORDS (Arthur, 2026-10-06: "the yellow line under that lake needs to be the lenght of the word(s)"). It was a fixed 56px, so it was the same stub under MARTINEZ/MITTRY and under ALAMO LAKE. A sibling span cannot know its neighbour's text width, so the rule becomes the name's own ::after: inline-block makes .trail-name exactly as wide as its text, and a block ::after inside it fills that width. On a name that wraps it takes the width of the longest line, which is the right answer and the only one CSS can give without measuring. */ .trail-name{display:inline-block} .trail-name::after{content:"";display:block;height:3px;background:var(--gold);margin:14px 0} .trail-rule{display:none} .trail-where{display:flex;align-items:center;gap:9px;font-weight:600;font-size:1.06rem;margin-bottom:14px} .pin-glyph{width:16px;height:16px;flex:none;fill:var(--gold)} /* The picture sits at the end of the row and is cut on a diagonal. It is decoration: it is inside the anchor, carries an empty alt, and every word in the row is readable without it. pointer-events:none so the diagonal's corner cannot swallow a click meant for the row. */ /* 38%, down from 44% (Arthur, 2026-10-05: "the box needs to be wider so the words don't cover up the az map"). The words get the width back, and the state keeps enough panel to read as a map. */ /* THE GRADIENT IS BEHIND THE MAP, NOT OVER IT. Arthur, 2026-10-05: "the az state and blue around it needs to be on top of the gradient." Masking the whole column faded Arizona along with the panel. Now the FADE is the panel itself - the navy ground and its faint terrain are masked so they dissolve into the card on the left - and the state, its outline, its relief and its pin are drawn OVER that at full strength, masked by nothing. Still a real grid column, so none of this can reach the words. */ .trail-art{position:relative;align-self:stretch;min-height:120px;overflow:hidden;pointer-events:none; border-radius:0 10px 10px 0} /* 2026-10-06: the PANEL stops being faded too. On 10-05 the fade moved off the state and onto this navy ground, which left the blue box dissolving into the card; Arthur: "the blue box behind the map needs to be over the gradient". So the panel is solid and sits above the band, and only the faint terrain texture below still carries the mask. */ .trail-art::before{content:"";position:absolute;inset:0;z-index:0;background:var(--navy-d)} .trail-art .fx-map{background:none;position:relative;z-index:1} .trail-art .fx-map-bg{-webkit-mask-image:linear-gradient(100deg,transparent 0,rgba(0,0,0,.4) 16%,#000 44%); mask-image:linear-gradient(100deg,transparent 0,rgba(0,0,0,.4) 16%,#000 44%)} /* the state sits above the fade, untouched by it */ .trail-art .fx-map-svg{position:relative;z-index:4} .trail-art img{width:100%;height:100%;object-fit:cover;display:block} /* The state is pushed to the right of its panel (Arthur, 2026-10-01, twice). Two things hold it back from the edge: this padding, and the SVG's own margin - Arizona is taller than it is wide, so the projection leaves about 8% of the box empty on each side. The translate takes half of that, which is the half-way he asked for. */ .trail-art .fx-map{width:100%;height:100%;padding:8px;justify-content:center} .trail-art .fx-map-svg{max-height:100%} /* A wash over the picture on the side nearest the text, so the name never sits on busy pixels. THE STATE SITS ABOVE IT (Arthur, 2026-10-01). The wash is there to quiet the BACKGROUND, and it was dimming the left third of the state along with it; now it covers the terrain texture and the photograph, and the state is drawn over the top of it at full strength. */ /* the gradient wash is gone with the overlap it existed to hide */ .trail-art .fx-map-svg{position:relative;z-index:3} /* The round arrow that used to sit at the right of every row is gone (Arthur, 2026-10-01): the whole row is the link and always was, so it was a button that did nothing the row did not already do, and it was holding a hole in the picture panel. The state slides across into the space it left. */ /* SIDE BY SIDE AGAIN, BUT THE BAND GETS WIDER TO PAY FOR IT. Arthur wanted the cards about twice as wide ("about 2x wider horizontally in the current view") AND beside the intro, not stacked under it. Those two cannot both come out of a 1180px wrap: at that width the list column was ~445px and no ratio could get it past ~620px. So THIS BAND ONLY opts out of the site wrap and runs to 1640px, and the split gives the list roughly two thirds of it - about 1050px of card on a 1920 screen, which is the 2x, with the intro still next to it. Every other band on the site keeps --wrap: 1180px and is untouched. */ /* FULL BLEED. No max-width at all on this band: it runs to the window edges with a small gutter, so the section is as wide as the screen allows on BOTH sides and the cards get the majority of it. Capping it at 1640px still left a third of his screen empty either side at his zoom level, which is what he kept seeing. */ /* CENTRED, not left-aligned (Arthur, 2026-10-05). Full bleed plus a card column capped at 75% left the whole section hugging the left edge with the slack piling up on the right. The band is centred on the screen and the cards are centred inside their own column, so the slack is shared evenly either side. */ .trail{max-width:min(1800px,96vw);width:100%;margin-inline:auto;padding-inline:clamp(16px,3vw,56px)} @media (min-width:1000px){ /* HALF AND HALF, so the cards START AT THE MIDDLE of the screen and run to the right - the original shape (Arthur, 2026-10-05: "make the section look like it did but keep the boxes we have now and their sizing but move them over on the right side"). The band is 1800px, so each half is about the width the cards already are; they fill their half rather than being capped and centred inside it. */ .trail{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center} } /* Under 700px the picture is more wash than picture, and the row needs its width for words. */ @media (max-width:700px){ .trail-art{display:none} .trail-link{grid-template-columns:auto minmax(0,1fr);padding:18px} /* The 58% cap exists to keep text out from under the art panel. With the panel gone the cap only squeezes: without this the event name wrapped onto four lines and "Lake Havasu" onto two, on the screen with the least room to waste. */ .trail-body{max-width:100%} } /* ---------- the schedule, one event per row ---------- Arthur, 2026-09-30: one column, better boxes, a lot more content. The two-column grid was what had kept the old page thin - half a page holds a name and a date and nothing else, so there was nowhere to put lines in, lines out, the pots or the buttons. A row is a date rail plus a body. The body is a normal stack; the FACTS are the part worth reading closely - auto-fit columns with a minimum, so five facts on a laptop become two on a tablet and one on a phone without a breakpoint for each case. */ /* 1320px, not "a bit more": at 1260 the facts strip gains a FOURTH column, and a row that fits four facts across is a row one line shorter. 1320 clears that threshold with room for a long value, and still leaves a proper gutter on a 1440px screen. Only this band - the rest of the site keeps the 1180px measure, which is right for reading paragraphs. */ /* WIDER (Arthur, 2026-10-06: "these bars need to be wider and shorter vertical wise"). The schedule stopped at 1320 with a quarter of a wide screen empty beside it, and the width it was not using is exactly what the facts grid needed to stop wrapping into a third row. */ .band-wide .wrap{max-width:1560px} /* BLEED: a band that is not held to the site's measure at all, for the season section, which Arthur wants free of the side limits. It takes the window rather than a fixed width, with a gutter that grows with the screen instead of a margin that grows without limit - so on a 1920px screen the content is about 1790px wide where the 1320 measure left 300px of empty band down each side. The 1800 cap is there because nothing on this earth reads well at 2400px, and an ultrawide monitor would otherwise get a row a metre long. */ .band-bleed .wrap{max-width:1800px;padding-inline:clamp(20px,4vw,64px)} .sched-bar{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between; gap:16px;margin-top:22px;padding-bottom:14px;border-bottom:1px solid var(--line)} /* The 22px sits under the intro line. With the line gone - which is now the default - the bar is the first thing in the band and the band's own padding is already the space. */ .sched-bar:first-child{margin-top:0} .sched-count{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--slate)} .sched-count strong{font-family:var(--display);font-size:1.1rem;color:var(--ink);letter-spacing:0} .sched-season{display:flex;align-items:center;gap:10px;margin:0} .sched-season label{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--slate)} .sched-season select{min-width:170px} .fixtures{display:flex;flex-direction:column;gap:16px;margin-top:22px} .fixture{display:grid;grid-template-columns:96px 1fr;gap:0; background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .fixture:has(.fx-map){grid-template-columns:96px 210px 1fr} /* The rail is the only dark thing in the row, which is what makes a column of them scannable by date at a glance - the eye runs down the navy edge. */ /* The rail: gold month, a big day, the weekday, then the event number at the foot behind a short rule. THE DATE SITS IN THE SAME PLACE ON EVERY ROW, which it did not before. With justify-content:center and the number pushed down by margin-top:auto, a row WITH a number had its date at the top and a row WITHOUT one had it in the middle - so the first two rows of the schedule did not line up with each other. Arthur spotted it. The date block is now pinned to the top on every row and the number, when there is one, drops to the bottom. */ .fx-date{background:var(--navy);color:#fff;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:1px;padding:24px 8px 40px;text-align:center; position:relative;border-right:1px solid rgba(255,255,255,.16)} /* The 16px of extra padding at the foot is an OPTICAL correction, not spacing. Type sits low inside its line boxes - there is leading above the O of OCT that has no counterpart under the last line - so centring the boxes leaves the INK about 8px low. Extra bottom padding pushes the centred content back up by half of it. Measured, and it holds for a rail with an event number and one without, which is why it lives here and not on the number. */ /* Measured: the date is centred in this rail to within two pixels, and the residual is the glyph's own side bearing, which no CSS property moves. What made it LOOK off-centre is that the rail and the map beside it are close in tone, so the eye takes them for one wide dark panel with the date pushed into the left sliver of it. The hairline tells them apart. */ .fx-date .mo{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;color:var(--gold)} /* tabular figures so a single-digit day and a two-digit day occupy the same advance and the numbers line up down the column. Without it "3" sat 2-3px right of "17" in the row below it - small, invisible on one row, and the first thing you see when two rows are stacked. */ .fx-date .dy{font-family:var(--display);font-weight:900;font-size:2.1rem;line-height:1; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .fx-date .wd{font-family:var(--body);font-size:.78rem;opacity:.8} /* IN THE FLOW, so the date and the event number are centred AS A PAIR with equal space above the date and below the number (Arthur, 2026-09-30). Out of the flow the date alone centred, which left the pair sitting low in the rail. A NOTE ON THE TRADE-OFF, because these two requests cannot both hold: centring the PAIR and putting the DATE at the same height on every row are different things whenever some rows have a number and some do not. Reserving invisible space for the missing number aligns the rows and leaves an unnumbered date sitting high; not reserving it centres every row's own content and leaves an unnumbered date sitting a little lower. This is the second, which is what he asked for last. The optical correction for that leading lives on .fx-date, not here, so it applies whether or not this element exists. */ .fx-date .no{margin-top:14px;padding-top:12px;position:relative; font-family:var(--mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.12em; color:rgba(255,255,255,.72)} .fx-date .no::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:26px;height:1px;background:rgba(255,255,255,.3)} /* The under-16 notice on the join form: shown instead of letting them submit, so it has to read as an answer rather than as a field hint. Same paper/navy language as the rest. */ .join-too-young{margin:18px 0;padding:16px 18px;border-left:4px solid var(--gold); background:rgba(0,0,0,.04);border-radius:4px} .join-too-young p{margin:0;font-weight:600;line-height:1.5} form button[type="submit"][disabled]{opacity:.45;cursor:not-allowed} /* ---------- past championship qualifiers ---------- Year and name only, on the Angler of the Year band, so the two honours read as a pair. auto-fit columns: a club with four qualifiers gets one tidy row, a club with thirty gets four columns rather than a list you scroll past.
    because it IS ordered - newest first - and the marker is suppressed because the year already numbers it. */ .qual-list{list-style:none;margin:26px 0 0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px 28px} /* Names centred in their column (Arthur, 2026-10-13). The year span that used to sit beside them is gone, so a left-aligned single item read as ragged against the centred "Class of" heading above it. The rule stays on the flex row rather than text-align on .who, so it holds if the year ever comes back. */ .qual-list li{display:flex;align-items:baseline;justify-content:center;gap:14px;padding:11px 2px; border-bottom:1px solid var(--line-dark)} .qual-list .yr{font-family:var(--mono);font-weight:700;font-size:.8rem;color:var(--gold); min-width:3.4em;font-variant-numeric:tabular-nums} .qual-list .who{font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:.95rem;line-height:1.2} /* On a light band the gold year is barely there and the hairline disappears, so both take the ink palette instead. The list keeps its shape; only the colours change with the band. */ .band-white .qual-list li,.band-paper .qual-list li{border-bottom-color:var(--line)} .band-white .qual-list .yr,.band-paper .qual-list .yr{color:var(--navy)} .band-white .qual-list .who,.band-paper .qual-list .who{color:var(--ink)} /* ---------- the presenting sponsor band ---------- Same treatment as the sponsor plaque in the hero, minus the plaque: this band is already a known dark background, so a logo of either weight reads on it without a panel behind it. */ .band-sponsor{background:var(--navy);padding-block:30px} .band-sponsor .eyebrow{color:var(--gold)} .sponsor-mark{margin-top:12px} .sponsor-mark img{max-height:62px;max-width:100%;width:auto;height:auto;object-fit:contain; filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));transition:transform .2s ease} .sponsor-mark a{display:inline-block;line-height:0;border-bottom:0} .sponsor-mark a:hover img,.sponsor-mark a:focus-visible img{transform:translateY(-3px)} .sponsor-mark a:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:3px} @media (prefers-reduced-motion:reduce){.sponsor-mark img{transition:none} .sponsor-mark a:hover img,.sponsor-mark a:focus-visible img{transform:none}} /* ---------- the locator map ---------- Drawn as inline SVG by lib/azmap.php, so there is no tile server, no key and no third-party request on a club page. The panel is a shade deeper than the date rail so the two dark columns read as separate things rather than one wide block. */ .fx-map{position:relative;background:var(--navy-d);display:flex;align-items:center; justify-content:center;padding:14px;overflow:hidden} /* The terrain behind the state, edge to edge. Much fainter than the lines inside the outline, so the state still reads as the subject and the panel as the ground it sits in. */ .fx-map-bg{position:absolute;inset:0;width:100%;height:100%;display:block; fill:none;stroke:rgba(255,255,255,.055);stroke-width:.45} .fx-map-svg{position:relative;width:100%;height:auto;max-height:190px;display:block} /* A shade lighter than the panel, so the state reads as lifted off the ground behind it. */ .az-fill{fill:rgba(255,255,255,.09)} /* The relief image sits over this fill, which now shows only at the clipped edge. */ .az-relief{opacity:.96} .az-edge{fill:none;stroke:rgba(255,255,255,.82);stroke-width:1.3;stroke-linejoin:round} /* The pin carries a thin dark outline instead of the halo it used to sit on, so it still separates from the contours behind it without putting a disc of colour on the map. */ .az-pin{fill:var(--gold);stroke:rgba(10,26,38,.55);stroke-width:.6} .az-pin-eye{fill:var(--navy-d)} /* The label lives inside the SVG now, beside its pin, so it scales with the map instead of sitting in a corner of the panel at a fixed size and colliding with the outline. */ .az-label{font-family:var(--display);font-weight:700;font-size:5.4px;fill:#fff; paint-order:stroke;stroke:rgba(10,26,38,.85);stroke-width:1.4px;stroke-linejoin:round} .fx-past .fx-map{background:#3C444A} .fx-body{min-width:0;padding:16px 20px 14px} .fx-body h3{margin:0;font-size:1.22rem;overflow-wrap:break-word} /* same reason as .trail-name */ .fx-lake{color:var(--navy);font-weight:600;margin-top:2px} .fx-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px} .fx-flag{display:inline-block;font-family:var(--mono);font-size:.56rem;text-transform:uppercase; letter-spacing:.16em;color:var(--ink);background:var(--gold);border-radius:3px; padding:.35em .6em;margin-bottom:8px} /* The facts strip. dt/dd rather than a table: it is a list of labelled values, it has no rows or columns of its own, and a table would have had to be scrolled on a phone. */ /* minmax(200px) not 148: at 148 a laptop fitted five columns and the director's email wrapped over three lines in a 148px box, which reads as broken rather than as dense. Four across on a laptop is the right density for this many facts. */ /* AND SHORTER, which is the same change from the other side. The facts were columns of at least 200px in a body about 980px wide - four across, so eleven facts took three rows and a long one like the big-bass pot took three LINES inside its row. At 1560 the body is about 1210px and a 165px floor gives six across, so the same facts land in two rows. The tighter gaps take the rest. The narrow screen rule further down is untouched: it already drops to a 130px floor. */ .fx-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:10px 22px;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--line)} .fx-facts > div{min-width:0} .fx-facts dt{font-family:var(--mono);font-size:.58rem;text-transform:uppercase; letter-spacing:.14em;color:var(--slate)} /* break-word, not anywhere: anywhere split "480-205-5451" across two lines mid-number. break-word wraps at the space first and only breaks inside a word that cannot fit at all, which is what a long email address needs and a phone number does not. */ .fx-facts dd{margin:3px 0 0;font-weight:600;color:var(--ink-2);overflow-wrap:break-word} /* The director's contact, under their name in the same cell: lighter, so the pair reads as one fact with a heading rather than as two facts that happen to be adjacent. */ .fx-facts dd .sub{display:block;font-weight:400;color:var(--slate);font-size:.94em} .fx-update{margin-top:13px;padding:10px 13px;border-radius:4px; background:#FDF3DF;border:1px solid #E3C07A;color:#5C4207;font-size:.92rem} .fx-update strong{font-family:var(--mono);font-size:.58rem;text-transform:uppercase; letter-spacing:.14em;margin-right:8px} .fx-winner{margin:13px 0 0;font-size:.95rem;color:var(--ink-2)} .fx-winner .lbl{font-family:var(--mono);font-size:.58rem;text-transform:uppercase; letter-spacing:.14em;color:var(--slate);margin-right:8px} .fx-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px} /* The next event earns a gold edge, nothing more - a whole tinted row would have fought the date rail for the eye. A finished one fades, and its photograph-free row is a quieter grey so the season reads past-to-future down the page. */ .fx-next{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)} .fx-past{background:#FAF9F7} .fx-past .fx-date{background:var(--slate)} .fx-past h3 a{color:var(--ink-2)} /* Between 640 and 900 the three columns are too tight for the facts to breathe, so the map steps out before the layout does. */ @media (max-width:900px){ .fixture:has(.fx-map){grid-template-columns:96px 1fr} .fx-map{display:none} } @media (max-width:640px){ .fixture,.fixture:has(.fx-map){grid-template-columns:1fr} /* Stacked, the rail becomes a header strip: the date reads across instead of down, and the event number sits beside it rather than under a rule of its own. */ .fx-date{flex-direction:row;gap:10px;padding:11px 16px;justify-content:flex-start} .fx-date .dy{font-size:1.4rem} /* The phone strip is a horizontal header: the number sits at its right-hand end rather than under anything, and an absent one leaves no gap. */ .fx-date .no{margin-top:0;padding-top:0;padding-bottom:0;width:auto;margin-left:auto} .fx-date .no::before{display:none} .fx-body{padding:16px} /* Two short facts sit side by side on a phone rather than one per line - seven facts stacked singly made the card twice as long as it needed to be. */ .fx-facts{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px 16px} } /* pills */ .pill{display:inline-flex;align-items:center;font-family:var(--mono);font-weight:700; text-transform:uppercase;letter-spacing:.08em;font-size:.58rem;line-height:1;padding:.55em .7em; border-radius:999px;border:1px solid;white-space:nowrap} .pill-open{color:var(--ink);background:var(--gold);border-color:var(--gold)} .pill-soon{color:var(--navy);background:transparent;border-color:var(--navy)} /* One badge treatment for all three states: outlined, light text, no fill. The gold fill on REGISTRATION OPEN made it a different species from COMPLETE and UPCOMING. */ .band-navy .pill,.band-bar .pill,.band-photo .pill{color:#fff; background:transparent;border-color:rgba(255,255,255,.38)} /* COMPLETE is slate on a light card; on a dark one it disappears. */ .pill-done{color:var(--slate);background:transparent;border-color:var(--line)} .pill-cancel{color:#8A2B22;background:#FBEDEA;border-color:#EBC7C0} .ph-tag{display:inline-block;font-family:var(--mono);font-size:.56rem;text-transform:uppercase; letter-spacing:.14em;color:#7A5210;background:#FDF3DF;border:1px dashed #E3C07A; border-radius:3px;padding:.3em .5em;margin-left:6px;vertical-align:middle} /* The dateline on a news post and the honour line on an angler page. Both used to be the banner's kicker; when that came off they moved into the page, because neither was decoration and neither appeared anywhere else. */ .post-date{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.16em; color:var(--slate);margin:0} /* ---------- the membership join flow ---------- Arthur's reference arrangement in this site's formatting: numbered steps on the left, the form beside them. The numbering is drawn by the template, not typed by the club, so it cannot end up saying "Step 2." twice. */ .join{display:grid;gap:40px} .join-eyebrow{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.2em; color:var(--gold-d);margin:0 0 10px} .join-title{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.04;margin:0 0 14px} .join .lede{max-width:56ch} /* A step is a picture panel on the left and the words on the right, as in the reference. The panel is a fixed column so the four titles line up down the page whatever is in it - the club badge, a tick, a drawn waiver or the photograph of the angler. */ .step-list{list-style:none;margin:30px 0 24px;padding:0} .step-list > li{display:grid;grid-template-columns:168px minmax(0,1fr);align-items:stretch; margin-bottom:14px;background:var(--white);border:1px solid var(--line); border-radius:var(--r);overflow:hidden} .step-list > li:last-child{margin-bottom:0} /* A STEP THAT LINKS SOMEWHERE (Arthur, 2026-10-06: "make each section link to a page"). The whole card is the target, so the anchor has to BE the grid - the li keeps the frame, the border and the clipping, and the anchor inside it takes the two columns. Colour is inherited, or .band-paper's link rule would turn the step title navy and the number with it. */ .step-list > li.step-has-link{display:block} .step-link{display:grid;grid-template-columns:168px minmax(0,1fr);align-items:stretch; color:inherit;text-decoration:none;height:100%} .step-link:hover,.step-link:focus-visible{color:inherit;text-decoration:none} .step-list > li.step-has-link{transition:border-color .18s,box-shadow .18s} .step-list > li.step-has-link:hover{border-color:var(--navy);box-shadow:0 6px 18px rgba(0,0,0,.09)} .step-link:focus-visible{outline:2px solid var(--navy);outline-offset:-3px} /* The arrow says the card goes somewhere, without adding a second thing to click. */ .step-go{color:var(--navy);font-weight:700;transition:transform .18s} .step-list > li.step-has-link:hover .step-go{transform:translateX(3px)} .step-body{padding:18px 22px;align-self:center} .step-list h3{margin:0 0 7px;font-size:1.02rem;display:flex;align-items:center;gap:11px;flex-wrap:wrap} /* Black, not gold (Arthur, 2026-10-01): the step number and the step title read as one line, and the gold made the number look like a separate label. */ .step-n{color:var(--ink);font-family:var(--mono);font-size:.76rem;letter-spacing:.14em; text-transform:uppercase;white-space:nowrap} .step-bar{width:1px;height:17px;background:var(--line);flex:none} .step-list .prose{max-width:54ch} .step-list .prose p{margin:0;font-size:.93rem} .step-art{display:grid;place-items:center;background:var(--navy);padding:0; min-height:124px;height:100%;overflow:hidden} /* The three photographs from the design. They fill their panel, as they do there. */ .step-art-photo img{width:100%;height:100%;min-height:124px;object-fit:cover;display:block} /* Step 2, drawn: a cheque being handed over, in the club's navy and gold. */ .step-art-cheque{padding:12px} .step-art-svg{width:100%;height:auto;max-height:104px;display:block} .sa-cheque{fill:var(--white)} .sa-cl{stroke:var(--navy);stroke-width:3.4;stroke-linecap:round;fill:none;opacity:.5} .sa-sig{stroke:var(--navy);stroke-width:2.8;stroke-linecap:round;fill:none;opacity:.75} .sa-amt{fill:var(--gold)} .sa-palm{fill:var(--gold)} .sa-fing{fill:none;stroke:var(--gold);stroke-width:11;stroke-linecap:round} /* The form reads as one card with its own navy head, so it holds together beside four step cards instead of floating as a column of loose fields. */ .join-form{align-self:start;background:var(--white);border:1px solid var(--line); border-radius:var(--r);overflow:hidden} .join-form-head{background:var(--navy);padding:18px 22px 16px} .join-form-head h3{margin:0;color:var(--white);font-size:1.3rem} .join-form-head .rule{display:block;width:52px;height:3px;background:var(--gold);margin-top:10px} .join-form-body{padding:22px} .join-form-body .field{margin-bottom:16px} /* Two fields on one line where they are halves of one answer - first and last name. */ .field-2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:420px){.field-2{grid-template-columns:1fr;gap:0}} .join-form-body .notice{margin-bottom:16px} /* The public site had no checkbox style at all - .a-check, which this first used, lives only in admin.css and would have left the waiver tick unstyled for the people who actually use it. A big target as well as a tidy one: this is the box that carries an agreement. */ .check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;line-height:1.45} .check input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--navy)} .req{font-family:var(--mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.14em; color:var(--slate);margin-left:6px;font-weight:400} /* Signing, as on azsummerslam.com: a canvas, drawn on with a finger or a mouse. The height is fixed here and read back by app.js, which sizes the backing store to it times the device pixel ratio - a canvas with no CSS height would be 150px of blur on a phone. */ .sig-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px} .sig-head label{margin:0} .sig-pad{display:block;width:100%;height:170px;background:var(--white); border:2px dashed var(--line);border-radius:var(--r);cursor:crosshair;touch-action:none} .sig-pad.sig-missing{border-color:#B3261E;border-style:solid} .sig-note{margin:12px 0 0;font-size:.78rem;color:var(--slate);line-height:1.5} @media (min-width:980px){ .join{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:52px;align-items:start} } @media (max-width:560px){ .step-list > li{grid-template-columns:104px minmax(0,1fr)} .step-art{min-height:104px} .step-art-photo img{min-height:104px} .step-art-cheque{padding:8px} .step-body{padding:14px 15px} } /* ---------- tables ---------- */ .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line); border-radius:var(--r);background:var(--white)} .band-navy .tablewrap{border-color:var(--line-dark);background:rgba(255,255,255,.05)} table.data-table{width:100%;min-width:520px;border-collapse:collapse;font-size:.95rem} /* The at-a-glance table in a sidebar. min-width:0 alone does not stop a table overflowing its card: a table can never be narrower than its widest UNBREAKABLE word, and a director's email address is one long word. overflow-wrap lets it break, which is the actual fix. */ table.data-table.glance{min-width:0;font-size:.92rem;table-layout:fixed} .glance th,.glance td{padding:10px 12px;overflow-wrap:anywhere} .glance th{width:42%} .glance .sub{display:block;margin-top:2px;font-size:.92em;color:var(--slate)} table.data-table th,table.data-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)} .band-navy table.data-table th,.band-navy table.data-table td{border-color:var(--line-dark)} table.data-table thead th{background:var(--navy);color:#fff;font-family:var(--mono);font-weight:700; font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;white-space:nowrap} .band-navy table.data-table thead th{background:var(--navy-d)} table.data-table tbody tr:nth-child(even){background:rgba(0,0,0,.025)} .band-navy table.data-table tbody tr:nth-child(even){background:rgba(255,255,255,.04)} table.data-table td.num,table.data-table th.num{text-align:right;font-family:var(--mono); font-variant-numeric:tabular-nums;white-space:nowrap} .rank{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%; background:var(--paper);border:1px solid var(--line);font-family:var(--display);font-weight:800;font-size:.8rem} .rank-1{background:var(--gold);border-color:var(--gold);color:var(--ink)} .rank-2,.rank-3{background:var(--navy);border-color:var(--navy);color:#fff} /* ---------- prose ---------- */ .prose{max-width:70ch} .prose.center{margin-inline:auto} .prose h2{margin:2rem 0 .8rem} .prose h3{margin:1.6rem 0 .5rem} .prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.4em} .prose li{margin-bottom:.45em} .prose blockquote{margin:1.5rem 0;padding:2px 0 2px 18px;border-left:4px solid var(--gold);font-style:italic} /* ---------- sponsors: knockout grid on navy ---------- */ .sponsor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:center} /* Twice the size, at Arthur's ask. The cell and the logo both double - raising only the logo would have it overflow a box that had not grown with it. max-width:100% is new and is what makes doubling safe: the logos have no width limit of their own, so a wide wordmark like SNAKE RIVER MANUFACTURING is about 320px at this height and would have run out of its cell. With the cap it fits the cell and gives back height instead, which object-fit keeps in proportion. */ .sponsor{display:grid;place-items:center;min-height:220px;padding:18px} .sponsor img{max-height:172px;max-width:100%;width:auto;object-fit:contain} /* THE KNOCKOUT IS GONE, ON EVERY BAND AND EVERY PAGE. The club asked for it (Arthur, 2026-10-05: "they want the logos to be the actual colors, not the white overlay the site is doing. this would need to all the pages the sponsor logos show at"). It was deliberate before - on a dark band every logo was flattened to white so none of them clashed - and that is exactly what they do not want: a sponsor's mark is their property and their colours are the point of it. One consequence, said plainly rather than discovered: a logo drawn in dark ink on a transparent background now sits dark-on-dark on the navy and photo bands. The fix for one of those is a prepared light version from the sponsor (drop it in with class `ko`), not a filter over all of them. Applies to home, sponsors, championship, angler and Tournament Central alike - the rule was the only place the knockout lived. */ .band-navy .sponsor img,.band-photo .sponsor img{filter:none;opacity:1} /* A prepared knockout is already white and already carries its detail in its alpha, so the blunt filter must not run over it as well. */ .sponsor img.ko{filter:none;opacity:.95} .band-navy .sponsor:hover img,.band-photo .sponsor:hover img{opacity:1} /* A sponsor with no logo file is set as a wordmark instead, at the size a logo would have been - AZ LEAD WORKS was 0.85rem beside logos 170px tall and read as a caption. */ .sponsor-name{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(1.15rem,2.1vw,1.7rem);line-height:1.12;letter-spacing:.02em; color:#fff;text-align:center;opacity:.9;text-wrap:balance} .band-paper .sponsor-name,.band-white .sponsor-name{color:var(--navy);opacity:1} /* The sponsors page prints its tiers on light paper with the logos in their own colours; only the dark bands knock them out. */ .sponsor-title{grid-column:1/-1;min-height:120px} /* ---------- news cards on the home page ---------- Arthur's layout of 2026-10-01: a photograph across the top of each card, then the date, the headline, three lines and READ MORE. The card is the link - the picture, the heading and the arrow all go to the same post, so only the heading is in the tab order and the picture is hidden from a screen reader rather than read out twice. */ .news-grid{display:grid;grid-template-columns:1fr;gap:22px} .news-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:12px; background:rgba(255,255,255,.045);border:1px solid var(--line-dark); transition:border-color .18s,background .18s,transform .18s} .news-card:hover{background:rgba(255,255,255,.075);border-color:var(--gold);transform:translateY(-2px)} .news-shot{display:block;line-height:0;border-bottom:0;background:var(--navy-d)} .news-shot img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block} .news-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1} .news-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap} .news-date{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase; color:rgba(255,255,255,.7)} .pill-pin{color:var(--ink);background:var(--gold);border-color:var(--gold)} .news-card h3{margin:0 0 10px;font-size:1.22rem;line-height:1.16;text-transform:uppercase; font-family:var(--display);font-weight:800} /* White, not gold - the same clash the trail rows had: `.band-bar a:not(.btn)` scores higher than a bare `.news-card h3 a`, so every headline came out gold and READ MORE had nothing left to be. This matches that score and wins on order. */ .band-bar .news-card h3 a,.band-navy .news-card h3 a,.band-photo .news-card h3 a{color:#fff} .band-bar .news-card h3 a:hover,.band-navy .news-card h3 a:hover, .band-photo .news-card h3 a:hover{color:var(--gold)} /* The pinned flag is a filled gold badge, not the outline every other pill wears on a dark band - it is the one badge that says "read this one first". */ .band-bar .pill-pin,.band-navy .pill-pin,.band-photo .pill-pin{color:var(--ink); background:var(--gold);border-color:var(--gold)} .news-text{margin:0 0 16px;color:rgba(255,255,255,.78);font-size:.95rem;line-height:1.55} /* The whole tile is the link. The headline's anchor is stretched over the card, so a click anywhere opens the post and the card still carries one link, not three pointing at the same place. Everything that must stay clickable would sit above it with a z-index; nothing on this card does. */ .news-card h3 a::after{content:"";position:absolute;inset:0;border-radius:12px} .news-card:focus-within{border-color:var(--gold)} .news-more{margin-top:auto;font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:.78rem;letter-spacing:.08em;color:var(--gold);display:inline-flex;gap:9px;align-items:center} .news-card:hover .news-more span{transform:translateX(4px)} .news-more span{transition:transform .18s} /* The same card on a light band - the news index. Only the colours change: the ground, the border and the three kinds of text. Everything structural is shared with the dark one. */ .band-paper .news-card,.band-white .news-card{background:var(--white);border-color:var(--line)} .band-paper .news-card:hover,.band-white .news-card:hover{background:var(--white); border-color:var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.08)} .band-paper .news-card h3 a,.band-white .news-card h3 a{color:var(--ink)} .band-paper .news-card h3 a:hover,.band-white .news-card h3 a:hover{color:var(--navy)} .band-paper .news-date,.band-white .news-date{color:var(--slate)} .band-paper .news-text,.band-white .news-text{color:var(--ink-2)} .band-paper .news-more,.band-white .news-more{color:var(--gold-d)} @media (min-width:760px){.news-grid{grid-template-columns:repeat(3,1fr);gap:26px}} /* The club's board, on the contact card. A rule and a heading, so the names read as the people who run the club rather than as a list that fell off the paragraph above. */ .officers{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .officers-h{margin:0 0 8px;font-family:var(--mono);font-size:.68rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--slate)} .officers .prose p{margin:0} /* The next tournament's own hero. Arthur, 2026-10-01: about twice the height it had. It was 364px - 272px of content between 46px of padding - and padding is what grows, so the measured height at 1440 is now about 730. It scales with the viewport rather than sitting at one number: 16vw keeps the proportion on a laptop, the floor keeps a phone from wearing 230px of empty navy above the event name. */ /* .band.ev-hero, not .ev-hero: the desktop block near the foot of this file sets .band{padding-block:88px} and scores the same, so the later rule would have won. */ /* 80% OF THE HEIGHT IT WAS (Arthur, 2026-10-06: "make this blue box about 80% of it's size"). Worked from the measured band rather than by scaling the padding, because the padding is not the whole box: at 1920 wide the band stood ~778px with the 230px cap top and bottom, so the content inside it is ~318px. For 80% of 778 (~622) the padding has to be (622-318)/2 = ~152, not 184. Scaling the three numbers by 0.8 would have taken barely 12% off what the reader actually sees. */ .band.ev-hero{padding-block:clamp(45px,12.8vw,152px)} /* THE SECONDARY LINKS UNDER REGISTER (Arthur, 2026-10-06: "the rules button should be centered under the register button and have some padding above it. it's too close to the register button"). The padding is the easy half. The centring is not what it looks like: the ROW was already centred - measured off his screenshot, row centre 952 against Register's 951 - but the middle BUTTON sat ~16px left of Register because the two outside it are different widths (Event details ~134px, Boundaries & map ~166px), so the middle of three unequal pills is not the middle of the row. Giving the three a shared minimum width makes the row symmetrical, which puts the middle one under Register by construction rather than by a nudge that breaks when a label changes. HONEST LIMIT: this row takes a fourth button (Registered anglers) once anglers are registered. With four there is no middle button and nothing can sit under Register; the row stays symmetrical, which is the best available. The minimum width is dropped on narrow screens so three pills wrap normally instead of forcing a scrollbar. */ .ev-hero-links{margin-top:24px} .ev-hero-links .btn{min-width:170px} @media (max-width:560px){.ev-hero-links .btn{min-width:0}} /* ---------- the new angler guide, as questions ----------
    and , so a click opens an answer with nothing loaded to make it work - and the browser's own find-in-page and print still reach the answers. */ .faq{border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden} .faq-h{margin:38px 0 14px;font-size:clamp(1.15rem,2.2vw,1.5rem)} .faq-h:first-of-type{margin-top:26px} .faq-item{border-bottom:1px solid var(--line)} .faq-item:last-child{border-bottom:0} .faq-item summary{cursor:pointer;list-style:none;padding:16px 46px 16px 18px;position:relative; font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.35; transition:background .15s} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{background:var(--paper)} .faq-item summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} /* The marker is drawn rather than typed: a + that becomes a - when the answer is open. */ .faq-item summary::after{content:"";position:absolute;right:18px;top:50%;width:13px;height:13px; margin-top:-7px;background: linear-gradient(var(--gold-d),var(--gold-d)) center/13px 2.5px no-repeat, linear-gradient(var(--gold-d),var(--gold-d)) center/2.5px 13px no-repeat; transition:transform .18s} .faq-item[open] summary::after{background:linear-gradient(var(--gold-d),var(--gold-d)) center/13px 2.5px no-repeat; transform:rotate(180deg)} .faq-item[open] summary{background:var(--paper)} .faq-a{padding:2px 18px 18px;max-width:72ch} .faq-a p{margin:0 0 .7em} .faq-a p:last-child{margin-bottom:0} /* ---------- photo albums: seasons, then events ---------- Arthur, 2026-10-01. A cover picture, the name, and how many are inside - the same card at both levels, because a season and an event are the same thing to click on. */ .album-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:26px} .album{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden; background:var(--white);text-decoration:none;color:inherit; transition:border-color .18s,transform .18s,box-shadow .18s} .album:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)} .album-shot{display:block;line-height:0;background:var(--navy-d)} .album-shot img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block} .album-body{display:block;padding:16px 18px} .album-name{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:1.1rem;line-height:1.15} .album-meta{display:block;margin-top:6px;font-family:var(--mono);font-size:.7rem; letter-spacing:.14em;text-transform:uppercase;color:var(--slate)} /* Where you are, and the way back. Two levels down, the title alone does not say it. */ .crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; color:var(--slate);display:flex;gap:9px;flex-wrap:wrap;align-items:center} .crumbs span{opacity:.5} @media (min-width:640px){.album-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:980px){.album-grid{grid-template-columns:repeat(3,1fr);gap:24px}} /* ---------- a page that is about one document ---------- The waiver and the identifier placard: read it here, or take a copy. The frame is the browser's own PDF viewer, tall enough to read a page of A4 without scrolling twice. */ .doc-frame{margin-top:26px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden; background:var(--white)} .doc-frame object{display:block;width:100%;height:min(1100px,118vh);border:0} .doc-shot{margin:26px 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden; background:var(--white);padding:14px} .doc-shot img{display:block;width:100%;height:auto} /* ---------- photos, documents, forms ---------- */ .photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .photo-grid figure{margin:0} .photo-grid img{aspect-ratio:4/3;object-fit:cover;border-radius:3px} .photo-grid figcaption{font-size:.8rem;color:var(--slate);margin-top:6px} .doc-list{display:grid;gap:10px} .doc{display:flex;align-items:center;gap:13px;padding:15px;background:var(--white); border:1px solid var(--line);border-radius:var(--r);color:inherit} .doc:hover{border-color:var(--navy);text-decoration:none} .doc-ic{font-family:var(--mono);font-weight:700;font-size:.6rem;color:#fff;background:var(--navy); border-radius:3px;padding:.55em .6em;flex:0 0 auto} .doc-t{font-weight:600} .field{margin-bottom:16px} .field label{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase; letter-spacing:.04em;font-size:.76rem;margin-bottom:7px} .field .hint{font-size:.84rem;color:var(--slate);margin-top:5px} /* tel and datetime-local were missing from this list, so a phone box rendered at the browser's default width next to full-width ones and a datetime box did the same on the tournament form. Both are in use on this site; adding a field type without adding it here is easy to miss, because the input still works - it just looks wrong. */ input[type=text],input[type=email],input[type=password],input[type=date],input[type=url], input[type=tel],input[type=datetime-local],input[type=search], input[type=number],select,textarea{width:100%;font-family:var(--body);font-size:16px; padding:12px 14px;background:var(--white);color:var(--ink);border:1.5px solid var(--line);border-radius:4px} textarea{min-height:150px;resize:vertical;line-height:1.6} input:focus,select:focus,textarea:focus{border-color:var(--navy);outline:none} .honey{position:absolute;left:-9999px} .notice{padding:14px 16px;border-radius:var(--r);margin-bottom:20px;border:1px solid} .notice-ok{background:#ECF6EE;border-color:#BFDCC6;color:#1E5B2D} .notice-warn{background:#FDF3DF;border-color:#E3C07A;color:#7A5210} /* ---------- footer ---------- */ /* The footer matches the top bar, and it is deliberately compact. It used to run to about 550px - a full screen of navigation below a page that already has all of it in the header. Everything here is the same content at about a quarter of the height: tighter padding, tighter gaps, smaller type, and the donate button no longer stretched to the full column width. */ .site-foot{background:var(--bar);color:rgba(255,255,255,.82)} .foot-inner{padding-block:18px;display:grid;gap:14px} .foot-name{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:.92rem;color:#fff} .foot-tag{margin-top:2px;font-size:.84rem} .foot-social{margin-top:8px;display:flex;gap:14px} .foot-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 20px} .foot-col{display:grid;gap:2px;align-content:start} .foot-h{font-family:var(--mono);font-size:.55rem;text-transform:uppercase;letter-spacing:.18em;color:var(--gold)} .foot-col a{color:rgba(255,255,255,.85);font-size:.82rem;line-height:1.5} .foot-col a:hover{color:#fff} .foot-meta{border-top:1px solid var(--line-dark);padding-block:10px;display:grid;gap:4px;font-size:.8rem; font-size:.8rem;color:rgba(255,255,255,.6)} .foot-meta a{color:rgba(255,255,255,.72)} .admin-link{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase} /* ========================================================================== Wider screens ========================================================================== */ @media (min-width:640px){ :root{--pad:28px} .grid-2{grid-template-columns:repeat(2,1fr)} .sponsor-grid{grid-template-columns:repeat(3,1fr)} .photo-grid{grid-template-columns:repeat(3,1fr)} .foot-cols{grid-template-columns:repeat(4,1fr)} .band{padding-block:72px} .hero-next .wrap{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;text-align:left} } @media (min-width:980px){ :root{--pad:36px} /* Option 3, the angled divider. The logo is TALLER than the bar and hangs below it into the hero. It is anchored to .site-head by its TOP edge, with a few pixels of air above it: anchoring to the bottom of .head-inner is what clipped it, because that box is the header minus 24px of padding, so the logo started above the header itself and the viewport cut it off. Top-anchored, the air above it is fixed and the overlap below is whatever the logo's height leaves - which is the safe way round. */ /* Nudged in from the edge toward the nav - about a quarter of the gap that was there. A percentage rather than a fixed offset so it keeps its proportion on a narrower desktop, clamped so it can never crowd the nav or slide back to the edge. */ /* 213px, and it is arithmetic. NATION sits at 48.34% of this artwork's height and the divider is now level, so it crosses at exactly --head-h: (110 - 7) / 0.4834 = 213. It was 221 while the line was angled and met the logo 3.8px lower than it met the centre of the page; straightening it removed that correction. IF THE LOGO FILE IS EVER REPLACED, re-measure the 48.34% - it belongs to the artwork, not to the layout. */ /* Taking the logo out of the flex flow is also what lets the nav centre on the PAGE rather than on the space left over beside it - those differ by half the logo's width, which is enough to look like a mistake. The .brand rule above does both jobs; there used to be a second one here that re-centred it vertically and clipped its top against the bar. */ /* A FULL SCREEN PER SECTION IS GONE (Arthur, 2026-10-01). Every home band used to be at least 100vh with its content centred, so the space above and below the content was whatever the screen had left over - 153px on one band, 98 on another, 148 on a third, and 88 only on the one band whose content happened to fill the screen. He picked that band, the tournaments, and asked for its spacing everywhere: "the standard padding or spacing that every home page section needed". So the bands are their content plus the band padding, which is one number in one place. The HERO still fills the screen - he said not to touch that one, and it is the only section whose job is to BE the screen rather than to hold content. */ .band-full{display:grid;align-content:center} .band .blob img{max-height:min(56vh,620px);width:auto;margin-inline:auto;display:block} .site-nav > a,.navdd > button{background:none;border:0;cursor:pointer;color:#fff; font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em; font-size:.76rem;padding:10px 9px;border-radius:4px;display:inline-flex;align-items:center;gap:5px; white-space:nowrap} .site-nav .nav-donate{border:2px solid var(--gold);color:var(--gold);border-radius:999px; padding:9px 16px;margin-left:6px;font-weight:800} .site-nav .nav-donate:hover{background:var(--gold);color:var(--ink);text-decoration:none} .site-nav > a:hover,.navdd > button:hover{color:var(--gold);text-decoration:none} .site-nav a.is-active{color:var(--gold)} .site-nav .nav-cta{background:var(--gold);color:var(--ink);margin-left:6px;border-radius:999px; padding:10px 20px;font-weight:800} .site-nav .nav-cta:hover{background:var(--gold-d);color:var(--ink)} /* dropdowns, as on the reference site */ .navdd{position:relative} .navdd-menu{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--line); border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.22);padding:8px;display:none;z-index:70} .navdd:hover .navdd-menu,.navdd:focus-within .navdd-menu,.navdd-menu.open{display:block} .navdd-menu a{display:block;color:var(--ink);font-family:var(--display);font-weight:700; text-transform:uppercase;font-size:.76rem;padding:10px 12px;border-radius:4px} .navdd-menu a:hover{background:var(--paper);color:var(--navy);text-decoration:none} .head-inner{padding-block:18px} .brand-mark,.brand-mark-ph{width:74px;height:74px} .brand-name{font-size:1rem;max-width:15ch} .grid-3{grid-template-columns:repeat(3,1fr)} /* ONE CARD SITS IN THE MIDDLE (Arthur, 2026-10-06: "there is just 1 aoy so it should be centered"). A three-column grid puts a lone card in the left third with two empty thirds beside it, which reads as something missing rather than as the only one there is. Two cards centre as a pair for the same reason. The card keeps a sensible width rather than stretching across the band. */ .grid-3:has(> :only-child){grid-template-columns:minmax(0,22rem);justify-content:center} .grid-3:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,22rem));justify-content:center} .split{grid-template-columns:1fr 1fr;gap:56px;align-items:center} /* .split centres its two halves, which is right for the home page's picture-beside-text bands and WRONG for a page whose second column is a sidebar: on Tournament Central it vertically centred the cards, so "Before you launch" began level with CAPTAIN'S MEETING and left a hole beside LAUNCH. Arthur asked for them level with the launch text, which is align-items:start. The 1fr 1fr also gave a list of four bullets half the page. */ .split-aside{grid-template-columns:minmax(0,1fr) 330px;gap:44px;align-items:start} .split-text{padding-block:10px} /* Four across, not five: at five the cells are 210px and a doubled logo cannot use the height it has been given. Four makes them 268px, and eight sponsors fall as two full rows rather than five and three. */ .sponsor-grid{grid-template-columns:repeat(4,1fr);gap:28px} .foot-inner{grid-template-columns:1.1fr 2fr;gap:28px} .hero-inner{padding-block:56px} .band{padding-block:88px} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}} /* ---------- the desktop header ---------- Its own breakpoint, above the general desktop one, because the header collides before anything else does. The logo is 310px wide at full size and the nav is about 785px; a page-centred nav starts at (W - 785) / 2, so below roughly 1530px the nav reaches under the logo. Arthur saw it at 1250. So the logo is sized to the space that actually exists: 0.3157W - 283 is the largest it can be and still leave the centred nav clear, with about 20px to spare. --head-h is COMPUTED from it rather than set beside it, which is what keeps the gold line through NATION at every width - the two can never drift apart. Below 1180px the sum stops working at any sensible logo size, so the header goes back to the compact bar and the drawer, which is what the hamburger is for. */ @media (min-width:1180px){ :root{ --logo-h:clamp(96px, calc(31.57vw - 283px), 213px); --head-h:calc(var(--logo-h) * 0.4834 + 7px); } .nav-toggle{display:none} .drawer{display:none !important} .head-inner{justify-content:center} .brand{position:absolute;left:clamp(22px,4%,90px);top:7px;bottom:auto;transform:none;z-index:2} .brand-logo{height:var(--logo-h)} .site-nav{display:flex;align-items:center;gap:6px} } @media print{.site-head,.drawer,.site-foot,.btn,.hero-art{display:none!important}body{font-size:11pt;color:#000}} /* ---------- tournament info tiles (the reference site's strip under the hero) ---------- */ .tiles{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-dark)} .tile{background:var(--navy-d);padding:18px 4px} .tile-l{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin-bottom:6px} .tile-v{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.02rem;line-height:1.15} .tile-s{font-size:.84rem;color:rgba(255,255,255,.72);margin-top:3px} .mapwrap{margin-top:18px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)} .mapwrap iframe{display:block;width:100%;min-height:320px;border:0} .foot-social svg{display:block} .foot-social a{color:rgba(255,255,255,.85)} .foot-social a:hover{color:var(--gold)} @media (min-width:640px){ .tiles{grid-template-columns:repeat(2,1fr)} } @media (min-width:980px){ .tiles{grid-template-columns:repeat(4,1fr)} .tile{padding:24px 6px} } /* ========================================================================== Hero photograph with moving water. Three layers over the photo, all CSS: a masked copy of the water that drifts sideways, a second copy drifting the other way more slowly, and a specular sheen crossing on top. Nothing to download beyond the photo itself. ========================================================================== */ .hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-photo > div{position:absolute;inset:0;background-position:center 42%; background-size:cover;background-repeat:no-repeat;will-change:transform} .hp-base{z-index:0} /* The moving water overlay was removed on 2026-09-29 at Arthur's request: the hero is the photograph, still. The masked drifting copies, the ripple lines and the travelling sheen have all gone, along with their keyframes. Only .hp-base below is drawn now. If it is ever wanted back, the mask percentages must be measured against whichever photograph is in use - they are not portable between images. */ /* a photo this dark needs less scrim than the drawn stand-in */ /* THE VEIL THAT IS ACTUALLY IN EFFECT when a photograph is set, overriding .hero::after above. Worth saying loudly, because I spent three renders darkening the other one and wondering why nothing moved: there are two hero veils and this is the live one. Set from a measurement. Sampled behind the opening line on the live page, the 95th-percentile background was rgb(186,132,34) - 3.28:1 against white, under the 4.5:1 that body text needs. Taking the middle stop from .26 to .48 composites about .30 more of the same colour over it, which clears the threshold with room for a brighter photograph than the current one. Arthur then asked for a little more: the middle is .58, which is past what the measurement required and is his call on how the picture should feel rather than a contrast fix. Then 20% darker again on 2026-10-01, and that 20% is literal: the stops are not nudged but solved, by sampling this band's background and finding the extra overlay that drops its mean luminance to 0.80 of what it was. A gradient rather than a flat wash so the picture still reads as a picture, and the deepest part stays at the foot where the NEXT EVENT strip sits. */ .hero-has-photo::after{background:linear-gradient(180deg,rgba(6,18,28,.82) 0%, rgba(6,18,28,.685) 40%,rgba(6,18,28,.91) 100%)} /* ---------- the angler silhouette, used as a section watermark ---------- */ /* The reference site ghosts a big kayak photograph behind its Grassroots Passion band. Ours is the silhouette cut from Arthur's photo, at the same weight: large, faint, to the right, behind the words. */ .band-ghost-angler{position:absolute;inset:0;z-index:0;pointer-events:none; display:flex;align-items:center;justify-content:flex-end;opacity:.09;overflow:hidden; padding:clamp(10px,2.5vw,40px)} /* max-width AND max-height, so the whole figure is always inside the band */ .band-ghost-angler img{display:block;width:auto;height:auto; max-width:min(58%,780px);max-height:88%;object-fit:contain} @media (max-width:820px){ .band-ghost-angler{justify-content:center;align-items:center;opacity:.07;padding:14px} .band-ghost-angler img{max-width:94%;max-height:74%} } /* ---------- social links in the nav ---------- */ /* The mark sits with the word rather than in a column of its own, so a menu of two links does not look like a table. Sized to the text, not fixed, so it scales. */ /* The footer shows the same marks, bigger and on their own. */ .foot-social a .soc-i{width:24px;height:24px;margin:0;opacity:.9} .foot-social a:hover .soc-i{opacity:1} .navdd-menu a .soc-i, .drawer-group a .soc-i{width:1em;height:1em;vertical-align:-.13em;margin-right:.55em;opacity:.85;flex:none} .navdd-menu a:hover .soc-i,.drawer-group a:hover .soc-i{opacity:1} /* ---- the event page's "the day" box ------------------------------------------------- Arthur, 2026-10-01, relaying the club: "All this stuff should be on top in a box above Launch, kind of like the schedule boxes look but make it better." The schedule card's facts strip is the reference. Better, here, means three things it does not do: the gold rule so the box reads as the event's own summary rather than a table that happens to be first, a head row that carries the map button where somebody looking for the launch location will actually find it, and columns that size themselves to the content so "Photos uploaded by" never wraps onto two lines the way it did in the 260px sidebar this replaces. */ .event-box{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold); border-radius:var(--r);padding:18px 20px 6px;box-shadow:0 1px 2px rgba(16,24,40,.04)} .event-box-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px} /* Not a .btn: a button's own padding indented it from the grid below, and Arthur wanted the words level with DATE and twice the size. So it keeps the display face and loses the pill - no padding on the left, nothing to push it off the box's own edge. */ .event-map-link{display:inline-block;font-family:var(--display);font-weight:800;text-transform:uppercase; letter-spacing:.02em;font-size:1.7rem;line-height:1.15;color:var(--navy);padding:0;border:0; background:none;text-decoration:none;border-bottom:3px solid var(--gold)} .event-map-link:hover{color:var(--gold-d);border-bottom-color:var(--gold-d);text-decoration:none} @media (max-width:640px){.event-map-link{font-size:1.15rem}} .event-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:16px 22px;align-items:start} .ef{min-width:0} .ef-k{font-family:var(--mono);font-size:.68rem;font-weight:700;text-transform:uppercase; letter-spacing:.08em;color:var(--slate);margin-bottom:3px} .ef-v{font-size:1.02rem;line-height:1.35;color:var(--ink);overflow-wrap:anywhere} .event-box-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px; margin-top:16px;padding:12px 0;border-top:1px solid var(--line);color:var(--ink)} .event-box-foot .ef-k{margin:0} @media (max-width:640px){.event-box{padding:16px 16px 4px} .event-facts{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px 16px}} /* ---- two-day events on the schedule ------------------------------------------------ The club's own mock-up, via Arthur 2026-10-01. A multi-day event is the one thing on this page that can send somebody to the lake on the wrong morning, so it is said in both places the eye lands: a band across the top of the card, and a block in the date rail under the single big date that would otherwise be the only date anyone reads. */ .fx-multi{grid-column:1/-1;display:flex;align-items:center;justify-content:center; gap:16px;flex-wrap:wrap;background:var(--gold);color:var(--ink); padding:11px 18px;text-align:center} .fx-multi-ico{width:22px;height:22px;flex:none} .fx-multi-lab,.fx-multi-dates{font-family:var(--display);font-weight:800;text-transform:uppercase; letter-spacing:.035em;font-size:1rem;line-height:1.2} /* The rules sit on the label so they disappear with it when the band wraps on a phone, rather than leaving a stray vertical line above the dates. */ .fx-multi-lab{padding:2px 16px;border-left:2px solid rgba(17,24,39,.3);border-right:2px solid rgba(17,24,39,.3)} @media (max-width:620px){ .fx-multi{gap:8px;padding:10px 14px} .fx-multi-lab{border:0;padding:0} .fx-multi-lab,.fx-multi-dates{font-size:.82rem} } /* The rail block. Gold on the navy rail, so it reads as part of the same warning as the band without repeating its wording. */ .fx-2day{display:block;margin-top:14px;background:var(--gold);color:var(--ink); border-radius:10px;padding:8px 6px 9px;width:100%;max-width:84px} .fx-2day .n{display:block;font-family:var(--display);font-weight:900;font-size:1.02rem;line-height:1} .fx-2day .t{display:block;font-family:var(--display);font-weight:800;font-size:.56rem; letter-spacing:.07em;text-transform:uppercase;margin-top:2px} .fx-2day .d{display:block;margin-top:7px;padding-top:7px;border-top:1px solid rgba(17,24,39,.3); font-family:var(--body);font-weight:600;font-size:.68rem;line-height:1.35} /* ---- the whole schedule card is the link ------------------------------------------ Arthur, 2026-10-01: "you should be able to click anywhere the full tournament box, date part or map part to go to the tournament page." One real link stays in the markup - the title - and it grows a transparent layer over the whole card. That way a keyboard still finds exactly one link per event and a screen reader still reads its name, which a div with a click handler would have taken away. Everything else that is genuinely clickable is lifted above that layer: the Event details button, and the tournament director's email address. */ .fixture{position:relative} .fixture .card-link::after{content:"";position:absolute;inset:0;z-index:1} .fixture a:not(.card-link),.fixture .btn{position:relative;z-index:2} /* The hover cue has to be the card, not just the words, or a reader hovering the map gets no sign that it is live. */ .fixture:hover{border-color:var(--gold)} .fixture:hover .card-link{color:var(--navy)} /* The rail box's second line is the only place "Tournament" would not fit, so it reads "Event" there - and the gap stops the two words touching the gold edges. */ .fx-2day .t{padding:0 2px} /* ---- a lettered, numbered document (the tournament rules) -------------------------- Arthur, 2026-10-01: mark it up, because it was typed before the page had a formatting guide and arrived as 163 identical paragraphs. The shape is applied at render time, so the officer editing it still sees their own plain text. */ .prose-clauses .clause-h{display:flex;align-items:baseline;gap:12px;text-transform:none; margin:2.4rem 0 .9rem;padding-top:1.1rem;border-top:2px solid var(--gold); font-size:1.45rem;line-height:1.2} .prose-clauses .clause-h:first-child{margin-top:0;padding-top:0;border-top:0} /* Auto width with a pill radius, not a fixed circle: the sections run A, B, then 1 to 12, and a 1.9rem circle cropped the two-digit ones. */ .prose-clauses .clause-l{flex:none;display:inline-flex;align-items:center;justify-content:center; min-width:1.9rem;height:1.9rem;padding:0 .45rem;border-radius:999px;background:var(--navy); color:#fff;font-family:var(--display);font-size:.95rem;font-weight:900} .prose-clauses .clause{margin:.55rem 0;padding-left:3.1rem;text-indent:-3.1rem} .prose-clauses .clause-n{font-family:var(--mono);font-weight:700;color:var(--navy); display:inline-block;min-width:2.6rem;text-indent:0} @media (max-width:640px){ .prose-clauses .clause-h{font-size:1.2rem;gap:9px} .prose-clauses .clause{padding-left:2.6rem;text-indent:-2.6rem} .prose-clauses .clause-n{min-width:2.2rem} } /* An editor-only note on a public page. Dashed, so it reads as scaffolding rather than content, and it is only ever rendered for a signed-in admin. */ .admin-note{border:1px dashed var(--gold-d);background:#FFFBEF;border-radius:var(--r); padding:12px 14px;margin:0 0 26px;font-size:.92rem;color:var(--ink)} .admin-note a{text-decoration:underline} /* The rules fill the page. Ordinary prose is capped at 70ch because that is the comfortable measure for reading continuous text, but this document is scanned rather than read start to finish - you are looking for clause 9.4 - and the hanging clause numbers eat into the column as well. Arthur, 2026-10-01: twice as wide on that page. 70ch to the full 1180px wrap is about that, and the wrap is the honest ceiling: wider than its container it cannot go. */ .prose-clauses{max-width:none} /* A content page's prose: wider than the reading measure and centred in the wrap. 70ch is right for continuous text in a narrow column, but on a page whose only content IS that column it left a third of the band empty down the right-hand side. About 1.5x and centred (Arthur, 2026-10-01). The text itself stays left-aligned - centred body copy gives every line a different starting point and is markedly harder to read down. */ .prose-page{max-width:105ch;margin-inline:auto} /* Room UNDER the heading as well as over it. At .8rem the first line of the paragraph sat directly beneath a very large uppercase heading and the two read as one stacked block (Arthur, 2026-10-01). The space below is now close to the space above, so each section reads as a heading with its text rather than a wall. */ .prose-page h2{text-align:center;margin:2.8rem 0 1.5rem;line-height:1.1} .prose-page h2:first-child{margin-top:0} .prose-page p{margin:0 0 1.15rem} /* The opening of a content page, set in bold: it is the paragraph a visitor reads before deciding whether to read the rest (Arthur, 2026-10-01). Scoped to .prose-page so the .lede used on the dark hero bands keeps its own treatment. */ .prose-page p.lede{font-weight:700} /* The home page's section heads, sized by Arthur on 2026-10-01. The hero and the tournament band at the top keep the fit-to-width scaling that makes a title span the band; these five - Become a Member, the club line, AOY Standings, News & Announcements, Our Sponsors - take a fixed scale instead, because at full fit they were competing with the hero for the page. */ .section-title{font-size:clamp(42px, 4.2vw, 68px);line-height:1;letter-spacing:-1px} /* The one-line intro on a document page sits under a centred banner, so it centres too. */ .lede-center{text-align:center;margin-inline:auto;max-width:62ch} /* ---- the hero, to the club's mock-up (Arthur, 2026-10-01) -------------------------- The photograph stays; what changes is where the words sit and what holds them up. A side gradient rather than a flat veil over the whole frame: dark enough on the left to carry white text at full contrast, and clear by three-quarters across so the sunset is still a sunset. The strip below the hero is untouched. Two measurements decide this block, and both were got wrong on the first pass: 1. THE COLUMN HAS TO FIT THE NAME. ARIZONA KAYAK is thirteen characters of Montserrat 900, which is about 9.7em wide. Held to 620px at 104px type it came out as four lines - ARIZONA / KAYAK / BASS / NATION - instead of the mock-up's two. So the title gets its own width, set wide enough for 9.7em of the largest size it can reach, and the lede keeps the narrower measure that prose wants. They are sized separately on purpose. 2. THE LOGO HANGS OVER THE HERO. --logo-h is up to 213px against a 110px header, so the club's mark overhangs the top of the photograph by about 100px, and the hero's words are centred in what is left. With a tall block the centring runs out of room at the top and the gold eyebrow ends up behind the logo, which is exactly what happened. The padding below is that overhang plus air, so the first line always starts under it. */ .hero-has-photo{text-align:left} .hero-has-photo .hero-inner{margin-inline:0;max-width:none; padding-inline:clamp(20px, 4.4%, 92px)} .hero-has-photo .hero-inner > *{margin-inline:0} .hero-has-photo::after{ background: linear-gradient(90deg, rgba(8,20,30,.95) 0%, rgba(8,20,30,.92) 34%, rgba(8,20,30,.78) 54%, rgba(8,20,30,.40) 72%, rgba(8,20,30,.10) 88%, rgba(8,20,30,.02) 100%), linear-gradient(180deg, rgba(8,20,30,.40) 0%, rgba(8,20,30,0) 26%, rgba(8,20,30,0) 62%, rgba(8,20,30,.55) 100%)} /* THE EYEBROW IS A MEASURED WIDTH, not a caption. In the club's mock-up it runs the full width of the title block - about 44% of the frame - which is the thing that makes it read as part of the name rather than as small print above it (Arthur, 2026-10-01: wide and stuff). Thirty-nine characters at .32em of tracking need about 0.9em each, so the size is set from the viewport to keep that width as the frame changes. The display face, not the mono one: at this tracking a typewriter face reads as a label. */ /* THIN AND EXACTLY AS WIDE AS THE NAME UNDER IT (Arthur, 2026-10-01: the picture has them thin ... the same width like over the Arizona Kayak part). Both numbers are read off the picture rather than chosen: its eyebrow is 723px wide against a 763px title, and its caps are 12px against the title's 73, so the eyebrow is .164 of the title's size and 95% of its width. Thirty-nine characters of Archivo 400 are 23.5em, the title is 6.97em, so the tracking that makes those two widths meet is .42em - which is also what the picture has. SIZE AND TRACKING ARE ONE SETTING HERE: change either alone and the two lines stop lining up. Both are set from the viewport, so they stay in step at every width. */ .hero-eyebrow{font-family:var(--poster-body);font-weight:400;text-transform:uppercase; letter-spacing:.42em;font-size:clamp(10px, .43rem + .65vw, 20px);line-height:1.3; /* Set in em so the gap closes as the line shrinks, instead of a fixed 20px that grows relatively larger on a narrow screen (Arthur: put this a little closer to Arizona Kayak). The line box already carries .15em of half-leading under the caps. */ color:var(--gold);margin:0 0 .62em} /* THE NAME IS SET IN THE POSTER FACE (Arthur, 2026-10-01, against the mock-up). Archivo 900 condensed, not Montserrat Black: it is two-thirds the width per letter, which is what lets the name run at the size the mock-up runs it - about 44% of the frame - on two lines. Size, measure and line height are all set from that, so changing one without the others is what breaks it. THE TWO NUMBERS COME OFF THE PICTURE (Arthur, 2026-10-01: too tall and needs to be closer together). In his picture the caps are 73px in a 1672px frame and the lines sit 90px apart, so the type is 6.1% of the width - Archivo's caps are .713em - and the leading is .84 of that. It was 6.6vw on a .9 line, which is why it stood taller and sat looser than the thing he was comparing it to. BUT THE PICTURE'S PROPORTION IS NOT A SCALING RULE (Arthur, 2026-10-01: on a smaller window it makes the font too small). A plain 6.1vw holds that proportion everywhere, which means a 866px window got 53px type - correct as a fraction of the frame and too small to read as a masthead. A fixed part plus a smaller slope keeps the big-window size he approved and lifts the small-window one: 2.24rem + 3.72vw is 92px at 1512 and 68px at 866, where pure vw gave 92 and 53, and a further 10% on top of that at his word. The measure goes to 76% because a bigger title in a smaller frame needs more of it, or ARIZONA KAYAK breaks in two: at 761px, the narrowest this block is ever used, the name is 497px against a 527px measure. */ .hero-has-photo .hero-title{font-family:var(--poster);font-weight:900;text-transform:uppercase; /* The word space, not the letter spacing: at 900 weight and 75% width Archivo's own space leaves 0.28 of a cap-height between ARIZONA and KAYAK, and the A's diagonal eats most of that - they read as touching. The picture leaves 0.49. Measured back through the glyphs, .15em of word-spacing is what puts ours at 0.49 as well - measured off his own screenshot afterwards, the live page renders 0.494 against the picture's 0.493. THE PAIR THAT WAS ACTUALLY TOUCHING WAS K-A INSIDE KAYAK, and the reason was KERNING. The font carries pairs of -.037em for K+A and -.064em for A+Y and Y+A, which the browser applies and my own measuring did not, so the pair that measured as just-touching offline was being pulled into an overlap on the page. Every pair in ARIZONA KAYAK BASS NATION is set flush in this face - the tightest are AY and YA at -.01 of a cap-height - so turning the pairs off and adding .02em of tracking is what separates them: nothing is closer than .019 of a cap-height now, and the .05em I had reached for first (which he then called too spread) is no longer needed. AND THEN THE TRACKING ITSELF WAS THE COMPLAINT (Arthur: now the other letters are too far apart). Measured pair by pair at zero tracking, this face is already at the artwork's fit everywhere - .08 to .13 of a cap-height against .055 to .096 - except K-A at .01. One tight pair had been costing the whole line .028 of a cap-height per gap. So tracking goes back to 0 and the K-A pair gets a spacer of its own instead. */ font-size:clamp(48px, 2.6rem + 3.9vw, 118px);line-height:.84; font-kerning:none;letter-spacing:0;word-spacing:.15em; max-width:min(1000px, 84%);margin:0 0 28px;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.45)} /* The spacer that opens K-A and nothing else - see hero_name_html() in lib/render.php, which puts it there. .025em takes that pair from .01 of a cap-height to .045, which is where the club's artwork has it, and no other pair in the name is touched. */ .hero-has-photo .hero-title .kp{display:inline-block;width:.025em} /* The second half of the name, in gold, on its own line - AND the rule under it. The rule has to stop where the words stop, and nothing but the words themselves knows that width, so it is this line's bottom border and display:table shrink-wraps the box to the text. views/home.php leaves the standalone .hero-rule out whenever this span exists. */ .hero-has-photo .hero-title .ln1{display:block} .hero-has-photo .hero-title .ln2{display:table;color:var(--gold); padding-bottom:.2em;border-bottom:.075em solid var(--gold)} .hero-rule{display:block;width:92px;height:6px;border-radius:3px;background:var(--gold); margin:22px 0 24px} /* The opening paragraph is the picture's face too, at the picture's proportion: its type is about a quarter of the title's size, on a 1.38 line. */ .hero-has-photo .lede{font-family:var(--poster-body);font-weight:400; /* 1.45vw held this at its 17px floor everywhere below 1170px, so the paragraph stayed phone sized on a 900px window while the name above it was 78px. 2.1vw reaches the same 27px cap on a wide screen and fills the middle band properly. */ font-size:clamp(17px, 2.1vw, 27px);line-height:1.38;color:rgba(255,255,255,.94); max-width:min(46ch, 48%)} .hero-has-photo .btn-row{justify-content:flex-start} .hero-has-photo .hero-presented{justify-content:flex-start} @media (min-width:1180px){ /* Clearance for the overhanging logo - see note 2 above. */ .hero-has-photo .hero-inner{padding-top:calc(var(--logo-h) - var(--head-h) + 46px)} } @media (max-width:760px){ /* On a phone the photograph cannot carry text beside it, so the gradient goes back to a full veil and the words centre as they did before. */ .hero-has-photo{text-align:center} .hero-has-photo .hero-inner{padding-inline:var(--pad)} .hero-has-photo .hero-inner > *{margin-inline:auto} .hero-has-photo .hero-title{max-width:100%;font-size:clamp(30px, 9vw, 56px)} .hero-eyebrow{letter-spacing:.24em;font-size:11px} .hero-has-photo .hero-title .ln2{margin-inline:auto;padding-bottom:.22em} .hero-has-photo .lede{max-width:100%} .hero-has-photo .btn-row,.hero-has-photo .hero-presented{justify-content:center} .hero-rule{margin-inline:auto} .hero-has-photo::after{background:linear-gradient(180deg, rgba(8,20,30,.80) 0%, rgba(8,20,30,.58) 42%, rgba(8,20,30,.88) 100%)} } /* ---- the name arrives (Arthur, 2026-10-01: come crashing in from the right) ------------ Two lines, one after the other, thrown in from off the right edge and stopped hard: the overshoot past the mark and the small rebound are what make it read as an impact rather than a slide, and the slight skew is the line leaning into its own travel and straightening when it lands. The hero already clips (overflow:hidden), so nothing widens the page on the way in. DECLARED ONLY UNDER no-preference. A reader who has asked their system for less motion gets the finished headline and no animation at all - and because the animation is not declared for them, there is no starting state to leave the words invisible if it never runs. */ @media (prefers-reduced-motion: no-preference){ @keyframes name-crash{ 0%{opacity:0;transform:translateX(125%) skewX(-9deg)} 50%{opacity:1} 58%{transform:translateX(-2.2%) skewX(2deg)} 74%{transform:translateX(.8%) skewX(-.7deg)} 88%{transform:translateX(-.25%) skewX(.2deg)} 100%{opacity:1;transform:translateX(0) skewX(0)} } /* ONE LINE AFTER THE OTHER (Arthur, 2026-10-01). The first stagger was .14s, which is inside the .72s the first line takes to land, so the two were travelling together. The second line now starts at .82s - as the first comes to rest - so the pair reads as two separate arrivals, and the paragraph and buttons wait until both have landed. */ .hero-has-photo .hero-title .ln1, .hero-has-photo .hero-title .ln2{animation:name-crash .72s cubic-bezier(.16,.86,.3,1) both} .hero-has-photo .hero-title .ln1{animation-delay:.18s} .hero-has-photo .hero-title .ln2{animation-delay:.82s} /* The eyebrow, the paragraph and the buttons are simply THERE (Arthur, 2026-10-06: "lets just make it already there from the start"). Only the two title lines move now. Nothing is left declaring a start state for them, which also means nothing can leave them invisible if an animation never runs - the safest version of this hero is the one with the fewest things hidden at paint. */ } /* RENAMED OFF ev-hero. That class already belonged to the NEXT TOURNAMENT page (central.php, since 2026-10-01, 'the next tournament's hero is about twice the height'), and my padding-block:0 stripped the space above its season line - Arthur saw it on his laptop as the eyebrow jammed under the header. Reusing a live class name for a different page is the whole fault; this block is ev-maphero now and touches only the tournament detail page. */ /* ---------- the event page: hero and card grid (the club's layout, 2026-10-06) ---------- The single full-width facts box became three columns of cards. Nothing here computes a value: the same $facts array that fed the box feeds the cards, grouped in the view. */ /* The band's own padding was leaving the picture panel floating with navy above and below it, which is the opposite of the mock-up where the photograph runs the full height of the band. */ .band.ev-maphero{padding-block:0;overflow:hidden} .ev-maphero .ev-maphero-art{align-self:stretch} .ev-maphero-grid{display:grid;grid-template-columns:1fr;gap:0;align-items:stretch;padding-inline:0;max-width:none} .ev-maphero-words{padding:38px clamp(20px,5vw,64px) 42px;align-self:center;max-width:760px;margin-inline:auto;width:100%} /* The gold rule above the headline, which is the club's mark on every band of theirs. */ .ev-maphero-title{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1.02; letter-spacing:-.01em;margin:10px 0 0;font-size:clamp(1.9rem,4.4vw,3.4rem)} .ev-maphero-sub{margin:12px 0 0;font-size:1.12rem;color:rgba(255,255,255,.82);max-width:46ch} /* The event's date, directly under its name, where "Boundaries Map" used to be (Arthur, 2026-10-06). Gold and letterspaced rather than display caps: a long date set in the heading face at heading size wraps on a phone and competes with the event name it is meant to sit beneath. */ .ev-maphero-date{margin:10px 0 0;font-family:var(--mono);font-size:.82rem;text-transform:uppercase; letter-spacing:.16em;color:var(--gold)} /* THE LABEL WAS INVISIBLE UNTIL HOVER. On a dark band the site paints link text gold, and that rule beat .btn-primary's own colour - gold text on a gold pill, readable only when hover changed it (Arthur, 2026-10-06: "these words don't show up ... until you move the mouse over them"). Said here with enough specificity to win, and the pin takes the same ink. */ .ev-maphero .ev-maphero-btn,.ev-maphero .ev-maphero-btn:hover,.ev-maphero .ev-maphero-btn:focus{color:var(--ink)} .ev-maphero .ev-maphero-btn .pin-glyph{fill:var(--ink)} /* The same colour fix for the TourneyX buttons, which land on this dark band too: the gold pill needs ink on it and the outline button needs white, or the band's link colour wins and the label vanishes. */ .ev-maphero .btn-primary,.ev-maphero .btn-primary:hover,.ev-maphero .btn-primary:focus{color:var(--ink)} .ev-maphero .btn-outline,.ev-maphero .btn-outline:hover,.ev-maphero .btn-outline:focus{color:var(--white)} /* An outline button on this band had no visible edge, so it read as plain text - Arthur, 2026-10-06: "also it doesn't look like a button". Give it a real border on the dark. */ .ev-maphero .btn-outline{border-color:rgba(255,255,255,.65);background:rgba(255,255,255,.06)} .ev-maphero .btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,.14)} .ev-maphero .ev-maphero-map .pin-glyph{width:16px;height:16px} .ev-maphero .btn-primary.ev-maphero-map .pin-glyph{fill:var(--ink)} .ev-maphero .btn-outline.ev-maphero-map .pin-glyph{fill:var(--white)} .ev-maphero-btns{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center} .ev-maphero-btn{margin-top:22px;display:inline-flex;align-items:center;gap:10px} /* Room for the logo shield, which overhangs the top of this band. */ /* Clearance under the logo shield, which overhangs this band. Arthur, 2026-10-06: the headline was still touching it at the first value I tried. */ .ev-maphero-words{padding-top:clamp(84px,9vw,132px)} .ev-maphero-btn .pin-glyph{width:18px;height:18px;fill:var(--ink)} /* The picture panel. No photograph on the event means no empty frame: the navy shows and the lake name still reads, which is why the background is set inline only when a photo exists. */ .ev-maphero-art{position:relative;min-height:260px;background:var(--navy-d) center/cover no-repeat; display:flex;align-items:flex-end;justify-content:flex-end} .ev-maphero-art::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,var(--navy) 0,rgba(16,34,51,.55) 38%,rgba(16,34,51,.15) 100%)} .ev-maphero-place{position:relative;z-index:2;padding:22px clamp(18px,4vw,42px);text-align:right} .ev-maphero-place strong{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase; letter-spacing:.01em;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1} .ev-maphero-place span{display:block;margin-top:6px;font-family:var(--mono);font-size:.78rem; letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82)} @media (min-width:980px){ .ev-maphero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} .ev-maphero-words{margin-inline:0;padding-left:clamp(24px,6vw,96px)} .ev-maphero-art{min-height:340px} } /* THE CARDS. One column on a phone, two where there is room, three on a laptop up. The schedule is the tall one and takes its own column; the rest stack in theirs. */ .ev-cards{padding-block:clamp(26px,4vw,46px)} .ev-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start} .ev-col{display:grid;gap:18px;align-content:start} @media (min-width:760px){.ev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1120px){.ev-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .ev-card{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden; box-shadow:0 10px 26px rgba(16,34,51,.07)} .ev-card-head{display:flex;align-items:center;gap:12px;padding:18px 18px 0} .ev-card-head h2{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:1.02rem;letter-spacing:.01em;color:var(--navy); border-bottom:3px solid var(--gold);padding-bottom:6px} /* The icon badge: a navy rounded square with a white line drawing, the club's own shape. */ .ev-ico{flex:none;width:40px;height:40px;border-radius:11px;background:var(--navy);display:grid;place-items:center} .ev-ico svg{width:21px;height:21px;fill:none;stroke:var(--white);stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .ev-rows{margin:16px 0 0;padding:0} .ev-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px; padding:13px 18px;border-top:1px solid var(--line)} .ev-row:last-child{padding-bottom:16px} .ev-row dt{margin:0;color:var(--slate);font-size:.98rem} .ev-row dd{margin:0;color:var(--ink);font-weight:600;overflow-wrap:break-word} .ev-pad{padding:16px 18px 18px} .ev-pad p{margin:0;color:var(--ink-2)} .ev-name{font-weight:700;color:var(--ink);font-size:1.06rem} .ev-role{color:var(--slate);margin-top:2px} .ev-contact{margin-top:10px;overflow-wrap:anywhere} .ev-reg{font-size:1.04rem;color:var(--ink)} /* The register button inside the Fees & entry card: full width of the card, so it reads as the action that follows the price rather than an afterthought beside it. */ .ev-cta{padding:14px 18px 18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px} .ev-cta .btn{flex:1 1 auto;justify-content:center} /* The Registration card's button matches the one in Fees & entry: full width of the card, not a small pill floating in the corner (Arthur, 2026-10-06). Same rule for any button that lands in a card body. */ .ev-pad .btn-row{display:flex;flex-wrap:wrap;gap:10px} .ev-pad .btn-row .btn{flex:1 1 auto;justify-content:center} /* ---------- LAUNCH & BOUNDARIES banner (the club's artwork, Arthur 2026-10-06) ---------- It replaces three headings whose whole content was the same Google Maps URL pasted three times. NOTE THE EXPLICIT COLOURS. This sits on .band-navy, where "a" is painted gold - the rule whose missing :not(.btn) made the Register label invisible this morning. .lb-card is an anchor and not a .btn, so it would inherit gold on every word; each part states its own colour instead of relying on the cascade here. */ /* Half the gap to the cards above (Arthur, 2026-10-06). The gap is the SUM of two paddings - the cards band's bottom (clamp 26/4vw/46) and this band's top - so roughly 92px at desktop. Halving this band's own top padding would only have taken it to ~69. Dropping it to zero leaves the cards band's own bottom padding as the whole gap: 46 of 92, which is the half he asked for. Safe to do because both bands are now the same paper colour, so there is no seam to hide. */ .lb-band{padding-top:0;padding-bottom:clamp(26px,4vw,46px)} /* The border was white-on-navy when the band was navy too; on paper it needs to read as the card's own edge. */ .lb-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(18px,3vw,36px); padding:clamp(20px,3vw,34px) clamp(20px,3.4vw,40px);border:1px solid rgba(255,255,255,.22);border-radius:18px; background:linear-gradient(135deg,var(--navy) 0%,var(--navy-d) 100%); color:#fff;text-decoration:none;transition:border-color .18s ease,background .18s ease,transform .18s ease} .lb-card:hover{border-color:rgba(255,255,255,.5);background:linear-gradient(135deg,var(--navy-l) 0%,var(--navy) 100%);transform:translateY(-2px);color:#fff;text-decoration:none} .lb-ico{display:block;width:clamp(56px,7vw,92px);color:#fff} .lb-ico svg{display:block;width:100%;height:auto} /* The divider is a border on the words, not a grid child: as a ::before it would have been grid item one and pushed the icon into the divider column. */ .lb-words{display:block;min-width:0;border-left:1px solid rgba(255,255,255,.22); padding-left:clamp(18px,3vw,36px)} .lb-eyebrow{display:block;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.28em; color:rgba(255,255,255,.62)} .lb-title{display:block;margin-top:8px;font-family:var(--display);font-weight:800;text-transform:uppercase; line-height:1;letter-spacing:-.01em;font-size:clamp(1.5rem,3.6vw,2.9rem);color:#fff} .lb-gold{color:var(--gold)} .lb-sub{display:block;margin-top:12px;font-size:clamp(.95rem,1.25vw,1.12rem);line-height:1.45; color:rgba(255,255,255,.84);max-width:46ch} .lb-go{display:grid;place-items:center;width:clamp(44px,4.4vw,64px);aspect-ratio:1;border-radius:50%; border:2px solid var(--gold);color:var(--gold);flex:none} .lb-go svg{width:52%;height:auto;display:block} .lb-card:hover .lb-go{background:var(--gold);color:var(--navy-d)} /* The club's own words, where they wrote anything besides the link. */ /* Arthur, 2026-10-06: "make these words black and the same font sizes as" the card rows. So they take .ev-row's type exactly - dt slate at .98rem, dd ink at 600 - rather than something that merely looks similar. They were white mono caps because this band used to be navy. */ /* THE GRID IS THE LIST, NOT THE ROW (Arthur, 2026-10-06: "this 2 lines should be inline with eachother"). Each row was its own grid, so "Boundaries" and "Off limits" each sized their own label column and the two values started at different x - 503 and 485 in his screenshot. Making .lb-notes the grid and each row display:contents puts every dt and dd into ONE pair of columns, so the labels share a width and the values line up by construction. The borders move onto the cells, because a row with display:contents has no box of its own to draw one on. The label column is max-content so the value sits right next to its label: the card rows' 1fr/1.15fr works inside a narrow card but strands the text at the far side of a full-width band. */ .lb-notes{margin:20px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr); gap:0 18px} .lb-note{display:contents} .lb-note dt,.lb-note dd{margin:0;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.08)} .lb-note:last-child dt,.lb-note:last-child dd{border-bottom:0} .lb-note dt{color:var(--slate);font-size:.98rem} .lb-note dd{color:var(--ink);font-weight:600;overflow-wrap:break-word} @media (max-width:760px){ /* Stack: the divider and the circle both stop earning their space at this width. */ .lb-card{grid-template-columns:auto 1fr;gap:16px 18px} .lb-words{border-left:0;padding-left:0} .lb-go{grid-column:2;justify-self:start;margin-top:4px} .lb-note{grid-template-columns:1fr} } /* ---- 2026-10-13 (ticket 1855): two new elements, no change to anything that was here ---- */ /* The two name boxes set into the parent/guardian sentence on the join form, where the document has its blanks. A ruled line, not a box, so the sentence still reads as one. */ .inline-blank{display:inline-block;width:15em;max-width:100%;border:0;border-bottom:2px solid var(--navy); border-radius:0;background:transparent;font:inherit;padding:0 4px;margin:0 2px;vertical-align:baseline} .guardian-text{line-height:1.6;margin:0 0 14px} .guardian{margin-top:22px;padding-top:18px;border-top:1px solid rgba(0,0,0,.12)} /* "Class of 2025" over each group of past qualifiers. */ .qual-year{margin:26px 0 8px;text-align:center} .qual-year:first-of-type{margin-top:0} /* ---------- the payout schedule (Arthur, 2026-10-15) ---------- The chart is eighteen columns wide and a phone is not, so the page leads with the look-up and the full table scrolls sideways under it. The field-size column stays put while it scrolls - a row of dollar amounts with no angler count beside it is unreadable. */ .payout-rules{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px} .payout-rules ul{margin:0;padding-left:20px} .payout-rules li{margin-bottom:.6em;line-height:1.65} .payout-rules li:last-child{margin-bottom:0} .payout-rules-warm{background:#FDF8EC;border-color:#E6D3A2} .payout-example{margin-top:18px;background:var(--white);border:1px solid var(--line); border-left:4px solid var(--gold);border-radius:var(--r);padding:18px 22px} .payout-example h3{margin:0 0 8px;font-size:1rem} .payout-example p{margin:0 0 8px;line-height:1.6} .payout-example p:last-child{margin-bottom:0} .payout-example-rows{display:flex;flex-wrap:wrap;gap:6px 26px;font-family:var(--mono); font-size:.86rem;font-variant-numeric:tabular-nums} .payout-pick{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:18px 0 6px} .payout-pick label{display:block;font-family:var(--mono);font-size:.62rem;text-transform:uppercase; letter-spacing:.14em;color:var(--slate);margin-bottom:6px} .payout-pick select{padding:11px 14px;border:1px solid var(--line);border-radius:var(--r); background:var(--white);font:inherit;min-width:120px} .payout-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:20px} .payout-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px} .payout-card-k{display:block;font-family:var(--mono);font-size:.6rem;text-transform:uppercase; letter-spacing:.14em;color:var(--slate)} .payout-card-v{display:block;margin-top:6px;font-family:var(--display);font-weight:800;font-size:1.6rem; font-variant-numeric:tabular-nums} .payout-card-n{display:block;margin-top:2px;font-size:.84rem;color:var(--slate)} .payout-key-swatch{display:inline-block;width:11px;height:11px;border-radius:2px;background:var(--gold); border:1px solid var(--gold-d);vertical-align:-1px;margin:0 2px} .payout-wide{max-height:70vh;overflow:auto} table.payout-table{min-width:1180px;font-size:.82rem} table.payout-table th,table.payout-table td{padding:8px 11px;white-space:nowrap} table.payout-table thead th{position:sticky;top:0;z-index:2} /* The angler count: left-hand column, always visible, and it has to carry its own background or the scrolling cells show through it. */ table.payout-table tbody th{position:sticky;left:0;z-index:1;background:var(--white);text-align:left; font-family:var(--mono);font-weight:700;border-right:1px solid var(--line)} table.payout-table thead th:first-child{left:0;z-index:3} table.payout-table tbody tr:nth-child(even) th{background:#F7F6F3} table.payout-table tr.opens td,table.payout-table tr.opens th{background:#FDF3DF} table.payout-table td.payout-first{font-weight:700;color:var(--navy-d)} table.payout-table td.payout-empty{color:#B8B3A8} table.payout-table td.payout-purse{color:var(--slate);border-left:1px solid var(--line)} @media (max-width:700px){ .payout-rules{padding:16px 18px} .payout-example{padding:15px 17px} .payout-card-v{font-size:1.35rem} } /* The look-up has its own address so a no-script submit comes back to it; the site header is fixed, so the anchor has to stop short of it or the heading lands underneath. */ #pick{scroll-margin-top:calc(var(--head-h) + 10px)} /* The field size being looked up, marked in the chart as well, so the two agree. */ table.payout-table tr.is-picked td,table.payout-table tr.is-picked th{background:#E8F0F7; box-shadow:inset 0 0 0 1px rgba(42,85,120,.35)} table.payout-table tr.opens.is-picked td,table.payout-table tr.opens.is-picked th{background:#F4EDDA} /* ---------- the hero badge, across from the opening words (Arthur, 2026-10-15) ---------- "we need to add this to the home page on the top part on the right side across from [the hero words]". The hero becomes two columns only when a badge is set; with the slot empty the markup and the layout are exactly what they were. The words keep their own margin rules. Those were written against .hero-inner's direct children and the words are now wrapped in .hero-words, so both selectors are named here - otherwise h1 and the lede would take back the auto margins from .hero h1 and re-centre themselves inside a half-width column. */ .hero-has-photo .hero-words > *{margin-inline:0} /* Arthur, 2026-10-15: "move the newport logo over more on the larger screen. like center it in the open space." So the badge no longer hugs the right-hand padding: the hero is two real columns and the badge is CENTRED in the second one, which is the open water to the right of the words. 1.6fr / 1fr rather than half and half because the words need the room first - at half each, the title wraps to three lines everywhere between about 1100 and 1700px. */ .hero-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center; gap:clamp(18px,3.5vw,64px)} /* Arthur, 2026-10-15: "move it over just a little be to the left". It sat flush against the hero's own right-hand padding; this holds it off that edge by about another 40px on a desktop, scaled from the viewport so the nudge keeps its proportion on a wide monitor. Side-by-side only - below 980px the badge is centred and a right-hand pad would drag it off centre, so it is taken back out there. */ /* Arthur, 2026-10-15: "actually put the logo in the bottom right. and before it say Official Qualifying series for: (and then have the logo)". So the badge is no longer centred in its column - it sits at the BOTTOM of the hero and at the right-hand end, with its line above it. align-self rather than the grid's align-items, so the words keep their own centring. A small inset off the right edge, because flush against it was the first thing he asked me to change. */ /* Arthur, 2026-10-15: the flash "should be inline with these Join The Club See the schedule but still on the right side where it it." Bottom-aligned rather than centred against the badge, and the badge group sits flush with the bottom of the row - and the bottom of that row IS the bottom of the buttons, because the buttons are the last thing in the words column. So the flash lines up with them by construction, at any width, with no measured offset to go stale. */ .hero-badge{display:flex;flex-direction:row;align-items:center;justify-content:flex-end; align-self:end;gap:10px 16px;padding-block-end:0; /* NEVER WRAP while it is meant to be a row. At 1185px - menu showing, so side by side by Arthur's rule - the flash and the badge needed 401px of a 400px column and the flash dropped onto its own line, which is what he caught. Below the menu breakpoint this is a column anyway, so nowrap costs nothing there. */ flex-wrap:nowrap; /* Arthur, 2026-10-15: "move them more over to the right. so it has the same padding from the bottom as it does on the right. use the current bottom padding." The pair sat inside the hero's own side padding - about 85px off the right edge on a wide screen, against roughly 35px of clear space below it. It is pulled back out of that padding with a negative margin, leaving the same gap on the right as the one underneath it. One number, --badge-inset, sets that gap; change it and both the reasoning and the result move together. */ --badge-inset:clamp(16px,1.8vw,36px); padding-inline-end:0; margin-inline-end:calc(var(--badge-inset) - clamp(20px, 4.4%, 92px)); /* Arthur, 2026-10-15: "move both down so they are level with Join the Club / See the Schedule". The pair is centred on itself and the grid row ends where the buttons end, so dropping the group by half its own height less half a button height puts the PAIR's centre line on the buttons' centre line. Written as a percentage of its own height rather than a pixel figure, so it holds when the badge is resized. */ transform:translateY(calc(50% - 26px))} /* The line above it, in the site's label voice - the same mono gold as NEXT EVENT and the season sponsor slot - so it reads as part of the design rather than as a caption. */ /* THE GOLD FLASH (Arthur, 2026-10-15, with a crop of the one he wants: "i need the offical qualifiing part to look like this ... also it needs to be on the left side of the logo"). Measured off his picture rather than eyeballed: the left and right edges are parallel and run 8px across 19px of height, which is a 22-degree skew, and the gold is within a shade of the club's own. Two thin stripes run off the right-hand end. The box is skewed and the words are skewed back, so the banner leans and the type stays upright. The face is Archivo Condensed 900 - the hero title's own face, and the one thing that makes this read like his picture rather than like a yellow box, because the reference is set in a condensed bold. */ .hero-badge-lbl{display:inline-block;position:relative;background:var(--gold);color:var(--ink); transform:skewX(-22deg);padding:.42em .92em .4em;border-radius:2px; box-shadow:0 6px 16px rgba(0,0,0,.45); /* The stripes and the room kept for them are in em, so when the flash shrinks they shrink with it rather than eating the badge's width on a phone. */ margin-inline-end:2.3em} .hero-badge-lbl .t{display:block;transform:skewX(22deg);font-family:var(--poster);font-weight:900; font-size:clamp(11px,.95vw,17px);line-height:1.08;text-transform:uppercase;letter-spacing:.045em; white-space:nowrap} /* The two stripes. They are children of the skewed box, so they lean with it for free. */ .hero-badge-lbl::before,.hero-badge-lbl::after{content:"";position:absolute;top:0;bottom:0; width:.45em;background:var(--gold);box-shadow:inherit} .hero-badge-lbl::before{right:-.9em} .hero-badge-lbl::after{right:-1.8em} /* Sized from the viewport so it holds its place against the words at any width, and capped so it never outgrows them. The shadow is what keeps a silver badge off a sunlit photograph: the right-hand end of the hero gradient is nearly clear by design. */ /* Arthur, 2026-10-15: "make the logo about half the size". It was clamp(190px,24vw,400px) and drew at 400 on his 1920 screen; this draws at 200 there and holds the same proportion down the range. */ /* Arthur, 2026-10-15: "but not the logo needed to move down with it". Lining the flash up with the buttons dropped the whole group by the inset the group used to carry; this gives that inset back to the BADGE ONLY, so the badge sits exactly where it did and the flash stays down on the buttons' line beside it. */ .hero-badge img{display:block;width:clamp(120px,12vw,200px);max-width:100%;height:auto; filter:drop-shadow(0 8px 22px rgba(0,0,0,.45))} /* THE BADGE FOLLOWS THE TOP MENU, and that is Arthur's rule rather than a number I chose (2026-10-15): "if the top menu shows they should be side by side and inline with Join The Club See the schedule[;] if the top menu collapes then the need to be under Join The Club See the schedule and Official Qualifying series for: on top of the logo and alined like everything else at that view." The header has its own breakpoint - min-width:1180px, where .nav-toggle goes away and .site-nav appears - so this is its exact complement. One breakpoint, two layouts, and if the header's ever moves this has to move with it. */ @media (max-width:1179.98px){ /* Arthur, 2026-10-15: "they need to be further under the buttons, like close to that bottom line like they are on a big screen." Under the menu breakpoint the words and the badge are two rows of one column, and the whole block was centred in the hero - which left the pair floating in the middle with a screen of water under it. The block now STRETCHES to the hero's full height and the rows carry the difference: the words take the slack and stay centred inside it, the badge row is its own height and lands at the foot of the hero, just above the NEXT EVENT strip. Same shape as the wide layout, where the pair sits on the buttons' line at the bottom of the words. */ .hero-has-photo .hero-split{align-self:stretch;grid-template-rows:1fr auto;align-items:center} .hero-split{grid-template-columns:1fr;gap:4px} /* Arthur, 2026-10-15: "on smaller screens the Official Qualifying series for: and logo are fucked up ... Official Qualifying series for: on top of the logo. the log should also shirk in that case." Side by side under the words, the pair was as wide as the words themselves and read as two things that had fallen over rather than one mark. */ /* Arthur, 2026-10-15: "always be side by side but shrink them if needed once we get down to the view where it puts them under the Join The Club See the schedule buttons." So the pair stays a row here too and both halves scale with the viewport instead of stacking. Measured against the real glyph widths from 320px up: the narrowest case has the pair at 254px in 280px of room. The row is aligned the way the words are at this width - LEFT until the 760px block centres everything. */ .hero-badge{flex-direction:row;align-items:center;justify-content:flex-start;align-self:end; margin-top:20px;padding-inline-end:0;padding-block-end:0;transform:none;margin-inline-end:0; gap:clamp(8px,2vw,16px)} /* Arthur, 2026-10-15, at 936px: the pair should read "smaller like in the mobile view" here. Both caps come down, and the phone end is unchanged - 8px and 80px, which is what he likes at 400px. */ .hero-badge-lbl .t{font-size:clamp(8px,1.5vw,13px)} .hero-badge img{width:clamp(80px,14vw,130px)} } @media (max-width:760px){ .hero-has-photo .hero-words > *{margin-inline:auto} } /* The opening paragraph is capped at 48% of the frame when it has the hero to itself. In the two-column hero that 48% is 48% OF THE COLUMN, which breaks the lines far too early, so the measure goes back to being set by the text itself. */ .hero-split .hero-words .lede{max-width:min(46ch,100%)} /* THE NAME IS SIZED FOR THE FULL FRAME, and in the split hero it does not have the full frame. At 1185px - the narrow end of the side-by-side band - ARIZONA KAYAK needed 640px of a 640px column and broke onto three lines (Arthur, 2026-10-15). This line is the same size at 1920 as the rule it overrides, and tapers to about 66px at 1180 instead of 88, so there is no step at the breakpoint and no third line at the bottom of the band. SCOPED TO THE SPLIT BAND, and that was a real fault for an hour: .hero-split is on the element at EVERY width - it only means "a badge exists" - so this was shrinking the name below 1180 too, where the words have the whole frame and nothing was competing for the space. Arthur caught it at 936px: "in this size view all these need to be bigger". */ @media (min-width:1180px){ .hero-split .hero-title{font-size:clamp(44px, calc(6.8vw - 14.6px), 118px); /* AND THE CAP COMES OFF. The name carries max-width:min(1000px,84%) so that it folds into two lines in the full-width hero - but 84% OF A COLUMN is not 84% of the frame, and when the columns moved to 1.5fr/1fr the cap landed at 843px for a line that needs 847. The name broke into three lines and pushed the NEXT EVENT strip off the first screen (Arthur, 2026-10-15). The column is the constraint here; it does not need a second one inside it. The two-line shape is not at risk: the two halves of the name are separate blocks, so they fall on separate lines whatever this says. */ max-width:100%} } /* A WORD IS NEVER BROKEN IN THE NAME. The K-A kerning spacer is an inline-block, and an inline-block is a legal place to break a line, so ARIZONA KAYAK could come out as ARIZONA K / AYAK - which it did, on Arthur's 1010px window. hero_name_html() wraps each word in one of these; the breaks are the spaces and nothing else. */ .hero-title .w{white-space:nowrap} /* The wrapper hero_name_html() puts around a line's words - see the note there. It exists so the spaces between words are ordinary inline content; it must stay inline and inherit everything, or it would start shaping the line itself. */ .hero-title .nm{display:inline;font:inherit;letter-spacing:inherit;word-spacing:inherit} /* At 760px the hero itself centres - see the block above that sets .hero-has-photo to text-align:center - so the badge centres with everything else, which is what "aligned like everything else at that view" means here. Narrower still, the flash is nearly as wide as the phone, so the badge comes down again to stay in proportion with it. */ @media (max-width:760px){ /* The hero centres at this width, so the pair centres with it - justify-content now, because the pair is a row here rather than a column. */ .hero-badge{justify-content:center} }