Add responsive mobile broadsheet layout and iPhone 15 Pro visual renders

2026-10-10 14:21:55 +08:00
parent 6fa424bab7
commit 798c3b6068
6 changed files with 169 additions and 0 deletions
@@ -569,6 +569,175 @@
            border-top: 1px solid var(--border-hairline);
            padding-top: 20px;
        }
+    
+        /* ============================================================
+           MOBILE & TABLET RESPONSIVE SYSTEM (NYT & FT Mobile Standards)
+           ============================================================ */
+        @media (max-width: 992px) {
+            .container { padding: 0 20px; }
+            .lead-grid {
+                grid-template-columns: 1fr;
+                gap: 32px;
+            }
+            .zone-left, .zone-center {
+                padding-right: 0;
+                border-right: none;
+                border-bottom: 1px solid var(--border-hairline);
+                padding-bottom: 28px;
+            }
+            .ribbon-grid-4 {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 20px;
+            }
+            .ribbon-card:nth-child(2) { border-right: none; padding-right: 0; }
+            .dock-items-row {
+                grid-template-columns: 1fr;
+                gap: 16px;
+            }
+            .footer-columns {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 24px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            body { font-size: 15.5px; }
+            .container { padding: 0 16px; }
+
+            /* Top Utility Strip on Mobile */
+            .top-utility-bar {
+                padding: 6px 16px;
+                flex-direction: column;
+                gap: 6px;
+                align-items: stretch;
+            }
+            .util-left {
+                justify-content: space-between;
+                font-size: 10.5px;
+            }
+            .util-center {
+                display: flex;
+                overflow-x: auto;
+                white-space: nowrap;
+                -webkit-overflow-scrolling: touch;
+                padding: 4px 0;
+                font-size: 10px;
+                scrollbar-width: none;
+            }
+            .util-center::-webkit-scrollbar { display: none; }
+            .util-right {
+                display: flex;
+                justify-content: space-between;
+                border-top: 1px solid #2D2723;
+                padding-top: 5px;
+                font-size: 11px;
+            }
+
+            /* Masthead on Mobile */
+            header.masthead { padding: 18px 0 0; }
+            .masthead-inner {
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+            }
+            .masthead-edition, .masthead-weather-fx {
+                text-align: center;
+                font-size: 10.5px;
+            }
+            .brand-logo {
+                font-size: 42px;
+                letter-spacing: 0.16em;
+                gap: 10px;
+            }
+            .brand-arabic { font-size: 30px; }
+            .masthead-motto { font-size: 13px; margin-top: 2px; }
+
+            /* Mobile Horizontal Scrollable Navigation */
+            nav.section-nav {
+                justify-content: flex-start;
+                overflow-x: auto;
+                white-space: nowrap;
+                -webkit-overflow-scrolling: touch;
+                padding: 10px 16px;
+                margin-left: -16px;
+                margin-right: -16px;
+                gap: 18px;
+                font-size: 11.5px;
+                scrollbar-width: none;
+            }
+            nav.section-nav::-webkit-scrollbar { display: none; }
+
+            /* Lead Headlines on Mobile */
+            .main-headline {
+                font-size: 27px;
+                line-height: 1.18;
+            }
+            .visual-anchor {
+                height: 220px;
+            }
+            .center-story h2 {
+                font-size: 23px;
+                line-height: 1.22;
+            }
+            .center-dual-split {
+                grid-template-columns: 1fr;
+                gap: 16px;
+            }
+            .center-dual-split .mini-card:last-child {
+                padding-left: 0;
+                border-left: none;
+                border-top: 1px solid var(--border-hairline);
+                padding-top: 16px;
+            }
+
+            /* Semafor Takeaway Drawer on Mobile */
+            .takeaway-drawer {
+                padding: 12px 14px;
+                font-size: 13px;
+            }
+            .takeaway-row {
+                grid-template-columns: 1fr;
+                gap: 4px;
+            }
+            .takeaway-tag {
+                font-size: 10px;
+                color: var(--accent-green);
+                display: block;
+                margin-bottom: 2px;
+            }
+
+            /* Opinion Rail on Mobile */
+            .jauhari-opinion-card { padding: 16px; }
+            .jauhari-opinion-card h3 { font-size: 17px; }
+            .columnist-item {
+                grid-template-columns: 40px 1fr;
+                gap: 10px;
+                padding-bottom: 12px;
+            }
+            .columnist-avatar { width: 40px; height: 40px; }
+            .columnist-headline { font-size: 14.5px; }
+
+            /* Ribbons on Mobile */
+            .ribbon-grid-4 {
+                grid-template-columns: 1fr;
+                gap: 18px;
+            }
+            .ribbon-card {
+                border-right: none;
+                padding-right: 0;
+                border-bottom: 1px solid var(--border-hairline);
+                padding-bottom: 14px;
+            }
+            .ribbon-card:last-child { border-bottom: none; }
+            .ribbon-thumb { height: 180px; }
+
+            /* Footer on Mobile */
+            .footer-columns {
+                grid-template-columns: 1fr;
+                gap: 20px;
+            }
+        }
+
    </style>
 </head>
 <body>