DATE + DAY
+ APR 11-12
+ FRIDAY — SATURDAY
+ // WHAT YOU GET
-
-
+
+
-
- ₹3L+
- IN PRIZES
- ACROSS BOTH TRACKS
-
-
- 24H
- FOOD & CAFFEINE
-
-
- 1:1
- MENTORSHIP
-
-
- 200+
- NETWORK
-
-
- SWAG + CERTS + WIFI + VIBES
- EVERYTHING ELSE IS ON US
-
+
-
// WHAT YOU GET
+
+
@@ -382,39 +382,109 @@
+
+ ₹3L+
+ IN PRIZES
+ ACROSS BOTH TRACKS
+
+
+ 24H
+ FOOD & CAFFEINE
+
+
+ 1:1
+ MENTORSHIP
+
+
+ 200+
+ NETWORK
+
+
+ SWAGS + CERTS + VIBES
+ EVERYTHING IS ON US
+ //SPONSORS
+
// TIMELINE
-
-
-
-
- MAR 15
- REGISTRATION OPENS
-
-
-
- APR 08
- REGISTRATION CLOSES
-
-
-
- APR 11
- OPENING CEREMONY
-
-
-
- APR 11-12
- 24 HOURS OF HACKING
-
-
-
APR 12
- DEMOS & JUDGING
+
+
+
+
+
+
+
- EVENT DETAILS
+ 24 HOURS OF HACKING
+
+11:00 AM — Hacking Period Starts
+01:00 PM — Lunch
+04:30 PM — Evening Snacks
+06:00 PM — Mentoring Round 1
+08:30 PM — Dinner
+12:00 AM — Midnight Snacks
+01:00 AM — Mentoring Round 2
+08:00 AM — Breakfast
+11:00 AM — Hacking Period Ends
+
+
-
-
APR 12
-
- CLOSING CEREMONY & PRIZES
+
+
diff --git a/hackx/sections.js b/hackx/sections.js
index 7702985..1576511 100644
--- a/hackx/sections.js
+++ b/hackx/sections.js
@@ -362,6 +362,7 @@
initFooterCanvas();
// Core (one-time CSS transitions, no jank)
initScrollFadeIn();
+ initTimelineLineDraw();
initPrizeCounters();
// initScrollProgressBar(); // removed — was showing blue line at top
initAnnouncements();
@@ -1122,13 +1123,27 @@ void main() {
draw();
}
- // ===== SCROLL FADE-IN (smoother: 0.6s ease-out) =====
+ // ===== SCROLL REVEAL (timeline toggles in/out on viewport entry/exit) =====
function initScrollFadeIn() {
- const observer = new IntersectionObserver(
+ const timelineObserver = new IntersectionObserver(
(entries) => {
+ entries.forEach((entry) => {
+ entry.target.classList.toggle("visible", entry.isIntersecting);
+ });
+ },
+ { threshold: 0.2 },
+ );
+
+ document
+ .querySelectorAll(".timeline-item")
+ .forEach((item) => timelineObserver.observe(item));
+
+ const statObserver = new IntersectionObserver(
+ (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
+ observer.unobserve(entry.target);
}
});
},
@@ -1136,8 +1151,8 @@ void main() {
);
document
- .querySelectorAll(".timeline-item, .about-stat")
- .forEach((item) => observer.observe(item));
+ .querySelectorAll(".about-stat")
+ .forEach((item) => statObserver.observe(item));
document.querySelectorAll(".section-content").forEach((el) => {
el.style.opacity = "0";
@@ -1424,41 +1439,168 @@ void main() {
});
}
- // ===== SUBTLE-BUT-WILD: Timeline Line Draw on Scroll =====
- // The timeline vertical line "draws" downward as you scroll through the section
+ // ===== TIMELINE: Bottom Thread + Pinch Nodes =====
function initTimelineLineDraw() {
const timelineSection = document.getElementById("timeline-section");
if (!timelineSection) return;
- const timelineLine = timelineSection.querySelector(".timeline-line");
- if (!timelineLine) return;
+ const threadWrap = timelineSection.querySelector("#timeline-thread-wrap");
+ const threadSvg = timelineSection.querySelector(".timeline-thread-svg");
+ const nodeTrack = timelineSection.querySelector("#timeline-node-track");
+ const threadPath = timelineSection.querySelector("#timeline-thread-path");
+ const timelinePanels = timelineSection.querySelector(".timeline-panels");
+ const nodes = Array.from(timelineSection.querySelectorAll(".timeline-node"));
+ const panelDate = timelineSection.querySelector("#timeline-panel-date");
+ const panelDay = timelineSection.querySelector("#timeline-panel-day");
+ const panelTitle = timelineSection.querySelector("#timeline-panel-title");
+ const panelBody = timelineSection.querySelector("#timeline-panel-body");
+
+ if (
+ !threadWrap ||
+ !threadSvg ||
+ !nodeTrack ||
+ !threadPath ||
+ !nodes.length ||
+ !panelDate ||
+ !panelDay ||
+ !panelTitle ||
+ !panelBody
+ ) {
+ return;
+ }
- // Store original height, then set to 0
- const computedStyle = window.getComputedStyle(timelineLine);
- const fullHeight = timelineLine.offsetHeight || timelineLine.scrollHeight;
- timelineLine.style.height = "0px";
- timelineLine.style.transition = "none";
- timelineLine.style.overflow = "visible";
+ nodeTrack.style.setProperty("--node-count", String(nodes.length));
- function update() {
- const rect = timelineSection.getBoundingClientRect();
- const sectionTop = rect.top;
- const sectionHeight = rect.height;
- const viewportHeight = window.innerHeight;
-
- // Start drawing when section enters viewport, finish when section leaves
- const scrollStart = viewportHeight * 0.8;
- const scrollEnd = -sectionHeight * 0.2;
- const progress = Math.max(
- 0,
- Math.min(1, (scrollStart - sectionTop) / (scrollStart - scrollEnd)),
- );
+ let activeIndex = nodes.findIndex((node) => node.classList.contains("active"));
+ if (activeIndex < 0) activeIndex = 0;
+ let panelAnimationTimeout = null;
- timelineLine.style.height = progress * fullHeight + "px";
- requestAnimationFrame(update);
+ function setPanelContent(node) {
+ panelDate.textContent = node.dataset.date || "";
+ panelDay.textContent = node.dataset.day || "";
+ panelTitle.textContent = node.dataset.title || "";
+ panelBody.textContent = String(node.dataset.detail || "").replace(/\r\n?/g, "\n");
+ panelBody.scrollTop = 0;
}
- requestAnimationFrame(update);
+ function animatePanels(direction) {
+ if (!timelinePanels || direction === 0) return;
+
+ const animationClass = direction > 0 ? "panel-in-right" : "panel-in-left";
+
+ timelinePanels.classList.remove("panel-in-left", "panel-in-right");
+ void timelinePanels.offsetWidth;
+ timelinePanels.classList.add(animationClass);
+
+ if (panelAnimationTimeout) {
+ window.clearTimeout(panelAnimationTimeout);
+ }
+
+ panelAnimationTimeout = window.setTimeout(() => {
+ timelinePanels.classList.remove("panel-in-left", "panel-in-right");
+ panelAnimationTimeout = null;
+ }, 360);
+ }
+
+ function applyPinch(index) {
+ nodes.forEach((node, nodeIndex) => {
+ const distance = Math.abs(nodeIndex - index);
+ const liftPx = distance === 0 ? 64 : distance === 1 ? 28 : distance === 2 ? 10 : 0;
+ node.style.setProperty("--lift", `${liftPx}px`);
+ const isActive = nodeIndex === index;
+ node.classList.toggle("active", isActive);
+ node.setAttribute("aria-pressed", isActive ? "true" : "false");
+ });
+ }
+
+ function pointFromNode(node) {
+ const dot = node.querySelector(".timeline-node-dot") || node;
+ const wrapRect = threadWrap.getBoundingClientRect();
+ const dotRect = dot.getBoundingClientRect();
+ return {
+ x: dotRect.left + dotRect.width / 2 - wrapRect.left,
+ y: dotRect.top + dotRect.height / 2 - wrapRect.top,
+ };
+ }
+
+ function buildThreadPath(points) {
+ if (!points.length) return "";
+ if (points.length === 1) {
+ const point = points[0];
+ return `M ${point.x.toFixed(2)} ${point.y.toFixed(2)} L ${point.x.toFixed(2)} ${point.y.toFixed(2)}`;
+ }
+
+ const tension = 0.25;
+ let d = `M ${points[0].x.toFixed(2)} ${points[0].y.toFixed(2)}`;
+
+ for (let index = 0; index < points.length - 1; index += 1) {
+ const p0 = points[index - 1] || points[index];
+ const p1 = points[index];
+ const p2 = points[index + 1];
+ const p3 = points[index + 2] || p2;
+
+ const cp1x = p1.x + (p2.x - p0.x) * tension;
+ const cp1y = p1.y + (p2.y - p0.y) * tension;
+ const cp2x = p2.x - (p3.x - p1.x) * tension;
+ const cp2y = p2.y - (p3.y - p1.y) * tension;
+
+ d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)} ${cp2x.toFixed(2)} ${cp2y.toFixed(2)} ${p2.x.toFixed(2)} ${p2.y.toFixed(2)}`;
+ }
+
+ return d;
+ }
+
+ function drawThread() {
+ const width = Math.max(1, threadWrap.clientWidth);
+ const height = Math.max(1, threadWrap.clientHeight);
+ threadSvg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+
+ const points = nodes.map((node) => pointFromNode(node));
+ if (!points.length) {
+ threadPath.setAttribute("d", "");
+ return;
+ }
+
+ const extendedPoints = [
+ { x: 0, y: points[0].y },
+ ...points,
+ { x: width, y: points[points.length - 1].y },
+ ];
+
+ threadPath.setAttribute("d", buildThreadPath(extendedPoints));
+ }
+
+ function setActive(index, shouldAnimatePanels = true) {
+ const direction = index === activeIndex ? 0 : index > activeIndex ? 1 : -1;
+ activeIndex = index;
+ applyPinch(index);
+ setPanelContent(nodes[index]);
+ if (shouldAnimatePanels && direction !== 0) {
+ animatePanels(direction);
+ }
+ drawThread();
+ }
+
+ nodes.forEach((node, index) => {
+ node.addEventListener("mouseenter", () => setActive(index));
+ node.addEventListener("focus", () => setActive(index));
+ node.addEventListener("click", () => setActive(index));
+ node.addEventListener("keydown", (event) => {
+ if (event.key !== "Enter" && event.key !== " ") return;
+ event.preventDefault();
+ setActive(index);
+ });
+ });
+
+ window.addEventListener("resize", drawThread, { passive: true });
+
+ function animateThread() {
+ drawThread();
+ requestAnimationFrame(animateThread);
+ }
+
+ setActive(activeIndex, false);
+ requestAnimationFrame(animateThread);
}
// ===== PERKS BG — Rising particles =====
@@ -2365,7 +2507,7 @@ void main() {
setTimeout(pulse, 8000 + Math.random() * 4000);
}
- // ===== INTERACTION: Hover Line Trace — Cyan Border Trace =====
+ // ===== INTERACTION: Hover Traces — Lines + Timeline Box Draw =====
function initHoverLineTrace() {
const style = document.createElement("style");
style.textContent = `
@@ -2379,20 +2521,111 @@ void main() {
._line-trace-wrap:hover ._line-trace {
width: 100%;
}
+
+ ._timeline-box-wrap {
+ position: relative;
+ }
+
+ ._timeline-box-trace {
+ position: absolute;
+ inset: -10px -14px;
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity 160ms ease-out;
+ }
+
+ ._timeline-box-trace span {
+ position: absolute;
+ background: ${RED};
+ box-shadow: 0 0 10px rgba(${RED_RGB.join(",")}, 0.24);
+ }
+
+ ._timeline-box-trace ._trace-top,
+ ._timeline-box-trace ._trace-bottom {
+ left: 0;
+ right: 0;
+ height: 1px;
+ transform: scaleX(0);
+ transform-origin: var(--trace-origin, left);
+ transition: transform 260ms ease-out;
+ }
+
+ ._timeline-box-trace ._trace-top {
+ top: 0;
+ }
+
+ ._timeline-box-trace ._trace-bottom {
+ bottom: 0;
+ }
+
+ ._timeline-box-trace ._trace-left,
+ ._timeline-box-trace ._trace-right {
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ transform: scaleY(0);
+ transform-origin: top;
+ transition: transform 220ms ease-out 240ms;
+ }
+
+ ._timeline-box-trace ._trace-left {
+ left: 0;
+ }
+
+ ._timeline-box-trace ._trace-right {
+ right: 0;
+ }
+
+ ._timeline-box-wrap:hover ._timeline-box-trace {
+ opacity: 1;
+ }
+
+ ._timeline-box-wrap:hover ._timeline-box-trace ._trace-top,
+ ._timeline-box-wrap:hover ._timeline-box-trace ._trace-bottom {
+ transform: scaleX(1);
+ }
+
+ ._timeline-box-wrap:hover ._timeline-box-trace ._trace-left,
+ ._timeline-box-wrap:hover ._timeline-box-trace ._trace-right {
+ transform: scaleY(1);
+ }
`;
document.head.appendChild(style);
document
- .querySelectorAll(".readout-row, .prize-entry, .timeline-item")
+ .querySelectorAll(".readout-row, .prize-entry")
.forEach((el) => {
el.classList.add("_line-trace-wrap");
if (el.style.position === "" || el.style.position === "static") {
el.style.position = "relative";
}
+ if (el.querySelector("._line-trace")) return;
const line = document.createElement("div");
line.className = "_line-trace";
el.appendChild(line);
});
+
+ document.querySelectorAll(".timeline-item").forEach((item) => {
+ item.classList.remove("_line-trace-wrap");
+ item.querySelectorAll("._line-trace").forEach((line) => line.remove());
+ });
+
+ document.querySelectorAll(".timeline-copy").forEach((copy) => {
+ copy.classList.add("_timeline-box-wrap");
+ if (copy.style.position === "" || copy.style.position === "static") {
+ copy.style.position = "relative";
+ }
+ if (copy.querySelector("._timeline-box-trace")) return;
+ const box = document.createElement("div");
+ box.className = "_timeline-box-trace";
+ box.innerHTML = `
+
+
+
+
+ `;
+ copy.appendChild(box);
+ });
}
// ===== INTERACTION: Reveal on Scroll — Glitch Text Entrance =====
diff --git a/hackx/style.css b/hackx/style.css
index 953e8ed..a1f3227 100644
--- a/hackx/style.css
+++ b/hackx/style.css
@@ -673,89 +673,232 @@ label {
border-top: 2px solid #4fd1d920;
}
-.timeline {
- position: relative;
- max-width: 800px;
- margin: 0 auto;
+.timeline-content {
+ width: min(calc(100vw - 36px), 1360px);
+ max-width: none;
padding-left: 0;
+ padding-right: 0;
+ padding-top: 74px;
+ padding-bottom: 26px;
}
-.timeline::before {
- content: "";
- position: absolute;
- left: 140px;
- top: 0;
- bottom: 0;
- width: 1px;
- background: #4fd1d920;
+.timeline-hub {
+ min-height: clamp(390px, 56vh, 540px);
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ gap: 16px;
}
-.timeline-item {
- position: relative;
+.timeline-panels {
+ --timeline-panel-height: clamp(250px, 34vh, 340px);
+ --timeline-swap-duration: 320ms;
+ display: grid;
+ grid-template-columns: minmax(280px, 0.95fr) minmax(440px, 1.7fr);
+ gap: 22px;
+ align-items: stretch;
+ height: var(--timeline-panel-height);
+ flex: 0 0 var(--timeline-panel-height);
+}
+
+.timeline-panels.panel-in-left .timeline-panel {
+ animation: timelinePanelFadeInLeft var(--timeline-swap-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.timeline-panels.panel-in-right .timeline-panel {
+ animation: timelinePanelFadeInRight var(--timeline-swap-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.timeline-panel {
+ border: 1px solid #4fd1d92a;
+ background: rgba(10, 22, 40, 0.82);
+ box-shadow:
+ inset 0 0 36px #4fd1d908,
+ 0 0 22px #4fd1d914;
+ padding: clamp(22px, 3vw, 36px);
+ height: 100%;
+ min-height: 0;
display: flex;
- align-items: baseline;
- gap: 40px;
- padding: 30px 0;
- border-bottom: 1px solid #4fd1d910;
- opacity: 0;
- transform: translateY(10px);
- transition: all 0.6s ease;
+ flex-direction: column;
+ will-change: transform, opacity;
}
-.timeline-item.visible {
- opacity: 1;
- transform: translateY(0);
+@keyframes timelinePanelFadeInLeft {
+ from {
+ opacity: 0;
+ transform: translateX(-22px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
}
-.timeline-dot {
- position: absolute;
- left: 136px;
- top: 38px;
- width: 9px;
- height: 9px;
- border: 1px solid #4fd1d940;
- background: #0a1628;
- transition: all 0.4s ease;
- z-index: 1;
+@keyframes timelinePanelFadeInRight {
+ from {
+ opacity: 0;
+ transform: translateX(22px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
}
-.timeline-item.visible .timeline-dot {
- border-color: #4fd1d9cc;
- box-shadow: 0 0 8px #4fd1d930;
+@media (prefers-reduced-motion: reduce) {
+ .timeline-panels.panel-in-left .timeline-panel,
+ .timeline-panels.panel-in-right .timeline-panel {
+ animation: none;
+ }
}
-.timeline-item.active .timeline-dot {
- background: var(--gold);
- border-color: var(--gold);
- box-shadow: 0 0 20px #4fd1d960;
+.timeline-panel-label {
+ font-size: 10px;
+ letter-spacing: 4px;
+ color: var(--text-dim);
+ margin-bottom: 18px;
}
-.timeline-date {
- font-size: clamp(20px, 3vw, 32px);
- font-weight: bold;
- letter-spacing: 0.06em;
- color: #4fd1d9b0;
- min-width: 120px;
- text-align: right;
- flex-shrink: 0;
+.timeline-panel-date {
+ font-size: clamp(42px, 5.8vw, 74px);
+ letter-spacing: 0.04em;
+ color: var(--gold);
+ line-height: 1.02;
+ margin-bottom: 16px;
+ text-shadow: 0 0 22px #4fd1d92a;
+ white-space: nowrap;
+ min-height: 1.1em;
+}
+
+.timeline-panel-day {
+ font-size: clamp(13px, 1.7vw, 18px);
+ letter-spacing: 2.4px;
+ color: #4fd1d9cf;
}
-.timeline-item.active .timeline-date {
+.timeline-panel-title {
+ font-size: clamp(20px, 2.5vw, 34px);
+ letter-spacing: 2px;
color: var(--gold);
- text-shadow: 0 0 20px #4fd1d930;
+ margin-bottom: 16px;
}
-.timeline-event {
- font-size: clamp(14px, 2vw, 18px);
- letter-spacing: 3px;
- padding-left: 30px;
+.timeline-panel-body {
+ font-size: clamp(13px, 1.35vw, 17px);
+ line-height: 1.8;
+ letter-spacing: 1.2px;
color: var(--text);
+ white-space: pre-line;
+ flex: 1 1 auto;
+ min-height: 0;
+ max-height: none;
+ overflow-y: auto;
+ padding-right: 6px;
+}
+
+.timeline-thread-wrap {
+ position: relative;
+ width: 100%;
+ height: clamp(104px, 14vh, 140px);
+ overflow: hidden;
+ margin-top: 14px;
+ flex: 0 0 clamp(104px, 14vh, 140px);
+}
+
+.timeline-thread-svg {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ pointer-events: none;
}
-.timeline-item.active .timeline-event {
+#timeline-thread-path {
+ fill: none;
+ stroke: #4fd1d9f2;
+ stroke-width: 3.4;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ filter: drop-shadow(0 0 16px #4fd1d9a0);
+}
+
+.timeline-node-track {
+ --node-count: 6;
+ position: absolute;
+ inset: 0;
+ z-index: 2;
+ display: grid;
+ grid-template-columns: repeat(var(--node-count), minmax(0, 1fr));
+ align-items: end;
+ padding: 0 clamp(8px, 1.4vw, 20px) clamp(6px, 1.2vh, 12px);
+}
+
+.timeline-node {
+ --lift: 0px;
+ appearance: none;
+ border: none;
+ background: transparent;
+ color: inherit;
+ font-family: inherit;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-self: center;
+ gap: 10px;
+ padding: 0 4px;
+ cursor: pointer;
+ transform: translateY(calc(var(--lift) * -1));
+ transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.timeline-node-dot {
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ border: 2px solid #4fd1d980;
+ background: #0a1628;
+ box-shadow:
+ 0 0 0 4px #4fd1d912,
+ 0 0 10px #4fd1d940;
+ transition:
+ transform 0.3s ease,
+ border-color 0.3s ease,
+ background 0.3s ease,
+ box-shadow 0.3s ease;
+}
+
+.timeline-node-label {
+ font-size: clamp(11px, 1.3vw, 15px);
+ letter-spacing: 2px;
+ color: #4fd1d9b7;
+ white-space: nowrap;
+ transition: color 0.3s ease;
+}
+
+.timeline-node:hover .timeline-node-dot,
+.timeline-node:focus-visible .timeline-node-dot,
+.timeline-node.active .timeline-node-dot {
+ border-color: var(--gold);
+ background: var(--gold);
+ box-shadow:
+ 0 0 0 4px #4fd1d924,
+ 0 0 18px #4fd1d978;
+ transform: scale(1.08);
+}
+
+.timeline-node:hover .timeline-node-label,
+.timeline-node:focus-visible .timeline-node-label,
+.timeline-node.active .timeline-node-label {
color: var(--gold);
}
+.timeline-node:focus-visible {
+ outline: none;
+}
+
/* ===== FAQ SECTION ===== */
#faq-section {
border-top: 2px solid #4fd1d920;
@@ -862,14 +1005,14 @@ label {
}
.perks-bento {
- display: grid;
- grid-template-columns: 2fr 1fr 1fr;
- grid-template-rows: auto auto auto;
- gap: 3px;
- max-width: 750px;
- margin: 0 auto;
- position: relative;
- z-index: 1;
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr;
+ grid-template-rows: auto auto auto;
+ gap: 3px;
+ max-width: 750px;
+ margin: 0 auto;
+ position: relative;
+ z-index: 1;
}
@media (max-width: 480px) {
@@ -936,7 +1079,7 @@ label {
}
.bento-wide {
- grid-column: 1 / 4;
+ grid-column: 1 / 4;
}
.bento-network-row {
@@ -1878,12 +2021,14 @@ a.team-card {
/* ===== TIMELINE LINE DRAW ===== */
.timeline-line {
position: absolute;
- left: 140px;
+ left: 50%;
top: 0;
+ transform: translateX(-50%);
width: 1px;
height: 0;
background: var(--red);
z-index: 1;
+ pointer-events: none;
transition: none;
}
@@ -1963,6 +2108,16 @@ a.team-card {
.bento-wide {
grid-column: 1 / -1;
}
+ .bento-hero {
+ grid-column: 1 / -1;
+ grid-row: auto;
+ text-align: center;
+ padding: 30px 16px;
+ }
+
+ .bento-wide {
+ grid-column: 1 / -1;
+ }
.bento-cell {
padding: 24px 16px;
@@ -1991,30 +2146,79 @@ a.team-card {
}
/* Timeline */
- .timeline::before {
- left: 0;
+ .timeline-content {
+ width: min(calc(100vw - 24px), 1180px);
+ padding-top: 58px;
+ padding-bottom: 20px;
}
- .timeline-item {
- flex-direction: column;
- gap: 4px;
- padding-left: 20px;
+ .timeline-hub {
+ min-height: clamp(400px, 58vh, 520px);
+ gap: 14px;
}
- .timeline-dot {
- left: -4px;
- top: 34px;
+ .timeline-panels {
+ --timeline-panel-height: auto;
+ grid-template-columns: 1fr;
+ gap: 14px;
+ height: auto;
+ flex: initial;
+ }
+
+ .timeline-panel-datebox,
+ .timeline-panel-detailbox {
+ transform: none;
}
- .timeline-date {
- text-align: left;
- min-width: auto;
- font-size: clamp(16px, 4vw, 24px);
+ .timeline-panel {
+ height: auto;
+ padding: 22px 18px;
}
- .timeline-event {
- padding-left: 0;
+ .timeline-panel-date {
+ font-size: clamp(40px, 8.2vw, 64px);
+ margin-bottom: 10px;
+ }
+
+ .timeline-panel-day {
font-size: 12px;
+ letter-spacing: 2px;
+ }
+
+ .timeline-panel-title {
+ font-size: clamp(16px, 4.4vw, 26px);
+ }
+
+ .timeline-panel-body {
+ font-size: 12px;
+ line-height: 1.75;
+ flex: initial;
+ min-height: initial;
+ max-height: 220px;
+ }
+
+ .timeline-thread-wrap {
+ height: 102px;
+ margin-top: 10px;
+ flex: initial;
+ }
+
+ .timeline-node-track {
+ padding-bottom: 8px;
+ }
+
+ .timeline-node {
+ gap: 8px;
+ }
+
+ .timeline-node-dot {
+ width: 15px;
+ height: 15px;
+ }
+
+ .timeline-node-label {
+ font-size: 10px;
+ letter-spacing: 1.4px;
}
/* FAQ */
@@ -2157,6 +2361,83 @@ a.team-card {
font-size: clamp(32px, 12vw, 48px);
}
+ /* Timeline */
+ .timeline-content {
+ width: calc(100vw - 16px);
+ padding-top: 46px;
+ padding-bottom: 14px;
+ }
+
+ .timeline-hub {
+ min-height: 360px;
+ gap: 12px;
+ }
+
+ .timeline-panel {
+ height: auto;
+ padding: 18px 14px;
+ }
+
+ .timeline-panel-label {
+ font-size: 9px;
+ letter-spacing: 2.4px;
+ margin-bottom: 12px;
+ }
+
+ .timeline-panel-date {
+ font-size: clamp(34px, 11vw, 52px);
+ white-space: normal;
+ min-height: 0;
+ }
+
+ .timeline-panel-day {
+ font-size: 10px;
+ letter-spacing: 1.5px;
+ }
+
+ .timeline-panel-title {
+ font-size: 14px;
+ letter-spacing: 1.2px;
+ margin-bottom: 10px;
+ }
+
+ .timeline-panel-body {
+ font-size: 11px;
+ line-height: 1.65;
+ flex: initial;
+ min-height: initial;
+ max-height: 176px;
+ }
+
+ .timeline-thread-wrap {
+ height: 92px;
+ margin-top: 8px;
+ flex: initial;
+ }
+
+ .timeline-node-track {
+ padding: 0 4px 6px;
+ }
+
+ .timeline-node-dot {
+ width: 10px;
+ height: 10px;
+ }
+
+ .timeline-node-label {
+ font-size: 9px;
+ letter-spacing: 1px;
+ }
+
+ .timeline-panels {
+ transform: none;
+ }
+
+ .timeline-panel-datebox,
+ .timeline-panel-detailbox {
+ transform: none;
+ }
+
/* Team */
.team-card {
min-width: 90px;
+
+
+
+
+
+
+
+
+
+
+
+
+