/*-- ABT Design System -- locked 2026-06-12 (project DESIGN.md is the contract). Source: references/design-package/assets/abt.css ("Heritage Amber" defaults, dark navmain header, Home.html anatomy). Three layers in this file: 1. Design core -- tokens, base, buttons, components (ported from the package) 2. WebItems adapter -- Page Manager panels/cells, site_navigation markup, module form/card/pagination systems 3. Accessibility + responsive Rules: tokens only (no invented hex/radius/size); hover only on clickables; module CSS = overrides + accent only; bump ?v= in template.master per edit. */ /*-- ===================================================================== 1. TOKENS ===================================================================== */ :root { --ink: #211b14; --ink-soft: #4a4034; --ink-mute: #7a6f60; --ink-deep: #0c0a06; /* footer "solid black" -- darker than --ink so the sticky ink nav never blends into the footer */ --paper: #faf6ee; --surface: #ffffff; --surface-2: #f3ece0; --line: #e3d9c8; --line-strong: #cdbfa6; --brand: #b4781b; --brand-deep: #8a5a12; --brand-soft: #e9c878; --brand-tint: #f6ead0; --accent: #167c74; --accent-soft: #2a9d93; --accent-deep: #0f5d57; --accent-tint: #dcedea; /* DELIVERY MODE COLOURS ARE LITERAL, NOT DECORATIVE (owner 2026-07-18). They were violet for in-person and the site's teal accent for livestream, which were arbitrary: nothing about violet says "address" and nothing about teal says "Zoom", so staff had to learn the key. Both now borrow the colour the thing itself already uses in the world, so the pill can be read without the legend: in person = the Google Maps pin red, because the fact that matters is that there is a street address to drive to livestream = the Zoom brand blue, because the class IS a Zoom call Each mode owns a DEEP value for text and a TINT for the pill fill. The deep values are darkened well past the brand hues (Maps #EA4335 and Zoom #0B5CFF are both far too light to carry 11px uppercase text) so the fill can be brighter and more saturated while the label still clears AA: #a32116 on #fbd9d5 is 6.4:1, #0b3fa8 on #d8e6ff is 7.1:1. The brand hues themselves are kept as -mark for glyphs and dots, which only need 3:1. THESE ARE MODE-ONLY TOKENS. Do NOT point .fmt-stream back at --accent-deep / --accent-tint: those are the site's general accent and paint every body link, .textlink, .btn-accent and .credential, so editing them to change "online" would repaint the whole site. */ --fmt-person: #a32116; --fmt-person-tint: #fbd9d5; --fmt-person-mark: #ea4335; --fmt-stream: #0b3fa8; --fmt-stream-tint: #d8e6ff; --fmt-stream-mark: #0b5cff; /* hybrid = in person AND online, so it takes the colour red and blue actually mix into (owner 2026-07-19). It is a real third class type now: it used to be marketed as plain "In Person" and wore the in-person chip, which hid the Zoom half from anyone scanning the schedule. */ --fmt-hybrid: #5b21a8; --fmt-hybrid-tint: #e9dcfb; --fmt-hybrid-mark: #7c3aed; --on-brand: #ffffff; --seal: #8a5a12; /* functional states (warm-shifted to sit in the palette) */ --error: #b3402e; --error-tint: #f7e4df; --success: #0f5d57; --success-tint: #dcedea; --maxw: 1320px; --navtop-h: 42px; /* thin utility bar height; the sticky header pins with top:-var(--navtop-h) so this bar scrolls off and the main bar stays */ --foot-mtn-h: 220px; /* footer mountain-band height; also drives the footer pull-up and the last panel's bottom padding so the ridge sits on the page's last section color, not the body */ --radius: 4px; --radius-lg: 10px; --shadow-sm: 0 1px 2px rgba(33,27,20,.06), 0 2px 6px rgba(33,27,20,.05); --shadow-md: 0 4px 14px rgba(33,27,20,.08), 0 12px 34px rgba(33,27,20,.08); --shadow-lg: 0 10px 30px rgba(33,27,20,.10), 0 30px 70px rgba(33,27,20,.12); --serif: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --brand-serif: 'Spectral', Georgia, 'Times New Roman', serif; --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --ease: cubic-bezier(.2,.7,.2,1); --touch-min: 44px; } /*-- ===================================================================== 1a. RESET + BASE ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } /* The parked off-canvas mobile drawer (#abt-mobile-drawer, translateX(102%)) lays out at x=397..732, inflating the document to ~682px and horizontally scrolling every page on a phone. html{overflow-x:hidden} only masks the scrollbar (scrollWidth still 682, and some mobile browsers still rubber-band). overflow-x:clip on the non-fixed layout wrapper is what actually clips it to the viewport (measured 682 -> 390); clip (not hidden) keeps the vertical axis visible, so it adds no scroll container and cannot break a sticky header. */ #wrapper { overflow-x: clip; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); } h5, h6 { margin: 0; font-family: var(--sans); font-weight: 700; color: var(--ink); } p { margin: 0 0 1em; } ::selection { background: var(--brand-soft); color: var(--ink); } /*-- ===================================================================== 1b. LAYOUT + TYPE ROLES ===================================================================== */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } .wrap-narrow { max-width: 880px; } section { position: relative; } .section-pad { padding: 96px 0; } .section-pad-sm { padding: 64px 0; } .eyebrow { font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-deep); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--brand); display: inline-block; } .eyebrow.center::before { display: none; } /* named display scale (DESIGN.md): display-1 hero only, display-2 section, display-3 compact */ .display { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -.02em; } .display-2 { font-size: clamp(2rem, 3.6vw, 2.9rem); } .display-3 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); } .lead { font-size: 1.22rem; line-height: 1.55; color: var(--ink-soft); font-weight: 400; } .muted { color: var(--ink-mute); } .micro { font-size: 13px; color: var(--ink-mute); margin: 0; } .tag { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .sec-head { max-width: 56ch; display: flex; flex-direction: column; gap: 14px; } /* the flex gap alone owns the eyebrow->title spacing: zero the children's margins so nothing stacks with it. The rich-text h2 carries a 36px TOP margin (the .cell-content .content-data h2 rule, meant for mid-body subheadings) that opened a ~56px chasm here, so the 2nd selector out-specifies it while leaving the h2's bottom margin intact for the title->body spacing. 14px matches the presentation bands. */ .sec-head > * { margin: 0; } .cell-content .content-data .sec-head > * { margin-top: 0; } .sec-head.center { max-width: 60ch; margin: 0 auto; align-items: center; text-align: center; } .grid { display: grid; gap: 28px; } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } .bg-surface { background: var(--surface); } .bg-tint { background: var(--brand-tint); } .divider-rule { height: 1px; background: var(--line); border: 0; margin: 0; } /*-- ===================================================================== 1c. BUTTONS -- one canonical system. Bare .btn/.button (module-emitted) defaults to the primary gold fill; variants restate their own colors. ===================================================================== */ .btn, .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 16px; padding: 12px 24px; border-radius: var(--radius); border: 1px solid var(--brand); background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-sm); line-height: 1.3; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .15s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s; } .btn:hover, .button:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-brand); box-shadow: var(--shadow-md); } .btn:active, .button:active { transform: translateY(1px); } .btn:disabled, .btn.is-busy, .button:disabled, .button.is-busy, .btn.disabled, .button.disabled { opacity: .6; cursor: progress; pointer-events: none; transform: none; } .btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); } .btn-dark { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: none; } .btn-dark:hover { background: #000; border-color: #000; } .btn-ghost, .btn-secondary { background: transparent; border-color: var(--line-strong); color: var(--ink); box-shadow: none; } .btn-ghost:hover, .btn-secondary:hover { border-color: var(--ink); background: var(--surface); color: var(--ink); box-shadow: none; } .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .btn-accent-out { background: transparent; color: var(--accent-deep); border-color: color-mix(in oklab, var(--accent) 42%, transparent); box-shadow: none; } .btn-accent-out:hover { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: none; } .btn-danger { background: var(--error); border-color: var(--error); color: #fff; } .btn-danger:hover { background: #8f3325; border-color: #8f3325; } /* Gold OUTLINE secondary (owner 2026-07-16): for an action sitting near a solid gold primary that must read as clearly secondary (e.g. Leave Organization vs Save Changes). Transparent body, 2px brand outline drawn with an inset ring so the button's box matches its solid siblings, brand-deep text; hover fills gold. */ .btn-brand-out { background: transparent; border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand-deep); } .btn-brand-out:hover { background: var(--brand); border-color: var(--brand); box-shadow: none; color: var(--on-brand); } .ghost-light { color: var(--paper); border-color: rgba(250,246,238,.3); background: transparent; box-shadow: none; } .ghost-light:hover { border-color: var(--paper); background: rgba(250,246,238,.08); color: var(--paper); box-shadow: none; } .btn-lg { padding: 17px 32px; font-size: 17px; } .btn-small { padding: 7px 14px; font-size: 13.5px; } .btn-full { display: flex; width: 100%; } .btn .arr, .button .arr { transition: transform .2s var(--ease); } .btn:hover .arr, .button:hover .arr { transform: translateX(3px); } /* THE CONFIRMATION MODAL -- the site's ONLY way to ask a question or state one fact. confirm(), alert() and prompt() are all suppressible: every browser offers to block them after the second one on a page, and an in-app webview blocks them outright. A suppressed confirm() returns false silently, leaving the control dead with nothing on screen -- which is how the exam Submit button stranded ten sittings in August. The back office has had MessageBox_Confirm for years; this is its front-end counterpart. Driven by abtConfirm / abtAlert / abtPrompt / abtConfirmGate in abt.js. */ .abt-modal-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(23, 20, 16, .55); animation: abt-modal-in .12s ease-out; } .abt-modal { width: 100%; max-width: 460px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 26px 26px 22px; } .abt-modal-title { font-family: var(--serif); font-size: 21px; line-height: 1.25; font-weight: 700; color: var(--ink-deep); } .abt-modal-msg { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); } .abt-modal-input { width: 100%; margin-top: 14px; } .abt-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .abt-modal-actions .btn { flex: 1 1 auto; justify-content: center; } .abt-modal.is-danger .abt-modal-title { color: var(--error); } body.abt-modal-open { overflow: hidden; } @keyframes abt-modal-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .abt-modal-overlay { animation: none; } } .textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--accent-deep); } .textlink .arr { transition: transform .2s var(--ease); } .textlink:hover .arr { transform: translateX(3px); } /*-- ===================================================================== 1d. CORE COMPONENTS (design package vocabulary) ===================================================================== */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .25s, border-color .2s; } /* hover-lift ONLY on cards that are links / contain a single CTA (DESIGN.md hover rule) */ .card.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 100px; background: var(--brand-tint); color: var(--brand-deep); border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent); } .pill svg { width: 14px; height: 14px; } .credential { display: inline-flex; align-items: center; gap: 14px; } .credential .cr-seal { width: 40px; height: 40px; flex: none; color: var(--accent-deep); } .credential .cr-txt { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.5; } .credential .cr-txt b { display: block; color: var(--accent-deep); font-weight: 800; } .seal { display: inline-grid; place-items: center; position: relative; color: var(--seal); } .ph { background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 12%, var(--surface-2)), var(--surface-2)); position: relative; overflow: hidden; display: grid; place-items: center; color: var(--ink-mute); } .ph::after { content: attr(data-label); font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in oklab, var(--ink-mute) 80%, transparent); padding: 6px 12px; border: 1px dashed var(--line-strong); border-radius: 100px; background: color-mix(in oklab, var(--surface) 60%, transparent); z-index: 2; } .ph svg { position: absolute; width: 48px; height: 48px; opacity: .18; } .stat-num { font-family: var(--serif); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.1rem); line-height: 1; letter-spacing: -.02em; color: var(--brand-deep); } .stat-lbl { font-size: 14px; color: var(--ink-mute); margin-top: 8px; font-weight: 500; } .ribbon { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-deep); } .ribbon svg { width: 18px; height: 18px; } .ticks { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .ticks li { position: relative; padding-left: 30px; font-size: 15px; color: var(--ink-soft); } .ticks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--brand-tint); } .ticks li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 7px; height: 4px; border-left: 2px solid var(--brand-deep); border-bottom: 2px solid var(--brand-deep); transform: rotate(-45deg); } .callout { background: var(--brand-tint); border: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); border-radius: var(--radius-lg); padding: 28px 32px; display: flex; gap: 20px; align-items: center; } .callout svg { width: 34px; height: 34px; color: var(--brand-deep); flex: none; } .callout p { margin: 0; color: var(--ink-soft); } .callout strong { color: var(--ink); } /* accordion (FAQ) */ .acc-item { border-bottom: 1px solid var(--line); } .acc-q { width: 100%; text-align: left; background: none; border: 0; padding: 24px 8px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--serif); font-weight: 600; font-size: 1.22rem; color: var(--ink); } .acc-q:hover { color: var(--brand-deep); } .acc-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: transform .3s var(--ease), background .2s, color .2s, border-color .2s; } .acc-ic svg { width: 16px; height: 16px; } .acc-item.open .acc-ic { transform: rotate(45deg); background: var(--brand); color: var(--on-brand); border-color: var(--brand); } .acc-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); } .acc-a-inner { padding: 0 8px 26px; color: var(--ink-soft); max-width: 70ch; } /* tabs (segmented filter) */ .tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--surface-2); border-radius: 100px; border: 1px solid var(--line); } .tab { border: 0; background: none; padding: 11px 22px; border-radius: 100px; font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink-soft); transition: all .2s; } .tab:hover { color: var(--ink); } .tab.on { background: var(--surface); color: var(--brand-deep); box-shadow: var(--shadow-sm); } /* reveal on scroll (abt.js IntersectionObserver) */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } /*-- ===================================================================== 1e. HEADER (dark navmain) -- markup lives in template.master; the link row itself is site_navigation output (see adapter, section 2b) ===================================================================== */ /* smart sticky header (abt.js abtWireStickyHeader): the whole header sticks pinned UP by the thin bar's height, so scrolling DOWN tucks the first (black) bar above the viewport and the second (brown) bar holds at top:0. Scrolling UP adds body.nav-reveal -> top:0 -> the first bar slides back in, both bars pinned. */ .site-header { position: sticky; top: calc(-1 * var(--navtop-h)); z-index: 100; transition: top .28s var(--ease); } body.nav-reveal .site-header { top: 0; } /* top utility bar -- in-flow above the sticky main bar; flat links from the site_navigation TopBar category. Fixed height MUST equal --navtop-h so the negative sticky offset hides it exactly. */ /* the thin bar (ink-deep/black) and the main bar (ink/brown) sit too close in tone to read as separate lanes, so a bright paper hairline divides them */ .navtop { height: var(--navtop-h); background: var(--ink-deep); border-bottom: 1px solid rgba(250,246,238,.22); } .navtop-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .navtop-phone { display: inline-flex; align-items: center; gap: 7px; color: rgba(250,246,238,.7); font-family: var(--sans); font-size: 13px; font-weight: 500; transition: color .18s; } .navtop-phone svg { width: 15px; height: 15px; } .navtop-phone:hover { color: var(--brand-soft); } /* links separated by spacing only -- no vertical dividers */ #abt-nav-top .nav-ul.t0 { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; } #abt-nav-top .nav-ul.t0::after { content: none !important; display: none !important; } #abt-nav-top .nav-li.t0 { display: inline-block; } #abt-nav-top .nav-item.t0 { display: inline-flex; align-items: center; height: var(--navtop-h); padding: 0 12px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: rgba(250,246,238,.82); transition: color .18s; } #abt-nav-top .nav-li.t0:last-child .nav-item.t0 { padding-right: 0; } #abt-nav-top .nav-item.t0:hover, #abt-nav-top .nav-item.t0.selected { color: var(--brand-soft); } #abt-nav-top .open-icon { display: none; } /* Secondary-bar dropdown (tier-1). The module already emits the nested markup (li.nav-li.t0.wc > a.nav-item.t0 + span.open-icon + ul.nav-ul.t1) -- these rules are the template-owned presentation for it: a dark panel matching the bar, revealed on hover AND :focus-within (every child is a real , so Tab reaches them). The close transition carries a short delay for hover-intent forgiveness; opening is instant. One dropdown tier only on the thin bar -- t2 is hard-capped. */ #abt-nav-top .nav-li.t0 { position: relative; } #abt-nav-top .nav-ul.t1 { list-style: none; margin: 0; padding: 6px 0; position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--ink-deep); border: 1px solid rgba(250,246,238,.16); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 120; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s var(--ease) .12s, transform .18s var(--ease) .12s, visibility .18s .12s; } #abt-nav-top .nav-li.t0:hover > .nav-ul.t1, #abt-nav-top .nav-li.t0:focus-within > .nav-ul.t1 { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } #abt-nav-top .nav-li.t1 { display: block; } #abt-nav-top .nav-item.t1 { display: block; padding: 9px 16px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: rgba(250,246,238,.82); white-space: nowrap; transition: color .18s; } #abt-nav-top a.nav-item.t1:hover, #abt-nav-top .nav-item.t1.selected { color: var(--brand-soft); } /* chevron: the emitted .open-icon span stays hidden except on parents-with-children (.wc); a border chevron (no glyph) that flips while the panel is open */ #abt-nav-top .nav-li.t0.wc .open-icon { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .18s var(--ease); } #abt-nav-top .nav-li.t0.wc:hover .open-icon, #abt-nav-top .nav-li.t0.wc:focus-within .open-icon { transform: rotate(225deg); } /* html overflow-x:hidden + #wrapper overflow-x:clip would crop a panel overhanging the right viewport edge -- the last item's panel right-aligns instead */ #abt-nav-top .nav-li.t0:last-child .nav-ul.t1 { left: auto; right: 0; } /* the thin bar hosts ONE dropdown tier; deeper authored tiers do not render here */ #abt-nav-top .nav-ul.t2 { display: none; } /* the nav carries a soft drop shadow (reads over light sections) AND a brighter bottom hairline (reads over the dark home bands) so the fixed header is always delineated from whatever scrolls beneath it -- never blends ink-on-ink */ .navmain { background: var(--ink); border-bottom: 1px solid rgba(250,246,238,.16); box-shadow: 0 6px 22px rgba(12,10,6,.26); } .navbar { display: flex; align-items: center; justify-content: space-between; height: 110px; gap: 24px; position: relative; transition: height .5s var(--ease); } /* once scrolled off the very top (body.nav-scrolled, set in abt.js) the brown bar shrinks back to its compact height while the black utility bar has already tucked away */ body.nav-scrolled .navmain .navbar { height: 76px; } /* vertical stacked logo -- the client's original alcoholbeveragetraining.com mark: the 'abt' wordmark over a short rule over the two-line name (ALCOHOL BEVERAGE / TRAINING). This IS the footer logo (used as-is), and the base the header's expanded state builds on. */ .brand { display: inline-flex; flex-direction: column; align-items: center; text-align: center; line-height: 1; } .brand-logo { display: flex; align-items: center; } .brand-logo img { height: 44px; width: auto; display: block; } .brand-rule { width: 58px; height: 2px; background: var(--paper); opacity: .8; margin-top: 9px; } .brand-name { font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .17em; line-height: 1.5; text-transform: uppercase; color: var(--paper); white-space: nowrap; margin-top: 7px; } /* HEADER ONLY -- the logo MORPHS between the vertical lockup (top of page) and a horizontal lockup (scrolled) instead of snapping. Every piece is the SAME element, re-placed: with absolute positioning + transitioned transforms, 'abt' glides toward the left and shrinks, the rule rotates 90deg and shortens into a vertical divider, and the two-line name slides up and over to sit just right of that divider. Footer is untouched (it uses the base above). Positions are px from the brand's left edge; every piece is vertically centered on the bar (top:50%) so nothing jumps as the bar height changes. brand-name width (128) must clear the widest line (ALCOHOL BEVERAGE) -- keep them in sync if the type changes. */ .navmain .brand { position: relative; display: block; width: 210px; height: 92px; transition: height .5s var(--ease); } .navmain .brand > span { position: absolute; top: 50%; margin: 0; will-change: transform; transition: left .5s var(--ease), width .5s var(--ease), transform .5s var(--ease); } .navmain .brand-logo img { transition: height .5s var(--ease); } /* expanded (top of page): centered vertical stack (matches the footer / his original) */ .navmain .brand-logo { left: 27px; transform: translateY(calc(-50% - 24px)); } .navmain .brand-rule { left: 35px; width: 58px; transform: translateY(calc(-50% + 8px)) rotate(0deg); } .navmain .brand-name { left: 0; width: 128px; transform: translateY(calc(-50% + 31px)); } /* scrolled: horizontal row -- abt | vertical divider | two-line name (the session's original). rotate(-90deg) sweeps the rule AROUND 'abt' (mark slides left as the rule turns), so it cuts through the letters far less than +90 did. The name goes LEFT-aligned here so TRAINING tucks under the start of ALCOHOL BEVERAGE instead of staying centered as it is in the vertical stack. */ body.nav-scrolled .navmain .brand { height: 44px; } body.nav-scrolled .navmain .brand-logo img { height: 34px; } body.nav-scrolled .navmain .brand-logo { left: 0; transform: translateY(-50%); } body.nav-scrolled .navmain .brand-rule { left: 48px; width: 32px; transform: translateY(-50%) rotate(-90deg); } body.nav-scrolled .navmain .brand-name { left: 74px; text-align: left; transform: translateY(-50%); } .nav-cta { display: flex; align-items: center; gap: 18px; } .nav-toggle { display: none; background: none; border: 1px solid rgba(250,246,238,.3); color: var(--paper); border-radius: var(--radius); width: 44px; height: 44px; place-items: center; } .nav-toggle svg { width: 22px; height: 22px; } /*-- ===================================================================== 1f. FOOTER + mountain ridgeline. Adapted from the package: the mountain SVG renders IN FLOW above the footer (cream sky behind it) instead of overlaying the previous section -- same look, no per-page .pre-footer padding contract needed on CMS-composed pages. ===================================================================== */ /* the dark fill belongs to the CONTENT half only -- the mountain band (top --foot-mtn-h) stays transparent so the ridgeline reads as a silhouette against the page, instead of an ink shape hidden inside an ink footer. The footer is pulled up by the band height (margin-top) and sits above the last panel (z-index:2 over the panels' z-index:1), so the transparent sky behind the ridge shows the LAST panel's color -- brown on the home CTA, cream on a policy page -- instead of the body. The last panel reserves matching bottom padding for it. */ /* the dark fill starts 1px ABOVE the band bottom (--foot-mtn-h - 1px) so it underlaps the mountain silhouette's ink base by 1px. The silhouette is full-width --ink-deep across the whole bottom of the band, so this 1px overlap is invisible -- but it closes the sub-pixel seam where SVG-band-bottom and gradient-ink-top can round apart and let the cream last panel behind the transparent sky show as a hairline. Same-color overlap, no visible line. */ .site-footer { background: linear-gradient(to bottom, transparent calc(var(--foot-mtn-h) - 1px), var(--ink-deep) calc(var(--foot-mtn-h) - 1px)); color: var(--paper); padding: 0 0 32px; position: relative; z-index: 2; margin-top: calc(-1 * var(--foot-mtn-h)); } .site-footer a { color: var(--paper); opacity: .78; transition: opacity .2s; } .site-footer a:hover { opacity: 1; } /* the page's last panel grows its bottom padding so the pulled-up band overlaps that section's own background, never the body and never the panel's content */ .PageManagerContent > .panel:last-of-type { padding-bottom: var(--foot-mtn-h); } .foot-mtns { height: var(--foot-mtn-h); line-height: 0; pointer-events: none; background: transparent; } .foot-mtns svg { display: block; width: 100%; height: 100%; } .foot-inner { padding-top: 20px; } /* centered brand band (logo + COLORADO sub + social) sits above four equal nav columns (Services, Account, Support, Legal). Account and Legal headers link to their hub pages. The mailing address and the long blurb were dropped so the four columns can breathe. */ .foot-top { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding-bottom: 44px; margin-bottom: 48px; border-bottom: 1px solid rgba(250,246,238,.12); } .foot-brand-link { text-decoration: none; opacity: 1; } .foot-brand-link:hover { opacity: 1; } .foot-top .brand-name { color: var(--paper); } /* the four footer columns are now ONE site_navigation "Footer" menu (styled in the adapter, section 2b -> .abt-footer-nav); .foot-grid is just its block wrapper and the column grid lives on .abt-footer-nav .nav-ul.t0. */ .foot-grid { display: block; } .foot-social { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .foot-social:empty { display: none; } .abt-social-link { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(250,246,238,.22); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background .2s, border-color .2s; } .abt-social-link:hover { background: var(--brand); border-color: var(--brand); opacity: 1; } /* secondary info: half-opacity content, but the divider's alpha is doubled (.14 -> .28) so that after the .5 element opacity it still renders at its original .14 brightness. More margin above it too, so the footer stays as spacious near the bottom as it is up top. */ .foot-bottom { border-top: 1px solid rgba(250,246,238,.28); opacity: .5; margin-top: 112px; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13.5px; color: rgba(250,246,238,.55); flex-wrap: wrap; } .foot-bottom a { opacity: .78; } .foot-bottom a:hover { opacity: 1; } /*-- ===================================================================== 1g. MOBILE DRAWER -- design .mn-panel look on the template's #abt-mobile-nav structure; .abt-mobile-toggle is the abt.js hook, body.abt-nav-open is the open state. ===================================================================== */ body.abt-nav-open { overflow: hidden; } #abt-mobile-nav { position: fixed; inset: 0; z-index: 200; pointer-events: none; } /* darker scrim than before (was .5) so the page reads as fully backgrounded; keep the blur */ #abt-mobile-mask { position: absolute; inset: 0; background: rgba(12,10,6,.72); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } /* the fly-out is the same near-black as the desktop's top utility bar (ink-deep), light text on it */ #abt-mobile-drawer { position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 360px); background: var(--ink-deep); color: var(--paper); box-shadow: var(--shadow-lg); border-left: 1px solid rgba(250,246,238,.1); display: flex; flex-direction: column; padding: 22px; overflow-y: auto; transform: translateX(102%); transition: transform .3s var(--ease); } body.abt-nav-open #abt-mobile-nav { pointer-events: auto; } body.abt-nav-open #abt-mobile-mask { opacity: 1; visibility: visible; } body.abt-nav-open #abt-mobile-drawer { transform: none; } /* header: the FULL vertical logo lockup (white mark) left, close button right -- same logo as the desktop/footer, not a bare "abt". */ #abt-mobile-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; padding-bottom: 18px; border-bottom: 1px solid rgba(250,246,238,.12); } #abt-mobile-header .brand { align-items: flex-start; text-align: left; } #abt-mobile-header .brand-logo img { height: 30px; } #abt-mobile-header .brand-rule { background: var(--paper); } #abt-mobile-header .brand-name { color: var(--paper); } .abt-mobile-close { flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--radius); border: 1px solid rgba(250,246,238,.24); background: rgba(250,246,238,.06); display: grid; place-items: center; color: var(--paper); font-size: 22px; line-height: 1; text-decoration: none; } .abt-mobile-close:hover { border-color: rgba(250,246,238,.5); background: rgba(250,246,238,.12); } .mn-foot { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 12px; } .mn-foot .btn { justify-content: center; } /*-- ===================================================================== 1h. PAGE-LEVEL COMPONENTS (heroes, bands, cards) -- shared vocabulary used by the home composition and module surfaces. ===================================================================== */ /* inner page hero (dark band) */ .page-hero { background: var(--ink); color: var(--paper); padding: 72px 0 80px; position: relative; overflow: hidden; } .page-hero .eyebrow { color: var(--brand-soft); } .page-hero .eyebrow::before { background: var(--brand-soft); } .page-hero h1 { color: var(--paper); } .page-hero p { color: rgba(250,246,238,.72); } .page-hero .seal-bg { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 360px; height: 360px; opacity: .07; color: var(--brand-soft); pointer-events: none; } .breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: rgba(250,246,238,.55); font-weight: 500; margin-bottom: 22px; } .breadcrumb a { color: rgba(250,246,238,.7); } .breadcrumb a:hover { color: var(--paper); } .breadcrumb svg { width: 14px; height: 14px; opacity: .5; } /* home hero */ .hero { padding: 64px 0 0; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; } .hero-copy .pill { margin-bottom: 22px; } .hero-copy h1 { margin-bottom: 22px; max-width: 16ch; } .hero-copy .lead { max-width: 52ch; margin-bottom: 32px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; } .hero-trust { display: flex; align-items: center; gap: 26px; padding-top: 28px; border-top: 1px solid var(--line); } .ht-item { display: flex; flex-direction: column; gap: 4px; } .ht-num { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; line-height: 1.05; color: var(--ink); letter-spacing: -.01em; } .ht-lbl { font-size: 12.5px; color: var(--ink-mute); max-width: 16ch; line-height: 1.35; } .ht-sep { width: 1px; align-self: stretch; background: var(--line); } .hero-media { position: relative; } .hero-photo { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .hero-seal { position: absolute; left: -42px; bottom: 84px; width: 132px; height: 132px; filter: drop-shadow(0 10px 24px rgba(33,27,20,.18)); animation: floaty 6s ease-in-out infinite; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .hero-next { position: absolute; right: -26px; bottom: -26px; width: 248px; padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-lg); } .hn-tag { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-deep); display: inline-flex; align-items: center; gap: 7px; } .hn-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .hn-date { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; color: var(--ink); margin-top: 6px; } .hn-meta { font-size: 13px; color: var(--ink-mute); } .hn-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; color: var(--accent-deep); margin-top: 8px; } .hn-link .arr { transition: transform .2s var(--ease); } .hn-link:hover .arr { transform: translateX(3px); } /* format card (the two big home cards; clickable via inner textlink) */ .format-card { overflow: hidden; display: flex; flex-direction: column; } .fc-ph { width: 100%; } .fc-body { padding: 30px 30px 32px; } .fc-body .tag { display: block; margin-bottom: 10px; } .fc-body h3 { font-size: 1.55rem; margin-bottom: 12px; } .fc-body p { color: var(--ink-soft); margin-bottom: 18px; } /* founder (dark authority band) */ .founder { background: var(--ink); color: var(--paper); } .founder .eyebrow { color: var(--brand-soft); } .founder .eyebrow::before { background: var(--brand-soft); } .founder h2 { color: var(--paper); } .founder-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; } .founder-media { position: relative; } .founder-quote { position: absolute; right: -28px; bottom: 28px; width: 270px; padding: 24px; box-shadow: var(--shadow-lg); background: rgba(255,255,255,.05); border-color: rgba(250,246,238,.14); } .fq-mark { width: 30px; height: 30px; color: var(--brand-soft); opacity: .85; margin-bottom: 6px; } .founder-quote p { font-family: var(--serif); font-size: 1.05rem; line-height: 1.45; color: #fff; margin-bottom: 10px; } .fq-by { font-weight: 600; font-size: 13px; color: rgba(250,246,238,.6); } .founder-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } .founder-copy p { color: rgba(250,246,238,.74); max-width: 56ch; margin: 0; } .founder-copy strong { color: #fff; } .founder-stats { display: flex; gap: 36px; padding: 24px 0; margin: 6px 0; border-top: 1px solid rgba(250,246,238,.16); border-bottom: 1px solid rgba(250,246,238,.16); flex-wrap: wrap; } .founder-stats > div { display: flex; flex-direction: column; } .founder .stat-num { color: var(--brand-soft); } .founder .stat-lbl { color: rgba(250,246,238,.6); } /* audience card (static info card -- NO hover-lift, per hover discipline) */ .audiences { background: var(--surface-2); } .aud-card { padding: 30px 26px 32px; display: flex; flex-direction: column; gap: 12px; } .aud-ic { width: 52px; height: 52px; border-radius: 12px; background: var(--accent-tint); color: var(--accent-deep); display: grid; place-items: center; } .aud-ic svg { width: 26px; height: 26px; } .aud-card h4 { font-size: 1.3rem; } .aud-card p { color: var(--ink-soft); font-size: 15px; margin: 0; } /* curriculum numbered list */ .curric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .curric-grid > div:first-child { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } .curric-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .curric-list li { display: flex; gap: 22px; padding: 22px 0; border-top: 1px solid var(--line); align-items: baseline; } .curric-list li:last-child { border-bottom: 1px solid var(--line); } .cl-n { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--accent-deep); flex: none; width: 28px; } .curric-list strong { display: block; font-size: 1.18rem; font-family: var(--serif); font-weight: 600; margin-bottom: 4px; } .curric-list p { margin: 0; color: var(--ink-mute); font-size: 15px; } /* CTA banner (dark band with gold glow) */ .cta-banner { background: var(--ink); color: var(--paper); padding: 72px 0; position: relative; overflow: hidden; } .cta-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 360px at 80% -10%, color-mix(in oklab, var(--brand) 35%, transparent), transparent 70%); opacity: .5; } .cta-grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; } .cta-grid h2 { color: var(--paper); margin: 14px 0 12px; } .cta-grid .ribbon { color: var(--brand-soft); } .cta-grid .lead { color: rgba(250,246,238,.75); margin: 0; } .cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; } .cta-actions .btn { justify-content: center; } /* schedule rows (class sessions). No row hover -- the Register CTA carries it. */ .sched { display: flex; flex-direction: column; gap: 14px; } /* Three clean columns, all TOP-aligned (owner 2026-07-13): the date block + format chip stack on the left, the facts in the middle, the Register CTA top-right. */ .sched-row { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: start; padding: 22px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* Chipless rows (no date block -- e.g. instructor Students, members org/location lists): two columns so the info never lands in the narrow chip column and the action button keeps its natural width. */ .sched-row.abt-row-nochip { grid-template-columns: 1fr auto; } .sched-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 76px; padding: 12px 0; background: var(--brand-tint); border-radius: var(--radius); color: var(--brand-deep); } /* A picture where a class puts its date: same 76px column, same radius, same gap, so an organization list and a class list line up down the page. The image COVERS the square, so a wide banner or a tall crest both fill it instead of letterboxing. Without a logo the tile still occupies its column, greyed, rather than shifting the row left. */ .sched-media { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: var(--radius); overflow: hidden; background: var(--brand-tint); flex-shrink: 0; } .sched-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .sched-media.is-empty { background: var(--surface-2); border: 1px dashed var(--line-strong); } .sched-media.is-empty svg { width: 26px; height: 26px; color: var(--ink-mute); } /* No hover treatment: the title beside it does not have one either, and the row already has exactly one hover affordance in its View button. It is a link, so it says so with the cursor and nothing else. */ a.sched-media { cursor: pointer; } .sched-mon { font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .sched-day { font-family: var(--serif); font-weight: 700; font-size: 1.9rem; line-height: 1; } /* info column: title, then uniform icon+value fact rows -- location (with its format chip beside it), time, instructor all share ONE treatment (same icon, size, weight, color; owner 2026-07-13), then the price line with the seats count sitting quietly beside the amount. */ .sched-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .sched-info h4 { font-size: 1.25rem; margin: 0 0 2px; } .sched-fact { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ink); } .sched-fact svg { width: 16px; height: 16px; color: var(--ink-mute); flex-shrink: 0; } .sched-fact .sched-fmt { margin-left: 4px; } /* A long value keeps its own column instead of wrapping back under the icon. Without this the flex line breaks and line 2 starts at the row's left edge, so the icon is left stranded on a line of its own -- what an instructor's Students list did to "Last class: on ". The plain text value is always an unclassed ; badges and chips carry a class. Scoped to the LAST child on purpose: a growing span would shove a chip that follows it to the far edge of the card, away from the number it qualifies. */ .sched-fact > span:not([class]):last-child { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; } .sched-priceline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; } .sched-price { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; line-height: 1; color: var(--brand-deep); } /* A class an organization booked outright has no per-seat price, so this slot carries a sentence naming who covers it instead of a number. Display sizing is wrong for words: at 1.35rem with line-height 1 a wrapped company name has its lines touching, and without min-width:0 a long unbroken name cannot shrink and pushes the card wider than its column. */ .sched-price.is-covered { font-size: 1rem; font-weight: 600; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; } .sched-seats { font-size: 14px; font-weight: 400; color: var(--ink-mute); } /* format chip (beside the location, and on the detail header). The colours are literal: Maps-pin red for a class with an address, Zoom blue for a class that IS a Zoom call (owner 2026-07-18). .fmt-stream deliberately uses its OWN tokens rather than the site accent -- see the note at --fmt-stream. */ .sched-fmt { display: inline-block; font-weight: 700; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; white-space: nowrap; text-align: center; } .fmt-person { background: var(--fmt-person-tint); color: var(--fmt-person); } .fmt-stream { background: var(--fmt-stream-tint); color: var(--fmt-stream); } .fmt-hybrid { background: var(--fmt-hybrid-tint); color: var(--fmt-hybrid); } /* org-private class pill: brand amber so a member's organization classes stand out from the public rows (client 2026-07-16; carries the org name) */ .fmt-org { background: var(--brand-tint); color: var(--brand-deep); } /* org-private row (classes emits .is-private on org-tied sessions): a quiet surface-2 wash + brand accent edge marks the whole row as members-only without shouting. The amber org pill keeps its colors; a thin brand keyline (inset ring, no size shift) keeps it reading as a pill against the tinted row surface. */ .sched-row.is-private { background: var(--surface-2); border-left: 3px solid var(--brand); } .sched-row.is-private .fmt-org { box-shadow: inset 0 0 0 1px var(--brand); } /* pricing cards (static -- no hover-lift) */ .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .price-card { padding: 34px 30px; display: flex; flex-direction: column; gap: 8px; position: relative; } .price-card.feature { border-color: var(--brand); box-shadow: var(--shadow-md); } .price-flag { position: absolute; top: -13px; left: 30px; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; } .price-card h3 { font-size: 1.45rem; } .price-amt { font-family: var(--serif); font-weight: 700; font-size: 2.6rem; color: var(--brand-deep); letter-spacing: -.02em; line-height: 1; margin: 6px 0; } .price-amt small { font-family: var(--sans); font-size: .85rem; font-weight: 600; color: var(--ink-mute); } .price-card p.muted { font-size: 14px; } .price-card .ticks { margin: 16px 0 24px; } .price-card .btn { margin-top: auto; justify-content: center; } /* steps (static): flat 4-up numbered band in a rich-text body. No card background, so no per-step padding -- columns sit flush to the container edges and the grid gap alone spaces them. The reset is scoped under .content-data to beat the generic ol/li rules (.cell-content .content-data ol/li, ~line 702) that would otherwise re-add list indent and bottom margin. Layout stays a single .steps class so the mobile override wins. */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .cell-content .content-data ol.steps { list-style: none; margin: 40px 0 0; padding: 0; } .cell-content .content-data ol.steps > li.step { margin: 0; padding: 0; } .step-n { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--on-brand); background: var(--brand); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px; } .step h4 { font-size: 1.18rem; margin-bottom: 8px; } .step p { font-size: 14.5px; color: var(--ink-soft); margin: 0; } /* course rows (static unless wrapped in a link) */ .course-card { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 30px; } .course-ic { width: 60px; height: 60px; border-radius: 14px; background: var(--brand-tint); color: var(--brand-deep); display: grid; place-items: center; flex: none; } .course-ic svg { width: 30px; height: 30px; } .course-card h3 { font-size: 1.4rem; margin-bottom: 6px; } .course-card p { margin: 0; color: var(--ink-soft); max-width: 64ch; } .course-len { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; } /* split feature band */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .split.rev > *:first-child { order: 2; } .split-media .ph { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .split-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .split-copy p { color: var(--ink-soft); margin: 0; max-width: 52ch; } /* intro grid + prose */ .intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; } .intro-grid .lead { margin: 0; } .prose { max-width: 68ch; } .prose p { color: var(--ink-soft); } .prose h3 { font-size: 1.6rem; margin: 36px 0 12px; } .prose ul { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 18px 0; } .prose ul li { position: relative; padding-left: 30px; color: var(--ink-soft); } .prose ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); } /* blog cards */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .blog-card { display: flex; flex-direction: column; overflow: hidden; } .blog-card .ph { aspect-ratio: 16/10; } .blog-body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .blog-meta { display: flex; gap: 12px; align-items: center; font-size: 12.5px; color: var(--ink-mute); font-weight: 600; } .blog-meta .tag { color: var(--brand-deep); } .blog-card h3 { font-size: 1.3rem; line-height: 1.18; } .blog-card p { color: var(--ink-soft); font-size: 15px; margin: 0; } .blog-card .textlink { margin-top: auto; padding-top: 6px; } .blog-feature { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; overflow: hidden; align-items: stretch; } .blog-feature .ph { min-height: 340px; height: 100%; } .blog-feature .bf-body { padding: 44px; display: flex; flex-direction: column; gap: 14px; justify-content: center; align-items: flex-start; } .blog-feature h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); } /* law/topic cards (static) */ .law-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .law-card { padding: 28px 30px; display: flex; gap: 18px; align-items: flex-start; } .law-ic { width: 46px; height: 46px; flex: none; border-radius: 10px; background: var(--brand-tint); color: var(--brand-deep); display: grid; place-items: center; } .law-ic svg { width: 23px; height: 23px; } .law-card h4 { font-size: 1.2rem; margin-bottom: 6px; } .law-card p { margin: 0 0 12px; color: var(--ink-soft); font-size: 15px; } /* newsletter / inline email form */ .news-form { display: flex; gap: 10px; width: 100%; max-width: 440px; } .news-form input { flex: 1; } .contact-strip { background: var(--surface); border-top: 1px solid var(--line); } /* contact card */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .contact-grid > div:first-child { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } .contact-card { padding: 32px; } .contact-card h3 { font-size: 1.5rem; } .ci-list { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; } .ci { display: flex; align-items: center; gap: 15px; padding: 13px 10px; border-radius: var(--radius); } a.ci { transition: background .2s; } a.ci:hover { background: var(--surface-2); } .ci-ic { width: 42px; height: 42px; flex: none; border-radius: 10px; background: var(--brand-tint); color: var(--brand-deep); display: grid; place-items: center; } .ci-ic svg { width: 21px; height: 21px; } .ci > span:last-child { display: flex; flex-direction: column; } .ci-lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); } .ci-val { font-size: 15.5px; font-weight: 600; color: var(--ink); } /*-- ===================================================================== 2. WEBITEMS ADAPTER ===================================================================== */ /*-- 2a. Page Manager engine: .PageManagerContent > .panel (band) > .panel-table > .row > .cell (column) > .cell-wrapper > .cell-content (module instance). Inline styles from PageManager (flex-basis, justify-content, rgba backgrounds, min-height) are worked WITH. dark-background is computed server-side from panel/cell bg color. */ #abt-main { min-height: 55vh; } .center { position: relative; width: 100%; max-width: var(--maxw); margin-left: auto; margin-right: auto; padding: 0 32px; } .center-no { width: 100%; } .center-no > .row, .center > .row { display: flex; } .center > .row > .cell { max-width: var(--maxw); flex-grow: 1; } .center-no > .row > .cell:not(.cell-post):not(.cell-pre) { flex-grow: 1 !important; flex-shrink: 1 !important; height: fit-content; } .center .center, .center-no .center { width: auto; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .clear, .clearp { display: block; float: none; clear: both; height: 1px; font-size: 1px; line-height: 1px; margin-bottom: -1px; overflow: hidden; } .PageManagerContent .panel { position: relative; z-index: 1; } .PageManagerContent .panel::before, .PageManagerContent .panel::after { content: '.'; display: block; clear: both; height: 0; line-height: 0; font-size: 0; color: transparent; overflow: hidden; } .PageManagerContent .panel.centered { text-align: center; } .PageManagerContent .panel .panel-background, .PageManagerContent .panel .panel-background-layer { content: ''; position: absolute; z-index: -99; top: 0; right: 0; bottom: 0; left: 0; display: block; } .PageManagerContent .panel .panel-background { z-index: -100; background-repeat: no-repeat; background-size: cover; } /* dark band inversion (panel or cell BackgroundColor computed dark) */ .PageManagerContent .panel.dark-background, .PageManagerContent .panel .cell.dark-background { color: var(--paper); } .PageManagerContent .panel.dark-background .panel-table, .PageManagerContent .panel.dark-background .panel-table .cell { color: inherit; } .PageManagerContent .panel.dark-background h1, .PageManagerContent .panel.dark-background h2, .PageManagerContent .panel.dark-background h3, .PageManagerContent .panel.dark-background h4, .PageManagerContent .panel .cell.dark-background h1, .PageManagerContent .panel .cell.dark-background h2, .PageManagerContent .panel .cell.dark-background h3, .PageManagerContent .panel .cell.dark-background h4 { color: var(--paper); } .PageManagerContent .panel.dark-background p, .PageManagerContent .panel .cell.dark-background p { color: rgba(250,246,238,.74); } .PageManagerContent .panel.dark-background .eyebrow, .PageManagerContent .panel .cell.dark-background .eyebrow { color: var(--brand-soft); } .PageManagerContent .panel.dark-background .eyebrow::before, .PageManagerContent .panel .cell.dark-background .eyebrow::before { background: var(--brand-soft); } .PageManagerContent .panel.dark-background .lead, .PageManagerContent .panel .cell.dark-background .lead { color: rgba(250,246,238,.75); } .PageManagerContent .panel.dark-background .stat-num { color: var(--brand-soft); } .PageManagerContent .panel.dark-background .stat-lbl { color: rgba(250,246,238,.6); } .PageManagerContent .panel.dark-background .content-title { color: var(--paper); } /* band heading (SitePagePanels.ContentTitle) = section heading typography */ .PageManagerContent .panel .panel-title { padding: 88px 32px 0; max-width: var(--maxw); margin: 0 auto; } .PageManagerContent .panel .panel-title .title-tag { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; color: inherit; margin: 0; max-width: 56ch; } .PageManagerContent .panel .panel-title .title-tag.center { text-align: center; margin: 0 auto; } .PageManagerContent .panel .panel-title:empty { display: none; padding: 0; margin: 0; min-height: 0; } .PageManagerContent .panel .panel-title .fancy-title span { display: block; font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: 14px; } .PageManagerContent .panel.dark-background .panel-title .fancy-title span { color: var(--brand-soft); } /* the FIRST band's title = the page title. Compact, left-aligned, on white with a hairline rule + ink text -- deliberately NOT the ink header treatment, so it can't blend into the sticky nav directly above it and doesn't shout louder than the content the visitor came to see. */ /* both selectors are "the page title": .first-panel is the marker on real content pages (classes, laws...); [data-panel-id="-1"] is the synthetic panel that wraps a module-set title on handler pages (account, cart...) which never gets .first-panel -- matching both keeps every page title identical. */ .PageManagerContent .panel.first-panel > .panel-title, .PageManagerContent .panel[data-panel-id="-1"] > .panel-title { max-width: none; margin: 0; padding: 0; background: var(--surface); border-bottom: 1px solid var(--line); } .PageManagerContent .panel.first-panel > .panel-title .title-tag, .PageManagerContent .panel[data-panel-id="-1"] > .panel-title .title-tag { max-width: var(--maxw); margin: 0 auto; padding: 34px 32px 30px; color: var(--ink); font-size: clamp(1.7rem, 2.8vw, 2.3rem); text-align: left; } .PageManagerContent .panel.first-panel > .panel-title .title-tag.center, .PageManagerContent .panel[data-panel-id="-1"] > .panel-title .title-tag.center { text-align: left; } .PageManagerContent .panel.first-panel > .panel-title .fancy-title span, .PageManagerContent .panel[data-panel-id="-1"] > .panel-title .fancy-title span { color: var(--brand-deep); } /* module instance rhythm inside a column */ .PageManagerContent .panel .cell .cell-content { padding: 56px 0; } .PageManagerContent .panel .cell .cell-content:last-child { padding-bottom: 88px; } .PageManagerContent .panel .cell .cell-content:not(.bottom-border) + .cell-content { padding-top: 0; } .PageManagerContent .panel .panel-title + .panel-table .cell .cell-content:first-child { padding-top: 44px; } .PageManagerContent .panel .cell.has-prev .cell-content { padding-left: 32px; } .PageManagerContent .panel .cell .cell-content:empty, .PageManagerContent .panel .cell .cell-content:not(:has(*)) { padding: 0 !important; } .PageManagerContent .panel .cell .cell-content .fixed-module { margin-top: 36px; } .PageManagerContent .panel .cell .cell-content .fixed-module:first-child { margin-top: 0; } /* full-bleed module surfaces (presentation slides, custom heroes) */ .PageManagerContent .panel .cell .cell-content.module-presentation { padding: 0 !important; } /* module-emitted content title (SetContentTitle) = section heading; hidden when the panel already carries a band title; nested list-wrapper titles stay. */ .PageManagerContent .panel .cell .cell-content .content-title { display: block; position: relative; margin: 0 0 24px; padding: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); } .PageManagerContent .panel.dark-background .cell .cell-content .content-title, .PageManagerContent .panel .cell.dark-background .cell-content .content-title { color: var(--paper); } .PageManagerContent .panel.has-bgcolor .cell .cell-content .content-title { background-color: transparent; padding: 0; float: none; box-shadow: none; text-shadow: none; } .PageManagerContent .panel.panel-title-yes .cell .cell-content .content-title { display: none; } .PageManagerContent .panel.panel-title-yes .cell .cell-content .list-wrapper .content-title { display: block; } .list-wrapper .content-title { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 16px; } /* icon-only back link modules string-build into SetContentTitle H1s on canonical child views (detail/category pages). Inherits the title color in both the dark first-panel hero and light section contexts; hover = the .arr nudge, mirrored. */ .title-back { display: inline-flex; align-items: center; justify-content: center; width: .8em; height: .8em; vertical-align: -.08em; color: inherit; } .title-back svg { width: 100%; height: 100%; transition: transform .2s var(--ease); } .title-back:hover svg { transform: translateX(-3px); } /* rich text bodies (.content-data) */ .cell-content .content-data ul, .cell-content .content-data ol { margin: 0 0 1rem 1.5rem; padding: 0; } .cell-content .content-data li { margin-bottom: .35rem; color: var(--ink-soft); } .cell-content .content-data li::marker { color: var(--brand); } .cell-content .content-data a:not(.btn):not(.button) { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; } .cell-content .content-data a:not(.btn):not(.button):hover { color: var(--accent); } .cell-content .content-data h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 36px 0 14px; } .cell-content .content-data h3 { font-size: 1.45rem; margin: 28px 0 12px; } .cell-content .content-data p { color: var(--ink-soft); } .cell-content.task-error { display: none; } /* mobile stack: columns collapse under 980px; pushed-sidebar wrappers become direct flex children so per-wrapper order works (see git history for why) */ @media (max-width: 980px) { .PageManagerContent .panel .panel-table > .row { flex-direction: column; } .PageManagerContent .panel .panel-table > .row > .cell.cell-post.has-prev, .PageManagerContent .panel .panel-table > .row > .cell.cell-pre.has-next { display: contents; } .PageManagerContent .panel .panel-table > .row > .cell.has-prev .cell-wrapper, .PageManagerContent .panel .panel-table > .row > .cell.has-next .cell-wrapper { width: 100%; } .PageManagerContent .panel .panel-table > .row > .cell { min-width: 0 !important; flex-basis: auto !important; width: 100%; } .PageManagerContent .panel .cell.has-prev .cell-content { padding-left: 0; } .PageManagerContent .panel .panel-table > .row > .cell.has-prev .cell-wrapper.abt-sidebar-mobile-above, .PageManagerContent .panel .panel-table > .row > .cell.has-next .cell-wrapper.abt-sidebar-mobile-above { order: -1; } } #PageManagerWatermark { position: fixed; z-index: 1040; left: .4rem; bottom: .4rem; padding: .2rem .35rem .25rem; font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; color: #eee; opacity: .33; cursor: default; background: rgba(0,0,0,.85); border-radius: var(--radius); transition: all 200ms; transition-delay: 5s; } #PageManagerWatermark:hover { color: #fff; visibility: hidden; opacity: 0; transition-delay: 500ms; } /* site notifications: WebItems emits .SiteNotification; ABT may also render one from the template when a URL-filled notice needs to follow visitors site-wide. */ .SiteNotification { position: fixed; right: 5px; bottom: 5px; z-index: 1060; box-sizing: border-box; width: max-content; max-width: min(760px, calc(100vw - 10px)); display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; border-radius: var(--radius); color: var(--on-brand); background: #466fad; box-shadow: 0 14px 32px rgba(12,10,6,.24); } .SiteNotification.priority-0 { background: #466fad; } .SiteNotification.priority-1 { background: #3d756a; } .SiteNotification.priority-2 { background: #a95d53; } .SiteNotification.did-agree, .SiteNotification.is-dismissed { display: none !important; } .SiteNotificationLeft { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.35; color: inherit; } .SiteNotificationLeft p { display: inline; margin: 0; color: inherit; } .SiteNotificationLeft a { color: var(--on-brand); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .SiteNotificationLeft a:hover { color: var(--on-brand); text-decoration-thickness: 2px; } .SiteNotificationButton, .abt-site-notification-button { flex: 0 0 auto; min-height: 32px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius); background: rgba(255,255,255,.12); color: var(--on-brand); font: 700 13.5px/1 var(--sans); cursor: pointer; transition: background .15s, border-color .15s; } .SiteNotificationButton:hover, .abt-site-notification-button:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.86); } .SiteNotificationButton:focus-visible, .abt-site-notification-button:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 0 5px rgba(255,255,255,.72); } /*-- 2b. site_navigation markup adapter. The module emits ul.nav-ul.t{tier} > li.nav-li > a.nav-item (+.selected on the active page), and tags each item nav-icononly (name is JUST a FontAwesome glyph) or nav-haslabel (name has text). Contexts: #abt-nav-top (Secondary utility bar), #abt-nav-right (Main quick-nav -- icon slots + gold button), #abt-mobile-drawer (MegaMenu), .abt-footer-nav (Footer columns), .abt-copyright-nav (Copyright). */ /* MAIN quick-nav (#abt-nav-right): ONE Main menu renders BOTH bare icon links (My Account / Cart -- the name is just a FontAwesome glyph -> nav-icononly) AND the gold button (Classes -- the name has text -> nav-haslabel). The client controls which via the name in the back office; order + before/after icon placement follow the name. */ #abt-nav-right .nav-ul.t0 { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; } #abt-nav-right .nav-ul.t0::after { content: none !important; display: none !important; } #abt-nav-right .nav-li.t0 { display: inline-flex; align-items: center; } /* -- icon-only rows: the 42x42 slot, gold on hover (unchanged look) */ #abt-nav-right .nav-item.nav-icononly { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; font-size: 0; color: rgba(250,246,238,.72); border-radius: var(--radius); transition: color .2s, background .2s; } #abt-nav-right .nav-item.nav-icononly:hover { color: var(--brand-soft); background: rgba(250,246,238,.08); } #abt-nav-right .nav-item.nav-icononly.selected { color: var(--brand-soft); } /* a generic icon row shows its FontAwesome glyph; the two known links (account / cart) keep the site's original custom line-art via a currentColor SVG mask, so they render EXACTLY as before -- hide the FA glyph for those two. */ #abt-nav-right .nav-item.nav-icononly i.fa { font-size: 22px; line-height: 1; } #abt-nav-right .nav-item.nav-icononly[href*="account"] i.fa, #abt-nav-right .nav-item.nav-icononly[href*="checkout"] i.fa { display: none; } #abt-nav-right .nav-item.nav-icononly[href*="account"]::before, #abt-nav-right .nav-item.nav-icononly[href*="checkout"]::before { content: ""; width: 23px; height: 23px; background: currentColor; -webkit-mask: var(--nav-ic) center / contain no-repeat; mask: var(--nav-ic) center / contain no-repeat; } #abt-nav-right .nav-item.nav-icononly[href*="account"] { --nav-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.2 3.6-7 8-7s8 2.8 8 7'/%3E%3C/svg%3E"); } #abt-nav-right .nav-item.nav-icononly[href*="checkout"] { --nav-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2.5 4H6l2.3 11.5a1.6 1.6 0 0 0 1.6 1.3h8a1.6 1.6 0 0 0 1.6-1.3L21 7.5H6.5'/%3E%3C/svg%3E"); } /* -- labeled rows: the canonical gold .btn-primary (values mirror section 1c). Any icon in the name (e.g. the arrow after "Classes") rides along inline and shifts on hover, exactly like the old hardcoded button. */ #abt-nav-right .nav-item.nav-haslabel { display: inline-flex; align-items: center; gap: 10px; margin-left: 12px; font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.3; padding: 12px 24px; border-radius: var(--radius); border: 1px solid var(--brand); background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-sm); white-space: nowrap; transition: transform .15s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s; } #abt-nav-right .nav-item.nav-haslabel:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-brand); box-shadow: var(--shadow-md); } #abt-nav-right .nav-item.nav-haslabel.selected { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-brand); } #abt-nav-right .nav-item.nav-haslabel i.fa { font-size: 15px; line-height: 1; transition: transform .2s var(--ease); } #abt-nav-right .nav-item.nav-haslabel:hover i.fa { transform: translateX(3px); } #abt-nav-right .open-icon { display: none; } /* HEADER UNREAD DOT (template-owned; body.abt-has-unread is set server-side when the signed-in member has unread support replies -- template.master). No dedicated bell icon (owner 2026-07-16): the red dot pins to the ACCOUNT icon's top-right on desktop; below the 1080px drawer collapse it pins to the hamburger, and the drawer's Account row carries an inline dot after its label. */ body.abt-has-unread #abt-nav-right .nav-item.nav-icononly[href*="account"] { position: relative; } body.abt-has-unread #abt-nav-right .nav-item.nav-icononly[href*="account"]::after, body.abt-has-unread #abt-nav-toggle::after { content: ""; position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--error); box-shadow: 0 0 0 2px var(--ink); } body.abt-has-unread #abt-nav-toggle { position: relative; } body.abt-has-unread #abt-mobile-drawer .abt-drawer-main .nav-item[href*="account"]::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--error); } /* mobile drawer nav -- the SAME core menus as the desktop, dark theme (light text on the near-black ink-deep fly-out): the Secondary menu as one section, then the Main menu (My Account / Cart icons + the gold Classes button) as another. NO bespoke mobile menu, no invented section headers -- the two menus ARE the two sections. */ .mn-body { display: flex; flex-direction: column; } #abt-mobile-drawer .abt-drawer-nav .nav-ul { list-style: none; margin: 0; padding: 0; } #abt-mobile-drawer .abt-drawer-nav .nav-ul.t0 { display: flex; flex-direction: column; } #abt-mobile-drawer .abt-drawer-nav .nav-item { display: flex; align-items: center; gap: 12px; padding: 15px 4px; font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--paper); border-bottom: 1px solid rgba(250,246,238,.12); transition: color .15s; text-decoration: none; } #abt-mobile-drawer .abt-drawer-nav .nav-item:hover, #abt-mobile-drawer .abt-drawer-nav .nav-item.selected { color: var(--brand-soft); } /* the Main section sits just under Secondary with a touch more separation */ #abt-mobile-drawer .abt-drawer-main { margin-top: 10px; } /* Main icons (account / cart): the SAME custom line-art as the desktop header (currentColor mask) + the hidden URL label from the module becomes the visible drawer label. */ #abt-mobile-drawer .abt-drawer-main .nav-icononly i.fa { display: none; } #abt-mobile-drawer .abt-drawer-main .nav-icononly::before { content: ""; flex: 0 0 auto; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--nav-ic) center / contain no-repeat; mask: var(--nav-ic) center / contain no-repeat; } #abt-mobile-drawer .abt-drawer-main .nav-icononly[href*="account"] { --nav-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.2 3.6-7 8-7s8 2.8 8 7'/%3E%3C/svg%3E"); } #abt-mobile-drawer .abt-drawer-main .nav-icononly[href*="checkout"] { --nav-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2.5 4H6l2.3 11.5a1.6 1.6 0 0 0 1.6 1.3h8a1.6 1.6 0 0 0 1.6-1.3L21 7.5H6.5'/%3E%3C/svg%3E"); } #abt-mobile-drawer .nav-iconlabel { font: inherit; } /* Main "Classes" (labeled) -> the canonical gold button, full width, no row hairline */ #abt-mobile-drawer .abt-drawer-main .nav-haslabel { justify-content: center; margin-top: 18px; padding: 14px 20px; border: 1px solid var(--brand); border-radius: var(--radius); background: var(--brand); color: var(--on-brand); } #abt-mobile-drawer .abt-drawer-main .nav-haslabel:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-brand); } #abt-mobile-drawer .abt-drawer-main .nav-haslabel i.fa { font-size: 15px; } /* drawer accordion (nested Secondary items). The drawer placements get NO .open-icon span from the module (their CssClass carries no *-nav mode), so the chevron is a ::after on the parent row; abt.js (abtAttachDrawerNav) toggles .open on the li and animates the child list via max-height. First tap expands, second tap follows a real link (or collapses a no-URL parent). */ #abt-mobile-drawer .abt-drawer-nav .nav-li.wc > .nav-ul.t1 { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); } #abt-mobile-drawer .abt-drawer-nav .nav-li.wc > .nav-item::after { content: ""; flex: 0 0 auto; margin-left: auto; width: 9px; height: 9px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .35s var(--ease); } #abt-mobile-drawer .abt-drawer-nav .nav-li.wc.open > .nav-item::after { transform: rotate(225deg); } #abt-mobile-drawer .abt-drawer-nav .nav-item.t1 { padding: 12px 4px 12px 26px; font-size: 15px; font-weight: 500; color: rgba(250,246,238,.72); border-bottom-color: rgba(250,246,238,.08); } /* hide the module's injected mobile chrome -- the drawer header is template-owned */ .header-mobile-logo, .header-mobile-close, .header-mobile-locations { display: none !important; } .sitenav-checkbox { display: none; } /* footer nav -- ONE "Footer" menu drives all four columns: each Tier-0 row is a column heading (a , or the Legal link), and its Tier-1 children are the column's links. The Tier-0 list IS the four-column grid. */ .abt-footer-nav .nav-ul.t0 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .abt-footer-nav .nav-ul.t0 > .nav-li.t0 { display: flex; flex-direction: column; } /* column heading -- matches the old
: gold uppercase label (span, or the Legal ) */ .abt-footer-nav .nav-item.t0 { display: inline-block; font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-soft); margin: 0 0 16px; } .abt-footer-nav a.nav-item.t0 { opacity: 1; transition: opacity .2s; } .abt-footer-nav a.nav-item.t0:hover { opacity: .68; } .abt-footer-nav .open-icon { display: none; } /* column links -- matches the old .foot-col ul (paper links via .site-footer a) */ .abt-footer-nav .nav-ul.t1 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .abt-footer-nav .nav-li.t1 { line-height: 1.4; } .abt-footer-nav .nav-item.t1 { font-size: 15px; } /* copyright core menu -- one no-url row renders as a ; make it read as the plain left-hand copyright line it replaces (the flex row + .5 opacity are on .foot-bottom). Reset the module's block + nowrap wrappers to inline text. */ .abt-copyright-nav, .abt-copyright-nav > div, .abt-copyright-nav .nav-ul, .abt-copyright-nav .nav-li { display: inline; margin: 0; padding: 0; list-style: none; } .abt-copyright-nav .nav-item { display: inline; color: inherit; font: inherit; letter-spacing: 0; text-transform: none; white-space: normal; } /*-- 2c. Module form system (feedback_forms + members + account forms). Selector contract preserved; geometry/colors restyled to tokens. */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea, select, .textbox, .form-control, .form-select { font-family: var(--sans); font-size: 15px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus, .textbox:focus, .form-control:focus, .form-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } textarea { resize: vertical; min-height: 110px; } .form-control { width: 100%; } select, .form-select, select.textbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a6f60' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .form-fields ul { list-style: none; padding: 0; margin: 0; } .form-fields li { margin-bottom: 14px; } .form-fields label, .form-fields .label, .form-label, .module-feedback_forms label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .PageManagerContent .panel.dark-background .form-fields label, .PageManagerContent .panel.dark-background .form-fields .label, .PageManagerContent .panel.dark-background .form-label, .PageManagerContent .panel.dark-background .module-feedback_forms label, .PageManagerContent .panel .cell.dark-background .form-fields label, .PageManagerContent .panel .cell.dark-background .form-fields .label, .PageManagerContent .panel .cell.dark-background .form-label, .PageManagerContent .panel .cell.dark-background .module-feedback_forms label { color: rgba(250,246,238,.86); } .form-fields label em, .form-fields .label em, .form-label .required, .module-feedback_forms label em { color: var(--brand-deep); font-style: normal; } .PageManagerContent .panel.dark-background .form-fields label em, .PageManagerContent .panel.dark-background .form-fields .label em, .PageManagerContent .panel.dark-background .form-label .required, .PageManagerContent .panel.dark-background .module-feedback_forms label em, .PageManagerContent .panel .cell.dark-background .form-fields label em, .PageManagerContent .panel .cell.dark-background .form-fields .label em, .PageManagerContent .panel .cell.dark-background .form-label .required, .PageManagerContent .panel .cell.dark-background .module-feedback_forms label em { color: var(--brand-soft); } .form-fields .textbox, .module-feedback_forms input[type="text"], .module-feedback_forms input[type="email"], .module-feedback_forms input[type="password"], .module-feedback_forms textarea { width: 100%; } .module-feedback_forms { max-width: 560px; } .panel .cell .module-feedback_forms { max-width: 100%; } .module-feedback_forms ul { list-style: none; padding: 0; margin: 0; } .module-feedback_forms li { margin-bottom: 14px; } .module-feedback_forms input[type="submit"] { display: inline-flex; background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); padding: 12px 24px; border-radius: var(--radius); font-family: var(--sans); font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm); transition: background .2s, box-shadow .2s; } .module-feedback_forms input[type="submit"]:hover { background: var(--brand-deep); box-shadow: var(--shadow-md); } .form-group { margin-bottom: 14px; } .form-help, .field-note { font-size: 12.5px; color: var(--ink-mute); margin-top: 4px; } .form-hint { font-size: 12.5px; color: var(--ink-mute); margin: 0 0 10px; line-height: 1.4; } .form-row { display: flex; gap: 14px; margin-bottom: 14px; } .form-group-half, .form-group-third { flex: 1; } .form-row .form-group { margin-bottom: 0; } .form-container { max-width: 640px; } .panel .cell .form-wrapper, .panel .cell .form-container { max-width: 100%; } .form-actions { display: flex; gap: 10px; margin-top: 28px; } .form-checks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .form-check { display: flex; align-items: center; gap: 8px; line-height: 1.2; } .form-check label { margin: 0; padding: 0; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink); display: inline; } .form-check input[type="checkbox"] { margin: 0; padding: 0; cursor: pointer; flex-shrink: 0; width: 16px; height: 16px; min-height: 0; } .checkboxradio { font-size: 14px; color: var(--ink-soft); } .checkboxradio label { display: inline; font-weight: 400; cursor: pointer; } .checkboxradio input { min-height: 0; } .cvalidation, .form-validator { color: var(--error); font-size: 13px; display: block; margin-top: 4px; } .form-message { display: block; margin: 0 0 16px; } .form-message.error-msg, .error-msg.form-message, .form-message.msg-error { padding: 12px 14px; border-radius: var(--radius); background: var(--error-tint); border-left: 3px solid var(--error); color: var(--error); font-size: 14px; line-height: 1.4; } .form-message.msg-success, .msg-success.form-message { padding: 12px 14px; border-radius: var(--radius); background: var(--success-tint); border-left: 3px solid var(--success); color: var(--success); font-size: 14px; line-height: 1.4; } /*-- Info variant (completes the error/success set): a calm neutral notice with a gold left accent. Its actions are real BUTTONS on their own row, not near-black text links -- an action that behaves like a button must look like one. --*/ .form-message.msg-info, .msg-info.form-message { padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); border-left: 3px solid var(--brand); color: var(--ink); font-size: 14px; line-height: 1.45; } .form-message.msg-info p { margin: 0 0 12px; } .form-message.msg-info .abt-nudge-actions { display: flex; flex-wrap: wrap; gap: 10px; } .form-message.msg-info .abt-nudge-actions .btn { margin: 0; } .error-msg { color: var(--error); } .msg-success, .success-msg { color: var(--success); } .no-transition { transition: none !important; } /* input icon overlay (shared form vocabulary: feedback_forms captcha + admin-iconed fields emit it today; the members auth card historically spoke the same classes) */ .field.with-overlay, .field-inline.with-overlay { position: relative; } .with-overlay .icon-overlay { position: absolute; right: 14px; top: 14px; color: var(--ink-mute); pointer-events: none; font-size: 1rem; } .with-overlay .input-overlay { padding-right: 38px; } /* members auth card */ .member-login-signup { max-width: 420px; margin: 0 auto; min-height: 55vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .member-login-signup .form-wrapper { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; width: 100%; max-width: 420px; margin: 0 auto; } .member-login-signup .form-main { padding: 28px 28px 20px; } /* the high-specificity companion keeps the auth-card heading visible (and on the card scale) inside titled bands, where the 2a band rules would hide/resize it -- same carve-out the list-wrapper heading already gets */ .member-login-signup .content-title, .PageManagerContent .panel .cell .cell-content .member-login-signup .content-title { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--ink); margin-bottom: 8px; text-align: center; } .member-login-signup .form-description { font-size: 14px; color: var(--ink-mute); margin-bottom: 18px; text-align: center; } .member-login-signup .form-description em { color: var(--brand-deep); font-style: normal; } .member-login-signup .textbox { width: 100%; } .member-login-signup .field-inline { display: inline-block; width: calc(50% - 7px); vertical-align: top; } .member-login-signup .field-inline + .field-inline { margin-left: 14px; } .member-login-signup .field-hr { border: none; border-top: 1px solid var(--line); margin: 10px 0; } .member-login-signup .member-forgot { float: right; font-size: 13px; color: var(--accent-deep); cursor: pointer; } .member-login-signup .member-forgot:hover { color: var(--accent); } .member-login-signup .member-join { text-align: center; padding-top: 12px; font-size: 14px; } .member-login-signup .member-join a { color: var(--accent-deep); cursor: pointer; font-weight: 600; } .member-login-signup .member-join a:hover { color: var(--accent); } /* two sibling links pushed to opposite edges so they never read as one control */ .member-login-signup .member-join-split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px; text-align: left; } .member-login-signup .button { display: flex; width: 100%; justify-content: center; margin-top: 8px; } /* wide 2-column signup variant: first/last, email/phone and the password pair each share a row; the location-code and certified rows carry an explanatory aside in the right column. Stacks to one column on mobile (760 breakpoint below). */ .member-login-signup.member-signup-wide, .member-login-signup.member-signup-wide .form-wrapper { max-width: 800px; } .member-signup-wide .form-row { gap: 14px 24px; } .member-signup-wide .abt-aside-row { align-items: center; } .member-signup-wide .abt-field-aside .field-note { margin-top: 0; } .member-form .member-form-row { display: flex; gap: 14px; } .member-form .member-form-col-1 { flex: 1; } .member-form .member-form-col-2 { flex: 2; } .member-form .member-form-checks { display: flex; flex-wrap: wrap; gap: 16px; } /* feedback_forms image captcha (stock geometry, retinted) */ .module-feedback_forms .form-wrapper .field .captcha-notice { padding: .25em 0; font-size: .85em; line-height: 1.2; } .module-feedback_forms .form-wrapper .field .captcha-image { position: relative; max-width: 500px; /* the generated JPEG's intrinsic request size (setCaptcha 500x115) */ } .module-feedback_forms .form-wrapper .field .captcha-image img.captcha-phrase { width: 100%; box-sizing: border-box; border-radius: var(--radius); } .module-feedback_forms .form-wrapper .field .captcha-image .captcha-reload { position: absolute; top: .25em; right: .3em; line-height: 100%; color: var(--ink-soft); background: rgba(255,255,255,.65); opacity: .8; padding: 2px 6px; border-radius: var(--radius); } .module-feedback_forms .form-wrapper .field .captcha-image .captcha-reload:hover { color: var(--ink); } /*-- 2d. Stock module list/card system (blog, faqs, info_cards, ...). info_cards emits .info_card-wrapper instead of .list-wrapper with the same inner card vocabulary -- both wrappers share these rules (one card system). Hover only when the item wraps a link (.card-link / direct anchor); info_cards anchors may have NO href (non-clickable cards) so its gate is a[href]. */ .list-wrapper ul, .info_card-wrapper ul { list-style: none; margin: 0; padding: 0; } .list-wrapper.card-style ul { display: grid; gap: 28px; } .list-wrapper.card-style.columns-1 ul { grid-template-columns: 1fr; } .list-wrapper.card-style.columns-2 ul { grid-template-columns: repeat(2, 1fr); } .list-wrapper.card-style.columns-3 ul { grid-template-columns: repeat(3, 1fr); } .list-wrapper.card-style.columns-4 ul { grid-template-columns: repeat(4, 1fr); } .list-wrapper.list-style ul { display: flex; flex-direction: column; gap: 14px; } .list-wrapper .item, .info_card-wrapper .item { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .25s, border-color .2s; } .list-wrapper .item:has(a):hover, .info_card-wrapper .item:has(a[href]):hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .list-wrapper .item.is-empty { opacity: .5; } .list-wrapper .item .card-link { display: block; text-decoration: none; color: inherit; overflow: hidden; } .list-wrapper .item .card-strip { display: none; } .list-wrapper .item .card-image, .list-wrapper .item .card-image-bg, .info_card-wrapper .item .card-image { position: relative; height: 180px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--surface-2); display: flex; align-items: center; justify-content: center; } .list-wrapper .item .card-image i { font-size: 2.5rem; color: var(--ink-mute); opacity: .4; } .list-wrapper .item .card-data, .info_card-wrapper .item .card-data { padding: 22px 24px 24px; } .list-wrapper .item .card-data > *, .info_card-wrapper .item .card-data > * { margin-top: 0; margin-bottom: 0; } .list-wrapper .item .card-data > * + *, .info_card-wrapper .item .card-data > * + * { margin-top: 10px; } .list-wrapper .item .card-title, .info_card-wrapper .item .card-title { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; line-height: 1.2; color: var(--ink); text-transform: none; letter-spacing: -.01em; } .list-wrapper .item .card-title a, .info_card-wrapper .item .card-title a { color: inherit; text-decoration: none; } .list-wrapper .item .card-title a:hover, .info_card-wrapper .item .card-title a[href]:hover { color: var(--brand-deep); } .list-wrapper .item .card-subtitle, .info_card-wrapper .item .card-subtitle { font-size: 13.5px; color: var(--ink-mute); } .list-wrapper .item .card-meta { font-size: 13.5px; color: var(--ink-soft); font-weight: 500; } .list-wrapper .item .card-meta i { margin-right: 5px; } .list-wrapper .item .card-timestamp { font-size: 12.5px; color: var(--ink-mute); font-weight: 600; } .list-wrapper .item .card-text, .list-wrapper .item .card-description, .info_card-wrapper .item .card-description { font-size: 15px; color: var(--ink-soft); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .list-wrapper .item .card-status { font-size: 12px; font-weight: 600; } .list-wrapper .item .card-status.active { color: var(--success); } .list-wrapper .item .card-status.inactive { color: var(--ink-mute); } .list-wrapper .item .color-none { display: block; text-decoration: none; color: inherit; } .list-wrapper .item .card-price { font-size: 1.05rem; font-weight: 700; color: var(--brand-deep); } .list-wrapper .item .card-initials { display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--ink-mute); } .category-list .item .card-data { text-align: center; } .item-description { font-size: 15px; line-height: 1.65; color: var(--ink-soft); } .item-description p { margin-bottom: .8rem; } .item-description a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; } .list-wrapper .content-description { font-size: 1.05rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 22px; } .list-wrapper .content-description .content-action, .no-results .content-action, .content-empty .content-action { color: var(--brand-deep); font-weight: 600; text-decoration: none; } .list-wrapper .content-description .content-action:hover, .no-results .content-action:hover, .content-empty .content-action:hover { color: var(--brand); text-decoration: underline; } .no-results .content-empty-cta, .content-empty .content-empty-cta { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); } .no-results, .abt-no-results, .content-empty { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); padding: 32px; text-align: center; color: var(--ink-mute); font-size: 15px; } /*-- 2e. Pagination (stock module postback controls) */ .module-paginate { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; padding: 22px 0; } .module-paginate-label { font-size: 13.5px; color: var(--ink-mute); font-weight: 500; } .module-paginate > .module-paginate-label { flex-basis: 100%; text-align: center; order: 1; } .module-paginate-back, .module-paginate-next { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; background: var(--brand); color: var(--on-brand); border: none; width: 40px; height: 40px; padding: 0; line-height: 1; border-radius: 50%; cursor: pointer; font-size: 15px; text-decoration: none; box-shadow: var(--shadow-sm); transition: background .2s; } .module-paginate > .module-paginate-back { order: 2; } .module-paginate > .module-paginate-next { order: 3; } .module-paginate-back:hover, .module-paginate-next:hover { background: var(--brand-deep); color: var(--on-brand); } .module-paginate-back.disabled, .module-paginate-next.disabled { background: var(--surface-2); color: var(--ink-mute); cursor: default; pointer-events: none; box-shadow: none; } .module-viewmore { display: block; width: 100%; background: var(--surface); border: 1px solid var(--line-strong); color: var(--brand-deep); padding: 12px 24px; cursor: pointer; font-family: var(--sans); font-size: 15px; font-weight: 600; border-radius: var(--radius); transition: border-color .2s, background .2s; } .module-viewmore:hover { border-color: var(--brand); background: var(--brand-tint); } .abt-paginate-loading { position: relative; min-height: 200px; } .abt-paginate-loading > * { opacity: .4; pointer-events: none; transition: opacity .15s; } .abt-paginate-loading::before { content: ''; position: absolute; top: 60px; left: 50%; margin-left: -20px; width: 40px; height: 40px; border: 4px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: abt-spin .8s linear infinite; z-index: 100; pointer-events: none; } @keyframes abt-spin { to { transform: rotate(360deg); } } /*-- 2f. Members account nav card + dashboard (the ONE card here is the nav) */ .abt-account-ident { padding: 4px 13px 13px; border-bottom: 1px solid var(--line); margin-bottom: 8px; } .abt-account-name { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--ink); } .abt-account-handle { font-size: 13px; color: var(--ink-mute); word-break: break-word; } .abt-account-nav { display: flex; flex-direction: column; } .abt-account-nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 13px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); text-decoration: none; border-radius: var(--radius); transition: background .15s, color .15s; } .abt-account-nav-link:hover { background: var(--surface-2); color: var(--ink); } .abt-account-nav-link.active { background: var(--brand); color: var(--on-brand); font-weight: 600; } .abt-account-nav-link .fa { width: 18px; text-align: center; } .abt-account-badge { background: var(--brand-deep); color: var(--on-brand); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 100px; margin-left: auto; } .abt-account-nav-link.active .abt-account-badge { background: var(--on-brand); color: var(--brand-deep); } .abt-account-badge.is-unread { background: var(--error); color: #fff; } .abt-account-nav-link.active .abt-account-badge.is-unread { background: #fff; color: var(--error); } .abt-sidebar-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); padding: 16px 13px 4px; text-align: left; } .abt-sidebar-label:first-child { padding-top: 2px; } .abt-account-sidebar { position: sticky; top: 96px; } .abt-account-navcard { padding: 14px 8px 8px; } @media (max-width: 980px) { .abt-account-sidebar { position: static; } } /*-- Account pages (body carries .abt-account via SitePages.PageClass): module content is CARD-LESS. The one card in this area is the sidebar nav; the shared .card stays reserved for page-link cards, so strip the card chrome from classes/store/support content placed on the account pages. --*/ body.abt-account .card.abt-class-card, body.abt-account .card.abt-store-card, body.abt-account .card.abt-support-card { background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 24px; } /*-- The classes/store module wrappers carry a 1.5rem top margin for their PUBLIC list pages; on account pages that pushes the main content ~24px below the sidebar card top. Zero only the TOP margin here (bottom breathing room kept) so account content lines up with the sidebar top. Scoped to body.abt-account so public /classes and store pages keep their intended top spacing; wins on specificity (0,3,1 vs the module inline 0,2,0) without !important, and does NOT edit the classes/store modules. --*/ body.abt-account .module-classes .abt-classes, body.abt-account .module-store .abt-store, body.abt-account .module-support .abt-support { margin-top: 0; } /*-- Requirement / call-to-action notice (SHARED across modules): a clear amber box with the title, description, and action button EACH on its own line. One component for the dashboard certified-at-signup requirement AND the class-detail booking gate, so a "you must resolve this before you can act" prompt reads identically everywhere. Unscoped on purpose: it renders on the account pages AND on the public class-detail page. --*/ .abt-requirement { border: 1px solid var(--brand); background: var(--brand-tint); border-radius: var(--radius-lg); padding: 20px 22px; } .abt-requirement > .abt-requirement-title { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin: 0 0 8px; } .abt-requirement > p { margin: 0 0 16px; color: var(--ink-soft); line-height: 1.5; } .abt-requirement > .btn, .abt-requirement > .button { margin: 0; } /*-- Location / organization card (SHARED renderer: SiteShell LocationCard). The amber "this matters" box for a member's tied location -- IDENTICAL on Edit Profile, the join / location-code acceptance screen, and signup. Built to the SAME spec as .abt-requirement above (same border/tint/radius/padding + the serif title): header row = org logo LEFT (neutral placeholder when none), org name + location name + address stacked to the RIGHT; an optional action (the Leave button) sits INSIDE the box below the content. Same structure every time. --*/ .abt-loc-card { border: 1px solid var(--brand); background: var(--brand-tint); border-radius: var(--radius-lg); padding: 20px 22px; } .abt-loc-card .abt-loc-head { display: flex; gap: 18px; align-items: center; } .abt-loc-card .abt-loc-logo { flex: 0 0 auto; width: 68px; height: 68px; border-radius: var(--radius); object-fit: contain; background: var(--paper); border: 1px solid var(--line); box-sizing: border-box; } .abt-loc-card .abt-loc-logo-empty { display: flex; align-items: center; justify-content: center; color: var(--ink-mute); font-size: 1.8rem; } .abt-loc-card .abt-loc-info { min-width: 0; } .abt-loc-card .abt-loc-title { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--ink); line-height: 1.2; } .abt-loc-card .abt-loc-name { font-weight: 600; font-size: 1rem; color: var(--ink); margin-top: 5px; } .abt-loc-card .abt-loc-addr { font-size: 14px; color: var(--ink-soft); line-height: 1.45; margin-top: 2px; } .abt-loc-card .abt-loc-action { margin-top: 18px; display: flex; justify-content: flex-end; } .abt-loc-card .abt-loc-action > .btn, .abt-loc-card .abt-loc-action > .button { margin: 0; } /* Org container location picker: the dropdown lives INSIDE the org box (owner 2026-07-15). */ .abt-loc-card .abt-loc-pick { margin-top: 12px; } .abt-loc-card .abt-loc-pick-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; } .abt-loc-card .abt-loc-select { width: 100%; max-width: 340px; } /*-- Management area shared bits: the roster Remove / code-rotate affordances and the Transactions running total. (Search/filter is now the ONE shared .abt-filterbar component below -- the old per-page .abt-search-form / .abt-txn-filters are gone.) --*/ /*-- Row-level remove / deactivate. It sits in the SAME action column as the shared View button on every other management list, so it is the same OBJECT as its neighbours -- a small outline control -- rather than a bare underlined red link floating at the edge of a card (owner 2026-08-04: the manager and roster lists read as sloppy next to the lists beside them). Only the word and the border carry the danger colour; the button stays quiet until hovered. --*/ .abt-remove-link { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--error); font-family: var(--sans); font-weight: 600; font-size: 13.5px; line-height: 1.3; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .abt-remove-link:hover { border-color: var(--error); background: var(--error-tint); color: var(--error); } .abt-rotate-btn { margin-left: 10px; } .abt-txn-total { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 1rem; } /*-- ONE shared account/listing search component (owner 2026-07-14: stop building parallel filter designs -- every account search page uses THIS). A full-width search input that grows to fill the bar, optional segmented .tabs / dropdown / date filters beside it, and NO submit button (abt.js abtAttachIndexFilters auto-filters as you type + on change). Results are the shared white .sched/.sched-row cards, each ending in a "View" .btn. The count line reads "N nouns" from data-noun-one/-many. Because every control is a .textbox (no .btn in the filter row), heights match. --*/ .abt-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 12px; } .abt-filterbar .abt-filterbar-search { flex: 1 1 260px; min-width: 0; margin: 0; } .abt-filterbar > .tabs { flex: 0 0 auto; } .abt-filterbar select.textbox, .abt-filterbar input[type="date"].textbox { flex: 0 0 auto; width: auto; margin: 0; } /*-- The optional "New X" action sits at the far right; trim its vertical padding so it matches the search/select height exactly (owner: the New button must be the SAME height as the inputs, never taller). --*/ .abt-filterbar .abt-filterbar-new { flex: 0 0 auto; margin-left: auto; padding-top: 10px; padding-bottom: 10px; } /*-- A date RANGE is ONE control, not two loose boxes. Two bare mm/dd/yyyy fields sitting side by side said nothing about being a pair, and when the bar wrapped they landed alone on a second line reading as leftovers (owner 2026-08-04). --*/ .abt-filterbar .abt-filterbar-range { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 8px; color: var(--ink-mute); font-size: 14px; } .abt-filterbar .abt-filterbar-range input[type="date"].textbox { flex: 0 0 auto; } /* THE ACCOUNT'S OUTSTANDING BALANCE, ABOVE EVERYTHING (owner 2026-08-27). It used to sit under the filters and the result count, right-aligned across an empty row, where with one invoice on screen there was no telling whether it was that bill's balance or the whole company's. It is the account's, it is the most important number on the page, and it now reads as a sentence at the top rather than as a key/value pair filed among the results. */ .abt-owed-total { margin: 0 0 16px; font-size: 1.05rem; color: var(--ink); } .abt-owed-total b { font-family: var(--serif); font-size: 1.5rem; color: var(--error); } .abt-filterbar-count { margin: 0 0 14px; color: var(--ink-mute); font-size: 14px; } .abt-filterbar-count b { color: var(--ink); font-weight: 700; } /*-- "View" card CTA: a compact secondary button so a row of them is not a wall of gold. Top-aligned like the public catalog's Register button (owner 2026-07-16). --*/ .sched-row .abt-view-btn { align-self: start; white-space: nowrap; } @media (max-width: 620px) { .abt-filterbar { flex-direction: column; align-items: stretch; } .abt-filterbar .abt-filterbar-search, .abt-filterbar select.textbox, .abt-filterbar input[type="date"].textbox { width: 100%; flex: 1 1 auto; } .abt-filterbar .abt-filterbar-range { flex: 1 1 auto; } .abt-filterbar .abt-filterbar-range input[type="date"].textbox { flex: 1 1 0; width: auto; min-width: 0; } .abt-filterbar .abt-filterbar-new { margin-left: 0; } } /*-- Segmented tabs INSIDE the filterbar are trimmed so the pill track reads as the same height as the .textbox controls beside it (owner 2026-07-16: the toggle, the search box, and the action button must look like ONE control row). --*/ .abt-filterbar > .tabs { padding: 4px; } .abt-filterbar > .tabs .tab { padding: 8px 16px; font-size: 14.5px; } /*-- Past classes: the DATE CHIP carries the state (brick over gold); rows never add an Upcoming/Past status pill on top of it (owner 2026-07-16: one pill family per card -- delivery mode only). --*/ .sched-date.is-past { background: var(--error-tint); color: var(--error); } /*-- A BILLING PERIOD is a month, not a day. The invoice rows wore the same chip as the transaction rows beside them but filled it with a two-digit YEAR, so "JUN 26" on an invoice and "JUL 16" on a payment looked like the same kind of fact and read as June 26th. The period chip states the whole year, at the size four digits need. --*/ .sched-date.is-period .sched-day { font-size: 1.15rem; letter-spacing: .02em; } /*-- Detail/report section heading: the ONE vocabulary for in-page sections (roster, message thread, attempt review, dashboard groups). --*/ .abt-subhead { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .abt-subhead .abt-subhead-count { color: var(--ink-mute); font-weight: 400; font-size: .9em; } /*-- Key-value rows (profile summary, receipt/meta blocks): quiet definition rows. --*/ /* Tab strip above one organization. Real links, so a tab is bookmarkable and survives a POST. The active tab carries a tinted panel AND the brand underline, so the strip reads as tabbed at rest rather than only on hover. */ .abt-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 26px; } .abt-tab { padding: 12px 18px; font-weight: 600; font-size: 15px; color: var(--ink-mute); text-decoration: none; border-bottom: 3px solid transparent; border-radius: var(--radius) var(--radius) 0 0; margin-bottom: -1px; white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .abt-tab:hover { color: var(--ink); background: var(--surface-2); } .abt-tab.is-on { color: var(--brand-deep); background: var(--brand-tint); border-bottom-color: var(--brand); } /* An action that IS an icon: no button chrome, no padding, no border, nothing that could make the line item it sits in taller than the ones above and below it. The circle only appears on hover. Sized in em so it tracks the row's own text (owner 2026-08-04). */ .abt-icon-act { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--brand); cursor: pointer; vertical-align: middle; flex: none; transition: background .2s var(--ease), color .2s var(--ease); } .abt-icon-act:hover { background: var(--brand-tint); color: var(--brand-deep); } .abt-icon-act svg { width: 16px; height: 16px; stroke-width: 2.2; } .abt-icon-act.is-danger { color: var(--error); } .abt-icon-act.is-danger:hover { background: var(--error-tint); color: var(--error); } /* Logo line item. It is the ONE row that is taller than a line of text, so it is rendered LAST -- the final row has no bottom rule, so nothing draws attention to the difference. */ .abt-logo-value { display: inline-flex; align-items: center; gap: 10px; } .abt-logo-thumb { width: 40px; height: 40px; } .abt-logo-thumb.is-empty svg { width: 18px; height: 18px; } .abt-logo-form { display: inline-flex; align-items: center; margin: 0; } .abt-logo-form label { cursor: pointer; } /* The code and its two controls on one baseline. The row must measure the SAME as the plain-text rows above and below it, so the whole cluster is pinned to 24px -- the height of one line of value text -- rather than being allowed to grow to whatever the tallest control wants (owner 2026-08-04). */ .abt-code-value { display: inline-flex; align-items: center; gap: 4px; height: 24px; line-height: 24px; } .abt-code-value .abt-orgcode { padding: 0 8px; line-height: 22px; display: inline-block; } /* A line item whose VALUE is a control still measures one line of text. A stock-height select made its row 63px against the 48px of every row above it -- the same defect the bordered icon button caused, in a different shape. */ .abt-kv-v select.abt-kv-select { height: 26px; min-height: 0; width: auto; max-width: 240px; margin: 0; padding: 0 26px 0 9px; font-size: 14px; line-height: 24px; background-position: right 9px center; } .abt-kv-v input.abt-kv-input { height: 26px; min-height: 0; width: auto; max-width: 240px; margin: 0; padding: 0 9px; font-size: 14px; line-height: 24px; text-align: right; } /* A LIST needs more room than a job title. Invoice Recipients holds two or three semicolon separated addresses, which is past 240px long before anyone has typed anything unusual, so this modifier widens it and reads left-to-right like the addresses it contains -- while keeping the 26px height that holds the row to the rhythm of the ones above it. It stays inside .abt-kv-v, so it can never grow past its own column. */ .abt-kv-v input.abt-kv-wide { width: 520px; max-width: 100%; text-align: left; } @media (max-width: 720px) { .abt-kv-v input.abt-kv-wide { width: 100%; } } /* THE FILTER-BAR LAW (owner 2026-08-05, pointing at the back office, where every search page has looked the same for years): dropdown filters first, then the search box, then any action buttons hard right -- all on ONE row, which is what .abt-filterbar-new's auto margin does. An add control on a full-width row of its own above the bar is the shape this replaced; there is no .abt-tabbar-actions any more, so do not reintroduce one. */ .abt-icon-btn-lead { display: inline-flex; align-items: center; gap: 8px; } .abt-icon-btn-lead svg { width: 15px; height: 15px; } /* Hidden from sight, still reachable by a label and by assistive tech. */ .abt-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ONE MEMBER'S ORDER, as the ORGANISATION reads it. Deliberately not the student's receipt card: no billed-to, no purchaser, no payments block, and tight enough that three of them stack without turning the member's page into a scroll (owner 2026-08-04). */ /* EACH ORDER IS ITS OWN WHITE CARD (owner 2026-08-05). Separated only by a rule, several orders ran together into one wall of figures and there was no telling where one ended. Same surface, border and radius as .card, so it belongs to the certificate box above it. */ .abt-morder { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 18px; margin-bottom: 12px; } .abt-morder:last-child { margin-bottom: 0; } .abt-morder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .abt-morder-head b { font-size: 15px; } .abt-morder-head span { color: var(--ink-mute); font-size: 13.5px; } .abt-morder-lines { width: 100%; border-collapse: collapse; } .abt-morder-lines td { padding: 6px 0; vertical-align: top; border: 0; } .abt-morder-lines td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .abt-morder-class { font-weight: 600; } .abt-morder-class a { color: var(--ink); text-decoration: none; } .abt-morder-class a:hover { color: var(--brand-deep); text-decoration: underline; } .abt-morder-meta { color: var(--ink-mute); font-size: 13.5px; line-height: 1.5; } /* ONE FOOTER LINE, not a receipt's stacked totals block. Three right-aligned rows with their own rules spent about 120px restating arithmetic the reader can do; the working sits quietly on the left and the figure that lands on the bill sits on the right. */ .abt-morder-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .abt-morder-working { color: var(--ink-mute); font-size: 13.5px; font-variant-numeric: tabular-nums; } .abt-morder-invoiced { font-weight: 600; color: var(--ink); white-space: nowrap; } .abt-morder-invoiced b { font-size: 16px; margin-left: 8px; font-variant-numeric: tabular-nums; } /* Breadcrumbs -- THE portal's only way back. Every page below a section root carries one, and the trail ends on the page you are reading, so it says where you are as well as where you came from. There is deliberately no second "back to X" control: two navigation idioms in one area is what made the portal feel like several different sites. The separator is drawn in CSS so the markup stays plain links. */ .abt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 14px; color: var(--ink-mute); } /* A crumb is a LINK and has to look like one: brand colour, not body black. Rendered in body ink it read as ordinary text and nobody could tell the trail was clickable. */ .abt-crumbs a { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-deep); font-weight: 600; text-decoration: none; transition: color .2s var(--ease); } .abt-crumbs a:hover { color: var(--brand); text-decoration: underline; } .abt-crumbs a svg { width: 14px; height: 14px; flex: none; } .abt-crumbs > * + *::before { content: "/"; margin-right: 6px; color: var(--line-strong); } .abt-crumbs > [aria-current] { color: var(--ink-mute); font-weight: 400; } /* A destructive act at the bottom of the page it belongs to, with the reason it is unavailable BESIDE it rather than in place of it -- a hidden button answers nothing when the question is "why can I not remove this" (owner 2026-08-04). */ .abt-danger-zone { border-top: 1px solid var(--line); padding-top: 22px; } .abt-danger-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .abt-danger-why { color: var(--ink-mute); font-size: 14px; } /* A DISABLED DESTRUCTIVE BUTTON IS STILL A DESTRUCTIVE BUTTON (owner 2026-08-04). Greyed out it read as an ordinary secondary control and stopped saying what it does; it keeps the error hue, muted, so the colour still names the action while the state says it is unavailable. pointer-events stays live so the not-allowed cursor shows; the disabled attribute is what actually blocks the click. */ /* A DISABLED destructive button carries NO COLOUR AT ALL (owner 2026-08-05). Tinting it with the error hue made a pink button that still looked pressable, and the not-allowed cursor read as an invitation to try rather than a refusal. Grey, faded, inert, and the hover is pinned so it never answers the pointer. Enabled it stays solid red -- the colour is the warning, so it belongs only to the state that can actually do the damage. */ .btn-danger:disabled, .btn-danger[disabled] { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-mute); opacity: .5; cursor: default; box-shadow: none; } .btn-danger:disabled:hover, .btn-danger[disabled]:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-mute); } .abt-kv-row { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line); } .abt-kv-row:last-child { border-bottom: 0; } .abt-kv-k { color: var(--ink-mute); font-size: 14px; flex: 0 0 auto; } .abt-kv-v { font-weight: 600; color: var(--ink); text-align: right; min-width: 0; overflow-wrap: anywhere; } /*-- One money figure, never broken across two lines. A credit reads "-$35.00" and a hyphen is a legal line-break opportunity, so a narrow column can strand the minus on its own row -- the amount then reads as a charge rather than a credit. Use on any element whose whole text is an amount. (Emailed receipts cannot rely on this: Outlook ignored white-space there, so they write a credit as ($35.00) instead.) --*/ .abt-money { white-space: nowrap; } /*-- Any other value that is ONE token to a reader -- a phone number, a certificate number, a reference code. Same cause as .abt-money: the hyphens inside them are legal line-break opportunities, and a narrow table column takes every one, so "303-555-0142" came back as three stacked fragments. --*/ .abt-nobreak { white-space: nowrap; } /*-- Shared data table (instructor roster, exam attempts, order line items): muted caps header, hairline rows, horizontal scroll on narrow screens. --*/ .abt-table-wrap { overflow-x: auto; } .abt-table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .abt-table th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line-strong); white-space: nowrap; } .abt-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; } .abt-table tr:last-child td { border-bottom: 0; } /* Money is read by comparing digit columns, so an amount column is right-aligned and lines up with the totals block under it. The markup has said class="right" all along and nothing defined it, so every amount column on the site was quietly left-aligned. */ .abt-table th.right, .abt-table td.right { text-align: right; } .abt-table td.nowrap { white-space: nowrap; } /* A detail page's header row: what the page is about on the left, its ghost actions top-right. It was declared inside the classes module and scoped to .module-classes, which was fine while only that module drew one. The organization pages draw the same row, so it is shared now -- one shape, one class, one definition (2026-08-06). */ .abt-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px 24px; margin: 0 0 28px; } .abt-head-row h2 { margin: 0 0 14px; } .abt-head-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* A STACKED CELL: several lines about one thing, in one column (owner 2026-08-06 -- "way too much data on here ... too many things that are two or three lines"). The class roster split a person across Name, Email and Phone columns, so at a seventh of the width the name wrapped onto two lines and the organization onto three, and the reader had to reassemble them anyway. One column, one person, three lines. The first line is the identity (a link or the primary value); the rest are supporting and read smaller. */ .abt-stack > * { display: block; } .abt-stack > * + * { font-size: 13px; margin-top: 2px; line-height: 1.35; } /* The LAST column is an action column, so it sits at the right edge -- the same rule the amount column follows above. "View answers" used to trail off the end of the score (owner 2026-08-06: "it's not right aligned even though it's the last column"). */ .abt-table th.abt-cell-actions, .abt-table td.abt-cell-actions { text-align: right; white-space: nowrap; } /* ...and the last cell ends ON the edge. Every cell carries 12px of right padding to space it from the next column; on the last one there is no next column, so that padding was a dozen pixels of dead air between the buttons and the table's own right rule while the first column sat flush against the left (owner 2026-08-06). */ .abt-table th:last-child, .abt-table td:last-child { padding-right: 0; } /* An exam result: the SCORE is the fact being read, so it carries the weight; the verdict is a smaller, lighter second line under it rather than a shouted word competing with the number. One shared shape, so a pass looks the same on the roster and on the student record (owner 2026-08-06: "a bit of inconsistency here, and I keep saying be consistent"). */ /* A qualifier sitting beside a status chip -- how long the certification runs. It has to read as a footnote to the chip, not as a sentence competing with it: rendered at body size next to a pill it looked like a heading (caught on prod 2026-08-06). */ .abt-chip-note { font-size: 13px; color: var(--ink-mute); } /* WHICH KIND OF CERTIFICATION, AS A COLOUR (owner 2026-08-06: "I want the instructors and people to be able to glance at it and just look for a certain color"). As plain text it could only be read one row at a time; as a pill an instructor takes in a whole roster at once and sees which handful of people are renewing rather than certifying for the first time. Orange for Full, green for Re-Cert -- the pairing the back office already uses, so staff who learned it in there read it the same way out here. Same pill geometry as .abt-badge-*, since two pill shapes on one page is exactly the inconsistency these rules exist to prevent. */ .abt-kind-full, .abt-kind-recert { display: inline-block; padding: 3px 10px; border-radius: 100px; color: #fff; font-size: 12px; font-weight: 600; } .abt-kind-full { background: var(--brand); } .abt-kind-recert { background: var(--accent); } /* A second line under a value: the site a student is filed under, beneath the company that owns it. Block on its own so it stacks in a table cell and in a key/value row alike. */ .abt-subline { display: block; font-size: 13px; color: var(--ink-mute); margin-top: 2px; } /* THE PAGER (abtAttachIndexFilters, 50 a page). Built by the shared list component rather than by each listing, so every list in the account area turns pages the same way. It hides itself on a single page: a pager over 12 results is chrome answering a question nobody asked. Two steps and a position, not a run of numbered buttons -- the search box above is how somebody reaches a specific person, and a row of page numbers on a list that grows to hundreds becomes its own scrolling problem. */ .abt-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 24px 0 0; } .abt-pager-at { font-size: 14px; color: var(--ink-mute); font-variant-numeric: tabular-nums; } .abt-pager-step { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 100px; padding: 8px 18px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); } .abt-pager-step:hover:not([disabled]) { background: var(--surface-2); border-color: var(--ink-mute); } /* Disabled is NEUTRAL GREY at reduced opacity with a default cursor, never a washed-out tint of the action colour -- the owner's standing rule (2026-08-05): a pale version of the button still reads as a button. */ .abt-pager-step[disabled] { color: var(--ink-mute); border-color: var(--line); opacity: .55; cursor: default; } .abt-score { display: block; font-weight: 700; font-variant-numeric: tabular-nums; } .abt-verdict { display: block; font-size: 12px; font-weight: 400; color: var(--ink-mute); margin-top: 1px; } .abt-verdict-fail { color: var(--error); } /* The whole result links to the sitting. It carries its OWN link styling instead of .textlink: that class is display:inline-flex, which turned the two stacked lines back into flex items sitting side by side -- the score and the verdict rendered on one row and the block display above did nothing. Caught on prod 2026-08-06; any two-line cell inside a .textlink has the same problem. The link must not repaint the verdict either: the colour carries the verdict's meaning, not the link's. */ a.abt-result { display: block; text-decoration: none; color: var(--accent-deep); font-weight: 600; } a.abt-result:hover .abt-score { text-decoration: underline; } /* Sort-by-header (abtAttachTableSort). The caret is always in the layout, faint until the column is the active one, so the row of headings does not shift on click. */ .abt-table th.abt-th-sort { cursor: pointer; user-select: none; padding-right: 20px; position: relative; } .abt-table th.abt-th-sort:hover { color: var(--ink); } .abt-table th.abt-th-sort:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; } .abt-table th.abt-th-sort::after { content: "\2195"; position: absolute; right: 6px; opacity: .35; font-weight: 400; } .abt-table th.abt-th-sort[data-abt-dir="asc"] { color: var(--ink); } .abt-table th.abt-th-sort[data-abt-dir="desc"] { color: var(--ink); } .abt-table th.abt-th-sort[data-abt-dir="asc"]::after { content: "\2191"; opacity: 1; } .abt-table th.abt-th-sort[data-abt-dir="desc"]::after { content: "\2193"; opacity: 1; } /*-- An empty state may carry its one next-step action as a real button. --*/ .no-results .btn { margin-top: 14px; } /* THE empty-state anatomy (owner 2026-07-16, one pattern everywhere): message in a

, then at most one .btn next step inside the same box -- never a bare inline text link as the primary action. */ .no-results p { margin: 0; } /*-- Dashboard stacks several DISTINCT concepts (certification requirement, the email-verify notice, the account summary). Space goes BETWEEN sections, not above the first or below the last: `> * + *` applies the gap only to a section that HAS a preceding sibling, so single-section account pages (edit profile, etc.) are untouched and nothing gets pushed down on its own. --*/ body.abt-account .abt-account > * { margin-bottom: 0; } body.abt-account .abt-account > * + * { margin-top: 48px; } .abt-dashboard-welcome { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--ink); margin-bottom: 20px; } .abt-dashboard-stats { display: flex; gap: 16px; margin-bottom: 24px; } .abt-dashboard-stat { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 18px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .2s; } .abt-dashboard-stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); } .abt-dashboard-stat .fa { font-size: 1.3rem; color: var(--brand-deep); margin-bottom: 6px; } .abt-dashboard-stat-count { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; color: var(--brand-deep); line-height: 1; } .abt-dashboard-stat-label { font-size: 12.5px; color: var(--ink-mute); margin-top: 4px; } .abt-dashboard-section { margin-bottom: 24px; } .abt-dashboard-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .abt-dashboard-header h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); margin: 0; } .abt-dashboard-header h3 .fa { margin-right: 6px; color: var(--brand-deep); } .abt-dashboard-view-all { font-size: 13.5px; color: var(--brand-deep); text-decoration: none; font-weight: 600; } .abt-dashboard-view-all:hover { text-decoration: underline; } .abt-dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .abt-dashboard-card { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .abt-dashboard-card-img { width: 100%; height: 100px; background-size: cover; background-position: center; background-color: var(--surface-2); } .abt-dashboard-card-placeholder { display: flex; align-items: center; justify-content: center; } .abt-dashboard-card-placeholder .fa { font-size: 1.5rem; color: var(--ink-mute); } .abt-dashboard-card-title { padding: 10px 12px 2px; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .abt-dashboard-card-meta { padding: 0 12px 10px; font-size: 12.5px; color: var(--ink-mute); } .abt-dashboard-empty { font-size: 14.5px; color: var(--ink-mute); margin: 0; } .abt-dashboard-empty a { color: var(--brand-deep); text-decoration: none; font-weight: 600; } .abt-dashboard-empty a:hover { text-decoration: underline; } .abt-dashboard-activity-item { padding: 10px 0; border-bottom: 1px solid var(--line); } .abt-dashboard-activity-item:last-child { border-bottom: none; } .abt-dashboard-activity-text { font-size: 14.5px; color: var(--ink); line-height: 1.4; } .abt-dashboard-activity-date { font-size: 12.5px; color: var(--ink-mute); margin-top: 3px; } /*-- 2g. Badges + alert (status chips on member/admin-facing surfaces). One pill family: open/teal = good or active, pending/gold = in-flight (store placed orders, due registrations), closed/red = ended or refused. */ .abt-badge-open { display: inline-block; padding: 3px 10px; border-radius: 100px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; } .abt-badge-closed { display: inline-block; padding: 3px 10px; border-radius: 100px; background: var(--error); color: #fff; font-size: 12px; font-weight: 600; } .abt-badge-featured { display: inline-block; padding: 3px 10px; border-radius: 100px; background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .abt-badge-pending { display: inline-block; padding: 3px 10px; border-radius: 100px; background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 600; } /* A state that is neither good nor bad and asks nothing of the reader: a billing month that has not finished, so nothing is owed on it yet. Grey keeps it from competing with the amounts that do want doing. */ .abt-badge-muted { display: inline-block; padding: 3px 10px; border-radius: 100px; background: var(--ink-mute); color: #fff; font-size: 12px; font-weight: 600; } /*-- unread/red is the SAME red the header dot and the sidebar count use, so "something is waiting for you" reads as one signal across the account. */ .abt-badge-unread { display: inline-block; padding: 3px 10px; border-radius: 100px; background: var(--error); color: #fff; font-size: 12px; font-weight: 700; } .sched-row.abt-row-unread { border-left: 3px solid var(--error); } /* MONEY OWED LOOKS LIKE MONEY OWED (owner 2026-08-27). An unpaid invoice was the same white card as a certificate or a class, carrying one small Due pill, so the page holding a company's entire outstanding balance read like any other list. The whole edge goes red -- not a left bar like the unread marker, because this is the state of the row rather than a flag on it -- and nothing else about the row changes, so it still filters and searches exactly like its neighbours. */ .sched-row.abt-row-owed { border: 2px solid var(--error); } .btn .abt-badge-unread { margin-left: 8px; vertical-align: middle; } /*-- the chip is sometimes a real link (roster rows) -- hover only there. */ a.abt-badge-unread { text-decoration: none; } a.abt-badge-unread:hover { background: var(--ink); } /*-- Certification chips on instructor and organization rosters open the certificate itself. Same shape as the status span so the row does not change; the underline on hover is what says it goes somewhere. */ a.abt-badge-open, a.abt-badge-closed { text-decoration: none; color: #fff; } a.abt-badge-open:hover, a.abt-badge-closed:hover { background: var(--ink); color: #fff; text-decoration: underline; } a.abt-badge-open:focus-visible, a.abt-badge-closed:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .alert-expired { background: var(--error-tint); color: var(--error); border-radius: var(--radius); padding: 12px 16px; font-size: 14px; margin-bottom: 16px; } .tx-credit { color: var(--success); font-weight: 600; } .tx-debit { color: var(--error); font-weight: 600; } /*-- 2g-historic. Imported prior-training records show under Certificates but are deliberately "less real": a muted, recessed, NON-clickable card (no PDF / detail / verification). A quiet rule separates them from the real certs, then the dashed card carries the same icon+value rows the class list uses. It must never read like the raised, clickable real-certificate cards. */ /* Prior training sits IN the certificate list, not under a divider below it: the dashed border is what separates it, and a second list said "this is a different kind of thing" when it is simply a certificate ABT did not issue. */ .sched-row.abt-cert-historic { background: var(--paper); border: 2px dashed var(--ink-mute); box-shadow: none; cursor: default; } .sched-row.abt-cert-historic:hover { box-shadow: none; transform: none; background: var(--paper); } .sched-row.abt-cert-historic h4 { color: var(--ink); } .sched-row.abt-cert-historic .sched-fact span { color: var(--ink-soft); } .sched-row.abt-cert-historic .sched-fact svg { color: var(--ink-mute); } .sched-row.abt-cert-historic-disabled { border-color: #9b6b63; background: #fff8f6; } .sched-row.abt-cert-historic-disabled:hover { background: #fff8f6; } .sched-row.abt-cert-historic-disabled .sched-fact svg { color: #9b6b63; } /*-- 2p. Print. One shared print stylesheet for every printable surface (order invoice, member class page). Hides web-only chrome so the document fills the sheet. Pages mark on-screen actions .no-print; .abt-print-hide/.abt-print-only swap screen-vs-print content; .abt-print-doc is the document container (drops the card frame on paper). */ @media print { /* Navigation is never part of a printed document: the trail, the tab strip and the pay panel are all ways to move around a screen, and on paper they are noise. */ .site-header, #abt-mobile-nav, .site-footer, .abt-account-sidebar, .abt-crumbs, .abt-tabs, .abt-filterbar, .no-print, .abt-print-hide, .form-actions { display: none !important; } .abt-print-only { display: block !important; } .abt-print-only.sched-fact { display: flex !important; } html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; } .abt-print-doc { box-shadow: none !important; border: 0 !important; margin: 0 !important; width: 100% !important; } /* A document prints as a document, not as a card floating on a tinted page. */ .card, .abt-invoice-doc { box-shadow: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important; background: #fff !important; } a[href]::after { content: "" !important; } } /*-- 2h. Upload zone (pairs with App_Code UploadWidget + abt.js attach pass) */ .abt-upload-zone { display: flex; gap: 18px; align-items: flex-start; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .2s, background .2s; } .abt-upload-zone.dragover { border-color: var(--brand); background: var(--brand-tint); } .abt-upload-preview { width: 96px; height: 96px; flex: none; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--ink-mute); } .abt-upload-preview img { width: 100%; height: 100%; object-fit: cover; } .abt-upload-preview-card { width: 160px; height: 100px; } .abt-upload-preview-cover { width: 220px; height: 80px; } .abt-upload-controls { display: flex; flex-direction: column; gap: 8px; justify-content: center; } .abt-upload-buttons { display: flex; gap: 8px; flex-wrap: wrap; } .abt-upload-hint { font-size: 12.5px; color: var(--ink-mute); } .abt-upload-status { font-size: 13px; } .abt-upload-status.error { color: var(--error); } .abt-upload-status.success { color: var(--success); } /*-- 2i. Module utilities (stock-emitted helper classes) */ .font-title { font-family: var(--serif); } .fwb { font-weight: 700; } .small { font-size: 13.5px; } .light { color: var(--ink-mute); } .mr8 { margin-right: 8px; } .fs90 { font-size: .9rem; } .rounded { border-radius: var(--radius); } .transition-100 { transition: all .1s; } .tac { text-align: center; } .mbottom-4 { margin-bottom: .4rem; } .mbottom-6 { margin-bottom: 6px; } .mbottom-14 { margin-bottom: 14px; } .m0-first-child > *:first-child { margin-top: 0; } .m0-last-child > *:last-child { margin-bottom: 0; } .m0-first-p p:first-child { margin-top: 0; } .m10-last-p p:last-child { margin-bottom: 10px; } .mr5 { margin-right: 5px; } /*-- 2j. presentation module structural CSS. The stock block ships DISABLED inside webitems/modules/presentation/page_content/option.ascx (litPresentationStyles -- its RegisterScript call is commented out on purpose); this is the live port. Two adaptations vs the stock literal: (1) the current code-behind wraps every layer in div.presentation-block INSIDE the li, so the stale li > child combinators are re-pointed through the block; (2) colors/fonts are re-expressed in design tokens. Slide motion stays 1s: the module JS MoveSlide() timeout is hard-coded to 1000ms against these transitions -- never change the durations. Stock li:hover overlay rules are intentionally omitted (slides are not clickable; hover is a promise of interactivity). */ .module-presentation .presentation-wrapper { display: block; position: relative; overflow: hidden; } .module-presentation .presentation-wrapper > ul { display: block; position: relative; overflow: hidden; margin: 0; padding: 0; list-style: none; } .module-presentation .presentation-wrapper > ul > li { display: block; position: relative; overflow: hidden; color: var(--ink); } .module-presentation .presentation-wrapper > ul > li.dark-background { color: var(--paper); } .module-presentation .presentation-wrapper > ul > li:only-child { width: 100%; } .module-presentation .presentation-wrapper > ul > li > .presentation-block { position: relative; display: flex; flex-direction: column; justify-content: center; align-self: stretch; width: 100%; overflow: hidden; } .module-presentation .presentation-wrapper > ul > li .presentation-block > .presentation-color { z-index: 1; opacity: .9; display: block; background-color: var(--ink); background-position: center top; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: all 1s; } .module-presentation .presentation-wrapper > ul > li .presentation-block > .presentation-background { z-index: 0; display: block; background-color: var(--ink); background-position: center top; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: all 1s; } .module-presentation .presentation-wrapper > ul > li .presentation-block > .presentation-info { text-align: left; position: relative; z-index: 2; padding: 80px; } .module-presentation .presentation-wrapper .presentation-info .presentation-title { font-family: var(--serif); font-weight: 600; font-size: 1.5em; line-height: 1.1; letter-spacing: -.02em; text-align: center; color: inherit; } .module-presentation .presentation-wrapper .presentation-info .presentation-title::after { content: ''; display: block; margin: 20px auto; width: 15%; height: 2px; background-color: var(--brand); transition: all 1s; } .module-presentation .presentation-wrapper > ul > li.dark-background .presentation-title::after { background-color: var(--brand-soft); } .module-presentation .presentation-wrapper .presentation-title.align-left { text-align: left; } .module-presentation .presentation-wrapper .presentation-title.align-left::after { margin-left: 0; } .module-presentation .presentation-wrapper .presentation-title.align-right { text-align: right; } .module-presentation .presentation-wrapper .presentation-title.align-right::after { margin-right: 0; } /* fancy title: the code-behind emits line1
line2 (strong FIRST -- the reverse of the panel-title split). Data convention both systems share: line 1 = eyebrow kicker, line 2 = headline. The
between the two block lines is dropped. */ .module-presentation .presentation-wrapper .presentation-title.fancy-title strong { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: 14px; } .module-presentation .presentation-wrapper .presentation-title.fancy-title strong::before { content: ""; width: 26px; height: 2px; background: var(--brand); display: inline-block; } .module-presentation .presentation-wrapper .presentation-title.fancy-title span { display: block; } .module-presentation .presentation-wrapper .presentation-title.fancy-title br { display: none; } .module-presentation .presentation-wrapper > ul > li.dark-background .presentation-title.fancy-title strong { color: var(--brand-soft); } .module-presentation .presentation-wrapper > ul > li.dark-background .presentation-title.fancy-title strong::before { background: var(--brand-soft); } .module-presentation .presentation-wrapper .presentation-info .presentation-description { font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 1.55; } .module-presentation .presentation-wrapper .presentation-info .presentation-description .button.inserted-button { background-color: transparent; color: var(--ink); border: 2px solid var(--ink); font-weight: 600; margin-top: 10px; box-shadow: none; } .module-presentation .presentation-wrapper .presentation-info .presentation-description .button.inserted-button:hover { background-color: var(--ink); color: var(--paper); opacity: 1; } .module-presentation .presentation-wrapper > ul > li.dark-background .presentation-description .button.inserted-button { color: var(--paper); border-color: var(--paper); } .module-presentation .presentation-wrapper > ul > li.dark-background .presentation-description .button.inserted-button:hover { background-color: var(--paper); color: var(--ink); } .module-presentation .presentation-wrapper .presentation-info .presentation-readmore { margin-top: 18px; } .module-presentation .presentation-wrapper .presentation-info .presentation-readmore a { font-weight: 600; color: inherit; text-decoration: none; } .module-presentation .presentation-wrapper .presentation-info .presentation-readmore:not(.presentation-readmore-button) a:hover { text-decoration: underline; text-underline-offset: 3px; } .module-presentation .presentation-wrapper .presentation-readmore.align-left { text-align: left; } .module-presentation .presentation-wrapper .presentation-readmore.align-right { text-align: right; } /* .presentation-readmore-button a = the canonical .btn/.btn-primary look (1c) */ .module-presentation .presentation-wrapper .presentation-readmore.presentation-readmore-button a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 16px; padding: 12px 24px; min-height: var(--touch-min); border-radius: var(--radius); border: 1px solid var(--brand); background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-sm); line-height: 1.3; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .15s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s; } .module-presentation .presentation-wrapper .presentation-readmore.presentation-readmore-button a:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-brand); box-shadow: var(--shadow-md); } .module-presentation .presentation-wrapper .presentation-readmore.presentation-readmore-button a:active { transform: translateY(1px); } .module-presentation .presentation-wrapper .tag-list { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 8px; position: relative; z-index: 2; } /* cta layouts */ .module-presentation .presentation-wrapper > ul.type-C.layout-A > li { width: 100%; display: flex; align-items: center; } .module-presentation .presentation-wrapper > ul.type-C.layout-B > li { width: 100%; } .module-presentation .presentation-wrapper > ul.type-C.layout-B > li > .presentation-block { display: block; } .module-presentation .presentation-wrapper > ul.type-C.layout-B > li .presentation-info { width: 50%; min-height: 50vh; float: right; text-align: left; background-color: rgba(20, 16, 10, .35); } .module-presentation .presentation-wrapper > ul.type-C.layout-B > li:nth-child(2n) .presentation-info { float: left; } .module-presentation .presentation-wrapper > ul.type-C.layout-B > li .presentation-info .presentation-title { font-size: 2.5em; } .module-presentation .presentation-wrapper > ul.type-C.layout-B > li .presentation-info .presentation-description { font-size: 1em; } .module-presentation .presentation-wrapper > ul.type-C.layout-B > li .presentation-info .presentation-title::after { margin: 20px 0; } .module-presentation .presentation-wrapper > ul.type-C.layout-C { display: flex; flex-wrap: wrap; margin: 0; padding: 0; } .module-presentation .presentation-wrapper > ul.type-C.layout-C > li { width: 50%; float: left; min-height: 50vh; height: auto; display: inline-flex; } .module-presentation .presentation-wrapper > ul.type-C.layout-C > li:nth-child(2n+1) { clear: left; } .module-presentation .presentation-wrapper > ul.type-C.layout-D, .module-presentation .presentation-wrapper > ul.type-C.layout-E { display: flex; flex-wrap: wrap; } .module-presentation .presentation-wrapper > ul.type-C.layout-D > li { width: 31%; float: left; min-height: 50vh; height: auto; display: inline-flex; margin: 1.16%; } .module-presentation .presentation-wrapper > ul.type-C.layout-E > li { width: 25%; float: left; min-height: 50vh; height: auto; display: inline-flex; } .module-presentation .presentation-wrapper > ul.type-C.layout-E > li .presentation-block > .presentation-info { padding: 40px 20px; } .module-presentation .presentation-wrapper > ul.type-C.layout-E > li .presentation-block > .presentation-info .presentation-description { font-size: 20px; } .module-presentation .presentation-wrapper > ul.type-C.layout-D > li:nth-child(3n+1), .module-presentation .presentation-wrapper > ul.type-C.layout-E > li:nth-child(4n+1) { clear: left; } .module-presentation .presentation-wrapper > ul.type-C.size-150 > li { min-height: 150px; } .module-presentation .presentation-wrapper > ul.type-C.layout-B.size-150 > li .presentation-info { min-height: 150px; } .module-presentation .presentation-wrapper > ul.type-C.size-50 > li, .module-presentation .presentation-wrapper > ul.type-C.layout-B.size-50 > li .presentation-info { min-height: 50vh; } .module-presentation .presentation-wrapper > ul.type-C.size-75 > li, .module-presentation .presentation-wrapper > ul.type-C.layout-B.size-75 > li .presentation-info { min-height: 75vh; } .module-presentation .presentation-wrapper > ul.type-C.screen-height > li, .module-presentation .presentation-wrapper > ul.type-C.layout-B.screen-height > li .presentation-info { min-height: 100vh; } .module-presentation .presentation-wrapper > ul.type-C.size-300 > li { min-height: 300px; } .module-presentation .presentation-wrapper > ul.type-C.layout-B.size-300 > li .presentation-info { min-height: 300px; } .module-presentation .presentation-wrapper > ul.type-C.size-400 > li { min-height: 400px; } .module-presentation .presentation-wrapper > ul.type-C.layout-B.size-400 > li .presentation-info { min-height: 400px; } .module-presentation .presentation-wrapper > ul.type-C.size-500 > li { min-height: 500px; } .module-presentation .presentation-wrapper > ul.type-C.layout-B.size-500 > li .presentation-info { min-height: 500px; } .module-presentation .presentation-wrapper > ul.type-C.size-600 > li { min-height: 600px; } .module-presentation .presentation-wrapper > ul.type-C.layout-B.size-600 > li .presentation-info { min-height: 600px; } .module-presentation .presentation-wrapper > ul.type-C.size-700 > li { min-height: 700px; } .module-presentation .presentation-wrapper > ul.type-C.layout-B.size-700 > li .presentation-info { min-height: 700px; } .module-presentation .presentation-wrapper > ul.type-C.size-750 > li { min-height: 749px; } .module-presentation .presentation-wrapper > ul.type-C.layout-B.size-750 > li .presentation-info { min-height: 749px; } .module-presentation .presentation-wrapper > ul.type-C.size-800 > li { min-height: 800px; } .module-presentation .presentation-wrapper > ul.type-C.layout-B.size-800 > li .presentation-info { min-height: 800px; } .module-presentation .presentation-wrapper > ul.type-C.size-900 > li { min-height: 900px; } .module-presentation .presentation-wrapper > ul.type-C.layout-B.size-900 > li .presentation-info { min-height: 900px; } /* slideshow layouts */ .module-presentation .presentation-wrapper > ul > li.done .presentation-block > .presentation-color { opacity: 1; transition: opacity 1s; } .module-presentation .presentation-wrapper > ul.type-S.size-50 { min-height: 50vh; } .module-presentation .presentation-wrapper > ul.type-S.size-75 { min-height: 75vh; } .module-presentation .presentation-wrapper > ul.type-S.screen-height { height: 100vh; } .module-presentation .presentation-wrapper > ul.type-S.size-150 { height: 150px; } .module-presentation .presentation-wrapper > ul.type-S.size-300 { height: 300px; } .module-presentation .presentation-wrapper > ul.type-S.size-400 { height: 400px; } .module-presentation .presentation-wrapper > ul.type-S.size-500 { height: 500px; } .module-presentation .presentation-wrapper > ul.type-S.size-600 { height: 600px; } .module-presentation .presentation-wrapper > ul.type-S.size-700 { height: 700px; } .module-presentation .presentation-wrapper > ul.type-S.size-750 { height: 749px; } .module-presentation .presentation-wrapper > ul.type-S.size-800 { height: 800px; } .module-presentation .presentation-wrapper > ul.type-S.size-900 { height: 900px; } .module-presentation .presentation-wrapper > ul.type-S > li { height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; transition: 0s; } .module-presentation .presentation-wrapper > ul.type-S > li.sel, .module-presentation .presentation-wrapper > ul.type-S > li.hide { transition: opacity 1s, left 1s; } .module-presentation .presentation-wrapper > ul.type-S.layout-A > li, .module-presentation .presentation-wrapper > ul.type-S.layout-D > li, .module-presentation .presentation-wrapper > ul.type-S.layout-E > li { width: 100%; display: flex; align-items: center; } .module-presentation .presentation-wrapper > ul.type-S.layout-A > li, .module-presentation .presentation-wrapper > ul.type-S.layout-D > li { left: 100%; } .module-presentation .presentation-wrapper > ul.type-S.layout-A > li.sel, .module-presentation .presentation-wrapper > ul.type-S.layout-D > li.sel { left: 0; z-index: 3; } .module-presentation .presentation-wrapper > ul.type-S.layout-A > li.hide, .module-presentation .presentation-wrapper > ul.type-S.layout-D > li.hide { left: -100%; } .module-presentation .presentation-wrapper > ul.type-S.layout-A.reverse > li, .module-presentation .presentation-wrapper > ul.type-S.layout-D.reverse > li { left: -100%; } .module-presentation .presentation-wrapper > ul.type-S.layout-A.reverse > li.sel, .module-presentation .presentation-wrapper > ul.type-S.layout-D.reverse > li.sel { left: 0; } .module-presentation .presentation-wrapper > ul.type-S.layout-A.reverse > li.hide, .module-presentation .presentation-wrapper > ul.type-S.layout-D.reverse > li.hide { left: 100%; } .module-presentation .presentation-wrapper > ul.type-S.layout-A > li .presentation-block > .presentation-info, .module-presentation .presentation-wrapper > ul.type-S.layout-D > li .presentation-block > .presentation-info, .module-presentation .presentation-wrapper > ul.type-S.layout-E > li .presentation-block > .presentation-info { opacity: 0; transition: opacity 1s; } .module-presentation .presentation-wrapper > ul.type-S.layout-A > li.done .presentation-block > .presentation-info, .module-presentation .presentation-wrapper > ul.type-S.layout-D > li.done .presentation-block > .presentation-info, .module-presentation .presentation-wrapper > ul.type-S.layout-E > li.done .presentation-block > .presentation-info { opacity: 1; } .module-presentation .presentation-wrapper > ul.type-S.layout-E > li { opacity: 0; } .module-presentation .presentation-wrapper > ul.type-S.layout-E > li.sel { opacity: 1; z-index: 3; } .module-presentation .presentation-wrapper > ul.type-S.layout-E > li.hide { opacity: 0; } .module-presentation .presentation-wrapper > ul.type-S.layout-B { display: flex; flex-wrap: wrap; width: 150%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B > li { width: 33.33%; display: inline-flex; align-items: flex-end; position: relative; transition: margin 1s; } .module-presentation .presentation-wrapper > ul.type-S.layout-B > li > .presentation-block, .module-presentation .presentation-wrapper > ul.type-S.layout-C > li > .presentation-block { justify-content: flex-end; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='1'] > li:first-child { margin-left: -33.33%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='2'] > li:first-child { margin-left: -66.66%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='3'] > li:first-child { margin-left: -100%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='4'] > li:first-child { margin-left: -133.33%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='5'] > li:first-child { margin-left: -166.66%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='6'] > li:first-child { margin-left: -200%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='7'] > li:first-child { margin-left: -233.33%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='8'] > li:first-child { margin-left: -266.66%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='9'] > li:first-child { margin-left: -300%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='10'] > li:first-child { margin-left: -333.33%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='11'] > li:first-child { margin-left: -366.66%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='12'] > li:first-child { margin-left: -400%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='13'] > li:first-child { margin-left: -433.33%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='14'] > li:first-child { margin-left: -466.66%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='15'] > li:first-child { margin-left: -500%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='16'] > li:first-child { margin-left: -533.33%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='17'] > li:first-child { margin-left: -566.66%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='18'] > li:first-child { margin-left: -600%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='19'] > li:first-child { margin-left: -633.33%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B[data-position='20'] > li:first-child { margin-left: -666.66%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C { display: flex; flex-wrap: wrap; width: 133.33%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C > li { width: 25%; display: inline-flex; align-items: flex-end; position: relative; transition: margin 1s; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='1'] > li:first-child { margin-left: -25%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='2'] > li:first-child { margin-left: -50%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='3'] > li:first-child { margin-left: -75%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='4'] > li:first-child { margin-left: -100%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='5'] > li:first-child { margin-left: -125%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='6'] > li:first-child { margin-left: -150%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='7'] > li:first-child { margin-left: -175%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='8'] > li:first-child { margin-left: -200%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='9'] > li:first-child { margin-left: -225%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='10'] > li:first-child { margin-left: -250%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='11'] > li:first-child { margin-left: -275%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='12'] > li:first-child { margin-left: -300%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='13'] > li:first-child { margin-left: -325%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='14'] > li:first-child { margin-left: -350%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='15'] > li:first-child { margin-left: -375%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='16'] > li:first-child { margin-left: -400%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='17'] > li:first-child { margin-left: -425%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='18'] > li:first-child { margin-left: -450%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='19'] > li:first-child { margin-left: -475%; } .module-presentation .presentation-wrapper > ul.type-S.layout-C[data-position='20'] > li:first-child { margin-left: -500%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B > li .presentation-block > .presentation-color, .module-presentation .presentation-wrapper > ul.type-S.layout-C > li .presentation-block > .presentation-color { opacity: .35; } .module-presentation .presentation-wrapper > ul.type-S.layout-D > li .presentation-block > .presentation-info { position: absolute; left: 0; top: 0; right: 30%; bottom: 0; } .module-presentation .presentation-wrapper > ul.type-S.layout-D > li .presentation-block > .presentation-background { left: 70%; right: 0; background-size: 200% auto; background-position: left top !important; } .module-presentation .presentation-wrapper > ul.type-S.layout-D > li .presentation-block > .presentation-color { left: 0; right: 30%; opacity: 1; } .module-presentation .presentation-wrapper > ul.type-S.layout-D > li:nth-child(2n) .presentation-block > .presentation-info { right: 0; left: 30%; } .module-presentation .presentation-wrapper > ul.type-S.layout-D > li:nth-child(2n) .presentation-block > .presentation-background { right: 70%; left: 0; background-position: right top !important; } .module-presentation .presentation-wrapper > ul.type-S.layout-D > li:nth-child(2n) .presentation-block > .presentation-color { right: 0; left: 30%; } /* slideshow controls (dots, arrows, loading bar -- all clickable, hover allowed) */ .module-presentation .presentation-wrapper .presentation-arrows, .module-presentation .presentation-wrapper .presentation-pagination { display: none; } .module-presentation .presentation-wrapper.nav-pagination .presentation-pagination { display: block; position: absolute; z-index: 5; bottom: 0; right: 0; left: 0; white-space: pre-wrap; line-height: 1; padding: 0 10px 14px; text-align: center; } .module-presentation .presentation-wrapper.nav-pagination .presentation-pagination .circle { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; background-color: var(--line-strong); margin: 0 0 0 8px; transition: background .2s, transform .2s var(--ease); } .module-presentation .presentation-wrapper.nav-pagination .presentation-pagination .circle:hover { cursor: pointer; background-color: var(--brand-deep); transform: scale(1.2); } .module-presentation .presentation-wrapper.nav-pagination .presentation-pagination .circle.sel { background-color: var(--brand); } .module-presentation .presentation-wrapper.nav-arrows .presentation-arrows { display: block; } .module-presentation .presentation-wrapper .presentation-arrows span.presentation-previous { position: absolute; z-index: 5; left: 20px; top: calc(50% - 32px); width: 32px; height: 32px; transform: rotate(-45deg); } .module-presentation .presentation-wrapper .presentation-arrows span.presentation-next { position: absolute; z-index: 5; right: 20px; top: calc(50% - 32px); width: 32px; height: 32px; transform: rotate(135deg); } .module-presentation .presentation-wrapper .presentation-arrows span > span { position: absolute; left: 0; top: 0; background-color: var(--paper); box-shadow: 0 1px 1px rgba(33, 27, 20, .45); transition: background .2s; } .module-presentation .presentation-wrapper .presentation-arrows span .l1 { width: 32px; height: 6px; } .module-presentation .presentation-wrapper .presentation-arrows span .l1:not(:first-child) { box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .module-presentation .presentation-wrapper .presentation-arrows span .l2 { width: 6px; height: 32px; } .module-presentation .presentation-wrapper .presentation-arrows span:hover { cursor: pointer; } .module-presentation .presentation-wrapper .presentation-arrows span:hover span { background-color: var(--surface); } .module-presentation .presentation-wrapper .presentation-loading { display: block; position: absolute; z-index: 5; bottom: 0; right: 0; left: 0; height: 2px; } .module-presentation .presentation-wrapper .presentation-loading .presentation-loading-bar { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background-color: rgba(250, 246, 238, .5); box-shadow: 0 0 1px rgba(33, 27, 20, .8); transition-timing-function: linear; } @keyframes presentationLoading { from { width: 0; } to { width: 100%; } } /* presentation mobile collapse (port of the disabled litPresentationMobileScripts block, re-pointed through .presentation-block; 860px = this file's module collapse breakpoint) */ @media (max-width: 860px) { .module-presentation .presentation-wrapper > ul.type-C.layout-A > li { min-height: 0; display: block; } .module-presentation .presentation-wrapper > ul.type-C.layout-B > li .presentation-info { width: 100%; padding: 20px; } .module-presentation .presentation-wrapper > ul.type-C.layout-C { display: block; } .module-presentation .presentation-wrapper > ul.type-C.layout-C > li { width: 100%; min-height: 0; display: block; clear: both; } .module-presentation .presentation-wrapper > ul.type-C.layout-D, .module-presentation .presentation-wrapper > ul.type-C.layout-E { display: block; } .module-presentation .presentation-wrapper > ul.type-C.layout-D > li, .module-presentation .presentation-wrapper > ul.type-C.layout-E > li { width: 100%; min-height: 0; display: block; clear: both; margin: 0; } .module-presentation .presentation-wrapper > ul.type-S { font-size: 18px; } .module-presentation .presentation-wrapper > ul.type-S > li .presentation-block > .presentation-info { padding: 20px; } .module-presentation .presentation-wrapper .presentation-arrows span.presentation-previous { top: auto; bottom: 10px; left: 10px; } .module-presentation .presentation-wrapper .presentation-arrows span.presentation-next { top: auto; bottom: 10px; right: 10px; } .module-presentation .presentation-wrapper .presentation-arrows { display: block; } .module-presentation .presentation-wrapper.nav-pagination .presentation-pagination { display: none; } .module-presentation .presentation-wrapper > ul.type-S.layout-D > li .presentation-block > .presentation-color, .module-presentation .presentation-wrapper > ul.type-S.layout-D > li:nth-child(2n) .presentation-block > .presentation-color { left: 0; right: 0; } .module-presentation .presentation-wrapper > ul.type-S.layout-D > li .presentation-block > .presentation-info { position: static; } .module-presentation .presentation-wrapper > ul.type-S.layout-B, .module-presentation .presentation-wrapper > ul.type-S.layout-C { height: auto; width: 100%; display: block; } .module-presentation .presentation-wrapper > ul.type-S.layout-B > li, .module-presentation .presentation-wrapper > ul.type-S.layout-C > li { width: 100%; } .module-presentation .presentation-wrapper > ul.type-S.layout-B > li:first-child, .module-presentation .presentation-wrapper > ul.type-S.layout-C > li:first-child { margin-left: 0 !important; } .module-presentation .presentation-wrapper > ul.type-S.layout-B + .presentation-pagination + .presentation-arrows, .module-presentation .presentation-wrapper > ul.type-S.layout-C + .presentation-pagination + .presentation-arrows, .module-presentation .presentation-wrapper > ul.type-S.layout-B + .presentation-pagination + .presentation-arrows + .presentation-loading, .module-presentation .presentation-wrapper > ul.type-S.layout-C + .presentation-pagination + .presentation-arrows + .presentation-loading { display: none; } } /*-- 2k. info_cards adapter -- only the gaps the shared 2d card system (whose selectors also match .info_card-wrapper) does not cover. theme-gray and the other theme- and block-title- options are stock-brand presets: intentionally unstyled no-ops by design. (Never write a literal star-slash sequence inside this comment -- it once terminated the comment early and the leftover prose swallowed the display:grid rule below it.) The 'All Categories' mode is broken with the current admin (legacy column) -- nothing here styles its exclusive markup. */ .info_card-wrapper.card-style ul, .info_card-wrapper.images-style ul { display: grid; gap: 28px; } .info_card-wrapper.card-style.columns-1 ul, .info_card-wrapper.images-style.columns-1 ul { grid-template-columns: 1fr; } .info_card-wrapper.card-style.columns-2 ul, .info_card-wrapper.images-style.columns-2 ul { grid-template-columns: repeat(2, 1fr); } .info_card-wrapper.card-style.columns-3 ul, .info_card-wrapper.images-style.columns-3 ul { grid-template-columns: repeat(3, 1fr); } .info_card-wrapper.card-style.columns-4 ul, .info_card-wrapper.images-style.columns-4 ul { grid-template-columns: repeat(4, 1fr); } .info_card-wrapper.list-style ul { display: flex; flex-direction: column; gap: 14px; } .info_card-wrapper .item > a { display: block; color: inherit; text-decoration: none; overflow: hidden; } .info_card-wrapper .item .card-image-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .info_card-wrapper .item .card-image.size-contain, .info_card-wrapper .item .size-contain .card-image-inner { background-size: contain; background-origin: content-box; } .info_card-wrapper .item .card-image.bg-white { background-color: var(--surface); padding: 18px; } .info_card-wrapper .item .card-image.nopad { padding: 0; } .info_card-wrapper .item .card-image img { width: 100%; height: 100%; object-fit: contain; } /* hover-image swap: second img fades in ONLY when the card is a real link */ .info_card-wrapper .item .card-image img.hover-image { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .2s var(--ease); } .info_card-wrapper .item:has(a[href]):hover .card-image img.hover-image { opacity: 1; } /* single-card detail view: simple card + contact rows */ .info_card-details .infoCard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 32px; display: flex; flex-direction: column; gap: 18px; max-width: 760px; } .info_card-details .info_card-image { max-width: 280px; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); } .info_card-details .info_card-image img { display: block; width: 100%; height: auto; } .info_card-details .info_card-info { display: flex; flex-direction: column; gap: 14px; } .info_card-details .info_card-contact { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--ink-soft); } .info_card-details .info_card-contact-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); } .info_card-details .info_card-contact-data a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; } .info_card-details .info_card-contact-data a:hover { color: var(--accent); } .info_card-details .info_card-description { color: var(--ink-soft); } .info_card-details .info_card-file { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); font-size: 14.5px; color: var(--ink-soft); } .info_card-details .info_card-file i { color: var(--brand-deep); } /* Numbered Steps preset (DisplayStyle=display-steps): the admin-editable mirror of the static .steps band (563-573) -- gold 40px circle numbers via CSS counters, no card chrome, 4-up grid. The renderer emits no numbering; the counter lives on each item's .card-data ::before. */ .info_card-wrapper.steps-style ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; counter-reset: absteps; } .info_card-wrapper.steps-style.columns-1 ul { grid-template-columns: 1fr; } .info_card-wrapper.steps-style.columns-2 ul { grid-template-columns: repeat(2, 1fr); } .info_card-wrapper.steps-style.columns-3 ul { grid-template-columns: repeat(3, 1fr); } .info_card-wrapper.steps-style .item { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .info_card-wrapper.steps-style .item:has(a[href]):hover { transform: none; box-shadow: none; } .info_card-wrapper.steps-style .item .card-data { padding: 0; counter-increment: absteps; } .info_card-wrapper.steps-style .item .card-data::before { content: counter(absteps); font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--on-brand); background: var(--brand); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px; } .info_card-wrapper.steps-style .item .card-title { font-size: 1.18rem; } .info_card-wrapper.steps-style .item .card-data > * + * { margin-top: 8px; } .info_card-wrapper.steps-style .item .card-description { font-size: 14.5px; color: var(--ink-soft); display: block; -webkit-line-clamp: unset; overflow: visible; } .info_card-wrapper.steps-style .item .card-description p { margin: 0; } /* Numbered List preset (DisplayStyle=display-numlist): the admin-editable mirror of the static .curric-list (501-506) -- bordered rows, two-digit accent numbers. The counter number is a ::before flex item on the row li; the card body is the text column beside it. */ .info_card-wrapper.numlist-style ul { display: flex; flex-direction: column; counter-reset: abnl; } .info_card-wrapper.numlist-style .item { display: flex; gap: 22px; padding: 22px 0; align-items: baseline; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; overflow: visible; } .info_card-wrapper.numlist-style .item:last-child { border-bottom: 1px solid var(--line); } .info_card-wrapper.numlist-style .item:has(a[href]):hover { transform: none; box-shadow: none; } .info_card-wrapper.numlist-style .item::before { content: counter(abnl, decimal-leading-zero); counter-increment: abnl; font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--accent-deep); flex: none; width: 28px; } .info_card-wrapper.numlist-style .item > a, .info_card-wrapper.numlist-style .item .card-main { flex: 1; min-width: 0; } .info_card-wrapper.numlist-style .item .card-data { padding: 0; } .info_card-wrapper.numlist-style .item .card-title { font-size: 1.18rem; } .info_card-wrapper.numlist-style .item .card-data > * + * { margin-top: 4px; } .info_card-wrapper.numlist-style .item .card-description { font-size: 15px; color: var(--ink-mute); display: block; -webkit-line-clamp: unset; overflow: visible; } .info_card-wrapper.numlist-style .item .card-description p { margin: 0; } /* Category-title eyebrow: a two-line info_cards category ("eyebrow\nheadline") renders as line1
line2 with .fancy-title -- the span becomes the gold section kicker (mirror of .eyebrow, 103-108) and the strong the display-3 headline, so a whole band header is admin-editable data. */ .module-info_cards .content-title.fancy-title span { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: 14px; } .module-info_cards .content-title.fancy-title span::before { content: ""; width: 26px; height: 2px; background: var(--brand); display: inline-block; } .module-info_cards .content-title.fancy-title strong { display: block; font-weight: 600; } .module-info_cards .content-title.fancy-title br { display: none; } /* headline->steps breathing room matches the static band's 40px ol top margin */ .PageManagerContent .panel .cell .cell-content.module-info_cards .content-title.fancy-title { margin-bottom: 40px; } /*-- 2l. home band composition -- the six .abt-*-band panel classes carried by the Home page's Page Manager data (records listed in module-presentation / module-info-cards / module-rich-text skills). Reuses the existing vocabulary only: eyebrow kickers from the 2j fancy-title rules, buttons from 1c, the card system from 2d. Hover stays on clickables only. NOTE: a single-layer type-C presentation always renders layout A, so the hero is a clean single-column copy band (measured widths, no fake split). */ /* presentation bands: drop the stock gold divider; band-scoped rhythm */ .abt-hero-band .presentation-wrapper .presentation-info .presentation-title::after, .abt-founder-band .presentation-wrapper .presentation-info .presentation-title::after, .abt-cta-band .presentation-wrapper .presentation-info .presentation-title::after { display: none; } .abt-hero-band .presentation-wrapper .presentation-info .presentation-title, .abt-founder-band .presentation-wrapper .presentation-info .presentation-title, .abt-cta-band .presentation-wrapper .presentation-info .presentation-title { font-size: 1rem; } .abt-hero-band .presentation-wrapper > ul > li .presentation-block > .presentation-info { padding: 64px 0 80px; } .abt-founder-band .presentation-wrapper > ul > li .presentation-block > .presentation-info { padding: 88px 0 96px; } .abt-cta-band .presentation-wrapper > ul > li .presentation-block > .presentation-info { padding: 72px 0; } /* hero (cream): display-1 headline + lead + btn-lg readmore */ .abt-hero-band .presentation-wrapper .presentation-title.fancy-title span { font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -.02em; color: var(--ink); max-width: 18ch; } .abt-hero-band .presentation-wrapper .presentation-info .presentation-description { font-size: 1.22rem; line-height: 1.55; color: var(--ink-soft); max-width: 52ch; margin-top: 22px; } /* a TEXT-ONLY hero (no photo column, e.g. /laws-and-rules) fills the full content column -- the template owns the width. The 18ch/52ch caps above exist only to leave room for the photo on the two-column homepage hero. */ .abt-hero-band:not(:has(.abt-hero-photo-col)) .presentation-title.fancy-title span, .abt-hero-band:not(:has(.abt-hero-photo-col)) .presentation-info .presentation-description { max-width: none; } .abt-hero-band .presentation-wrapper .presentation-info .presentation-readmore { margin-top: 32px; } .abt-hero-band .presentation-wrapper .presentation-readmore.presentation-readmore-button a { padding: 17px 32px; font-size: 17px; } /* founder + cta (dark): display-2 headline; text inversion comes from the computed dark-background classes (panel + layer) */ .abt-founder-band .presentation-wrapper .presentation-title.fancy-title span, .abt-cta-band .presentation-wrapper .presentation-title.fancy-title span { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; color: var(--paper); max-width: 24ch; } .abt-founder-band .presentation-wrapper .presentation-info .presentation-description { max-width: 56ch; } .abt-founder-band .presentation-wrapper .presentation-info .presentation-description strong { color: #fff; } /* (The About-page founder band now carries a REAL CMS photo column -- an abt-founder-photo-col cell added to its panel in BOTH databases -- so it reuses the home founder photo styles above. The earlier CSS-background fallback was removed once that column existed.) */ .abt-cta-band .presentation-wrapper .presentation-info .presentation-description { font-size: 1.22rem; line-height: 1.55; color: rgba(250,246,238,.75); margin-top: 22px; } /* the bottom CTA is a single-column dark band (no photo) -- let its headline + copy fill the content column instead of squeezing to ~half width. Uncap ONLY the CTA; the founder band shares the 24ch title rule but is a two-column band WITH a photo, so it keeps its cap. */ .abt-cta-band .presentation-wrapper .presentation-title.fancy-title span { max-width: none; } .abt-founder-band .presentation-wrapper .presentation-info .presentation-readmore, .abt-cta-band .presentation-wrapper .presentation-info .presentation-readmore { margin-top: 28px; } /* cta band: the .cta-banner radial gold glow ported onto the panel (the clearfix ::before is repurposed; the table is lifted above the glow) */ .PageManagerContent .panel.abt-cta-band { overflow: hidden; } .PageManagerContent .panel.abt-cta-band::before { content: ""; position: absolute; inset: 0; height: auto; overflow: hidden; background: radial-gradient(900px 360px at 80% -10%, color-mix(in oklab, var(--brand) 35%, transparent), transparent 70%); opacity: .5; pointer-events: none; z-index: 0; } .PageManagerContent .panel.abt-cta-band .panel-table { position: relative; z-index: 1; } /* laws-and-rules "topics" grid: these 4 cards are INFORMATIONAL (no link), so they must NOT wear the raised-button look of the clickable policy-hub cards (white surface + border + shadow reads as "click me"). Strip that affordance and present them as flat, left-accented content blocks. The hover-lift is already gated to .item:has(a[href]) -- which these lack -- so only the resting style needs undoing. */ .abt-laws-topics-band .info_card-wrapper .item { background: transparent; border: 0; border-left: 3px solid var(--brand); border-radius: 0; box-shadow: none; overflow: visible; } .abt-laws-topics-band .info_card-wrapper .item .card-data { padding: 2px 0 2px 22px; } .abt-laws-topics-band .info_card-wrapper .item .card-title { color: var(--ink); } /* card bands (formats white / audiences tint): section padding + centered section head; the cards themselves inherit the 2d card system */ .PageManagerContent .panel.abt-formats-band .cell .cell-content, .PageManagerContent .panel.abt-audiences-band .cell .cell-content { padding: 88px 0 96px; } .PageManagerContent .panel.abt-formats-band .cell .cell-content .content-title, .PageManagerContent .panel.abt-audiences-band .cell .cell-content .content-title { font-size: clamp(2rem, 3.6vw, 2.9rem); text-align: center; max-width: 26ch; margin: 0 auto 16px; } .abt-formats-band .module-info_cards .content-data, .abt-audiences-band .module-info_cards .content-data { font-size: 1.22rem; line-height: 1.55; color: var(--ink-soft); text-align: center; max-width: 62ch; margin: 0 auto 48px; } .abt-formats-band .module-info_cards .content-data p, .abt-audiences-band .module-info_cards .content-data p { margin: 0; color: inherit; } /* formats cards fill the full content column -- the template owns the width (var(--maxw)), matching the audiences band's full-width grid. The old 1080px cap left dead side space. */ /* formats band carries real photos, not logos: fill the media box and cover-crop (the stock display-card mode emits size-contain + bg-white for logos -- undo both here so the photo bleeds edge to edge and never tiles) */ .abt-formats-band .info_card-wrapper .item .card-image { height: 210px; background-color: var(--surface-2); padding: 0; } .abt-formats-band .info_card-wrapper .item .card-image.size-contain, .abt-formats-band .info_card-wrapper .item .size-contain .card-image-inner { background-size: cover; background-origin: padding-box; } .abt-formats-band .info_card-wrapper .item .card-image-inner { background-repeat: no-repeat; background-position: center; } /* curriculum band: two real 50/50 middle-aligned columns (copy left, numbered list right); 64px center gutter = the engine's 32px has-prev pad + 32px here */ .PageManagerContent .panel.abt-curric-band .cell .cell-content { padding: 88px 0 96px; } .PageManagerContent .panel.abt-curric-band .cell.abt-curric-copy-col .cell-content { padding-right: 32px; } .PageManagerContent .panel.abt-curric-band .abt-curric-copy-col .cell-content .content-title { font-size: clamp(2rem, 3.6vw, 2.9rem); max-width: 18ch; margin-bottom: 18px; } .PageManagerContent .panel.abt-curric-band .abt-curric-list-col .cell-content .content-title { font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: 18px; } .abt-curric-band .content-data ul.curric-list { margin: 0; padding: 0; } .abt-curric-band .content-data ul.curric-list li { margin-bottom: 0; } .abt-curric-band .content-data .curric-list p { color: var(--ink-mute); font-size: 15px; margin: 0; } .abt-curric-band .content-data p { color: var(--ink-soft); } /* band responsive: the band selectors out-rank the generic 620px cell-content collapse, so they carry their own small-screen steps; gutter resets at 980 */ @media (max-width: 980px) { .PageManagerContent .panel.abt-curric-band .cell.abt-curric-copy-col .cell-content { padding-right: 0; padding-bottom: 0; } .abt-hero-band .presentation-wrapper > ul > li .presentation-block > .presentation-info { padding: 48px 0 64px; } .abt-founder-band .presentation-wrapper > ul > li .presentation-block > .presentation-info, .abt-cta-band .presentation-wrapper > ul > li .presentation-block > .presentation-info { padding: 64px 0 72px; } } @media (max-width: 620px) { .PageManagerContent .panel.abt-formats-band .cell .cell-content, .PageManagerContent .panel.abt-audiences-band .cell .cell-content, .PageManagerContent .panel.abt-curric-band .cell .cell-content { padding: 56px 0 64px; } .abt-hero-band .presentation-wrapper .presentation-title.fancy-title span { font-size: clamp(2rem, 9vw, 2.7rem); } .abt-formats-band .module-info_cards .content-data, .abt-audiences-band .module-info_cards .content-data { margin-bottom: 32px; } } /* hero + founder feature-photo columns: a rich_text column whose body is one .abt-feature-photo image, paired with the presentation text column to make the design's split hero/founder out of REAL Page Manager columns. The empty rich_text title is suppressed; the photo fills its column. */ .abt-hero-photo-col .content-title, .abt-founder-photo-col .content-title { display: none; } .abt-hero-photo-col .content-data, .abt-founder-photo-col .content-data { margin: 0; max-width: none; } /* photo columns: the engine stretches every cell to the band height (= the taller text column) and maps VerticalAlign=middle to justify-content:center -- but the cell is display:block, so that does nothing and the photo jams to the top. Make the cell a flex column so the photo actually CENTERS against the text middle, and keep a modest vertical pad so it never sits flush even when the photo is the taller side. The horizontal pad is the gutter to the text column (the presentation column's padding:0 !important kills the engine has-prev pad, so the gap must live on the photo side). */ .PageManagerContent .panel .cell.abt-hero-photo-col, .PageManagerContent .panel .cell.abt-founder-photo-col { display: flex; flex-direction: column; justify-content: center; } .PageManagerContent .panel .cell.abt-hero-photo-col .cell-content { padding: 32px 0 32px 36px; } .PageManagerContent .panel .cell.abt-founder-photo-col .cell-content { padding: 32px 44px 32px 0; } .abt-feature-photo { display: block; width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); object-fit: cover; } /* hero: a short landscape scene that reinforces the headline -- capped so it can never stretch the hero band taller than the headline + CTA copy beside it */ .abt-hero-photo-col .abt-feature-photo { aspect-ratio: 3/2; max-height: 380px; } /* founder: the studio portrait, capped and top-anchored so the crop falls on the suit, never the face; the near-black backdrop blends into the dark band so a faint paper hairline frames it */ .abt-founder-photo-col .abt-feature-photo { aspect-ratio: 4/5; max-height: 460px; object-position: center top; border: 1px solid rgba(250,246,238,.12); } /* inner static pages: a content-hero banner prepended to a rich_text body, sized to the .content-data prose measure (68ch); 16/9 cover */ .abt-content-hero { display: block; width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); object-fit: cover; aspect-ratio: 16/9; max-height: 360px; margin: 0 0 28px; } /* a page that earns a "skinny" prose column does it with a real figure beside it (e.g. liquor-consulting: text 58% + portrait 42%), never an arbitrary spacer */ .abt-doc-figure .module-rich_text { position: sticky; top: 96px; } .abt-doc-figure .abt-feature-photo { aspect-ratio: 4/5; max-height: 520px; } /* policy hub: 4 link cards (no images) in a full-width 2-up grid -- the template owns the width (.center/.cell cap at var(--maxw)); no content-level max-width cap. An empty info_cards category title is suppressed (the page

says it). */ .PageManagerContent .content-title:empty { display: none; } .abt-policy-cards .info_card-wrapper.card-style ul, .abt-policy-cards .info_card-wrapper.images-style ul { grid-template-columns: repeat(2, 1fr); } /* doc/legal pages (policy/terms): a prose column + a small in-page policy nav. The column WIDTHS live in Page Manager (abt-doc-main / abt-doc-sidebar) -- the template owns the width, no module max-width. */ .abt-doc-sidebar .cell-wrapper { position: sticky; top: 96px; align-self: start; } .PageManagerContent .panel .cell.abt-doc-main { min-width: 0; } .PageManagerContent .panel .cell.abt-doc-sidebar { min-width: 220px; flex-grow: 0 !important; flex-shrink: 0 !important; } .abt-doc-sidebar .nav-ul.t0 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .abt-doc-sidebar .nav-li.t0 { display: block; } .abt-doc-sidebar .nav-item.t0 { display: block; padding: 9px 14px; border-radius: var(--radius); font-size: 14.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; border-left: 2px solid transparent; transition: background .15s, color .15s; } .abt-doc-sidebar .nav-item.t0:hover { background: var(--surface-2); color: var(--ink); } .abt-doc-sidebar .nav-item.t0.selected { color: var(--brand-deep); border-left-color: var(--brand); background: var(--brand-tint); } @media (max-width: 980px) { /* stacked: the gutters collapse and the photos take a landscape crop so a full-width portrait isn't absurdly tall */ .PageManagerContent .panel .cell.abt-hero-photo-col .cell-content, .PageManagerContent .panel .cell.abt-founder-photo-col .cell-content { padding-left: 0; padding-right: 0; } .abt-hero-photo-col .abt-feature-photo { aspect-ratio: 16/9; max-height: 360px; } .abt-founder-photo-col .abt-feature-photo { aspect-ratio: 16/10; max-height: 420px; object-position: center 28%; } .abt-doc-sidebar .cell-wrapper { position: static; } .PageManagerContent .panel .cell.abt-doc-sidebar { min-width: 0; flex-grow: 1 !important; flex-shrink: 1 !important; } } /*-- 2m. Account list rows + meta lines -- the one row/meta vocabulary for member-facing module lists (support tickets + store orders/codes/payments today; the classes account lists carry byte-identical per-module copies that collapse onto these on their own sweep). Row = flex space-between on a hairline; meta = muted micro spans with strong values. */ .abt-list-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); } .abt-list-row:last-child { border-bottom: 0; } .abt-list-row h3 { font-size: 1.05rem; } .abt-list-row h3 a:hover { color: var(--brand-deep); } .abt-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 13.5px; color: var(--ink-mute); } .abt-meta b { color: var(--ink); font-weight: 600; } /*-- 2n. testimonials module. ONE render style: a grid of quote cards, each the shared .card. The cards are static (nothing inside them links anywhere), so they take no hover treatment. The panel setting is a COUNT, not a column count, so the grid auto-fits instead of taking a columns-N class. The colors are pinned rather than inherited: these white cards can sit inside a dark-background band, where the panel would otherwise hand them paper text. */ .module-testimonials .testimonial-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .module-testimonials .testimonial { padding: 26px 28px 24px; color: var(--ink); } .module-testimonials .testimonial::before { content: "\201C"; display: block; font-family: var(--brand-serif); font-size: 54px; line-height: .7; color: var(--brand-soft); margin-bottom: 12px; } .module-testimonials .testimonial-quote { font-family: var(--brand-serif); font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); } .module-testimonials .testimonial-author { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .module-testimonials .testimonial-photo { flex: none; } .module-testimonials .testimonial-photo img { display: block; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); } .module-testimonials .testimonial-name { font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--ink); } .module-testimonials .testimonial-date { font-size: 13px; color: var(--ink-mute); margin-top: 2px; } /*-- ===================================================================== 3. ACCESSIBILITY + RESPONSIVE ===================================================================== */ :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-tint), 0 0 0 5px var(--brand); border-radius: var(--radius); } .navmain :focus-visible, .site-footer :focus-visible { box-shadow: 0 0 0 3px rgba(233,200,120,.5); } button, .btn, .button, input[type="submit"] { min-height: var(--touch-min); } .acc-q { min-height: var(--touch-min); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } } @media (max-width: 1080px) { /* the Main quick-nav (icons + Classes button) collapses into the hamburger drawer (MegaMenu); the thin utility bar goes too, so the header pins flush */ #abt-nav-right { display: none; } .navtop { display: none; } .site-header { top: 0; } .nav-toggle { display: grid; } } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero-media { max-width: 460px; } .founder-grid, .curric-grid, .contact-grid, .cta-grid { grid-template-columns: 1fr; gap: 40px; } .founder-quote { right: 0; } .cta-actions { flex-direction: row; flex-wrap: wrap; } } @media (max-width: 900px) { :root { --foot-mtn-h: 150px; } } @media (max-width: 860px) { .g-4 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: 1fr; } .section-pad { padding: 68px 0; } .steps { grid-template-columns: 1fr 1fr; gap: 32px; } .price-grid { grid-template-columns: 1fr; } .intro-grid { grid-template-columns: 1fr; gap: 32px; } .abt-footer-nav .nav-ul.t0 { grid-template-columns: repeat(2, 1fr); gap: 32px 40px; } .split { grid-template-columns: 1fr; gap: 32px; } .split.rev > *:first-child { order: 0; } .blog-grid { grid-template-columns: 1fr; } .blog-feature { grid-template-columns: 1fr; } .abt-dashboard-stats { flex-direction: column; } .abt-dashboard-grid { grid-template-columns: 1fr 1fr; } .list-wrapper.card-style.columns-3 ul { grid-template-columns: repeat(2, 1fr); } .list-wrapper.card-style.columns-4 ul { grid-template-columns: repeat(2, 1fr); } /* the .card-style/.images-style hops match the 2k base specificity -- without them the base columns-N rule out-ranks this media query */ .info_card-wrapper.card-style.columns-3 ul, .info_card-wrapper.images-style.columns-3 ul { grid-template-columns: repeat(2, 1fr); } .info_card-wrapper.card-style.columns-4 ul, .info_card-wrapper.images-style.columns-4 ul { grid-template-columns: repeat(2, 1fr); } /* steps preset mirrors the static .steps hop above (2-up, gap 32) -- and stays 2-up below 620 exactly like the static band it replaces */ .info_card-wrapper.steps-style ul, .info_card-wrapper.steps-style.columns-3 ul { grid-template-columns: repeat(2, 1fr); gap: 32px; } } @media (max-width: 760px) { .sched-row { grid-template-columns: auto 1fr; gap: 16px 20px; } .sched-row.abt-row-nochip { grid-template-columns: 1fr; } .sched-row .btn { grid-column: 1 / -1; justify-content: center; } .course-card { grid-template-columns: auto 1fr; } .course-len { grid-column: 2; } .law-grid { grid-template-columns: 1fr; } .member-login-signup { max-width: 100%; } .member-login-signup .field-inline { display: block; width: 100%; } .member-login-signup .field-inline + .field-inline { margin-left: 0; margin-top: 10px; } .member-login-signup.member-signup-wide, .member-login-signup.member-signup-wide .form-wrapper { max-width: 100%; } .member-signup-wide .form-row { flex-direction: column; gap: 0; margin-bottom: 0; } .member-signup-wide .form-row .form-group { margin-bottom: 14px; } .member-signup-wide .abt-aside-row { align-items: stretch; } .member-form { max-width: 100%; } .abt-account-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; } .abt-account-nav-link { padding: 8px 11px; font-size: 13.5px; } /* The nav turns into a wrapped row here, which made each GROUP LABEL just another chip in the flow -- "INSTRUCTOR" landed mid-row beside Sign Out and stopped heading anything. A label owns its own row so the groups still read as groups. */ .abt-account-nav .abt-sidebar-label { flex: 1 0 100%; padding: 12px 4px 2px; } .abt-account-nav .abt-sidebar-label:first-child { padding-top: 2px; } } @media (max-width: 620px) { .wrap, .center { padding: 0 20px; } body { font-size: 16px; } /* phone: same header logo morph as desktop (shared positions keep 'abt' centered over the name), just ease the bar heights down a touch for the smaller screen */ .navbar { height: 100px; } body.nav-scrolled .navmain .navbar { height: 70px; } .navmain .brand { height: 88px; } body.nav-scrolled .navmain .brand { height: 44px; } .g-2, .g-4 { grid-template-columns: 1fr; } .abt-footer-nav .nav-ul.t0 { grid-template-columns: 1fr; gap: 30px; } .display { font-size: clamp(2rem, 9vw, 2.7rem); } .hero-seal { width: 92px; height: 92px; left: -14px; bottom: 60px; } .hero-next { right: 0; width: 210px; } .hero-trust { flex-wrap: wrap; gap: 18px; } .ht-sep { display: none; } .news-form { flex-direction: column; } .founder-quote { position: static; width: auto; margin-top: 16px; } .list-wrapper.card-style.columns-2 ul, .list-wrapper.card-style.columns-3 ul, .list-wrapper.card-style.columns-4 ul, .info_card-wrapper.card-style.columns-2 ul, .info_card-wrapper.card-style.columns-3 ul, .info_card-wrapper.card-style.columns-4 ul, .info_card-wrapper.images-style.columns-2 ul, .info_card-wrapper.images-style.columns-3 ul, .info_card-wrapper.images-style.columns-4 ul { grid-template-columns: 1fr; } .PageManagerContent .panel .cell .cell-content { padding: 40px 0; } .PageManagerContent .panel .cell .cell-content:last-child { padding-bottom: 64px; } .PageManagerContent .panel .panel-title { padding: 64px 20px 0; } #PageManagerWatermark { display: none; } } @media (max-width: 560px) { :root { --foot-mtn-h: 104px; } /* the fir treeline degrades to thin spikes once the band is this short and the none-aspect SVG compresses horizontally -- drop to a clean mountain ridge */ .foot-firs { display: none; } } /* Organization logo on the account org detail hub. A badge, never a banner: the server downscales to a 720px box, and this caps the rendered size so a tall logo cannot push the facts below it off the first screen. */ .abt-org-logo-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 16px 0; } .abt-org-logo { max-width: 160px; max-height: 96px; width: auto; height: auto; border-radius: 6px; } .abt-org-logo-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .abt-org-logo-form .textbox { max-width: 260px; }