/* =====================================================================
RBC HUB HACKS 2026 — SHARED STYLESHEET (css/styles.css)
=====================================================================
WHAT THIS FILE DOES
Every page (index, register, challenges, submit, faq) loads this ONE
file. Change something here and it changes on every page at once.
HOW THIS FILE IS ORGANISED (search for the numbers to jump around)
1. FONTS ............ which typefaces the site uses
2. COLOURS .......... the RBC palette (blue, white, gold)
3. SIZES & SPACING .. corner roundness, shadows, page width
3b. ANIMATION CONTROL PANEL ... make animations faster, slower, or off
4. BASE ............. default look of text, links and headings
5. HEADER / MENU .... the blue bar at the top of every page
6. BUTTONS
7. HERO ............. the big blue banner at the top of each page
7b. HERO PHOTOS ..... last year's photos behind the blue banner
7c. LOGOS & BANNER .. RBC logo slot (header) and event banner slot (hero)
8. SECTIONS & CARDS
9. STEPS, CHECKLISTS, TIMELINE
10. CHALLENGE PAGE ... partner logos, PDF box
11. PLACEHOLDERS ..... the yellow striped "EDIT:" highlight
12. CALLOUTS, FAQ, TABLES
13. CALL-TO-ACTION BAND & FOOTER
14. ANIMATIONS ....... fade-in on scroll
15. LATEST UPDATES ... the announcements list on the home page
16. SMALL HELPERS
A 30-SECOND CSS CRASH COURSE
.card { color: red; }
^ ^ ^
| | +-- the value
| +--------- the property (what you're changing)
+------------------ the selector (which HTML elements this applies to)
".card" means every element with class="card"
- Anything between a slash-star and a star-slash is a comment (grey
text like this). The browser ignores it.
⚠ Never type a star followed by a slash inside a comment: it ends the
comment early and breaks the styles on the whole site. If the site
suddenly loses all its colours, check the last comment you edited.
- var(--rbc-blue) means "use the value stored in the --rbc-blue variable".
Variables are defined once in :root (sections 1–3) and reused everywhere,
which is why you should change colours/fonts THERE, not rule by rule.
- rem = size relative to the base text size (1rem ≈ 16px).
- After saving a change, refresh the browser (F5 / Cmd+R). If nothing
changes, do a hard refresh (Ctrl+Shift+R / Cmd+Shift+R) to clear the cache.
FREE PLACES TO LEARN (open in your browser)
- Beginner course, HTML + CSS, step by step (MDN, by Mozilla):
https://developer.mozilla.org/en-US/docs/Learn_web_development
- Short, simple CSS lessons with "Try it yourself" boxes (W3Schools):
https://www.w3schools.com/css/
- CSS variables (the --something values used in this file):
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties
- CSS animations and transitions (what section 3b controls):
https://www.w3schools.com/css/css3_animations.asp
https://www.w3schools.com/css/css3_transitions.asp
- A full free course with exercises (web.dev by Google): https://web.dev/learn/css
- Pick colour codes: https://htmlcolorcodes.com
- Pick fonts: https://fonts.google.com
===================================================================== */
/* =====================================================================
1. FONTS
=====================================================================
The site uses one free Google Font, "Public Sans", for everything.
It's the supporting typeface in RBC's own brand identity, so the site
reads as RBC rather than a generic template. Headings use its heavy
weights (800) with tight spacing; body text uses the regular weights.
The @import line below downloads them. It MUST stay the very first
rule in this file (comments above it are fine).
── HOW TO CHANGE TO A DIFFERENT GOOGLE FONT ──
1. Go to https://fonts.google.com, pick a font (e.g. "Roboto"),
click "Get font" → "Get embed code" → choose "@import".
2. Copy the URL inside url(...) and paste it over the URL below.
You can load two fonts in one URL — Google shows you how.
3. Scroll down to --font-display and --font-body (in :root) and
replace the font names, keeping the fallbacks after the comma:
--font-body: "Roboto", system-ui, sans-serif;
── HOW TO USE AN OFFICIAL RBC BRAND FONT ──
RBC's corporate typeface is licensed, not on Google Fonts. If your
RBC contact gives you the font files (.woff2 is best):
1. Put them in the assets/fonts/ folder (create it).
2. Delete or comment out the @import line below.
3. Remove the comment marks around the @font-face block below and
change the name and file names to match your files.
4. Set --font-body / --font-display to that name.
Only do this if RBC confirms you're allowed to host the font publicly.
── HOW TO USE NO WEB FONT AT ALL (fastest loading) ──
Delete the @import line. The fallbacks (system-ui, Arial…) take over
automatically and the site uses each computer's built-in font.
--------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap");
/*
@font-face {
font-family: "RBC Brand"; ← any name you like
src: url("../assets/fonts/rbc-regular.woff2") format("woff2");
font-weight: 400; ← normal weight
font-display: swap;
}
@font-face {
font-family: "RBC Brand";
src: url("../assets/fonts/rbc-bold.woff2") format("woff2");
font-weight: 700; ← bold weight
font-display: swap;
}
*/
/* =====================================================================
2. COLOURS — ★ THE ONLY PLACE YOU NEED TO CHANGE COLOURS ★
=====================================================================
The site is built on 3 brand colours + white. Everything else on the
site (buttons, headings, links, backgrounds, borders) points back to
these variables, so changing one line here re-colours the whole site.
Colours are written as HEX codes: # followed by 6 characters.
Get exact codes from RBC's brand guidelines / your RBC contact.
The values below are the commonly used RBC blue and yellow-gold —
please confirm them with RBC's brand team before launch.
Tip: to try a colour quickly, open the site in Chrome, press F12,
click in the Elements panel, and edit the variable in the
Styles panel on the right. When you like it, copy the value here.
--------------------------------------------------------------------- */
:root {
/* ---- 2a. BRAND COLOURS (edit these) ---- */
--rbc-blue: #005daa; /* main RBC blue: buttons, links, icons, kickers */
--rbc-blue-dark: #003a7a; /* darker blue: button hover, gradients */
--rbc-blue-deep: #002b5c; /* deepest blue: header bar, hero, footer, body text */
--rbc-gold: #ffd200; /* RBC gold/yellow: main buttons, highlights, dots */
--rbc-gold-light: #ffe14d; /* lighter gold: gold button hover */
--white: #ffffff;
/* ---- 2b. SUPPORTING TINTS (lighter/softer versions of the brand blue) ---- */
--text-main: var(--rbc-blue-deep); /* normal paragraph & heading text */
--text-soft: #3f5f86; /* grey-blue secondary text (descriptions) */
--page-bg: var(--white); /* page background */
--section-tint:#f0f6fc; /* very pale blue for alternating sections */
--card-bg: var(--white); /* background of cards/boxes */
--border: #d6e3f2; /* thin lines around cards and tables */
/* ---- 2c. WHICH COLOUR GOES WHERE (change these to re-assign roles) ----
Example: want the main buttons blue instead of gold? Set
--button-main-bg: var(--rbc-blue); and --button-main-text: var(--white); */
--header-bg: var(--rbc-blue-deep);
--hero-bg-top: var(--rbc-blue-deep);
--hero-bg-bottom: var(--rbc-blue-dark);
--hero-glow: var(--rbc-blue); /* the soft glow in the top-right of the hero */
--accent: var(--rbc-gold); /* "2026", timeline dots, active menu item */
--link: var(--rbc-blue);
--button-main-bg: var(--rbc-gold);
--button-main-text: var(--rbc-blue-deep);
--button-alt-bg: var(--rbc-blue);
--button-alt-text: var(--white);
--footer-bg: var(--rbc-blue-deep);
/* =====================================================================
3. SIZES & SPACING
===================================================================== */
--radius: 18px; /* corner roundness of cards. 0 = square corners, 30px = very round */
--radius-sm: 10px; /* corner roundness of smaller boxes */
--shadow: 0 1px 2px rgb(0 43 92 / 0.06), 0 12px 32px -12px rgb(0 43 92 / 0.18);
/* card shadow. Set to "none" for a flat look */
--wrap: min(1120px, 100% - 2rem);
/* max width of the content column. Raise 1120px for a wider site */
/* Font names (see section 1 for how to change them) */
--font-display: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* headings */
--font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* body text */
/* =====================================================================
3b. ANIMATION CONTROL PANEL — ★ EVERY ANIMATION ON THE SITE IS SET HERE ★
=====================================================================
The site has these moving parts:
• Hero photo slideshow ... photos behind the blue banner fade & slowly zoom
• Fade-in on scroll ...... cards and sections fade up as you scroll down
• Hover lift ............. buttons and cards rise slightly under the mouse
• Blinking dot ........... the gold dot in "● Registration is open"
• FAQ plus sign .......... the + rotates into × when a question opens
• Countdown .............. ticks every second (always on; it's a clock)
── THE MASTER DIAL: --motion ──
1 = normal speed (default)
2 = everything twice as SLOW
0.5 = everything twice as FAST
0 = ALL ANIMATION OFF (slideshow stops on the first photo,
fade-ins and hover effects happen instantly)
Turn it back on by setting it to 1 again.
── FINE-TUNING ONE EFFECT ──
Change the individual values below. "s" = seconds, so 0.6s is just
over half a second. Bigger number = slower.
Visitors who have "reduce motion" switched on in their phone/computer
settings automatically get no animation (see section 4). Keep that.
--------------------------------------------------------------------- */
--motion: 1; /* MASTER DIAL — see above */
/* Hero photo slideshow (section 7b) */
--slide-interval: 6s; /* how long each photo stays on screen. 0s = no slideshow */
--slide-fade: 1.5s; /* how long the cross-fade between photos takes */
--slide-zoom: 1.08; /* slow zoom while a photo is showing. 1 = no zoom,
1.15 = stronger zoom */
--hero-photo-overlay: 72%; /* how much blue covers the photos. 100% = photos hidden,
60% = photos much clearer (text may get harder to read) */
/* Fade-in on scroll (section 14) */
--reveal-duration: 0.6s; /* how long each fade-in takes */
--reveal-distance: 16px; /* how far items slide up while fading in. 0px = fade only */
/* Hover effects (sections 6 and 8) */
--hover-duration: 0.2s; /* speed of the lift */
--hover-lift: 2px; /* how far buttons rise. 0px = no lift */
--card-hover-lift: 4px; /* how far clickable cards rise. 0px = no lift */
/* Blinking dot (section 7) */
--pulse-duration: 2s; /* one blink cycle */
}
/* =====================================================================
4. BASE — default look of the whole page
===================================================================== */
/* Makes width/height include padding & borders (prevents layout surprises) */
*, *::before, *::after { box-sizing: border-box; }
/* Smooth scrolling when clicking links like #partner-1 */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Respect visitors who turn off animations in their device settings (accessibility) */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 1.0625rem; /* base text size (≈17px). Change to 1rem for smaller text */
line-height: 1.65; /* space between lines of text */
color: var(--text-main);
background: var(--page-bg);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; } /* images never overflow their box */
a { color: var(--link); text-underline-offset: 3px; }
/* Headings. clamp(MIN, PREFERRED, MAX) = shrinks on phones, grows on big screens */
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 0.6em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7vw, 5.25rem); } /* page titles */
h2 { font-size: clamp(1.8rem, 4vw, 2.75rem); } /* section titles */
h3 { font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.3rem; } /* card & sub-titles */
p { margin: 0 0 1em; text-wrap: pretty; }
/* .wrap = the centred content column used inside every section */
.wrap { width: var(--wrap); margin-inline: auto; }
/* "Skip to content" link: hidden until a keyboard user presses Tab (accessibility) */
.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--rbc-gold); color: var(--rbc-blue-deep); padding: 0.5rem 1rem; border-radius: 8px; z-index: 100; }
.skip:focus { left: 0.5rem; }
/* Gold outline when navigating with the keyboard (accessibility — keep it) */
:focus-visible { outline: 3px solid var(--rbc-gold); outline-offset: 3px; border-radius: 4px; }
/* =====================================================================
5. HEADER / MENU — the bar at the top of every page
===================================================================== */
.site-header {
position: sticky; top: 0; z-index: 50; /* "sticky" keeps it at the top while scrolling.
Change to "relative" to let it scroll away. */
background: color-mix(in srgb, var(--header-bg) 92%, transparent); /* 92% = slightly see-through */
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
/* The "HH HubHacks 2026" logo area at top-left */
.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--white); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.brand-mark { /* the little gold "HH" square. To use an image logo instead, see the note in index.html */
display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
background: var(--rbc-gold); color: var(--rbc-blue-deep); font-size: 0.95rem;
}
.brand-logo { height: 36px; width: auto; } /* used only if you swap in an logo */
.brand small { color: var(--accent); font-weight: 600; }
/* Menu links */
.nav-links { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
display: block; padding: 0.5rem 0.85rem; border-radius: 999px;
color: rgb(255 255 255 / 0.8); text-decoration: none; font-weight: 500; font-size: 0.95rem;
}
.nav-links a:hover { color: var(--white); background: rgb(255 255 255 / 0.08); }
/* The page you're currently on (marked with aria-current="page" in the HTML) */
.nav-links a[aria-current="page"] { color: var(--rbc-blue-deep); background: var(--accent); }
/* "Menu" button — only visible on phones */
.nav-toggle { display: none; background: none; border: 1px solid rgb(255 255 255 / 0.2); color: var(--white); border-radius: 10px; padding: 0.45rem 0.7rem; font: inherit; cursor: pointer; }
/* On screens narrower than 1060px (phones, tablets), hide the links behind the Menu button */
@media (max-width: 1060px) {
.nav-toggle { display: block; }
.nav-links {
display: none; position: absolute; inset: 72px 0 auto 0; flex-direction: column;
background: var(--header-bg); padding: 0.75rem 1rem 1.25rem; border-bottom: 1px solid rgb(255 255 255 / 0.1);
}
/* When the Menu button is open (js/main.js sets aria-expanded="true"), show the links */
.site-header:has(.nav-toggle[aria-expanded="true"]) .nav-links { display: flex; }
}
/* =====================================================================
6. BUTTONS
In HTML: Text
.btn-primary → gold button (main action)
.btn-ghost → outlined button, for use on the blue hero
.btn-dark → solid blue button, for use on white backgrounds
Wrap several buttons in
to line them up.
===================================================================== */
.btn {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.85rem 1.4rem; border-radius: 999px; /* 999px = pill shape. Use 8px for squarer buttons */
font-weight: 600; text-decoration: none;
border: 2px solid transparent;
transition: transform calc(var(--hover-duration) * var(--motion)) ease, background calc(var(--hover-duration) * var(--motion)) ease;
}
.btn:hover { transform: translateY(calc(var(--hover-lift) * -1)); } /* lift on hover — size set by --hover-lift (3b) */
.btn-primary { background: var(--button-main-bg); color: var(--button-main-text); }
.btn-primary:hover { background: var(--rbc-gold-light); }
.btn-ghost { color: var(--white); border-color: rgb(255 255 255 / 0.35); }
.btn-ghost:hover { background: rgb(255 255 255 / 0.08); }
.btn-dark { background: var(--button-alt-bg); color: var(--button-alt-text); }
.btn-dark:hover { background: var(--rbc-blue-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* =====================================================================
7. HERO — the big blue banner at the top of each page
.hero → full-size version (home page)
.page-hero → add alongside .hero for the shorter version (other pages)
===================================================================== */
.hero {
position: relative; overflow: hidden; color: var(--white);
/* Three layers painted on top of each other: a blue glow, a faint gold glow,
and a top-to-bottom blue gradient. Remove the first two lines for a flat blue. */
background:
radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--hero-glow) 90%, transparent), transparent 60%),
radial-gradient(40rem 25rem at -10% 110%, rgb(255 210 0 / 0.16), transparent 60%),
linear-gradient(180deg, var(--hero-bg-top), var(--hero-bg-bottom));
padding-block: clamp(4rem, 12vw, 8rem) clamp(4rem, 10vw, 7rem); /* top & bottom space */
}
/* The faint grid pattern in the hero. Delete this whole rule to remove it. */
.hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
background-size: 48px 48px; /* size of each grid square */
mask-image: radial-gradient(ellipse at 60% 30%, #000 20%, transparent 70%);
z-index: 1; /* sits above the photos (section 7b) */
}
/* The hero's text and buttons sit on top of everything (photos = 0, grid = 1, text = 2) */
.hero > .wrap { position: relative; z-index: 2; }
/* The small pill label above the title, e.g. "● Registration is open" */
.eyebrow {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--accent); background: rgb(255 210 0 / 0.1); border: 1px solid rgb(255 210 0 / 0.3);
padding: 0.35rem 0.85rem; border-radius: 999px; margin-bottom: 1.5rem;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse calc(var(--pulse-duration) * var(--motion)) infinite; }
/* The blink itself: halfway through each cycle the dot is 30% visible. Speed: --pulse-duration (3b).
To stop ONLY this blink, delete animation: pulse calc(...) infinite; from the .dot rule above. */
@keyframes pulse { 50% { opacity: 0.3; } }
.hero h1 .accent { color: var(--accent); } /* the gold "2026" */
.hero .lead { font-size: clamp(1.1rem, 2vw, 1.3rem); color: rgb(255 255 255 / 0.85); max-width: 48ch; margin-bottom: 2rem; }
/* The row of facts under the hero: When / Where / Format / Submissions due */
.hero-meta { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgb(255 255 255 / 0.15); }
.hero-meta div { display: grid; }
.hero-meta span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(255 255 255 / 0.6); }
.hero-meta strong { font-family: var(--font-display); font-size: 1.15rem; }
/* Shorter hero for inner pages */
.page-hero { padding-block: clamp(3rem, 8vw, 5rem); }
.page-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.75rem); }
/* Countdown boxes (the numbers are filled in by js/main.js) */
.countdown { display: flex; gap: 0.75rem; margin-top: 2rem; }
.countdown div {
min-width: 78px; text-align: center; padding: 0.75rem 0.5rem; border-radius: 14px;
background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.15);
}
.countdown b { display: block; font-family: var(--font-display); font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown small { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(255 255 255 / 0.65); }
.countdown-label { margin: 2rem 0 0.75rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(255 255 255 / 0.7); }
.countdown-label + .countdown { margin-top: 0; }
/* =====================================================================
7b. HERO PHOTOS — pictures from last year behind the blue banner
=====================================================================
HOW IT WORKS
In index.html, inside the hero, there's a block:
...
• Each is one photo. The slideshow cross-fades between them.
• A blue layer is painted on top so the white text stays readable.
• One photo only? Keep one — it just stays still.
• No photos? Delete the whole hero-photos block — you get plain blue.
• A photo file that's missing is skipped automatically (no broken image).
CHANGE HOW IT LOOKS / MOVES → section 3b:
--slide-interval, --slide-fade, --slide-zoom, --hero-photo-overlay
CHANGE WHICH PART OF A PHOTO SHOWS → object-position below
(e.g. "center top" keeps people's heads in view on tall photos).
--------------------------------------------------------------------- */
.hero-photos { position: absolute; inset: 0; z-index: 0; }
.hero-photos img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; /* fill the banner, cropping edges if needed */
object-position: center; /* which part to keep when cropping: center, center top, left… */
opacity: 0;
transition:
opacity calc(var(--slide-fade) * var(--motion)) ease,
transform calc((var(--slide-interval) + var(--slide-fade)) * var(--motion)) linear;
}
/* The photo currently showing (js/main.js moves the "active" class along) */
.hero-photos img.active { opacity: 1; transform: scale(var(--slide-zoom)); }
/* If JavaScript is off, just show the first photo */
html:not(.js) .hero-photos img:first-child { opacity: 1; }
/* The blue layer on top of the photos. Strength: --hero-photo-overlay (3b). */
.hero-photos::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg,
color-mix(in srgb, var(--hero-bg-top) var(--hero-photo-overlay), transparent),
color-mix(in srgb, var(--hero-bg-bottom) var(--hero-photo-overlay), transparent));
}
/* Optional small photo credit in the bottom-right corner of the hero */
.hero-caption {
position: absolute; right: 1rem; bottom: 0.75rem; z-index: 2;
font-size: 0.75rem; color: rgb(255 255 255 / 0.65);
}
/* =====================================================================
7c. LOGOS & BANNER
=====================================================================
RBC LOGO SLOT (top-left of every page, next to "HubHacks 2026")
While it's a placeholder you'll see a dashed box saying "RBC logo".
To use the real logo: put the file in assets/ (e.g. assets/rbc-logo.svg)
and follow the note above the header in each .html file.
The dashed border disappears automatically once an is inside.
Logo height: change 42px in .logo-slot img below (and the tile height, 50px, just above it).
Don't want it? Delete the … from each page.
Use the official file from RBC and follow RBC brand guidelines
(clear space, no stretching, approved colours).
EVENT BANNER SLOT (home page hero, above the title)
For an official "RBC HubHacks 2026" banner/artwork image.
Width: change 560px in .hero-banner below.
--------------------------------------------------------------------- */
.logo-slot {
display: inline-grid; place-items: center; height: 36px; min-width: 64px; padding: 0 0.5rem;
border: 1.5px dashed rgb(255 255 255 / 0.45); border-radius: 8px;
color: rgb(255 255 255 / 0.75); font-size: 0.72rem; font-weight: 600; font-family: var(--font-body);
}
/* Real logo: sits on a small white tile so the blue lettering stays readable on the blue header */
.logo-slot:has(img) { border: 0; min-width: 0; background: var(--white); border-radius: 6px; padding: 4px 8px; height: 50px; }
.logo-slot img { height: 42px; width: auto; } /* ← logo height */
/* Thin line between the RBC logo and "HubHacks 2026" */
.brand-divider { width: 1px; height: 28px; background: rgb(255 255 255 / 0.25); }
/* On very narrow phones, hide the gold HH square to make room for the RBC logo */
@media (max-width: 420px) { .brand-mark { display: none; } }
.hero-banner {
width: min(100%, 560px); /* ← banner width */
aspect-ratio: 4 / 1; /* placeholder shape: 4 wide × 1 tall. Remove if using an */
display: grid; place-items: center; text-align: center; padding: 1rem;
margin-bottom: 1.75rem; border-radius: var(--radius-sm);
border: 1.5px dashed rgb(255 255 255 / 0.45); color: rgb(255 255 255 / 0.75); font-size: 0.9rem;
}
.hero-banner:has(img) { aspect-ratio: auto; border: 0; padding: 0; display: block; }
.hero-banner img { width: 100%; height: auto; border-radius: var(--radius-sm); }
/* =====================================================================
8. SECTIONS & CARDS
===================================================================== */
/* Every gets generous space above and below. Lower the numbers to tighten the page. */
section { padding-block: clamp(3.5rem, 8vw, 6rem); }
/* Sections linked with #name (e.g. #schedule) stop below the sticky header, not under it */
section[id] { scroll-margin-top: 70px; }
/* Section title block: small blue "kicker" label + big h2 + intro paragraph */
.section-head { max-width: 680px; margin-bottom: 2.5rem; }
.section-head p { color: var(--text-soft); font-size: 1.1rem; }
.kicker { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rbc-blue); margin-bottom: 0.75rem; }
/* Add class="alt" to a to give it the pale-blue background (alternating stripes) */
.alt { background: var(--section-tint); border-block: 1px solid var(--border); }
/* Grids — cards arrange themselves automatically into as many columns as fit.
.grid → cards at least 260px wide (usually 3–4 across on desktop)
.grid-2 → cards at least 420px wide (usually 2 across on desktop)
On phones both become a single column. */
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-2 { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
/* .grid-5 → add alongside .grid for five cards in one row on wide screens (home page "How it works") */
.grid.grid-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
/* White box with border and shadow */
.card {
background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
padding: 1.75rem; box-shadow: var(--shadow);
}
.card p:last-child { margin-bottom: 0; }
/* The small blue square icon at the top of a card */
/* Icons come from the free Phosphor icon set (phosphoricons.com, "fill"
style), loaded by a in the of pages that use them.
To change one, pick a new name on phosphoricons.com and swap the
"ph-..." class, e.g. . */
.card .icon {
width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.65rem;
background: var(--rbc-blue); color: var(--white); margin-bottom: 1.1rem;
box-shadow: 0 6px 16px -6px rgb(0 93 170 / 0.55);
}
.card .icon i { line-height: 1; }
/* Brand-coloured icon tiles on the submission page */
.card .icon.icon-github { background: #181717; box-shadow: 0 6px 16px -6px rgb(24 23 23 / 0.5); }
.card .icon.icon-powerpoint { background: #c43e1c; box-shadow: 0 6px 16px -6px rgb(196 62 28 / 0.5); }
/* Cards that are links () lift and get a blue border on hover */
a.card { color: inherit; text-decoration: none; transition: transform calc(var(--hover-duration) * var(--motion)) ease, border-color calc(var(--hover-duration) * var(--motion)) ease; }
a.card:hover { transform: translateY(calc(var(--card-hover-lift) * -1)); border-color: var(--rbc-blue); } /* lift size: --card-hover-lift (3b) */
.more { color: var(--rbc-blue); font-weight: 600; margin-top: 1rem; display: inline-block; }
/* Small label pills, e.g. "In person" / "Online" on the schedule */
.tag { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; margin-left: 0.4rem; vertical-align: middle; }
.tag-gold { background: var(--rbc-gold); color: var(--rbc-blue-deep); }
.tag-blue { background: color-mix(in srgb, var(--rbc-blue) 14%, transparent); color: var(--rbc-blue); }
/* =====================================================================
9. STEPS, CHECKLISTS, TIMELINE
===================================================================== */
/* Numbered steps:
...