/* ========================================================== Our Story page only ---------------------------------------------------------- Loaded by resources/views/our-story.blade.php via @push('styles'), so it lands after site.css. ========================================================== */ /* ---------------------------------------------------------- MISSION AND VISION ---------------------------------------------------------- */ .mission-vision-section { padding: 0; } .mv-card { height: 100%; padding: 25px 30px; border: 2px solid #ff6a00; border-radius: 12px; background: #ffffff; text-align: center; transition: all 0.3s ease; } .mv-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); } .mv-title { font-weight: 600; color: #2b2b5e; margin-bottom: 10px; } .mv-text { font-size: 15px; color: #6c757d; line-height: 1.6; } /* ---------------------------------------------------------- PAGE BACKGROUND ---------------------------------------------------------- The photograph is set on the section in the Blade file. ---------------------------------------------------------- */ #timeline { background-size: cover; background-position: center; background-repeat: no-repeat; } /* ========================================================== THEMED PAGE ONLY ---------------------------------------------------------- Everything below applies only while the page carries the premium theme (body.home-premium, set by the @section in the Blade file). Drop that one line and the page returns to the look it had before. These rules live here rather than in timeline.css because that file is shared with the two Policy Achievements pages, which are not themed and must keep the original timeline. ========================================================== */ /* ---------------------------------------------------------- THE YEAR MARKER, CENTRED ON THE RULE ---------------------------------------------------------- The rule is 3px wide at left:50% with margin-left:-1.5px, so its centre falls exactly on 50%. The marker is 55px wide at the same left:50% but with margin-left:-25px, which puts its centre at 50% + 2.5px. Every one of the 25 markers sat two and a half pixels to the right of the line it is meant to be threaded on. Half of 55 is 27.5. ---------------------------------------------------------- */ body.home-premium .timeline > li > .icon { margin-left: -27.5px; } /* ---------------------------------------------------------- THE RULE AND THE MARKERS ---------------------------------------------------------- The rule was a flat 3px of #d9d9d9 running the full height. It is finer now and fades out at both ends, so the timeline starts and stops rather than being cut off. The markers carry the brand gradient the buttons use, in white type, each sitting on a white ring that holds the rule away from the disc and lifts it off the photograph behind. ---------------------------------------------------------- */ body.home-premium .timeline:before { width: 2px; margin-left: -1px; background-color: transparent; background-image: linear-gradient( to bottom, rgba(48, 44, 81, 0) 0%, rgba(48, 44, 81, 0.18) 7%, rgba(48, 44, 81, 0.18) 93%, rgba(48, 44, 81, 0) 100% ); } body.home-premium .timeline > li > .icon { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; background-color: transparent; background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); box-shadow: 0 0 0 5px var(--surface), 0 10px 22px -10px rgba(255, 96, 21, 0.85); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); } /* ---------------------------------------------------------- THE PANELS ---------------------------------------------------------- .rainbow paints a two-colour conic gradient into the border and spins it on a 4s loop, with the panel's own background pulsing between half and full opacity on a 3s loop. Twenty five of those animating at once is what made the page read as busy rather than considered. They become the theme's card instead: a hairline border, the theme's radius and shadow, and a lift on hover. The animations are stopped and the custom properties left alone, so removing the theme class brings the original straight back. ---------------------------------------------------------- */ body.home-premium .timeline > li .panel.rainbow { border: 1px solid var(--line); border-image: none; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); animation: none; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease); } body.home-premium .timeline > li .panel.rainbow:hover { transform: translateY(-5px); border-color: transparent; box-shadow: var(--shadow-md); } /* The headline of each entry. The grey-on-grey wash the panel used for its hover is replaced by the theme's own tint. */ body.home-premium .timeline > li .panel summary { color: var(--ink); font-size: 16px; font-weight: 600; padding: 22px 24px; } body.home-premium .timeline > li .panel summary:hover { background: var(--surface-tint); } body.home-premium .timeline > li .panel[open] summary { border-bottom: 1px solid var(--line); } body.home-premium .timeline > li .panel p { padding: 16px 24px 20px; } /* ---------------------------------------------------------- MISSION AND VISION ---------------------------------------------------------- Two cards in the theme's language rather than a 2px orange outline: a hairline border, the theme's radius and shadow, and the same 7px lift its cards use elsewhere. The brand colour returns as a gradient edge along the top, which is the same accent bar the theme draws under its headings. ---------------------------------------------------------- */ body.home-premium .mv-card { position: relative; overflow: hidden; padding: 34px 26px 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease); } body.home-premium .mv-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), #ffab74); } body.home-premium .mv-card:hover { transform: translateY(-7px); border-color: transparent; box-shadow: var(--shadow-md); } body.home-premium .mv-title { color: var(--ink); font-size: 21px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 12px; } /* 15px over 26px of side padding, not 16px over 32px. At the 1200 and 1280 container widths the card gives the copy 400px, and at 16px the longer of the two — "To strive to transform the education system through public school reform to impact the masses." — took a third line while the other kept two, so the pair no longer matched. */ body.home-premium .mv-text { font-size: 15px; line-height: 1.7; } /* Between 992px and 1199px the container steps down to 960px and the card gives the copy between 343px and 388px, where 15px and then 14px still left the longer card on three lines against the other's two. 13px over tighter padding is what actually holds the pair matched across that whole band. Below 992px the cards stack and sit one above the other, so there is no pair to match. */ @media (min-width: 992px) and (max-width: 1199.98px) { body.home-premium .mv-card { padding: 30px 18px 26px; } body.home-premium .mv-text { font-size: 13px; } } /* ---------------------------------------------------------- THE RULE UNDER "OUR STORY" ---------------------------------------------------------- An inline style draws it as a 2px line across the whole container, which at this width is close to 1300px of flat orange. The theme's own section headings sit over a short centred bar instead; this matches them. The inline style has to be beaten with !important — that is what inline means. ---------------------------------------------------------- */ body.home-premium .story-rule { width: 72px; margin: 18px auto 0; border-bottom: 0 !important; border-radius: 2px; height: 4px; background: linear-gradient(90deg, var(--accent), #ffab74); } /* ---------------------------------------------------------- EVEN SPACING BETWEEN THE YEAR MARKERS ---------------------------------------------------------- Each marker sits at the top of its entry, so the distance from one marker to the next is that entry's height plus its margin. The summaries do not all run to the same number of lines, so the markers were unevenly spaced: 90px apart after a one-line entry, 114px after a two-line one. A fixed height cannot fix this, because the tallest summary changes with the width — two lines above 1366px, three at 1200px and 1280px, three again at 992px. Any number picked for one of those is wrong at the others. The list becomes a grid instead, with grid-auto-rows: 1fr. In a grid whose own height is not fixed, equal fr rows all take the height of the tallest row, so every entry matches the longest summary at whatever width the page is being read at, and the markers are evenly spaced without a measurement being hard-coded anywhere. row-gap replaces the per-entry margin, so the spacing is stated once. It applies at every width: below 576px the entries stop alternating and line up to the right of a rule near the left edge, but they still have markers and those should be evenly spaced too. ---------------------------------------------------------- */ body.home-premium .timeline { display: grid; grid-auto-rows: 1fr; row-gap: 20px; } body.home-premium .timeline > li { margin-bottom: 0; } /* The panel is floated, so it only fills the row it has been given once it is told to. Without this the entries would be evenly spaced but the cards would still be ragged. */ body.home-premium .timeline > li .panel { height: 100%; } /* The copy sits in the middle of that height rather than at the top of it, so a short entry does not read as a long one with lines missing. box-sizing because this summary is content-box: without it the 22px of padding above and below is added to the height instead of counted inside it. */ body.home-premium .timeline > li .panel summary { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 100%; } /* An opened entry is taller than its row, which is right — it should push the ones below it down rather than clip its own picture. */ body.home-premium .timeline > li .panel[open] { height: auto; } body.home-premium .timeline > li .panel[open] summary { min-height: 0; } /* ---------------------------------------------------------- "BACK TO OUR STORY" ---------------------------------------------------------- The button sat flush against the bottom of the timeline — 0px between the last entry and the top of the button. The margin goes on the wrapper, not the button: the theme gives .btn-orange display:inline-flex, and vertical margins do not move an inline-level box. A margin on the button itself would have done nothing. ---------------------------------------------------------- */ body.home-premium .story-back { margin-top: 30px; }