/* Generated by TGM Framework 2.16.0 on save. Do not edit — regenerate from Appearance. */ @font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(https://remgradplugdev.wpenginepowered.com/wp-content/uploads/tgm-fonts/anton/anton-400-normal-latin.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;}@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url(https://remgradplugdev.wpenginepowered.com/wp-content/uploads/tgm-fonts/poppins/poppins-800-normal-latin.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;}:root{--tgm-primary:#18213A;--tgm-primary-rgb:24, 33, 58;--tgm-primary-contrast:#FFFFFF;--tgm-primary-hover:#343d56;--tgm-accent:#af2828;--tgm-accent-rgb:175, 40, 40;--tgm-accent-contrast:#FFFFFF;--tgm-accent-hover:#cb4444;--tgm-ink:#22262F;--tgm-ink-rgb:34, 38, 47;--tgm-ink-contrast:#FFFFFF;--tgm-ink-hover:#3e424b;--tgm-background:#FFFFFF;--tgm-background-rgb:255, 255, 255;--tgm-background-contrast:#1A1D24;--tgm-background-hover:#e3e3e3;--tgm-font-body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--tgm-font-body-weight:400;--tgm-line-body:1.6;--tgm-font-heading:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--tgm-font-heading-weight:700;--tgm-line-heading:1.2;--tgm-size-body:17px;--tgm-full-width-content:1100px;--tgm-content-width:1200px;--tgm-sidebar-width:300px;--tgm-header-width:1200px;--tgm-footer-width:1200px;--tgm-space-content-top:20px;--tgm-space-content-bottom:48px;--tgm-gap-side:24px;--tgm-space-section:40px;--tgm-gap:24px;--tgm-space-header:0px;--tgm-space-footer:40px;}@media (max-width: 1024px){:root{--tgm-size-body:16px;--tgm-space-content-top:40px;--tgm-space-content-bottom:40px;--tgm-space-section:32px;--tgm-space-footer:32px;}}@media (max-width: 767px){:root{--tgm-space-content-top:32px;--tgm-space-content-bottom:32px;--tgm-gap-side:16px;--tgm-space-section:24px;--tgm-space-footer:24px;}} /* Snippet: PROMO 01 Base */ /* ===== COPY FROM HERE ===== */ /* PROMO 01 · Base Paste into the CSS box. Leave JS and HTML boxes EMPTY — an empty HTML box is what makes this snippet ambient. Then set a display rule so it loads only on the promo page (collapsed under "Loads everywhere — add a condition"). THIS IS THE ONLY FILE THAT DEFINES A VALUE. Everything else references. Re-skinning for the next client is the :root block below and nothing else. */ :root{ /* --- client dials. Change these, change nothing else. --- */ --rg-red:#c8102e; /* Rembrandt red — CTA, accents */ --rg-ink:#17171b; /* brand ground */ --rg-display:"Anton",Impact,Haettenschweiler,sans-serif; /* the sizzle */ --rg-ui:"Poppins",system-ui,-apple-system,sans-serif; /* the receipt */ /* --- hero dials --- */ --rg-scrim:.10; /* black veil over the footage so type reads. MC, 2026-08-19: he wants the film BRIGHT and popping, so this came .34 -> .10. Measured first: across all 372 frames of the cut, the band the type sits in never has a pixel above 200, and the BRIGHTEST frame's 90th-percentile pixel is 147. White on 147 is 3.07:1 with NO scrim at all — already past the 3:1 bar for display type. The scrim was insurance, not necessity. --rg-shade now carries legibility. */ --rg-vig:.40; /* the vignette's end colour. NOTE it never gets there: the gradient is sized 120%/90%, so it is still mid-ramp at the frame edge. At .55 the real alpha was .244 in the corners and .000 where the type sits — it was never lighting the type, only shaping the corners. .40 lifts them. */ --rg-shade:.55; /* the shadow that hugs the LETTERFORMS. MC, 2026-08-19. This is NOT the bed/halo/pool/ plate that came out on 08-18 — those were shapes sitting BEHIND the text block, and a block has a soft rectangular edge the eye catches. This follows the glyph's own contour, so the only edge it adds is the edge of the letter itself. Set to 0 to remove it entirely. */ --rg-safe:7%; /* side margin the cards never cross */ --rg-drop:11%; /* how far the cards sit ABOVE the bottom edge. MC, 2026-08-19: centred type covered the students' faces, and faces are what the parent came to see. Raise this number to lift the cards, lower it to push them further down. */ --rg-size:13vw; /* tagline size. The ceiling is set by the longest word, "GRADUATING", on its own line. */ } /* NOTHING SITS BEHIND THE TYPE — STILL TRUE (Todd, 2026-08-18). No bed, no halo, no pool, no plate. All four were tried and all four were removed for the same reason: they are SHAPES BEHIND THE TEXT BLOCK, and a block has a soft rectangular edge the eye catches even when it cannot name it. That ruling stands and must not be undone. WHAT CHANGED 2026-08-19 (MC): he wants the film bright and popping, so the scrim came .34 -> .10 and legibility moved to --rg-shade, a shadow that traces each LETTERFORM. That is a different object from a bed. A bed has its own outline; a glyph shadow only ever has the outline of the glyph. MEASURED BEFORE CHANGING, across all 372 frames of the cut, inside the band the type actually occupies (x 7-93%, y 61-89%): brightest frame V8_f0300_t12.46s mean 89.5 p90 147 darkest frame V8_f0338_t14.04s mean 18.9 p90 30 pixels above 200 ZERO, on every frame White on that worst-case 147 is 3.07:1 with NO scrim at all, which already clears the 3:1 bar for display type. At --rg-scrim .10 it is 3.72:1, and with --rg-shade on top the type reads against its own halo at ~11:1. IF THE TYPE EVER GOES MUSHY over a bright shot, raise --rg-shade first — it costs no brightness anywhere except right at the letter. Raise --rg-scrim only if that is not enough, because it dims the whole picture and that is the thing MC asked to stop doing. Do not reintroduce a bed. TO REVERT wholesale: --rg-scrim .34, --rg-vig .55, --rg-shade 0. */ /* FONT MANIFEST — DO NOT DELETE. NOT SUPERSTITION. TGM_Theme_Fonts::css_families() scans snippet CSS and auto-downloads every family it recognises, but the source skips anything written as var(--…) and it never parses the `font:` shorthand — only `font-family:`. Both fonts above are reached ONLY through a token, so without these two literal declarations NEITHER FONT DOWNLOADS and the hero falls back to Impact and system-ui. Weight detection reads font-weight from the same block, which is why there is one family-and-weight per line. */ .rg-font-manifest-anton{font-family:"Anton";font-weight:400} .rg-font-manifest-poppins{font-family:"Poppins";font-weight:800} /* ===== TO HERE ===== */ /* Snippet: PROMO 02 Hero */ /* ===== COPY FROM HERE ===== */ /* PROMO 02 · Hero — the engine. CSS box. ***VERSION 2*** (2026-08-24) The JS goes in the JS box (promo-02-hero.js). Leave the HTML box EMPTY. V2 CHANGES ONE THING: the stage takes its height from ITS OWN WIDTH instead of from the viewport's. Nothing else in this file differs from v1. To revert: swap this file back to promo-02-hero.css (v1). If enqueued by URL, bump the ver arg too — ...promo-02-hero-v2.css?ver=2. THIS FILE IS CLIENT-AGNOSTIC AND SHOULD NEVER BE EDITED PER CLIENT. Copy it to the next client's site byte-identical. Everything that varies lives in PROMO 01 Base (tokens) or in the client's Hero HTML (content). */ /* NO height, padding or margin is set in this file. Vertical space is a WPBakery row setting, per row, where it can be seen and changed. Breaking this rule is what left every row on the CMC page ~280px taller than its content, and then magnified a cover background 2.16x chasing it. */ /* 16:9 OF ITSELF — NEVER OF THE WINDOW (v2, 2026-08-24, measured live). v1 set the height to 56.25vw: 56.25% of the WINDOW. That is only the right height when the stage is as wide as the window. On a page where the row is NOT stretched, the stage is narrower — on the RG home page it measured 1052px wide inside a 1100px content area — while the height stayed at 56.25vw of a 1280px window = 720px. A 1052x720 box (ratio 1.46) holding a 16:9 video means object-fit:cover fills it by slicing the sides off: ONLY 82.2% OF THE PICTURE WAS VISIBLE, ~9% gone from each edge. aspect-ratio derives the height from the stage's real width, so the box is 16:9 at ANY container width and cover has nothing left to crop. Measured after: 1052x592, ratio 1.778, 100% of the frame visible. The hero is 128px shorter, which lets the next row show above the fold — intended (Todd). The admin-bar rule is GONE, not edited: it existed only to subtract the admin bar from the 100vh cap, and there is no vh cap any more. Leaving it would have re-imposed a fixed height on logged-in views only — i.e. it would look unfixed to whoever is signed in and fixed to everyone else. TRADE-OFF, stated: v1 guaranteed the hero never exceeded the window height, and paid for it by cropping top/bottom on short windows. v2 never crops and gives up that guarantee. Both cannot be true at once. v1, for one-line revert: .rg-stage{position:relative;width:100%;height:min(56.25vw,100vh);overflow:hidden;background:#000} body.admin-bar .rg-stage{height:min(56.25vw,calc(100vh - 32px))} */ .rg-stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000} /* The WPBakery wrappers around the shortcode add 15px side padding, -15px row margins (the horizontal scrollbar) and a 35px bottom margin (part of the vertical scroll). Zeroed, scoped to the one row that carries the hero. */ .vc_row:has(.rg-stage){margin-left:0;margin-right:0} .vc_column-inner:has(.rg-stage){padding-left:0;padding-right:0} .wpb_text_column:has(.rg-stage){margin-bottom:0} .rg-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .rg-scrim{position:absolute;inset:0;z-index:1;pointer-events:none; background:rgba(0,0,0,var(--rg-scrim))} /* The vignette is sized 120% x 90%, so it is STILL MID-RAMP at the frame edge and never reaches its end colour. Measured off that geometry: alpha is .000 where the type sits, .11 at the type block's far corners, and peaks at .24 in the frame corners — at the old .55 end colour. It was never lighting the type. Tokenised 2026-08-19 so brightness is one dial in PROMO 01 Base instead of a hardcoded value in the client-agnostic file. */ .rg-vig{position:absolute;inset:0;z-index:2;pointer-events:none; background:radial-gradient(120% 90% at 50% 50%,transparent 45%,rgba(0,0,0,var(--rg-vig)))} /* ---- the cards ---- All six sit in the SAME PLACE. They are a series, not a scatter, and a fixed reading position is the kindest thing for a parent scanning a page. NO TEXT-SHADOW (MC) and NO BED (Todd), both 2026-08-18. Legibility comes from --rg-scrim and the vignette alone — see the note further down. */ /* ANCHORED TO THE BOTTOM, NOT CENTRED (MC, 2026-08-19). Centred type sat over the students' faces, and the faces are the thing the parent came to look at. Anchoring to the bottom edge — rather than nudging `top` down — also means the BIG WORD'S BASELINE LANDS IN THE SAME PLACE on every card regardless of how tall that card is. A centred two-line card and a centred logo sit at different heights; bottom-anchored, they do not. Bonus: it puts the type inside the vignette's darker edge, so contrast improves slightly for free. Distance is --rg-drop in PROMO 01 Base. */ .rg-tl{position:absolute;left:50%;bottom:var(--rg-drop);top:auto;z-index:5; width:calc(100% - var(--rg-safe)*2);text-align:center; transform:translate(-50%,0); font-family:var(--rg-display);font-weight:400;color:#fff; line-height:.88;letter-spacing:.01em;opacity:0; font-size:clamp(2.6rem,var(--rg-size),11rem); will-change:transform,opacity} /* TWO LINES, not one. The connective sits on its own line above so the payoff word gets the FULL width of the stage rather than sharing it — which is what makes the big word roughly twice the size it was on a single line. A literal 100% increase on one line does not fit: "NOW THEY'RE GRADUATING" would run about twice the width of the frame. */ .rg-sm{display:block;font-size:.34em;letter-spacing:.07em;opacity:.88; margin-bottom:.10em} /* The one word per card that does the thing the card says. Bottom-centre origin so weight presses into the baseline. */ .rg-w{display:inline-block;transform-origin:50% 100%;will-change:transform} /* NO BED, NO HALO, NO PLATE behind the type (Todd, 2026-08-18) — STILL TRUE. Anything localised as a SHAPE has a soft edge and the eye catches it. .rg-lit IS NOW LIVE (MC, 2026-08-19). It was left on the markup on 08-18 precisely so this decision could be changed without re-pasting the HTML box, and that is what it is now doing. A glyph shadow is not a bed: it traces the letterform, so the only outline it introduces is the letter's own. 🚨 THE UNITS ARE em AND MUST STAY em. font-size is clamp(2.6rem, 13vw, 11rem) — roughly a 4x range between a phone and a wide desktop. A shadow in px is a halo at one end and a hairline at the other. In em it is the same fraction of the letter at every size. .rg-sm re-declares it so the value RESOLVES AGAINST THE SMALL FONT SIZE. text-shadow inherits as a computed absolute length, so without this the .34em connective line would inherit the big word's shadow and wear a halo three times too heavy for it. */ .rg-lit{text-shadow: 0 0 .055em rgba(0,0,0,var(--rg-shade)), 0 .012em .028em rgba(0,0,0,calc(var(--rg-shade) * .76))} .rg-lit .rg-sm{text-shadow: 0 0 .055em rgba(0,0,0,var(--rg-shade)), 0 .012em .028em rgba(0,0,0,calc(var(--rg-shade) * .76))} /* The mark gets the SAME treatment, because it is white artwork on the same brightened picture and it loses contrast exactly as the type does. drop-shadow follows the SVG's own alpha channel, so it hugs the script and the tassel rather than boxing them — the plate ruling is untouched. */ .rg-lit .rg-logo{filter:drop-shadow(0 .010em .022em rgba(0,0,0,var(--rg-shade)))} /* ---- the logo card ---- NO PLATE and no bed. The RG mark is already a dark-ground colourway — white script, grey cap, gold tassel — so it sits straight on the picture. A plate would also break the tassel handoff, which only works if the mark is IN the picture rather than on a sign in front of it. */ #rgLogo{width:min(64%,760px)} .rg-logo{display:block;width:100%;height:auto;overflow:visible} /* The tassel hinges WHERE IT ACTUALLY ATTACHES to the cap on the final D — measured off the artwork at 492.7,13.9 in the 525x93 viewBox. Rotating about the centre would read as a spinning ornament, not a hung tassel. */ #rgTassel{transform-box:view-box;transform-origin:492.7px 13.9px; will-change:transform} /* Phones: the stage is short, so ease the ceiling down a touch. */ @media (max-width:600px){ .rg-tl{font-size:clamp(1.6rem,15vw,4rem)} #rgLogo{width:82%} } /* No-JS / reduced-motion fallback: show the copy as plain stacked lines rather than an empty video with invisible text over it. NOTE (v2): aspect-ratio:auto now actually works here. Under v1 the base rule's explicit height won regardless, so this fallback was still locked to 720px with 2rem of padding inside it. It is content-height now, as intended. */ .rg-stage.rg-nojs{aspect-ratio:auto;padding:2rem 0} .rg-stage.rg-nojs .rg-tl{opacity:1;position:relative;left:auto;top:auto; bottom:auto;transform:none;margin:.4em auto;font-size:clamp(1.2rem,3.4vw,2.2rem)} /* ===== TO HERE ===== */