"), * so the count line above the results stays visible and the page does not look as though * it has been cropped. Smooth scrolling to it is set in the MOTION block below, * only for a visitor who has not asked for reduced motion. (It used to be left off * so a same-page click and a full navigation would behave alike; nearly every menu * link is now a same-page anchor, so the glide is what a visitor expects.) */ .event-list { display: flex; flex-direction: column; gap: 1rem; margin: 0 0 1.5rem } /* A row is a four-column grid on a wide screen and a stack on a narrow one. * The date and side columns are fixed because their content is bounded -- a * date and a price -- while the body takes whatever is left. minmax(0, 1fr) * rather than 1fr: a grid track defaults to min-content floor, and a long * unbroken course name would otherwise push the row wider than its container. */ .event { background: var(--paper); border: 1px solid var(--rule-l); border-radius: .625rem; display: grid; gap: 1.25rem; overflow: hidden; padding: 1.25rem } @media only screen and (min-width: 48.063em) { .event { align-items: start; grid-template-columns: 5.5rem 9rem minmax(0, 1fr) 11rem } } /* The left edge is the discipline, and it is the ONLY thing carrying colour on * the row. FR-037 requires that colour never be the sole signal, which it is * not: every row also names its discipline in .event-meta. */ .event { border-left: 4px solid var(--gray) } .event.cat-fa { border-left-color: var(--fa-red) } .event.cat-wb { border-left-color: var(--wb-blue) } .event.cat-fp { border-left-color: var(--gold) } .event-date { text-align: center } .event-date .mo { color: var(--muted-l); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase } .event-date .day { font-size: 2.25rem; font-weight: 700; line-height: 1 } .event-date .range { color: var(--muted-l); font-size: .75rem; margin-top: .25rem } /* The plate the course code sits on, where the supplied markup had a * photograph. Sized by aspect-ratio rather than a height so it keeps its shape * at every column width, and tinted per discipline so the row reads at a * glance. Feature 045 put the photograph back as an OPTIONAL layer underneath * (see below) that covers the plate when it loads: the plate and its course * code are the fallback, so the icon never has to be there for the row to work. */ .event-thumb { align-items: center; aspect-ratio: 4 / 3; background: var(--paper-2); border-radius: .5rem; display: flex; justify-content: center; overflow: hidden; position: relative } /* The workshop icon is a LAYER ABOVE .cat-tag. Absolutely positioned, so it * paints over the in-flow pill and takes no part in sizing the box. A loaded * icon hides the course code; a missing, slow or 404ing one paints nothing * (its alt is empty), so the plate and the code show through with no layout * shift and no script to detect the failure. `contain`, not `cover`: the whole * image is shown, letterboxed on the plate, rather than cropped to the box. * The fixed aspect-ratio above is what reserves the space either way. */ .event-thumb img { height: 100%; inset: 0; object-fit: contain; position: absolute; width: 100% } .cat-tag { border-radius: 999px; color: var(--white); font-size: .75rem; font-weight: 700; letter-spacing: .06em; padding: .3rem .7rem; text-transform: uppercase } .cat-fa .cat-tag { background: var(--fa-red) } .cat-wb .cat-tag { background: var(--wb-blue) } .cat-fp .cat-tag { background: var(--gold); color: var(--ink) } .event-meta { align-items: center; color: var(--muted-l); display: flex; flex-wrap: wrap; font-size: .8125rem; gap: .5rem } /* The separator is drawn, not typed: a literal "·" between spans is read out * by a screen reader as "middle dot" on every row. */ .event-meta .dot { background: currentColor; border-radius: 50%; height: 3px; opacity: .55; width: 3px } .event-title { font-size: 1.125rem; margin: .5rem 0 .35rem } .event-sub { color: var(--muted-l); margin: 0 0 .75rem } .event-side { display: flex; flex-direction: column; gap: .5rem } .event-price { margin: 0 } .event-price__was { color: var(--muted-l); margin-right: .35rem } .event-price__amount { font-size: 1.5rem } .event-price__per-seat { color: var(--muted-l); font-size: .8125rem } .event-price__tax-note { display: block; font-size: .75rem } .event-deadline { font-size: .75rem; margin: 0 } .event-enroll { align-items: center; background: var(--ft-red); border-radius: 999px; color: var(--white); display: inline-flex; font-size: .8125rem; font-weight: 700; gap: .4rem; justify-content: center; padding: .55rem 1rem; text-decoration: none } .event-enroll:active, .event-enroll:focus, .event-enroll:hover { background: var(--ft-red-hover); color: var(--white) } /* Wireframe integration: See Details, the quiet sibling of Enroll Now -- same shape, outlined, * so the primary action stays the only filled button on the row. */ .event-learn, .event-bundle { align-items: center; border: 1px solid var(--ft-red); border-radius: 999px; color: var(--ft-red); display: inline-flex; font-size: .8125rem; font-weight: 700; justify-content: center; padding: .5rem 1rem; text-decoration: none } .event-learn:active, .event-learn:focus, .event-learn:hover { background: var(--ft-red); color: var(--white) } /* Bundle it! is gold, filled, with dark text (white on gold fails contrast). */ .event-bundle { background: var(--gold); border-color: var(--gold); color: #1a1614 } .event-bundle:active, .event-bundle:focus, .event-bundle:hover { background: color-mix(in srgb, var(--gold) 82%, black); border-color: color-mix(in srgb, var(--gold) 82%, black); color: #1a1614 } /* ========================================================================== * FEATURE 032 — PAGINATION * ========================================================================== */ .pagination { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0 0 2rem } .pagination__pages { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: 0 } .pagination__page, .pagination__step { border: 1px solid var(--rule-l); border-radius: .375rem; display: block; min-width: 2.25rem; padding: .4rem .6rem; text-align: center; text-decoration: none } /* The current page is a , so this styles a non-link. currentColor for the * border keeps the two in step whatever the fill becomes. */ .pagination__page.is-current { background: var(--ft-red); border-color: currentColor; color: var(--white); font-weight: 700 } a.pagination__page:hover, a.pagination__step:hover { background: var(--paper-2) } /* ========================================================================== * FEATURE 032 — VIDEO HERO * * NOT HUNG OFF `.hero`. That class is in the harvested region, so a rule on it * reaches whatever else adopts it later; every rule here is addressed to an * inner class name that only this hero has. (It once had to share `.hero` with * the copy hero below it, which has since been removed.) The two things * `.hero` does provide -- `position: relative` and `overflow: hidden` -- are * already in the harvested rule and are what the absolute positioning below * hangs on, so nothing needs restating. * ========================================================================== */ /* The hero's live indicator draws its dot and glow from --fa-red / * --fa-red-glow -- Fire Alarm's discipline red, not the brand red -- because * it's the brighter of the two and is what stays visible over dimmed video. * Every token used in this section (--fa-red, --fa-red-glow, --ft-red, * --ink, --paper, --paper-2...) is defined once, in the DESIGN TOKENS block * near the top of this fence; nothing below re-declares them. * * The video breaks out to the edges of the boxed page. `.container` insets its * children by 1rem; a hero that stops short of the box edge reads as a picture * in the page rather than the top of it. The negative margins cancel exactly * that padding -- the same trick the global-links bar uses against the body * gutter, and the same reason it is written as one value here. * * The height is what gives the whole hero its size: `.hero` itself has none, * and the overlay and content are absolutely positioned and contribute * nothing. clamp() keeps it from swallowing a short laptop viewport or * collapsing on a phone. */ .hero-media { background: #000; height: clamp(18rem, 40vh, 24rem); margin: 0 -1rem; overflow: hidden; position: relative } /* The banner photo fills the box and is cropped to it. object-position keeps the equipment in * the upper middle on a wide screen and the middle of the picture on a phone, where the * box is nearly as tall as it is wide. */ .hero-banner { height: 100%; inset: 0; object-fit: cover; object-position: 50% 35%; position: absolute; width: 100% } /* Dark at the bottom, clear at the top, and darker on the left where the headline sits: the * content sits low and to the left, and this is what keeps white text legible over whatever * photo is behind it without dimming the whole picture. pointer-events: none so the overlay * cannot swallow a click meant for the buttons beneath it. */ .hero-overlay { background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.78) 100%), linear-gradient(to right, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,0) 85%); inset: 0; pointer-events: none; position: absolute } /* Content is inset by the container's own 1rem, NOT by the video's break-out, * so the copy lines up with the header above it while the picture runs wider. */ /* NO `gap` HERE ANY MORE. The tag now carries a `margin-bottom: 24px` of its * own, and a gap does not replace a margin -- it adds to it, which would have * made that supplied 24px silently 44px. Spacing between the three rows is * therefore each row's own margin, and the supplied number is the number. */ .hero-content { color: #fff; display: flex; flex-direction: column; inset: 0; justify-content: flex-end; padding: 2rem 1rem; position: absolute } .small-caps { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase } /* `align-self: flex-start` IS LOAD-BEARING, and it is the one declaration here * that was not in the supplied CSS. .hero-content is a column flex container, * so its children stretch to full width by default. That was invisible while * the tag was bare text; the moment it takes a background and a border it * becomes a chip, and without this it would be a chip the full width of the * hero. Shrinking to its contents is what makes it read as a pill. * * The padding and radius were not supplied either. A border with no padding * sits hard against the text, so they are chosen -- adjust freely; nothing * else depends on them. * * `backdrop-filter` is what makes the 6%-white fill read as frosted glass over * the video rather than as a flat grey wash. Where it is unsupported the chip * degrades to exactly that flat wash, which is legible, just less pretty. */ .hero-tag { align-items: center; align-self: flex-start; backdrop-filter: blur(8px); background-color: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; display: flex; gap: .5rem; margin-bottom: 24px; padding: .5rem .875rem } .hero-tag .live { animation: pulse 1.6s ease-in-out infinite; background: var(--fa-red); border-radius: 999px; flex: none; height: 7px; width: 7px } /* The keyframes were not supplied, only the animation shorthand naming them. * * TWO PROPERTIES, NOT ONE. An expanding ring alone is what this was, and it * reads as a halo rather than as a light: the dot itself never changed, so * nothing appeared to flash. Dimming the dot on the same beat is what makes it * look like something switching on and off, and the ring is then the glow * around it rather than the whole effect. * * Only `opacity` and `box-shadow` animate -- neither affects layout, so the * chip beside it never reflows on any frame. The ring ends on `transparent` * rather than a zero-alpha literal, so it fades out in whatever colour * --fa-red-glow happens to be. */ @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--fa-red-glow); opacity: 1 } 50% { box-shadow: 0 0 0 .4rem transparent; opacity: .45 } } /* Stopped rather than never started: the animation above is declared exactly as * supplied, and this turns it off only for a reader who has asked for less * motion. (The hero used to autoplay a video; it is a still photo now.) */ @media (prefers-reduced-motion: reduce) { .hero-tag .live { animation: none } } /* clamp() rather than a breakpoint: the headline is the one element here big * enough that a fixed size is wrong at both ends of the range. */ /* Wireframe integration: 52px at most, as in the wireframe, so the headline, lede and stats * fit the shorter hero. */ .hero-headline { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin: 0 0 1.5rem } /* THE SUPPLIED RULE IS ON THE , NOT ON THE WHOLE HEADLINE, and that is a * reading of the request rather than a transcription of it. Three things in * the supplied declaration only make sense for the inner word: `font-style: * italic` would otherwise italicise "Fire Tech" as well; `padding: 0 6px` is * the bleed a highlighter needs either side of a WORD; and the gradient's band * sits between 65% and 95% of the element's height, which is a marker stroke * through one line of text and would be a stripe across the whole block if it * spanned both lines. Move the selector up to `.hero-headline` if the stripe * across both lines is what was wanted. .highlight-red is the same stroke for * a phrase outside the hero (storefront/_problem). */ .hero-headline em, .highlight-red { background: linear-gradient(180deg, transparent 0%, transparent 65%, var(--ft-red) 65%, var(--ft-red) 95%, transparent 95%); font-style: italic; font-weight: 700; padding: 0 6px } .hero-foot { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between } /* THE BUTTONS ARE `.btn` FIRST. The markup pairs the harvested base class with * TI's single-dash `.btn-primary` / `.btn-ghost`, which are NOT this * application's `.btn--primary`. What the base brings that a hero does not * want is the 1rem bottom margin it uses in forms; the rest -- the pill * radius, the padding, the transition -- is wanted and left alone. */ /* Wireframe integration: the lede under the headline, at the hero's own 82% white. */ /* On a phone the lede wraps to five lines and the two buttons stack, so the hero * needs more height than the laptop's 24rem or the headline is pushed off the top. */ @media only screen and (max-width: 48em) { .hero-media { height: 33rem } } .hero-lede { color: rgba(255, 255, 255, .82); font-size: 1.0625rem; line-height: 1.55; margin: 0 0 1.5rem; max-width: 38rem } .hero-cta-row { display: flex; flex-wrap: wrap; gap: .75rem } .hero-cta-row .btn { align-items: center; display: inline-flex; gap: .5rem; margin: 0 } /* Transparent over the video, so its border and label are the only things * drawn. The hover fill is white at low alpha rather than a colour, so it * works over any frame. */ .hero-cta-row .btn-ghost { background-color: transparent; border-color: rgba(255, 255, 255, .65); color: #fff } .hero-cta-row .btn-ghost:active, .hero-cta-row .btn-ghost:focus, .hero-cta-row .btn-ghost:hover { background-color: rgba(255, 255, 255, .14); border-color: #fff; color: #fff } /* ========================================================================== * FEATURE 089 — DISCIPLINE PAGE HERO * * storefront/disciplines/show. Reuses the home page's .hero / .hero-media / * .hero-overlay / .hero-content / .hero-headline / .hero-lede above wholesale * rather than a second full-bleed mechanism: `.hero` as a direct child of *
is exactly what `main > :not(.hero)` (FEATURE 070, below) already * exempts from the content gutter, so nesting the discipline hero there is * what makes it full-bleed. Nothing new to break out of the column. * * .hero-lede here wraps the discipline's own intro partial (_fa/_wb/_fp, * still a plain
, unchanged) instead of replacing it, so that partial * stays the one place a discipline's words are edited (FR-004). * ========================================================================== */ /* image_slot (storefront_helper.rb) always wraps a photo in
, which carries its OWN box model (a 21/6 aspect-ratio, rounded * corners, a top margin) for every other caller of size: :banner (the Enroll * Now and Bundle It! popups, FR-011, untouched: they are not inside .hero-media). * Here the figure needs to fill .hero-media's own box instead, the same way * .hero-banner does on the home page -- so this is scoped to that one * ancestor, same trick as .popup__dialog > .media--banner above. */ .hero-media > .media--banner, .hero-media > .media--placeholder { aspect-ratio: auto; border-radius: 0; height: 100%; inset: 0; margin: 0; position: absolute; width: 100% } .discipline-hero .hero-lede p { margin: 0 } /* Three fixed badges, identical on every discipline page (FR-003): every * workshop's registration already includes these (.includes__item below), so * nothing here is a new, discipline-specific claim. Same frosted-glass pill * look as .hero-tag above, laid out as a wrapping row instead of one chip. */ .hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.25rem; padding: 0 } .hero-badges li { backdrop-filter: blur(8px); background-color: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; padding: .4rem .75rem; text-transform: uppercase } /* ========================================================================== * FEATURE 032 — TYPOGRAPHY (Montserrat) * * The harvested :root above has declared `--font: Montserrat` since feature * 029, but NOTHING EVER CONSUMED IT and no font was ever loaded, so every page * rendered in the user agent's default sans. On the TI site the family is * inherited from the document root, which is why it shows up in the computed * style of a nav link rather than on any rule of its own -- so it is applied * here at the root too, not on the bar. * * SELF-HOSTED, NOT fonts.googleapis.com. The public layout deliberately makes * no third-party request (see the og:image reasoning in * app/views/layouts/public.html.erb, which rejected an external URL because * its failure would be silent); a webfont link would reintroduce exactly that, * and on the one surface whose spec is careful about what it discloses to * whom. * * One VARIABLE face per subset, axis 100..900, so a single file serves both * the 400 of body copy and the 700 the event rows and the hero already ask * for -- no faux-bold synthesis, and fewer bytes than two static weights. Cyrillic and Vietnamese subsets are deliberately * not shipped: , and unicode-range means latin-ext is only * fetched if a page actually contains those glyphs. * ========================================================================== */ /* latin */ @font-face { font-family: Montserrat; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/montserrat-latin-9fa5e944.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: Montserrat; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/montserrat-latin-ext-9d7ec31b.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* A FALLBACK STACK, where the TI computed style carried a bare `var(--font)`. * `font-display: swap` means text paints in the fallback before the woff2 * arrives, so the stack is what visitors read on a cold cache rather than a * theoretical safety net -- a bare var() would drop them to an unpredictable * UA default for that moment. * * THE SECOND ARGUMENT TO var() IS LOAD-BEARING, and this is the subtle half of * the rule. `var(--font)` with no fallback is INVALID AT COMPUTED-VALUE TIME * the moment --font goes missing -- a re-harvest that replaces the :root block * above, a renamed token -- and an invalid font-family does not quietly fall * through to the next name in the list. The whole declaration is thrown away * and the property inherits from , landing on the user agent default and * stepping straight over the "Helvetica Neue", Helvetica, Arial, sans-serif * stack written right beside it. `var(--font, Montserrat)` keeps that stack * reachable, so the worst case is Helvetica rather than Times. */ body { font-family: var(--font, Montserrat), "Helvetica Neue", Helvetica, Arial, sans-serif } /* TEXT INFLATION OFF, at the root, which is where the TI computed style has it * and where normalize.css has put it for a decade. Mobile WebKit's default is * `auto`: it silently enlarges text in a narrow column so a page designed for * a desktop reads without zooming. That heuristic is helpful on an unstyled * page and harmful here, where the type sizes are deliberate and a nav row * scaled up on its own would break the header layout it belongs to. * * On `html` rather than on any one component: it is an inherited property, so * one declaration covers every element, and the alternative -- repeating it on * each element whose size happens to matter -- guarantees the next one added * is forgotten. The -webkit- prefix is the form Safari actually reads; * unprefixed is the standard the rest implement. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% } /* BORDER-BOX SIZING, which the TI computed style has and the harvest lost. * * This is not a preference. The whole grid above this fence is Foundation, and * Foundation is written against border-box: `.columns` is `width: 100%` with * `padding: 0 1rem`, and the 32 percentage widths that go with it all assume * the padding is drawn INSIDE the declared width. Under the content-box * default every one of those columns is its stated width plus 2rem, which is * how a grid that adds up to 100% ends up wrapping. The reset that made it * work is in Foundation's normalize layer, which is not part of what was * harvested into this file. * * WHAT IT ACTUALLY CHANGES TODAY: almost nothing, which is why it is safe to * add now rather than during a layout pass. box-sizing only matters on a box * with BOTH an explicit width or height AND padding or a border, and no such * box is currently rendered -- `.columns` appears in no view in this * repository, `.container` sets width but no padding, and every hand-written * component (.event, .schedule-filters) is auto-width * or a stretched flex item, where the used size is identical either way. * * IT IS LOAD-BEARING NOW, which it was not when first added. `.container` is * `width: 100%` and has since been given `padding: 1rem 1rem 0`; without this * reset that box is 32px wider than its parent and its side shadows are pushed * off both edges of the window. * * ::before and ::after are included because Foundation's clearfixes are * generated content that participates in layout. */ *, ::before, ::after { box-sizing: border-box } /* FORM CONTROLS DO NOT INHERIT TYPE, which is why the page was only mostly * Montserrat. `font-family` is an inherited property everywhere EXCEPT *