.elementor-7065 .elementor-element.elementor-element-a608553{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-a5ec828 *//* ========================================================================== iSGET, Institute of Sustainable Green Energy and Technology Theme: yellow + dark blue, light mode only, Roboto, black body text. Built on Bootstrap 5.3. Footer is intentionally not styled (Elementor). ========================================================================== */ /* ---------------------------------- Tokens -------------------------------- */ :root { --navy-900: #04162B; --navy-800: #072544; --navy-700: #0A3161; --navy-600: #12457F; --yellow-700: #C98F00; --yellow-600: #E9A800; --yellow-500: #FFC42E; --yellow-400: #FFD469; --yellow-200: #FFE9AE; --yellow-100: #FFF4D6; --ink: #111111; --ink-soft: #3E4651; --line: #E3E8EF; --surface: #FFFFFF; --surface-alt: #F5F8FC; --radius: 16px; --radius-lg: 24px; --shadow-sm: 0 2px 10px rgba(4, 22, 43, .06); --shadow-md: 0 12px 34px rgba(4, 22, 43, .10); --shadow-lg: 0 24px 60px rgba(4, 22, 43, .16); } /* ---------------------------------- Base ---------------------------------- */ html { scroll-behavior: smooth; scroll-padding-top: 92px; } body { font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; color: var(--ink); background: var(--surface-alt); font-size: 1rem; line-height: 1.75; -webkit-font-smoothing: antialiased; } /* No `overflow-x: hidden` here on purpose. Nothing overflows now that the container gutter matches the rows, and setting it would compute body's overflow-y to `auto`, which makes Bootstrap's scrollspy treat as the scroll container and stop tracking sections entirely. */ /* A `.row.g-5` pulls itself out by -24px per side, which is wider than the 12px padding .container ships with, so the row spills past the viewport. Widening the container gutter to match keeps every row inside and gives the whole page one consistent 24px side margin. */ .container { --bs-gutter-x: 3rem; } /* More of the screen used on large displays, which Bootstrap caps at 1320px. */ @media (min-width: 1400px) { .container { max-width: 1440px; } } h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: -.015em; color: var(--navy-800); } a { text-decoration: none; } /* Images are content, not something to drag out of the page. The attribute covers Firefox, the property covers Chromium and WebKit. */ img { max-width: 100%; height: auto; -webkit-user-drag: none; user-select: none; } ::selection { background: var(--yellow-500); color: var(--navy-900); } /* --------------------------------- Buttons -------------------------------- */ .btn { font-weight: 500; border-radius: 999px; padding-inline: 1.5rem; transition: all .25s ease; } .btn-isget { background: var(--yellow-500); border: 2px solid var(--yellow-500); color: var(--navy-900); font-weight: 700; } .btn-isget:hover, .btn-isget:focus-visible { background: var(--yellow-400); border-color: var(--yellow-400); color: var(--navy-900); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 196, 46, .38); } .btn-isget-ghost { border: 2px solid var(--yellow-500); color: var(--yellow-500); font-weight: 700; background: transparent; white-space: nowrap; } .btn-isget-ghost:hover, .btn-isget-ghost:focus-visible { background: var(--yellow-500); color: var(--navy-900); } /* One glare sweep across the button on hover. */ .btn-glare { position: relative; overflow: hidden; } .btn-glare::after { content: ''; position: absolute; top: 0; left: -160%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); pointer-events: none; } .btn-glare:hover::after, .btn-glare:focus-visible::after { animation: glare-sweep .75s ease-out; } @keyframes glare-sweep { from { left: -160%; } to { left: 160%; } } /* ------------------------- Cursor glow (glassmorphism) --------------------- */ /* The glow only exists once JS has a pointer to follow, so `.glow-ready` is added by the script rather than assumed here. */ .glow-surface { position: relative; overflow: hidden; } .glow-surface > * { position: relative; z-index: 1; } .glow-surface.glow-ready::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 212, 105, .28), rgba(255, 212, 105, .07) 45%, transparent 70%); opacity: 0; transition: opacity .3s ease; } .glow-surface.glow-ready:hover::before { opacity: 1; } /* --------------------------------- Navbar --------------------------------- */ .isget-navbar { background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-bottom: 4px solid var(--yellow-500); box-shadow: var(--shadow-sm); padding-block: .5rem; } .navbar-brand { display: flex; align-items: center; gap: .8rem; } .brand-mark { width: 52px; height: 52px; object-fit: contain; border-radius: 12px; border: 2px solid var(--navy-600); } .brand-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; } .brand-line { display: flex; align-items: center; gap: .45rem; } .brand-line strong { font-size: 1.45rem; font-weight: 900; letter-spacing: .02em; color: var(--navy-800); } .brand-by { font-size: .8rem; font-weight: 700; color: var(--ink-soft); } /* The iCATS mark is yellow on transparent, so it needs a dark chip to read against the white navbar. Padding stays minimal so the chip hugs the logo. */ /* Sized by height, not width, so the chip stays shorter than the wordmark line next to it and never crowds the subtitle underneath. */ .brand-icats { display: inline-flex; align-items: center; background: var(--navy-800); border-radius: 4px; padding: 0 5px; line-height: 0; } .brand-icats img { height: 26px; width: auto; display: block; } .brand-text small { font-size: .625rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); max-width: 260px; } .isget-navbar .nav-link { color: var(--navy-800); font-weight: 500; padding: .5rem .9rem; position: relative; } .isget-navbar .nav-link::after { content: ''; position: absolute; left: .9rem; right: .9rem; bottom: .25rem; height: 3px; background: var(--yellow-500); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .isget-navbar .nav-link:hover::after, .isget-navbar .nav-link.active::after { transform: scaleX(1); } .isget-navbar .nav-link.active { color: var(--navy-700); font-weight: 700; } /* Hamburger: no box, thick strokes, cross-fades to an X when open. */ .nav-burger { position: relative; width: 40px; height: 40px; padding: 0; border: 0; background: none; box-shadow: none; } .nav-burger:focus { box-shadow: none; } .nav-burger:focus-visible { outline: 3px solid var(--yellow-500); outline-offset: 3px; border-radius: 6px; } .burger-icon { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; fill: none; stroke: var(--navy-800); stroke-width: 3.2; stroke-linecap: round; transition: opacity .2s ease; } .nav-burger[aria-expanded="false"] .burger-close, .nav-burger[aria-expanded="true"] .burger-open { opacity: 0; } @media (max-width: 991.98px) { .isget-navbar .navbar-nav { padding-block: .75rem; gap: .15rem; } .isget-navbar .nav-link::after { display: none; } .isget-navbar .nav-link.active { background: var(--yellow-100); border-radius: 8px; } .brand-text small { display: none; } } @media (max-width: 400px) { .brand-mark { width: 42px; height: 42px; } .brand-line strong { font-size: 1.2rem; } .brand-icats img { width: 44px; } } /* --------------------------- Navy backgrounds ------------------------------ */ /* Linear only, no radial glare. Text on these sections carries a soft shadow so it stays legible wherever the gradient runs light. */ .hero, .section-navy { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); } /* ---------------------------------- Hero ---------------------------------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #04162B 0%, #072544 26%, #0B3566 52%, #082A4E 76%, #04182E 100%); color: #fff; padding-block: clamp(3.5rem, 8vw, 6rem); } .hero > .container { position: relative; z-index: 1; } /* Staggered entrance on load. Gated on html.js so the hero is never invisible when the script does not run. */ html.js .hero-anim { opacity: 0; transform: translateY(20px); animation: hero-in .75s cubic-bezier(.22, .68, .35, 1) forwards; animation-delay: calc(var(--i, 0) * 130ms); } @keyframes hero-in { to { opacity: 1; transform: none; } } .hero-title { color: #fff; font-weight: 900; font-size: clamp(1.9rem, 4.3vw, 3.35rem); line-height: 1.12; margin-bottom: 1.1rem; } .hero-acronym { color: var(--yellow-500); display: inline-block; } .hero-tagline { font-size: clamp(1.05rem, 1.9vw, 1.35rem); font-weight: 500; font-style: italic; color: var(--yellow-400); border-left: 4px solid var(--yellow-500); padding-left: 1rem; margin-bottom: 1.5rem; max-width: 46ch; } .hero-intro { color: rgba(255, 255, 255, .88); font-size: 1.02rem; max-width: 68ch; margin-bottom: 0; } .hero-logo-card { background: #fff; border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-lg); border-bottom: 8px solid var(--yellow-500); max-width: 400px; margin-inline: auto; } .hero-logo-card img { display: block; width: 100%; } /* Director welcome card, sitting under the hero copy */ .hero-director { margin-top: clamp(2.5rem, 5vw, 3.5rem); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 196, 46, .35); border-radius: var(--radius-lg); padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem); backdrop-filter: blur(6px); } .director-name { color: #fff; font-size: clamp(1.05rem, 2vw, 1.35rem); margin: 0 0 .15rem; } .director-role { color: rgba(255, 255, 255, .75); font-size: .95rem; } /* -------------------------------- Sections -------------------------------- */ .section { padding-block: clamp(3.5rem, 7vw, 6rem); } /* Every light section carries the same blue tint; white is reserved for the cards sitting on top of it and for the navbar. */ .section-light, .section-tint { background: var(--surface-alt); } .section-navy { background: linear-gradient(200deg, #072544 0%, #0A3161 30%, #051E39 62%, #04162B 100%); color: rgba(255, 255, 255, .9); } /* A single yellow rule, above the SDG section only. It lives inside the container so it lines up with the page padding rather than running edge to edge, and the section's top padding is tied to the same value so the rule sits evenly between the section above and its own heading. */ :root { --rule-gap: clamp(2rem, 4vw, 3.25rem); } /* The space above the rule is the previous section's bottom padding, so that is what has to match the rule's own bottom margin. The SDG section's top padding goes to zero, otherwise it stacks on top and doubles the gap. */ #research { padding-bottom: var(--rule-gap); } #sdg { padding-top: 0; } #sdg > .container::before { content: ''; display: block; height: 6px; border-radius: 999px; background: var(--yellow-500); margin-bottom: var(--rule-gap); } /* The ring carries its own breathing room inside its box, so the heading sits close to it. */ #sdg .section-head { margin-bottom: clamp(.4rem, 1vw, .75rem); } .section-head { max-width: 900px; margin: 0 0 clamp(2.25rem, 5vw, 3.5rem); text-align: left; } .section-head-centred { margin-inline: auto; text-align: center; } .section-title { font-size: clamp(1.65rem, 3.2vw, 2.4rem); margin-bottom: .75rem; } .section-sub { color: var(--ink-soft); font-size: 1.02rem; margin: 0; } /* --------------------------------- About ---------------------------------- */ .panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow-sm); } .panel-about { border-top: 5px solid var(--navy-700); } .panel-title { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 1rem; color: var(--navy-800); } .panel-copy { color: var(--ink); margin-bottom: 0; } /* Vision and Mission live inside the card, side by side under the copy. */ .panel-split { display: grid; /* min() so the track can shrink below 300px on narrow phones instead of forcing the card wider than the viewport. */ grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line); } .statement-block { border-left: 4px solid var(--yellow-500); padding-left: 1.25rem; } .statement-title { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; margin-bottom: .5rem; color: var(--navy-800); } .statement-title i { color: var(--yellow-600); } .statement { font-size: 1.02rem; font-weight: 500; color: var(--navy-800); margin: 0; } /* --------------------------- Director's message --------------------------- */ .section-message { position: relative; overflow: hidden; } .section-message > .container { position: relative; z-index: 1; } .message-heading { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: clamp(2rem, 4vw, 2.75rem); text-align: left; } .director-figure { margin: 0; text-align: center; } /* Gold frame around the portrait, subtly rounded. */ .portrait-frame { padding: 12px; border-radius: 14px; background: linear-gradient(145deg, #F7D879, var(--yellow-600) 35%, #8A6206 60%, var(--yellow-400) 85%, #F7D879); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, .25); } .portrait-inner { border: 2px solid rgba(4, 22, 43, .55); border-radius: 9px; background: #fff; overflow: hidden; } .portrait-inner img { display: block; width: 100%; border-radius: 7px; } /* Nameplate under the frame */ .director-plaque { display: flex; flex-direction: column; align-items: center; gap: .25rem; margin-top: 1.75rem; padding: 1.35rem 1.15rem; border-radius: var(--radius); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 212, 105, .5); backdrop-filter: blur(6px); } .plaque-name { color: #FFE0A0; font-size: 1.05rem; font-weight: 700; line-height: 1.35; } .plaque-role { color: var(--yellow-500); font-weight: 700; font-style: italic; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; } .plaque-org { color: rgba(255, 255, 255, .7); font-size: .85rem; line-height: 1.45; } .message-body p { color: rgba(255, 255, 255, .86); margin-bottom: 1.15rem; } .message-lead { font-size: 1.12rem; color: #fff !important; font-weight: 500; } .message-closing { color: var(--yellow-400) !important; font-weight: 500; font-size: 1.05rem; border-left: 3px solid var(--yellow-500); padding-left: 1rem; margin-bottom: 0 !important; } /* Read more, mobile only. The clamp lives behind the breakpoint so the class the script adds does nothing on desktop. */ .message-toggle { display: none; } @media (max-width: 991.98px) { /* Clean cut on a line boundary. A gradient fade over the last few lines read as blurry, half-rendered text rather than as truncation. */ .message-body.is-clamped { max-height: 15lh; overflow: hidden; } .message-toggle { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; padding: .45rem 1.15rem; border: 1px solid var(--yellow-500); border-radius: 999px; background: transparent; color: var(--yellow-500); font-weight: 700; font-size: .9rem; cursor: pointer; } } /* ================================ BUBBLE MAPS ============================== */ .map-block { height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 2.5vw, 2rem); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .map-head { text-align: center; margin-bottom: clamp(1rem, 2vw, 1.5rem); } .map-title { font-size: clamp(1.35rem, 2.4vw, 1.8rem); color: var(--navy-800); margin-bottom: 0; } .bubble-map { position: relative; container-type: inline-size; width: 100%; max-width: 500px; aspect-ratio: 1 / 1; margin: 0 auto; --r: 34cqw; /* orbit radius */ --bubble: 25cqw; /* child bubble diameter */ --core: 25cqw; /* centre bubble diameter */ --orbit-duration: 60s; } /* centre, flat fill */ .bubble-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--core); height: var(--core); border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--navy-700); color: var(--yellow-500); font-weight: 900; font-size: clamp(.9rem, 4.6cqw, 1.7rem); letter-spacing: .02em; box-shadow: 0 0 0 10px rgba(10, 49, 97, .10); z-index: 3; } /* * Orbit mechanics. The arm is a zero-size point at the centre that rotates; the * bubble hangs off it at --r and counter-rotates at the same speed so its label * stays upright while it travels. Keyframes read --a per element, so one pair of * animations serves every bubble at its own starting angle. */ .orbit-arm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); animation: orbit-cw var(--orbit-duration) linear infinite; } @keyframes orbit-cw { from { transform: rotate(var(--a)); } to { transform: rotate(calc(var(--a) + 1turn)); } } .orbit-arm .spoke { position: absolute; left: 0; top: 0; width: var(--r); height: 5px; margin-top: -2.5px; background: linear-gradient(90deg, var(--yellow-500), rgba(255, 196, 46, .45)); border-radius: 3px; } .orbit-arm .bubble { position: absolute; left: var(--r); top: 0; width: var(--bubble); height: var(--bubble); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .1rem; padding: 0; font: inherit; cursor: pointer; background: #fff; color: var(--navy-800); border: 3px solid var(--navy-700); box-shadow: var(--shadow-md); z-index: 2; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); animation: orbit-ccw var(--orbit-duration) linear infinite; transition: box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease; } @keyframes orbit-ccw { from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); } to { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a) - 1turn)); } } .orbit-arm .bubble:hover { box-shadow: 0 0 0 6px rgba(255, 196, 46, .3), var(--shadow-md); } .orbit-arm .bubble:focus-visible { outline: 3px solid var(--yellow-600); outline-offset: 3px; } /* Selected bubble: gold and ringed. Still clickable, since clicking it again clears the selection. */ .orbit-arm .bubble.is-active { background: var(--yellow-500); border-color: var(--yellow-700); color: var(--navy-900); box-shadow: 0 0 0 8px rgba(255, 196, 46, .28), var(--shadow-md); } .orbit-arm .bubble.is-active i { color: var(--navy-900); } .orbit-arm .bubble i { font-size: clamp(1rem, 5.4cqw, 1.9rem); color: var(--navy-700); line-height: 1; transition: color .3s ease; } .bubble-label { font-weight: 700; font-size: clamp(.55rem, 2.8cqw, .95rem); line-height: 1.2; padding-inline: .2rem; } .step-badge { position: absolute; top: -4%; right: -4%; width: 8.5cqw; height: 8.5cqw; min-width: 22px; min-height: 22px; border-radius: 50%; background: var(--yellow-500); color: var(--navy-900); font-weight: 900; font-size: clamp(.68rem, 4cqw, 1.05rem); display: grid; place-items: center; border: 2px solid #fff; box-shadow: var(--shadow-sm); } .bubble.is-active .step-badge { background: var(--navy-800); color: var(--yellow-500); } /* Paused by the button, or from the start when the visitor asked for less motion. */ .bubble-map.is-paused .orbit-arm, .bubble-map.is-paused .orbit-arm .bubble { animation-play-state: paused; } /* Anticlockwise. Both animations reverse together so labels stay upright. */ .bubble-map.is-ccw .orbit-arm, .bubble-map.is-ccw .orbit-arm .bubble { animation-direction: reverse; } /* ------------------------------ Orbit controls ----------------------------- */ .orbit-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.1rem; } .btn-orbit { display: inline-flex; align-items: center; gap: .4rem; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 999px; color: var(--navy-700); font-size: .8rem; font-weight: 700; padding: .35rem .9rem; cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease; } .btn-orbit:hover, .btn-orbit:focus-visible { background: var(--yellow-100); border-color: var(--yellow-500); color: var(--navy-900); } .btn-orbit i { font-size: 1rem; } .btn-orbit-icon { padding: .35rem .55rem; } .btn-orbit[aria-pressed="true"] { background: var(--navy-700); border-color: var(--navy-700); color: #fff; } .btn-orbit[aria-pressed="true"]:hover { background: var(--navy-800); color: #fff; } /* All the states of a label are stacked in one grid cell, so the cell is as wide as the longest of them and the capsule never resizes mid-use. The inactive ones keep their space (visibility, not display). */ .label-swap { display: grid; } .label-swap > span { grid-area: 1 / 1; text-align: center; white-space: nowrap; } .label-swap > span.is-off { visibility: hidden; } /* --------------------------- Detail card stage ----------------------------- */ .detail-stage { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); } .detail-item { display: flex; align-items: flex-start; gap: 1rem; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--yellow-500); border-radius: var(--radius); padding: 1.25rem 1.35rem; box-shadow: var(--shadow-sm); animation: detail-in .35s ease; } @keyframes detail-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .detail-item > i { font-size: 1.75rem; color: var(--navy-700); line-height: 1.2; } /* Bootstrap Icons has no plain arrow pointer (bi-cursor is the navigation arrow, which reads as a location pin), so the default cursor is inline. */ .detail-cursor { width: 1.15rem; height: 1.75rem; flex: 0 0 auto; fill: var(--navy-700); margin-top: .15rem; } .detail-item strong { display: block; color: var(--navy-800); font-size: 1.1rem; } .detail-item p { margin: .25rem 0 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.6; /* Reserve two lines so the card does not jolt as the typewriter fills it. */ min-height: 2lh; } /* Typewriter caret, only while the text is filling in. */ .detail-item p.is-typing::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: var(--yellow-600); animation: caret-blink .6s steps(1) infinite; } @keyframes caret-blink { 50% { opacity: 0; } } /* ---------------------------------- SDG ----------------------------------- */ /* * The 17 goal tiles ring the UN emblem, goal 1 at the top running clockwise, * with the five iSGET focuses enlarged and pushed slightly further out so they * have room among their neighbours. * * Everything is sized in cqw against the ring itself, so the whole arrangement * scales as one piece and the same numbers hold at every width. * * The radii and widths below were solved rather than eyeballed. These are * axis-aligned squares, so two of them clear each other only when one axis * separates them: max(|dx|, |dy|) >= (w1 + w2) / 2. Centre distance is the * wrong test and passes pairs that visibly overlap. A tile enlarged in place * cannot fit between its neighbours at all, which is why the focus tiles sit * further out (41.75 vs 34) rather than just being scaled up. Worst pair is * 15/16 with 0.87cqw of daylight. */ .sdg-ring { position: relative; container-type: inline-size; width: 100%; max-width: 1120px; aspect-ratio: 1 / 1; margin-inline: auto; } /* The pale fan behind the tiles, echoing the reference artwork. */ .sdg-rays { position: absolute; inset: 6%; border-radius: 50%; background: repeating-conic-gradient(from -90deg, rgba(255, 255, 255, .95) 0deg 7deg, transparent 7deg 21.176deg); -webkit-mask-image: radial-gradient(circle, #000 12%, rgba(0, 0, 0, .45) 42%, transparent 68%); mask-image: radial-gradient(circle, #000 12%, rgba(0, 0, 0, .45) 42%, transparent 68%); pointer-events: none; } .sdg-emblem { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38cqw; z-index: 2; } .sdg-orbit { list-style: none; padding: 0; margin: 0; } .sdg-tile { position: absolute; left: 50%; top: 50%; line-height: 0; width: var(--w, 9.1cqw); transform: translate(-50%, -50%) rotate(var(--a)) translate(var(--rad, 34cqw)) rotate(calc(-1 * var(--a))); z-index: 1; } .sdg-tile img { display: block; width: 100%; border-radius: 6px; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; } .sdg-tile:hover { z-index: 3; } .sdg-tile:hover img { transform: scale(1.06); box-shadow: var(--shadow-md); } .sdg-tile.is-focus { --w: 13.2cqw; --rad: 41.75cqw; } .sdg-tile.is-focus img { border-radius: 8px; box-shadow: 0 0 0 4px var(--yellow-500), var(--shadow-md); } .sdg-tile.is-focus:hover img { box-shadow: 0 0 0 4px var(--yellow-500), var(--shadow-lg); } .sdg-credit { display: flex; align-items: flex-start; gap: .75rem; max-width: 720px; margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--yellow-500); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .sdg-credit i { color: var(--yellow-600); font-size: 1.1rem; line-height: 1.5; } .sdg-credit p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink-soft); } .sdg-credit a { color: var(--navy-700); font-weight: 700; border-bottom: 2px solid var(--yellow-500); } .sdg-credit a:hover { color: var(--navy-900); background: var(--yellow-100); } /* Coloured header mirrors the official SDG tile; the note sits on white so it stays readable on the lighter goal colours. The head is a fixed height so the colour band lines up across all five cards regardless of title length. */ .sdg-card { height: 100%; background: #fff; border: 1px solid var(--line); border-bottom: 4px solid var(--sdg); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s ease, box-shadow .3s ease; } .sdg-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .sdg-head { background: var(--sdg); color: #fff; padding: 1.35rem 1.15rem 1.4rem; display: flex; flex-direction: column; justify-content: flex-start; gap: .85rem; position: relative; overflow: hidden; height: 190px; flex: 0 0 auto; } .sdg-head::after { content: ''; position: absolute; inset: auto -28% -60% auto; width: 170px; height: 170px; border-radius: 50%; background: rgba(255, 255, 255, .12); } .sdg-icon { width: 52px; height: 52px; color: #fff; position: relative; z-index: 1; flex: 0 0 auto; } .sdg-name { font-weight: 900; font-size: .95rem; line-height: 1.2; text-transform: uppercase; letter-spacing: .01em; position: relative; z-index: 1; } .sdg-note { margin: 0; flex: 1; padding: 1.05rem 1.15rem 1.35rem; font-size: .85rem; line-height: 1.6; color: var(--ink-soft); } /* -------------------------------- Contact --------------------------------- */ .contact-card { margin-top: clamp(2.5rem, 5vw, 4rem); background: #fff; border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.5vw, 2.5rem); box-shadow: var(--shadow-md); border-left: 8px solid var(--yellow-500); color: var(--ink); } .contact-card-title { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); } .avatar-circle { position: relative; overflow: hidden; border-radius: 50%; background: #fff; border: 3px solid var(--yellow-500); flex: 0 0 auto; } /* The portrait is a full-body shot, so the circular avatars zoom in on the head. The image is scaled to 285% of the circle and its top-left is pinned to the circle's centre, then pulled back by the head's own position in the photo (49.3% across, 20.6% down), which lands the face dead centre. */ .avatar-circle img { position: absolute; left: 50%; top: 50%; width: 285%; max-width: none; transform: translate(-49.3%, -20.6%); } .director-avatar { width: 88px; height: 88px; } .contact-avatar { width: 136px; height: 136px; border-width: 4px; margin-inline: auto; box-shadow: var(--shadow-sm); } .contact-name { font-size: clamp(1.1rem, 2.2vw, 1.4rem); margin-bottom: .35rem; } .contact-role { color: var(--ink-soft); margin-bottom: 0; line-height: 1.5; } .contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; } .contact-list li { display: flex; align-items: center; gap: .85rem; } .contact-list i { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--yellow-100); color: var(--navy-700); font-size: 1.05rem; } .contact-list a { color: var(--navy-700); font-weight: 700; word-break: break-word; border-bottom: 2px solid transparent; transition: border-color .25s ease; } .contact-list a:hover { border-bottom-color: var(--yellow-500); } /* ------------------------------ Back to top -------------------------------- */ .back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; width: 46px; height: 46px; border-radius: 50%; background: var(--yellow-500); color: var(--navy-900); display: grid; place-items: center; font-size: 1.15rem; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(12px); transition: all .3s ease; z-index: 1030; } .back-to-top.is-shown { opacity: 1; visibility: visible; transform: none; } .back-to-top:hover { background: var(--yellow-400); color: var(--navy-900); } /* ------------------------------ Reveal on scroll --------------------------- */ html.js .reveal { opacity: 0; transform: translateY(26px); } html.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22, .68, .35, 1); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js .reveal, html.js .reveal.is-visible { opacity: 1; transform: none; transition: none; } .panel:hover, .sdg-card:hover, .btn-isget:hover { transform: none; } .orbit-arm, .orbit-arm .bubble { animation: none !important; } .detail-item { animation: none; } .btn-glare:hover::after { animation: none; } .detail-item p.is-typing::after { animation: none; } html.js .hero-anim { opacity: 1; transform: none; animation: none; } .sdg-tile:hover img { transform: none; } } /* ------------------------------- Breakpoints ------------------------------- */ @media (max-width: 991.98px) { .bubble-map { max-width: 460px; } /* The logo is already the navbar brand; on a stacked layout it just pushes the director card down the page. The whole column goes, not just the card, otherwise its row gutter stays behind as an unexplained gap. */ .hero-logo-col { display: none; } /* Full height portrait, so it needs reining in once it has the full width. */ .portrait-frame { max-width: 290px; margin-inline: auto; } .director-plaque { max-width: 420px; margin-inline: auto; } /* Keeps the CTA clear of the last nav link's highlight. */ .nav-cta { margin-top: .65rem; } /* * The ring survives on mobile by claiming the container's padding back, which * is the only width available, and by widening the radii so the tiles can be * proportionally larger than on desktop. At r=38cqw the chord between * neighbours is 13.96cqw against the 12.5cqw a pair of small tiles needs, and * the enlarged focus tiles clear their neighbours by 0.8cqw. */ /* width:auto is what lets the negative margins actually widen the ring; with width:100% they would only shift it sideways. */ .sdg-ring { width: auto; margin-inline: calc(var(--bs-gutter-x) * -.5); } /* Same solved geometry, just a slightly larger emblem now that the ring is narrower. Tile sizes stay in cqw, so they scale with the ring. */ .sdg-emblem { width: 44cqw; } .sdg-tile img { border-radius: 4px; } .sdg-tile.is-focus img { border-radius: 5px; box-shadow: 0 0 0 3px var(--yellow-500), var(--shadow-sm); } } @media (max-width: 767.98px) { .hero-director { text-align: center; } .hero-director .col-auto { margin-inline: auto; } .sdg-icon { width: 44px; height: 44px; } .sdg-name { font-size: .88rem; } .sdg-head { height: 200px; } } @media (max-width: 575.98px) { .bubble-map { max-width: 380px; } .map-block { padding-inline: 1.1rem; } .orbit-controls { gap: .4rem; } .btn-orbit { font-size: .75rem; padding: .3rem .7rem; } }/* End custom CSS */ /* Start custom CSS */html, body { max-width: 100%; overflow-x: hidden; }/* End custom CSS */