/* ===================================================================== RAINBOW SCHOOL COMPLEX — THEME 2026 --------------------------------------------------------------------- This stylesheet is the NEW design layer for the whole website. It is loaded AFTER app.css on every page, so it intentionally "wins" over the older legacy styles and gives the entire site a single, clean, modern look. WHY A LAYER (and not a rewrite of every page)? The site has many pages (English + French). Re-theming through one shared stylesheet means every page is upgraded at once and stays consistent. You only ever edit colours, spacing and fonts here. DESIGN SYSTEM (the "60-30-10" rule the brief asked for): 60% Neutrals -> warm paper white + deep ink text (calm base) 30% Brand -> deep Rainbow blue (#0f5a89 family) for structure 10% Accent -> warm gold (#f1a005) for buttons + key highlights A thin rainbow hairline is used VERY sparingly as the school's signature motif (it echoes the "Rainbow" name without shouting). FONTS: Display / headings -> "Fraunces" (warm, trustworthy, editorial) Body / UI -> "Poppins" (friendly, very easy to read) HOW TO CUSTOMISE QUICKLY: - Change brand colours -> edit the :root variables below. - Change fonts -> edit --font-display / --font-body and the in each page's . ===================================================================== */ /* --------------------------------------------------------------------- 1. DESIGN TOKENS (single source of truth for colours, spacing, etc.) ------------------------------------------------------------------- */ :root{ /* --- 60% : neutral base --- */ --paper:#fbfaf7; /* page background (warm white) */ --paper-2:#f3f1ea; /* soft alternate section background */ --surface:#ffffff; /* cards, panels */ --ink:#15293a; /* main text (deep navy, softer than black) */ --ink-soft:#5a6b7b; /* secondary text / captions */ --line:#e7e3d8; /* hairline borders */ /* --- 30% : brand structural colour --- */ --brand:#0f5a89; /* primary Rainbow blue */ --brand-dark:#08324e; /* deep blue for dark sections / footer */ --brand-soft:#eaf2f8; /* very light blue wash */ /* --- 10% : accent (use sparingly for action + emphasis) --- */ --accent:#f1a005; /* warm gold — main call-to-action colour */ --accent-dark:#cf8600; /* gold hover */ /* --- per-school identity accents (used as small tags only) --- */ --primary-school:#129b4e; /* Kindergarten & Primary = green */ --ric:#c62828; /* Rainbow Integral College = red */ --boarding:#1f5dff; /* RAIBICOL boarding = blue */ /* --- the rainbow signature gradient (used as thin lines only) --- */ --rainbow:linear-gradient(90deg,#e23b3b,#f1a005,#129b4e,#0f5a89,#7b3ff2); /* --- typography --- */ --font-display:'Fraunces','Poppins',Georgia,serif; --font-body:'Poppins',system-ui,Arial,sans-serif; /* --- shape & depth --- */ --radius:18px; /* default rounded corner */ --radius-lg:26px; /* large cards / hero panels */ --radius-pill:999px; /* pills and buttons */ --shadow-sm:0 4px 14px rgba(12,40,64,.06); --shadow:0 18px 40px rgba(12,40,64,.10); --shadow-lg:0 34px 70px rgba(12,40,64,.16); /* --- layout rhythm --- */ --container:1180px; /* max content width */ --gap:24px; } /* --------------------------------------------------------------------- 2. GLOBAL RESET / BASE TYPOGRAPHY ------------------------------------------------------------------- */ html{scroll-behavior:smooth;} body{ font-family:var(--font-body); color:var(--ink); background:var(--paper); line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Headings use the warm display serif for a premium, schoolbook feel */ h1,h2,h3,h4,.section-title,.hero-content h1{ font-family:var(--font-display); color:var(--ink); letter-spacing:-.01em; font-weight:600; } /* Keep the legacy container but cap its width for a tidier grid */ .container{max-width:var(--container);} a{color:var(--brand);transition:color .2s ease,opacity .2s ease;} a:hover,a:focus{color:var(--brand-dark);} img{max-width:100%;height:auto;} /* Reusable thin rainbow divider (apply class .rainbow-rule to any element) */ .rainbow-rule{height:4px;border:0;border-radius:4px;background:var(--rainbow); width:64px;margin:18px 0;} /* --------------------------------------------------------------------- 3. SECTION RHYTHM + HEADINGS ------------------------------------------------------------------- */ .section{padding:92px 0;} .section-sm{padding:60px 0;} .bg-soft{background:var(--paper-2);} /* alternate band colour */ .bg-dark{background:linear-gradient(150deg,#072c44,#0f5a89);color:#fff;} .bg-brand-wash{background:var(--brand-soft);} /* "Eyebrow" = the little label above a heading. Gets a rainbow dot. */ .eyebrow{ display:inline-flex;align-items:center;gap:8px; padding:7px 14px;border-radius:var(--radius-pill); background:var(--surface);border:1px solid var(--line); color:var(--brand);font-family:var(--font-body); font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; box-shadow:var(--shadow-sm); } .eyebrow::before{content:"";width:9px;height:9px;border-radius:50%; background:var(--rainbow);} .section-title{ font-size:clamp(28px,3.6vw,46px); line-height:1.12;margin:18px 0 16px;font-weight:600; } .section-title.tight{max-width:18ch;} .section-copy{color:var(--ink-soft);max-width:780px;font-size:17px;} /* --------------------------------------------------------------------- 4. BUTTONS (gold = primary action; outline = secondary) ------------------------------------------------------------------- */ .btn-hero,.btn-pill,.nav-cta,.result-search button, .portal-form button,.btn-gold{ display:inline-flex;align-items:center;gap:10px; padding:14px 26px;border-radius:var(--radius-pill); background:var(--accent);color:#231600 !important;border:0; font-family:var(--font-body);font-weight:700;font-size:15px; text-decoration:none;cursor:pointer; box-shadow:0 12px 26px rgba(241,160,5,.30); transition:transform .18s ease,box-shadow .18s ease,background .18s ease; } .btn-hero:hover,.btn-pill:hover,.nav-cta:hover, .result-search button:hover,.portal-form button:hover,.btn-gold:hover{ background:var(--accent-dark);transform:translateY(-2px); box-shadow:0 18px 34px rgba(241,160,5,.38);color:#231600 !important; } /* Secondary / ghost button (used as the second hero action) */ .btn-secondary-hero,.btn-outline{ display:inline-flex;align-items:center;gap:10px; padding:13px 24px;border-radius:var(--radius-pill); background:rgba(255,255,255,.10);color:#fff !important; border:1.5px solid rgba(255,255,255,.6); font-weight:600;font-size:15px;text-decoration:none;cursor:pointer; transition:.2s ease;backdrop-filter:blur(4px); } .btn-secondary-hero:hover,.btn-outline:hover{ background:#fff;color:var(--brand-dark) !important;border-color:#fff; } /* Small inline link with arrow */ .link-arrow,.btn-link-inline{ display:inline-flex;align-items:center;gap:7px;font-weight:600; color:var(--brand);text-decoration:none; } .link-arrow:hover,.btn-link-inline:hover{gap:11px;color:var(--brand-dark);} .button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;} /* --------------------------------------------------------------------- 5. UTILITY BAR + NAVIGATION (clean, sticky, glassy) ------------------------------------------------------------------- */ .utility-bar{background:var(--brand-dark);color:#cfe2f1; padding:9px 0;font-size:13px;} .utility-bar a{color:#fff;font-weight:600;} .utility-links{display:flex;gap:14px;align-items:center;flex-wrap:wrap;} /* Top navigation bar */ .site-nav,.navbar.site-nav{ background:rgba(251,250,247,.88) !important; backdrop-filter:blur(12px); border:0;border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm); margin:0;border-radius:0;min-height:74px; } /* When the page is scrolled, enhance.js adds .nav-scrolled for a solid bar */ .site-nav.nav-scrolled{background:rgba(251,250,247,.98) !important;} .navbar-brand.brand{display:flex;align-items:center;gap:12px;height:auto; padding:14px 0;font-family:var(--font-display);font-weight:600; font-size:19px;color:var(--ink) !important;} .navbar-brand.brand img{height:42px;width:auto;} .site-nav .navbar-nav>li>a{ color:var(--ink) !important;font-weight:500;font-size:15px; padding:26px 14px;position:relative;background:transparent !important; } .site-nav .navbar-nav>li>a:hover{color:var(--brand) !important;} /* animated underline on hover */ .site-nav .navbar-nav>li>a::after{ content:"";position:absolute;left:14px;right:14px;bottom:18px;height:2px; background:var(--accent);transform:scaleX(0);transform-origin:left; transition:transform .25s ease;border-radius:2px; } .site-nav .navbar-nav>li>a:hover::after{transform:scaleX(1);} /* The "Start admission" call-to-action in the nav becomes a gold pill */ .site-nav .navbar-nav>li>a.nav-cta{ color:#231600 !important;margin:16px 6px;padding:11px 20px; } .site-nav .navbar-nav>li>a.nav-cta::after{display:none;} /* Language switcher pill */ .language-switcher a{border:1px solid var(--line);border-radius:var(--radius-pill); margin:18px 4px;padding:8px 14px !important;font-weight:700 !important;} /* Dropdown menu */ .site-nav .dropdown-menu{ border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow); padding:8px;margin-top:6px; } .site-nav .dropdown-menu>li>a{padding:10px 14px;border-radius:10px;font-weight:500;} .site-nav .dropdown-menu>li>a:hover{background:var(--brand-soft);color:var(--brand);} /* --------------------------------------------------------------------- 6. HERO (homepage carousel + inner-page heroes) ------------------------------------------------------------------- */ .hero{padding-top:74px;} .hero .carousel,.hero .carousel-inner,.hero .item,.hero-slide{min-height:90vh;} .hero-slide{ display:flex;align-items:center;color:#fff;position:relative;overflow:hidden; background-size:cover;background-position:center; } /* Darken the photo so white text is always readable (accessibility) */ .hero-slide::before{content:"";position:absolute;inset:0; background:linear-gradient(110deg,rgba(4,20,34,.86),rgba(8,50,78,.55) 55%,rgba(6,29,46,.35));} /* thin rainbow line along the very bottom of the hero */ .hero-slide::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px; background:var(--rainbow);opacity:.9;} .hero-content{position:relative;z-index:2;max-width:820px;padding:40px 0;} .hero-content h1{ color:#fff;font-size:clamp(34px,5vw,62px);line-height:1.05; margin:18px 0 16px;font-weight:600; text-shadow:0 2px 30px rgba(0,0,0,.25); } .hero-content p{font-size:18px;opacity:.96;max-width:660px;color:#eaf2f8;} .hero-badge{ display:inline-block;padding:8px 16px;border-radius:var(--radius-pill); background:rgba(255,255,255,.14);backdrop-filter:blur(8px); font-family:var(--font-body);font-size:12px;text-transform:uppercase; letter-spacing:.14em;font-weight:700;color:#fff; } .hero-admission-links{margin-top:18px;display:flex;gap:18px;flex-wrap:wrap;} .mini-cta{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);} /* Carousel arrows + dots, restyled to be subtle and modern */ .carousel-control{background:none !important;width:6%;opacity:.85;} .carousel-indicators li{width:10px;height:10px;border-color:#fff;margin:3px;} .carousel-indicators .active{background:var(--accent);border-color:var(--accent);} /* Inner-page hero (school pages etc.) */ .school-hero{ position:relative;color:#fff;padding:160px 0 80px; background:linear-gradient(150deg,var(--brand-dark),var(--brand));overflow:hidden; } .school-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px; background:var(--rainbow);} .school-hero h1{color:#fff;font-size:clamp(30px,4.4vw,52px);line-height:1.08;margin:16px 0;} .school-hero p{color:#dbe9f4;max-width:680px;font-size:18px;} /* --------------------------------------------------------------------- 7. MARQUEE (the moving motto strip under the hero) ------------------------------------------------------------------- */ .marquee-bar{background:var(--brand-dark);color:#fff;overflow:hidden;padding:14px 0;} .marquee-inner{display:flex;gap:48px;white-space:nowrap;animation:marquee 26s linear infinite;} .marquee-item{display:inline-flex;align-items:center;gap:12px;font-weight:600; letter-spacing:.02em;font-size:14px;opacity:.95;} .marquee-item .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);} @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* --------------------------------------------------------------------- 8. CARDS — grids, campus cards, stat cards, panels ------------------------------------------------------------------- */ .cards-grid,.about-blocks,.school-band,.contact-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);} .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);} .split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;} .result-strip,.year-grid,.campus-gallery-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);} .masonry,.home-faq-grid,.results-showcase{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);} /* Generic surface card look */ .stat-card,.panel,.testimonial-card,.result-card,.news-card,.faq-item, .campus-card,.gallery-card{ background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);box-shadow:var(--shadow-sm); } /* Campus (school) cards on the homepage */ .campus-card{overflow:hidden;cursor:pointer;display:flex;flex-direction:column; transition:transform .25s ease,box-shadow .25s ease;} .campus-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);} .campus-track{position:relative;height:230px;overflow:hidden;} .campus-track .frame{position:absolute;inset:0;background-size:cover; background-position:center;transition:opacity .6s ease,transform 6s ease;} .campus-track .frame.two{opacity:0;} .campus-card:hover .frame.one{opacity:0;} .campus-card:hover .frame.two{opacity:1;transform:scale(1.06);} .campus-copy{padding:24px;} .campus-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--brand);background:var(--brand-soft); padding:5px 12px;border-radius:var(--radius-pill);margin-bottom:10px;} .campus-copy h3{margin:6px 0 10px;font-size:21px;} .campus-copy p{color:var(--ink-soft);font-size:15px;} /* Stat cards (the "academic proof" numbers) */ .stat-card{padding:28px;text-align:left;} .stat-card h3{font-size:42px;color:var(--brand);margin:0 0 8px;line-height:1;} .stat-card p{color:var(--ink-soft);font-size:14px;margin:0;} /* Generic content panels */ .panel{padding:28px;} .panel h3{margin-top:0;font-size:20px;} .panel p{color:var(--ink-soft);} /* Feature lists with rainbow tick */ .feature-list{list-style:none;padding:0;margin:0;} .feature-list li{position:relative;padding-left:30px;margin-bottom:12px;color:var(--ink-soft);} .feature-list li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:14px; border-radius:50%;background:var(--rainbow);} .feature-list li strong{color:var(--ink);} /* About visual block */ .about-visual{border-radius:var(--radius-lg);min-height:420px;background-size:cover; background-position:center;position:relative;overflow:hidden;display:flex;align-items:flex-end;} .about-visual::before{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,50,78,0),rgba(8,50,78,.85));} .about-visual .visual-copy{position:relative;z-index:2;color:#fff;padding:28px;} .about-visual .visual-copy h3{color:#fff;} .about-visual .visual-copy p{margin:4px 0;font-size:14px;color:#eaf2f8;} /* Testimonials */ .testimonial-card{padding:28px;} .testimonial-card .avatar-photo{width:64px;height:64px;border-radius:50%;object-fit:cover; border:3px solid var(--brand-soft);margin-bottom:14px;} .testimonial-card .quote{font-family:var(--font-display);font-size:18px;color:var(--ink); line-height:1.5;} .testimonial-card .meta{color:var(--ink-soft);font-size:13px;margin-top:10px;} /* Result snapshot panels */ .result-card{padding:26px;} .result-card h3,.result-card h4{margin-top:0;color:var(--brand-dark);} .result-card ul{padding-left:18px;color:var(--ink-soft);} .result-snapshot{font-size:16px;} /* --------------------------------------------------------------------- 9. GALLERY CARDS + "VIEW PHOTOS" BUTTON ------------------------------------------------------------------- */ .gallery-card{overflow:hidden;display:flex;flex-direction:column; transition:transform .25s ease,box-shadow .25s ease;cursor:pointer;} .gallery-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);} .gallery-card img{width:100%;height:230px;object-fit:cover;display:block;} .gallery-card h3{margin:18px 22px 8px;font-size:19px;} .gallery-card p{margin:0 22px;color:var(--ink-soft);font-size:14px;} .gallery-card .btn-link-inline,.gallery-card .gallery-open-btn{margin:16px 22px 22px;} /* The auto-generated "View photos" button (added by JS) */ .gallery-open-btn{ align-self:flex-start;border:0;cursor:pointer; background:var(--brand);color:#fff;font-weight:600;font-size:14px; padding:10px 18px;border-radius:var(--radius-pill); display:inline-flex;align-items:center;gap:8px;transition:.2s ease; } .gallery-open-btn::after{content:"⤢";font-size:13px;} .gallery-open-btn:hover{background:var(--brand-dark);transform:translateY(-1px);} /* Text-only campus comparison cards (photos hidden until modal) */ .text-only-gallery-card{background:var(--surface);padding:28px;} .text-only-gallery-card .copy h3{margin-top:0;} /* Filter buttons on the gallery page */ .filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 8px;} .filter-btn{border:1px solid var(--line);background:var(--surface); color:var(--ink-soft);padding:9px 18px;border-radius:var(--radius-pill); font-weight:600;font-size:14px;cursor:pointer;transition:.2s ease;} .filter-btn:hover{border-color:var(--brand);color:var(--brand);} .filter-btn.active{background:var(--brand);color:#fff;border-color:var(--brand);} /* --------------------------------------------------------------------- 10. LIGHTBOX / MODAL GALLERY (images AND videos) ------------------------------------------------------------------- */ .modal-gallery{position:fixed;inset:0;z-index:1200;display:none; align-items:center;justify-content:center;padding:24px; background:rgba(6,22,36,.86);backdrop-filter:blur(6px);} .modal-gallery.open{display:flex;} /* Immersive viewer: the photo/video fills the popup; a compact caption sits beneath it; navigation is just the prev / next arrows + a small counter. */ .modal-card{background:transparent;border-radius:0; width:min(1300px,96vw);height:92vh;overflow:visible;padding:0; box-shadow:none;position:relative;display:flex;flex-direction:column;} .modal-close{position:absolute;top:-6px;right:-6px;width:46px;height:46px; border-radius:50%;border:0;background:rgba(255,255,255,.92);font-size:24px; cursor:pointer;line-height:1;color:var(--ink);transition:.2s ease;z-index:5; box-shadow:0 6px 18px rgba(0,0,0,.35);} .modal-close:hover{background:var(--accent);color:#fff;} /* grid holds the stage and grows to fill almost the whole popup */ .modal-grid{order:1;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;} .modal-stage{position:relative;flex:1 1 auto;min-height:60vh;width:100%;border-radius:var(--radius); overflow:hidden;background:transparent;display:flex;align-items:center;justify-content:center;} .modal-main-image,.modal-main-video{position:absolute;inset:0; width:100%;height:100%;object-fit:contain;display:block;border-radius:var(--radius);} .modal-main-video{background:#000;} .modal-nav{position:absolute;top:50%;transform:translateY(-50%); width:56px;height:56px;border-radius:50%;border:0;background:rgba(255,255,255,.92); font-size:30px;cursor:pointer;color:var(--brand-dark);z-index:4;transition:.2s ease; box-shadow:0 8px 22px rgba(0,0,0,.35);} .modal-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06);} .modal-prev{left:16px;}.modal-next{right:16px;} .modal-counter{position:absolute;bottom:14px;left:50%;transform:translateX(-50%); background:rgba(6,22,36,.7);color:#fff;font-size:13px;padding:5px 12px; border-radius:var(--radius-pill);z-index:4;} /* compact caption under the image */ .modal-title{order:2;margin:16px 0 2px;font-size:21px;color:#fff;text-align:center;} .modal-desc{order:3;margin:0 auto;max-width:780px;font-size:14px;text-align:center; color:rgba(255,255,255,.82);} /* thumbnail strip hidden for the clean immersive view (prev/next only) */ .modal-thumbs{display:none;} body.modal-open-locked{position:fixed;overflow:hidden;width:100%;} /* --------------------------------------------------------------------- 11. NEWS TICKER + NEWS CARDS ------------------------------------------------------------------- */ .news-ticker{display:flex;align-items:stretch;border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;background:var(--surface); box-shadow:var(--shadow-sm);} .ticker-label{background:var(--brand);color:#fff;font-weight:700;padding:18px 22px; display:flex;align-items:center;white-space:nowrap;} .ticker-content{overflow:hidden;flex:1;} .ticker-list{display:flex;flex-direction:column;} .ticker-item{display:flex;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);} .ticker-item:last-child{border-bottom:0;} .ticker-date{font-weight:700;color:var(--brand);white-space:nowrap;} .ticker-link{font-weight:600;color:var(--ink);} .news-card{overflow:hidden;display:flex;flex-direction:column;} .news-card img{width:100%;height:200px;object-fit:cover;} .news-card h3{margin:14px 22px 8px;font-size:19px;} .news-card p{margin:0 22px;color:var(--ink-soft);font-size:14px;} .news-card .btn-pill,.news-card .news-toggle{margin:16px 22px 22px;} .news-card .small-copy{margin:16px 22px 0;} /* --------------------------------------------------------------------- 12. FAQ ACCORDION ------------------------------------------------------------------- */ .faq-item{margin-bottom:14px;overflow:hidden;} .faq-question{width:100%;text-align:left;background:var(--surface);border:0; padding:20px 24px;font-family:var(--font-body);font-weight:600;font-size:16px; color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;} .faq-question::after{content:"+";font-size:24px;color:var(--brand);transition:.2s ease;} .faq-item.open .faq-question::after{content:"–";} .faq-item.open .faq-question{color:var(--brand);} .faq-answer{padding:0 24px;color:var(--ink-soft);overflow:hidden;max-height:0; transition:max-height .3s ease;} .faq-item.open .faq-answer{padding-bottom:20px;} /* --------------------------------------------------------------------- 13. CTA PANEL (the gold/brand call-to-action band) ------------------------------------------------------------------- */ .cta-panel{background:linear-gradient(150deg,var(--brand-dark),var(--brand)); color:#fff;border-radius:var(--radius-lg);padding:54px;text-align:center; position:relative;overflow:hidden;box-shadow:var(--shadow);} .cta-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:4px; background:var(--rainbow);} .cta-panel .section-title{color:#fff;} .cta-panel p{color:#dbe9f4;max-width:680px;margin:0 auto 18px;} .cta-panel .button-row{justify-content:center;} .cta-panel .btn-pill{background:var(--accent);} /* --------------------------------------------------------------------- 14. INTERNAL LINKS STRIP (auto-injected before the footer) ------------------------------------------------------------------- */ .internal-links-strip{background:var(--brand-soft);padding:46px 0;} .internal-links-strip .strip-inner{max-width:var(--container);margin:0 auto;padding:0 16px; display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:center;} .internal-links-strip h3{margin:0 0 6px;} .internal-links-strip .links{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .internal-links-strip .links a{background:var(--surface);border:1px solid var(--line); border-radius:12px;padding:12px 16px;font-weight:600;color:var(--ink);transition:.2s ease;} .internal-links-strip .links a:hover{border-color:var(--brand);color:var(--brand);transform:translateX(3px);} /* --------------------------------------------------------------------- 15. FOOTER ------------------------------------------------------------------- */ .site-footer{background:var(--brand-dark);color:#cfe2f1;padding:64px 0 26px;position:relative;} .site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--rainbow);} .site-footer h4,.site-footer h5{color:#fff;} .site-footer p{color:#b9d0e3;font-size:14px;} .footer-links{list-style:none;padding:0;margin:0;} .footer-links li{margin-bottom:10px;} .footer-links a{color:#cfe2f1;} .footer-links a:hover{color:#fff;} .social-icons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;} .social-icons a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.10); display:flex;align-items:center;justify-content:center;color:#fff;transition:.2s ease;} .social-icons a:hover{background:var(--accent);color:#231600;transform:translateY(-2px);} .social-icon-svg svg{width:18px;height:18px;fill:currentColor;} .footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:30px;padding-top:22px; text-align:center;} .footer-policy-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:8px;} .footer-policy-links a{color:#cfe2f1;} /* --------------------------------------------------------------------- 16. PARENT PORTAL (phone number + access code -> report card) ------------------------------------------------------------------- */ .portal-wrap{max-width:560px;margin:0 auto;} .portal-card{background:var(--surface);border:1px solid var(--line); border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:38px;position:relative;overflow:hidden;} .portal-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--rainbow);} .portal-steps{display:flex;gap:10px;margin-bottom:22px;} .portal-step{flex:1;text-align:center;font-size:13px;font-weight:600;color:var(--ink-soft); padding-bottom:10px;border-bottom:3px solid var(--line);} .portal-step.active{color:var(--brand);border-color:var(--accent);} .portal-form label{display:block;font-weight:600;margin-bottom:6px;font-size:14px;} .portal-form input{width:100%;padding:14px 16px;border:1.5px solid var(--line); border-radius:12px;font-family:var(--font-body);font-size:16px;margin-bottom:18px; background:var(--paper);transition:.2s ease;} .portal-form input:focus{outline:0;border-color:var(--brand);background:#fff; box-shadow:0 0 0 4px var(--brand-soft);} .portal-form button{width:100%;justify-content:center;} .portal-hint{font-size:13px;color:var(--ink-soft);margin-top:10px;text-align:center;} .portal-error{background:#fdecec;border:1px solid #f3c0c0;color:#a02626; border-radius:12px;padding:12px 16px;font-size:14px;margin-bottom:16px;display:none;} .portal-error.show{display:block;} /* The report-card result */ .report-card{background:var(--surface);border:1px solid var(--line); border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;margin-top:8px;} .report-head{background:linear-gradient(150deg,var(--brand-dark),var(--brand)); color:#fff;padding:26px 30px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;} .report-head h3{color:#fff;margin:0;font-size:24px;} .report-head .report-meta{font-size:14px;color:#dbe9f4;} .report-body{padding:26px 30px;} .report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px;} .report-metric{background:var(--paper-2);border-radius:14px;padding:16px;text-align:center;} .report-metric .label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);} .report-metric .value{font-size:24px;font-weight:700;color:var(--brand-dark);font-family:var(--font-display);} .report-status{display:inline-block;background:var(--primary-school);color:#fff; font-weight:700;padding:6px 16px;border-radius:var(--radius-pill);font-size:14px;} .report-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;} /* --------------------------------------------------------------------- 17. FLOATING WHATSAPP BUTTON (injected on every page by enhance.js) ------------------------------------------------------------------- */ .wa-float{ position:fixed;right:20px;bottom:22px;z-index:1100; width:60px;height:60px;border-radius:50%; background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center; box-shadow:0 14px 30px rgba(37,211,102,.45); text-decoration:none;transition:transform .2s ease,box-shadow .2s ease; animation:wa-pop .4s ease both; } .wa-float:hover{transform:scale(1.08);color:#fff;box-shadow:0 18px 38px rgba(37,211,102,.55);} .wa-float svg{width:32px;height:32px;fill:currentColor;} /* gentle attention pulse ring */ .wa-float::after{content:"";position:absolute;inset:0;border-radius:50%; border:2px solid #25D366;animation:wa-ring 2.4s ease-out infinite;} /* little label that shows on wider screens */ .wa-float .wa-label{position:absolute;right:72px;background:var(--ink);color:#fff; white-space:nowrap;font-size:13px;font-weight:600;padding:8px 14px;border-radius:var(--radius-pill); opacity:0;transform:translateX(8px);transition:.2s ease;pointer-events:none;box-shadow:var(--shadow-sm);} .wa-float:hover .wa-label{opacity:1;transform:translateX(0);} @keyframes wa-pop{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}} @keyframes wa-ring{0%{transform:scale(1);opacity:.6;}100%{transform:scale(1.7);opacity:0;}} /* --------------------------------------------------------------------- 18. SCROLL REVEAL (enhance.js adds .reveal then .is-visible) ------------------------------------------------------------------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;} .reveal.is-visible{opacity:1;transform:none;} /* --------------------------------------------------------------------- 19. RESPONSIVE — mobile first matters most for parents on phones ------------------------------------------------------------------- */ @media (max-width:991px){ .split{grid-template-columns:1fr;gap:30px;} .cards-grid,.about-blocks,.school-band,.contact-grid, .masonry,.home-faq-grid,.results-showcase{grid-template-columns:1fr 1fr;} .stat-grid{grid-template-columns:1fr 1fr;} .internal-links-strip .strip-inner{grid-template-columns:1fr;} /* Mobile navigation: turn the menu into a clean slide-down panel */ .site-nav .navbar-nav{margin:0;background:var(--surface);border-top:1px solid var(--line);} .site-nav .navbar-nav>li>a{padding:16px 18px;border-bottom:1px solid var(--line);} .site-nav .navbar-nav>li>a::after{display:none;} .navbar-toggle{border:1px solid var(--line);border-radius:10px;margin-top:18px;} .navbar-toggle .icon-bar{background:var(--brand);} } @media (max-width:640px){ .section{padding:64px 0;} .cards-grid,.about-blocks,.school-band,.contact-grid, .masonry,.home-faq-grid,.results-showcase,.stat-grid, .result-strip,.year-grid,.campus-gallery-grid,.report-grid{grid-template-columns:1fr;} .hero .carousel,.hero .carousel-inner,.hero .item,.hero-slide{min-height:82vh;} .cta-panel{padding:36px 24px;} .portal-card{padding:26px;} .wa-float{width:54px;height:54px;right:16px;bottom:16px;} .wa-float .wa-label{display:none;} /* hide label on small phones */ .report-head{flex-direction:column;} } /* --------------------------------------------------------------------- 20. LEADERSHIP ("A word from our founders & proprietors") + TEAM BRANCHES ------------------------------------------------------------------- */ .leadership-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);} .leader-card{display:flex;flex-direction:column;background:var(--surface); border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden; box-shadow:var(--shadow-sm);} .leader-photo{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--paper-2);} .leader-body{padding:26px 28px 30px;} .leader-role{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:#c62828;background:rgba(198,40,40,.08); padding:5px 12px;border-radius:var(--radius-pill);margin-bottom:12px;} .leader-name{font-family:var(--font-display);font-size:22px;margin:0 0 4px;color:var(--ink);} .leader-title{color:var(--ink-soft);font-size:14px;margin:0 0 14px;} .leader-quote{position:relative;color:var(--ink);font-size:15.5px;line-height:1.7;} .leader-quote::before{content:"\201C";font-family:var(--font-display);color:var(--accent); font-size:46px;line-height:0;position:absolute;top:14px;left:-6px;opacity:.5;} .leader-quote p{margin:0 0 12px;padding-left:18px;} .leader-sign{font-family:var(--font-display);font-style:italic;color:var(--brand-dark);padding-left:18px;} .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);} .team-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease;} .team-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);} .team-card img{width:100%;height:190px;object-fit:cover;display:block;} .team-card .team-body{padding:18px 20px 22px;} .team-card h3{margin:0 0 6px;font-size:18px;} .team-card p{margin:0;color:var(--ink-soft);font-size:14px;} @media(max-width:991px){ .leadership-grid{grid-template-columns:1fr;} .team-grid{grid-template-columns:1fr 1fr;} } @media(max-width:640px){ .team-grid{grid-template-columns:1fr;} }