/* ========================================================= BELAIR HILL JUNIOR SCHOOL GLOBAL WEBSITE STYLE FOUNDATION IMPORTANT: This file contains ONLY global website styles. Section-specific styling belongs to each component's own CSS file. Media is supplied by Supabase. No local image-folder styling or fallbacks are required. ========================================================= */ /* ========================================================= ROOT DESIGN TOKENS ========================================================= */ :root { /* PRIMARY TEAL */ --teal: #0797a6; --teal-dark: #05727e; --teal-deep: #045661; --teal-light: #e8f7f8; --teal-pale: #f1fbfb; /* TERRACOTTA */ --terracotta: #c95f43; --terracotta-dark: #a94a34; --terracotta-light: #f8e5de; /* PEACH */ --peach: #fff1e8; --peach-soft: #fff8f4; /* NEUTRALS */ --cream: #fffaf6; --white: #ffffff; --dark: #243238; --text: #39484d; --muted: #718087; --border: #e3e8e8; /* ACCENTS */ --gold: #d6a84f; --gold-light: #f1d995; /* LAYOUT */ --container: 1220px; /* CORNERS */ --radius: 10px; --radius-small: 6px; /* SHADOWS */ --shadow: 0 12px 35px rgba(48, 65, 68, 0.08); --shadow-large: 0 20px 55px rgba(48, 65, 68, 0.12); /* TRANSITIONS */ --transition: all .25s ease; } /* ========================================================= RESET ========================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--text); background: var(--white); line-height: 1.6; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; } button { cursor: pointer; } ul, ol { list-style: none; } figure { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } p { margin: 0; } /* ========================================================= GLOBAL LAYOUT ========================================================= */ .container { width: min( var(--container), 92% ); margin-inline: auto; } /* ========================================================= GLOBAL SECTION LABEL ========================================================= */ .section-label { margin-bottom: 13px; color: var(--terracotta); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } /* ========================================================= GLOBAL HEADINGS ========================================================= */ .section-heading h2 { letter-spacing: -.5px; } /* ========================================================= GLOBAL BUTTONS ========================================================= */ .btn { min-height: 51px; display: inline-flex; align-items: center; justify-content: center; padding: 0 23px; border: 0; border-radius: 5px; font-size: 13px; font-weight: 800; text-decoration: none; transition: var(--transition); } .btn-gold { background: var(--terracotta); color: var(--white); } .btn-gold:hover { background: var(--terracotta-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 12px 25px rgba(0, 0, 0, .18); } .btn-outline { border: 1px solid rgba(255, 255, 255, .75); background: transparent; color: var(--white); } .btn-outline:hover { background: var(--white); color: var(--teal-dark); } /* ========================================================= GLOBAL CARD HELPERS ========================================================= */ .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); } .shadow { box-shadow: var(--shadow); } .shadow-large { box-shadow: var(--shadow-large); } /* ========================================================= GLOBAL VISIBILITY ========================================================= */ [hidden] { display: none !important; } /* ========================================================= GLOBAL TRANSITIONS ========================================================= */ a, button { transition: var(--transition); } /* ========================================================= ACCESSIBILITY ========================================================= */ :focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; } /* ========================================================= TEXT SELECTION ========================================================= */ ::selection { background: var(--teal); color: var(--white); } /* ========================================================= MOBILE GLOBAL CONTAINER ========================================================= */ @media (max-width: 760px) { .container { width: min( var(--container), 90% ); } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .container { width: 92%; } }