/* * FameFitness LadiesOnly - DNN theme overrides * --------------------------------------------------------------------------- * css/ladies.css is GENERATED from scss/ in this project - never edit it by hand. * Run `npm run build` (or the Web Compiler extension via compilerconfig.json). * * This file only bridges the gap between that design and the markup DNN actually * renders: the
wrapper, the panes, the module containers and the DNN admin * controls. Design changes belong in scss/, not here. * * DNN loads skin.css at priority 15, after grid.css (11) and ladies.css (12), * so everything here wins without !important unless DNN itself is louder. */ /* * The palette, the type scale, the radii and the shadows are all published as * --ladies-* custom properties by scss/abstracts/_tokens.scss, which compiles * into css/ladies.css. They are NOT redeclared here: a second copy would win * (this file loads later) and silently ignore any change made in the Sass. * * Use them: --ladies-pink / --ladies-pink-hover are the ACCESSIBLE pink * (4.52:1 on white and under white text); --ladies-pink-brand is the brand pink * and is decoration only. * * The one value declared here is a fallback: js/ladies.js measures the rendered * navbar and overwrites --ladies-navbar-height on :root, so changing the logo * does not mean touching a number. ladies.css declares the same fallback; this * repeat only covers a page that somehow loads skin.css without it. */ :root { --ladies-navbar-height: 88px; } /* ---------------------------------------------------------------- page frame */ /* * ladies.css makes a flex column so the footer is pushed down on short * pages. DNN puts everything inside , which breaks that chain, * so the form has to become the flex column instead. */ html body { display: block; /* * The original site never painted a background and relied on the browser * default. DNN portals ship their own portal.css, so state it explicitly. */ background-color: #fff; } body > form, body > form#Form { display: flex; flex-direction: column; min-height: 100vh; } body > form > .content, main.content { flex: 1 0 auto; } /* * The navbar is fixed, so content needs to clear it. A hero is the exception: * it is designed to sit behind the transparent navbar, so a hero pane that has * content pulls itself back up by the same amount. */ main.content { padding-top: var(--ladies-navbar-height); } /* * A page that opens with a hero drops the clearance entirely: the hero is designed * to sit behind the transparent navbar, which is what the live site does * (main has padding-top: 0 and the hero starts at y=0). * * Two rules, because the hero can arrive two ways and both must work: * - as its own module in HeroPane, matched by CSS below; * - as the first section of a larger block of page HTML in ContentPane, which is * how fameladies.nl is authored. Then an empty HeroPane precedes it and no * :first-child selector can see it, so js/ladies.js adds .has-leading-hero. * Both only zero the same padding, so applying both is harmless. Both also * require a real .hero-image: the marker class alone would pull the page up * under the navbar on a page that has no hero to hide behind it. */ main.content:has(> .skin-pane-full:first-child .hero-image), main.content.has-leading-hero:has(.hero-image) { padding-top: 0; } /* Full-bleed panes must not inherit any gutter. */ .skin-pane-full { width: 100%; } /* Grid rows collapse to nothing when their panes are empty. */ .skin-row > .row > [class^="col-"]:empty { display: none; } /* ------------------------------------------------------------- accessibility */ /* * Skip link: the first focusable element on the page, off-screen until focused. * The design had none, so keyboard users had to tab through the whole navbar on * every page. */ .skip-link { position: absolute; top: 0; left: 0; z-index: 2000; padding: .7rem 1.2rem; background: var(--ladies-pink); color: #fff; font-family: var(--ladies-font-ui, 'paralucent medium', Arial, sans-serif); border-bottom-right-radius: var(--ladies-radius, .875rem); text-decoration: none; transform: translateY(-120%); transition: transform .15s ease-out; } .skip-link:focus { transform: translateY(0); color: #fff; outline: 3px solid #1a1418; outline-offset: -3px; } @media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } } /* main gets tabindex="-1" so the skip link can focus it; never show that outline. */ main.content:focus { outline: none; } /* * A visible keyboard focus state. ladies.css sets `outline: 0` in several places * (form controls, buttons), which leaves keyboard users with no indication at all. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 3px solid var(--ladies-pink); outline-offset: 2px; } /* * On the saturated bands the pink outline would disappear; use white there. * #intro is no longer one of them - the redesign puts it on the blush tint with * ink text, so the pink ring is the readable one now. */ #subscribe a:focus-visible, #subscribe button:focus-visible, #subscribe input:focus-visible, #reference a:focus-visible, #notice a:focus-visible, #cover a:focus-visible, .section--pink a:focus-visible, .section--pink button:focus-visible, .section--dark a:focus-visible, :is(body, form) > footer a:focus-visible { outline-color: #fff; } /* --------------------------------------------------------------- navigation */ /* * DDRMenu renders the main menu inside its own wrapper div. The original markup * had