/* ============================================================ HVY V2 r2 -- White + Navy Underscore (Chairman direction) Atlas Studio / 14 May 2026 (foundation fix pass) Self-contained CSS. ASCII only. ============================================================ */ /* Open Sans loaded via in (font-display: swap, latin subset). */ :root { --hvy-red: #C00000; --hvy-red-deep: #8C0000; --hvy-navy: #1F497D; --hvy-navy-deep: #16365A; --hvy-white: #FFFFFF; --hvy-slate: #E8ECEF; --hvy-slate-deep: #D2D9DE; --hvy-light: #F7F7F7; --hvy-mid: #7F7F7F; --hvy-dark: #2C2C2C; --hvy-line: #E5E5E5; --hvy-shadow: 0 2px 12px rgba(22,54,90,0.06); --content-max: 1200px; --gap: 24px; --gap-l: 40px; --gap-xl: 64px; --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--hvy-dark); background: var(--hvy-white); } img { max-width: 100%; height: auto; display: block; } a { color: var(--hvy-red); text-decoration: none; } a:hover { color: var(--hvy-red-deep); text-decoration: underline; } a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--hvy-red); outline-offset: 2px; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--hvy-navy); font-weight: 700; line-height: 1.18; margin: 0 0 12px; } h1 { font-size: clamp(28px, 4.2vw, 38px); letter-spacing: -0.01em; } h2 { font-size: clamp(22px, 2.6vw, 26px); } h3 { font-size: 19px; } h4 { font-size: 16px; } p { margin: 0 0 14px; } .lead { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.5; color: #2C2C2C; } .eyebrow { color: #5a5a5a; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; } hr.redbar { width: 60px; height: 3px; background: var(--hvy-red); border: 0; margin: 16px 0; } /* ============================================================ SKIP-TO-CONTENT (a11y) ============================================================ */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--hvy-navy); color: #fff; padding: 10px 16px; z-index: 100; font-weight: 700; } .skip-link:focus, .skip-link:focus-visible { left: 8px; top: 8px; outline: 2px solid var(--hvy-red); outline-offset: 2px; } /* ============================================================ SANDBOX BANNER ============================================================ */ .sandbox-banner { background: #FFF6CD; color: #5b4400; border-bottom: 2px solid #E8B100; padding: 8px 24px; font-size: 12.5px; text-align: center; letter-spacing: 0.5px; font-weight: 600; } .sandbox-banner strong { color: #5b4400; } .sandbox-banner .vname { background: var(--hvy-navy); color: #fff; padding: 2px 8px; border-radius: 2px; font-weight: 700; margin: 0 6px; } /* ============================================================ HEADER ============================================================ */ .hvy-header-shell { background: #fff; border-bottom: 2px solid var(--hvy-navy); } .hvy-header { max-width: var(--content-max); margin: 0 auto; padding: 14px 48px; display: flex; align-items: center; gap: 22px; } .hvy-header .hvy-logo { height: 48px; width: auto; flex: 0 0 auto; } .hvy-header .hvy-logo-link { display: inline-block; } .hvy-footer-social-right { display: flex; flex-direction: row; align-items: center; gap: 10px; margin-top: 14px; } .hvy-footer-social-right a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; transition: opacity 0.2s; } .hvy-footer-social-right a.hvy-footer-asx { background: transparent; } .hvy-footer-social-right a.hvy-footer-asx img { display: block; width: 32px; height: 32px; } .hvy-footer-social-right a.hvy-footer-social-icon { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.25); } .hvy-footer-social-right a.hvy-footer-social-icon svg { width: 18px; height: 18px; fill: #fff; } .hvy-footer-social-right a:hover { opacity: 1; } .hvy-footer-social-right a.hvy-footer-social-icon:hover { background: var(--hvy-red); border-color: var(--hvy-red); } .hvy-nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: 22px; } .hvy-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 22px; } .hvy-nav li { position: relative; } .hvy-nav > ul > li > a { color: var(--hvy-navy); font-size: 13.5px; font-weight: 700; letter-spacing: 0.4px; padding: 18px 0; display: inline-block; border-bottom: 3px solid transparent; text-transform: uppercase; min-height: 44px; /* touch target */ } .hvy-nav > ul > li > a:hover, .hvy-nav > ul > li > a.active { color: var(--hvy-red); border-bottom-color: var(--hvy-red); text-decoration: none; } /* v0.3 (14-May-26): chevron marker on submenu parent removed per Chairman -- submenu is still discoverable on hover/click. Block kept to make the rationale visible. */ .hvy-nav li.has-children > a::after { content: none; } .hvy-nav .submenu { position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; border: 1px solid var(--hvy-line); list-style: none; padding: 6px 0; margin: 0; display: none; box-shadow: 0 6px 14px rgba(0,0,0,0.10); z-index: 50; } .hvy-nav li.has-children:hover .submenu, .hvy-nav li.has-children:focus-within .submenu { display: block; } .hvy-nav .submenu li { display: block; } .hvy-nav .submenu a { padding: 10px 16px; display: block; font-weight: 500; color: var(--hvy-navy); border-bottom: 1px solid var(--hvy-line); border-left: 3px solid transparent; font-size: 13px; min-height: 44px; /* touch target */ } .hvy-nav .submenu li:last-child a { border-bottom: 0; } .hvy-nav .submenu a:hover { border-left-color: var(--hvy-red); background: var(--hvy-light); color: var(--hvy-red); text-decoration: none; } .hvy-asx-tail { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 22px; color: var(--hvy-navy); text-transform: uppercase; font-size: 13.5px; font-weight: 700; letter-spacing: 0.4px; } .hvy-asx-tail .price-stack { margin-top: 18px; } .hvy-asx-tail a.asx-link { color: inherit; text-decoration: none; padding: 18px 0; display: inline-block; border-bottom: 3px solid transparent; min-height: 44px; line-height: 1.2; } .hvy-asx-tail a.asx-link:hover, .hvy-asx-tail a.asx-link:focus { color: var(--hvy-red); border-bottom-color: var(--hvy-red); } .hvy-asx-tail .price-stack { display: flex; flex-direction: column; align-items: stretch; border: 1px solid var(--hvy-navy); border-radius: 3px; background: #fff; padding: 3px 10px 2px; min-width: 80px; } .hvy-asx-tail .price-chip { background: transparent; color: var(--hvy-navy); border: 0; padding: 0; letter-spacing: 0.5px; text-align: center; font-size: 13.5px; line-height: 1.15; } .hvy-asx-tail .delay { font-size: 7.5px; opacity: 0.6; letter-spacing: 1.4px; font-weight: 700; text-transform: uppercase; text-align: center; color: var(--hvy-navy); margin-top: 1px; } /* Hamburger button -- desktop hidden, mobile visible */ .hvy-hamburger { display: none; flex: 0 0 auto; width: 44px; height: 44px; background: transparent; border: 1px solid var(--hvy-line); border-radius: 4px; padding: 0; cursor: pointer; margin-left: auto; align-items: center; justify-content: center; flex-direction: column; gap: 4px; } .hvy-hamburger .bar { width: 22px; height: 2px; background: var(--hvy-navy); display: block; transition: transform 0.2s, opacity 0.2s; } .hvy-hamburger.is-open .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hvy-hamburger.is-open .bar:nth-child(2) { opacity: 0; } .hvy-hamburger.is-open .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 940px) { .hvy-header { flex-wrap: wrap; gap: 14px; padding: 12px 24px; } .hvy-asx-tail { order: 2; } .hvy-nav { order: 3; flex: 1 0 100%; justify-content: flex-start; border-top: 1px solid var(--hvy-line); padding-top: 8px; } .hvy-nav ul { flex-wrap: wrap; gap: 14px; } } /* Mobile: collapse nav into hamburger drawer at < 768px */ @media (max-width: 767px) { .hvy-header { padding: 12px 20px; gap: 12px; flex-wrap: wrap; } .hvy-header .hvy-logo { height: 40px; } .hvy-hamburger { display: inline-flex; } .hvy-asx-tail { order: 0; flex: 1 1 auto; justify-content: flex-end; font-size: 11px; gap: 6px; } .hvy-asx-tail .delay { display: none; } .hvy-nav { order: 5; flex: 1 0 100%; border-top: 1px solid var(--hvy-line); padding-top: 0; display: none; } .hvy-nav.open { display: block; } .hvy-nav ul { flex-direction: column; align-items: stretch; gap: 0; } .hvy-nav > ul > li { border-bottom: 1px solid var(--hvy-line); width: 100%; } .hvy-nav > ul > li > a { display: block; padding: 14px 4px; border-bottom: none; min-height: 44px; } .hvy-nav .submenu { position: static; display: none; box-shadow: none; border: none; border-left: 3px solid var(--hvy-red); padding: 0 0 8px 14px; margin-top: 0; min-width: 0; } .hvy-nav li.has-children.submenu-open .submenu { display: block; } .hvy-nav li.has-children:hover .submenu, .hvy-nav li.has-children:focus-within .submenu { /* Don't auto-expand on hover/focus at mobile -- need explicit click. */ display: none; } .hvy-nav li.has-children.submenu-open .submenu { display: block; } } /* Narrow phones: tighter header */ @media (max-width: 480px) { .hvy-header { padding: 10px 16px; gap: 8px; } .hvy-header .hvy-logo { height: 36px; } .hvy-asx-tail strong { font-size: 11px; } .hvy-asx-tail .price-chip { font-size: 11px; padding: 2px 6px; } } /* ============================================================ HERO ============================================================ */ .hvy-hero { position: relative; overflow: hidden; background: var(--hvy-navy-deep); color: #fff; min-height: 480px; } .hvy-hero-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* inset fallback */ inset: 0; z-index: 1; display: block; will-change: transform; } .hvy-hero-bg img { width: 100%; height: 100%; object-fit: cover; /* Bias the crop toward the lower portion of the source image so foreground subject matter (e.g. Kanmantoo shed at bottom-right) stays in frame across the Ken Burns cycle. Chairman direction 14-May-26 12:08 WAST. */ object-position: 50% 85%; filter: brightness(0.62); display: block; /* GPU-layer hints to keep the loop seam smooth (no flash on iteration). */ will-change: transform; backface-visibility: hidden; transform: translateZ(0); } /* Page-specific override: Port Gregory hero shifts the visible crop window upward (lower Y%) so the drill rig sits inside the visible frame. Adam direction 15-May-26 00:24 WAST. */ .hvy-hero-pg .hvy-hero-bg img { object-position: 50% 70%; } .hvy-hero-inh .hvy-hero-bg img { object-position: 50% 50%; } /* Ken Burns -- Chairman spec 14-May-26 11:52 WAST, refined 12:02 WAST. Four equal-duration phases (~12s each at 48s cycle): pan-right-zoomed-in, zoom-out, pan-left-zoomed-out, zoom-back-in. Scale floor of 1.06 (3% overhang each side) keeps the navy background hidden even at maximum translate. Tablet+ only (mobile keeps a static hero for perf + battery). */ @media (min-width: 768px) { .hvy-hero-bg img { animation: hvyKenBurns 48s ease-in-out infinite; transform-origin: center center; } @keyframes hvyKenBurns { 0% { transform: translate(-3%, 0) scale(1.16); } /* far-left, zoomed in */ 25% { transform: translate(3%, 0) scale(1.16); } /* panned right, zoomed in */ 50% { transform: translate(3%, 0) scale(1.06); } /* zoomed out at right (still covers) */ 75% { transform: translate(-3%, 0) scale(1.06); } /* panned back left, zoomed out */ 100% { transform: translate(-3%, 0) scale(1.16); } /* zoom back in -> loop seam */ } @media (prefers-reduced-motion: reduce) { .hvy-hero-bg img { animation: none; } } } .hvy-hero-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* inset fallback */ inset: 0; z-index: 2; background: linear-gradient(135deg, rgba(31,73,125,0.55) 0%, rgba(22,54,90,0.85) 100%); } .hvy-hero-inner { position: relative; z-index: 3; max-width: var(--content-max); margin: 0 auto; padding: 92px 48px 56px; color: #fff; } .hvy-hero .eyebrow { color: rgba(255,255,255,0.85); } .hvy-hero h1 { color: #fff; font-size: clamp(28px, 6vw, 54px); line-height: 1.1; margin: 12px 0 0; max-width: 880px; font-weight: 600; } .hvy-hero .redbar { background: var(--hvy-red); } .hvy-hero p.sub { color: rgba(255,255,255,0.95); font-size: clamp(15px, 2.5vw, 20px); max-width: 720px; margin-top: 6px; } .hvy-hero .cta-row { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; } .btn-red { background: var(--hvy-red); color: #fff !important; padding: 12px 22px; border-radius: 3px; font-weight: 700; font-size: 14.5px; display: inline-block; letter-spacing: 0.4px; border: 0; cursor: pointer; min-height: 44px; } .btn-red:hover { background: var(--hvy-red-deep); text-decoration: none; } .btn-ghost { background: transparent; border: 2px solid #fff; color: #fff !important; padding: 10px 20px; border-radius: 3px; font-weight: 700; font-size: 14.5px; display: inline-block; letter-spacing: 0.4px; min-height: 44px; } .btn-ghost:hover { background: rgba(255,255,255,0.15); text-decoration: none; } .hvy-hero.inner { min-height: 240px; } .hvy-hero.inner .hvy-hero-inner { padding: 56px 48px 36px; } .hvy-hero.inner h1 { font-size: clamp(26px, 4.5vw, 40px); } .hvy-hero.inner p.sub { font-size: clamp(15px, 2vw, 17px); } .hvy-breadcrumb { font-size: 12.5px; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 4px; } .hvy-breadcrumb a { color: rgba(255,255,255,0.85); } .hvy-breadcrumb .sep { margin: 0 8px; opacity: 0.6; } /* ============================================================ LAYOUT ============================================================ */ .container { max-width: var(--content-max); margin: 0 auto; padding: 0 48px; } .section { padding: 56px 0; } .section.tight { padding: 36px 0; } .section.slate { background: #fff; border-top: 1px solid var(--hvy-line); border-bottom: 1px solid var(--hvy-line); } .section.light { background: var(--hvy-light); } .section.navy { background: var(--hvy-navy); color: #fff; } .section.navy h2, .section.navy h3 { color: #fff; } /* Feed + price grid wrapper (replaces inline style on home.html) */ .feed-and-price { display: grid; grid-template-columns: 2fr 1fr; gap: 36px; align-items: start; } @media (max-width: 880px) { .feed-and-price { grid-template-columns: 1fr; } } /* ============================================================ PROJECT TILES ============================================================ */ .project-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .project-tile { background: var(--hvy-white); border: 1px solid var(--hvy-line); border-left: 3px solid var(--hvy-red); padding: 22px; display: flex; flex-direction: column; transition: transform 0.18s, box-shadow 0.18s; overflow: hidden; color: inherit; text-decoration: none; } .project-tile.has-img { padding: 0; } .project-tile.has-img .project-img { height: 180px; width: 100%; display: block; background-color: #2a3142; margin: 0; overflow: hidden; } .project-tile.has-img .project-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .project-tile.has-img .project-tile-body { padding: 22px; display: flex; flex-direction: column; flex: 1; } .project-tile:hover { transform: translateY(-3px); box-shadow: var(--hvy-shadow); text-decoration: none; } .project-tile .badge { background: var(--hvy-slate); color: var(--hvy-navy); font-size: 11px; letter-spacing: 1.2px; font-weight: 700; padding: 3px 8px; border-radius: 2px; align-self: flex-start; text-transform: uppercase; margin-bottom: 10px; } .project-tile h3 { color: var(--hvy-navy); margin-bottom: 4px; } .project-tile h3::before { content: ''; display: block; width: 28px; height: 2px; background: var(--hvy-red); margin-bottom: 6px; } .project-tile .loc { font-size: 12.5px; color: var(--hvy-mid); margin-bottom: 12px; } .project-tile .bio-qual { font-size: 12px; color: var(--hvy-mid); letter-spacing: 0.4px; margin: 2px 0 10px; font-style: italic; } .ann-item .ps-mark { color: var(--hvy-red); font-weight: 700; font-size: 15px; margin-right: 4px; display: inline-block; line-height: 1; } .ann-item.is-ps h4 { color: var(--hvy-navy); } .policy-list { border-top: 1px solid var(--hvy-line); margin: 12px 0 8px; } .policy { border-bottom: 1px solid var(--hvy-line); } .policy summary { list-style: none; cursor: pointer; padding: 12px 32px 12px 14px; position: relative; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; transition: background 0.15s; } .policy summary::-webkit-details-marker { display: none; } .policy summary::after { content: '+'; position: absolute; right: 14px; top: 10px; color: var(--hvy-navy); font-weight: 700; font-size: 18px; line-height: 1; transition: transform 0.2s; } .policy[open] summary::after { content: '\2212'; } .policy summary:hover { background: #f7f8fa; } .policy .p-title { color: var(--hvy-navy); font-weight: 700; font-size: 14px; flex: 1 1 auto; } .policy .p-meta { color: var(--hvy-mid); font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; } .policy .p-body { padding: 4px 32px 16px 14px; } .policy .p-body p { font-size: 13.5px; color: #444; margin: 0; } .project-tile p { font-size: 14px; color: #444; } .project-tile .metric { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hvy-line); font-size: 12.5px; color: var(--hvy-mid); } .project-tile .metric strong { color: var(--hvy-navy); display: block; font-size: 17px; margin-top: 2px; } /* ============================================================ STATS ROW ============================================================ */ .stats-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 24px 0; } .stat { background: var(--hvy-white); border: 1px solid var(--hvy-line); border-left: 3px solid var(--hvy-red); padding: 18px 20px; } .stat .label { font-size: 11.5px; letter-spacing: 1.4px; color: var(--hvy-mid); text-transform: uppercase; font-weight: 700; } .stat .value { font-size: clamp(20px, 2.6vw, 24px); color: var(--hvy-navy); font-weight: 700; margin-top: 4px; line-height: 1.1; } .stat .note { font-size: 12px; color: var(--hvy-mid); margin-top: 2px; } /* ============================================================ FEED + PRICE WIDGETS ============================================================ */ .feed-wrap { background: var(--hvy-white); border: 1px solid var(--hvy-line); border-left: 3px solid var(--hvy-red); } .feed-head { background: var(--hvy-navy); color: #fff; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; } .feed-head h3 { color: #fff; margin: 0; font-size: 17px; } .feed-head .meta { font-size: 11.5px; letter-spacing: 1.2px; opacity: 0.85; text-transform: uppercase; } .feed-head .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5be05b; margin-right: 6px; animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } @media (prefers-reduced-motion: reduce) { .feed-head .live-dot { animation: none; } } .feed-list { list-style: none; margin: 0; padding: 0; } .feed-list li { padding: 14px 22px; border-bottom: 1px solid var(--hvy-line); } .feed-list li:last-child { border-bottom: none; } .feed-list li:hover { background: var(--hvy-light); } .feed-list .row { display: flex; gap: 14px; align-items: baseline; } .feed-list .date { font-size: 12px; color: var(--hvy-mid); font-weight: 700; letter-spacing: 0.4px; min-width: 92px; } .feed-list .cat { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; padding: 2px 8px; border-radius: 2px; background: var(--hvy-slate); color: var(--hvy-navy); } .feed-list .cat.price-sensitive { background: #fde9e9; color: var(--hvy-red); } .feed-list .title { display: block; color: var(--hvy-navy); font-weight: 700; font-size: 14.5px; margin-top: 4px; } .feed-list .title:hover { color: var(--hvy-red-deep); text-decoration: underline; } .feed-list .summary { font-size: 13.5px; color: #555; margin-top: 6px; line-height: 1.5; } .price-widget { background: var(--hvy-white); border: 1px solid var(--hvy-line); border-left: 3px solid var(--hvy-red); } .price-widget-head { padding: 14px 22px; background: var(--hvy-slate); display: flex; justify-content: space-between; align-items: center; } .price-widget-head h3 { margin: 0; font-size: 16px; } .price-widget-head .delay-note { font-size: 11px; color: var(--hvy-mid); letter-spacing: 0.5px; text-transform: uppercase; } .price-widget-body { padding: 22px; } .price-now { display: flex; gap: 20px; align-items: baseline; } .price-now .ticker { font-size: 13px; color: var(--hvy-mid); font-weight: 700; letter-spacing: 1.2px; } .price-now .px { font-size: clamp(28px, 5vw, 34px); color: var(--hvy-navy); font-weight: 700; line-height: 1; } .price-now .chg.up { color: #2a8a2a; font-weight: 700; } .price-now .chg.down { color: var(--hvy-red); font-weight: 700; } .price-now .chg.flat { color: #5a5a5a; font-weight: 700; } .price-meta { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: 13px; } .price-meta dt { color: var(--hvy-mid); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; } .price-meta dd { margin: 0; color: var(--hvy-navy); font-weight: 700; } .tv-embed { margin-top: 18px; height: 220px; background: linear-gradient(180deg, var(--hvy-slate) 0%, #fff 100%); border: 1px dashed var(--hvy-slate-deep); display: flex; align-items: center; justify-content: center; color: var(--hvy-mid); font-size: 13px; letter-spacing: 0.4px; text-align: center; padding: 10px; } /* ============================================================ BODY / SIDEBAR ============================================================ */ .body-sidebar { display: grid; gap: 40px; grid-template-columns: 2fr 1fr; } @media (max-width: 880px) { .body-sidebar { grid-template-columns: 1fr; } } .sidebar .panel { background: var(--hvy-white); border: 1px solid var(--hvy-line); border-left: 3px solid var(--hvy-red); padding: 22px; margin-bottom: 18px; } .sidebar .panel h3 { font-size: 15px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; } .sidebar ul.facts { list-style: none; padding: 0; margin: 0; font-size: 13.5px; } /* Hang-indent rule for content bullet lists: wrapped lines align under first-line text, not under the bullet. Applies to all section bullets unless overridden. */ .section ul:not(.facts):not(.feed-list):not(.submenu) { list-style-position: outside; padding-left: 1.5em; margin: 0 0 12px 0; } .section ul:not(.facts):not(.feed-list):not(.submenu) > li { padding-left: 0.25em; margin-bottom: 8px; line-height: 1.6; } .sidebar ul.facts li { padding: 7px 0; border-bottom: 1px solid var(--hvy-line); display: flex; justify-content: space-between; gap: 12px; } .sidebar ul.facts li:last-child { border-bottom: none; } .sidebar ul.facts .k { color: var(--hvy-mid); } .sidebar ul.facts .v { color: var(--hvy-navy); font-weight: 700; text-align: right; } .sidebar .panel.cta { background: var(--hvy-navy); border-color: var(--hvy-navy); border-left: 3px solid var(--hvy-red); color: #fff; } .sidebar .panel.cta h3 { color: #fff; } .sidebar .panel.cta p { color: rgba(255,255,255,0.95); font-size: 14px; } /* ============================================================ DOWNLOADS ============================================================ */ .downloads-band { background: var(--hvy-navy); color: #fff; padding: 36px 0; } .downloads-band h2 { color: #fff; } .downloads-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 18px; } .dl-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-left: 3px solid var(--hvy-red); padding: 16px 18px; color: #fff; border-radius: 2px; display: flex; flex-direction: column; gap: 6px; } .dl-card:hover { background: rgba(255,255,255,0.12); text-decoration: none; } .dl-card .kind { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.7); font-weight: 700; } .dl-card .name { font-size: 15px; font-weight: 700; color: #fff; } .dl-card .meta { font-size: 11.5px; color: rgba(255,255,255,0.7); } /* ============================================================ TIMELINE ============================================================ */ .timeline { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 18px; } .tl-step { background: var(--hvy-white); border: 1px solid var(--hvy-line); border-left: 3px solid var(--hvy-red); padding: 18px; } .tl-step .phase { font-size: 11px; letter-spacing: 1.2px; color: var(--hvy-mid); text-transform: uppercase; font-weight: 700; } .tl-step h4 { color: var(--hvy-navy); margin: 4px 0 6px; font-size: 16px; } .tl-step p { font-size: 13.5px; color: #444; margin: 0; } .tl-step.done { border-left-color: var(--hvy-mid); } .tl-step.done .phase { color: var(--hvy-mid); } .tl-step.active { border-left-width: 5px; } /* ============================================================ TABLES ============================================================ */ table.hvy-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 16px 0; } table.hvy-table th, table.hvy-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hvy-line); } table.hvy-table th { background: var(--hvy-slate); color: var(--hvy-navy); font-size: 11.5px; letter-spacing: 0.8px; text-transform: uppercase; font-weight: 700; } table.hvy-table tr:hover td { background: var(--hvy-light); } /* ============================================================ IC PAGE ============================================================ */ .ic-hero { position: relative; overflow: hidden; background: var(--hvy-navy); color: var(--hvy-white); padding: 32px 0 24px 0; } .ic-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.85; animation: ic-ken-burns 32s ease-in-out infinite alternate; transform-origin: center; will-change: transform; } @keyframes ic-ken-burns { 0% { transform: scale(1.04) translate(0, 0); } 100% { transform: scale(1.12) translate(-2%, -1.5%); } } .ic-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,73,125,0.78) 0%, rgba(31,73,125,0.88) 100%); z-index: 1; } .ic-hero > .container { position: relative; z-index: 2; } .ic-hero h1 { color: var(--hvy-white); margin-bottom: 6px; font-size: clamp(24px, 4vw, 32px); } .ic-hero p { font-size: 16px; color: rgba(255,255,255,0.85); max-width: 720px; margin-bottom: 0; } .ic-hero .ticker-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; } .ic-hero .tk { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-left: 3px solid var(--hvy-red); padding: 12px 14px; } .ic-hero .tk .l { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.7); } .ic-hero .tk .v { font-size: 20px; font-weight: 700; margin-top: 2px; } .ic-hero .tk .c { font-size: 12px; color: #6ECF7C; } .ic-tabs { background: var(--hvy-light); border-bottom: 2px solid var(--hvy-line); } .ic-tabs .tab-row { display: flex; gap: 0; max-width: var(--content-max); margin: 0 auto; padding: 0 48px; flex-wrap: wrap; } .ic-tabs button { padding: 14px 22px; background: transparent; border: none; border-bottom: 3px solid transparent; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--hvy-mid); cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; min-height: 44px; } .ic-tabs button.active { color: var(--hvy-navy); border-bottom-color: var(--hvy-red); background: var(--hvy-white); } .ic-tabs button:hover { color: var(--hvy-navy); } .tab-section { padding: 36px 0; display: none; } .tab-section.active { display: block; } .ann-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .ann-toolbar .filters { display: flex; gap: 8px; flex-wrap: wrap; } .ann-toolbar .filter { padding: 8px 16px; border: 1px solid var(--hvy-line); background: var(--hvy-white); border-radius: 20px; font-size: 13px; cursor: pointer; min-height: 44px; } .ann-toolbar .filter.active { background: var(--hvy-navy); color: var(--hvy-white); border-color: var(--hvy-navy); } .ann-toolbar input[type=search] { padding: 10px 14px; border: 1px solid var(--hvy-line); border-radius: 4px; font-family: inherit; min-width: 220px; } .ann-list { display: grid; gap: 0; max-height: 560px; overflow-y: auto; border: 1px solid var(--hvy-line); border-radius: 2px; } .ann-list::-webkit-scrollbar { width: 10px; } .ann-list::-webkit-scrollbar-track { background: #f4f6f8; } .ann-list::-webkit-scrollbar-thumb { background: var(--hvy-mid); border-radius: 5px; } .ann-list::-webkit-scrollbar-thumb:hover { background: var(--hvy-navy); } .ann-item { display: grid; grid-template-columns: 110px 22px minmax(0, 1fr) 150px 110px auto; gap: 22px; align-items: center; padding: 16px 14px; border-bottom: 1px solid var(--hvy-line); border-left: 3px solid transparent; } .ann-item .ps-col { color: var(--hvy-red); font-weight: 800; font-size: 18px; text-align: center; line-height: 1; min-width: 14px; } .ann-item:hover { background: var(--hvy-light); border-left-color: var(--hvy-red); } .ann-item .date { font-weight: 700; color: var(--hvy-navy); font-size: 14px; } .ann-item .cat { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--hvy-red); font-weight: 700; justify-self: stretch; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .ann-item h4 { color: var(--hvy-navy); margin: 0; font-size: 15.5px; font-weight: 600; max-width: 60ch; justify-self: start; } .ann-item .size { font-size: 13px; color: var(--hvy-mid); justify-self: stretch; text-align: left; white-space: nowrap; } .ann-item .open-btn { padding: 6px 14px; background: var(--hvy-red); color: var(--hvy-white); font-size: 13px; border-radius: 3px; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; } .ann-item .open-btn:hover { background: var(--hvy-navy); text-decoration: none; } .share-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; } .share-grid-with-prices { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; align-items: start; } @media (max-width: 900px) { .share-grid-with-prices { grid-template-columns: 1fr; } } .chart-card { background: var(--hvy-white); border: 1px solid var(--hvy-line); border-left: 3px solid var(--hvy-red); padding: 24px; } .chart-card h3 { display: flex; justify-content: space-between; align-items: baseline; } .chart-card h3 .px { color: var(--hvy-red); font-weight: 700; } .chart-placeholder { height: 280px; background: linear-gradient(180deg, rgba(192,0,0,0.08) 0%, rgba(192,0,0,0.0) 90%), repeating-linear-gradient(90deg, transparent 0, transparent 49px, rgba(0,0,0,0.04) 49px, rgba(0,0,0,0.04) 50px), repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(0,0,0,0.04) 39px, rgba(0,0,0,0.04) 40px); position: relative; margin-top: 16px; } .chart-card .chart-foot { font-size: 12px; color: var(--hvy-mid); margin-top: 12px; font-style: italic; } /* TradingView attribution: float the copyright link to top-right inside the chart container instead of letting it occupy a row that crowds the chart. The widget's internal canvas watermark is inside their iframe and can't be moved -- this only repositions the external copyright link. */ .tradingview-widget-container { position: relative; } .tradingview-widget-container .tradingview-widget-copyright { position: absolute; top: 8px; right: 12px; background: rgba(255, 255, 255, 0.88); padding: 2px 8px; border-radius: 2px; font-size: 11px; line-height: 1.4; z-index: 5; pointer-events: auto; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .tradingview-widget-container .tradingview-widget-copyright, .tradingview-widget-container .tradingview-widget-copyright a { color: var(--hvy-mid); text-decoration: none; } .tradingview-widget-container .tradingview-widget-copyright a:hover { color: var(--hvy-navy); } .chart-card .embed-note { background: var(--hvy-light); border: 1px dashed var(--hvy-line); padding: 8px 12px; border-radius: 3px; font-size: 12px; color: var(--hvy-mid); margin-top: 12px; } .cap-table { background: var(--hvy-white); border: 1px solid var(--hvy-line); border-left: 3px solid var(--hvy-red); padding: 24px; } .cap-table h3 { margin-bottom: 16px; } .pres-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pres-card { background: var(--hvy-white); border: 1px solid var(--hvy-line); border-left: 3px solid var(--hvy-red); display: flex; flex-direction: column; transition: transform 0.2s; } .pres-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.08); } .pres-card .pres-cover { height: 180px; background: linear-gradient(135deg, var(--hvy-navy), var(--hvy-navy-deep)); display: flex; align-items: center; justify-content: center; color: var(--hvy-white); position: relative; } .pres-card .pres-cover::after { content: '>'; position: absolute; bottom: 12px; right: 12px; width: 36px; height: 36px; background: var(--hvy-red); color: var(--hvy-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; } .pres-card .pres-body { padding: 18px; } .pres-card .pres-event { font-size: 12px; color: var(--hvy-red); text-transform: uppercase; letter-spacing: 1px; } .pres-card h4 { color: var(--hvy-navy); font-size: 16px; margin: 6px 0; } .pres-card .pres-date { font-size: 13px; color: var(--hvy-mid); } .qa-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; } .qa-form { background: var(--hvy-white); border: 1px solid var(--hvy-line); border-left: 3px solid var(--hvy-red); padding: 28px; } .qa-form h3 { margin-bottom: 16px; } .qa-form label { display: block; font-size: 12.5px; color: var(--hvy-mid); letter-spacing: 0.6px; text-transform: uppercase; font-weight: 700; margin: 12px 0 4px; } .qa-form input, .qa-form select, .qa-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--hvy-line); font-size: 14px; font-family: inherit; } .qa-form .checkboxes label { text-transform: none; font-weight: 500; letter-spacing: 0; color: var(--hvy-dark); font-size: 13.5px; padding: 4px 0; } .qa-form .checkboxes input { width: auto; margin-right: 6px; } .qa-form button { margin-top: 16px; } .qa-list { display: flex; flex-direction: column; gap: 14px; } .qa-item { padding: 16px; background: var(--hvy-white); border: 1px solid var(--hvy-line); border-left: 3px solid var(--hvy-red); } .qa-item .q { color: var(--hvy-navy); font-weight: 700; margin-bottom: 6px; } .qa-item .a { font-size: 14px; color: var(--hvy-dark); } @media (max-width: 980px) { .share-grid, .qa-grid { grid-template-columns: 1fr; } .pres-grid { grid-template-columns: 1fr 1fr; } .ic-hero .ticker-row { grid-template-columns: 1fr 1fr; } .ann-item { grid-template-columns: 1fr; gap: 4px; } .ann-item .open-btn { justify-self: start; margin-top: 6px; } } /* ============================================================ AUSTRALIA MAP (Projects landing) ============================================================ */ .au-map-section { background: #fff; padding: 56px 0 36px; } .au-map-wrap { max-width: 1100px; margin: 0 auto; padding: 0 48px; } .au-map-stage { position: relative; margin-top: 28px; background: linear-gradient(180deg, #F2F6FA 0%, #E8EEF4 100%); border: 1px solid var(--hvy-line); border-left: 3px solid var(--hvy-red); padding: 24px; border-radius: 4px; } .au-map-svg { display: block; width: 100%; height: auto; max-height: 560px; } .au-pin { cursor: pointer; transition: transform 0.15s; transform-origin: center; } .au-pin:hover { transform: scale(1.15); } .au-pin:focus-visible { outline: none; } .au-pin:focus-visible .pin-circle { stroke: var(--hvy-navy); stroke-width: 3; } .au-pin .pin-circle { fill: var(--hvy-red); stroke: #fff; stroke-width: 2; } .au-pin .pin-shadow { fill: rgba(0,0,0,0.18); } .au-pin-label { font-family: var(--font-body); font-size: 13px; font-weight: 700; fill: var(--hvy-navy); } .au-pin-sub { font-family: var(--font-body); font-size: 11px; fill: var(--hvy-mid); } .state-label { font-family: var(--font-body); font-size: 18px; font-weight: 700; fill: rgba(31,73,125,0.32); letter-spacing: 2px; pointer-events: none; } .wa-inset .au-pin { transition: transform 0.15s; transform-origin: center; } .wa-inset .au-pin:hover { transform: scale(1.18); } .au-map-legend { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--hvy-mid); margin-top: 18px; } .au-map-legend .swatch { display: inline-block; width: 12px; height: 12px; background: var(--hvy-red); border-radius: 50%; margin-right: 6px; vertical-align: middle; } /* ============================================================ FOOTER ============================================================ */ .hvy-footer { background: var(--hvy-navy-deep); color: rgba(255,255,255,0.88); padding: 22px 0 16px; font-size: 13.5px; } .hvy-footer-grid { display: grid; gap: 36px; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; margin-bottom: 18px; } @media (max-width: 880px) { .hvy-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 599px) { .hvy-footer-grid { grid-template-columns: 1fr; } } .hvy-footer h4 { color: #fff; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 10px; padding-top: 4px; } .hvy-footer a { color: rgba(255,255,255,0.88); } .hvy-footer a:hover { color: #fff; text-decoration: underline; } .hvy-footer ul { list-style: none; padding: 0; margin: 0; } .hvy-footer li { padding: 3px 0; font-size: 13px; } .hvy-footer .colophon { padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.18); display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.6); gap: 12px; flex-wrap: wrap; } .hvy-footer-logo { height: 44px; width: auto; margin: 0 0 12px; background: #fff; padding: 6px 10px; border-radius: 3px; display: inline-block; } .hvy-footer-social { display: flex; gap: 10px; margin-top: 8px; } .hvy-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; color: #fff; font-weight: 700; font-size: 13px; transition: background 0.15s, border-color 0.15s; } .hvy-footer-social a:hover { background: var(--hvy-red); border-color: var(--hvy-red); text-decoration: none; } .hvy-footer-social svg { width: 18px; height: 18px; fill: #fff; } /* ============================================================ MOBILE BREAKPOINT < 600px (Item 1) Tighten paddings + verticals across the system. ============================================================ */ @media (max-width: 599px) { .container { padding: 0 20px; } .au-map-wrap { padding: 0 20px; } .ic-tabs .tab-row { padding: 0 20px; gap: 0; overflow-x: auto; flex-wrap: nowrap; } .ic-tabs button { padding: 12px 16px; font-size: 13px; flex: 0 0 auto; } .section { padding: 40px 0; } .section.tight { padding: 28px 0; } .hvy-hero-inner { padding: 48px 24px 32px; } .hvy-hero.inner .hvy-hero-inner { padding: 32px 24px 24px; } .hvy-hero { min-height: 360px; } .hvy-hero.inner { min-height: 180px; } /* Mobile: hide breadcrumb (redundant with browser back-button + narrow screens make a 3-segment path wrap or overflow awkwardly). */ .hvy-breadcrumb { display: none; } .ic-hero { padding: 24px 0 18px; } .ic-hero .ticker-row { grid-template-columns: 1fr; gap: 8px; } .hvy-footer-grid { gap: 24px; margin-bottom: 14px; } .hvy-header-shell { /* keep header tidy */ } .feed-list .row { flex-direction: column; gap: 4px; } .feed-list .date { min-width: 0; } .price-meta { grid-template-columns: 1fr 1fr; gap: 8px 16px; } .stats-row { grid-template-columns: repeat(2, 1fr); } .pres-grid { grid-template-columns: 1fr; } .au-pin-label { font-size: 11px; } .au-pin-sub { font-size: 9px; } } /* ============================================================ PRINT (basic baseline) ============================================================ */ @media print { .sandbox-banner, .hvy-hamburger, .hvy-nav, .hvy-asx-tail, .hvy-footer-social, .skip-link, .tv-embed { display: none !important; } .hvy-hero { min-height: 0; } .hvy-hero-bg, .hvy-hero-overlay { display: none; } .hvy-hero-inner { padding: 24px 0; color: #000; } body { background: #fff; color: #000; font-size: 11pt; } a { color: #000; text-decoration: underline; } .project-tile, .stat, .panel, .feed-wrap, .price-widget { page-break-inside: avoid; } } /* Home page: "Live Chart" button replacing tv-embed teaser. Solid red button pattern mirrors the announcement "Open" button so the click affordance is instantly recognisable. */ .chart-card-link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; margin: 12px 14px 18px; background: var(--hvy-red); color: var(--hvy-white); text-decoration: none; border-radius: 3px; font-size: 14px; font-weight: 700; letter-spacing: 0.4px; min-height: 44px; box-shadow: 0 2px 6px rgba(192,0,0,0.18); transition: background .15s ease, transform .12s ease, box-shadow .15s ease; } .chart-card-link:hover, .chart-card-link:focus-visible { background: var(--hvy-navy); color: var(--hvy-white); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15,28,48,0.22); } .chart-card-link .cc-label { line-height: 1; } .chart-card-link .cc-arrow { font-size: 16px; line-height: 1; } @media (max-width: 480px) { .chart-card-link { padding: 9px 18px; font-size: 13px; } }