) nhận 24px trước khi token CSS kick in,
trong khi .couple-names (dùng
) chỉ nhận 16px → ảo giác "title
to hơn couple-names" dù typography module set ngược lại.
Selector KHÔNG có [data-wedding-template] → specificity (0,2,0) → áp dụng
ngay khi card render, trước khi attribute được gán (~100ms sau).
Khi token + typography rules (0,3,0) kick in, chúng thắng cascade đúng.
========================================================================== */
.gcc-preview-wedding-card .invitation-title,
.gcc-wedding-card .invitation-title {
font-size: inherit; /* neutralize UA h2 1.5em = 24px */
font-weight: inherit; /* neutralize UA h2 bold */
margin: 2px 0; /* neutralize UA h2 0.83em margins */
}
/* ==========================================================================
1. VISIBILITY TOGGLE
========================================================================== */
body.gcc-wedding-active .gcc-preview-general,
body.gcc-wedding-active #gccLivePreview { display: none !important; }
body.gcc-wedding-active .gcc-preview-wedding,
body.gcc-wedding-active #gccWeddingPreview { display: block !important; }
#gccWeddingPreview {
width: 100%;
margin: 0 auto;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
/* ==========================================================================
2. CANVAS BACKGROUND
========================================================================== */
.gcc-preview-wedding-card > canvas#gcc-bg-canvas,
.gcc-wedding-card > canvas#gcc-bg-canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none; z-index: 0;
border-radius: inherit;
}
.gcc-preview-wedding-card > *:not(canvas),
.gcc-wedding-card > *:not(canvas) {
position: relative; z-index: 1;
}
/* ==========================================================================
3. BACKGROUND IMAGE SUPPORT
--------------------------------------------------------------------------
Fix v5.1:
• background-size: cover CHỈ áp dụng khi có ảnh nền inline.
• Áp `cover` lên gradient làm gradient bị scale méo → dải đậm rơi vào
giữa card thay vì góc → bug "dải vàng đậm chiếm vùng header".
• position: relative giữ nguyên cho mọi trường hợp (cần cho ::before).
========================================================================== */
.gcc-preview-wedding-card,
main.gcc-preview-wedding-card,
.gcc-wedding-card,
#gccWeddingPreview .gcc-preview-wedding-card {
position: relative;
}
.gcc-preview-wedding-card[style*="background-image"],
main.gcc-preview-wedding-card[style*="background-image"],
.gcc-wedding-card[style*="background-image"],
#gccWeddingPreview .gcc-preview-wedding-card[style*="background-image"] {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.gcc-preview-wedding-card[style*="background-image"] .wedding-header,
.gcc-preview-wedding-card[style*="background-image"] .wedding-content,
.gcc-preview-wedding-card[style*="background-image"] .wedding-footer,
.gcc-preview-wedding-card[style*="background-image"] .wedding-photo-section,
.gcc-preview-wedding-card[style*="background-image"] .wedding-event-details,
.gcc-preview-wedding-card[style*="background-image"] .wedding-detail-item,
.gcc-preview-wedding-card[style*="background-image"] .wedding-parents-names,
.gcc-wedding-card[style*="background-image"] .wedding-header,
.gcc-wedding-card[style*="background-image"] .wedding-content,
.gcc-wedding-card[style*="background-image"] .wedding-footer,
.gcc-wedding-card[style*="background-image"] .wedding-photo-section,
.gcc-wedding-card[style*="background-image"] .wedding-event-details,
.gcc-wedding-card[style*="background-image"] .wedding-detail-item,
.gcc-wedding-card[style*="background-image"] .wedding-parents-names {
background: none !important;
background-color: transparent !important;
box-shadow: none !important;
}
.gcc-preview-wedding-card[style*="background-image"] .wedding-header::before,
.gcc-preview-wedding-card[style*="background-image"] .wedding-content::before,
.gcc-preview-wedding-card[style*="background-image"] .wedding-footer::before,
.gcc-preview-wedding-card[style*="background-image"] .wedding-photo-section::before,
.gcc-wedding-card[style*="background-image"] .wedding-header::before,
.gcc-wedding-card[style*="background-image"] .wedding-content::before,
.gcc-wedding-card[style*="background-image"] .wedding-footer::before,
.gcc-wedding-card[style*="background-image"] .wedding-photo-section::before {
content: none !important;
display: none !important;
}
/* ==========================================================================
4. BASE — dùng chung
========================================================================== */
.gcc-preview-wedding-card,
main.gcc-preview-wedding-card,
.gcc-wedding-card {
position: relative;
margin: 0 auto;
overflow: hidden;
}
/* ==========================================================================
4b. STRUCTURAL GLOBALS — moved from wedding-tokens.css
--------------------------------------------------------------------------
Các property structural bị lẫn vào tokens, chuyển về đây cho đúng vị trí.
========================================================================== */
/* Ornament: ẩn hoàn toàn — thay bằng wedding-divider */
.gcc-preview-wedding-card .wedding-ornament,
.gcc-wedding-card .wedding-ornament {
display: none !important;
}
.gcc-preview-wedding-card .wedding-ornament img,
.gcc-wedding-card .wedding-ornament img {
display: none !important;
}
/* Detail icon: overflow visible để SVG không bị clip */
.gcc-preview-wedding-card .detail-icon,
.gcc-wedding-card .detail-icon {
overflow: visible;
}
/* Scrim overlay — stacking context + positioning */
.gcc-preview-wedding-card[style*="background-image"],
.gcc-wedding-card[style*="background-image"] {
isolation: isolate;
}
.gcc-preview-wedding-card[style*="background-image"]::after,
.gcc-wedding-card[style*="background-image"]::after {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
border-radius: inherit;
}
/* ==========================================================================
5. PORTRAIT
--------------------------------------------------------------------------
Selector chung định nghĩa cấu trúc flex — áp dụng cho CẢ HAI.
Preview và card view chỉ override size riêng bên dưới.
========================================================================== */
/* ── 5a. Cấu trúc chung ── */
.gcc-preview-wedding-card[data-orientation="portrait"],
main.gcc-preview-wedding-card[data-orientation="portrait"],
.gcc-wedding-card[data-orientation="portrait"] {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
overflow: hidden;
}
/* Photo */
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-photo-section,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-photo-section,
.gcc-wedding-card[data-orientation="portrait"] .wedding-photo-section {
flex-shrink: 0;
align-self: center;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
order: -1;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-photo-section img,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-photo-section img,
.gcc-wedding-card[data-orientation="portrait"] .wedding-photo-section img {
width: 100%; height: 100%;
object-fit: cover; object-position: center; display: block;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-photo-placeholder,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-photo-placeholder,
.gcc-wedding-card[data-orientation="portrait"] .wedding-photo-placeholder {
width: 100%; height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 4px;
}
/* Header */
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-header,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-header,
.gcc-wedding-card[data-orientation="portrait"] .wedding-header {
flex-shrink: 0;
display: flex; flex-direction: column; align-items: center;
text-align: center;
scrollbar-width: none; -ms-overflow-style: none;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-header::-webkit-scrollbar,
.gcc-wedding-card[data-orientation="portrait"] .wedding-header::-webkit-scrollbar { display: none; width: 0; }
/* Couple names */
.gcc-preview-wedding-card[data-orientation="portrait"] .couple-names,
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-couple-names,
main.gcc-preview-wedding-card[data-orientation="portrait"] .couple-names,
.gcc-wedding-card[data-orientation="portrait"] .couple-names,
.gcc-wedding-card[data-orientation="portrait"] .wedding-couple-names {
display: flex; flex-direction: row; flex-wrap: wrap;
align-items: center; justify-content: center;
text-align: center; overflow: hidden;
}
/* Content */
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-content,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-content,
.gcc-wedding-card[data-orientation="portrait"] .wedding-content {
flex: 1 1 0; min-height: 0;
display: flex; flex-direction: column; overflow: hidden;
}
/* Message */
.gcc-preview-wedding-card[data-orientation="portrait"] .invitation-message,
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-message,
main.gcc-preview-wedding-card[data-orientation="portrait"] .invitation-message,
.gcc-wedding-card[data-orientation="portrait"] .invitation-message,
.gcc-wedding-card[data-orientation="portrait"] .wedding-message {
flex: 0 0 auto;
overflow-y: auto; overflow-x: hidden;
scrollbar-width: none; -ms-overflow-style: none;
text-align: center; white-space: pre-wrap; word-wrap: break-word;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .invitation-message::-webkit-scrollbar,
.gcc-wedding-card[data-orientation="portrait"] .invitation-message::-webkit-scrollbar { display: none; width: 0; }
/* Event details */
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-event-details,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-event-details,
.gcc-wedding-card[data-orientation="portrait"] .wedding-event-details {
flex: 1 1 0; min-height: 0;
display: flex; flex-direction: column;
overflow-y: auto; overflow-x: hidden;
scrollbar-width: none; -ms-overflow-style: none;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-event-details::-webkit-scrollbar,
.gcc-wedding-card[data-orientation="portrait"] .wedding-event-details::-webkit-scrollbar { display: none; width: 0; }
/* Detail item */
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-detail-item,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-detail-item,
.gcc-wedding-card[data-orientation="portrait"] .wedding-detail-item {
display: flex; flex-direction: row; align-items: flex-start; flex-shrink: 0;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .detail-content,
.gcc-wedding-card[data-orientation="portrait"] .detail-content { flex: 1 1 auto; min-width: 0; }
.gcc-preview-wedding-card[data-orientation="portrait"] .detail-label,
.gcc-wedding-card[data-orientation="portrait"] .detail-label { text-transform: uppercase; }
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-map-button,
.gcc-wedding-card[data-orientation="portrait"] .wedding-map-button {
display: inline-block; text-decoration: none; border-radius: 20px; cursor: pointer;
}
/* Footer */
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-footer,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-footer,
.gcc-wedding-card[data-orientation="portrait"] .wedding-footer {
flex-shrink: 0; width: 100%; text-align: center; overflow: hidden;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .footer-message,
main.gcc-preview-wedding-card[data-orientation="portrait"] .footer-message,
.gcc-wedding-card[data-orientation="portrait"] .footer-message {
text-align: center; width: 100%; display: block;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── 5b. Portrait — kích thước & font dùng CHUNG cho preview lẫn card view ──
Card view (.gcc-wedding-card) kế thừa HOÀN TOÀN từ preview (cùng max-width 360px,
cùng aspect-ratio 9/16, cùng font, cùng spacing). Không override gì thêm.
Block 5c cũ đã bị xoá để tránh phá ratio. */
.gcc-preview-wedding-card[data-orientation="portrait"],
main.gcc-preview-wedding-card[data-orientation="portrait"],
.gcc-wedding-card[data-orientation="portrait"] {
max-width: 360px; aspect-ratio: 9 / 16; padding: 12px 10px; gap: 0;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-photo-section,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-photo-section,
.gcc-wedding-card[data-orientation="portrait"] .wedding-photo-section {
width: 80px; height: 80px; flex: 0 0 80px; margin: 0 auto 6px;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-photo-placeholder svg,
.gcc-wedding-card[data-orientation="portrait"] .wedding-photo-placeholder svg { width: 30px; height: 30px; }
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-photo-placeholder span,
.gcc-wedding-card[data-orientation="portrait"] .wedding-photo-placeholder span { font-size: 8px; }
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-header,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-header,
.gcc-wedding-card[data-orientation="portrait"] .wedding-header {
gap: 2px; padding: 4px;
min-height: 0; overflow: hidden;
justify-content: flex-start;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-ornament,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-ornament,
.gcc-wedding-card[data-orientation="portrait"] .wedding-ornament { display: none !important; }
.gcc-preview-wedding-card[data-orientation="portrait"] .invitation-title,
main.gcc-preview-wedding-card[data-orientation="portrait"] .invitation-title,
.gcc-wedding-card[data-orientation="portrait"] .invitation-title,
.gcc-wedding-card[data-orientation="portrait"] .wedding-invitation-title { margin: 2px 0; }
.gcc-preview-wedding-card[data-orientation="portrait"] .couple-names,
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-couple-names,
main.gcc-preview-wedding-card[data-orientation="portrait"] .couple-names,
.gcc-wedding-card[data-orientation="portrait"] .couple-names,
.gcc-wedding-card[data-orientation="portrait"] .wedding-couple-names { gap: 4px; margin: 4px 0; max-height: 40px; }
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-parents-names,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-parents-names,
.gcc-wedding-card[data-orientation="portrait"] .wedding-parents-names {
height: 60px; max-height: 60px; overflow: hidden; text-align: center;
}
/* Divider — flex container (line — icon — line); KHÔNG còn là 1 thanh đặc */
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-divider,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-divider,
.gcc-wedding-card[data-orientation="portrait"] .wedding-divider {
width: 88%;
margin: 10px auto;
background: transparent;
border: none;
height: auto;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* Line 2 bên */
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-divider__line,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-divider__line,
.gcc-wedding-card[data-orientation="portrait"] .wedding-divider__line {
flex: 1 1 auto;
height: 1px;
background: currentColor;
opacity: 0.35;
}
/* Icon ở giữa — kích thước phù hợp với card portrait */
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-divider__icon svg,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-divider__icon svg,
.gcc-wedding-card[data-orientation="portrait"] .wedding-divider__icon svg {
width: 56px;
height: 28px;
display: block;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-divider--bottom,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-divider--bottom,
.gcc-wedding-card[data-orientation="portrait"] .wedding-divider--bottom {
margin-top: 0;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-content,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-content,
.gcc-wedding-card[data-orientation="portrait"] .wedding-content { gap: 4px; }
.gcc-preview-wedding-card[data-orientation="portrait"] .invitation-message,
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-message,
main.gcc-preview-wedding-card[data-orientation="portrait"] .invitation-message,
.gcc-wedding-card[data-orientation="portrait"] .invitation-message,
.gcc-wedding-card[data-orientation="portrait"] .wedding-message {
padding: 8px;
height: 180px; min-height: 180px; max-height: 180px;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-event-details,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-event-details,
.gcc-wedding-card[data-orientation="portrait"] .wedding-event-details { gap: 4px; padding: 6px; }
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-detail-item,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-detail-item,
.gcc-wedding-card[data-orientation="portrait"] .wedding-detail-item { gap: 6px; }
.gcc-preview-wedding-card[data-orientation="portrait"] .detail-icon,
.gcc-wedding-card[data-orientation="portrait"] .detail-icon { width: 16px; height: 16px; }
.gcc-preview-wedding-card[data-orientation="portrait"] .detail-icon svg,
.gcc-preview-wedding-card[data-orientation="portrait"] .detail-icon img,
.gcc-wedding-card[data-orientation="portrait"] .detail-icon svg,
.gcc-wedding-card[data-orientation="portrait"] .detail-icon img { width: 16px; height: 16px; display: block; }
.gcc-preview-wedding-card[data-orientation="portrait"] .detail-value,
.gcc-wedding-card[data-orientation="portrait"] .detail-value { word-wrap: break-word; }
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-map-button,
.gcc-wedding-card[data-orientation="portrait"] .wedding-map-button { padding: 3px 8px; margin-top: 4px; }
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-footer,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-footer,
.gcc-wedding-card[data-orientation="portrait"] .wedding-footer { padding: 4px 0 2px; }
/* ── 5c. Portrait PREVIEW — fix overflow ──
.wedding-header + divider icon chiếm quá nhiều chiều cao trong container
aspect-ratio 9/16 cố định → event-details và footer bị đẩy xuống overflow.
Fix: bỏ height cứng của parents-names và invitation-message, dùng flex
để các vùng tự phân bổ tỉ lệ trong chiều cao còn lại.
========================================================================== */
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-header,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-header {
height: auto;
min-height: 0;
max-height: none;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-parents-names,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-parents-names {
/* Bỏ height: 60px cứng → cap mềm để không chiếm quá nhiều */
height: auto;
max-height: 54px;
overflow: hidden;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .invitation-message,
main.gcc-preview-wedding-card[data-orientation="portrait"] .invitation-message,
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-message,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-message {
/* Bỏ height: 180px cứng → flex:1 chiếm không gian còn lại */
height: auto;
min-height: 0;
max-height: none;
flex: 1 1 0;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-divider__icon svg,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-divider__icon svg {
/* Thu nhỏ icon divider để tiết kiệm chiều cao trong header */
width: 40px;
height: 20px;
}
.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-divider,
main.gcc-preview-wedding-card[data-orientation="portrait"] .wedding-divider {
margin: 6px auto;
}
/* ── 5d. Portrait CARD VIEW — override các giá trị cố định px từ 5b ──
Card view cùng max-width 360px nhưng context khác (sidebar, modal, iframe)
→ thay height cứng bằng flex tỉ lệ để layout tự thích nghi.
========================================================================== */
.gcc-wedding-card[data-orientation="portrait"] .wedding-header {
/* Bỏ height cố định 200px → để flex tự phân bổ theo nội dung */
height: auto;
min-height: 0;
max-height: none;
/* Giữ justify-content: flex-start từ 5b */
padding: 6px 8px;
gap: 3px;
}
.gcc-wedding-card[data-orientation="portrait"] .wedding-parents-names {
/* Bỏ height cố định 60px → để nội dung tự co giãn */
height: auto;
max-height: none;
overflow: visible;
}
.gcc-wedding-card[data-orientation="portrait"] .invitation-message,
.gcc-wedding-card[data-orientation="portrait"] .wedding-message {
/* Bỏ height cố định 180px → flex:1 chiếm không gian còn lại */
height: auto;
min-height: 0;
max-height: none;
flex: 1 1 0;
}
.gcc-wedding-card[data-orientation="portrait"] .wedding-divider--bottom {
/* Reset về 0, divider nằm tự nhiên sau parents-names */
margin-top: 0;
}
/* ==========================================================================
6. LANDSCAPE
--------------------------------------------------------------------------
HTML có 4 grid-children sibling:
1. .wedding-photo-section
2. .wedding-header
3. .wedding-content
4. .wedding-footer
Layout chốt v6.3 (đã verify với HTML thật):
grid-template-columns: 34% 66%
grid-template-rows : auto 1fr 36px
photo → col 1, row 1 (auto-height, căn giữa, margin-top)
header → col 1, row 2 (flex-col, căn giữa, border-right gold)
content→ col 2, row 1/3 (span 2 rows phía trên = chiều cao chuẩn)
footer → col 1/-1, row 3 (full width, border-top gold, 36px)
========================================================================== */
/* ── 6a. Cấu trúc chung ── */
.gcc-preview-wedding-card[data-orientation="landscape"],
main.gcc-preview-wedding-card[data-orientation="landscape"],
.gcc-wedding-card[data-orientation="landscape"] {
display: grid;
grid-template-columns: 34% 66%;
grid-template-rows: auto 1fr 44px;
width: 100%;
overflow: hidden;
}
/* Photo — col 1, row 1 */
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-photo-section,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-photo-section,
.gcc-wedding-card[data-orientation="landscape"] .wedding-photo-section {
grid-column: 1; grid-row: 1;
aspect-ratio: 1 / 1; height: auto;
align-self: center; justify-self: center;
border-radius: 50%; overflow: hidden;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-photo-section img,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-photo-section img,
.gcc-wedding-card[data-orientation="landscape"] .wedding-photo-section img {
width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-photo-placeholder,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-photo-placeholder,
.gcc-wedding-card[data-orientation="landscape"] .wedding-photo-placeholder {
width: 100%; height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 4px;
}
/* Header — col 1, row 2: flex-col căn giữa, border-right gold */
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-header,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-header,
.gcc-wedding-card[data-orientation="landscape"] .wedding-header {
grid-column: 1; grid-row: 2;
align-self: stretch;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; overflow: hidden; min-height: 0;
/* border-right: visual → wedding-tokens.css § Landscape header */
}
/* Content — col 2, span row 1/3 (full height col phải) */
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-content,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-content,
.gcc-wedding-card[data-orientation="landscape"] .wedding-content {
grid-column: 2; grid-row: 1 / 3;
display: flex; flex-direction: column;
overflow: hidden; min-height: 0;
}
/* Message — chiếm 40% chiều cao col-content */
.gcc-preview-wedding-card[data-orientation="landscape"] .invitation-message,
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-message,
main.gcc-preview-wedding-card[data-orientation="landscape"] .invitation-message,
.gcc-wedding-card[data-orientation="landscape"] .invitation-message,
.gcc-wedding-card[data-orientation="landscape"] .wedding-message {
flex: 0 0 40%;
text-align: center; white-space: pre-wrap; word-wrap: break-word; width: 100%;
scrollbar-width: none; -ms-overflow-style: none;
display: flex; align-items: center; justify-content: center;
box-sizing: border-box;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .invitation-message::-webkit-scrollbar,
.gcc-wedding-card[data-orientation="landscape"] .invitation-message::-webkit-scrollbar { display: none; width: 0; }
/* Event details — flex 1 chiếm 60% còn lại */
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-event-details,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-event-details,
.gcc-wedding-card[data-orientation="landscape"] .wedding-event-details {
display: grid; grid-template-columns: 1fr 1fr;
flex: 1 1 0; min-height: 0; width: 100%; overflow: hidden;
box-sizing: border-box;
}
/* Last detail item: full width nếu lẻ */
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-event-details .wedding-detail-item:last-child:nth-child(odd),
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-event-details .wedding-detail-item:last-child:nth-child(odd),
.gcc-wedding-card[data-orientation="landscape"] .wedding-event-details .wedding-detail-item:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
/* Detail item */
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-detail-item,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-detail-item,
.gcc-wedding-card[data-orientation="landscape"] .wedding-detail-item {
display: flex; flex-direction: column; align-items: flex-start; overflow: hidden;
min-width: 0;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .detail-content,
main.gcc-preview-wedding-card[data-orientation="landscape"] .detail-content,
.gcc-wedding-card[data-orientation="landscape"] .detail-content {
flex: 1; min-width: 0; width: 100%; text-align: left;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .detail-label,
main.gcc-preview-wedding-card[data-orientation="landscape"] .detail-label,
.gcc-wedding-card[data-orientation="landscape"] .detail-label { text-transform: uppercase; }
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-map-button,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-map-button,
.gcc-wedding-card[data-orientation="landscape"] .wedding-map-button {
display: inline-block; text-decoration: none; border-radius: 20px; cursor: pointer;
}
/* Couple names */
.gcc-preview-wedding-card[data-orientation="landscape"] .couple-names,
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-couple-names,
main.gcc-preview-wedding-card[data-orientation="landscape"] .couple-names,
.gcc-wedding-card[data-orientation="landscape"] .couple-names,
.gcc-wedding-card[data-orientation="landscape"] .wedding-couple-names {
display: flex; flex-direction: row; flex-wrap: nowrap;
align-items: center; justify-content: center;
white-space: nowrap; overflow: hidden; max-width: 100%; text-align: center;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .groom-name,
.gcc-preview-wedding-card[data-orientation="landscape"] .bride-name,
main.gcc-preview-wedding-card[data-orientation="landscape"] .groom-name,
main.gcc-preview-wedding-card[data-orientation="landscape"] .bride-name,
.gcc-wedding-card[data-orientation="landscape"] .groom-name,
.gcc-wedding-card[data-orientation="landscape"] .bride-name {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .ampersand,
main.gcc-preview-wedding-card[data-orientation="landscape"] .ampersand,
.gcc-wedding-card[data-orientation="landscape"] .ampersand { flex: 0 0 auto; display: inline-block; }
/* Footer — full width row 3, border-top gold */
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-footer,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-footer,
.gcc-wedding-card[data-orientation="landscape"] .wedding-footer {
grid-column: 1 / -1; grid-row: 3;
display: flex; align-items: center; justify-content: center;
text-align: center; overflow: hidden;
/* border-top + background: visual → wedding-tokens.css § Landscape footer */
box-sizing: border-box;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .footer-message,
main.gcc-preview-wedding-card[data-orientation="landscape"] .footer-message,
.gcc-wedding-card[data-orientation="landscape"] .footer-message {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
width: 100%; text-align: center;
}
/* ── 6b. Landscape preview — kích thước nhỏ ── */
.gcc-preview-wedding-card[data-orientation="landscape"],
main.gcc-preview-wedding-card[data-orientation="landscape"] {
max-width: 700px; aspect-ratio: 16 / 9; padding: 0; gap: 0;
}
/* Photo */
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-photo-section,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-photo-section {
width: min(78px, 50%); margin-top: 16px;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-photo-placeholder svg { width: 26px; height: 26px; }
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-photo-placeholder span { font-size: 8px; }
/* Header */
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-header,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-header {
gap: 5px; padding: 8px 12px 14px 12px;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .invitation-title,
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-invitation-title,
main.gcc-preview-wedding-card[data-orientation="landscape"] .invitation-title {
text-transform: uppercase;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-ornament,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-ornament { display: none !important; }
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-ornament img,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-ornament img { display: none !important; }
.gcc-preview-wedding-card[data-orientation="landscape"] .couple-names,
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-couple-names,
main.gcc-preview-wedding-card[data-orientation="landscape"] .couple-names { gap: 4px; }
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-parents-names,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-parents-names {
overflow: hidden; text-align: center;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-divider,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-divider {
width: 80%;
margin: 6px auto;
background: transparent;
border: none;
height: auto;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-divider__line,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-divider__line {
flex: 1 1 auto;
height: 1px;
background: currentColor;
opacity: 0.35;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-divider__icon svg,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-divider__icon svg {
width: 44px;
height: 22px;
display: block;
}
/* Content */
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-content,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-content { gap: 10px; padding: 16px 16px 14px 14px; }
/* Message */
.gcc-preview-wedding-card[data-orientation="landscape"] .invitation-message,
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-message,
main.gcc-preview-wedding-card[data-orientation="landscape"] .invitation-message {
padding: 10px 14px;
}
/* Details */
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-event-details,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-event-details { padding: 8px; }
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-detail-item,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-detail-item { gap: 4px; padding: 8px 10px; justify-content: center; }
.gcc-preview-wedding-card[data-orientation="landscape"] .detail-icon,
main.gcc-preview-wedding-card[data-orientation="landscape"] .detail-icon {
width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .detail-icon svg,
.gcc-preview-wedding-card[data-orientation="landscape"] .detail-icon img,
main.gcc-preview-wedding-card[data-orientation="landscape"] .detail-icon svg,
main.gcc-preview-wedding-card[data-orientation="landscape"] .detail-icon img { width: 14px; height: 14px; display: block; }
.gcc-preview-wedding-card[data-orientation="landscape"] .detail-label,
main.gcc-preview-wedding-card[data-orientation="landscape"] .detail-label { margin-bottom: 4px; }
.gcc-preview-wedding-card[data-orientation="landscape"] .detail-value,
main.gcc-preview-wedding-card[data-orientation="landscape"] .detail-value {
overflow: hidden;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-map-button,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-map-button { padding: 3px 9px; margin-top: 4px; }
/* Footer */
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-footer,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-footer { padding: 0 18px; }
/* ── 6c. Landscape card view — scale √2 (÷1.414) so với v7, khớp A4 in ấn ── */
.gcc-wedding-card[data-orientation="landscape"] {
max-width: 794px; min-height: 447px; padding: 0; gap: 0;
grid-template-rows: auto 1fr 40px;
}
/* Photo */
.gcc-wedding-card[data-orientation="landscape"] .wedding-photo-section { width: min(113px, 55%); margin-top: 21px; }
.gcc-wedding-card[data-orientation="landscape"] .wedding-photo-placeholder svg { width: 42px; height: 42px; }
.gcc-wedding-card[data-orientation="landscape"] .wedding-photo-placeholder span { font-size: 10px; }
/* Header */
.gcc-wedding-card[data-orientation="landscape"] .wedding-header {
gap: 6px; padding: 11px 17px 21px 17px; overflow: visible;
}
.gcc-wedding-card[data-orientation="landscape"] .invitation-title,
.gcc-wedding-card[data-orientation="landscape"] .wedding-invitation-title { text-transform: uppercase; }
.gcc-wedding-card[data-orientation="landscape"] .wedding-ornament { display: none !important; }
.gcc-wedding-card[data-orientation="landscape"] .wedding-ornament img { display: none !important; }
.gcc-wedding-card[data-orientation="landscape"] .couple-names,
.gcc-wedding-card[data-orientation="landscape"] .wedding-couple-names { gap: 6px; overflow: hidden; }
.gcc-wedding-card[data-orientation="landscape"] .groom-name,
.gcc-wedding-card[data-orientation="landscape"] .bride-name { flex-shrink: 1; min-width: 0; }
.gcc-wedding-card[data-orientation="landscape"] .ampersand { flex-shrink: 0; }
.gcc-wedding-card[data-orientation="landscape"] .wedding-parents-names { max-height: none; overflow: visible; text-align: center; }
.gcc-wedding-card[data-orientation="landscape"] .wedding-divider {
width: 80%;
margin: 6px auto;
background: transparent;
border: none;
height: auto;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.gcc-wedding-card[data-orientation="landscape"] .wedding-divider__line {
flex: 1 1 auto;
height: 1px;
background: currentColor;
opacity: 0.35;
}
.gcc-wedding-card[data-orientation="landscape"] .wedding-divider__icon svg {
width: 60px;
height: 30px;
display: block;
}
/* Content */
.gcc-wedding-card[data-orientation="landscape"] .wedding-content { gap: 11px; padding: 21px 21px 14px 17px; overflow: hidden; }
/* Message — 40% */
.gcc-wedding-card[data-orientation="landscape"] .invitation-message,
.gcc-wedding-card[data-orientation="landscape"] .wedding-message {
padding: 11px 14px;
}
/* Details */
.gcc-wedding-card[data-orientation="landscape"] .wedding-event-details { padding: 6px; }
.gcc-wedding-card[data-orientation="landscape"] .wedding-detail-item { gap: 4px; padding: 10px 11px; }
.gcc-wedding-card[data-orientation="landscape"] .detail-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gcc-wedding-card[data-orientation="landscape"] .detail-icon svg,
.gcc-wedding-card[data-orientation="landscape"] .detail-icon img { width: 16px; height: 16px; display: block; }
.gcc-wedding-card[data-orientation="landscape"] .detail-label { margin-bottom: 3px; }
.gcc-wedding-card[data-orientation="landscape"] .wedding-map-button { padding: 4px 11px; border-radius: 14px; margin-top: 4px; }
/* Footer card view — 40px (đã scale từ 56px theo ÷1.414) */
.gcc-wedding-card[data-orientation="landscape"] .wedding-footer { padding: 0 21px; }
.gcc-wedding-card[data-orientation="landscape"] .footer-message { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ==========================================================================
7. PRINT
========================================================================== */
@media print {
@page { margin: 0; }
.gcc-wedding-card[data-orientation="portrait"] { width: 210mm !important; min-height: 297mm !important; transform: none !important; }
.gcc-wedding-card[data-orientation="landscape"] { width: 297mm !important; min-height: 210mm !important; transform: none !important; }
.gcc-wedding-card { page-break-inside: avoid; }
.wedding-map-button { display: none !important; }
}
/* ==========================================================================
8. MOBILE — responsive đơn giản
--------------------------------------------------------------------------
Mọi layout/font/spacing kế thừa từ section 5 và 6. Mobile chỉ cần đảm bảo:
• Card không tràn ngang ra ngoài viewport.
• Padding container thoáng vừa đủ cho ngón tay chạm.
• Preview landscape stack về portrait 9:16 (16:9 không vừa màn hình dọc).
CARD VIEW landscape (.gcc-wedding-card) được JS xử lý riêng:
gcc-wedding-mobile-orientation.js đổi data-orientation="landscape" →
"portrait" khi viewport ≤ 768px, nên CSS Section 5 (portrait) tự apply,
không cần force selector .gcc-wedding-card[data-orientation="landscape"]
trong @media này.
========================================================================== */
@media (max-width: 768px) {
/* Container ngoài: padding nhỏ, không scroll ngang */
#gccWeddingPreview {
padding: 12px;
}
/* Portrait — co theo viewport: vừa màn hình nhưng không vượt 360px */
.gcc-preview-wedding-card[data-orientation="portrait"],
main.gcc-preview-wedding-card[data-orientation="portrait"],
.gcc-wedding-card[data-orientation="portrait"] {
width: min(360px, 100%);
}
/* Landscape preview & card view → stack 1 cột (9:16) trên mobile.
Lý do: landscape 16:9 trên màn dọc luôn quá nhỏ để đọc, stack cho dễ xem. */
#wedding_orientation option[value="landscape"] { display: none; }
.gcc-preview-wedding-card[data-orientation="landscape"],
main.gcc-preview-wedding-card[data-orientation="landscape"] {
display: flex;
flex-direction: column;
grid-template-columns: unset;
grid-template-rows: unset;
width: min(360px, 100%);
max-width: min(360px, 100%);
aspect-ratio: 9 / 16;
min-height: 0;
padding: 14px;
gap: 8px;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-photo-section,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-photo-section {
grid-column: unset; grid-row: unset;
width: min(120px, 50%); aspect-ratio: 1 / 1; height: auto;
align-self: center; justify-self: unset; margin: 0 auto 8px;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-header,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-header {
grid-column: unset; grid-row: unset;
border-right: 0;
padding: 0 8px 4px;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-content,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-content {
grid-column: unset; grid-row: unset;
flex: 1 1 0;
padding: 0 8px;
}
.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-footer,
main.gcc-preview-wedding-card[data-orientation="landscape"] .wedding-footer {
grid-column: unset; grid-row: unset;
/* border-top:0 + background:transparent: visual reset → wedding-tokens.css § Mobile */
padding: 4px 8px;
}
}
/* ═══════════════════════════════════════════════════════════════════════
FOOTER MESSAGE — PLACEHOLDER STATE
─────────────────────────────────────────────────────────────────────
Khi user chưa nhập closing message, JS applyFooter() in placeholder
text (lấy từ data-placeholder attr) và add class .is-placeholder.
Style nhạt + italic để phân biệt với nội dung thật.
Áp dụng cho cả preview và card view, mọi orientation.
═══════════════════════════════════════════════════════════════════════ */
.gcc-preview-wedding-card .footer-message.is-placeholder,
main.gcc-preview-wedding-card .footer-message.is-placeholder,
.gcc-wedding-card .footer-message.is-placeholder {
opacity: 0.45;
}