/* Theme Name: St Nicholas CE Primary School Theme URI: https://stnicholasprimary.org Author: David Todd Description: Bespoke theme for St Nicholas CE Primary School, Blundellsands. Built from the mockups approved October 2026. Coastal design system, Atkinson Hyperlegible for accessibility, no page builder. Version: 0.7.2 Requires at least: 6.4 Requires PHP: 8.1 License: Proprietary - built for St Nicholas CE Primary School Text Domain: stnicholas */ /* ========================================================================== Everything below is the approved design system. Colours, spacing and the coastal motifs all come from here - do not add inline styles in templates. ========================================================================== */ :root{--navy:#040464;--ink:#111426;--muted:#474D66;--red:#B90306;--gold:#F8B71B;--goldsoft:#FFF3D3;--panel:#F1F3F9;--line:#D5DAE6} *{box-sizing:border-box;margin:0;padding:0} body{font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);font-size:19px;line-height:1.6;background:#fff} h1,h2,h3{color:var(--navy);line-height:1.15} .wrap{max-width:1240px;margin:0 auto;padding:0 40px} .util{background:var(--panel);font-size:16px;border-bottom:1px solid var(--line)} .util .wrap{display:flex;justify-content:space-between;align-items:center;height:46px} .util a{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px;display:inline-flex;gap:8px;align-items:center} header{border-bottom:4px solid var(--gold);background:#fff} header .wrap{display:flex;align-items:center;justify-content:space-between;height:104px} .brand{display:flex;gap:16px;align-items:center}.brand img{height:62px} .brand b{font-size:25px;color:var(--navy);display:block;line-height:1.15}.brand small{font-size:16px;color:var(--muted)} nav{display:flex;gap:24px;white-space:nowrap} nav a{font-weight:700;font-size:18.5px;color:var(--navy);padding:8px 0;border-bottom:3px solid transparent;white-space:nowrap} nav a.on{border-color:var(--red)} /* page head */ .phead{background:var(--panel);padding:34px 0 40px;border-bottom:1px solid var(--line)} .crumb{font-size:17px;color:var(--muted);margin-bottom:10px} .phead h1{font-size:50px} .phead p{font-size:21px;color:var(--muted);margin-top:10px;max-width:800px} section{padding:56px 0} .two{display:grid;grid-template-columns:1fr 330px;gap:52px} .cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} .prose p{font-size:19.5px;margin-bottom:18px;max-width:740px} .prose h2{font-size:32px;margin:28px 0 12px} .prose h2:first-child{margin-top:0} .prose ul{margin:0 0 18px 22px}.prose li{margin-bottom:8px} figure{margin:0} .shot{width:100%;border-radius:18px;display:block;object-fit:cover} .blob{border-radius:60% 40% 55% 45% / 45% 55% 45% 55%;overflow:hidden} .blob img{width:100%;height:100%;object-fit:cover;display:block} .cap{font-size:15.5px;color:var(--muted);margin-top:8px} .side .box{border:2px solid var(--line);border-radius:14px;padding:22px;margin-bottom:18px} .side h3{font-size:21px;margin-bottom:8px}.side p{font-size:17px;color:var(--muted)} .side li{list-style:none;margin-bottom:10px;font-weight:700;color:var(--navy);font-size:17.5px} .btn{display:inline-flex;gap:10px;align-items:center;background:var(--navy);color:#fff;border-radius:10px;padding:12px 18px;font-weight:700;font-size:17px;text-decoration:none} .btn.gold{background:var(--gold);color:var(--navy)} .callbox{background:var(--gold);border-radius:14px;padding:22px} .callbox .lbl{font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#6b4e06} .callbox b{display:block;font-size:25px;color:var(--navy);margin:4px 0} .callbox span{font-size:16.5px;color:#3c3a22} .doc{display:flex;gap:16px;align-items:center;padding:16px 20px;background:var(--panel);border-radius:12px;margin-bottom:12px} .doc .pdf{width:44px;height:52px;border-radius:6px;background:#fff;border:2px solid var(--red);color:var(--red);font-size:12px;font-weight:700;display:grid;place-items:center;flex:none} .doc .t{display:block;min-width:0} .doc b{display:block;font-size:18.5px;color:var(--navy);text-decoration:underline;text-underline-offset:3px} .doc .m{display:block;font-size:16px;color:var(--muted)} .doc .dl{margin-left:auto;color:var(--navy);display:flex;flex:none} table{width:100%;border-collapse:collapse} th{background:var(--navy);color:#fff;text-align:left;font-size:16px;padding:12px 18px} td{padding:13px 18px;border-bottom:1px solid var(--line);font-size:18px} tr:nth-child(even) td{background:#fafbfd} td.d{font-weight:700;color:var(--navy);white-space:nowrap} .tag{display:inline-block;background:var(--goldsoft);border-radius:999px;padding:3px 12px;font-size:15px;margin-left:8px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .card{border:2px solid var(--line);border-radius:16px;overflow:hidden} .card .b{padding:20px} .card h3{font-size:22px;margin-bottom:6px} .card p{font-size:17px;color:var(--muted)} .vision{background:var(--navy);color:#fff;padding:54px 0} .vision h2{color:#fff;font-size:36px;margin-bottom:20px} .vw{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .vw div{border-top:5px solid var(--gold);padding-top:14px} .vw b{font-size:26px;display:block}.vw span{color:#D5DBEA;font-size:17px} footer{background:#02023F;color:#D5DBEA;padding:56px 0 24px;font-size:17px} footer .g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} footer h4{color:#fff;font-size:20px;margin-bottom:14px} footer li{list-style:none;margin-bottom:9px;text-decoration:underline;text-underline-offset:3px} footer .legal{margin-top:40px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;font-size:15px;color:#A8B1CB} /* home */ .hero{position:relative} .heroimg{height:clamp(400px,44vw,700px);overflow:hidden;position:relative;background:#0a0a3a} .heroimg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;filter:saturate(1.05)} .heroimg .tag2{position:absolute;left:40px;bottom:120px;background:rgba(255,255,255,.93);border-radius:999px;padding:8px 16px;font-size:15px;display:flex;gap:10px;align-items:center;color:var(--navy);font-weight:700} .curve{position:absolute;left:0;right:0;bottom:-1px;line-height:0} .panel{margin-top:-100px;position:relative;z-index:3} .panelbox{background:#fff;border-radius:34px;box-shadow:0 24px 60px rgba(4,4,100,.16);padding:38px 42px 42px} .panelbox h1{font-size:44px;margin-bottom:8px} .panelbox .lead{color:var(--muted);font-size:20px;margin-bottom:26px} .tasks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .task{background:var(--panel);border-radius:16px;padding:18px 20px;display:flex;gap:14px;align-items:center;font-weight:700;font-size:19.5px;color:var(--navy);border-bottom:5px solid var(--gold)} .task .ic{width:48px;height:48px;border-radius:14px;background:#fff;display:grid;place-items:center;flex:none} .task small{display:block;font-weight:400;font-size:15.5px;color:var(--muted)} .task .ch{margin-left:auto;color:var(--red)} .task.urgent{background:var(--gold);border-bottom-color:#C98E10} .secondary{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center} .secondary span{font-size:16px;color:var(--muted)} .secondary a{font-size:17px;font-weight:700;color:var(--navy);border:2px solid var(--line);border-radius:999px;padding:8px 16px} .band{position:relative;margin-top:56px} .beach{display:block;width:100%;height:360px} .bandtext{position:absolute;inset:0;display:flex;justify-content:center;padding-top:26px} .datestrip{background:rgba(255,255,255,.95);border-radius:22px;box-shadow:0 14px 34px rgba(4,4,100,.14);padding:14px 10px;display:flex;align-items:stretch;height:fit-content} .datestrip .d{padding:4px 20px;text-align:center;border-right:1px solid var(--line)} .datestrip .d:last-child{border-right:0} .datestrip b{display:block;color:var(--navy);font-size:21px;line-height:1.1} .datestrip span{font-size:14.5px;color:var(--muted)} .vicar{background:#FFF6DF;border-left:6px solid var(--gold);border-radius:0 14px 14px 0;padding:24px 28px;margin:26px 0} .vicar h3{font-size:23px;margin-bottom:10px} .vicar p{font-size:18.5px;margin-bottom:12px} .vicar .sig{font-weight:700;color:var(--navy);font-size:21px;margin-bottom:0} .yh{font-size:26px;margin:0 0 12px;color:var(--navy)} .scrollx{overflow-x:auto} table.terms{min-width:600px} table.terms .rl{background:var(--panel);color:var(--navy);text-align:left;width:26%;min-width:150px;font-size:17px} table.terms td{text-align:center;font-size:17.5px;vertical-align:middle} table.terms .to{color:var(--muted);font-size:15px} table.terms .ret{display:block;margin-top:8px;font-size:15px;color:var(--muted);line-height:1.35} table.terms .ret b{color:var(--navy);font-size:17px} table.terms tr.tot td,table.terms tr.tot .rl{background:var(--goldsoft);font-weight:700;font-size:19px;color:var(--navy)} .inset{background:var(--panel);border-left:6px solid var(--gold);border-radius:0 12px 12px 0;padding:13px 18px;margin:10px 0 30px;font-size:17px} .inset b{color:var(--navy)} .src{font-size:16px;color:var(--muted);margin-top:6px} table.terms th[scope="row"]{background:var(--panel);color:var(--navy);text-align:left;font-size:17px;width:26%} table.terms td{text-align:center;font-size:18px} table.terms tr.tot th[scope="row"],table.terms tr.tot td{background:var(--goldsoft);font-size:19px} .ttot{font-size:20px;color:var(--navy);margin:12px 0 4px;text-align:right} .ttot b{font-size:23px} .tnote{font-size:16px;color:var(--muted);margin:10px 0 30px} .pend{background:var(--panel);border-left:6px solid var(--gold);border-radius:0 12px 12px 0;padding:16px 20px;font-size:17px;color:var(--muted)} .pend b{color:var(--navy)} .datestrip .lbl{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);font-weight:700;display:block;margin-bottom:2px} :root{--sand:#F7F0E2;--sandline:#EADDC2;--sea:#2E6E9E;--sky:#DDEEF8} /* page headers become a stretch of shoreline */ .phead{background:linear-gradient(180deg,var(--sky) 0%,#EFF4F3 42%,var(--sand) 100%); border-bottom:0;position:relative;padding:38px 0 64px;overflow:hidden} .phead::before{content:"";position:absolute;right:-10px;top:14px;width:460px;height:134px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20364%20110%22%20fill%3D%22none%22%20stroke%3D%22%23040464%22%20stroke-width%3D%222.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%288%2018%29%20rotate%28-12%29%22%3E%3Cpath%20d%3D%22M32%2058C11%2047%204%2031%206%2022%2017%209%2047%209%2058%2022c2%209-5%2025-26%2036z%22%2F%3E%3Cpath%20d%3D%22M32%2058V24M32%2058%2020%2027M32%2058l12-31M32%2058%2010%2029M32%2058l22-29%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2884%2038%29%20rotate%2816%29%20scale%28.8%29%22%3E%3Cpath%20d%3D%22m32%207%207.5%2017.5L58%2026%2044%2038.5%2048%2057%2032%2047%2016%2057l4-18.5L6%2026l18.5-1.5z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28156%2014%29%20rotate%28-6%29%20scale%28.9%29%22%3E%3Cpath%20d%3D%22M38%2041a11%2011%200%201%201-7.5-19A20%2020%200%201%201%2016%2053%22%2F%3E%3Cpath%20d%3D%22M16%2053c13%209%2029%204%2035-8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28228%2042%29%20rotate%2810%29%20scale%28.75%29%22%3E%3Cpath%20d%3D%22M14%2054c-5-5-5-13%201-23S33%2012%2042%2010s13%202%2011%2010-9%2019-17%2027-17%2012-22%207z%22%2F%3E%3Cpath%20d%3D%22M20%2048c6-12%2014-23%2024-31%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28286%2024%29%20scale%281.1%29%22%3E%3Cpath%20d%3D%22M4%2016c7-9%2014%209%2021%200s14%209%2021%200%2014%209%2014%209%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right top/contain no-repeat;opacity:.17} .phead::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:34px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2034%20V10.599999999999998%20C160%20-15.920000000000009%20320%2030.88%20480%2012.16%20C640%20-6.560000000000002%20800%2032.44%20960%2010.599999999999998%20C1120%20-11.240000000000002%201280%2029.32%201440%209.039999999999996%20V34%20Z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E") center bottom/100% 100% no-repeat} .phead .wrap{position:relative;z-index:2} /* every photograph ends on a shoreline: sand, shells, then the sea */ .ph{position:relative;border-radius:18px;overflow:hidden;background:#0a1a2e} .ph img{width:100%;height:100%;object-fit:cover;display:block} .ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:112px;pointer-events:none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20364%20110%22%20fill%3D%22none%22%20stroke%3D%22%239A8355%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%288%2018%29%20rotate%28-12%29%22%3E%3Cpath%20d%3D%22M32%2058C11%2047%204%2031%206%2022%2017%209%2047%209%2058%2022c2%209-5%2025-26%2036z%22%2F%3E%3Cpath%20d%3D%22M32%2058V24M32%2058%2020%2027M32%2058l12-31M32%2058%2010%2029M32%2058l22-29%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2884%2038%29%20rotate%2816%29%20scale%28.8%29%22%3E%3Cpath%20d%3D%22m32%207%207.5%2017.5L58%2026%2044%2038.5%2048%2057%2032%2047%2016%2057l4-18.5L6%2026l18.5-1.5z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28156%2014%29%20rotate%28-6%29%20scale%28.9%29%22%3E%3Cpath%20d%3D%22M38%2041a11%2011%200%201%201-7.5-19A20%2020%200%201%201%2016%2053%22%2F%3E%3Cpath%20d%3D%22M16%2053c13%209%2029%204%2035-8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28228%2042%29%20rotate%2810%29%20scale%28.75%29%22%3E%3Cpath%20d%3D%22M14%2054c-5-5-5-13%201-23S33%2012%2042%2010s13%202%2011%2010-9%2019-17%2027-17%2012-22%207z%22%2F%3E%3Cpath%20d%3D%22M20%2048c6-12%2014-23%2024-31%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28286%2024%29%20scale%281.1%29%22%3E%3Cpath%20d%3D%22M4%2016c7-9%2014%209%2021%200s14%209%2021%200%2014%209%2014%209%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right 22px bottom 31px/152px auto no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20112%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%20112%20V87%20C240%2077%20480%2087%20720%2082%20C960%2077%201200%2087%201440%2079.0%20V112%20Z%22%20fill%3D%22%230B1F4B%22%2F%3E%3C%2Fsvg%3E") center bottom/100% 112px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20112%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%20112%20V47%20C240%2033%20480%2047%20720%2040%20C960%2033%201200%2047%201440%2035.8%20V112%20Z%22%20fill%3D%22%23EBDCBD%22%2F%3E%3C%2Fsvg%3E") center bottom/100% 112px no-repeat} /* small motifs where there is room for them */ .side .box{position:relative;overflow:hidden} .side .box::after{content:"";position:absolute;right:-6px;bottom:-8px;width:74px;height:74px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22%23040464%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M38%2041a11%2011%200%201%201-7.5-19A20%2020%200%201%201%2016%2053%22%2F%3E%3Cpath%20d%3D%22M16%2053c13%209%2029%204%2035-8%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;opacity:.10} .callbox{position:relative;overflow:hidden} .callbox::after{content:"";position:absolute;right:-10px;bottom:-14px;width:96px;height:96px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22%23040464%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M32%2058C11%2047%204%2031%206%2022%2017%209%2047%209%2058%2022c2%209-5%2025-26%2036z%22%2F%3E%3Cpath%20d%3D%22M32%2058V24M32%2058%2020%2027M32%2058l12-31M32%2058%2010%2029M32%2058l22-29%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;opacity:.17} .card{position:relative} .card .b::after{content:"";position:absolute;right:10px;bottom:8px;width:52px;height:52px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22%23040464%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m32%207%207.5%2017.5L58%2026%2044%2038.5%2048%2057%2032%2047%2016%2057l4-18.5L6%2026l18.5-1.5z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;opacity:.09} /* the navy band gets a sea-ripple texture */ .vision{position:relative;overflow:hidden} .vision::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:70px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22%23F8B71B%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2016c7-9%2014%209%2021%200s14%209%2021%200%2014%209%2014%209%22%2F%3E%3C%2Fsvg%3E") left bottom/150px auto repeat-x;opacity:.22} .vision .wrap{position:relative;z-index:2} /* the page runs out into the sea at the bottom */ footer{position:relative;padding-top:132px} footer::before{content:"";position:absolute;top:0;left:0;right:0;height:84px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%2084%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20H1440%20V24.960000000000004%20C1280%204.680000000000001%201120%2045.24%20960%2023.400000000000002%20C800%201.5600000000000003%20640%2040.56%20480%2021.84%20C320%203.1200000000000006%20160%2049.92000000000001%200%2023.400000000000002%20Z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E") center top/100% 84px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%2084%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20H1440%20V67.2%20C1280%2012.6%201120%20121.8%20960%2063.0%20C800%204.2%20640%20109.2%20480%2058.8%20C320%208.4%20160%20134.4%200%2063.0%20Z%22%20fill%3D%22%23F2E7D1%22%2F%3E%3C%2Fsvg%3E") center top/100% 84px no-repeat} footer::after{content:"";position:absolute;top:16px;right:60px;width:390px;height:60px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20364%20110%22%20fill%3D%22none%22%20stroke%3D%22%239A8355%22%20stroke-width%3D%222.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%288%2018%29%20rotate%28-12%29%22%3E%3Cpath%20d%3D%22M32%2058C11%2047%204%2031%206%2022%2017%209%2047%209%2058%2022c2%209-5%2025-26%2036z%22%2F%3E%3Cpath%20d%3D%22M32%2058V24M32%2058%2020%2027M32%2058l12-31M32%2058%2010%2029M32%2058l22-29%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2884%2038%29%20rotate%2816%29%20scale%28.8%29%22%3E%3Cpath%20d%3D%22m32%207%207.5%2017.5L58%2026%2044%2038.5%2048%2057%2032%2047%2016%2057l4-18.5L6%2026l18.5-1.5z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28156%2014%29%20rotate%28-6%29%20scale%28.9%29%22%3E%3Cpath%20d%3D%22M38%2041a11%2011%200%201%201-7.5-19A20%2020%200%201%201%2016%2053%22%2F%3E%3Cpath%20d%3D%22M16%2053c13%209%2029%204%2035-8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28228%2042%29%20rotate%2810%29%20scale%28.75%29%22%3E%3Cpath%20d%3D%22M14%2054c-5-5-5-13%201-23S33%2012%2042%2010s13%202%2011%2010-9%2019-17%2027-17%2012-22%207z%22%2F%3E%3Cpath%20d%3D%22M20%2048c6-12%2014-23%2024-31%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28286%2024%29%20scale%281.1%29%22%3E%3Cpath%20d%3D%22M4%2016c7-9%2014%209%2021%200s14%209%2021%200%2014%209%2014%209%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right top/contain no-repeat;opacity:.75} footer .wrap{position:relative;z-index:2} /* the whole page sits on sand, content floats on white */ body{background:var(--sand) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20420%20420%22%20fill%3D%22none%22%20stroke%3D%22%23E0D0AC%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%2826%2030%29%20rotate%28-14%29%20scale%28.9%29%22%3E%3Cpath%20d%3D%22M32%2058C11%2047%204%2031%206%2022%2017%209%2047%209%2058%2022c2%209-5%2025-26%2036z%22%2F%3E%3Cpath%20d%3D%22M32%2058V24M32%2058%2020%2027M32%2058l12-31M32%2058%2010%2029M32%2058l22-29%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28250%2060%29%20rotate%2812%29%20scale%28.75%29%22%3E%3Cpath%20d%3D%22m32%207%207.5%2017.5L58%2026%2044%2038.5%2048%2057%2032%2047%2016%2057l4-18.5L6%2026l18.5-1.5z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28150%20190%29%20rotate%2822%29%20scale%28.85%29%22%3E%3Cpath%20d%3D%22M38%2041a11%2011%200%201%201-7.5-19A20%2020%200%201%201%2016%2053%22%2F%3E%3Cpath%20d%3D%22M16%2053c13%209%2029%204%2035-8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28300%20230%29%20rotate%28-8%29%20scale%28.85%29%22%3E%3Cpath%20d%3D%22M38%2041a11%2011%200%201%201-7.5-19A20%2020%200%201%201%2016%2053%22%2F%3E%3Cpath%20d%3D%22M16%2053c13%209%2029%204%2035-8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2840%20250%29%20rotate%2818%29%20scale%28.8%29%22%3E%3Cpath%20d%3D%22M14%2054c-5-5-5-13%201-23S33%2012%2042%2010s13%202%2011%2010-9%2019-17%2027-17%2012-22%207z%22%2F%3E%3Cpath%20d%3D%22M20%2048c6-12%2014-23%2024-31%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28210%20320%29%20scale%281.2%29%22%3E%3Cpath%20d%3D%22M4%2016c7-9%2014%209%2021%200s14%209%2021%200%2014%209%2014%209%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28330%20360%29%20rotate%28-6%29%20scale%28.7%29%22%3E%3Cpath%20d%3D%22M32%2058C11%2047%204%2031%206%2022%2017%209%2047%209%2058%2022c2%209-5%2025-26%2036z%22%2F%3E%3Cpath%20d%3D%22M32%2058V24M32%2058%2020%2027M32%2058l12-31M32%2058%2010%2029M32%2058l22-29%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2860%20380%29%20rotate%288%29%20scale%28.7%29%22%3E%3Cpath%20d%3D%22m32%207%207.5%2017.5L58%2026%2044%2038.5%2048%2057%2032%2047%2016%2057l4-18.5L6%2026l18.5-1.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat left top/420px 420px} section{padding:30px 0} section > .wrap{background:#fff;border-radius:30px;padding:44px 48px; box-shadow:0 10px 34px rgba(4,4,100,.07);max-width:1240px} section > .wrap.two, section > .wrap.cols{padding:44px 48px} .phead::after{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2034%20V10.599999999999998%20C160%20-15.920000000000009%20320%2030.88%20480%2012.16%20C640%20-6.560000000000002%20800%2032.44%20960%2010.599999999999998%20C1120%20-11.240000000000002%201280%2029.32%201440%209.039999999999996%20V34%20Z%22%20fill%3D%22%23F7F0E2%22%2F%3E%3C%2Fsvg%3E") center bottom/100% 100% no-repeat} footer::before{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%2084%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20H1440%20V24.960000000000004%20C1280%204.680000000000001%201120%2045.24%20960%2023.400000000000002%20C800%201.5600000000000003%20640%2040.56%20480%2021.84%20C320%203.1200000000000006%20160%2049.92000000000001%200%2023.400000000000002%20Z%22%20fill%3D%22%23F7F0E2%22%2F%3E%3C%2Fsvg%3E") center top/100% 84px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%2084%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20H1440%20V67.2%20C1280%2012.6%201120%20121.8%20960%2063.0%20C800%204.2%20640%20109.2%20480%2058.8%20C320%208.4%20160%20134.4%200%2063.0%20Z%22%20fill%3D%22%23E8D9BB%22%2F%3E%3C%2Fsvg%3E") center top/100% 84px no-repeat} footer::after{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20364%20110%22%20fill%3D%22none%22%20stroke%3D%22%238E7747%22%20stroke-width%3D%222.0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%288%2018%29%20rotate%28-12%29%22%3E%3Cpath%20d%3D%22M32%2058C11%2047%204%2031%206%2022%2017%209%2047%209%2058%2022c2%209-5%2025-26%2036z%22%2F%3E%3Cpath%20d%3D%22M32%2058V24M32%2058%2020%2027M32%2058l12-31M32%2058%2010%2029M32%2058l22-29%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2884%2038%29%20rotate%2816%29%20scale%28.8%29%22%3E%3Cpath%20d%3D%22m32%207%207.5%2017.5L58%2026%2044%2038.5%2048%2057%2032%2047%2016%2057l4-18.5L6%2026l18.5-1.5z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28156%2014%29%20rotate%28-6%29%20scale%28.9%29%22%3E%3Cpath%20d%3D%22M38%2041a11%2011%200%201%201-7.5-19A20%2020%200%201%201%2016%2053%22%2F%3E%3Cpath%20d%3D%22M16%2053c13%209%2029%204%2035-8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28228%2042%29%20rotate%2810%29%20scale%28.75%29%22%3E%3Cpath%20d%3D%22M14%2054c-5-5-5-13%201-23S33%2012%2042%2010s13%202%2011%2010-9%2019-17%2027-17%2012-22%207z%22%2F%3E%3Cpath%20d%3D%22M20%2048c6-12%2014-23%2024-31%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28286%2024%29%20scale%281.1%29%22%3E%3Cpath%20d%3D%22M4%2016c7-9%2014%209%2021%200s14%209%2021%200%2014%209%2014%209%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right top/contain no-repeat;opacity:.8} .hero .curve svg path{fill:#F7F0E2 !important} .panelbox{box-shadow:0 24px 60px rgba(4,4,100,.14)} /* The beach rides up behind the help card, so the card's lower edge sits about 100px into the sky rather than floating in the sand above it. */ .band{margin-top:-100px} .beach{height:470px} .hero{margin-bottom:0} .doc{background:#F4F6FB} section > .wrap > h2:first-child{margin-top:0} /* pages built on their own stylesheet (Our staff, Term dates) */ .lay{background:#fff;border-radius:30px;padding:44px 48px 48px;margin-top:30px;margin-bottom:30px; box-shadow:0 10px 34px rgba(4,4,100,.07)} /* ========================================================================== Responsive. The mockups were drawn at a fixed 1440px; a real site is not. ========================================================================== */ @media (max-width:1100px){ .two,.cols{grid-template-columns:1fr;gap:32px} .grid3{grid-template-columns:1fr 1fr} .tasks{grid-template-columns:1fr 1fr} .panel{margin-top:-60px} .band{margin-top:-70px} .panelbox{border-radius:24px;padding:28px 26px 30px} .panelbox h1{font-size:34px} footer .g{grid-template-columns:1fr 1fr;gap:28px} } @media (max-width:760px){ body{font-size:17.5px} .wrap{padding:0 20px} .grid3,.tasks,footer .g{grid-template-columns:1fr} header .wrap{height:auto;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;gap:12px} nav{gap:18px;flex-wrap:wrap} nav a{font-size:16.5px} .util .wrap{height:auto;padding-top:8px;padding-bottom:8px;flex-direction:column;gap:4px;text-align:center} .phead h1{font-size:34px} .phead p{font-size:18px} .heroimg{height:300px} .beach{height:260px} .band{margin-top:-48px} section{padding:26px 0} section > .wrap{padding:26px 22px;border-radius:20px} .brand img{height:48px}.brand b{font-size:20px}.brand small{font-size:14px} table.terms{min-width:520px} .ph::after{height:76px;background-size:110px auto,100% 76px,100% 76px} } /* Focus states - keyboard users must be able to see where they are */ a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{ outline:3px solid var(--gold);outline-offset:2px;border-radius:3px} /* Skip link */ .skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px; z-index:999;font-weight:700;border-radius:0 0 8px 0} .skip:focus{left:0} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} @media print{ .util,nav,footer,.side,.skip{display:none!important} body{background:#fff;font-size:12pt} section > .wrap{box-shadow:none;padding:0} .two{grid-template-columns:1fr} } /* ========================================================================== Links. The mockups used inert elements with no href, so they never picked up the browser's underline. On a real site every link does, which underlined the crest, the nav, the panel titles and the phone number. Reset it, then put the underline back only where the design shows one. ========================================================================== */ a{color:inherit;text-decoration:none} .util a, .side li a, footer li, footer li a, .prose p a, .prose li a, .prose td a, .prose th a, .doc b, .p .via{text-decoration:underline;text-underline-offset:3px} .prose p a, .prose li a, .prose td a{color:var(--navy);font-weight:700} .brand, .brand *, nav a, .task, .task *, .secondary a, .btn, .btn *, .callbox, .callbox *, .card a, .card a *{text-decoration:none} a.doc{display:flex;color:inherit} a.doc:hover b{text-decoration-thickness:2px} nav a:hover{border-bottom-color:var(--gold)} .task:hover{box-shadow:0 6px 18px rgba(4,4,100,.10)} /* ========================================================================== Header at middle widths. The school name wraps to two lines below about 1260px, which overflows the fixed-height header and clips it against the gold border. Stack the name above the menu from there down. ========================================================================== */ @media (max-width:1260px){ header .wrap{height:auto;padding-top:16px;padding-bottom:14px;flex-wrap:wrap;gap:14px} .brand{flex:1 1 100%;min-width:0} nav{flex:1 1 100%;gap:24px;flex-wrap:wrap} nav a{padding-bottom:4px} } @media (max-width:900px){ .util .wrap{flex-direction:column;align-items:flex-start;gap:4px;height:auto;padding-top:8px;padding-bottom:8px} } /* ========================================================================== Key Information: the document library, grouped by topic ========================================================================== */ /* This is a