/*
Theme Name: Hostinger AI Theme
Theme URI: https://hostinger.com
Description: Modern AI-powered theme for StriktureHub
Author: Hostinger
Version: 1.0.0
*/
/* ========================================
GLOBAL RESET & BASE STYLES
======================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
height: auto;
}
/* ========================================
CONTAINER & LAYOUT
======================================== */
.strukturehub-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
/* ========================================
HOMEPAGE HERO SECTION
======================================== */
.strukturehub-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 100px 40px;
text-align: center;
border-radius: 24px;
margin: 40px 0 60px;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
}
.strukturehub-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.strukturehub-hero h1 {
font-size: 4rem;
margin-bottom: 20px;
font-weight: 800;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: relative;
z-index: 1;
letter-spacing: -0.02em;
}
.strukturehub-hero p {
font-size: 1.4rem;
opacity: 0.95;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
line-height: 1.6;
}
/* ========================================
SECTION HEADERS
======================================== */
.strukturehub-section {
margin-bottom: 80px;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 3px solid #667eea;
position: relative;
}
.section-header::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 100px;
height: 3px;
background: linear-gradient(90deg, #764ba2, transparent);
animation: slideRight 2s ease-in-out infinite;
}
@keyframes slideRight {
0% { width: 100px; }
50% { width: 200px; }
100% { width: 100px; }
}
.section-header h2 {
font-size: 2.5em;
color: #2c3e50;
margin: 0;
font-weight: 800;
letter-spacing: -0.02em;
}
.section-header h3 {
font-size: 1.8em;
color: #2c3e50;
margin: 0;
font-weight: 700;
}
/* ========================================
BUTTONS
======================================== */
.view-all-btn, .apply-btn, .read-more {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 30px;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 8px;
}
.view-all-btn::before, .apply-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s ease;
}
.view-all-btn:hover::before, .apply-btn:hover::before {
left: 100%;
}
.view-all-btn:hover, .apply-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
color: white;
}
.apply-btn {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}
.apply-btn:hover {
box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}
.read-more {
color: #667eea;
background: none;
box-shadow: none;
padding: 0;
font-weight: 600;
}
.read-more::after {
content: '→';
transition: transform 0.3s ease;
}
.read-more:hover {
gap: 12px;
color: #764ba2;
transform: none;
box-shadow: none;
}
.read-more:hover::after {
transform: translateX(4px);
}
/* ========================================
GRID LAYOUTS
======================================== */
.strukturehub-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
margin-top: 30px;
}
.strukturehub-list {
display: grid;
grid-template-columns: 1fr;
gap: 25px;
}
/* ========================================
CARD STYLES
======================================== */
.strukturehub-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid #f0f0f0;
position: relative;
animation: fadeInUp 0.6s ease-out backwards;
}
.strukturehub-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #667eea, #764ba2);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
.strukturehub-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.25);
}
.strukturehub-card:hover::before {
transform: scaleX(1);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.strukturehub-card:nth-child(1) { animation-delay: 0.1s; }
.strukturehub-card:nth-child(2) { animation-delay: 0.2s; }
.strukturehub-card:nth-child(3) { animation-delay: 0.3s; }
.strukturehub-card:nth-child(4) { animation-delay: 0.4s; }
.strukturehub-card:nth-child(5) { animation-delay: 0.5s; }
.strukturehub-card:nth-child(6) { animation-delay: 0.6s; }
.card-image {
width: 100%;
height: 240px;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
filter: brightness(0.95);
}
.strukturehub-card:hover .card-image {
transform: scale(1.1);
filter: brightness(1);
}
.card-content {
padding: 30px;
position: relative;
}
.card-title {
font-size: 1.6rem;
margin-bottom: 15px;
color: #1a1a2e;
font-weight: 700;
line-height: 1.3;
}
.card-title a {
color: #1a1a2e;
text-decoration: none;
background: linear-gradient(to right, #667eea, #764ba2);
background-size: 0 2px;
background-repeat: no-repeat;
background-position: left bottom;
transition: background-size 0.3s ease, color 0.3s ease;
}
.strukturehub-card:hover .card-title a {
background-size: 100% 2px;
color: #667eea;
}
.card-excerpt {
color: #666;
line-height: 1.7;
margin-bottom: 20px;
font-size: 1rem;
}
.card-meta {
display: flex;
gap: 20px;
flex-wrap: wrap;
font-size: 0.95em;
color: #888;
margin-bottom: 20px;
}
.card-meta span {
display: flex;
align-items: center;
gap: 6px;
}
/* ========================================
NEWSLETTER CARDS
======================================== */
.newsletter-card {
border-left: 5px solid #667eea;
}
.newsletter-card:hover {
border-left-color: #764ba2;
}
/* ========================================
FIRM CARDS
======================================== */
.firm-card {
border-left: 5px solid #28a745;
}
.firm-specialization {
display: inline-block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 8px 20px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 12px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
}
.firm-specialization:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
/* ========================================
PROJECT CARDS
======================================== */
.project-card {
border-top: 5px solid #28a745;
}
.funding-amount {
font-size: 2rem;
font-weight: 800;
margin: 15px 0;
display: block;
background: linear-gradient(135deg, #11998e, #38ef7d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: fundingPulse 2s ease-in-out infinite;
}
@keyframes fundingPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
.project-status {
display: inline-block;
padding: 8px 20px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 12px;
color: white;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.project-status:hover {
transform: translateY(-2px);
}
.status-sanctioned {
background: linear-gradient(135deg, #28a745, #20c997);
}
.status-planning {
background: linear-gradient(135deg, #ffc107, #ff9800);
color: #333;
}
.status-in_progress {
background: linear-gradient(135deg, #17a2b8, #0dcaf0);
}
.status-completed {
background: linear-gradient(135deg, #6c757d, #495057);
}
/* ========================================
RESOURCE & FLASHCARD CARDS
======================================== */
.resource-card {
border-left: 5px solid #ffc107;
}
.exam-badge {
display: inline-block;
background: linear-gradient(135deg, #f093fb, #f5576c);
color: white;
padding: 8px 20px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 12px;
margin-right: 8px;
box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
transition: all 0.3s ease;
}
.exam-badge:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
}
.flashcard-preview {
background-color: #f8f9fa;
padding: 20px;
border-radius: 12px;
margin: 15px 0;
border-left: 4px solid #667eea;
transition: all 0.3s ease;
}
.flashcard-preview:hover {
background-color: #e9ecef;
border-left-color: #764ba2;
}
.flashcard-preview strong {
color: #667eea;
display: block;
margin-bottom: 8px;
font-size: 0.95rem;
}
.flashcard-preview p {
margin: 8px 0 0 0;
color: #495057;
}
.difficulty-badge {
padding: 5px 15px;
border-radius: 15px;
font-size: 0.85em;
font-weight: 700;
color: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.difficulty-easy {
background: linear-gradient(135deg, #28a745, #20c997);
}
.difficulty-medium {
background: linear-gradient(135deg, #ffc107, #ff9800);
color: #333;
}
.difficulty-hard {
background: linear-gradient(135deg, #dc3545, #c82333);
}
/* ========================================
JOB CARDS
======================================== */
.job-card {
border-left: 5px solid #dc3545;
}
.job-company {
font-weight: 700;
font-size: 1.3rem;
margin-bottom: 8px;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.job-location {
color: #888;
font-size: 1rem;
margin-bottom: 12px;
}
.job-salary {
font-size: 1.6rem;
font-weight: 700;
margin: 12px 0;
background: linear-gradient(135deg, #11998e, #38ef7d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ========================================
UTILITY CLASSES
======================================== */
.text-center {
text-align: center;
}
.mt-20 {
margin-top: 20px;
}
.mt-40 {
margin-top: 40px;
}
.mb-20 {
margin-bottom: 20px;
}
.mb-40 {
margin-bottom: 40px;
}
/* ========================================
RESPONSIVE DESIGN
======================================== */
@media (max-width: 1024px) {
.strukturehub-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
}
}
@media (max-width: 768px) {
.strukturehub-hero {
padding: 60px 30px;
}
.strukturehub-hero h1 {
font-size: 2.5rem;
}
.strukturehub-hero p {
font-size: 1.1rem;
}
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.section-header h2 {
font-size: 2rem;
}
.strukturehub-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.card-content {
padding: 20px;
}
}
@media (max-width: 480px) {
.strukturehub-hero h1 {
font-size: 1.8rem;
}
.section-header h2 {
font-size: 1.6rem;
}
.card-title {
font-size: 1.3rem;
}
.funding-amount {
font-size: 1.5rem;
}
.job-salary {
font-size: 1.3rem;
}
}
StruktureHub
Strukturehub
Strukturehub is your premier digital hub for exploring bridges, iconic buildings, and innovative interiors, connecting professionals and enthusiasts in the design world.
Comprehensive Project Insights
Explore detailed profiles of bridges, buildings, and interiors with technical specifications and media.
Industry Insights
Welcome to Strukturehub In today’s fast-paced digital world, staying connected to the universe of architectural marvels is more integral than…
9/10/2025
Welcome to Strukturehub Strukturehub.com is your modern digital destination that celebrates the incredible world of bridges, iconic buildings, and innovative…
9/10/2025
Explore Structures
Discover innovative bridges, iconic buildings, and leading firms in civil engineering and architecture. Join our community today!