/* ========================================================================== Greenhills — Mobile redesign overlay (PREVIEW) Loads AFTER styles.css. Fixes the overflow bug, strengthens the hero scrim, and adds depth. Three selectable skins via . Structural changes are scoped to mobile (<=680px) so desktop is untouched. ========================================================================== */ /* ---- SKIN PALETTES (override existing design tokens) --------------------- */ :root[data-skin="navy"]{ --navy-950:#0a1f3a; --navy-900:#0c2748; --navy-850:#123056; --blue-700:#c39a4e; /* kickers -> gold */ --accent:#1f7a46; --accent-soft:#d8b465; --accent-hover:#155e35; --rd-scrim-a:.72; --rd-scrim-b:.30; --rd-scrim-c:.86; --rd-cta-shadow:0 12px 26px rgba(10,31,58,.28); } :root[data-skin="fresh"]{ --navy-950:#0f2e2a; --navy-900:#0f3a34; --navy-850:#0d9488; --blue-700:#0d9488; /* kickers -> teal */ --accent:#16a34a; --accent-soft:#5eead4; --accent-hover:#15803d; --rd-scrim-a:.60; --rd-scrim-b:.22; --rd-scrim-c:.80; --rd-cta-shadow:0 12px 26px rgba(22,163,74,.34); } :root[data-skin="royal"]{ --navy-950:#122a63; --navy-900:#16327a; --navy-850:#1d4ed8; --blue-700:#b45309; /* kickers -> gold-bronze */ --accent:#1d4ed8; --accent-soft:#f7c948; --accent-hover:#1e40af; --rd-scrim-a:.70; --rd-scrim-b:.30; --rd-scrim-c:.85; --rd-cta-shadow:0 12px 26px rgba(29,78,216,.34); } /* Production default = Navy Prestige (applies with no data-skin attribute). The [data-skin] blocks above remain for the /preview switcher only. */ :root{ --navy-950:#0a1f3a; --navy-900:#0c2748; --navy-850:#123056; --blue-700:#c39a4e; /* kickers -> gold */ --accent:#1f7a46; --accent-soft:#d8b465; --accent-hover:#155e35; --rd-scrim-a:.72; --rd-scrim-b:.30; --rd-scrim-c:.86; --rd-cta-shadow:0 12px 26px rgba(10,31,58,.28); } /* Brand logo treatment lives in styles.css now (applies to every page). */ /* ---- GLOBAL: kill horizontal overflow (the root cause of left-clipping) --- */ html,body{max-width:100%;overflow-x:hidden} .hero h1,.page-hero h1{overflow-wrap:break-word;word-break:normal;text-wrap:balance} /* ---- Stronger, even hero scrim (keeps the video, fixes readability) ------ */ .hero-shade{ background: linear-gradient(180deg, rgba(6,18,32,var(--rd-scrim-a)), rgba(6,18,32,var(--rd-scrim-b)) 46%, rgba(6,18,32,var(--rd-scrim-c))), radial-gradient(120% 70% at 50% 22%, rgba(0,0,0,.18), transparent 68%) !important; } /* ---- Reusable elevation for the CTA buttons across all skins ------------- */ .primary-button{box-shadow:var(--rd-cta-shadow) !important} .primary-button:hover{box-shadow:var(--rd-cta-shadow) !important} /* ================= MOBILE-SCOPED STRUCTURE (<=680px) ===================== */ @media (max-width:680px){ /* Hero: safe sizing + rhythm */ .hero{padding:6.4rem 1.25rem 4.6rem !important} .hero h1{ font-size:clamp(2.05rem,8.6vw,2.9rem) !important; line-height:1.1 !important;letter-spacing:-.01em;font-weight:700; text-shadow:0 2px 22px rgba(0,0,0,.35);margin-bottom:.15rem} .hero-copy{font-size:1rem !important;line-height:1.6 !important; color:rgba(255,255,255,.92) !important;max-width:34ch;margin-left:auto;margin-right:auto} .hero-actions{gap:.7rem !important;margin-top:1.6rem} .hero-actions a{width:100%;min-height:52px;border-radius:14px !important;font-size:1rem} .light-button{background:rgba(255,255,255,.12) !important;color:#fff !important; border:1px solid rgba(255,255,255,.42) !important;backdrop-filter:blur(6px)} /* Trust strip: flat row -> elevated cards */ .trust-strip{ grid-template-columns:1fr 1fr !important;gap:.7rem !important;background:transparent !important; box-shadow:none !important;border-radius:0 !important;margin-top:-2.6rem !important; width:calc(100% - 2rem) !important;padding:0} .trust-strip .stat{ background:var(--warm-white) !important;border:1px solid var(--line); border-radius:16px !important;padding:1rem 1.05rem !important; box-shadow:0 6px 16px rgba(8,27,49,.09),0 2px 6px rgba(8,27,49,.05); position:relative;overflow:hidden} .trust-strip .stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(var(--accent),var(--navy-850))} .stat strong{font-size:1.05rem !important;color:var(--navy-950)} .stat span{color:var(--muted) !important} /* Section rhythm + kickers */ .section{padding:2.9rem 1.25rem !important} .section-head{margin-bottom:1.4rem} .section-kicker{letter-spacing:.16em} /* Reason cards: plain -> elevated with accent rail + icon tile */ .reason-grid{gap:.85rem !important} .reason-grid article{ background:var(--warm-white);border:1px solid var(--line);border-radius:16px; padding:1.25rem !important;box-shadow:0 6px 16px rgba(8,27,49,.08),0 2px 6px rgba(8,27,49,.05); position:relative;overflow:hidden} .reason-grid article::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(var(--accent),var(--navy-850))} /* Journey cards + admissions CTA: lift + round */ .journey-card{border-radius:18px !important;box-shadow:0 10px 26px rgba(8,27,49,.12)} .admission-cta{ margin:1.6rem 1rem 1.4rem !important;border-radius:22px !important;padding:2.4rem 1.4rem !important; box-shadow:0 18px 40px rgba(6,22,37,.2) !important} /* Campus map/aerial: was tiny (~200px) on mobile — make it tall & immersive */ .campus-map-card{padding:.5rem !important} .campus-map-card img{height:min(62vh,420px) !important;max-height:none !important; object-fit:cover;object-position:center;border-radius:10px} /* Skin-specific hero personality */ :root[data-skin="fresh"] .hero h1{font-family:var(--font-ui) !important;font-weight:700;letter-spacing:-.02em} :root[data-skin="royal"] .primary-button{background:linear-gradient(180deg,#2a5fe6,var(--accent)) !important} }