/* ========================================================================= IAIN TERNATE — Homepage, built from scratch A self-contained design system (no Bootstrap grid dependency). Prefixed with "ht-" (Home Template) to avoid collisions with legacy theme classes still used elsewhere in the site. ========================================================================= */ :root { /* Color */ --ink-900: #0a140f; --ink-800: #16261f; --body-600: #4b5b52; --muted-500: #7c8b82; --surface: #ffffff; --surface-soft: #f5f9f6; --surface-tint: #e9f6ee; --line: #e2ebe5; --green-950: #052015; --green-900: #07331f; --green-800: #0b4a2c; --green-700: #106038; --green-600: #147a45; --green-500: #1c9453; --green-400: #2fb868; --lime-400: #7fe08a; --lime-100: #e6fbe9; --gold-500: #f2b134; --grad-brand: linear-gradient(135deg, var(--green-800) 0%, var(--green-600) 55%, var(--green-500) 100%); --grad-dark: linear-gradient(160deg, var(--green-950) 0%, var(--green-900) 45%, var(--green-800) 100%); --grad-mesh: radial-gradient(circle at 15% 20%, rgba(127, 224, 138, 0.25), transparent 40%), radial-gradient(circle at 85% 0%, rgba(242, 177, 52, 0.15), transparent 40%); --grad-gold: linear-gradient(135deg, #c9861f 0%, var(--gold-500) 55%, #ffd77a 100%); --grad-deep: linear-gradient(135deg, var(--green-950) 0%, var(--green-800) 100%); --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-full: 999px; --shadow-sm: 0 4px 16px rgba(6, 30, 18, 0.08); --shadow-md: 0 14px 34px rgba(6, 30, 18, 0.12); --shadow-lg: 0 28px 64px rgba(6, 30, 18, 0.18); --container: 1240px; } /* ========================================================================= Reset / base ========================================================================= */ .ht-body, .ht-body * { box-sizing: border-box; } /* The off-canvas mobile nav is `position: fixed` + `transform`, which in some engines still contributes to the document's horizontal scrollable area even though it's visually parked off-screen. Clipping on (the actual scrolling box) — not just — keeps the viewport from ever growing wider than the screen because of it. */ html { overflow-x: hidden; } .ht-body { margin: 0; font-family: var(--font-body); color: var(--body-600); background: var(--surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.65; overflow-x: hidden; width: 100%; } .ht-body img { max-width: 100%; display: block; } .ht-body a { text-decoration: none; } /* :where() keeps this reset at zero specificity so it never fights any real component color rule (single-class OR descendant, e.g. ".ht-btn", ".ht-footer__social a"). Without this, ".ht-body a" (class+element) used to outrank single-class rules like ".ht-btn--primary" and silently replace their intended color with the inherited ambient text color — that mismatch was the cause of low-contrast, hard-to-read links/buttons. */ :where(.ht-body) a { color: inherit; } .ht-body ul { margin: 0; padding: 0; list-style: none; } .ht-body h1, .ht-body h2, .ht-body h3, .ht-body h4, .ht-body h5 { font-family: var(--font-display); color: var(--ink-900); margin: 0; line-height: 1.25; } .ht-body button { font-family: inherit; cursor: pointer; } .ht-skip-link { position: absolute; left: -999px; top: auto; } .ht-skip-link:focus { left: 12px; top: 12px; z-index: 10000; background: var(--ink-900); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); } .ht-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* Buttons ---------------------------------------------------------------- */ .ht-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; padding: 14px 28px; border-radius: var(--r-full); border: none; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; white-space: nowrap; } .ht-btn--primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-sm); } .ht-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(11, 74, 44, 0.32); } .ht-btn--light { background: #fff; color: var(--green-800); box-shadow: var(--shadow-md); } .ht-btn--light:hover { background: var(--lime-400); color: var(--ink-900); transform: translateY(-3px); } .ht-btn--outline { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.55); } .ht-btn--outline:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; } .ht-btn--ghost { background: var(--surface-tint); color: var(--green-700); } .ht-btn--ghost:hover { background: var(--grad-brand); color: #fff; } .ht-btn--sm { padding: 10px 20px; font-size: 13px; } /* Section heading component ---------------------------------------------- */ .ht-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-700); background: var(--surface-tint); padding: 8px 18px; border-radius: var(--r-full); margin-bottom: 18px; } .ht-eyebrow--light { color: #eafff0; background: rgba(255, 255, 255, 0.12); } .ht-eyebrow i { color: var(--green-600); } .ht-eyebrow--light i { color: var(--lime-400); } .ht-heading { font-size: 36px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 14px; } .ht-heading mark { background: none; color: var(--green-600); position: relative; } .ht-lead { font-size: 16.5px; color: var(--muted-500); max-width: 600px; line-height: 1.75; } .ht-section-head { margin-bottom: 56px; } .ht-section { padding: 100px 0; position: relative; } .ht-section--soft { background: var(--surface-soft); } .ht-section--dark { background: var(--grad-dark); color: rgba(255, 255, 255, 0.78); } .ht-section--dark .ht-heading, .ht-section--dark h2, .ht-section--dark h3, .ht-section--dark h4 { color: #fff; } /* Layout helpers */ .ht-grid { display: grid; gap: 28px; } .ht-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .ht-center { text-align: center; margin-left: auto; margin-right: auto; } /* ========================================================================= Top utility bar ========================================================================= */ .ht-topbar { background: var(--ink-900); color: rgba(255, 255, 255, 0.75); font-size: 13px; } .ht-topbar__inner { display: flex; align-items: center; justify-content: space-between; padding: 9px 24px; gap: 16px; } .ht-topbar__info { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .ht-topbar__info i { color: var(--lime-400); margin-right: 6px; } .ht-topbar__sep { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.2); display: inline-block; } .ht-topbar__social { display: flex; gap: 8px; flex-shrink: 0; } .ht-topbar__social a { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; font-size: 11px; transition: background 0.2s ease, transform 0.2s ease; } .ht-topbar__social a:hover { background: var(--lime-400); color: var(--ink-900); transform: translateY(-2px); } /* ========================================================================= Header / navigation ========================================================================= */ .ht-header { position: sticky; top: 0; z-index: 500; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow 0.25s ease; } .ht-header.is-scrolled { box-shadow: var(--shadow-sm); } .ht-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 24px; } .ht-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .ht-brand__logo { width: 46px; height: 46px; object-fit: contain; } .ht-brand__text { display: flex; flex-direction: column; line-height: 1.2; } .ht-brand__text strong { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--ink-900); } .ht-brand__text small { font-size: 11.5px; color: var(--muted-500); font-weight: 500; } .ht-nav { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: flex-end; } .ht-nav__list { display: flex; align-items: center; gap: 4px; } .ht-nav__item { position: relative; } .ht-nav__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--ink-800); background: none; border: none; padding: 10px 14px; border-radius: var(--r-sm); letter-spacing: 0.01em; } .ht-nav__link i { font-size: 10px; color: var(--muted-500); transition: transform 0.2s ease; } .ht-nav__item:hover .ht-nav__link, .ht-nav__link.is-active { color: var(--green-700); background: var(--surface-tint); } .ht-nav__item:hover .ht-nav__link i { transform: rotate(180deg); color: var(--green-600); } .ht-dropdown { position: absolute; top: calc(100% + 10px); left: 0; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 12px; min-width: 240px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 50; } .ht-dropdown--wide { flex-direction: row; min-width: 420px; gap: 8px; } .ht-dropdown--wide-4 { min-width: 640px; } .ht-nav__list > .has-dropdown:last-child .ht-dropdown { left: auto; right: 0; } .ht-dropdown__col { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 0 8px; } .ht-dropdown__col:not(:last-child) { border-right: 1px solid var(--line); } .ht-dropdown__title { font-family: var(--font-display); font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-500); padding: 8px 12px 6px; } .ht-nav__item:hover .ht-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .ht-dropdown__link { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-800); padding: 10px 12px; border-radius: var(--r-sm); } .ht-dropdown__link i { color: var(--green-600); width: 16px; text-align: center; } .ht-dropdown__link:hover { background: var(--surface-tint); color: var(--green-700); } .ht-nav__cta { flex-shrink: 0; } .ht-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; background: var(--surface-tint); border: none; border-radius: var(--r-sm); align-items: center; } .ht-nav-toggle span { width: 20px; height: 2px; background: var(--green-800); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .ht-nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ht-nav-toggle.is-active span:nth-child(2) { opacity: 0; } .ht-nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================= Hero ========================================================================= */ .ht-hero { position: relative; background: var(--grad-dark); overflow: hidden; padding: 90px 0 150px; } .ht-hero::before { content: ''; position: absolute; inset: -4%; background-image: url('/front/constra/theme/images/slider-main/Assets2.png'); background-size: cover; background-position: center 65%; opacity: 0.22; animation: ht-hero-pan 22s ease-in-out infinite alternate; will-change: transform; } .ht-hero::after { content: ''; position: absolute; inset: 0; /* Strong, mostly-opaque scrim so text never sits directly on the photo — the mesh glow is layered UNDER the scrim and nudged away from the copy. */ background: linear-gradient(180deg, rgba(5, 32, 21, 0.35) 0%, rgba(5, 32, 21, 0.55) 100%), linear-gradient(120deg, rgba(5, 32, 21, 0.98) 0%, rgba(6, 41, 26, 0.97) 45%, rgba(9, 58, 35, 0.93) 100%), radial-gradient(circle at 88% 82%, rgba(127, 224, 138, 0.22), transparent 42%), radial-gradient(circle at 92% 4%, rgba(242, 177, 52, 0.14), transparent 38%); } @keyframes ht-hero-pan { 0% { transform: scale(1) translate3d(0, 0, 0); } 100% { transform: scale(1.1) translate3d(-1.5%, -1%, 0); } } .ht-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 50px; } .ht-hero__tag { display: inline-flex; align-items: center; gap: 10px; background: rgba(5, 26, 16, 0.65); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); color: #fff; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 18px; border-radius: var(--r-full); margin-bottom: 26px; } .ht-hero__tag i { color: var(--lime-400); } h1.ht-hero__title { color: #fff; font-size: 52px; font-weight: 800; line-height: 1.14; letter-spacing: -0.015em; margin-bottom: 22px; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); } h1.ht-hero__title span { color: var(--lime-400); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 0 26px rgba(5, 32, 21, 0.55); } .ht-hero__desc { color: rgba(255, 255, 255, 0.88); font-size: 16.5px; line-height: 1.8; max-width: 520px; margin-bottom: 34px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); } .ht-hero__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; } .ht-hero__play { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; } .ht-hero__play span { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); display: inline-flex; align-items: center; justify-content: center; } .ht-hero__accreditation { display: flex; align-items: center; gap: 14px; color: rgba(255, 255, 255, 0.82); font-size: 13px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .ht-hero__accreditation strong { color: #fff; font-family: var(--font-display); } /* Hero visual card */ .ht-hero__visual { position: relative; } .ht-hero__photo { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 4.6; background: var(--surface-tint); animation: ht-float 6.5s ease-in-out infinite; animation-delay: -1s; } .ht-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .ht-hero__badge { position: absolute; display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(6px); padding: 14px 18px; border-radius: var(--r-md); box-shadow: var(--shadow-md); animation: ht-float 5.5s ease-in-out infinite; } .ht-hero__badge--top { top: 22px; left: -26px; animation-delay: 0s; } .ht-hero__badge--bottom { bottom: 22px; right: -26px; animation-delay: -2.75s; } @keyframes ht-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @media (prefers-reduced-motion: reduce) { .ht-hero::before, .ht-hero__photo, .ht-hero__badge { animation: none !important; } } .ht-hero__badge-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .ht-hero__badge strong { display: block; font-family: var(--font-display); font-size: 17px; color: var(--ink-900); line-height: 1.1; } .ht-hero__badge span { font-size: 12px; color: var(--muted-500); } /* Floating stat strip */ .ht-stat-strip { position: relative; z-index: 3; margin-top: -78px; } .ht-stat-strip__inner { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: repeat(4, 1fr); } .ht-stat { display: flex; align-items: center; gap: 16px; padding: 30px 26px; border-right: 1px solid var(--line); } .ht-stat:last-child { border-right: none; } .ht-stat__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--surface-tint); color: var(--green-700); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .ht-stat__num { font-family: var(--font-display); font-size: 27px; font-weight: 800; color: var(--ink-900); line-height: 1.1; } .ht-stat__label { font-size: 12.5px; color: var(--muted-500); font-weight: 600; } /* ========================================================================= Quick access bento grid ========================================================================= */ .ht-quicklinks { padding: 110px 0 100px; } .ht-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } .ht-bento__item { position: relative; grid-column: span 2; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .ht-bento__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); background: #fff; border-color: transparent; } .ht-bento__icon { width: 54px; height: 54px; border-radius: 15px; background: var(--grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; } .ht-bento__icon--gold { background: var(--grad-gold); } .ht-bento__icon--deep { background: var(--grad-deep); } .ht-bento__item h4 { font-size: 16.5px; font-weight: 800; } .ht-bento__item p { font-size: 13.5px; color: var(--muted-500); margin: -8px 0 4px; } .ht-bento__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--green-700); margin-top: auto; } .ht-bento__item:hover .ht-bento__link i { transform: translateX(4px); } .ht-bento__link i { font-size: 11px; transition: transform 0.2s ease; } /* Featured bento tile — large, bold gradient CTA card ------------------- */ .ht-bento__item--featured { grid-column: span 4; background: var(--grad-brand); border: none; padding: 34px 36px; justify-content: center; min-height: 220px; } .ht-bento__item--featured::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.16), transparent 45%), radial-gradient(circle at 8% 92%, rgba(242, 177, 52, 0.22), transparent 40%); pointer-events: none; } .ht-bento__item--featured::after { content: '\f19c'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; right: -18px; bottom: -30px; font-size: 150px; color: rgba(255, 255, 255, 0.07); transform: rotate(-8deg); pointer-events: none; } .ht-bento__item--featured:hover { transform: translateY(-6px); background: var(--grad-brand); box-shadow: 0 28px 60px rgba(11, 74, 44, 0.35); } .ht-bento__item--featured .ht-bento__icon { background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(4px); width: 62px; height: 62px; font-size: 24px; position: relative; z-index: 1; } .ht-bento__item--featured h4 { color: #fff; font-size: 22px; position: relative; z-index: 1; } .ht-bento__item--featured p { color: rgba(255, 255, 255, 0.75); font-size: 14.5px; position: relative; z-index: 1; } .ht-bento__item--featured .ht-bento__link { color: #fff; background: rgba(255, 255, 255, 0.16); padding: 10px 18px; border-radius: var(--r-full); width: fit-content; position: relative; z-index: 1; transition: background 0.25s ease; } .ht-bento__item--featured:hover .ht-bento__link { background: #fff; color: var(--green-800); } /* Wide bento tile — full-width horizontal banner ------------------------ */ .ht-bento__item--wide { grid-column: span 6; flex-direction: row; align-items: center; gap: 22px; padding: 24px 30px; } .ht-bento__item--wide .ht-bento__link { margin-top: 0; margin-left: auto; flex-shrink: 0; } .ht-bento__item--wide h4 { margin-bottom: 2px; } .ht-bento__item--wide p { margin: 0; } /* ========================================================================= About / profile split section ========================================================================= */ .ht-about__inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; } .ht-about__media { position: relative; } .ht-about__photo { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); } .ht-about__photo img { width: 100%; display: block; } .ht-about__ring { position: absolute; width: 130px; height: 130px; border: 2px dashed var(--green-400); border-radius: 50%; top: -30px; right: -30px; opacity: 0.4; } .ht-about__blob { position: absolute; width: 340px; height: 340px; background: radial-gradient(circle, rgba(28, 148, 83, 0.16), transparent 70%); border-radius: 50%; top: -60px; left: -80px; z-index: -1; } .ht-about__collage { position: absolute; right: -34px; top: -34px; width: 128px; height: 128px; border-radius: var(--r-md); overflow: hidden; border: 5px solid #fff; box-shadow: var(--shadow-md); transform: rotate(6deg); transition: transform 0.3s ease; } .ht-about__media:hover .ht-about__collage { transform: rotate(0deg) scale(1.04); } .ht-about__collage img { width: 100%; height: 100%; object-fit: cover; display: block; } .ht-about__quote { position: absolute; left: -30px; bottom: 32px; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 20px 22px; max-width: 250px; } .ht-about__quote i { color: var(--gold-500); font-size: 20px; margin-bottom: 8px; display: block; } .ht-about__quote p { font-size: 13.5px; font-weight: 600; color: var(--ink-800); margin: 0; line-height: 1.6; } .ht-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0 34px; } .ht-pillar { background: var(--surface-soft); border-radius: var(--r-md); padding: 20px 16px; text-align: center; border: 1px solid var(--line); } .ht-pillar i { color: var(--green-600); font-size: 22px; margin-bottom: 10px; display: block; } .ht-pillar strong { display: block; font-family: var(--font-display); font-size: 14px; color: var(--ink-900); margin-bottom: 4px; } .ht-pillar span { font-size: 12px; color: var(--muted-500); } .ht-about__list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; } .ht-about__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--body-600); } .ht-about__list i { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-tint); color: var(--green-600); font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } /* ========================================================================= Berita — editorial grid (featured + list) ========================================================================= */ .ht-editorial { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; } .ht-featured-card { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: block; min-height: 460px; background: var(--surface-tint); } .ht-featured-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .ht-featured-card:hover img { transform: scale(1.06); } .ht-featured-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 20, 15, 0) 35%, rgba(6, 20, 15, 0.92) 100%); z-index: 1; } .ht-featured-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 34px 30px; color: #fff; } .ht-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--lime-400); color: var(--ink-900); font-family: var(--font-display); font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--r-full); margin-bottom: 14px; } .ht-featured-card__body h3 { color: #fff; font-size: 24px; line-height: 1.35; margin-bottom: 12px; } .ht-featured-card__meta { display: flex; gap: 18px; font-size: 12.5px; color: rgba(255, 255, 255, 0.75); } .ht-news-list { display: flex; flex-direction: column; gap: 20px; } .ht-news-row { display: flex; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .ht-news-row:last-child { border-bottom: none; padding-bottom: 0; } .ht-news-row__thumb { width: 118px; height: 92px; border-radius: var(--r-md); overflow: hidden; flex-shrink: 0; background: var(--surface-tint); } .ht-news-row__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .ht-news-row:hover .ht-news-row__thumb img { transform: scale(1.08); } .ht-news-row__body h4 { font-size: 15.5px; line-height: 1.5; margin-bottom: 8px; } .ht-news-row__body h4 a { color: var(--ink-900); } .ht-news-row:hover .ht-news-row__body h4 a { color: var(--green-700); } .ht-news-row__meta { display: flex; gap: 14px; font-size: 12px; color: var(--muted-500); } .ht-news-row__meta i { margin-right: 4px; color: var(--green-500); } .ht-share-row { display: flex; gap: 8px; margin-top: 10px; } .ht-share-row a { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; opacity: 0.7; transition: opacity 0.2s ease, transform 0.2s ease; } .ht-share-row a:hover { opacity: 1; transform: translateY(-2px); } .ht-share-row img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================= Pengumuman ========================================================================= */ .ht-announce-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 24px; align-items: stretch; } /* Featured (most recent) announcement -------------------------------------- */ .ht-announce-feature { position: relative; background: var(--grad-dark); border-radius: var(--r-lg); padding: 32px 30px; color: #fff; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; } .ht-announce-feature__deco { position: absolute; inset: auto -30% -40% auto; width: 220px; height: 220px; background: radial-gradient(circle, rgba(127, 224, 138, 0.28), transparent 70%); border-radius: 50%; z-index: -1; } .ht-announce-feature__badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: rgba(242, 177, 52, 0.16); color: var(--gold-500); border: 1px solid rgba(242, 177, 52, 0.35); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--r-full); margin-bottom: 22px; } .ht-announce-feature__icon { width: 52px; height: 52px; border-radius: 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--lime-400); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 20px; } .ht-announce-feature__title { font-size: 21px; line-height: 1.4; margin-bottom: 16px; flex-grow: 1; } .ht-announce-feature__title a { color: #fff; transition: color 0.2s ease; } .ht-announce-feature:hover .ht-announce-feature__title a { color: var(--lime-400); } .ht-announce-feature__date { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-bottom: 24px; } .ht-announce-feature__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; background: #fff; color: var(--green-800); font-family: var(--font-display); font-size: 13.5px; font-weight: 700; padding: 13px 22px; border-radius: var(--r-full); transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease; } .ht-announce-feature__cta:hover { background: var(--lime-400); color: var(--ink-900); transform: translateY(-3px); } /* Compact list of the remaining announcements ------------------------------ */ .ht-announce-list { display: flex; flex-direction: column; gap: 16px; } .ht-announce-row { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; flex: 1; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .ht-announce-row:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .ht-announce-row__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px; background: var(--surface-tint); color: var(--green-700); display: flex; align-items: center; justify-content: center; font-size: 18px; } .ht-announce-row__body { flex-grow: 1; min-width: 0; } .ht-announce-row__body h4 { font-size: 15.5px; line-height: 1.45; margin-bottom: 8px; } .ht-announce-row__body h4 a { color: var(--ink-900); transition: color 0.2s ease; } .ht-announce-row:hover .ht-announce-row__body h4 a { color: var(--green-700); } .ht-announce-row__date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted-500); font-weight: 600; } .ht-announce-row__dl { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--ink-900); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background 0.25s ease, transform 0.25s ease; } .ht-announce-row__dl:hover { background: var(--grad-brand); transform: scale(1.08); } /* ========================================================================= Spotlight pull-quote banner ========================================================================= */ .ht-spotlight { position: relative; background: var(--grad-gold); overflow: hidden; } .ht-spotlight::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 10% 15%, rgba(255, 255, 255, 0.28), transparent 40%), radial-gradient(circle at 92% 85%, rgba(11, 74, 44, 0.18), transparent 45%); } .ht-spotlight::after { content: '\f10d'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 4%; top: 50%; transform: translateY(-50%); font-size: 220px; color: rgba(255, 255, 255, 0.14); line-height: 1; } .ht-spotlight__inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; text-align: center; } .ht-spotlight__quote { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.5; color: var(--ink-900); margin-bottom: 28px; } .ht-spotlight__sig { display: inline-flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.7); padding: 10px 22px 10px 10px; border-radius: var(--r-full); } .ht-spotlight__sig-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--grad-deep); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .ht-spotlight__sig strong { display: block; font-family: var(--font-display); font-size: 13.5px; color: var(--ink-900); } .ht-spotlight__sig span { font-size: 12px; color: var(--ink-800); opacity: 0.75; } /* ========================================================================= Fakultas showcase ========================================================================= */ .ht-faculty-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .ht-faculty-card { position: relative; background: var(--surface-soft); border-radius: var(--r-lg); padding: 32px 22px 26px; text-align: center; border: 1px solid var(--line); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .ht-faculty-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .ht-faculty-card:nth-child(2)::before, .ht-faculty-card:nth-child(5)::before { background: var(--grad-gold); } .ht-faculty-card:nth-child(3)::before { background: var(--grad-deep); } .ht-faculty-card:hover::before { transform: scaleX(1); } .ht-faculty-card:hover { transform: translateY(-6px); background: #fff; box-shadow: var(--shadow-lg); } .ht-faculty-card__icon { width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 18px; background: var(--grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 23px; transition: transform 0.3s ease; } .ht-faculty-card:nth-child(2) .ht-faculty-card__icon, .ht-faculty-card:nth-child(5) .ht-faculty-card__icon { background: var(--grad-gold); } .ht-faculty-card:nth-child(3) .ht-faculty-card__icon { background: var(--grad-deep); } .ht-faculty-card:hover .ht-faculty-card__icon { transform: scale(1.08) rotate(-4deg); } .ht-faculty-card h4 { font-size: 14.5px; line-height: 1.4; margin-bottom: 6px; } .ht-faculty-card span { font-size: 12px; color: var(--muted-500); font-weight: 700; letter-spacing: 0.06em; } .ht-faculty-card__cta { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--green-700); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease; } .ht-faculty-card:hover .ht-faculty-card__cta { max-height: 20px; opacity: 1; margin-top: 10px; } .ht-faculty-card__cta i { font-size: 10px; } /* ========================================================================= Campus life gallery strip ========================================================================= */ .ht-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 140px 140px 140px; gap: 18px; } .ht-gallery__item { position: relative; border-radius: var(--r-md); overflow: hidden; } .ht-gallery__item--a { grid-column: 1 / 3; grid-row: 1 / 4; } .ht-gallery__item--b { grid-column: 3 / 4; grid-row: 1 / 4; } .ht-gallery__item--c { grid-column: 4 / 5; grid-row: 1 / 3; } .ht-gallery__item--d { grid-column: 4 / 5; grid-row: 3 / 4; } .ht-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .ht-gallery__item:hover img { transform: scale(1.08); } .ht-gallery__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5, 32, 21, 0.78) 100%); opacity: 0; transition: opacity 0.3s ease; } .ht-gallery__item:hover::after { opacity: 1; } .ht-gallery__caption { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; } .ht-gallery__item--d .ht-gallery__caption { font-size: 12.5px; } .ht-gallery__item:hover .ht-gallery__caption { opacity: 1; transform: translateY(0); } /* ========================================================================= CTA banner ========================================================================= */ .ht-cta-banner { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--grad-brand); padding: 64px 60px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .ht-cta-banner::before { content: ''; position: absolute; inset: 0; background: var(--grad-mesh); } .ht-cta-banner__text { position: relative; z-index: 1; max-width: 560px; } .ht-cta-banner__text h3 { color: #fff; font-size: 30px; margin-bottom: 12px; } .ht-cta-banner__text p { color: rgba(255, 255, 255, 0.85); font-size: 15.5px; margin: 0; } .ht-cta-banner__actions { position: relative; z-index: 1; display: flex; gap: 14px; flex-wrap: wrap; } /* ========================================================================= Footer ========================================================================= */ .ht-footer { background: var(--grad-dark); padding: 84px 0 0; } .ht-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; } .ht-brand--footer .ht-brand__text strong { color: #fff; } .ht-brand--footer .ht-brand__text small { color: rgba(255, 255, 255, 0.55); } .ht-footer__brand p { color: rgba(255, 255, 255, 0.62); font-size: 14px; line-height: 1.8; margin: 18px 0 20px; } .ht-footer__social { display: flex; gap: 10px; } .ht-footer__social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); display: flex; align-items: center; justify-content: center; color: #fff; transition: background 0.2s ease, transform 0.2s ease; } .ht-footer__social a:hover { background: var(--lime-400); color: var(--ink-900); transform: translateY(-3px); } .ht-footer__col h4 { color: #fff; font-size: 15px; font-weight: 800; margin-bottom: 22px; position: relative; padding-bottom: 12px; } .ht-footer__col h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; background: var(--lime-400); border-radius: 2px; } .ht-footer__col ul { display: flex; flex-direction: column; gap: 12px; } .ht-footer__col a { color: rgba(255, 255, 255, 0.62); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; } .ht-footer__col a::before { content: '\f105'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: var(--lime-400); font-size: 10px; } .ht-footer__col a:hover { color: var(--lime-400); padding-left: 3px; } .ht-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } .ht-footer__bottom p { margin: 0; color: rgba(255, 255, 255, 0.5); font-size: 13px; } .ht-back-to-top { width: 42px; height: 42px; border-radius: 50%; background: var(--lime-400); color: var(--ink-900); border: none; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: transform 0.2s ease; } .ht-back-to-top:hover { transform: translateY(-4px); } /* ========================================================================= Page header (used by inner/content pages: Sejarah, Visi Misi, Berita, Pengumuman list & detail pages) ========================================================================= */ .ht-page-header { position: relative; background: var(--grad-dark); padding: 56px 0 68px; overflow: hidden; isolation: isolate; } .ht-page-header::before { content: ''; position: absolute; inset: 0; background: var(--grad-mesh); z-index: -1; } .ht-page-header::after { content: ''; position: absolute; inset: auto -10% -60% auto; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(127, 224, 138, 0.16), transparent 70%); z-index: -1; } .ht-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.55); margin-bottom: 18px; } .ht-breadcrumb a { color: rgba(255, 255, 255, 0.78); transition: color 0.2s ease; } .ht-breadcrumb a:hover { color: var(--lime-400); } .ht-breadcrumb i { font-size: 9px; color: rgba(255, 255, 255, 0.4); } .ht-breadcrumb span[aria-current] { color: var(--lime-400); } .ht-page-header__title { color: #fff !important; font-size: 38px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 14px; max-width: 720px; } .ht-page-header__desc { color: rgba(255, 255, 255, 0.72); font-size: 15.5px; line-height: 1.75; max-width: 640px; } /* ========================================================================= Search bar (used on the Pengumuman/Berita list pages) ========================================================================= */ .ht-search-bar { display: flex; gap: 10px; background: #fff; border-radius: var(--r-full); box-shadow: var(--shadow-lg); padding: 6px 6px 6px 22px; align-items: center; max-width: 560px; margin-top: 28px; } .ht-search-bar i { color: var(--muted-500); font-size: 15px; } .ht-search-bar input { flex-grow: 1; border: none; outline: none; font-family: var(--font-body); font-size: 14.5px; color: var(--ink-900); background: transparent; padding: 12px 0; } .ht-search-bar input::placeholder { color: var(--muted-500); } .ht-search-bar button { flex-shrink: 0; background: var(--grad-brand); color: #fff; border: none; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; padding: 12px 22px; border-radius: var(--r-full); transition: transform 0.2s ease; } .ht-search-bar button:hover { transform: translateY(-2px); } /* ========================================================================= Pagination ========================================================================= */ .ht-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 48px; } .ht-pagination__item, .ht-pagination__link, .ht-pagination__dots { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 6px; border-radius: var(--r-full); font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--ink-800); background: var(--surface-soft); border: 1px solid var(--line); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .ht-pagination__link:hover { border-color: var(--green-600); color: var(--green-700); transform: translateY(-2px); } .ht-pagination__link.is-active { background: var(--grad-brand); border-color: transparent; color: #fff; } .ht-pagination__link.is-disabled { opacity: 0.4; pointer-events: none; } .ht-pagination__dots { background: transparent; border: none; color: var(--muted-500); } /* ========================================================================= Article layout (Detail Berita / Detail Pengumuman) ========================================================================= */ .ht-article-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 44px; align-items: start; } .ht-article { background: #fff; } .ht-article__cover { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 28px; box-shadow: var(--shadow-md); } .ht-article__cover img { width: 100%; max-height: 460px; object-fit: cover; } .ht-article__filecard { display: flex; align-items: center; gap: 20px; background: var(--grad-dark); color: #fff; border-radius: var(--r-lg); padding: 28px 30px; margin-bottom: 28px; } .ht-article__filecard i { font-size: 40px; color: var(--lime-400); flex-shrink: 0; } .ht-article__filecard h6 { font-size: 15.5px; font-weight: 700; color: #fff; margin-bottom: 4px; word-break: break-all; } .ht-article__filecard small { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); } .ht-article__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-bottom: 18px; } .ht-article__meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--muted-500); } .ht-article__meta i { color: var(--green-600); } .ht-article__title { font-size: 30px; line-height: 1.35; margin-bottom: 22px; } .ht-article__body { font-size: 16px; line-height: 1.9; color: var(--body-600); } .ht-article__body p { margin: 0 0 20px; } .ht-article__body h1, .ht-article__body h2, .ht-article__body h3, .ht-article__body h4 { margin: 36px 0 16px; } .ht-article__body img { max-width: 100%; border-radius: var(--r-md); margin: 24px 0; } .ht-article__body ul, .ht-article__body ol { margin: 0 0 20px; padding-left: 22px; } .ht-article__body li { margin-bottom: 8px; } .ht-article__body blockquote { border-left: 3px solid var(--green-600); background: var(--surface-tint); padding: 18px 24px; border-radius: 0 var(--r-md) var(--r-md) 0; margin: 24px 0; font-style: italic; color: var(--ink-800); } .ht-article__body a { color: var(--green-700); text-decoration: underline; text-decoration-color: rgba(20, 122, 69, 0.35); } .ht-article__download { display: inline-flex; align-items: center; gap: 10px; background: var(--ink-900); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; padding: 15px 26px; border-radius: var(--r-full); margin-top: 10px; transition: background 0.25s ease, transform 0.25s ease; } .ht-article__download:hover { background: var(--grad-brand); transform: translateY(-3px); } .ht-share-row { display: flex; align-items: center; gap: 12px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); } .ht-share-row span { font-size: 13.5px; font-weight: 700; color: var(--ink-800); } .ht-share-row a { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-tint); color: var(--green-700); display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .ht-share-row a:hover { background: var(--grad-brand); color: #fff; transform: translateY(-3px); } /* Sidebar widgets on detail pages ------------------------------------------ */ .ht-sidebar-card { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; margin-bottom: 24px; } .ht-sidebar-card h4 { font-size: 15px; font-weight: 800; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .ht-sidebar-list { display: flex; flex-direction: column; gap: 16px; } .ht-sidebar-item { display: flex; gap: 12px; align-items: flex-start; } .ht-sidebar-item__thumb { flex-shrink: 0; width: 60px; height: 60px; border-radius: 12px; overflow: hidden; background: var(--surface-tint); } .ht-sidebar-item__thumb img { width: 100%; height: 100%; object-fit: cover; } .ht-sidebar-item__body h5 { font-size: 13.5px; line-height: 1.4; font-weight: 700; margin-bottom: 6px; } .ht-sidebar-item__body h5 a { color: var(--ink-900); transition: color 0.2s ease; } .ht-sidebar-item__body h5 a:hover { color: var(--green-700); } .ht-sidebar-item__body span { font-size: 12px; color: var(--muted-500); font-weight: 600; } .ht-sidebar-cta { background: var(--grad-dark); border-radius: var(--r-lg); padding: 28px 24px; color: #fff; text-align: center; } .ht-sidebar-cta i { font-size: 26px; color: var(--lime-400); margin-bottom: 12px; } .ht-sidebar-cta h4 { color: #fff; border: none; padding: 0; margin-bottom: 10px; } .ht-sidebar-cta p { font-size: 13.5px; color: rgba(255, 255, 255, 0.72); margin-bottom: 18px; } /* Simple content blocks used on Sejarah / Visi Misi ------------------------ */ .ht-content-card { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 30px; } .ht-timeline { position: relative; padding-left: 32px; border-left: 2px solid var(--line); } .ht-timeline__item { position: relative; padding-bottom: 32px; } .ht-timeline__item:last-child { padding-bottom: 0; } .ht-timeline__item::before { content: ''; position: absolute; left: -39px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--grad-brand); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--green-600); } .ht-timeline__year { display: inline-block; font-family: var(--font-display); font-weight: 800; color: var(--green-700); font-size: 15px; margin-bottom: 6px; } /* Numbered mission-style list & term/definition grid (Visi Misi, etc.) ----- */ .ht-num-list { list-style: none; padding: 0; margin: 22px 0; display: flex; flex-direction: column; gap: 12px; } .ht-num-list li { display: flex; align-items: flex-start; gap: 16px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 20px; font-size: 15.5px; line-height: 1.7; color: var(--body-600); } .ht-num-list__index { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 13.5px; } .ht-term-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 24px 0; } .ht-term-card { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; } .ht-term-card strong { display: block; color: var(--green-700); font-family: var(--font-display); font-size: 15px; margin-bottom: 6px; } .ht-term-card span { font-size: 13.5px; color: var(--body-600); line-height: 1.65; } .ht-pull-quote { position: relative; background: var(--grad-dark); color: #fff; border-radius: var(--r-lg); padding: 40px 44px; font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.5; text-align: center; margin: 0 0 40px; } .ht-pull-quote i { color: var(--lime-400); font-size: 22px; margin-bottom: 10px; display: block; } .ht-callout { background: var(--surface-soft); border-left: 4px solid var(--green-600); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 20px 24px; margin-bottom: 18px; font-size: 15.5px; line-height: 1.8; color: var(--body-600); text-align: justify; } .ht-callout:nth-child(even) { border-left-color: var(--gold-500); } .ht-intro-card { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px; box-shadow: var(--shadow-sm); margin-bottom: 56px; } .ht-intro-card__stat { background: var(--grad-brand); color: #fff; border-radius: var(--r-lg); padding: 30px; text-align: center; } .ht-intro-card__stat strong { display: block; font-family: var(--font-display); font-size: 40px; font-weight: 800; margin-bottom: 6px; } .ht-intro-card__stat span { font-size: 13.5px; opacity: 0.9; } @media (max-width: 720px) { .ht-intro-card { grid-template-columns: 1fr; padding: 28px; } } /* ========================================================================= Document/announcement grid (Pengumuman & Berita list pages) ========================================================================= */ .ht-doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .ht-doc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; height: 100%; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .ht-doc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; } .ht-doc-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .ht-doc-card__icon { width: 46px; height: 46px; border-radius: 13px; background: var(--surface-tint); color: var(--green-700); display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background 0.25s ease, color 0.25s ease; } .ht-doc-card:hover .ht-doc-card__icon { background: var(--grad-brand); color: #fff; } .ht-doc-card__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-700); background: var(--surface-tint); padding: 5px 12px; border-radius: var(--r-full); } .ht-doc-card h4 { font-size: 16px; line-height: 1.5; margin-bottom: 16px; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ht-doc-card h4 a { color: var(--ink-900); transition: color 0.2s ease; } .ht-doc-card:hover h4 a { color: var(--green-700); } .ht-doc-card__meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; } .ht-doc-card__meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted-500); font-weight: 600; } .ht-doc-card__meta i { color: var(--green-600); width: 14px; } .ht-doc-card__dl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--ink-900); color: #fff; font-family: var(--font-display); font-size: 13.5px; font-weight: 700; padding: 12px 18px; border-radius: var(--r-full); transition: background 0.25s ease; } .ht-doc-card__dl:hover { background: var(--grad-brand); } .ht-search-results { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; background: var(--surface-tint); border-radius: var(--r-md); padding: 16px 22px; margin-bottom: 32px; font-size: 14px; color: var(--ink-800); } .ht-search-results strong { color: var(--green-800); } .ht-search-results .ht-badge { background: var(--grad-brand); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: var(--r-full); } .ht-search-results a { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green-700); } .ht-empty-state { text-align: center; padding: 70px 30px; background: var(--surface-soft); border-radius: var(--r-lg); border: 1px dashed var(--line); } .ht-empty-state i { font-size: 40px; color: var(--muted-500); margin-bottom: 18px; } .ht-empty-state h4 { font-size: 18px; margin-bottom: 8px; } .ht-empty-state p { color: var(--muted-500); font-size: 14.5px; } .ht-empty-state a { color: var(--green-700); font-weight: 700; } @media (max-width: 980px) { .ht-doc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .ht-doc-grid { grid-template-columns: 1fr; } .ht-search-results a { margin-left: 0; } } /* ========================================================================= News grid card (Berita list page) ========================================================================= */ .ht-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .ht-news-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform 0.3s ease, box-shadow 0.3s ease; } .ht-news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .ht-news-card__thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; } .ht-news-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .ht-news-card:hover .ht-news-card__thumb img { transform: scale(1.08); } .ht-news-card__tag { position: absolute; top: 14px; left: 14px; background: rgba(5, 32, 21, 0.72); backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--r-full); } .ht-news-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex-grow: 1; } .ht-news-card__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; } .ht-news-card__meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-500); font-weight: 600; } .ht-news-card__meta i { color: var(--green-600); } .ht-news-card__body h3 { font-size: 16.5px; line-height: 1.45; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ht-news-card__body h3 a { color: var(--ink-900); transition: color 0.2s ease; } .ht-news-card:hover .ht-news-card__body h3 a { color: var(--green-700); } .ht-news-card__excerpt { font-size: 13.5px; line-height: 1.7; color: var(--muted-500); margin-bottom: 18px; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ht-news-card__more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--green-700); align-self: flex-start; } .ht-news-card__more i { font-size: 11px; transition: transform 0.2s ease; } .ht-news-card:hover .ht-news-card__more i { transform: translateX(4px); } @media (max-width: 980px) { .ht-news-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .ht-news-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .ht-term-grid { grid-template-columns: 1fr; } } @media (max-width: 980px) { .ht-article-layout { grid-template-columns: 1fr; } .ht-page-header__title { font-size: 30px; } } @media (max-width: 640px) { .ht-search-bar { max-width: none; } .ht-page-header { padding: 44px 0 56px; } } .ht-img-fallback { object-fit: contain !important; padding: 16%; background: var(--surface-tint); } /* ========================================================================= Scroll reveal + misc animation utility ========================================================================= */ .ht-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.65s ease, transform 0.65s ease; } .ht-reveal.is-visible { opacity: 1; transform: translateY(0); } /* ========================================================================= Responsive ========================================================================= */ @media (max-width: 1100px) { .ht-hero__inner { grid-template-columns: 1fr; } .ht-hero__visual { max-width: 420px; margin: 0 auto; } .ht-about__inner { grid-template-columns: 1fr; } .ht-about__media { max-width: 460px; margin: 0 auto; } .ht-editorial { grid-template-columns: 1fr; } .ht-faculty-grid { grid-template-columns: repeat(3, 1fr); } .ht-gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: 260px 260px; } .ht-gallery__item--a, .ht-gallery__item--b, .ht-gallery__item--c, .ht-gallery__item--d { grid-column: auto; grid-row: auto; } .ht-spotlight__quote { font-size: 24px; } .ht-spotlight::after { font-size: 150px; } .ht-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .ht-topbar__info span:nth-child(3), .ht-topbar__sep { display: none; } .ht-nav-toggle { display: flex; } .ht-nav { position: fixed; top: 0; right: 0; height: 100vh; width: 300px; max-width: 86vw; background: #fff; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 100px 24px 40px; transform: translateX(100%); transition: transform 0.3s ease; box-shadow: var(--shadow-lg); overflow-y: auto; gap: 20px; } .ht-nav.is-open { transform: translateX(0); } .ht-nav__list { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; } .ht-nav__link { width: 100%; justify-content: space-between; } .ht-dropdown, .ht-dropdown--wide { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: var(--surface-soft); display: none; min-width: 0; margin: 4px 0 8px; } .ht-nav__item.is-open .ht-dropdown { display: flex; } .ht-nav__cta { margin-top: 10px; text-align: center; justify-content: center; } .ht-bento { grid-template-columns: repeat(2, 1fr); } .ht-bento__item { grid-column: span 1; } .ht-bento__item--featured, .ht-bento__item--wide { grid-column: span 2; } .ht-bento__item--wide { flex-direction: column; align-items: flex-start; } .ht-bento__item--wide .ht-bento__link { margin-left: 0; } .ht-about__collage { width: 96px; height: 96px; right: -14px; top: -20px; } .ht-announce-layout { grid-template-columns: 1fr; } .ht-faculty-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .ht-section { padding: 70px 0; } .ht-heading { font-size: 28px; } .ht-hero { padding: 60px 0 110px; } .ht-hero__title { font-size: 34px; } .ht-hero__badge { position: static; margin-bottom: 14px; } .ht-hero__badge--bottom { margin-top: 14px; } .ht-stat-strip__inner { grid-template-columns: repeat(2, 1fr); } .ht-stat { border-right: none; border-bottom: 1px solid var(--line); padding: 22px 18px; } .ht-gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: 160px 160px; } .ht-spotlight__quote { font-size: 20px; } .ht-spotlight__sig { flex-wrap: wrap; text-align: left; } .ht-cta-banner { padding: 44px 28px; text-align: center; justify-content: center; } .ht-cta-banner__actions { justify-content: center; } .ht-footer__grid { grid-template-columns: 1fr; gap: 32px; } .ht-footer__bottom { flex-direction: column; gap: 16px; text-align: center; } } @media (max-width: 520px) { .ht-faculty-grid, .ht-bento { grid-template-columns: repeat(1, 1fr); } .ht-bento__item--wide { flex-direction: column; align-items: flex-start; } .ht-topbar__info { display: none; } } @media (max-width: 460px) { .ht-bento { grid-template-columns: repeat(2, 1fr); } .ht-bento__item { padding: 22px 16px; } .ht-bento__item h4 { font-size: 15px; } }