/* OneCampus — www.onecampus.space — "bright school, modern" Content is visible without JS. Motion is added by JS (html.motion) and plays even when the OS has animations off (owner's choice); only scroll-linked movement is reduced there. No inline style attributes anywhere (strict CSP). */ :root { --ink: #1b1b3a; --ink-2: #4b4b6e; --ink-3: #7a7a99; --paper: #ffffff; --paper-blue: #f2f6ff; --rule: #dfe6f7; --margin: #ff8a8a; --indigo: #4f46e5; --indigo-2: #3d33c9; --indigo-soft: #e8e7ff; --yellow: #ffc93c; --yellow-2: #f5a800; --yellow-soft: #fff4d1; --board: #1f5145; --board-2: #173f36; --chalk: #f4f7f2; --coral: #ff6b6b; --coral-soft: #ffe3e3; --mint: #22b8a7; --mint-soft: #d9f6f2; --sky: #4cc9f0; --sky-soft: #dff5fd; --r-s: 10px; --r-m: 16px; --r-l: 26px; --wrap: 1200px; --head: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif; --body: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, sans-serif; --hand: "Caveat", "Comic Sans MS", cursive; --ease: cubic-bezier(.2, .8, .2, 1); --bounce: cubic-bezier(.34, 1.56, .64, 1); --shadow: 0 1px 0 rgba(27,27,58,.04), 0 18px 40px -18px rgba(27,27,58,.28); --shadow-lg: 0 2px 0 rgba(27,27,58,.04), 0 30px 70px -24px rgba(27,27,58,.35); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; color: inherit; } ::selection { background: var(--yellow); color: var(--ink); } :focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 8px; } h1, h2, h3, h4 { font-family: var(--head); margin: 0 0 .45em; line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; } h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); } h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); } h3 { font-size: 1.3rem; letter-spacing: -0.015em; line-height: 1.2; font-weight: 700; } p { margin: 0 0 1em; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; } .lede { font-size: clamp(1.08rem, 1.5vw, 1.22rem); color: var(--ink-2); max-width: 36em; } .hand { font-family: var(--hand); font-weight: 700; } .skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; } .skip:focus { left: 8px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* highlighter + pencil underline used inside headings */ .hl { --hlc: var(--yellow); background-image: linear-gradient(var(--hlc), var(--hlc)); background-repeat: no-repeat; background-size: 100% .4em; background-position: 0 86%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .1em; border-radius: .2em; } .hl.mint { --hlc: #9ff0e4; } .hl.sky { --hlc: #b6ecfb; } .hl.coral { --hlc: #ffc2c2; } .more { text-align: center; margin: 46px auto 0; font-size: 1.65rem; color: var(--indigo); max-width: 900px; line-height: 1.3; } .scribble { position: relative; display: inline-block; white-space: nowrap; } .scribble svg { position: absolute; left: -2%; width: 104%; bottom: -.22em; height: .4em; overflow: visible; } .scribble path { fill: none; stroke: var(--coral); stroke-width: 5; stroke-linecap: round; } /* ---------- Buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 14px; font-family: var(--head); font-weight: 700; font-size: 1.06rem; text-decoration: none; border: 2px solid var(--ink); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; white-space: nowrap; } .btn svg { width: 19px; height: 19px; transition: transform .25s var(--ease); } .btn:hover svg { transform: translateX(3px); } .btn-primary { background: var(--indigo); color: #fff; box-shadow: 4px 4px 0 var(--ink); } .btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); background: var(--indigo-2); } .btn-primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); } .btn-yellow { background: var(--yellow); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); } .btn-yellow:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } .btn-white { background: #fff; color: var(--ink); box-shadow: 4px 4px 0 var(--ink); } .btn-white:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } .btn-sm { min-height: 42px; padding: 0 18px; font-size: .95rem; border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); } .btn-sm:hover { box-shadow: 4px 4px 0 var(--ink); } /* ---------- Header ---------- */ .top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s, box-shadow .3s; } .top.scrolled { background: rgba(255, 255, 255, .88); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--rule); } .top .wrap { display: flex; align-items: center; gap: 26px; height: 76px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--head); font-weight: 800; font-size: 1.32rem; letter-spacing: -0.03em; } .brand img { width: 36px; height: 36px; border-radius: 10px; } .nav { display: flex; gap: 2px; margin-left: auto; } .nav a { padding: 8px 14px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .97rem; transition: background .2s, color .2s; } .nav a:hover { color: var(--ink); background: var(--paper-blue); } .top-cta { display: flex; gap: 10px; align-items: center; } .menu-btn { display: none; width: 46px; height: 46px; border-radius: 12px; border: 2px solid var(--ink); background: #fff; cursor: pointer; align-items: center; justify-content: center; } .menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 18px; height: 2.5px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .3s var(--ease), background .2s; } .menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; } .menu-btn span::before { top: -6px; } .menu-btn span::after { top: 6px; } .menu-open .menu-btn span { background: transparent; } .menu-open .menu-btn span::before { transform: translateY(6px) rotate(45deg); } .menu-open .menu-btn span::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 960px) { .nav { position: fixed; inset: 76px 0 auto 0; flex-direction: column; gap: 0; padding: 8px 22px 22px; background: #fff; box-shadow: 0 20px 40px -20px rgba(27,27,58,.3); transform: translateY(-10px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s var(--ease), visibility .25s; } .menu-open .nav { opacity: 1; transform: none; visibility: visible; } .nav a { padding: 15px 4px; border-radius: 0; border-bottom: 1px solid var(--rule); font-size: 1.08rem; color: var(--ink); } .menu-btn { display: inline-flex; } .top-cta { margin-left: auto; } .top-cta .btn-white { display: none; } .menu-open .top { background: #fff; } } /* ---------- Hero ---------- */ .hero { position: relative; padding: 128px 0 0; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #eef3ff 0%, #f7f9ff 55%, #ffffff 100%); } .hero::before { /* notebook grid paper */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(79,70,229,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79,70,229,.07) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 92%); mask-image: linear-gradient(180deg, #000 40%, transparent 92%); } .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; } .hero-copy { position: relative; padding-bottom: 40px; } .tag { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); font-weight: 600; font-size: .92rem; margin-bottom: 26px; box-shadow: 3px 3px 0 var(--ink); text-decoration: none; } .tag b { padding: 2px 10px; border-radius: 999px; background: var(--yellow); font-size: .8rem; font-weight: 800; } .hero h1 { margin-bottom: 22px; } .hero .lede { margin-bottom: 32px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-note { position: relative; margin: 18px 0 0 40%; display: flex; align-items: flex-end; gap: 4px; font-family: var(--hand); font-size: 1.55rem; color: var(--indigo); transform: rotate(-4deg); } .hero-note svg { width: 70px; height: 50px; } .hero-note path { fill: none; stroke: var(--indigo); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; font-size: .95rem; color: var(--ink-2); font-weight: 600; } .trust span { display: inline-flex; align-items: center; gap: 8px; } .trust i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-soft); color: var(--mint); } .trust i svg { width: 13px; height: 13px; } /* hero scene */ .scene { position: relative; height: 560px; } .board { position: absolute; left: 6%; right: 4%; top: 30px; height: 300px; border-radius: 18px; background: radial-gradient(120% 90% at 30% 20%, #2a6556, var(--board) 55%, var(--board-2)); border: 12px solid #b7794a; box-shadow: inset 0 0 0 2px rgba(0,0,0,.15), var(--shadow-lg); padding: 26px 30px; color: var(--chalk); font-family: var(--hand); overflow: hidden; } .board::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 10px; height: 8px; border-radius: 4px; background: #8a5a35; box-shadow: 0 -2px 0 rgba(0,0,0,.15) inset; } .board .date { font-size: 1.3rem; opacity: .75; } .board .line { display: block; font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.25; min-height: 1.25em; } .board .line.big { font-size: clamp(2rem, 3.4vw, 2.9rem); color: #fff6c9; } .board .chalk-pen { display: inline-block; width: 3px; height: .9em; background: #fff; vertical-align: -2px; margin-left: 3px; opacity: .8; } .duster { position: absolute; right: 40px; bottom: 16px; width: 64px; height: 22px; border-radius: 4px; background: linear-gradient(#5a3a2a 0 45%, #d9d4c9 45%); z-index: 2; } .card-float { position: absolute; z-index: 3; background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); padding: 14px 16px; } .att-card { left: 0; bottom: 70px; width: 250px; } .att-card h4, .rc-card h4, .fee-card h4 { font-family: var(--body); font-size: .82rem; letter-spacing: 0; font-weight: 700; color: var(--ink-3); margin: 0 0 8px; display: flex; justify-content: space-between; } .att-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .att-list li { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; } .att-list .box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--ink); display: grid; place-items: center; flex: none; background: var(--mint); color: #fff; } .att-list .box svg { width: 13px; height: 13px; } .att-list .box.ab { background: var(--coral); } .att-count { margin-top: 10px; font-family: var(--head); font-weight: 800; font-size: 1.15rem; } .att-count small { font-family: var(--body); font-weight: 600; font-size: .78rem; color: var(--ink-3); } .rc-card { right: 0; bottom: 120px; width: 220px; transform: rotate(3deg); } .rc-card .row { display: flex; justify-content: space-between; font-size: .88rem; padding: 4px 0; border-bottom: 1px dashed var(--rule); font-weight: 600; } .rc-card .row b { font-family: var(--head); } .stamp { position: absolute; right: -18px; top: -26px; width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--coral); color: var(--coral); display: grid; place-items: center; font-family: var(--head); font-weight: 800; font-size: 1.7rem; background: rgba(255,255,255,.92); transform: rotate(-14deg); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--coral); } .fee-card { left: 46%; bottom: 0; width: 210px; transform: rotate(-2deg); } .fee-card .amt { font-family: var(--head); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; } .fee-card .ok { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; color: var(--mint); background: var(--mint-soft); padding: 2px 8px; border-radius: 999px; } .fee-card .ok svg { width: 12px; height: 12px; } .bell { position: absolute; right: 2%; top: -14px; width: 74px; z-index: 4; transform-origin: 50% 8%; } .plane { position: absolute; left: -10px; top: 0; width: 64px; z-index: 4; } .pencil { position: absolute; left: 2%; top: 300px; width: 120px; z-index: 2; transform: rotate(-28deg); } /* road + bus + school */ .street { position: relative; height: 170px; margin-top: 10px; } .skyline { position: absolute; left: 0; right: 0; bottom: 34px; height: 130px; display: flex; align-items: flex-end; justify-content: center; gap: 60px; pointer-events: none; } .school { width: 300px; height: auto; } .tree { width: 70px; } .road { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: #3a3a5a; } .road::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 4px; background: repeating-linear-gradient(90deg, #ffd766 0 40px, transparent 40px 80px); } .road::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; background: #c9d2e8; } .bus { position: absolute; bottom: 22px; left: 50%; width: 230px; margin-left: -115px; z-index: 2; } .bus .wheel { transform-box: fill-box; transform-origin: center; } @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } .hero-copy { text-align: left; padding-bottom: 10px; } .hero-note { display: none; } .scene { height: 520px; max-width: 620px; margin: 0 auto; width: 100%; } } @media (max-width: 560px) { .hero { padding-top: 104px; } .scene { height: 470px; } .board { left: 0; right: 0; height: 250px; padding: 18px 20px; border-width: 9px; } .att-card { width: 200px; bottom: 60px; padding: 12px; } .att-list li:nth-child(n+4) { display: none; } .rc-card { width: 170px; bottom: 30px; } .stamp { width: 64px; height: 64px; font-size: 1.3rem; right: -10px; top: -22px; } .fee-card { display: none; } .pencil { display: none; } .bell { width: 56px; right: 4px; top: -20px; } .school { width: 220px; } .tree { width: 52px; } .skyline { gap: 24px; } .bus { width: 180px; margin-left: -90px; } } /* ---------- Marquee (sticky-note tabs) ---------- */ .strip-wrap { overflow: hidden; padding: 30px 0 10px; margin-top: 10px; } .strip { background: var(--ink); color: #fff; padding: 22px 0; overflow: hidden; transform: rotate(-1.2deg); margin: 0 -30px; box-shadow: 0 10px 30px -14px rgba(27,27,58,.6); position: relative; z-index: 2; } .marquee-track { display: flex; gap: 34px; width: max-content; align-items: center; } .marquee-track span { display: inline-flex; align-items: center; gap: 34px; font-family: var(--head); font-weight: 700; font-size: 1.25rem; white-space: nowrap; } .marquee-track span::after { content: ""; width: 14px; height: 14px; background: var(--yellow); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } /* ---------- Sections ---------- */ .section { position: relative; padding: 120px 0; } .section-head { max-width: 780px; margin: 0 auto 60px; text-align: center; } .section-head .lede { margin: 0 auto; } .eyebrow { display: inline-block; font-family: var(--hand); font-size: 1.6rem; font-weight: 700; color: var(--indigo); transform: rotate(-2deg); margin-bottom: 8px; } .blue { background: var(--paper-blue); } @media (max-width: 720px) { .section { padding: 84px 0; } .section-head { margin-bottom: 42px; } } /* ---------- Feature sticky notes ---------- */ .notes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .note { position: relative; border-radius: 6px 6px 18px 6px; padding: 30px 22px 22px; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); background: #fff; transition: transform .35s var(--bounce), box-shadow .3s; display: flex; flex-direction: column; } .note::before { /* tape */ content: ""; position: absolute; top: -13px; left: 50%; width: 86px; height: 26px; margin-left: -43px; background: rgba(255, 233, 160, .85); border: 1px solid rgba(27,27,58,.12); transform: rotate(-3deg); } .note:nth-child(4n+1) { background: #fff8dc; transform: rotate(-1.4deg); } .note:nth-child(4n+2) { background: #e9f8ff; transform: rotate(1.1deg); } .note:nth-child(4n+3) { background: #ecfbf6; transform: rotate(-.8deg); } .note:nth-child(4n+4) { background: #fff0f0; transform: rotate(1.5deg); } .note:hover { transform: rotate(0) translateY(-6px) scale(1.02); box-shadow: 8px 10px 0 var(--ink); z-index: 2; } .note h3 { margin: 16px 0 6px; } .note p { margin: 0; color: var(--ink-2); font-size: .97rem; } .note .ill { height: 120px; display: grid; place-items: center; } .note .ill svg { height: 110px; width: auto; overflow: visible; } @media (max-width: 1050px) { .notes { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .notes { grid-template-columns: 1fr; gap: 30px; } } /* ---------- Roles: ID cards on lanyards ---------- */ .ids { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; align-items: start; } .id { position: relative; padding-top: 70px; cursor: pointer; background: none; border: 0; text-align: left; transform-origin: 50% 0; } .id .lanyard { position: absolute; left: 50%; top: 0; width: 16px; height: 74px; margin-left: -8px; background: repeating-linear-gradient(180deg, var(--indigo) 0 10px, #6c64f0 10px 20px); border-radius: 2px; } .id .clip { position: absolute; left: 50%; top: 62px; width: 30px; height: 16px; margin-left: -15px; border-radius: 4px; background: #b9bfd4; border: 2px solid var(--ink); z-index: 2; } .id-card { position: relative; border-radius: 18px; border: 2px solid var(--ink); background: #fff; box-shadow: 5px 5px 0 var(--ink); overflow: hidden; transition: transform .3s var(--bounce), box-shadow .3s; } .id-top { height: 46px; background: var(--c, var(--indigo)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--head); font-weight: 800; font-size: .85rem; letter-spacing: .02em; } .id-photo { width: 74px; height: 74px; border-radius: 50%; margin: -22px auto 8px; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ink); background: var(--soft, var(--indigo-soft)); display: grid; place-items: center; position: relative; } .id-photo svg { width: 44px; height: 44px; } .id-body { padding: 0 14px 16px; text-align: center; } .id-body b { display: block; font-family: var(--head); font-size: 1.12rem; } .id-body span { color: var(--ink-3); font-size: .85rem; } .id-bar { margin: 10px auto 0; height: 22px; width: 80%; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px); opacity: .7; } .id[aria-selected="true"] .id-card { transform: translateY(8px) scale(1.04); box-shadow: 7px 8px 0 var(--ink); } .id[aria-selected="true"] .id-top::after { content: " ✓"; } .id:hover .id-card { transform: translateY(4px); } .id.admin { --c: var(--indigo); --soft: var(--indigo-soft); } .id.principal { --c: var(--coral); --soft: var(--coral-soft); } .id.teacher { --c: var(--mint); --soft: var(--mint-soft); } .id.parent { --c: #f08a24; --soft: var(--yellow-soft); } .id.student { --c: #1aa3d6; --soft: var(--sky-soft); } .role-panel { margin-top: 40px; border-radius: var(--r-l); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: #fff; padding: 34px 38px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; align-items: center; } .role-panel[hidden] { display: none; } .role-panel h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); } .role-panel p { color: var(--ink-2); margin: 0; } .checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; } .checks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: .97rem; } .checks li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 2px solid var(--ink); background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; } @media (max-width: 1000px) { .ids { display: flex; overflow-x: auto; gap: 14px; padding: 0 4px 16px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ids::-webkit-scrollbar { display: none; } .id { flex: 0 0 168px; scroll-snap-align: start; } .role-panel { grid-template-columns: 1fr; padding: 26px 22px; margin-top: 22px; } .checks { grid-template-columns: 1fr; } } /* ---------- Day: ruled notebook page ---------- */ .notebook { position: relative; max-width: 900px; margin: 0 auto; background: #fff; border-radius: 6px 22px 22px 6px; border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 40px 34px 40px 104px; background-image: repeating-linear-gradient(180deg, transparent 0 47px, #cfdcf5 47px 48px); background-position: 0 70px; } .notebook::before { content: ""; position: absolute; left: 78px; top: 0; bottom: 0; width: 2px; background: var(--margin); } .notebook::after { /* binder holes */ content: ""; position: absolute; left: 22px; top: 40px; bottom: 40px; width: 20px; background: radial-gradient(circle at 10px 10px, var(--paper-blue) 8px, transparent 9px) 0 0 / 20px 90px repeat-y; } .notebook h3 { font-family: var(--hand); font-size: 2.2rem; font-weight: 700; color: var(--indigo); margin: 0 0 20px; line-height: 1; } .periods { list-style: none; margin: 0; padding: 0; } .periods li { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; align-items: center; min-height: 48px; position: relative; } .periods time { font-family: var(--hand); font-size: 1.55rem; font-weight: 700; color: var(--coral); position: absolute; left: -96px; width: 74px; text-align: right; } .periods .what { grid-column: 1 / 3; font-size: 1.05rem; font-weight: 600; } .periods .what span { color: var(--ink-3); font-weight: 500; } .periods .done { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: #fff; border: 2px solid var(--ink); } .periods .done svg { width: 14px; height: 14px; } @media (max-width: 640px) { .notebook { padding: 28px 18px 28px 70px; } .notebook::before { left: 54px; } .notebook::after { left: 12px; } .periods time { left: -66px; width: 50px; font-size: 1.25rem; } .periods li { grid-template-columns: 1fr auto; min-height: 48px; padding: 6px 0; } .periods .what { grid-column: 1; font-size: .95rem; line-height: 1.3; } .periods .what span { display: block; font-size: .85rem; } } /* ---------- Chalkboard: security ---------- */ .chalkboard { position: relative; border-radius: 22px; border: 16px solid #b7794a; background: radial-gradient(120% 120% at 20% 10%, #2b6a5b, var(--board) 50%, var(--board-2)); color: var(--chalk); padding: 60px 56px 70px; box-shadow: var(--shadow-lg); overflow: hidden; } .chalkboard::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(400px 120px at 70% 30%, rgba(255,255,255,.07), transparent 70%), radial-gradient(300px 100px at 20% 80%, rgba(255,255,255,.05), transparent 70%); } .chalkboard::after { content: ""; position: absolute; left: 50px; right: 50px; bottom: 14px; height: 10px; border-radius: 4px; background: #8a5a35; } .chalkboard h2 { font-family: var(--hand); font-weight: 700; font-size: clamp(2.5rem, 5vw, 3.8rem); letter-spacing: 0; color: #fff; } .chalkboard .lede { color: #cfe3da; max-width: 40em; } .chalk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 40px 0; } .chalk-stats div { border: 2px dashed rgba(244, 247, 242, .4); border-radius: 14px; padding: 20px; } .chalk-stats strong { display: block; font-family: var(--hand); font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; color: #fff6c9; margin-bottom: 8px; } .chalk-stats span { font-size: .94rem; color: #cfe3da; } .chalk-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .chalk-facts h3 { font-family: var(--hand); font-weight: 700; font-size: 1.9rem; letter-spacing: 0; color: #fff; margin-bottom: 4px; } .chalk-facts p { color: #cfe3da; margin: 0; font-size: .97rem; } @media (max-width: 900px) { .chalkboard { padding: 40px 24px 56px; border-width: 11px; } .chalk-stats { grid-template-columns: 1fr 1fr; } .chalk-facts { grid-template-columns: 1fr; } } /* ---------- Steps (dashed path) ---------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; counter-reset: s; } .steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 38px; border-top: 3px dashed #b9c2e0; z-index: 0; } .steps li { position: relative; z-index: 1; text-align: center; counter-increment: s; } .steps li::before { content: counter(s); display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-family: var(--head); font-weight: 800; font-size: 1.9rem; background: var(--yellow); } .steps li:nth-child(2)::before { background: var(--sky); } .steps li:nth-child(3)::before { background: #9ff0e4; } .steps li:nth-child(4)::before { background: #ffb3b3; } .steps p { color: var(--ink-2); margin: 0; font-size: .97rem; max-width: 24em; margin-inline: auto; } @media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; gap: 36px 20px; } .steps::before { display: none; } } @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } } /* ---------- Mobile app ---------- */ .app-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; } .app-split .hero-actions { margin-top: 28px; } .app-split .note-text { color: var(--ink-3); font-size: .9rem; margin-top: 18px; } .phone-wrap { position: relative; display: grid; place-items: center; padding: 20px 0; } .blob { position: absolute; width: 380px; height: 380px; border-radius: 42% 58% 61% 39% / 45% 39% 61% 55%; background: var(--yellow); border: 2px solid var(--ink); } .phone { position: relative; width: 268px; aspect-ratio: 9 / 19; border-radius: 42px; padding: 10px; background: var(--ink); box-shadow: 8px 8px 0 rgba(27,27,58,.25); } .phone-screen { height: 100%; border-radius: 33px; background: var(--paper-blue); overflow: hidden; padding: 38px 13px 13px; display: flex; flex-direction: column; gap: 9px; position: relative; } .phone-screen::before { content: ""; position: absolute; top: 10px; left: 50%; width: 80px; height: 22px; margin-left: -40px; border-radius: 999px; background: var(--ink); } .p-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--head); font-weight: 800; font-size: .98rem; padding: 0 4px 2px; } .p-head img { width: 26px; height: 26px; border-radius: 8px; } .p-card { border-radius: 14px; padding: 11px 12px; background: #fff; border: 1.5px solid var(--rule); font-size: .78rem; line-height: 1.35; } .p-card b { display: block; font-size: .84rem; margin-bottom: 2px; } .p-card span { color: var(--ink-3); } .p-bar { height: 7px; border-radius: 4px; background: var(--rule); margin-top: 8px; overflow: hidden; } .p-bar i { display: block; height: 100%; width: 92%; background: var(--mint); border-radius: 4px; } .p-card.y { background: var(--yellow-soft); border-color: #ffe18a; } .p-tabs { margin-top: auto; display: flex; justify-content: space-around; padding: 10px 0 2px; } .p-tabs i { width: 24px; height: 24px; border-radius: 8px; background: #d5dcf0; } .p-tabs i:first-child { background: var(--indigo); } @media (max-width: 900px) { .app-split { grid-template-columns: 1fr; gap: 40px; } .blob { width: 300px; height: 300px; } .phone { width: 240px; } } /* ---------- FAQ ---------- */ .faq { max-width: 840px; margin: 0 auto; display: grid; gap: 14px; } .faq details { border-radius: 16px; border: 2px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 var(--ink); transition: transform .2s var(--ease); } .faq details[open] { background: var(--yellow-soft); } .faq summary { cursor: pointer; list-style: none; padding: 20px 60px 20px 22px; font-family: var(--head); font-weight: 700; font-size: 1.12rem; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 1.2rem; line-height: 1; background: #fff; transition: transform .3s var(--bounce); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { color: var(--ink-2); padding: 0 22px 20px; margin: 0; } /* ---------- CTA (school-bus yellow) ---------- */ .cta-band { background: var(--yellow); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); position: relative; overflow: hidden; } .cta-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(27,27,58,.12) 1.5px, transparent 1.5px); background-size: 22px 22px; pointer-events: none; } .cta { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; } .cta h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); } .cta .lede { color: var(--ink); } .contact-lines { list-style: none; padding: 0; margin: 26px 0 0; } .contact-lines li { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-weight: 600; } .contact-lines a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; } .contact-lines svg { width: 22px; height: 22px; } .cta .doodle-bus { width: 220px; margin-top: 30px; } .form { display: grid; gap: 14px; padding: 28px; border-radius: 22px; background: #fff; border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); } .form label { display: grid; gap: 6px; font-size: .9rem; font-weight: 700; } .form input, .form select, .form textarea { font: inherit; font-weight: 500; font-size: 1rem; color: var(--ink); background: var(--paper-blue); border: 2px solid #cfd6ec; border-radius: 12px; padding: 12px 14px; min-height: 50px; width: 100%; transition: border-color .2s, box-shadow .2s, background .2s; } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--indigo); background: #fff; box-shadow: 0 0 0 4px rgba(79, 70, 229, .18); } .form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form .send { display: flex; flex-wrap: wrap; gap: 12px; } .form .send .btn { flex: 1; } .form .hint { color: var(--ink-3); font-size: .85rem; margin: 0; } .form .err { color: #c0262d; font-size: .92rem; font-weight: 600; margin: 0; min-height: 1.3em; } @media (max-width: 900px) { .cta { grid-template-columns: 1fr; gap: 34px; } .cta .doodle-bus { display: none; } } @media (max-width: 520px) { .form { padding: 20px; } .form .two { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ .foot { background: var(--ink); color: #c8c8e0; padding: 70px 0 30px; font-size: .96rem; overflow: hidden; } .foot .brand { color: #fff; } .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; } .foot h4 { color: #fff; font-size: 1rem; letter-spacing: 0; margin-bottom: 14px; } .foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .foot a { color: #c8c8e0; text-decoration: none; } .foot a:hover { color: var(--yellow); } .foot .tagline { margin-top: 14px; max-width: 26em; } .foot .legal { margin-top: 50px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: #8d8daf; font-size: .88rem; } .foot .signoff { font-family: var(--hand); font-size: 1.5rem; color: var(--yellow); } @media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } } /* ---------- Text pages ---------- */ .page { padding: 140px 0 90px; background: linear-gradient(180deg, #eef3ff, #fff 340px); } .page .wrap { max-width: 780px; } .page h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); } .page h2 { font-size: 1.5rem; margin-top: 2em; } .page p, .page li { color: var(--ink-2); } .page strong { color: var(--ink); } .page li { margin-bottom: .5em; } .page a { color: var(--indigo); font-weight: 600; } .page .updated { color: var(--ink-3); } .page .hero-actions { margin-top: 28px; } /* ========================================================= MOTION (html.motion is set by JS). ========================================================= */ html.motion .reveal { opacity: 0; transform: translateY(34px) rotate(var(--rot, 0deg)); transition: opacity .8s var(--ease), transform .9s var(--bounce); transition-delay: var(--d, 0s); } html.motion .reveal.in { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); } html.motion .note.reveal { --rot: 0deg; } html.motion .note.reveal.in { transform: none; } html.motion .note.reveal.in:nth-child(4n+1) { transform: rotate(-1.4deg); } html.motion .note.reveal.in:nth-child(4n+2) { transform: rotate(1.1deg); } html.motion .note.reveal.in:nth-child(4n+3) { transform: rotate(-.8deg); } html.motion .note.reveal.in:nth-child(4n+4) { transform: rotate(1.5deg); } html.motion .note.reveal.in:hover { transform: rotate(0) translateY(-6px) scale(1.02); } /* hero entrance */ html.motion .hero-copy > * { animation: rise .9s var(--ease) both; } html.motion .hero-copy > *:nth-child(2) { animation-delay: .08s; } html.motion .hero-copy > *:nth-child(3) { animation-delay: .16s; } html.motion .hero-copy > *:nth-child(4) { animation-delay: .24s; } html.motion .hero-copy > *:nth-child(5) { animation-delay: .32s; } html.motion .hero-copy > *:nth-child(6) { animation-delay: .5s; } @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } html.motion .hl { background-size: 0% .4em; transition: background-size 1s var(--ease) .35s; } html.motion .hl.on { background-size: 100% .4em; } html.motion .scribble path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1s 1s var(--ease) forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } html.motion .hero-note path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 1s 1.6s ease forwards; } html.motion .board { animation: pop .8s .2s var(--bounce) both; } html.motion .att-card { animation: pop .8s .6s var(--bounce) both; } html.motion .rc-card { animation: popR .8s .8s var(--bounce) both; } html.motion .fee-card { animation: popL .8s 1s var(--bounce) both; } @keyframes pop { from { opacity: 0; transform: translateY(40px) scale(.9); } to { opacity: 1; transform: none; } } @keyframes popR { from { opacity: 0; transform: translateY(40px) rotate(12deg) scale(.9); } to { opacity: 1; transform: rotate(3deg); } } @keyframes popL { from { opacity: 0; transform: translateY(40px) rotate(-10deg) scale(.9); } to { opacity: 1; transform: rotate(-2deg); } } /* gentle idle float on the cards */ html.motion .att-card.idle { animation: bob 5s ease-in-out infinite; } html.motion .rc-card.idle { animation: bobR 6s ease-in-out infinite; } html.motion .fee-card.idle { animation: bobL 5.5s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes bobR { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-9px); } } @keyframes bobL { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-8px); } } /* ticking boxes */ html.motion .att-list .box { transform: scale(0); transition: transform .4s var(--bounce); } html.motion .att-list .box.on { transform: scale(1); } /* stamp */ html.motion .stamp { opacity: 0; transform: rotate(-14deg) scale(2.6); } html.motion .stamp.hit { animation: stamp .45s cubic-bezier(.5, 0, .75, 0) forwards; } @keyframes stamp { 0% { opacity: 0; transform: rotate(-30deg) scale(2.6); } 80% { opacity: 1; transform: rotate(-12deg) scale(.92); } 100% { opacity: 1; transform: rotate(-14deg) scale(1); } } html.motion .rc-card.shake { animation: thud .35s ease; } @keyframes thud { 0%, 100% { transform: rotate(3deg); } 40% { transform: rotate(3deg) translateY(5px) scale(.98); } } /* bell, plane, pencil, bus */ html.motion .bell { animation: ring 4s ease-in-out infinite; } @keyframes ring { 0%, 62%, 100% { transform: rotate(0); } 66% { transform: rotate(16deg); } 70% { transform: rotate(-14deg); } 74% { transform: rotate(11deg); } 78% { transform: rotate(-8deg); } 82% { transform: rotate(4deg); } 86% { transform: rotate(0); } } html.motion .bell .clap { animation: clap 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; } @keyframes clap { 0%, 62%, 100% { transform: rotate(0); } 67% { transform: rotate(-22deg); } 71% { transform: rotate(20deg); } 75% { transform: rotate(-14deg); } 80% { transform: rotate(0); } } html.motion .bell .waves { animation: waves 4s ease-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes waves { 0%, 64% { opacity: 0; transform: scale(.7); } 70% { opacity: 1; } 86%, 100% { opacity: 0; transform: scale(1.25); } } html.motion .plane { animation: fly 11s linear infinite; } @keyframes fly { 0% { transform: translate(-120px, 120px) rotate(-8deg); opacity: 0; } 6% { opacity: 1; } 30% { transform: translate(180px, 40px) rotate(-14deg); } 55% { transform: translate(380px, 90px) rotate(6deg); } 80% { transform: translate(560px, -10px) rotate(-18deg); opacity: 1; } 92%, 100% { transform: translate(720px, -80px) rotate(-22deg); opacity: 0; } } html.motion .pencil { animation: scribble 3s ease-in-out infinite; } @keyframes scribble { 0%, 100% { transform: rotate(-28deg) translate(0, 0); } 25% { transform: rotate(-24deg) translate(6px, -3px); } 50% { transform: rotate(-29deg) translate(12px, 2px); } 75% { transform: rotate(-25deg) translate(5px, -2px); } } html.motion .bus { left: 0; margin-left: 0; animation: drive 16s linear infinite; } @keyframes drive { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 40px)); } } html.motion .bus .body { animation: bump .5s ease-in-out infinite; } @keyframes bump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } } html.motion .bus .wheel { animation: spin .6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } html.motion .bus .puff { animation: puff 1.2s ease-out infinite; transform-box: fill-box; transform-origin: center; } html.motion .bus .puff:nth-of-type(2) { animation-delay: .4s; } html.motion .bus .puff:nth-of-type(3) { animation-delay: .8s; } @keyframes puff { from { opacity: .7; transform: translate(0, 0) scale(.6); } to { opacity: 0; transform: translate(-26px, -10px) scale(1.6); } } html.motion .flag { animation: wave 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 50%; } @keyframes wave { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-8deg) scaleX(.9); } } html.motion .tree { animation: sway 5s ease-in-out infinite; transform-origin: 50% 100%; } @keyframes sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } } /* marquee */ html.motion .marquee-track { animation: marquee 34s linear infinite; } @keyframes marquee { to { transform: translateX(-50%); } } /* sticky-note illustrations */ html.motion .note .tick { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .5s var(--ease); } html.motion .note.in .tick { stroke-dashoffset: 0; } html.motion .note .grow { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; transition: transform .8s var(--bounce); } html.motion .note.in .grow { transform: scaleY(1); } html.motion .note .slide { transform: translateY(-46px); transition: transform 1.2s var(--ease) .3s; } html.motion .note.in .slide { transform: none; } html.motion .note .stack { opacity: 0; transform: translateY(-30px); transition: opacity .4s, transform .6s var(--bounce); } html.motion .note.in .stack { opacity: 1; transform: none; } html.motion .note .ring { animation: megaphone 1.8s ease-out infinite; transform-box: fill-box; transform-origin: left center; } html.motion .note .ring:nth-of-type(2) { animation-delay: .5s; } @keyframes megaphone { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.5); } } html.motion .note .route-dot { animation: route 3.5s ease-in-out infinite; } @keyframes route { 0% { transform: translate(0, 0); } 33% { transform: translate(52px, -30px); } 66% { transform: translate(104px, 0); } 100% { transform: translate(0, 0); } } html.motion .note .spark { animation: twinkle 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } html.motion .note .spark:nth-of-type(2) { animation-delay: .5s; } @keyframes twinkle { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } } html.motion .note .cell { opacity: 0; transition: opacity .3s; } html.motion .note.in .cell { opacity: 1; } /* ID cards swing in */ html.motion .id { animation: swing 3.5s ease-in-out infinite; } html.motion .id:nth-child(2) { animation-delay: -.7s; } html.motion .id:nth-child(3) { animation-delay: -1.4s; } html.motion .id:nth-child(4) { animation-delay: -2.1s; } html.motion .id:nth-child(5) { animation-delay: -2.8s; } @keyframes swing { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } } html.motion .role-panel:not([hidden]) { animation: pop .5s var(--bounce) both; } /* notebook ticks */ html.motion .periods .done { transform: scale(0); transition: transform .45s var(--bounce); } html.motion .periods li.in .done { transform: scale(1); } html.motion .periods li { opacity: .35; transition: opacity .5s; } html.motion .periods li.in { opacity: 1; } /* chalk writing */ html.motion .chalk-write { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s steps(28); } html.motion .chalk-write.in { clip-path: inset(0 0 0 0); } /* yellow CTA bus */ html.motion .doodle-bus { animation: bob 3s ease-in-out infinite; } html.motion .blob { animation: morph 9s ease-in-out infinite; } @keyframes morph { 0%, 100% { border-radius: 42% 58% 61% 39% / 45% 39% 61% 55%; transform: rotate(0); } 50% { border-radius: 58% 42% 38% 62% / 55% 61% 39% 45%; transform: rotate(12deg); } } html.motion .phone { animation: bob 6s ease-in-out infinite; } html.motion .steps li::before { transition: transform .5s var(--bounce); } html.motion .steps li:hover::before { transform: rotate(-8deg) scale(1.08); } /* ID card internals are spans inside a