@charset "utf-8";
/* Sinu custom theme: Purple-Blue Gossip Vibe */
:root{
--sinu-hero: linear-gradient(135deg, #6d0eb1 59%, #080ab4 100%);
--sinu-hero-solid: #522f9c; /* fallback mid tone for borders */
--sinu-hero-soft: rgba(255,255,255,.1);
--sinu-hero-text: #ffffff;
--sinu-hero-text-dim: rgba(255,255,255,.85);
--sinu-chip-bg: linear-gradient(135deg, #ff7bd5 0%, #67c1ff 100%);
--sinu-chip-text: #fff;
--sinu-chip-shadow: 0 8px 16px rgba(0,0,0,.22);
--sinu-purple: #7a3cff;
--sinu-blue: #00b2ff;
--sinu-pink: #ff2fb3;
--sinu-deep: #14122b;
--sinu-text: #1a1a1a;
--sinu-soft: #f5f7ff;
--sinu-grad: linear-gradient(90deg, var(--sinu-purple) 0%, var(--sinu-blue) 100%);
--sinu-grad-diag: linear-gradient(135deg, var(--sinu-purple) 0%, var(--sinu-pink) 35%, var(--sinu-blue) 100%);
}
:root{
--chip-purple: #6d0eb1;
--chip-magenta: #b10ea7;
--chip-pink: #ff2fb3;
--chip-red: #ff3d63;
--chip-orange: #ff7a37;
--chip-yellow: #ffc233;
--chip-lime: #7bdc2b;
--chip-teal: #18c3a1;
--chip-cyan: #23b2ff;
--chip-indigo: #3b4dff;
--chip-text: #ffffff;
}
.clone{display: none}
/* Header */
.header-personal{
background: var(--sinu-grad);
color: #fff;
}
.header-personal .navbar, .header-personal .navbar.clone{ background: transparent; }
/* Thin top border under header */
.topborder{ border-bottom: 2px solid rgba(255,255,255,.15); }
/* Social icon buttons */
.icon-button{
background: #ffffff; color: var(--sinu-purple);
border: none; border-radius: 999px; padding: 8px 10px;
}
.icon-button:hover{ color: var(--sinu-blue); }
/* Gossip chips */
.trend-chips{ background: var(--sinu-soft); }
.trend-chips .chips-scroll{ display:flex; gap:.5rem; overflow-x:auto; padding:.6rem 0; }
.trend-chips .chip{
display:inline-block; white-space:nowrap;
background: var(--sinu-grad-diag); color:#fff; text-decoration:none;
padding:.4rem .8rem; border-radius:999px; font-weight:700; font-size:.9rem;
box-shadow: 0 6px 18px rgba(122,60,255,.25);
}
.trend-chips .chip:hover{ opacity:.9; transform: translateY(-1px); }
/* Navbar links */
.navbar .nav-link{ padding:.75rem 1rem; border-radius:.75rem; font-weight:800; }
.navbar .nav-link:hover, .navbar .nav-link:focus{
background: rgba(122,60,255,.12);
color: var(--sinu-deep);
}
/* Badges */
.badge, .category-badge{
background: var(--sinu-grad-diag) !important; border:0; color:#fff !important;
box-shadow: 0 6px 14px rgba(0,178,255,.2);
}
.gradient-badge{ background: var(--sinu-grad-diag) !important; color:#fff !important; }
/* Section title gradient text */
.section-title{
font-family: "Noto Serif Sinhala", serif;
font-weight: 800; letter-spacing: .2px;
background: linear-gradient(90deg, var(--sinu-deep), var(--sinu-purple));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
/* Links and accents */
a{ color: var(--sinu-purple); }
a:hover{ color: var(--sinu-blue); }
/* Buttons */
.btn-primary, .btn-theme{
background: var(--sinu-grad); border:0;
box-shadow: 0 10px 24px rgba(122,60,255,.25);
}
.btn-primary:hover, .btn-theme:hover{ filter: brightness(0.97); }
/* Video section */
.video-section{
background-color: #f0fa81;
border-radius: 1.25rem; padding: 1rem 0 1.5rem 0;
}
.video-card{ background:#fff; border-radius: 1rem; overflow:hidden; box-shadow: 0 12px 28px rgba(20,18,43,.08); }
.video-card iframe{ display:block; }
.video-card .video-meta{ padding:.6rem .9rem; font-weight:700; }
.video-card.featured .video-meta{ font-size:1.05rem; }
.video-mini-grid{ gap:.75rem; }
/* Post badges & hover */
.post .thumb .category-badge{ background: var(--sinu-grad-diag) !important; }
.post .post-title a:hover{ color: var(--sinu-blue); }
/* Utility */
.parallelogram-badge{ transform: skewX(-12deg); }
.header-personal, .topborder, .icon-button{ transition: all .2s ease; }
/* Footer accent */
.site-footer{ border-top: 4px solid var(--sinu-purple); }
/* === Deep Redesign Enhancements === */
/* Sinhala font across the site */
html, body, .post-title, .section-title, .navbar, .sidebar, .widget, .badge, .category-badge, h1,h2,h3,h4,h5,h6, p, a, li, blockquote, input, textarea, button {
font-family: "Noto Serif Sinhala", serif !important;
}
.navbar-nav .nav-item .nav-link{font-family: "Alan Sans", sans-serif !important; font-weight: 700 !important}
/* Base sizes & rhythm */
html { font-size: 17px; }
h1{ font-size: 2.2rem; line-height:1.2; }
h2{ font-size: 1.9rem; line-height:1.25; }
h3{ font-size: 1.5rem; line-height:1.3; }
h4{ font-size: 1.25rem; } h5{ font-size: 1.05rem; }
p, .post .details, .sidebar .widget p{ line-height: 1.7; }
.section-header{ margin-bottom: .75rem; }
/* Overall background */
body{
background:
radial-gradient(1200px 500px at -5% -10%, rgba(122,60,255,.08), transparent 60%),
radial-gradient(900px 400px at 105% 0%, rgba(0,178,255,.08), transparent 60%),
#ffffff;
}
/* Hero */
.hero-colored{
background-image: var(--sinu-hero);
color: var(--sinu-hero-text);
position: relative;
overflow: hidden;
}
.hero-colored:before{
content: "";
position: absolute;
inset: 0;
background: radial-gradient(800px 400px at -10% -10%, rgba(255,255,255,.08), transparent 60%),
radial-gradient(800px 400px at 110% 0%, rgba(255,255,255,.06), transparent 60%);
pointer-events: none;
}
.hero-colored .lead-headline,
.hero-colored .mini-title,
.hero-colored .lead-subhed,
.hero-colored .explain-text,
.hero-colored .byline,
.hero-colored .lead-meta,
.hero-colored .mini-time{ color: var(--sinu-hero-text-dim); }
.hero-colored .lead-headline a,
.hero-colored .mini-title a{ color: var(--sinu-hero-text); text-decoration: none; }
.hero-colored .lead-headline a:hover,
.hero-colored .mini-title a:hover{ text-decoration: underline; }
.hero-colored .lead-card,
.hero-colored .mini-card{ background: transparent; border: 0; }
.hero-colored .mini-image, .hero-colored .lead-image{ border-radius: 14px; }
.hero-colored .byline{ opacity: .9; }
.hero-colored .container.section-wrap{ padding-top: 22px; padding-bottom: 22px; }
.hero-colored .mini-card{ padding-bottom: .25rem; border-bottom: 1px solid rgba(255,255,255,.18); }
.hero-colored .mini-card:last-child{ border-bottom: 0; }
.hero-colored .btn, .hero-colored .badge{ background: var(--sinu-chip-bg); color: var(--sinu-chip-text); border: 0; box-shadow: var(--sinu-chip-shadow); }
/*/* Spacing */
.main-plus-spacing .container-xl > .row,
.main-plus-spacing .container-xl > section, .section{ margin-bottom: 1.25rem; }
/* Framed images */
.img-framed{
border: 4px solid transparent; border-radius: 14px;
background: linear-gradient(#fff,#fff) padding-box,
linear-gradient(135deg, var(--sinu-purple), var(--sinu-pink), var(--sinu-blue)) border-box;
box-shadow: 0 18px 40px rgba(20,18,43,.12);
}
.img-framed:hover{ transform: translateY(-2px); }
/* Cards & sidebar */
.post.post-classic, .post.post-list, .post.post-grid, .widget-colorful{
border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px rgba(20,18,43,.06);
}
.sidebar .widget-colorful{
background: linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
border: 1px solid rgba(122,60,255,.18);
}
.sidebar .widget-colorful .widget-header, .sidebar .widget-colorful .section-title{
background: var(--sinu-grad-diag); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: .5rem;
}
.sidebar .post.post-list-sm{ border-bottom: 1px dashed rgba(0,0,0,.09); padding-bottom: .6rem; margin-bottom: .6rem; }
.sidebar .post.post-list-sm:last-child{ border-bottom: 0; margin-bottom: 0; }
.sidebar .post.post-list-sm .thumb img{ border-radius: 10px; }
.sidebar .post.post-list-sm .post-title{ font-size: 1rem; }
/* Links/Buttons */
a{ text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.video-section{ margin: 1.25rem 0; }
.video-card .video-meta{ letter-spacing: .2px; }
.navbar .nav-link.active, .navbar .nav-link:focus{ color: var(--sinu-purple); }
.category-badge.lg{ font-weight: 800; letter-spacing: .3px; }
.post:hover{ transform: translateY(-2px); transition: transform .15s ease; }
/* Header gradient and nav */
.header-personal,
.header-personal .navbar{ background: var(--sinu-hero); }
.header-personal .topborder{ background: var(--sinu-hero); border-bottom: 1px solid rgba(255,255,255,.18); }
.header-personal .navbar .nav-link{ color: #ffffff; font-weight: 700; letter-spacing: .3px; text-transform: none; }
.header-personal .navbar .nav-link:hover,
.header-personal .navbar .nav-link:focus{ color: #e8e8ff; }
.header-personal .navbar .nav-item.active > .nav-link{ color: #ffffff; /*border-bottom: 2px solid #ffffff;*/ }
.header-personal .logo img{ filter: drop-shadow(0 2px 8px rgba(0,0,0,.25)); }
/* Chips under logo (categories) */
.chips-scroll{ display: flex; gap: .5rem; overflow-x: auto; padding: .5rem 0 .75rem; }
.chips-scroll::-webkit-scrollbar{ height: 8px; }
.chips-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.35); border-radius: 8px; }
.chip{
display: inline-block;
padding: .45rem .9rem;
border-radius: 999px;
background-image: var(--sinu-chip-bg);
color: var(--sinu-chip-text);
font-weight: 700;
letter-spacing: .25px;
box-shadow: var(--sinu-chip-shadow);
white-space: nowrap;
border: 1px solid rgba(255,255,255,.38);
}
.chip:hover{ text-decoration: none; filter: brightness(1.05); transform: translateY(-1px); }
.chip.is-active{ outline: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.35) inset; }
/* Section headers & accents */
.section-title, .sidebar .widget-title{
-webkit-background-clip: text; background-clip: text;
color: transparent;
background-image: var(--sinu-hero);
}
.section-subtitle{ color: #5a5eec; font-weight: 600; }
.category-badge, .badge{ background-image: var(--sinu-hero); color: #ffffff; }
/* Buttons */
.btn-primary{
background-image: var(--sinu-hero);
border: 0;
color: #ffffff;
box-shadow: 0 8px 16px rgba(13,17,38,.25);
}
.btn-primary:hover{ filter: brightness(1.05); }
/* Trend chips bar under logo */
.trend-chips{
background: var(--sinu-hero);
border-top: 1px solid rgba(255,255,255,.18) !important;
border-bottom: 1px solid rgba(255,255,255,.18) !important;
padding-top: .35rem;
padding-bottom: .5rem;
}
.trend-chips .chip{ margin-right: .35rem; }
/* Full-bleed wave under #hero */
.hero-colored{
position: relative;
}
.hero-colored::after{
content:"";
position:absolute;
left:50%;
transform: translateX(-50%);
bottom:-1px; /* hide seam */
width:100vw; /* stretch edge-to-edge */
height:110px; /* adjust height as you like */
background:#fff; /* next section bg */
pointer-events:none;
/* create a repeating wave using an SVG mask so it scales crisply */
-webkit-mask: url('data:image/svg+xml;utf8,') repeat-x center bottom / 1200px 100%;
mask: url('data:image/svg+xml;utf8,') repeat-x center bottom / 1200px 100%;
}
@media (max-width: 768px){
.hero-colored::after{ height:90px; -webkit-mask-size: 900px 100%; mask-size: 900px 100%; }
}
.trend-chips{
background: #f3ecff; /* light lavender */
border-top: 1px solid rgba(109,14,177,.10) !important;
border-bottom: 1px solid rgba(109,14,177,.10) !important;
padding: .65rem 0 .2rem;
}
/* Chip rail — centered, touch scroll on small screens */
.trend-chips .chips-scroll{
display: flex;
flex-wrap: nowrap;
justify-content: center; /* center on wide screens */
gap: .4rem;
padding: .25rem .5rem;
overflow-x: auto; /* allow scroll when narrow */
-webkit-overflow-scrolling: touch;/* smooth touch scrolling */
scroll-behavior: smooth;
}
/* Hide scrollbar but keep scrolling */
.trend-chips .chips-scroll::-webkit-scrollbar{ height: 0; width: 0; }
.trend-chips .chips-scroll{ scrollbar-width: none; } /* Firefox */
/* Smaller, single-color chips */
.trend-chips .chip{
display: inline-block;
white-space: nowrap;
color: var(--chip-text);
font-weight: 800;
font-size: .85rem; /* smaller text */
line-height: 1;
padding: .38rem .75rem; /* smaller chip */
border-radius: 999px;
border: 1px solid rgba(255,255,255,.45);
box-shadow: 0 6px 14px rgba(20,18,43,.10);
text-decoration: none;
transition: transform .15s ease, filter .15s ease;
font-family: "Alan Sans", sans-serif !important; font-weight: 500 !important
}
.trend-chips .chip:hover{ transform: translateY(-1px); filter: brightness(1.05); }
/* Assign solid colors by order using nth-child (10-color cycle) */
.trend-chips .chip:nth-child(10n+1){ background: var(--chip-purple); }
.trend-chips .chip:nth-child(10n+2){ background: var(--chip-magenta); }
.trend-chips .chip:nth-child(10n+3){ background: var(--chip-pink); }
.trend-chips .chip:nth-child(10n+4){ background: var(--chip-red); }
.trend-chips .chip:nth-child(10n+5){ background: var(--chip-orange); }
.trend-chips .chip:nth-child(10n+6){ background: var(--chip-yellow); color:#2a1a00; border-color: rgba(0,0,0,.08); } /* better contrast on yellow */
.trend-chips .chip:nth-child(10n+7){ background: var(--chip-lime); }
.trend-chips .chip:nth-child(10n+8){ background: var(--chip-teal); }
.trend-chips .chip:nth-child(10n+9){ background: var(--chip-cyan); }
.trend-chips .chip:nth-child(10n+10){ background: var(--chip-indigo); }
/* Mobile tweaks — keep centered look but allow side-swipe */
@media (max-width: 768px){
.trend-chips .chips-scroll{
justify-content: center; /* stays centered; user can still swipe */
padding-left: .75rem;
padding-right: .75rem;
}
}
.post.post-list-sm::after {
margin-bottom: 0px !important;
margin-top: 0px !important;
display: none;
}
/* Light pastel gradient border — replaces: .lead-card .lead-image{border: 2px solid #eee;} */
.lead-card .lead-image{
display:block;
border: 2px solid transparent !important;
border-radius: 16px;
background-image:
linear-gradient(#ffffff,#ffffff), /* inner fill keeps corners crisp */
linear-gradient(135deg, #EFE6FF 0%, #E8EFFF 55%, #E4F7FF 100%); /* subtle lavender -> periwinkle -> ice blue */
background-clip: padding-box, border-box; /* show gradient only in border */
box-shadow: 0 8px 24px rgba(20,18,43,.08), 0 2px 6px rgba(20,18,43,.06); /* soft lift */
}
/* Match the right-rail cards with a thinner, softer variant */
.mini-card .mini-image{
display:block;
border: 1.5px solid transparent !important;
border-radius: 14px;
background-image:
linear-gradient(#ffffff,#ffffff),
linear-gradient(135deg, #F3ECFF 0%, #EDF3FF 60%, #EAF9FF 100%);
background-clip: padding-box, border-box;
box-shadow: 0 6px 16px rgba(20,18,43,.08), 0 1px 4px rgba(20,18,43,.06);
}
/* (Optional) tiny emphasis on hover without getting loud */
.lead-card .lead-image:hover,
.mini-card .mini-image:hover{
filter: brightness(1.02);
}
.post.post-classic .post-format {
font-size: 18px;
height: 35px;
line-height: 35px;
right: 50px;
bottom: -16px;
width: 75px;
}
.post .post-format {border-radius: 0%;}
.badge {
padding: .25em .55em;
font-size: .75em;
line-height: .9;
border-radius: .2rem;
margin-bottom: 2px;
}
/* ===== Subtle animated header gradient (matches hero palette) ===== */
/* Purple-first header, warm glows blended (very subtle) */
.header-personal,
.header-personal .topborder,
.header-personal .navbar{
/* subtle red/yellow glows layered on top of a multi-purple base */
background-image:
radial-gradient(60% 45% at 78% 42%, rgba(255,210,77,.06), transparent 60%), /* soft yellow glow */
radial-gradient(55% 40% at 62% 58%, rgba(255,61,99,.08), transparent 62%), /* soft red/magenta glow */
linear-gradient(135deg,
#6d0eb1 0%,
#7b23d2 22%,
#8c35e8 44%,
#a34cff 66%,
#7f2fd0 83%,
#5f20c1 100%
);
background-size: 220% 220%;
animation: headerGlow 22s ease-in-out infinite alternate;
color:#fff;
}
/* keep these as you had */
@keyframes headerGlow{
0%{ background-position: 0% 50%; }
100%{ background-position: 100% 50%; }
}
.header-personal .topborder{ border-bottom: 1px solid rgba(255,255,255,.18); }
.header-personal .navbar{ border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(0,0,0,.08); }
.header-personal .navbar .nav-link{ color:#fff; font-weight:800; letter-spacing:.2px; }
.header-personal .navbar .nav-link:hover{ color:#f2ebff; }
/* ===== Video Highlights: image thumbnails with centered play ===== */
.video-card{
position: relative;
border-radius: 14px;
overflow: hidden;
background: #fff;
}
.video-card .thumb{
position: relative;
display: block;
width: 100%;
height: 0;
padding-top: 56.25%; /* 16:9 */
background-size: cover;
background-position: center;
border-radius: 14px;
}
.video-card .play-btn{
--s: 64px;
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: var(--s); height: var(--s);
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ffffff 0%, #ffffff 45%, rgba(255,255,255,.92) 60%);
box-shadow: 0 12px 24px rgba(0,0,0,.22);
display: grid; place-items: center;
}
.video-card .play-btn:before{
content: "";
display: block;
margin-left: 4px;
width: 0; height: 0;
border-left: 18px solid #6d0eb1; /* triangle color */
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
.video-card.featured .play-btn{ --s: 76px; }
.video-card .thumb::after{
content:"";
position:absolute; inset:0;
background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(13,17,38,.25) 100%);
pointer-events:none;
}
.video-card .video-meta{
position:absolute; left: 12px; bottom: 10px; right: 12px;
color:#fff; font-weight:700; text-shadow: 0 2px 4px rgba(0,0,0,.45);
}
/* fine-tune right column minis */
.video-card.mini .play-btn{ --s: 52px; }
.video-card.mini .thumb{ border-radius: 12px; }
/* hide legacy iframe styles if any remain */
.video-card iframe{ display: none !important; }
.mini-time{font-family: "Alan Sans", sans-serif !important; font-weight: 500 !important}
.list-inline-item{font-family: "Alan Sans", sans-serif !important; font-weight: 500 !important}
/* Social icons — brand-colored circular buttons */
.header-personal .social-icons{ display:flex; gap:.55rem; }
.header-personal .social-icons .list-inline-item{ margin:0; }
.header-personal .social-icons.brand a{
--size: 36px;
width: var(--size);
height: var(--size);
border-radius: 50%;
display:inline-flex; align-items:center; justify-content:center;
color:#fff; /* icon color */
border:0;
box-shadow: 0 4px 12px rgba(0,0,0,.12);
transition: transform .15s ease, filter .2s ease;
}
.header-personal .social-icons.brand a:hover{
transform: translateY(-1px);
filter: brightness(1.05);
}
/* Make FA and inline