/* ============================================================ โรงเรียนบัวใหญ่วิทยา — Stylesheet Fonts: Kanit (display) + Sarabun (body) Theme system via [data-theme] on ============================================================ */ /* ---------- Theme tokens ---------- */ :root { /* FRESH (default) — สดใส มีชีวิตชีวา */ --bg: #fbfcf6; --bg-alt: #f1f8ec; --surface: #ffffff; --ink: #16301d; --muted: #5c6f5f; --line: #e2ecdf; --primary: #1f9d4d; --primary-deep: #11622f; --primary-soft: #e4f6e6; --accent: #ffc61a; --accent-deep: #e8a400; --accent-soft: #fff4cf; --lime: #7ed957; --hero-1: #1f9d4d; --hero-2: #0f7a37; --hero-3: #156c33; --hero-glow: rgba(255, 210, 30, 0.5); --radius: 26px; --radius-sm: 16px; --radius-pill: 999px; --shadow-sm: 0 4px 16px rgba(20, 60, 30, 0.07); --shadow-md: 0 14px 40px rgba(20, 60, 30, 0.12); --shadow-lg: 0 30px 70px rgba(15, 80, 45, 0.20); --shadow-color: rgba(20, 70, 35, 0.16); --maxw: 1200px; --nav-h: 76px; --font-display: 'Kanit', system-ui, sans-serif; --font-body: 'Sarabun', system-ui, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } [data-theme="modern"] { --bg: #ffffff; --bg-alt: #f5f7f4; --surface: #ffffff; --ink: #18241c; --muted: #687468; --line: #e8ece8; --primary: #19854a; --primary-deep: #0d572f; --primary-soft: #ebf3ee; --accent: #d9a417; --accent-deep: #b9890c; --accent-soft: #f6efd8; --lime: #6fbf52; --hero-1: #14743f; --hero-2: #0c5530; --hero-3: #0a4528; --hero-glow: rgba(217, 164, 23, 0.30); --radius: 12px; --radius-sm: 8px; --shadow-sm: 0 2px 10px rgba(20, 40, 28, 0.05); --shadow-md: 0 8px 26px rgba(20, 40, 28, 0.08); --shadow-lg: 0 18px 48px rgba(15, 50, 35, 0.12); --shadow-color: rgba(20, 50, 30, 0.10); } [data-theme="premium"] { --bg: #f8f5ec; --bg-alt: #f0ead9; --surface: #fffdf7; --ink: #15271a; --muted: #6a6655; --line: #e6ddc7; --primary: #0f5e30; --primary-deep: #093d1f; --primary-soft: #e7eee2; --accent: #c79a3c; --accent-deep: #a87d23; --accent-soft: #f3e9cf; --lime: #8aa15a; --hero-1: #0c4a26; --hero-2: #07331a; --hero-3: #052413; --hero-glow: rgba(199, 154, 60, 0.40); --radius: 8px; --radius-sm: 5px; --shadow-sm: 0 4px 14px rgba(30, 25, 10, 0.08); --shadow-md: 0 16px 40px rgba(30, 25, 10, 0.14); --shadow-lg: 0 30px 70px rgba(30, 25, 10, 0.22); --shadow-color: rgba(40, 32, 12, 0.18); } /* ---------- Reset & base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.7; overflow-x: hidden; transition: background 0.5s var(--ease), color 0.5s var(--ease); font-size: 17px; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.18; letter-spacing: -0.01em; } .serif { font-family: var(--font-display); } /* ---------- Layout helpers ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } section { position: relative; } .section-pad { padding: clamp(70px, 9vw, 130px) 0; } .bg-alt { background: var(--bg-alt); } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); padding: 7px 16px; border-radius: var(--radius-pill); background: var(--primary-soft); } .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); } .section-head h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); margin: 18px 0 14px; color: var(--ink); } .section-head h2 .hl { color: var(--primary); position: relative; } .section-head p { color: var(--muted); font-size: 1.12rem; max-width: 60ch; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; padding: 14px 28px; border-radius: var(--radius-pill); border: none; cursor: pointer; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s; position: relative; overflow: hidden; } .btn .ico { transition: transform 0.3s var(--ease); } .btn:hover .ico { transform: translateX(4px); } .btn-primary { background: var(--accent); color: #2a1c00; box-shadow: 0 10px 26px rgba(232, 164, 0, 0.35); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(232, 164, 0, 0.45); } .btn-ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1.5px solid rgba(255,255,255,0.5); backdrop-filter: blur(4px); } .btn-ghost:hover { background: rgba(255,255,255,0.22); transform: translateY(-3px); } .btn-solid { background: var(--primary); color: #fff; box-shadow: 0 10px 26px var(--shadow-color); } .btn-solid:hover { background: var(--primary-deep); transform: translateY(-3px); box-shadow: var(--shadow-md); } /* ---------- Scroll progress ---------- */ #progress { position: fixed; top: 0; left: 0; height: 4px; width: 0%; background: linear-gradient(90deg, var(--accent), var(--lime), var(--primary)); z-index: 200; transition: width 0.1s linear; } /* ---------- Navbar ---------- */ #nav { position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-h); z-index: 150; display: flex; align-items: center; transition: background 0.4s var(--ease), height 0.4s var(--ease), box-shadow 0.4s var(--ease), backdrop-filter 0.4s; } #nav .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; } #nav.scrolled { height: 64px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(14px); box-shadow: var(--shadow-sm); } .brand { display: flex; align-items: center; gap: 13px; } .brand img { width: 46px; height: 46px; transition: width 0.4s var(--ease), height 0.4s var(--ease); } #nav.scrolled .brand img { width: 40px; height: 40px; } .brand .bt { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; color: #fff; line-height: 1.05; transition: color 0.4s; } .brand .bs { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.04em; opacity: 0.85; } #nav.scrolled .brand .bt { color: var(--ink); } .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; } .nav-links a { font-family: var(--font-display); font-weight: 400; font-size: 0.96rem; color: #fff; padding: 9px 14px; border-radius: var(--radius-pill); transition: background 0.25s, color 0.25s; } #nav.scrolled .nav-links a { color: var(--ink); } .nav-links a:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); } .nav-cta { background: var(--accent) !important; color: #2a1c00 !important; font-weight: 500; } .nav-cta:hover { transform: translateY(-2px); } /* theme switch */ .theme-switch { display: flex; gap: 5px; padding: 5px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.15); backdrop-filter: blur(6px); } #nav.scrolled .theme-switch { background: var(--bg-alt); } .theme-switch button { border: none; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; padding: 0; position: relative; transition: transform 0.25s var(--ease); background: transparent; } .theme-switch button span { display: block; width: 18px; height: 18px; margin: auto; border-radius: 50%; border: 2px solid rgba(255,255,255,0.6); } .theme-switch button[data-t="fresh"] span { background: linear-gradient(135deg, #2eb24f, #ffd21e); } .theme-switch button[data-t="modern"] span { background: linear-gradient(135deg, #19854a, #d9a417); } .theme-switch button[data-t="premium"] span { background: linear-gradient(135deg, #0c4a26, #c79a3c); } .theme-switch button.active { transform: scale(1.18); } .theme-switch button.active span { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } /* hamburger */ .burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 160; } .burger span { width: 26px; height: 2.5px; background: #fff; border-radius: 3px; transition: 0.35s var(--ease); } #nav.scrolled .burger span { background: var(--ink); } .burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } .burger.open span { background: var(--ink) !important; } /* ---------- Hero ---------- */ #hero { min-height: 100svh; display: flex; align-items: center; position: relative; overflow: hidden; color: #fff; padding-top: var(--nav-h); background: linear-gradient(150deg, var(--hero-1) 0%, var(--hero-2) 55%, var(--hero-3) 100%); } .hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 72% 30%, var(--hero-glow), transparent 45%); } .hero-rays { position: absolute; top: -20%; right: -10%; width: 70vw; height: 70vw; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.06) 0deg 3deg, transparent 3deg 9deg); border-radius: 50%; opacity: 0.5; animation: spin 90s linear infinite; will-change: transform; } @keyframes spin { to { transform: rotate(360deg); } } .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items: center; width: 100%; position: relative; z-index: 3; } .hero-philo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 300; letter-spacing: 0.06em; font-size: 0.95rem; padding: 9px 20px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.25); margin-bottom: 26px; backdrop-filter: blur(4px); } .hero-philo b { font-weight: 600; color: var(--accent); } #hero h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); font-weight: 600; line-height: 1.04; margin-bottom: 22px; text-shadow: 0 6px 30px rgba(0,0,0,0.18); } #hero h1 .y { color: var(--accent); } .hero-sub { font-size: clamp(1.05rem, 1.8vw, 1.32rem); font-weight: 300; max-width: 52ch; opacity: 0.95; margin-bottom: 34px; } .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; } .hero-stats { display: flex; gap: 30px; margin-top: 46px; flex-wrap: wrap; } .hero-stats .st { } .hero-stats .num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--accent); line-height: 1; } .hero-stats .lab { font-size: 0.92rem; opacity: 0.88; margin-top: 4px; } /* hero logo medallion */ .hero-art { position: relative; display: flex; justify-content: center; align-items: center; } .medallion { position: relative; width: min(420px, 80%); aspect-ratio: 1; } .medallion .ring { position: absolute; inset: -6%; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.35); animation: spin 50s linear infinite; } .medallion .ring2 { inset: 4%; border-style: solid; border-color: rgba(255,255,255,0.12); animation: spin 70s linear infinite reverse; } .medallion img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.4)); position: relative; z-index: 2; } .medallion .halo { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, var(--hero-glow), transparent 65%); filter: blur(8px); } /* hero photo card (unused — kept for reference) */ .about-photo { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); display: block; } .portrait-photo { position: relative; z-index: 1; width: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); display: block; } .scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.78rem; letter-spacing: 0.1em; opacity: 0.8; } .scroll-cue .mouse { width: 24px; height: 38px; border: 2px solid rgba(255,255,255,0.7); border-radius: 14px; position: relative; } .scroll-cue .mouse::after { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 4px; height: 7px; background: #fff; border-radius: 3px; animation: wheel 1.6s var(--ease) infinite; } @keyframes wheel { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 12px); } } /* hero wave divider */ .wave-div { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; z-index: 4; } .wave-div svg { width: 100%; height: clamp(50px, 7vw, 110px); display: block; } .wave-div path { fill: var(--bg); } /* ---------- Floating decorations ---------- */ .floaties { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .floaty { position: absolute; opacity: 0.5; will-change: transform; } .floaty.leaf { width: 30px; height: 30px; border-radius: 0 100% 0 100%; background: var(--lime); opacity: 0.18; } .floaty.dot { border-radius: 50%; background: var(--accent); opacity: 0.25; } /* ---------- Stats band ---------- */ .statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .statcard { background: var(--surface); border-radius: var(--radius); padding: 32px 26px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .statcard:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); } .statcard .num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3rem); color: var(--primary); line-height: 1; } .statcard .num .suf { color: var(--accent-deep); } .statcard .lab { color: var(--muted); margin-top: 8px; font-size: 0.98rem; } /* ---------- About ---------- */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 70px); align-items: center; } .about-text p { color: var(--muted); margin-bottom: 16px; font-size: 1.08rem; } .about-text p strong { color: var(--ink); font-weight: 600; } .founder-chip { display: inline-flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 18px 12px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); } .founder-chip .av { width: 46px; height: 46px; border-radius: 50%; background: var(--primary-soft); display: grid; place-items: center; color: var(--primary); font-family: var(--font-display); font-weight: 600; } .founder-chip .ft { font-size: 0.8rem; color: var(--muted); } .founder-chip .fn { font-family: var(--font-display); font-weight: 500; color: var(--ink); } .about-media { position: relative; } .about-media .ph { aspect-ratio: 4/5; border-radius: var(--radius); } .about-media .badge { position: absolute; bottom: -24px; left: -24px; background: var(--primary); color: #fff; border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow-md); text-align: center; } .about-media .badge .big { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--accent); } .about-media .badge .sm { font-size: 0.85rem; opacity: 0.9; } /* ---------- Placeholder ---------- */ .ph { position: relative; width: 100%; background: repeating-linear-gradient(45deg, var(--primary-soft), var(--primary-soft) 11px, transparent 11px, transparent 22px), var(--bg-alt); border: 1.5px dashed color-mix(in srgb, var(--primary) 40%, transparent); border-radius: var(--radius-sm); display: grid; place-items: center; overflow: hidden; } .ph span { font-family: 'Sarabun', monospace; font-size: 0.82rem; color: var(--primary-deep); background: var(--surface); padding: 6px 14px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); letter-spacing: 0.02em; } /* ---------- Message from director ---------- */ .message-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(34px, 5vw, 64px); align-items: center; } .message-portrait { position: relative; } .message-portrait .ph { aspect-ratio: 3/4; border-radius: var(--radius); } .message-portrait .frame { position: absolute; inset: -14px; border: 2px solid var(--accent); border-radius: calc(var(--radius) + 10px); z-index: -1; } .message-body { position: relative; } .message-body .quote-mark { font-family: var(--font-display); font-size: 6rem; line-height: 0.5; color: var(--primary-soft); position: absolute; top: -10px; left: -8px; z-index: 0; } .message-body blockquote { position: relative; z-index: 1; font-size: 1.18rem; color: var(--ink); line-height: 1.85; } .message-body .sign { margin-top: 26px; display: flex; align-items: center; gap: 14px; } .message-body .sign .ln { width: 44px; height: 2px; background: var(--accent); } .message-body .sign .role { font-family: var(--font-display); font-weight: 500; } .message-body .sign .role small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--muted); } /* ---------- Vision / Mission / Philosophy cards ---------- */ .vmp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .vmp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 38px 32px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); } .vmp::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--primary), var(--lime)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); } .vmp:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); } .vmp:hover::before { transform: scaleX(1); } .vmp .ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); margin-bottom: 22px; transition: transform 0.45s var(--ease); } .vmp:hover .ic { transform: rotate(-8deg) scale(1.08); } .vmp .ic svg { width: 32px; height: 32px; } .vmp h3 { font-size: 1.5rem; margin-bottom: 12px; color: var(--ink); } .vmp p { color: var(--muted); font-size: 1.02rem; } .vmp.feature { background: linear-gradient(155deg, var(--primary), var(--primary-deep)); color: #fff; } .vmp.feature h3, .vmp.feature p { color: #fff; } .vmp.feature p { opacity: 0.92; } .vmp.feature .ic { background: rgba(255,255,255,0.18); color: var(--accent); } .vmp.feature::before { background: var(--accent); } /* ---------- Curriculum / subject groups ---------- */ .levels { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 48px; } .level-pill { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 12px 22px; box-shadow: var(--shadow-sm); font-family: var(--font-display); font-weight: 500; transition: transform 0.3s var(--ease), background 0.3s; } .level-pill:hover { transform: translateY(-4px); background: var(--primary-soft); } .level-pill .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.85rem; } .subj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .subj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 46px; } /* per-subject colors */ .subj.c-th { --c:#e0524d; --cd:#b8332f; } .subj.c-math { --c:#2f7ad6; --cd:#1c5aa8; } .subj.c-sci { --c:#17a2a6; --cd:#0c7a7d; } .subj.c-soc { --c:#ef9415; --cd:#c2710a; } .subj.c-pe { --c:#e0588f; --cd:#b9356c; } .subj.c-art { --c:#8b5cd6; --cd:#6a3eb5; } .subj.c-work { --c:#5d913f; --cd:#436b2c; } .subj.c-eng { --c:#5b63d6; --cd:#3d45b5; } .subj { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 30px 24px 26px; margin-top: 40px; position: relative; box-shadow: 0 8px 0 var(--c), 0 12px 26px color-mix(in srgb, var(--c) 28%, transparent); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .subj:hover { transform: translateY(-5px); box-shadow: 0 12px 0 var(--c), 0 22px 38px color-mix(in srgb, var(--c) 42%, transparent); } .subj .si { width: 62px; height: 62px; border-radius: 18px; color: #fff; display: grid; place-items: center; margin: -46px 0 18px; position: relative; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 90%, #fff), var(--cd)); box-shadow: 0 10px 20px color-mix(in srgb, var(--cd) 50%, transparent), inset 0 -3px 0 rgba(0,0,0,0.18), inset 0 2px 0 rgba(255,255,255,0.4); transform: rotate(-6deg); transition: transform 0.4s var(--ease); } .subj:hover .si { transform: rotate(0deg) translateY(-3px); } .subj .si svg { width: 30px; height: 30px; } .subj h4 { font-size: 1.14rem; margin-bottom: 6px; color: var(--cd); } .subj p { font-size: 0.9rem; color: var(--muted); } /* ---------- Staff / administrators ---------- */ .staff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; perspective: 1100px; } .staff-card { margin: 0; border-radius: var(--radius); overflow: hidden; position: relative; box-shadow: var(--shadow-md); transition: transform 0.45s var(--ease); background: var(--surface); will-change: transform; backface-visibility: hidden; transform: translateZ(0); } /* Pure-CSS hover — single composited transform, identical & smooth on every card. Selector specificity must beat .reveal.in { transform:none } which appears later. */ .staff-grid .staff-card:hover { transform: translateY(-14px) scale(1.05); z-index: 2; } .staff-card img { display: block; width: 100%; height: auto; } .staff { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); } .staff:hover { transform: translateY(-9px); box-shadow: var(--shadow-lg); } .staff .ph { aspect-ratio: 1/1; border-radius: 0; } .staff .info { padding: 20px 22px 26px; text-align: center; } .staff .info .role { font-size: 0.8rem; color: var(--accent-deep); font-family: var(--font-display); font-weight: 500; letter-spacing: 0.04em; } .staff .info h4 { font-size: 1.14rem; margin: 6px 0 2px; } .staff .info p { font-size: 0.88rem; color: var(--muted); } .staff.lead { grid-column: span 1; } /* ---------- News / Facebook feed ---------- */ .news-grid { display: grid; grid-template-columns: 1fr minmax(0, 480px); gap: clamp(28px, 4vw, 48px); align-items: stretch; } .news-intro { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: linear-gradient(165deg, var(--primary-soft), var(--surface) 70%); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(30px, 4vw, 50px); box-shadow: var(--shadow-sm); } .fb-chip { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 500; font-size: 0.86rem; color: var(--primary); background: var(--surface); padding: 8px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); } .fb-chip svg { width: 18px; height: 18px; } /* Facebook blue accents for the news intro box */ .news-intro .fb-chip { color: #1877f2; } .news-intro .news-points .ck { background: #1877f2; } .news-intro .btn-solid { background: #1877f2; box-shadow: 0 10px 26px rgba(24,119,242,0.32); } .news-intro .btn-solid:hover { background: #145dbf; box-shadow: 0 16px 34px rgba(24,119,242,0.4); } .news-h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 22px 0 12px; color: var(--ink); } .news-lead { color: var(--muted); font-size: 1.08rem; max-width: 42ch; } .news-points { list-style: none; display: grid; gap: 14px; margin: 28px 0 32px; } .news-points li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink); font-size: 1.02rem; line-height: 1.5; } .news-points .ck { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; margin-top: 1px; box-shadow: var(--shadow-sm); } .news-points .ck svg { width: 16px; height: 16px; } .news-feed { width: 100%; } .fb-card { position: relative; width: 100%; height: 100%; min-height: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 12px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; } .fb-card .fb-page { position: relative; z-index: 1; width: 100%; } .fb-card .fb-page span, .fb-card .fb-page iframe { width: 100% !important; } .fb-fallback { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 30px; } .fb-fallback p { color: var(--muted); font-size: 0.98rem; max-width: 28ch; } .fb-card.has-feed .fb-fallback { display: none; } /* ---------- Admissions CTA ---------- */ .admis { position: relative; overflow: hidden; border-radius: var(--radius); padding: clamp(44px, 6vw, 80px); background: linear-gradient(140deg, var(--primary), var(--primary-deep)); color: #fff; box-shadow: var(--shadow-lg); } .admis .admis-glow { position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, var(--hero-glow), transparent 50%); pointer-events: none; } .admis-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: center; position: relative; z-index: 2; } .admis h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 16px; } .admis h2 .y { color: var(--accent); } .admis p { opacity: 0.92; font-size: 1.1rem; margin-bottom: 28px; max-width: 50ch; } .admis-steps { display: grid; gap: 14px; } .admis-step { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-sm); padding: 16px 20px; backdrop-filter: blur(4px); transition: transform 0.3s var(--ease), background 0.3s; } .admis-step:hover { transform: translateX(6px); background: rgba(255,255,255,0.2); } .admis-step .sn { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #2a1c00; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; } .admis-step .stx { line-height: 1.45; } .admis-step .stx b { display: block; font-family: var(--font-display); font-weight: 500; margin-bottom: 2px; } .admis-step .stx small { display: block; opacity: 0.85; } /* ---------- Downloads ---------- */ .dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .dl { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px 24px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s; } .dl:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--primary); } .dl .di { flex: none; width: 50px; height: 50px; border-radius: 13px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; } .dl .di svg { width: 26px; height: 26px; } .dl .dt { flex: 1; } .dl .dt b { font-family: var(--font-display); font-weight: 500; display: block; } .dl .dt small { color: var(--muted); } .dl .arr { color: var(--muted); transition: transform 0.35s var(--ease), color 0.35s; } .dl:hover .arr { transform: translate(3px, -3px); color: var(--primary); } /* ---------- Contact / footer ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(34px, 5vw, 60px); align-items: stretch; } .contact-info { display: grid; gap: 18px; align-content: start; } .contact-row { display: flex; gap: 16px; align-items: flex-start; } .contact-row .ci { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; } .contact-row .ci svg { width: 24px; height: 24px; } .contact-row .ct b { font-family: var(--font-display); font-weight: 500; display: block; } .contact-row .ct span { color: var(--muted); } .map-ph { position: relative; border-radius: var(--radius); min-height: 340px; overflow: hidden; box-shadow: var(--shadow-md); display: block; } .map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(1.05); } .map-open { position: absolute; z-index: 2; right: 14px; bottom: 14px; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; background: var(--surface); color: var(--primary-deep); font-family: var(--font-display); font-weight: 500; font-size: 0.82rem; padding: 8px 14px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); } footer { background: var(--primary-deep); color: rgba(255,255,255,0.85); padding: 60px 0 28px; margin-top: clamp(70px, 9vw, 120px); position: relative; overflow: hidden; } .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; position: relative; z-index: 2; } .foot-brand { display: flex; gap: 16px; align-items: flex-start; } .foot-brand img { width: 60px; height: 60px; } .foot-brand .bt { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: #fff; } .foot-brand p { font-size: 0.95rem; opacity: 0.8; margin-top: 8px; max-width: 36ch; } .foot-col h4 { color: #fff; font-size: 1.05rem; margin-bottom: 16px; } .foot-col a { display: block; padding: 5px 0; opacity: 0.82; transition: opacity 0.25s, transform 0.25s; } .foot-col a:hover { opacity: 1; transform: translateX(4px); color: var(--accent); } .foot-bottom { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 44px; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.88rem; opacity: 0.75; position: relative; z-index: 2; } /* ---------- Reveal animations ---------- */ .reveal { opacity: 0; transform: translateY(38px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); will-change: transform, opacity; } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; } .reveal.d4 { transition-delay: 0.32s; } .reveal-l { opacity: 0; transform: translateX(-44px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); } .reveal-l.in { opacity: 1; transform: none; } .reveal-r { opacity: 0; transform: translateX(44px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); } .reveal-r.in { opacity: 1; transform: none; } .reveal-sc { opacity: 0; transform: scale(0.9); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal-sc.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-l, .reveal-r, .reveal-sc { opacity: 1 !important; transform: none !important; } .hero-rays, .medallion .ring, .floaty { animation: none !important; } html { scroll-behavior: auto; } } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .subj-grid, .staff-grid { grid-template-columns: repeat(2, 1fr); } .statband { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 880px) { .nav-links { position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); height: 100dvh; background: var(--surface); flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 90px 36px 36px; transform: translateX(110%); transition: transform 0.45s var(--ease); box-shadow: -20px 0 60px rgba(0,0,0,0.18); z-index: 155; } .nav-links.open { transform: none; } .nav-links a { color: var(--ink) !important; font-size: 1.25rem; width: 100%; } .nav-links .nav-cta { margin-top: 14px; } .burger { display: flex; } .nav-overlay { position: fixed; inset: 0; background: rgba(10,30,18,0.45); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.4s; z-index: 152; } .nav-overlay.show { opacity: 1; pointer-events: auto; } .hero-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; } #hero { min-height: auto; align-items: flex-start; padding-bottom: clamp(120px, 22vw, 180px); } #hero .wrap { padding-top: 32px; } .hero-stats { margin-top: 34px; } .scroll-cue { display: none; } .hero-philo, .hero-cta { justify-content: center; } .hero-cta { justify-content: center; } .hero-stats { justify-content: center; } .hero-art { order: -1; } .medallion { width: min(280px, 64%); } .about-grid, .message-wrap, .vmp-grid, .admis-grid, .contact-grid, .news-grid { grid-template-columns: 1fr; } .message-portrait { max-width: 340px; margin: 0 auto; } .foot-grid { grid-template-columns: 1fr; gap: 30px; } .theme-switch { display: none; } .theme-switch.mobile { display: flex; margin-top: 18px; background: var(--bg-alt); } } @media (max-width: 560px) { body { font-size: 16px; } .wrap { padding: 0 20px; } .subj-grid, .staff-grid, .statband, .dl-grid { grid-template-columns: 1fr; } .hero-stats { gap: 20px; } .about-media .badge { left: 50%; transform: translateX(-50%); bottom: -28px; } } /* theme-switch desktop default hidden state for mobile clone */ .theme-switch.mobile { display: none; }